hr_yuncaijiao_applet/pages/me/RealInfo.vue

<template>

    <view>

        <NavBar ref="nav" navTitle="真实信息" :showIcon="true" :supportChange="false">
        </NavBar>

        <loading-state ref="pageView" @request="request">

            <view @click="remark()" class="menu-item">
                <text class="text">姓名</text>
                <text class="explain">{{page.realName}}</text>
                <image class="more" src="../../static/more.png"></image>
            </view>

            <view class="line-thin"></view>

            <view @click="clickSex()" class="menu-item">
                <text class="text">性别</text>
                <text class="explain">{{page.sex}}</text>
                <image class="more" src="../../static/more.png"></image>
            </view>

            <view class="line-thin"></view>

            <uni-datetime-picker style="flex: 1;margin-top: 1px;" type="date" :value="page.birthDay" :start="startDate"
                :end="endData" v-model="page.birthDay">
                <view class="menu-item">
                    <text class="text">生日</text>
                    <text class="explain">{{stringIsEmpty(page.birthDay) ?"请选择生日":page.birthDay}}</text>
                    <image class="more" src="../../static/more.png"></image>
                </view>
            </uni-datetime-picker>

            <view class="line-thin"></view>
            <pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
                <view class="menu-item">
                    <text class="text">地区</text>
                    <text class="explain">{{stringIsEmpty(page.regionName) ?"请选择地区":page.regionName}}</text>
                    <image class="more" src="../../static/more.png"></image>
                </view>
            </pick-regions>

            <view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); position: absolute; bottom: 30px;
				width: 90%;border-radius: 100rpx;height: 80rpx;display: flex;margin-left: 5%;
				flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;"
                @click="realInfoAttestation">
                保存</view>

        </loading-state>

        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="修改姓名" :value="page.realName" placeholder="请输入内容"
                @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>

    </view>


</template>

<script>
    import pickRegions from '@/components/pick-regions/pick-regions.vue'
    export default {
        components: {
            pickRegions
        },
        created() {
            this.startDate = this.TimeFormat(this.CurrentMillions() - 100 * 365 * 24 * 60 * 60 * 1000);
            this.endData = this.TimeFormat(this.CurrentMillions());
        },
        data() {
            return {
                region: [],
                defaultRegion: ['北京市', '市辖区', '东城区'],
                defaultRegionCode: '110101',
                region_sid_path: "",
                address_path: "北京市/市辖区/东城区",
                startDate: "1921-01-01",
                endData: "",
                pickerDate: "",
                page: {
                    "birthDay": "",
                    "realName": "",
                    "regionCode": "",
                    "regionName": "",
                    "sex": ""
                },
                contorl: {
                    listSex: ["男", "女"]
                },
            }
        },
        onLoad(options) {
            this.request()
        },
        methods: {
            // 修改姓名
            remark() {
                this.$refs.inputDialog.open()
            },
            dialogInputConfirm(val) {
                this.page.realName = val
            },
            request() {
                let _this = this
                _this.$api.getRealInfo(getApp().globalData.sid).then((resp) => {
                    console.log(JSON.stringify(resp));
                    _this.page = resp
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(2)
                    })
                }).catch(e => {
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(1)
                    })
                })
            },
            clickSex() {
                let _this = this;
                uni.showActionSheet({
                    itemList: this.contorl.listSex,
                    success: function(res) {
                        _this.selectSex(res.tapIndex + 1)
                    }
                });
            },
            selectSex(id) {
                let _this = this
                switch (id) {
                    case 1:
                        this.page.sex = '男'
                        break;
                    case 2:
                        this.page.sex = '女'
                        break;
                    case 3:
                        break
                }
            },
            modibirthDay(e) {
                this.page.birthDay = e
            },
            realInfoAttestation() {
                this.page.userSid = getApp().globalData.sid
                let _this = this
                _this.$api.saveRealInfo(this.page).then((resp) => {
                    uni.$emit("real-info")
                    uni.navigateBack()
                }).catch(e => {
                    console.log(e);
                })
            },
            // 获取选择的地区
            handleGetRegion(region) {
                let code = region.map(item => item.code)
                let name = region.map(item => item.name)
                this.page.regionCode = code[2]
                this.page.regionName = name[0] + "/" + name[1] + "/" + name[2]
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f1f2f3;
    }


    .menu-item {
        height: 112rpx;
        width: auto;
        display: flex;
        flex-direction: row;
        background-color: #fff;
        align-items: center;
        padding-left: 36rpx;
        padding-right: 36rpx;
    }

    .more {
        width: 35rpx;
        height: 35rpx;
        float: right;
    }

    .menu-item .icon {
        width: 69rpx;
        height: 35rpx;
    }

    .menu-item .text {
        font-size: 32rpx;
        color: #101010;
        flex: 1;
        float: left;
    }

    .menu-item .explain {
        font-size: 28rpx;
        color: #828282;
        margin-right: 10rpx;
    }

    .line-thin {
        height: 1rpx;
        width: 100%;
        background-color: #eee;
    }
</style>