zc_saas_h5/pages4/login/pcLogin.vue

<template>
    <view class="pcLogins">
        <u-navbar :is-back="false" title="登录" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
            <view class="slot-wrap">
                <image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
            </view>
        </u-navbar>
        <u-line color="#D6D6DB" />
        <view class="contents">
            <!-- 正文内容 -->
            <image class="logo" src="/static/me/logo.png" style="width: 360rpx;height: 72rpx;"></image>
            <text>登录后您可在网页端继续浏览课程</text>
            <!-- <view class="login_bt" @click="pcLogin()">微信登录</view> -->
            <button type="default" open-type="getPhoneNumber" @getphonenumber="wxLogin" class="login_bt">微信登录</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            scanCode: '', // 获取扫码的路径最后面的6位标识码
            code: '',
        }
    },
    onLoad(query) {
        const q = decodeURIComponent(query.q)
        this.scanCode = q.substring(q.length - 6)
        console.log('扫描后得：', q, this.scanCode)
        // 扫描二维码后调用，小程序已扫码
        if (this.scanCode) {
            this.$api.scanhasCode({scanCode: this.scanCode}).then((res) => {
                console.log('调用扫码接口返回的:', res)
                if (res.data.code == 200) {
                    console.log()
                }
            })
        }
	},
    onShow() {
		// 获取code
		this.getwxCode()
	},
    methods: {
        getwxCode() {
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.code = loginRes.code
					console.log('获取的code:', this.code)
				}
			})
		},
        wxLogin(e) {
			this.$api.wxLogin({
				code: this.code,
				encryptedData: e.detail.encryptedData,
				iv:  e.detail.iv
			}).then(res => {
				if (res.data.code == 200) {
					this.loginCallback(res)
				} else {
					this.getwxCode() // code用完一次就会过期，防止用户点击取消后再点微信登录后code过期
				}
			})
		},
        // 微信登录成功的回调
		loginCallback(res) {
			console.log('登录后的回调',res)
			if(res.data.data && res.data.data.full_info){
				//信息完善，直接进入页面
				uni.setStorageSync('user_account', res.data.data.user_account);
				uni.setStorageSync('token', res.data.data.token);
				// /app/user/getInfo 登录用户信息
				this.$api.getInfo().then(resdata => {
					if(resdata.data.code == 200){
						this.$store.state.userInfo = resdata.data.data;
						
                        this.submitCode()
					}
					
				});
			} else {
				//未完善信息,存为临时信息
				uni.setStorageSync('user_account_temp', res.data.data.user_account);
				uni.setStorageSync('token_temp', res.data.data.token);
                this.$navTo.togo('/pages2/register/bind', {scanCode: this.scanCode})
			}	
		},
		// scanLoginCheck小程序校验PC登录二维码,执行登录获取到令牌，然后把扫码的路径最后面的6位标识码提交给后台就行
		submitCode() {
			this.$api.scanLoginCheck({
				scanCode: this.scanCode
			}).then((res) => {
				if (res.data.code == 200) {
					uni.navigateTo({
						url: '/pages4/login/pcLoginSuccess'
					})
				} else {
					this.$u.toast(res.data.msg)
				}
			})
		},
    }
}
</script>

<style lang="scss" scoped>
.contents {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
        margin: 90rpx 0rpx 250rpx;
    }
    >text {
        font-size: 22rpx;
        color: #666;
    }
    .login_bt {
        width: 400rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        background: #09ba08;
        color: #fff;
        font-size: 28rpx;
        border-radius: 35rpx;
        margin-top: 20rpx;
    }
}
</style>