diancan_uni/pages/user/info/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="user_thumb">
                <image class="thumb" :src="userInfo.thumb"></image>
            </view>
            <view class="user_info">
                <view class="item">
                    <view class="item_l">
                        <view class="label">昵称</view>
                        <view class="wenzi">{{ userInfo.nickname }}</view>
                    </view>
                </view>
                <view class="item">
                    <view class="item_l">
                        <view class="label">手机</view>
                        <view class="wenzi">{{ userInfo.phone ? userInfo.phone : '未绑定' }}</view>
                    </view>
                    <view class="item_r red" @tap="onShowChangePhone">更换手机号</view>
                </view>
                <view class="item">
                    <view class="item_l">
                        <view class="label">性别</view>
                        <view class="wenzi">{{ userInfo.sex == 0 ? '保密' : userInfo.sex == 1 ? '男' : '女' }}</view>
                    </view>
                </view>
                <view class="item">
                    <view class="item_l">
                        <view class="label">生日</view>
                        <view class="wenzi">{{ userInfo.birthday ? userInfo.birthday : '未设置' }}</view>
                    </view>
                    <view class="item_r red" @tap="onShowBirthPop">修改</view>
                </view>
            </view>
        </view>
        <!-- 更换手机号 -->
        <van-overlay class-style="background: rgba(0,0,0,.3);" :show="showPhonePop">
            <view class="phoneWrap">
                <view class="title">更换手机号</view>
                <view class="form_wrap">
                    <view class="form_item">
                        <view class="item_label">新手机号码</view>
                        <view class="item_file">
                            <van-field :value="phone" placeholder="请输入手机号码" :border="false" @change="getPhone" />
                            <button hover-class="none" class="btn_code" :disabled="codeLoading" :loading="codeLoading" @tap="sendCode">{{ codeBtnName }}</button>
                        </view>
                    </view>
                    <view class="form_item">
                        <view class="item_label">手机验证码</view>
                        <view class="item_file">
                            <van-field :value="code" placeholder="请输入手机验证码" :border="false" @change="getPhoneCode" />
                        </view>
                    </view>
                </view>
                <view class="btns">
                    <view class="btn cancel" @tap="onCloseChangePhone">取消</view>
                    <view class="btn" @tap="onConfirmChangePhone">确定</view>
                </view>
            </view>
        </van-overlay>
        <!-- 修改生日 -->
        <van-popup :show="showBirthPop" position="bottom">
            <van-datetime-picker type="date" :value="currentBirth" :max-date="maxDate" :min-date="minDate" @confirm="confirmBirthPop" @cancel="closeBirthPop" />
        </van-popup>
    </view>
</template>

<script>
// index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            userInfo: null,
            showPhonePop: false,
            codeBtnName: '获取验证码',
            delyTime: 60,

            // 单位s
            codeLoading: false,

            showBirthPop: false,
            maxDate: new Date().getTime(),
            minDate: '',
            sex: '',
            currentBirth: '',
            phone: '',
            code: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 生日的可选最小值 当前年份前50年

        let minYear = new Date().getFullYear() - 50;
        let str = minYear + '-' + '01-01';
        that.setData({
            minDate: new Date(str).getTime()
        }); // 获取用户信息

        that.getUrserInfo();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 更改性别 弃用
        onChangeSex(event) {
            let that = this;
            that.setData({
                sex: event.detail
            });
        },

        // 获取用户信息
        getUrserInfo() {
            let that = this;
            myPro
                .wxRequest('user/v2/userinfo', 'GET', {})
                .then((res) => {
                    that.setData({
                        userInfo: res.result
                    }); // 用户之前存过生日

                    if (res.result.birthday) {
                        let birthStr = res.result.birthday;
                        that.setData({
                            currentBirth: new Date(birthStr.replace(/-/g, '/')).getTime()
                        });
                    } else {
                        that.setData({
                            currentBirth: new Date().getTime()
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 打开更改手机号弹层
        onShowChangePhone() {
            let that = this;
            that.setData({
                showPhonePop: true
            });
        },

        // 关闭
        onCloseChangePhone() {
            let that = this;
            that.setData({
                showPhonePop: false
            });
        },

        // 获取输入信息 手机号
        getPhone: function (event) {
            let that = this;
            that.setData({
                phone: event.detail
            });
        },

        // 发送验证码
        sendCode() {
            let that = this;

            if (!that.phone || !/^1[3456789]\d{9}$/.test(that.phone)) {
                uni.showToast({
                    title: '手机号有误,请重新填写',
                    icon: 'none'
                });
                return;
            }

            let params = {
                phone: that.phone
            };
            myPro
                .wxRequest('user/send/verify-code', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        codeBtnName: that.delyTime + 's',
                        delyTime: that.delyTime,
                        codeLoading: true
                    });
                    let s = setInterval(function () {
                        let dely1 = parseInt(that.delyTime) - 1; // console.log(dely1);

                        that.setData({
                            codeBtnName: dely1 + 's',
                            delyTime: dely1
                        });

                        if (dely1 == 0) {
                            clearInterval(s);
                            that.setData({
                                codeBtnName: '获取验证码',
                                delyTime: that.delyTime,
                                codeLoading: false
                            });
                        }
                    }, 1000);
                })
                .catch((err) => {
                    that.setData({
                        codeLoading: false
                    });
                    console.log('报错信息');
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 获取输入信息 验证码
        getPhoneCode: function (event) {
            let that = this;
            that.setData({
                code: event.detail
            });
        },

        // 更改手机号
        onConfirmChangePhone() {
            let that = this; // return;

            if (!that.phone || !/^1[3456789]\d{9}$/.test(that.phone)) {
                uni.showToast({
                    title: '手机号有误,请重新填写',
                    icon: 'none'
                });
                return;
            }

            if (!that.code) {
                uni.showToast({
                    title: '请填写验证码',
                    icon: 'none'
                });
                return;
            }

            let params = {
                phone: that.phone,
                code: that.code
            };
            myPro
                .wxRequest('user/v2/editphone', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        showPhonePop: false
                    }); // 更新用户信息

                    that.getUrserInfo();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 打开生日弹层
        onShowBirthPop() {
            let that = this;
            that.setData({
                showBirthPop: true
            });
        },

        // 关闭生日弹层
        closeBirthPop() {
            let that = this;
            that.setData({
                showBirthPop: false
            });
        },

        // 选择生日
        confirmBirthPop(event) {
            console.log('event===', event);
            let that = this;
            let selectTime = new Date(event.detail);
            let birthStr = util.formatTime(selectTime, 1); // 修改生日

            let params = {
                birthday: birthStr
            };
            myPro
                .wxRequest('user/v2/editBirthday', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        showBirthPop: false
                    }); // 更新用户信息

                    that.getUrserInfo();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.user_thumb {
    padding: 30rpx 0 40rpx;
    background: #ffffff;
}
.user_thumb .thumb {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.user_info {
    margin-top: 20rpx;
    padding-left: 30rpx;
    background: #ffffff;
}
.user_info .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30rpx;
    min-height: 110rpx;
    font-size: 28rpx;
    color: #000000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.user_info .item:last-child {
    border: 0 none;
}
.user_info .item .item_l {
    display: flex;
    align-items: center;
}
.user_info .item .label {
    width: 130rpx;
}
.user_info .item .red {
    color: #ed8c17;
}
.btn_wrap {
    margin-top: 40rpx;
}
.btn_wrap .btn {
    width: 690rpx;
    height: 100rpx;
    margin: 0 auto;
    background: #d54c43;
    border-radius: 50rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 改手机号 */
.phoneWrap {
    width: 600rpx;
    background: #ffffff;
    border-radius: 40rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.phoneWrap .title {
    font-size: 30rpx;
    text-align: center;
    color: #000000;
    padding: 20rpx 0 0;
}
.phoneWrap .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
}
.phoneWrap .btns .btn {
    flex: 1;
    text-align: center;
    color: #d54c43;
}
.phoneWrap .btns .btn.cancel {
    color: rgba(51, 51, 51, 0.87);
}
.form_wrap {
    padding: 0rpx 50rpx 0rpx;
}
.form_item {
    font-size: 30rpx;
    color: #000000;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    padding-top: 30rpx;
}
.form_item .item_label {
    text-align: left;
}
.form_item .item_file {
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form_item .item_file van-field {
    flex: 1;
}
.form_item .item_file .van-cell {
    padding-left: 0;
    background: unset;
}
.btn_code {
    width: auto !important;
    padding: 0;
    margin: 0;
    font-size: 26rpx;
    color: #d54c43;
    background: unset;
    line-height: unset;
    font-weight: normal;
}
</style>