MoeNovaClient/pages/my/security.vue

<template>
	<view class="page">
		<!-- 基本资料组 -->
		<view class="group">
			<view class="item" @click="goPage('/pages/my/editInfo')">
				<text class="title">基本资料</text>
				<view class="right">
					<text class="action">去完善</text>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 账号安全组 -->
		<view class="group">
			<view class="item" @click="goPage('/pages/my/editMobile')">
				<text class="title">手机号</text>
				<view class="right">
					<text class="value">{{phoneNumber || '未绑定'}}</text>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item" @click="goPage('/pages/my/editPass')">
				<text class="title">登录密码</text>
				<view class="right">
					<text class="value">未设置</text>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 第三方账号组 -->
		<view class="group">
			<view class="item" @click="bindWechat">
				<text class="title">微信账号</text>
				<view class="right">
					<text class="value">未授权</text>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item" @click="bindQQ">
				<text class="title">QQ账号</text>
				<view class="right">
					<text class="value">未授权</text>
					<image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '', // 用户手机号
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		methods: {
			loadUserInfo() {
				// 这里添加获取用户信息的逻辑
				// 获取手机号等信息
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			bindWechat() {
				// 微信绑定逻辑
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			bindQQ() {
				// QQ绑定逻辑
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'security.scss';
</style>