sange-bridge/pages/login/login.vue

<template>
    <view class="login">
        <app-math-card v-for="(item,index) in mathLists"
                       :key="index"
                       :cover-image="item.coverImage"
                       :title="item.title"
                       :index="index"
                       :custom-style="{marginLeft:index % 2 === 1 ? '20rpx' : 0}"
                       @open="handleOpen"
        >
        </app-math-card>
        <u-popup v-model="modal.show" mode="bottom" :mask-close-able="false" border-radius="15">
            <view class="popup-content">
                <view class="title">需要获取您的用户信息</view>
                <view class="btn-popup main-between">
                    <button @click="handleLogin" class="btn main-center cross-center">确定</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import appMathCard from "@/components/index/app-math-card"
    import mathLists from "@/core/math-lists.js"
    export default {
        components:{
            appMathCard
        },
        data() {
            return {
                mathLists: mathLists,
                redirect: '',
                code: '',
                modal: {
                    show: false
                },
            }
        },
        methods: {
            login(){
                let _this = this;
                uni.showLoading({title: '登录中...'})
                uni.login({
                    provider: 'weixin',
                    success: res => {
                        _this.code = res.code;
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: data =>  {
                                let params = {
                                    code: res.code,
                                    encryptedData: data.encryptedData,
                                    iv:data.iv,
                                    signature:data.signature
                                }
                                _this.$u.api.login(params).then(loginRes => {
                                    uni.hideLoading();
                                    _this.$u.vuex(_this.$const.USER_TOKEN,loginRes.token)
                                    _this.$u.vuex(_this.$const.USER_DATA,loginRes.user)
                                    _this.handleBind()
                                    _this.getConfig();
                                    if(loginRes.user.nickname === '微信用户'){
                                        _this.modal.show = true;
                                    }else{
                                        _this.handleRedirect();
                                    }
                                })
                            },
                            fail: error => {
                                _this.$u.toast('获取用户信息失败')
                            }
                        });
                    }
                });
            },
            handleLogin(){
                let _this = this;
                wx.getUserProfile({
                    desc: '获取用户信息',
                    success: data =>  {
                        console.log('-->data',data)
                        let params = {
                            encryptedData: data.encryptedData,
                            iv: data.iv,
                        }
                        _this.$u.api.userUpdate(params).then(res => {
                            _this.$u.vuex(_this.$const.USER_DATA, res)
                            _this.handleRedirect();
                        })
                    },
                    fail: err => {
                        _this.$u.toast('获取用户信息失败')
                        uni.reLaunch({
                            url: this.redirect
                        });
                    }
                });
            },
            handleRedirect(){
                console.log('-->data',this.redirect)
                uni.reLaunch({
                    url: this.redirect
                });
            },
            handleBind(){
                this.$u.api.userBind({scene:this.vuex_user_scene,parent_id:this.vuex_user_parent_id}).then(res => {
                    this.$u.vuex(this.$const.USER_SCENE, null);
                    this.$u.vuex(this.$const.USER_PARENT_ID, null);
                })
            },
            getConfig(){
                if(!this.vuex_user_config){
                    this.$u.api.settingConfig().then(data => {
                        this.$u.vuex(this.$const.USER_CONFIG,data)
                    })
                }
            }
        },
        onLoad(options) {
            if(options.redirect){
                let redirect = options.redirect;
                delete options.redirect;
                let arr = [];
                for (const key in options) {
                    arr.push(`${key}=${options[key]}`)
                }
                this.redirect = `/${redirect}?${arr.join("&")}`
            }else{
                this.redirect = '/pages/index/index'
            }
            if(!this.vuex_user_token){
                this.login()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login{
        position: relative;
        height: 100vh;
        overflow: hidden;
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
    }
    .popup-content{
        height: 280rpx;
        position: relative;
        .title{
            padding: 20rpx 30rpx;
            font-weight: 600;
            font-size: 42rpx;
        }
        .btn-popup{
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .btn{
            background: $main-color;
            color: #fff;
            border-radius: 0;
            font-size: 28rpx;
            height: 100rpx;
            flex: 1;
            &.cancel{
                background: #f5f5f5;
                color: #666;
            }
            &:after{
                content: unset;
            }
        }
    }
</style>