menber-center/pages/setting/setting.vue

<template>
	<view class="container">
		<view class="menu-item-box" @click="onUpdateTel" v-if="false">
			<view class="lebal-box">
				手机号 123xxxxxx4567
			</view>
			<view class="suffix-box">
				<view class="desc">
					更换绑定手机号
				</view>
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onUpdatePwd" v-if="false">
			<view class="lebal-box">
				修改密码
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onInfoExport" v-if="false">
			<view class="lebal-box">
				个人信息副本导出
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="main-btn" @click="onRemoveInfo">
			<image :src="`${FILE_URL}/delete.png`"></image>
			<text>删除个人信息</text>
		</view>
		<view class="main-btn" @click="onCancelAccount">
			<image :src="`${FILE_URL}/user-delete.png`"></image>
			<text>账号注销</text>
		</view>
	</view>
</template>

<script setup>
	import configService from '@/utils/baseurl.js'
	const FILE_URL = configService.FILE_URL;
	function onUpdateTel() {
		uni.navigateTo({
			url: '/pages/setting/updateTel/updateTel'
		})
	}

	function onUpdatePwd() {
		uni.navigateTo({
			url: '/pages/setting/updatePwd/updatePwd'
		})
	}

	function onInfoExport() {
		uni.navigateTo({
			url: '/pages/setting/infoExport/infoExport'
		})
	}

	function onRemoveInfo() {
		uni.navigateTo({
			url: '/pages/setting/removeInfo/removeInfo'
		})
	}

	function onCancelAccount() {
		uni.navigateTo({
			url: '/pages/setting/cancelAccount/cancelAccount'
		})
	}
</script>

<style lang="scss" scoped>
	$certificate-width: 220rpx;
	$certificate-height: 300rpx;

	.container {
		height: 100vh;
		width: 100vw;
		padding: 0 20rpx;
		padding-top: 20rpx;
		background: rgb(141, 204, 255);
		background: -moz-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -webkit-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -o-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: -ms-linear-gradient(90deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);
		background: linear-gradient(180deg, rgb(141, 204, 255) 10%, rgb(247, 247, 247) 30%);

		.main-btn {
			width: 85%;
			background-color: #006af4;
			border-radius: 20rpx;
			margin: 30rpx auto;
			padding: 40rpx 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				flex: 0 0 auto;
			}

			text {
				margin-left: 20rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}

		.menu-item-box {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-bottom: 50rpx;
			border: 1px solid #E3E3E3;
			border-radius: 10px;

			.lebal-box {
				width: 60%;
			}

			.suffix-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				text-align: end;
			}

			&:active {
				background: #e0e0e0;
				/* 按下的背景色 */
			}
		}
	}
</style>