diancan_uni/pages/login/phone/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="wrap_nr">
            <image class="user_thumb" :src="userInfo.thumb"></image>
            <view class="user_name">您好，{{ userInfo.nickname }}</view>
            <view class="tips">为了您的账户安全，请绑定手机号</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>
            <button class="custom_btn" @tap="phoneLogin">登录</button>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

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

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

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

            // 两次发验证码间隔时长/秒
            // 全局loading
            loading: false,

            userInfo: {
                thumb: '',
                nickname: ''
            },

            store: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.setData({
            userInfo: getApp().globalData.userInfo
        }); // console.log('用户信息',that.data.userInfo)
        // 店铺

        uni.getStorage({
            key: 'store',
            success: function (res) {
                that.setData({
                    store: JSON.parse(res.data)
                });
            }
        });
    },
    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: {
        // 获取输入信息 手机号
        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
            });
        },

        // 手机号验证码登录
        phoneLogin() {
            let that = this;

            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,
                // 手机号验证码
                openid: getApp().globalData.openid,
                nickname: getApp().globalData.userInfo.nickname,
                thumb: getApp().globalData.userInfo.thumb,
                sex: getApp().globalData.userInfo.sex,
                store_id: that.store ? that.store.id : 1 // 门店id
            };
            myPro
                .wxRequest('user/mini-login', 'POST', params)
                .then((res) => {
                    // 存下token
                    getApp().globalData.token = res.result.token;
                    uni.setStorage({
                        key: 'token',
                        data: res.result.token
                    }); // 存下角色

                    if (res.result.user.store) {
                        getApp().globalData.role = 1; // 有店铺,即为门店
                    }

                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap_nr {
    padding-top: 150rpx;
    text-align: center;
}
.user_thumb {
    width: 148rpx;
    height: 148rpx;
    border-radius: 50%;
}
.user_name {
    padding-top: 50rpx;
    font-size: 40rpx;
    color: #333333;
}
.tips {
    padding-top: 20rpx;
    font-size: 28rpx;
    color: rgba(51, 51, 51, 0.54);
}
.custom_btn {
    width: 604rpx !important;
    height: 90rpx;
    padding: 0;
    margin: 120rpx 0 0 0;
    line-height: unset;
    font-weight: normal;
    background: #295c56;
    border-radius: 45rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form_wrap {
    padding: 50rpx 75rpx 0;
}
.form_item {
    font-size: 30rpx;
    color: #000000;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
    padding-top: 70rpx;
}
.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: #ed8c17;
    background: unset;
    line-height: unset;
    font-weight: normal;
}
</style>