talent_map/uniapp/pages/policy/index.vue

<template>

    <view>
        <!-- 头部背景和搜索 -->
        <view>
            <image :src="appConfig.policy_top_bg" class="w-full" mode="widthFix"></image>
        </view>
        <!-- tab -->
        <u-tabs :list="typeList" :is-scroll="false" :bold="true" active-color="#DD4250" height="80" font-size="28"
            :current="currentTab" @change="changeTab" />
        <!-- 我是人才 -->
        <view class="p-70 p-t-40 talent-tab" v-if="currentTab == 0">
            <view class="flex-col col-center">
                <!-- <view class="title">您所从事的行业:</view> -->
                <router-link :to="{ path: '/pages/policy/talent', query: { type: item.type, title: item.title }}"
                    class="m-t-20" v-for="(item,index) in talentTypeList">
                    <image :src="item.image" mode="widthFix"></image>
                </router-link>
            </view>
        </view>
		<!-- 测试默认现代产业表单提交 -->
        <view class="huodong-details" v-if="currentTab == 999">

            <view class="p-30 ">
                <view class="detail-title">
                    人才信息提交
                </view>
                <view class="content-box bg-white m-t-30">
                    <view class="detail-cell row-between u-border-bottom" v-for="(item, index) in surveyList"
                        @tap="pickerShow(item.name)" v-if="item.type != 'array'">
                        <view class="width75">
                            {{item.description}}
                        </view>
                        <view class="text-right flex-1" v-if="item.type == 'radio' || item.type == 'select'">
                            <text class="muted">{{item.value[survey[item.name]]}}</text>
                            <u-icon name="arrow-right" size="28" color="#B8B8B8" label-pos="left"></u-icon>
                            <u-picker v-model="show[item.name]" mode="selector" :range="item.value"
                                @confirm="pickerConfirm(index, $event)" @cancel="pickerCancel(index)"></u-picker>
                        </view>
                        <view class="text-right flex-1" v-if="item.type == 'checkbox'">
                            <u-checkbox-group shape="circle" active-color="#DD4250" :name="item.name"
                                @change="groupChange(index, $event)">
                                <u-checkbox :name="value" v-for="(value, key) in item.value" :key="key"
                                    v-model="item.checked[key]">
                                    {{value}}
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>

                        <view class="text-right flex-1" v-if="item.type == 'text'">
                            <cus-selects :data="item.value" v-model="survey[item.name]" :clearable='true'
                                :filterable='true' :searchType='1' arrLeft='300' placeholder='输入搜索'></cus-selects>
                        </view>
                    </view>


                    <view class="detail-cell row-between u-border-bottom">
                        <view class="bold">
                            验证码
                        </view>
                        <view class="text-right flex-1 flex row-right">
                            <input type="text" v-model="survey.code" placeholder="请输入">
                            <image :src="captchaImg" mode="heightFix" style="height: 54rpx;" class="m-l-10"
                                @tap="refreshCaptcha"></image>
                        </view>
                    </view>


                </view>
            </view>

            <view class="footer">
                <button class="white btn lg" @click="handleConsult">提交</button>
            </view>

        </view>


        <!-- 我是企业 -->
        <view v-if="currentTab == 1">
            <view class="huodong-details">

                <view class="p-30 ">
                    <view class="detail-title">
                        一、企业基本信息
                    </view>
                    <view class="content-box bg-white m-t-30">
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="width75">
                                企业名称
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.name" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom" @tap="pickerShow('estdate')">
                            <view class="bold">
                                企业成立日期
                            </view>
                            <view class="text-right flex-1">
                                <text class="muted">{{info.estdate}}</text>
                                <u-icon name="arrow-right" size="28" color="#B8B8B8" :label="info.estdate ? '' :'请选择'"
                                    label-pos="left"></u-icon>
                                <u-picker v-model="show.estdate" mode="time" @confirm="pickerConfirm('estdate', $event)"
                                    @cancel="pickerCancel('estdate')"></u-picker>
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                企业注册地
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.address" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                企业实际经营地
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.busAddress" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                企业有效l类知识产权数
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.propertyNumber" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold" style="width: 400rpx;">
                                有效、高企认定中未使用过的II类知识产权数
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.propertyNumber2" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom" @tap="pickerShow('propertyMode')">
                            <view class="bold">
                                知识产权获取方式
                            </view>
                            <view class="text-right flex-1">
                                <text class="muted">{{propertyMode.label}}</text>
                                <u-icon name="arrow-right" size="28" color="#B8B8B8" :label="propertyMode ? '' :'请选择'"
                                    label-pos="left"></u-icon>
                                <u-select v-model="show.propertyMode" mode="single-column" :list="propertyModeList"
                                    @confirm="pickerConfirm('propertyMode', $event)"></u-select>

                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom" @tap="pickerShow('isStandard')">
                            <view class="bold" style="width: 400rpx;">
                                企业参与编制国家标准、行业标准检测方法、技术规范的情况
                            </view>
                            <view class="text-right flex-1">
                                <text class="muted">{{isStandard.label}}</text>
                                <u-icon name="arrow-right" size="28" color="#B8B8B8" :label="isStandard ? '' :'请选择'"
                                    label-pos="left"></u-icon>
                                <u-select v-model="show.isStandard" mode="single-column" :list="isStandardList"
                                    @confirm="pickerConfirm('isStandard', $event)"></u-select>
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold flex" style="width: 400rpx;">
                                <view>科技成果数</view>
                                <view class="m-l-8 m-r-8 primary" style="font-size: 20rpx;">科技成果数有效期提示</view>
                                <u-icon name="info-circle" color="#DD4250"></u-icon>
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.achievementNumber" placeholder="请输入">
                            </view>
                        </view>
                    </view>

                    <view class="detail-title m-t-30">
                        二、研发组织管理水平评测(多选)
                    </view>
                    <view class="content-box m-t-30  bj-w ">

                        <!--  <u-checkbox-group shape="circle" active-color="#DD4250">
                            <view class="m-t-15 m-b-15" v-for="(item, index) in manageLevelList" :key="index">
                                <u-checkbox v-model="item.checked" :name="item.name">{{item.name}}</u-checkbox>
                            </view>
                        </u-checkbox-group> -->

                        <u-checkbox-group shape="circle" active-color="#DD4250">
                            <u-checkbox :name="item.name" v-for="(item, index) in manageLevelList" :key="index"
                                v-model="item.checked" @change="checkboxChange($event)">
                                {{item.label}}
                            </u-checkbox>
                        </u-checkbox-group>
                    </view>

                    <view class="detail-title m-t-30">
                        三、企业成长性评测
                    </view>
                    <view class="content-box m-t-30  bj-w ">
                        <view class="detail-title p-t-30">
                            第一年
                        </view>
                        <view class="detail-cell row-between ">
                            <view class="bold">
                                净资产（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.netAssets1" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                销售收入（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.saleRevenue1" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-title p-t-30">
                            第二年
                        </view>
                        <view class="detail-cell row-between ">
                            <view class="bold">
                                净资产（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.netAssets2" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                销售收入（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.saleRevenue2" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-title p-t-30">
                            第三年
                        </view>
                        <view class="detail-cell row-between ">
                            <view class="bold">
                                净资产（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.netAssets3" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                销售收入（万元）
                            </view>
                            <view class="text-right flex-1">
                                <input type="text" v-model="info.saleRevenue3" placeholder="请输入">
                            </view>
                        </view>
                        <view class="detail-cell row-between u-border-bottom">
                            <view class="bold">
                                验证码
                            </view>
                            <view class="text-right flex-1 flex row-right">
                                <input type="text" v-model="info.code" placeholder="请输入">
                                <image :src="captchaImg" mode="heightFix" style="height: 54rpx;" class="m-l-10"
                                    @tap="refreshCaptcha"></image>
                            </view>
                        </view>


                    </view>
                </view>

                <view class="footer">
                    <button class="white btn lg" @click="handleConsult">提交</button>
                </view>
            </view>
        </view>
        
         <u-tabbar :list="tabarList"></u-tabbar>
    </view>

</template>

<script>
    import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
    import {
     mapGetters,
     mapActions,
     mapMutations
    } from 'vuex'
    import {
        submitSurveyEnterprise,
        getSurvey,
        submitSurvey
    } from '@/api/app';
    import {
        getCaptcha
    } from '@/utils/tools'
    const app = getApp()
    export default {
        components: {
            cusSelects
        },
        data() {
            return {
                show: {},
                survey: {},
                surveyList: [],
                propertyModeList: [{
                    value: 1,
                    label: '自主研发'
                }, {
                    value: 2,
                    label: '仅有受让、受赠和并购等'
                }, ],
                isStandardList: [{
                    value: 1,
                    label: '是'
                }, {
                    value: 0,
                    label: '否'
                }, ],
                captcha: '',
                info: {
                    'name': '',
                    'address': '',
                    'estdate': '',
                    'busAddress': '',
                    'propertyNumber': '', //企业有效l类知识产权数
                    'propertyNumber2': '', //有效、高企认定中未使用过的II类知识产权数
                    'propertyMode': '', //知识产权获取方式 1：自主研发 2：仅有受让、受赠和并购等
                    'isStandard': '', //企业参与编制国家标准、行业标准、检测方法、技术规范的情况  1：是 0：否
                    'achievementNumber': '', //科技成果数,

                    'manageLevel1': 0, //定制了企业研究开发组织管理制度
                    'manageLevel2': 0, //建立了研发投入核算体系
                    'manageLevel3': 0, //编制了研发费用辅助帐
                    'manageLevel4': 0, //设立了内部科技技术研究开发机构并具备相应的科研条件
                    'manageLevel5': 0, //与国内外研究开发机构开展多种形式的产学研合作
                    'manageLevel6': 0, //建立了科技成果转化的组织实施与激励奖励制度
                    'manageLevel7': 0, //建立开放式的创新创业平台
                    'manageLevel8': 0, //建立了科技人员的培养进修制度
                    'manageLevel9': 0, //建立了职工技能培训制度

                    'netAssets1': '', //第1年   净资产
                    'netAssets2': '', //第2年   净资产
                    'netAssets3': '', //第3年   净资产
                    'saleRevenue1': '', //第1年  销售收入
                    'saleRevenue2': '', //第2年  销售收入
                    'saleRevenue3': '' //第3年  销售收入
                },
                infoValidate: {
                    'name': '企业名称',
                    'address': '企业注册地',
                    'estdate': '企业成立时间',
                    'busAddress': '企业实际经营地',
                    'propertyNumber': '企业有效l类知识产权数', //
                    'propertyNumber2': '有效、高企认定中未使用过的II类知识产权数', //
                    'achievementNumber': '科技成果数', //,
                    'netAssets1': '第1年 净资产', //
                    'netAssets2': '第2年 净资产', //
                    'netAssets3': '第3年 净资产', //
                    'saleRevenue1': '第1年 销售收入', //
                    'saleRevenue2': '第2年 销售收入', //
                    'saleRevenue3': '第3年 销售收入' //
                },

                typeList: [{
                    name: '我是人才',
                }, {
                    name: '我是企业',
                }],
                currentTab: 0,
                type: 'industry', //默认类型
                talentTypeList: [{
                    'image': '/static/images/type-1.png',
                    type: 'industry',
                    title: '现代产业'
                }, {
                    'image': '/static/images/type-2.png',
                    type: 'education',
                    title: '高等教育'
                }, {
                    'image': '/static/images/type-3.png',
                    type: 'medical',
                    title: '医疗卫生'
                }, {
                    'image': '/static/images/type-4.png',
                    type: 'circuit',
                    title: '集成电路'
                }, {
                    'image': '/static/images/type-5.png',
                    type: 'special',
                    title: '专项政策'
                }, ],

                manageLevelList: [{
                        label: '1、制定了企业研究开发的组织管理制度',
                        name: 'manageLevel1',
                    },
                    {
                        label: '2、建立了研发投入核算体系',
                        name: 'manageLevel2',
                    },
                    {
                        label: '3、编制了研发费用辅组账',
                        name: 'manageLevel3',
                    },
                    {
                        label: '4、设立了内部科学技术研究开发机构并具备相应的科技',
                        name: 'manageLevel4',
                    },
                    {
                        label: '5、与国内外研究开发机构开展多种形式产学研合作',
                        name: 'manageLevel5',
                    },
                    {
                        label: '6、建立了科技成果转化的组织实施与激励奖励制度',
                        name: 'manageLevel6',
                    },
                    {
                        label: '7、建立开放式的创新创业平台',
                        name: 'manageLevel7',
                    },
                    {
                        label: '8、建立了科技人员的培养进修制度',
                        name: 'manageLevel8',
                    },
                    {
                        label: '9、建立了职工技能培训制度',
                        name: 'manageLevel9',
                    }
                ],
                top: 172
            }
        },
        onLoad() {
            this.propertyMode = this.propertyModeList[0]
            this.isStandard = this.isStandardList[0]
            this.info.propertyMode = this.propertyMode.value
            this.info.isStandard = this.isStandard.value

            this.captchaImg = getCaptcha()
            uni.setStorageSync('TABBAR_TYPE', 'policy');
            this.setTabarList({
                type: 'policy'
            })
        },
        onShow() {
            // this.getHomeFun();
            // this.getUser();
            this.getSurvey();
        },
        onHide() {},
        onPullDownRefresh() {
            // this.getUser().then(() : {
            //     uni.stopPullDownRefresh();
            // })
        },
        methods: {
             ...mapMutations(["setTabarList"]),
            refreshCaptcha() {
                this.captchaImg = getCaptcha()
                this.$forceUpdate();
            },
            // ...mapActions(['getUser']),
            groupChange(index, detail) {
                let item = this.surveyList[index]
                this.survey[item.name] = detail
            },
            // 改变当前的Tabs位置
            changeTab(index) {
                this.currentTab = index;
            },
            checkboxChange(detail) {
                this.info[detail.name] = detail.value ? 1 : 0
            },
            pickerShow(index) {
                this.show[index] = true
                this.$forceUpdate();
            },
            pickerConfirm(index, obj) {
                //人才
                if (this.currentTab == 0) {
                    let item = this.surveyList[index]
                    this.survey[item.name] = [obj[0]]
                    this.show[item.name] = false
                } else {
                    //企业
                    //日期
                    if (index == 'estdate') {
                        this.info[index] = obj['year'] + '-' + obj['month'] + '-' + obj['day']
                    } else {
                        //单选框
                        this[index] = obj[0]
                        this.info[index] = obj[0].value
                    }
                }
                this.$forceUpdate();

            },
            pickerCancel(index, obj) {
                if (this.currentTab == 0) {
                    let item = this.surveyList[index]
                    this.show[item.name] = false
                } else {
                    this.show[index] = false
                }
                this.$forceUpdate();
            },
            async handleConsult() {
                if (this.currentTab == 0) {
                    if (!this.survey.code) {
                        this.$toast({
                            title: '请输入验证码'
                        })
                        return false;
                    }
                    const {
                        status,
                        data,
                        cengci,
                        msg
                    } = await submitSurvey(this.survey);
                    if (status == 1) {
                        uni.setStorageSync('policyList', data);
                        // uni.setStorageSync('policyCengci', cengci);
                        uni.navigateTo({
                            url: '/pages/policy/list',
                        })
                    }
                } else {
                    //表单必填验证
                    try {
                        Object.keys(this.infoValidate).forEach((key, index) => {
                            if (this.info[key] == '') {
                                throw new Error('请输入' + this.infoValidate[key])
                            }
                        })
                    } catch (e) {
                        this.$toast({
                            title: e.message
                        })
                        return false;
                    }
                    const {
                        status,
                        data,
                        msg
                    } = await submitSurveyEnterprise(this.info);

                    if (status == 1) {
                        uni.setStorageSync('enterpriseScore', data);
                        uni.navigateTo({
                            url: '/pages/policy/score'
                        })
                    }
                }
            },

            //获取动态表单
            async getSurvey() {
                const {
                    status,
                    data
                } = await getSurvey({
                    type: this.type
                });
                if (status == 1) {
                    this.surveyList = data

                    this.surveyList.map((item, index) => {
                        // this.show[item.name] = false;
                        //初始化radio的info
                        if (item.type == 'radio' || item.type == 'select') {
                            this.survey[item.name] = 0
                        }
                        //初始化模糊搜索框
                        if (item.type == 'text') {
                            item.value.forEach((value, key) => {
                                item.value[key] = {
                                    label: key + 1 + '、' + value,
                                    value: value
                                }
                            })
                        }

                        //checkbox多选判断，初始化checked状态
                        if (item.type == 'checkbox') {
                            item.checked = []
                            item.value.forEach((value, key) => {
                                item.checked[key] = false
                            })
                            return item;
                        }
                    })
                }
            },
        },
        computed: {
             ...mapGetters(['appConfig', 'tabarList']),
        }
    }
</script>

<style lang="less" scoped>
    .huodong-details {
        padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
    }

    .details-images {
        height: 408rpx;
        border-radius: 20rpx;
        overflow: hidden;
        width: 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .detail-title {
        // font-size: 36rpx;
        font-weight: bold;
        // padding: 30rpx 0;
    }

    .detail-cell {
        display: flex;
        // align-items: center;
        padding: 30rpx 0;

        .cell-img {
            padding: 5rpx 0;

            image {
                width: 48rpx;
                height: 48rpx;
                display: block
            }
        }

    }

    // .muted {
    //     color: #989898;
    //     padding-left: 10rpx;
    // }

    .detail-biaoti {
        // font-size: 36rpx;
        height: 88rpx;
        line-height: 88rpx;
    }

    .bj-w {
        background-color: #fff;
    }

    .padding-30 {
        padding: 0 30rpx !important;

    }

    .content-box {
        padding: 0 24rpx;
        box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        input {
            font-size: 28rpx;
        }

        textarea {
            width: 100%;
            height: 100rpx;
            font-size: 28rpx;
        }
    }

    .btn-r-border {
        position: relative;

        &::after {
            content: ' ';
            width: 1rpx;
            height: 36rpx;
            background-color: #CCCCCC;
            right: 0;
            top: 50%;
            margin-top: -18rpx;
            position: absolute;
        }
    }

    .width75 {
        width: 150rpx;
        font-weight: bold;
    }
</style>


<style lang="scss">
    .footer {
        left: 0%;
        bottom: 150rpx;
        width: 100%;
        padding: 0 24rpx;
        position: fixed;
        z-index: 99;

        .btn {
            height: 84rpx;
            line-height: 84rpx;
            background-color: $-color-primary;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
            border-radius: 18rpx 18rpx 18rpx 18rpx;
        }
    }

    page {
        padding: 0;
    }

    .talent-tab {
        .title {
            font-size: 36rpx;
            font-weight: 400;
            color: #333333;
        }
    }

    /deep/ .select_input {
        border: none !important;
    }

    /deep/ .select_modal_con {
        position: sticky;
        // left: -100px;
        margin-left: -200rpx;
        width: 700rpx;

        .select_modal {
            height: 300px;
        }

        .select_content_li {
            text-align: left !important;
            white-space: normal !important;
            overflow: auto !important;
            height: auto !important;
            line-height: normal !important;
            margin-bottom: 16rpx !important;
        }

        ::-webkit-scrollbar {
             display: block;
            /*滚动条整体样式*/
            width: 10px !important;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px !important;
        }

        ::-webkit-scrollbar-thumb {
           
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #535353;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }
    }
</style>