menber-center/pages/wxLogin/wxLogin.vue

<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>