RentWeAppFront/pages-biz/login/login.vue

<template>
	<view class="login-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar"> <u-icon :name="btn.icon" :color="btn.color || '#333'" :size="btn.size || 40"></u-icon>
		</view>

		<!-- 主体内容区 -->
		<view class="content">
			<!-- 标题区域 -->
			<view class="title">登录</view>

			<!-- 登录插图区域 -->
			<view class="illustration">
				<image :src="staticHost + '/public/static/login/bg.png'" mode="aspectFit" />
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhone">
				使用微信授权登录
			</button>

			<!-- 用户类型选择 -->
			<view class="user-type" shape="square">
				<u-radio-group v-model="loginType" active-color="#EA414A" shape="square">
					<u-radio name="0">个人</u-radio>
					<u-radio name="1">企业</u-radio>
				</u-radio-group>
			</view>

			<!-- 协议勾选 -->
			<view class="agreement">
				<u-checkbox v-model="agreeProtocol" shape="square" active-color="#EA414A">
					<text class="agreement-text">
						我已阅读并同意
						<text class="link" @tap.stop="goPrivacy('user')">《用户协议》</text>
						和
						<text class="link" @tap.stop="goPrivacy('privacy')">《隐私政策》</text>
					</text>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				designWidth: 750,
				screenWidth: 0,
				scale: 1,
				loginType: "0",
				agreeProtocol: false
			}
		},

		onLoad() {
			wx.getWindowInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth
					this.scale = this.screenWidth / this.designWidth
				}
			})
		},

		onUnload() {
			
		},
		computed: {
			// title 样式
			titleStyle() {
				const s = this.scale;
				return {
					width: `${93 * s}rpx`,
					height: `${45 * s}rpx`,
					fontSize: `${48 * s}rpx`,
					lineHeight: `${40 * s}rpx`,
					fontWeight: 500,
					color: '#222222',
					fontFamily: 'Noto Sans S Chinese',
					textAlign: 'center'
				}
			},
			staticHost() {
				return this.$config.staticUrl
			},
			headerStyle() {
				const s = this.scale;
				return {
					marginTop: `${214 * s}rpx`,
					flex: 1,
					display: 'flex',
					flexDirection: 'column',
					alignItems: 'center', // 水平居中
					justifyContent: 'flex-start' // 从顶部开始
				}
			},
			// cover 样式
			coverStyle() {
				const s = this.scale;
				return {
					width: `${428 * s}rpx`,
					height: `${608 * s}rpx`
				}
			}
		},
		methods: {

			/** 微信手机号授权 */
			onGetPhone(e) {
				const {
					code
				} = e.detail;

				if (!code) {
					this.$mytip.toast("授权失败");
					return;
				}
				this.doLogin(code);
			},

			/** 执行登录逻辑 */
			async doLogin(phoneGetCode) {
				if (!this.agreeProtocol) {
					this.$mytip.toast('请先阅读并同意用户协议和隐私政策')
					return
				}
				uni.showLoading({
					title: "登录中...",
					mask: true
				});

				try {
					// 微信登录
					const loginRes = await new Promise((resolve, reject) => {
						uni.login({
							provider: 'weixin',
							success: resolve,
							fail: reject
						});
					});

					// 调用后端登录接口
				    const authRes = await this.$u.post(`/login/weChatLogin`, {
					  	phoneGetCode: phoneGetCode,
					  	loginCode: loginRes.code,
					    loginType: this.loginType
					     });
					
					// let tempToken = 'asd5646'
					// 保存token
					let token = authRes.data;
					this.$u.vuex('vuex_token', token);
					// this.$u.vuex('vuex_token', tempToken);
					uni.hideLoading();
					this.getUserOtherInfo(this.loginType,token)
					// 跳转首页
					uni.switchTab({
						url: '/pages/index/index'
					});

				} catch (err) {
					uni.hideLoading();
					this.$mytip.toast("登录失败");
					console.error('Login failed:', err);
				}
			},
			getUserOtherInfo(loginType, token) {
				let url = `/login/userInfo`;
				this.$u.get(url, {}, {
					'WT': token,
					'USERTYPE': loginType
				}).then(obj => {
					if(obj.flag){
						uni.setStorageSync('userInfo', {
						  userType: obj.data.userType,
						  oaAuth: obj.data.oaAuth,
						  cusNo: obj.data.cusNo,
						  userName: obj.data.userName,
						  openId: obj.data.openId
						})
					}
				});
				// let tempUser = {
				// 	userType: '0',
				// 	oaAuth: '1',
				// 	cusNo: 'cus0001',
				// 	openId: '65456asd'
				// }
				// uni.setStorageSync('userInfo', tempUser)
				
			},
			/** 触发手机号选择（子组件 → 父组件） */
			showPhoneSelector(phoneList, openid) {
				this.$emit("choosePhone", {
					phoneList,
					openid
				});
			},
			/** 查看协议 */
			goPrivacy(type) {
				console.log(type)
				const url = type === 'user' ?
					'/pages-biz/privacy/userAgreement' :
					'/pages-biz/privacy/privacyPolicy';

				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		height: 100vh;
		background-color: #fff;
		overflow: hidden;

		.status-bar {
			margin-top: 7.56%;
			height: var(--status-bar-height);
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: calc(100vh - var(--status-bar-height));
			margin-top: 12.8%;
		}

		.title {
			height: 45rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 500;
			font-size: 48rpx;
			color: #222222;
			line-height: 40rpx;
		}

		.illustration {
			width: 100%;
			height: 44.6%;
			padding: 0 21.47%;
			margin-bottom: 6%;
		}

		.illustration image {
			width: 100%;
			height: 100%;
		}

		.login-btn {
			width: 78.6%;
			height: 7.12%;
			background: linear-gradient(90deg, #FF2F31 0%, #FF9379 100%);
			border-radius: 49rpx;
			font-size: 36rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
		}

		.user-type {
			display: flex; justify-content: center; 
			gap: 40rpx; 
			margin-bottom: 20rpx;
		}

		.agreement {
			margin-top: 6.24%;
			padding: 0 40rpx;
		}

		.agreement-text {
			font-size: 26rpx;
			color: #cecece;
		}

		.link {
			color: #334254;
		}
	}



	/* 响应式适配 */
	@media (max-width: 320rpx) {
		.title {
			font-size: 42rpx;
			margin-bottom: 100rpx;
		}

		.illustration {
			height: 360rpx;
		}

		.login-btn {
			height: 80rpx;
			font-size: 30rpx;
		}
	}
</style>