jzmall_uni/pages/auth/login/login.vue

<template>
    <!-- <view class="container"> 
    
  <view class="login-box">
   <text>您还没有登录</text>
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="wx-login-btn">
      抖音用户手机号授权登录</button>  

  </view>
</view> -->
    <view class="background">
        <view class="content-wrap">
            <view class="content">
                <image src="/static/images/new/logo.png" mode="aspectFit"></image>
                <view class="no-login">10秒快速预约 鲸致服务到家</view>
                <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="dy-login-btn">授权手机号一键登录</button>
                <!-- <view style="text-align: center;margin-top: 5px;color:#FE2B54;font-size: 12px;">解锁更多精彩，登录开始探索</view> -->
            </view>
            <!-- <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-close.png" mode="aspectFit" class="close-btn" bindtap="closeLogin"></image> -->
        </view>
    </view>
</template>

<script>
var api = require('../../../config/api.js');
var util = require('../../../utils/util.js');
var user = require('../../../utils/user.js');
var app = getApp();
export default {
    data() {
        return {
            username: '',
            mobile: '',
            code: '',
            inputTel: '',
            navUrl: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        // 页面渲染完成
        if (options.reg != null) {
            uni.showModal({
                title: '提示',
                content: '授权过期，请重新授权',
                showCancel: false
            });
        }
        if (options.navUrl) {
            console.info(unescape(options.navUrl));
            this.setData({
                navUrl: unescape(options.navUrl)
            });
        }

        // wx.login({
        //   force: true,
        //   success(res) {
        //     console.log(`login 调用成功${res.code} ${res.anonymousCode}`);
        //   console.log(res);
        //   },
        //   fail(res) {
        //     console.log(`login 调用失败`);
        //   },
        // });
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
        let that = this;
        user.login().then((res) => {
            console.info(res);
            that.setData({
                code: res.code
            });
        });
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getdefalutUserAddress() {
            //登陆拿用户默认地址，如果没有就拿系统默认地址
            //如果有默认地址，但是不在门店服务区域里
            util.request(api.OrderBookDefaultAddress, {}, 'get').then((res) => {
                if (res.errno === 0) {
                    let address = res.data;
                    var city = address.city.indexOf('市辖') != -1 ? address.province : address.city;
                    //通过jz_shop的shop_no关联服务力分配的门店id，拿实际的jz_shop的门店id
                    var addresInfo = {
                        city: city,
                        lng: address.lng,
                        lat: address.lat,
                        shopId: address.shopId,
                        address: address.addressDetail,
                        shopName: address.shopName
                    };
                    // that.setData({
                    //   addressInfo: res.data
                    // })
                    uni.setStorageSync('addressInfo', addresInfo);
                    // that.getIndexData(); //加载商品
                } else {
                    //无默认地址时 拿系统的
                    this.getdefaultCityShop();
                }
            });
        },

        getdefaultCityShop() {
            let that = this;
            util.request(api.getDefaultCityShop, {}, 'get').then((res) => {
                if (res.errno === 0) {
                    // that.setData({
                    //   addressInfo: res.data
                    // })
                    uni.setStorageSync('addressInfo', res.data);
                    // that.getIndexData();
                }
                //  else {
                //   util.showErrorToast(res.errmsg);
                // }
            });
        },

        bindInputTel(e) {
            console.log(e.detail.value);
            this.setData({
                inputTel: e.detail.value
            });
        },

        goLogin() {
            if (this.inputTel == null || this.inputTel == '') {
                uni.showToast({
                    title: '请输入账号登录',
                    icon: 'error',
                    duration: 1000
                });
                return;
            }
            let that = this;
            util.request(api.AuthRegister, {
                tel: this.inputTel
            }).then(function (res) {
                if (res.errno === 0) {
                    //存储用户信息
                    app.globalData.hasLogin = true;
                    app.globalData.userInfo = res.data.userInfo;
                    uni.setStorageSync('userInfo', res.data.userInfo);
                    uni.setStorageSync('token', res.data.token);
                    uni.setStorageSync('openId', res.data.openId);
                    that.getdefalutUserAddress();
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1,
                                    fail(res) {
                                        console.info(res);
                                        uni.switchTab({
                                            url: 'pages/index/index'
                                        });
                                    }
                                });
                            }, 2000);
                        }
                    });
                }
            });
        },

        getPhoneNumber: function (e) {
            console.log(e);
			 // #ifdef MP-TOUTIAO
			 this.authRegister(e);
			  // #endif
			   // #ifdef MP-ALIPAY
			   this.authLogin(e);
			   //#endif
           
        },
		authRegister(e){
			var ivObj = e.detail.iv;
			var telObj = e.detail.encryptedData;
			if (ivObj == undefined || telObj == undefined) {
			    uni.showToast({
			        title: '获取授权失败',
			        icon: 'error',
			        duration: 2000
			    });
			    return;
			}
			var that = this;
			let r_userid = uni.getStorageSync('r_userid');
			if (r_userid == null || r_userid == '') {
			    r_userid = 0;
			}
			console.log('请求授权登录：code:' + that.code + 'encryptedData,' + telObj + 'iv,' + ivObj + 'r_userid,' + r_userid);
			//------执行Login---------
			util.request(api.AuthRegister, {
			    code: that.code,
			    encryptedData: telObj,
			    iv: ivObj,
			    r_userid: r_userid
			}).then(function (res) {
			    if (res.errno === 0) {
			        //存储用户信息
			        app.globalData.hasLogin = true;
			        app.globalData.userInfo = res.data.userInfo;
			        uni.setStorageSync('userInfo', res.data.userInfo);
			        uni.setStorageSync('token', res.data.token);
			        uni.setStorageSync('openId', res.data.openId);
			        that.getdefalutUserAddress();
			        uni.showToast({
			            title: '授权注册成功',
			            icon: 'success',
			            duration: 2000,
			            complete: function () {
			                setTimeout(function () {
			                    if (that.navUrl) {
			                        uni.navigateTo({
			                            url: that.navUrl
			                        });
			                    } else {
			                        uni.navigateBack({
			                            delta: 1,
			                            fail(res) {
			                                console.info(res);
			                                uni.switchTab({
			                                    url: '/pages/index/index'
			                                });
			                            }
			                        });
			                    }
			                }, 1000);
			            }
			        });
			    } else {
			        console.info(res);
			        user.login().then((res) => {
			            console.info(res);
			            that.setData({
			                code: res.code
			            });
			        });
			        uni.showToast({
			            title: '授权失败请重试',
			            icon: 'error',
			            duration: 3000
			        });
			    }
			});
			
			//-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
			    //用户点击拒绝
			    uni.showModal({
			        title: '警告',
			        content: '您点击了拒绝授权，部分功能无法使用!!!',
			        showCancel: false,
			        confirmText: '确定',
			        success: function (res) {
			            // 用户没有授权成功，不需要改变 isHide 的值
			            if (res.confirm) {
			                uni.switchTab({
			                    url: '/pages/index/index'
			                });
			            }
			        }
			    });
			}
		},
		authLogin(e){
			var telObj = e.detail.encryptedData;
			if (telObj == undefined) {
			    uni.showToast({
			        title: '获取授权失败',
			        icon: 'error',
			        duration: 2000
			    });
			    return;
			}
			var that = this;
			let r_userid = uni.getStorageSync('r_userid');
			if (r_userid == null || r_userid == '') {
			    r_userid = 0;
			}
			console.log('请求授权登录：code:' + that.code + 'encryptedData,' + telObj  + 'r_userid,' + r_userid);
			//------执行Login---------
			util.request(api.AuthLogin, {
			    code: that.code,
			    encryptData: telObj,
			    r_userid: r_userid
			}).then(function (res) {
			    if (res.errno === 0) {
			        //存储用户信息
			        app.globalData.hasLogin = true;
			        app.globalData.userInfo = res.data.userInfo;
			        uni.setStorageSync('userInfo', res.data.userInfo);
			        uni.setStorageSync('token', res.data.token);
			        uni.setStorageSync('openId', res.data.openId);
			        that.getdefalutUserAddress();
			        uni.showToast({
			            title: '授权注册成功',
			            icon: 'success',
			            duration: 2000,
			            complete: function () {
			                setTimeout(function () {
			                    if (that.navUrl) {
			                        uni.navigateTo({
			                            url: that.navUrl
			                        });
			                    } else {
			                        uni.navigateBack({
			                            delta: 1,
			                            fail(res) {
			                                console.info(res);
			                                uni.switchTab({
			                                    url: '/pages/index/index'
			                                });
			                            }
			                        });
			                    }
			                }, 1000);
			            }
			        });
			    } else {
			        console.info(res);
			        user.login().then((res) => {
			            console.info(res);
			            that.setData({
			                code: res.code
			            });
			        });
			        uni.showToast({
			            title: '授权失败请重试',
			            icon: 'error',
			            duration: 3000
			        });
			    }
			});
			
			//-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
			    //用户点击拒绝
			    uni.showModal({
			        title: '警告',
			        content: '您点击了拒绝授权，部分功能无法使用!!!',
			        showCancel: false,
			        confirmText: '确定',
			        success: function (res) {
			            // 用户没有授权成功，不需要改变 isHide 的值
			            if (res.confirm) {
			                uni.switchTab({
			                    url: '/pages/index/index'
			                });
			            }
			        }
			    });
			}
		},

        closeLogin() {
            uni.navigateBack({
                delta: 1
            });
        },

        wxLogin: function (e) {
            //console.log(e);
            if (e.detail.userInfo == null) {
                app.globalData.hasLogin = false;
                return;
            }
            app.globalData.hasLogin = false;
            uni.setStorageSync('userInfo', null);
            user.checkLogin().catch(() => {
                user.loginByWeixin(e.detail.userInfo)
                    .then((res) => {
                        console.log(res);
                        app.globalData.hasLogin = true;
                        uni.navigateBack({
                            delta: 1
                        });
                    })
                    .catch((err) => {
                        app.globalData.hasLogin = false;
                        console.log(err);
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                    });
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background-color: #f7f7f7;
}

.login-box {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0 40rpx;
    margin-top: 200rpx;
    align-items: center;
    text-align: center;
}

.login-box text {
    text-align: center;
}

.img {
    width: 50rpx;
    height: 50rpx;
}

.wx-login-btn {
    margin: 60rpx 0 40rpx 0;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 30rpx;
    border-radius: 6rpx;
    width: 90%;
    color: #fff;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: flex;
    bottom: 0;
    left: 0;
    padding: 0;
    margin-left: 5%;
    text-align: center;
    /* padding-left: -5rpx; */
    border-radius: 6rpx;
    letter-spacing: 3rpx;
    /*background-color: #242a48;*/
    background-color: #242a48;
}

.account-login-btn {
    width: 90%;
    margin: 0 auto;
    color: #fff;
    font-size: 30rpx;
    height: 96rpx;
    line-height: 96rpx;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: flex;
    bottom: 0;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin-left: 5%;
    text-align: center;
    /* padding-left: -5rpx; */
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
    background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
}

.wechat {
    width: 80rpx;
    height: 80rpx;
    margin-right: 15rpx;
}

.form-text {
    margin-top: 100rpx;
    text-align: center;
}

.form-item {
    position: relative;
    height: 96rpx;
    border-bottom: 1px solid #d9d9d9;
}

.form-item .username,
.form-item .password,
.form-item .mobile,
.form-item .code {
    position: absolute;
    top: 26rpx;
    left: 0;
    display: block;
    width: 100%;
    height: 44rpx;
    color: #333;
    font-size: 30rpx;
}

.form-item-code {
    margin-top: 32rpx;
    height: auto;
    overflow: hidden;
    width: 100%;
    float: left;
    width: 350rpx;
}

.form-item-code .form-item {
    float: left;
    width: 350rpx;
}

.form-item-getPhone {
    margin-top: 18rpx;
    height: auto;
    float: right;
    /*border: 1px solid #242a48;*/
    border-radius: 6rpx;
    color: #242a48;
    /*background: green;*/
    font-size: 30rpx;
}

.background {
    width: 750rpx;
    height: 100vh;
    background: #ffffff;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    text-align: center;
}

.content {
    /* width: 100%; */

    height: 480rpx;
    /* background: #FFFFFF;
  border-radius: 20rpx;
  position: relative; */
    padding-top: 250rpx;
}

.content image {
    width: 212rpx;
    height: 212rpx;
    /* margin-bottom: 10px; */
}

.no-login {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 34rpx;
    letter-spacing: 3rpx;
    /* font-weight: bold; */
    color: #333333;
    text-align: center;
    margin: 20px 0 50px 0;
}

.close-btn {
    width: 70rpx;
    height: 70rpx;
    margin: 30rpx 254rpx 0;
}

button.dy-login-btn {
    width: 680rpx;
    height: 102rpx;
    line-height: 102rpx;
    background: #00b9ff;
    border-radius: 102rpx;
    color: #ffffff;
    font-size: 34rpx;
    border: none;
    outline: none;
    position: static;
    margin: 0 auto;
    letter-spacing: 3rpx;
}

.dy-login-btn::after {
    border: none;
}
</style>