TalentService-mobile/pages/my/wxLogin.vue

<template>
	<view style="margin-left: 40rpx;margin-right: 40rpx;">
		<view style="text-align: center;margin-top: 60rpx;">
			<text style="font-weight: 600;font-size: 38rpx;">登录</text>
		</view>
		<view style="text-align: center;margin-top: 140rpx;">
			<image style="width: 200rpx;height: 200rpx;" src="/static/favicon.ico" />
		</view>
		<view style="text-align: center;">
			<text style="font-weight: 600;font-size: 42rpx;">智汇谷</text>
		</view>
		<view style="text-align: center;margin-top: 160rpx;">
			<u-checkbox style="margin-right: -10rpx;" active-color="#0f2b8d" v-model="isChecked"></u-checkbox>
			<text style="font-size: 24rpx;margin-right: 10rpx;">登录注册代表同意智汇谷协议</text>
			<!-- <text style="font-size: 24rpx;color:#0f2b8d;" @click="toShowAgreement('userAgreement')">《用户使用协议》</text>
			<text style="font-size: 24rpx;margin-left: 10rpx;margin-right: 10rpx;">和</text>
			<text style="font-size: 24rpx;color:#0f2b8d;" @click="toShowAgreement('privacyAgreement')">《隐私政策》</text> -->
		</view>
		<view
			style="height: 80rpx;width: 100%; text-align: center;margin-top: 40rpx;display: flex;flex-direction: column;justify-content: center;">
			<button v-if="isChecked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				style="width: 100%;background-color: #0f2b8d;color: #fff;font-size: 30rpx;">手机号快捷登录</button>
			<button v-else @click="checked"
				style="width: 100%;background-color: #0f2b8d;color: #fff;font-size: 30rpx;">手机号快捷登录</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: false,
				form: {
					phoneCode: '',
					userCode: '',
				},
				nextUrl: ''
			}
		},
		methods: {
			toShowAgreement(type){
				// uni.navigateTo({
				// 	url:'/pages/my/components/'+type
				// })
			},
			checked() {
				if (!this.isChecked) {
					this.$refs.uToast.show({
						type: 'warning',
						title: "请阅读并勾选以上协议"
					});
				}
			},
			async getPhoneNumber(e) {
				let that = this;
				const phoneCode = e.detail.code;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					await uni.login({
						async success(res) {
							that.form.userCode = res.code;
							that.form.phoneCode = phoneCode;
							let resp = await that.$api.wxLogin(that.form);
							if(!resp.data?.token){
								that.$refs.uToast.show({
									type: 'error',
									title: "登录失败，请重试！"
								});
								return;
							}
							that.$u.vuex('vuex_token', resp.data.token);
							// that.$u.vuex('vuex_token','fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
							that.$u.vuex('user_message', JSON.stringify(resp.data.mbUser));
							if(that.nextUrl===''){
								uni.navigateBack({
									complete() {
										uni.showToast({icon:'none',title: "登录成功！"})
									}
								})
							}else{
								uni.redirectTo({
									url: that.nextUrl,
									complete() {
										uni.showToast({
											icon:'none',
											title: "登录成功！"
										})
									}
								});
							}
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						title: "手机号快速登录需要授权后进行"
					});
					return;
				}
			},
		},
		onLoad(options) {
			this.nextUrl = (options.nextUrl != null && options.nextUrl != '/pages/my/wxLogin') ?
				options.nextUrl : '';
		}
	}
</script>

<style>

	/* 未选中的背景样式 */
	checkbox .wx-checkbox-input {
		width: 36rpx;
		height: 36rpx;
	}

	checkbox::before {
		background-color: #fff;
		color: #0f2b8d !important;
	}
</style>
<style scoped lang="scss">
	.scroll_type {
		width: 100%;
		height: 50vh;
		padding: 16rpx 35rpx 0 35rpx;

		text {
			line-height: 55rpx;
		}
	}
</style>