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)">
                    <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'">
					    <input type="text" v-model="info[item.name]" 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>

</template>

<script>
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import {
        getSurvey,
        submitSurvey
    } from '@/api/app';
    import {
        getCaptcha
    } from '@/utils/tools'
    const app = getApp()
    export default {
        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]
                        }
                        //checkbox多选判断，初始化checked状态
                        if (item.type == 'checkbox') {
                            item.checked = []
                            console.log(item.value)
                            item.value.forEach((value, key) => {
                                item.checked[key] = false
                            })
                            return item;
                        }
                    })
                }
            },
            //提交表单
            async handleConsult() {
                // //todo API验证码
                // if (this.captcha == '' || this.captcha != 'abcd') {
                //     this.$toast({
                //         title: '验证码错误'
                //     })
                //     return false;
                // }
                const {
                    status,
                    data,
                    msg
                } = await submitSurvey(this.info);
                if (status == 1) {
                    uni.setStorageSync('policyList', data);
                    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;
        }
    }
</style>