完善登录，登录授权

付延余

2022-09-07 513be798a677672644770e2b2f7025b6d4d20414

完善登录，登录授权

 pages/login/login.vue

@@ -1,7 +1,32 @@
<template>
    <view class="login">
        <image src="@/static/login/banner.png" class="background"></image>
        <view class="loginBtn"><u-button throttleTime="3000" text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="wxLogin"></u-button></view>
        <view class="login-container">
            <view class="loginBtn"><u-button text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="toGrantAuthorization"></u-button></view>
            <view class="utils"><text @click="toBindPage">绑定系统账号</text></view>
        </view>
        <!-- 特定范围说明 -->
        <view class="loginBottom"><text>小程序仅供已拥有系统账号特定内部人员使用</text></view>
        <u-modal
            @confirm="wxLoginConfirm"
            @cancel="wxLoginCancel"
            @close="wxLoginClose"
            :show="wxLoginModal.show"
            :title="wxLoginModal.title"
            :content="wxLoginModal.content"
            :showCancelButton="true"
        ></u-modal>
        <view class="toGrantAuthorization-container">
            <u-popup :show="popupShow" mode="bottom" @close="closePopup" @open="openPopup" round="10" :safeAreaInsetBottom="true">
                <view class="popup-warp">
                    <view class="body"><text>本小程序，仅供已拥有系统账号特定内部人员登录使用，点击同意即表示您已同意相应信息授权。</text></view>
                    <view class="btn">
                        <u-button @click="popupShow = false" type="error" text="不同意" shape="circle" :plain="true"></u-button>
                        <u-button @click="wxLogin" type="error" text="同意" throttleTime="3000" shape="circle"></u-button>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

@@ -10,7 +35,13 @@
export default {
    data() {
        return {
            wxcode: ''
            wxcode: '', //微信code
            wxLoginModal: {
                show: false,
                title: '提示',
                content: ''
            },
            popupShow: false
        };
    },
    onShow() {
@@ -20,7 +51,11 @@
        }
    },
    methods: {
        toGrantAuthorization() {
            this.popupShow = true;
        },
        wxLogin() {
            this.popupShow = false;
            uni.showLoading({
                title: '加载中...'
            });
@@ -32,12 +67,9 @@
                        this.wxSmallLogin(this.wxcode)
                            .then(res => {
                                if (res.data.data == '用户不存在') {
                                    this.$u.toast('未绑定系统账号，即将跳转绑定页面！')
                                    setTimeout(()=>{
                                        uni.navigateTo({
                                            url: '/pages/register/register'
                                        });
                                    },1000)
                                    // this.$u.toast('未绑定系统账号，即将跳转绑定页面！');
                                    this.wxLoginModal.content = '未绑定系统账号，是否跳转账号绑定页面！';
                                    this.wxLoginModal.show = true;
                                } else if (res.data.active && res.data.active == true) {
                                    const { access_token, refresh_token, token_type, scope } = res.data;
                                    try {
@@ -66,6 +98,32 @@
                    }
                }
            });
        },
        toBindPage() {
            uni.navigateTo({
                url: '/pages/register/register'
            });
        },
        // 模态框
        wxLoginConfirm() {
            uni.navigateTo({
                url: '/pages/register/register'
            });
            this.wxLoginModal.show = false;
        },
        wxLoginCancel() {
            this.wxLoginModal.show = false;
        },
        wxLoginClose() {
            this.wxLoginModal.show = false;
        },
        // 弹出框
        openPopup() {
            console.log('open');
        },
        closePopup() {
            this.popupShow = false;
            console.log('close');
        }
    }
};
@@ -80,20 +138,65 @@
        // height: vww(289);
        height: vww(246);
    }

    .loginBtn {
    .login-container {
        margin: vww(60) auto;
        width: 80%;
        .u-button {
            .u-icon {
                .u-icon__icon {
                    font-size: vww(30) !important;
        .loginBtn {
            .u-button {
                .u-icon {
                    .u-icon__icon {
                        font-size: vww(30) !important;
                    }
                }
                .u-button__text {
                    font-size: vww(17) !important;
                    font-weight: 530;
                }
            }

            .u-button--success {
                border-style: none;
                background-color: #3ebc17;
            }
        }

        .u-button--success {
            border-style: none;
        .utils {
            font-size: vww(14);
            margin-top: vww(20);
            text-align: center;
            color: #346a9d;
        }
    }

    .loginBottom {
        color: #aaaaaa;
        margin-top: vww(180);
        font-size: vww(14);
        text-align: center;
    }

    // 弹出框
    .toGrantAuthorization-container {
        .u-popup {
            .u-transition {
                .u-popup__content {
                    .popup-warp {
                        height: vww(200);
                        padding: vww(10) vww(20);
                        .body {
                            width: 100%;
                            height: 70%;
                        }
                        .btn {
                            display: flex;
                            justify-content: space-between;
                            .u-button {
                                width: 40%;
                            }
                        }
                    }
                }
            }
        }
    }
}