微信登录页面设计

pages/wxLogin/wxLogin.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="container">
+		<view class="text-normal">
+			<text class=" text-one">会员中心系统小程序申请使用</text>
+		</view>
+		<view class="text-normal">
+			<text class="text-two">以下微信账号的权限</text>
+		</view>
+		<view class="text-normal">
+			<text class="text-three">用于为你提供相关服务</text>
+		</view>
+		<view class="container-solid"></view>
+		<u-radio-group v-model="value">
+			<u-radio v-for="(item, index) in list" :key="index" :name="item.name">
+				<view style="display: flex;flex-direction: column;">
+					<text class="text-black">{{item.text}}</text>
+					<text class="text-grey">{{maskedNumber(item.value)}}</text>
+				</view>
+			</u-radio>
+		</u-radio-group>
+		<view class="form-button" style="margin-top: 100rpx;" @click="toWxLigin">
+			允许
+		</view>
+		<view class="form-button form-button-grey" @click="rejectWxLogin">
+			拒绝
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				shoujihao: '15312341234',
+				list: [{
+					name: 'shoujihao',
+					text: '微信绑定的手机号',
+					value: '15312341234'
+				}],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				value: 'shoujihao',
+			};
+		},
+		methods: {
+			toWxLigin() {
+				console.log("微信登录")
+			},
+			rejectWxLogin() {
+				uni.navigateBack({
+					delta: 1,
+					animationType: 'pop-out',
+					animationDuration: 200
+				})
+			},
+			maskedNumber(fullNumber) {
+				if (fullNumber && fullNumber.length === 11) {
+					return `${fullNumber.slice(0, 3)}****${fullNumber.slice(7)}`;
+				}
+				return fullNumber; // 若号码不符合格式则直接返回
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: #ffffff;
+		padding: 30rpx 50rpx;
+	}
+
+	.text-one {
+		font-size: 30rpx;
+	}
+
+	.text-two {
+		font-weight: bold;
+		font-size: 38rpx;
+	}
+
+	.text-three {
+		// font-size: rpx;
+	}
+
+	.text-normal {
+		letter-spacing: 1rpx;
+		margin: 30rpx 0;
+	}
+
+	.container-solid {
+		width: 100%;
+		height: 1rpx;
+		background-color: #676565;
+		margin: 30rpx 0;
+	}
+
+	.text-black {
+		color: #000;
+	}
+
+	.text-grey {
+		color: #b3b3b3;
+	}
+
+	.form-button {
+		background: linear-gradient(90deg, #006af5, #21b0fc);
+		border-radius: 20rpx;
+		line-height: 80rpx;
+		text-align: center;
+		color: #fff;
+		margin-bottom: 50rpx;
+	}
+
+	.form-button-grey {
+		background: #e5e5e5;
+		color: #006af5;
+	}
+</style>