frontend-app/pages/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="/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.inviteCode}}</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" @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>
			
			<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 Header from '@/components/header.vue';
	
	export default {
		components:{Header},
		data() {
			return {
				userData:{},// 当前登录对象
			};
		},
		onShow() {
			this.userData = getStorageFun(USER_DATA);
		},
		methods:{
			// 退出登录
			loginOutFun(){
				clear();
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			cancelAccount(){
				clear();
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			jumpInfo(type){
				// 地址
				if(type === "address"){
					uni.navigateTo({
						url: '/pages/mine_address/mine_address'
					})
				}else if(type === "aboutUs"){
					uni.navigateTo({
						url: '/pages/mine_about_us/mine_about_us'
					})
				}else if(type === "userAgreement"){// 用户协议
					uni.navigateTo({
						url: '/pages/mine_user_agreement/mine_user_agreement'
					})
				}else if (type === "privacyAgreement"){// 隐私政策
					uni.navigateTo({
						url: '/pages/mine_privacy_agreement/mine_privacy_agreement'
					})
				}else if (type === "productAgreement"){// 售后保障协议
					uni.navigateTo({
						url: '/pages/mine_product_agreement/mine_product_agreement'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.mine_setting{
		background-color: $app-bj;
		height: calc(100% - 60rpx);
		.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;
		}
		
	}
	
	.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>