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="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="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 class="group">
			<view class="item" @click="goPage('/pages/my/editInfo')">
				<text class="title red">删除用户</text>
				<view class="right" >
					<text class="value red">注销账户</text>
					<image class="arrow" style="width: 30rpx; height: 30rpx;" src="../../static/me/wd_icon_jiantou_red.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>