talent_map/uniapp/pages/policy/index.vue

<template>

    <view>
        <!-- 头部背景和搜索 -->
        <view>
            <image :src="appConfig.mobile_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-40"
                    v-for="(item,index) in talentTypeList">
                    <image :src="item.image" mode="widthFix"></image>
                </router-link>
            </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>
    </view>

</template>

<script>
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import {
        submitSurveyEnterprise
    } from '@/api/app';
    import {
        getCaptcha
    } from '@/utils/tools'
    const app = getApp()
    export default {
        data() {
            return {
                show: {},
                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,
                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: '集成电路'
                }, ],

                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()
        },
        onShow() {
            // this.getHomeFun();
            // this.getUser();
        },
        onHide() {},
        onPullDownRefresh() {
            // this.getUser().then(() : {
            //     uni.stopPullDownRefresh();
            // })
        },
        methods: {
            refreshCaptcha(){
                this.captchaImg = getCaptcha()
                 this.$forceUpdate();
            },
            // ...mapActions(['getUser']),
            // 改变当前的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 (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) {
                this.show[index] = false
                this.$forceUpdate();
            },
            async handleConsult() {
                console.log(this.info)
                //表单必填验证
                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;
                }
                //todo API验证码
                // if (this.captcha == '' || this.captcha != 'abcd') {
                //     this.$toast({
                //         title: '验证码错误'
                //     })
                //     return false;
                // }

                const {
                    status,
                    data,
                    msg
                } = await submitSurveyEnterprise(this.info);

                if (status == 1) {
                    uni.setStorageSync('enterpriseScore', data);
                    uni.navigateTo({
                        url: '/pages/policy/score'
                    })
                }
            },
        },
        computed: {
            ...mapGetters(['appConfig']),
        }
    }
</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;
        }
    }
</style>