talent_map/uniapp/pages/policy/talent.vue

<template>
    <view class="huodong-details">

        <view class="p-30 ">
            <view class="detail-title">
                {{ 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">{{info[item.name]}}</text>
                        <u-icon name="arrow-right" size="28" color="#B8B8B8"
                            :label="info[item.name]!= undefined ? '' :'请选择'" 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="info[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="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>

</template>

<script>
    import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import {
        getSurvey,
        submitSurvey
    } from '@/api/app';
    import {
        getCaptcha
    } from '@/utils/tools'
    const app = getApp()
    export default {
        components: {
            cusSelects
        },
        data() {
            return {
                show: {},
                surveyList: [],
                info: {},
                captcha: '',
                top: 172,
                title: '人才信息'
            }
        },
        onLoad(o) {
            //人才类型
            this.type = this.$Route.query.type;
            this.title = this.title = this.$Route.query.title + '人才信息填写';
            this.getSurvey();
            this.captchaImg = getCaptcha()
        },
        onShow() {
            uni.setNavigationBarTitle({
                title: this.title
            });
        },
        onHide() {},
        onPullDownRefresh() {},
        methods: {
            refreshCaptcha() {
                this.captchaImg = getCaptcha()
                this.$forceUpdate();
            },
            // ...mapActions(['getUser']),
            groupChange(index, detail) {
                let item = this.surveyList[index]
                this.info[item.name] = detail
            },
            pickerShow(index) {
                this.show[index] = true
                this.$forceUpdate();
            },
            pickerConfirm(index, obj) {
                let item = this.surveyList[index]
                this.info[item.name] = item.value[obj[0]]
                this.show[item.name] = false
                this.$forceUpdate();
            },
            pickerCancel(index, obj) {
                let item = this.surveyList[index]
                this.show[item.name] = false
                this.$forceUpdate();
            },
            //获取动态表单
            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.info[item.name] = item.value[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;
                        }
                    })
                }
            },

            //提交表单
            async handleConsult() {
                if (!this.info.code) {
                    this.$toast({
                        title: '请输入验证码'
                    })
                    return false;
                }
                const {
                    status,
                    data,
                    cengci,
                    msg
                } = await submitSurvey(this.info);
                if (status == 1) {
                    uni.setStorageSync('policyList', data);
                    uni.setStorageSync('policyCengci', cengci);
                    uni.navigateTo({
                        url: '/pages/policy/list',
                    })
                }
            },
        },
        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: 30rpx;
        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: 100%;
        }
        .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;
        }
    }
</style>