frontend-app/pages/rwa_package/accountSafe/accountSafe.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="设置" />
		<view class="setting-view">
			<view class="item-list mt-24">
				<view class="flex-r-lr item-box" @click="onHead(index)" v-for="(item, index) in headList" :key="index"
					:style="{ borderWidth: index == headList.length - 1 ? '0' : '2rpx' }">
					<view class="flex-r">
						<text class="text-gray text-32">{{ item.text }}</text>
						<view class="yi-view" v-if="item.type == 'text1' && item.she">
							<text class="text-zi text-24">{{ item.she }}</text>
						</view>
					</view>
					<view class="flex-r-e" style="align-items: center;">
						<text class="text-zu text-32" v-if="item.type == 'text'">{{ item.value }}</text>

						<text class="text-fu text-32" v-if="item.type == 'text1'">{{ item.value }}</text>
						<u-icon size="16" name="arrow-right" color="#666" style="margin-left:12rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
		<qiaobao-assistant page-key="pages/rwa_package/accountSafe/accountSafe" title="账户设置" />
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe, MyBtn },
	data() {
		return {
			type: false,
			userInfo: null,
			headList: [
				{ text: '注册手机号', type: 'text', value: '' },
				{ text: '交易密码设置', type: 'text1', she: '', value: '设置密码' },
				{ text: '登录密码设置', type: 'text1', she: '', value: '设置密码' },
				{ text: '注销账号', type: 'text', value: '' },
			],
			bottomList: [
				{ text: '账号与安全' },
				{ text: '我的合同' },
				{ text: '用户协议' },
				{ text: '隐私协议' },
				{ text: '售后保障协议' },
				{ text: '关于我们' },
			]
		};
	},
	onShow() {
	},
	onLoad() {
		this.init();
		// this.userinfo();
	},
	methods: {
		init() {
			this.userinfo()
		},
		onHead(index) {
			if (index == 1) {
				uni.navigateTo({
					url: `/pages/rwa_package/forgotPass/forgotPass?type=1`
				})
			} else if (index == 2) {
				uni.navigateTo({
					url: `/pages/rwa_package/forgotPass/forgotPass?type=2`
				})
			} else if (index == 3) {
				uni.navigateTo({
					url: `/pages/rwa_package/accountOut/accountOut`
				})
			}
		},
		userinfo() {
			getUserInfo().then(res => {
				if (res.bizcode == 100) {
					this.userInfo = res.data;
					this.headList[0].value = this.userInfo.mobile;
					this.headList[0].value = this.headList[0].value.replace(this.headList[0].value.substring(3, 7), '****')
					if (res.data.tradePassword) {
						this.headList[1].she = '已设置';
						this.headList[1].value = '修改密码';
					} else {
						this.headList[1].value = '设置密码';
					}
					if (res.data.password) {
						this.headList[2].she = '已设置';
						this.headList[2].value = '修改密码';
					} else {
						this.headList[2].value = '设置密码';
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.yi-view {
	width: 104rpx;
	height: 44rpx;
	display: flex;
	background: rgba(122, 53, 246, 0.1);
	align-items: center;
	justify-content: center;
	border-radius: 8rpx;
	margin-left: 12rpx;
}

.setting-view {
	width: 100%;
	height: calc(100% - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;

	.item-list {
		width: 100%;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.item-box {
			min-height: 108rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			align-items: center;
			border-bottom: solid #EAEAEA;

			.ava-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
	}
}
</style>