jzmall_verify_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="https://mall.zhaijieshi.cc/file/wx-dy/icon-login.png" mode="aspectFit"></image>
                <view class="no-login">您还未登录</view>
                <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="dy-login-btn">抖音用户手机号授权登录</button>
            </view>
            <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-close.png" mode="aspectFit" class="close-btn" @tap="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: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        // 页面渲染完成
        if (options.reg != null) {
            uni.showModal({
                title: '提示',
                content: '授权过期，请重新授权',
                showCancel: false
            });
        }

        // 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: {
        getPhoneNumber: function (e) {
            console.log(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;
            console.log('请求授权登录：code:' + that.code + 'encryptedData,' + telObj + 'iv,' + ivObj);
            //------执行Login---------
            util.request(api.AuthRegister, {
                code: that.code,
                encryptedData: telObj,
                iv: ivObj,
            }).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);
                    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'
                                        });
                                    }
                                });
                            }, 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
            });
        }
    }
};
</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: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    width: 576rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    padding-top: 170rpx;
}
.content image {
    width: 282rpx;
    height: 282rpx;
    position: absolute;
    top: -141rpx;
    left: 146rpx;
}
.no-login {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 38rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
    margin-bottom: 50rpx;
}
.close-btn {
    width: 70rpx;
    height: 70rpx;
    margin: 30rpx 254rpx 0;
}
button.dy-login-btn {
    width: 492rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #00b9ff;
    border-radius: 90rpx;
    color: #ffffff;
    font-size: 30rpx;
    border: none;
    outline: none;
    position: static;
    margin: 0 auto;
}
.dy-login-btn::after {
    border: none;
}
</style>