frontend-app/pages/mine_package/mine_settings/mine_settings.vue

<template>
	<view class="mine_setting">
		<Header :leftTitle="$t('mine.settings.title')" left-path-type="switchTab" leftPath="/pages/mine/mine" />
		<view class="mine_setting_content">
			<view class="setting_comm">
				<view class="header_user">
					<view class="mine_data">
						<up-image src="https://static.tbmall.xin/static/logo_y.png" shape="circle" width="60"
							height="60" bgColor="#f1f6ff00"></up-image>
						<view class="mine_info">
							<view class="mine_info_name">{{ userData.name || '信任桥用户' }}</view>
							<view class="mine_info_id">注册手机号:{{ userData.mobile }}</view>
						</view>
					</view>
					<!-- <view @click="jumpSetting">
						<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
					</view> -->
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('address')">
					<view>地址管理</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>
			<!-- <view class="setting_comm">
				<view class="item_comm">
					<view>账号安全</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm">
					<view>绑定收款信息</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
			</view> -->
			<view class="setting_comm">
				<view class="item_comm">
					<view>邀请码</view>
					<view class="invite_code_">{{ userData.inviteCode }}</view>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpPwd">
					<view>交易密码设置</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('userAgreement')">
					<view>用户协议</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('privacyAgreement')">
					<view>隐私协议</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('productAgreement')">
					<view>售后保障协议</view>
					<up-image src="/static/common/right_x.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('aboutUs')">
					<view>关于我们</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="header_fg"></view>
				<view class="item_comm" @click="jumpInfo('contract')">
					<view>我的合同</view>
					<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>

			<view class="login_out_warp" @click="loginOutFun">
				退出登录
			</view>
			<!-- <view class="cancel_but" @click="cancelAccount">
				注销账号
			</view> -->
		</view>
	</view>
</template>

<script>
import { getStorageFun, USER_DATA, clear } from '@/utils/auth.js';
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/header.vue';

export default {
	components: { Header },
	data() {
		return {
			userData: {},// 当前登录对象
		};
	},
	onShow() {
		// this.userData = getStorageFun(USER_DATA);
		this.getUserInfo();
	},
	methods: {
		// 查询用户等级
		async getUserInfo() {
			const result = await getUserInfo();
			if (result && result.bizcode === 100) {
				const data = result.data;
				this.userData = result.data || {};
			}
		},
		// 退出登录
		loginOutFun() {
			clear();
			uni.navigateTo({
				url: '/pages/login_package/login/login'
			})
		},
		cancelAccount() {
			clear();
			uni.navigateTo({
				url: '/pages/login_package/login/login'
			})
		},
		jumpInfo(type) {
			// 地址
			if (type === "address") {
				uni.navigateTo({
					url: '/pages/mine_package/mine_address/mine_address'
				})
			} else if (type === "aboutUs") {
				uni.navigateTo({
					url: '/pages/mine_package/mine_about_us/mine_about_us'
				})
			} else if (type === "userAgreement") {// 用户协议
				uni.navigateTo({
					url: '/pages/mine_package/mine_user_agreement/mine_user_agreement'
				})
			} else if (type === "privacyAgreement") {// 隐私政策
				uni.navigateTo({
					url: '/pages/mine_package/mine_privacy_agreement/mine_privacy_agreement'
				})
			} else if (type === "productAgreement") {// 售后保障协议
				uni.navigateTo({
					url: '/pages/mine_package/mine_product_agreement/mine_product_agreement'
				})
			}else if(type === 'contract'){
				uni.navigateTo({
					url:'/pages/rwa_package/insights/index'
				})
			}
		},
		// 跳转到交易密码
		jumpPwd() {
			uni.navigateTo({
				url: '/pages/mine_package/mine_transaction_password/mine_transaction_password'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mine_setting {
	background-color: $app-bj;
	height: calc(100% - 20rpx);

	.mine_setting_content {
		padding: 30rpx;
	}

	.setting_comm {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.mine_data {
		display: flex;
		align-items: center;
	}

	.mine_info_not_login {
		font-weight: bold;
		font-size: 40rpx;
		color: #111111;
	}

	.mine_info {
		margin-left: 20rpx;
	}

	.mine_info_name {
		font-weight: bold;
		font-size: 40rpx;
		color: #111111;
		display: flex;
	}

	.mine_info_id {
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		margin-top: 10rpx;
	}

	.header_user {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header_fg {
		width: 100%;
		height: 2rpx;
		background: #E7E7E7;
		margin: 30rpx 0;
	}

	.item_comm {
		display: flex;
		justify-content: space-between;
	}

	.invite_code_ {
		color: $app-zt-color;
	}
}

.login_out_warp {
	display: flex;
	justify-content: center;
	text-align: center;
	color: #FFFFFF;
	background-color: $app-bt-bj;
	padding: 20rpx;
	width: calc(100% - 40rpx);
	border-radius: 10rpx;
	margin: 140rpx 0 0rpx;
}

.cancel_but {
	display: flex;
	justify-content: center;
	text-align: center;
	width: calc(100% - 40rpx);
	margin-top: 20rpx;
	font-size: 30rpx;
	color: #999999;
	padding: 20rpx;
}
</style>