xc-app/pages/mine/setting copy.vue

<template>
	<view class="setting-page">
		<NavCom title="设置"></NavCom>
		<view class="header">
			<image :src="infoDetail.avatarResource.url ? infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'" mode="" class="avatar"></image>
			<view class="avatar-title">点击更换头像</view>
		</view>
		<view class="info margin-top21">
			<view class="info-item" @click="editName">
				<view class="label">昵称</view>
				<view class="value">
					{{infoDetail.nickname}}
					<image src="@/static/set/back.png" mode="" class="value-img"></image>
				</view>
			</view>
			<view class="info-item">
				<view class="label">手机号</view>
				<view class="value">{{infoDetail.phone ? infoDetail.phone : '未绑定手机'}}</view>
			</view>
			<view class="info-item border-none">
				<view class="label">ID</view>
				<view class="value">{{infoDetail.username}}</view>
			</view>
		</view>
		<view class="info margin-top21">
			<view class="info-item" @click="agreement('index')">
				<view class="label">服务协议</view>
				<view class="value">
					<image src="@/static/set/back.png" mode="" class="value-img"></image>
				</view>
			</view>
			<view class="info-item" @click="agreement('privacy')">
				<view class="label">隐私政策</view>
				<view class="value"><image src="@/static/set/back.png" mode="" class="value-img"></image></view>
			</view>
			<view class="info-item" @click="about">
				<view class="label">关于我们</view>
				<view class="value"><image src="@/static/set/back.png" mode="" class="value-img"></image></view>
			</view>
			<view class="info-item border-none" @click="customerCk">
				<view class="label">联系客服</view>
				<view class="value"><image src="@/static/set/back.png" mode="" class="value-img"></image></view>
			</view>
		</view>
		<view class="out" @click="logOut">退出登录</view>
		<!-- 退出登录弹框 -->
		<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1">
			<view class="log-out">
				<view class="log-out-title">温馨提示</view>
				<view class="log-out-tip">确定要退出登录？</view>
				<view class="log-out-footer">
					<view class="cancel" @click="closeLogOut">取消</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitLogOut">确定</view>
				</view>
			</view>
		</popup-view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import NavCom from '@/pages/components/nav.vue'
	import { userInfo,customerApi } from '@/API/user.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				infoDetail:{avatarResource:{}},//用户信息
				logOutvisible:false,//退出登录
				customer:''
			}
		},
		components:{NavCom},
		mounted() {
			if(uni.getStorageSync('box-token')){
				this.getUserInfo()
			}
		},
		methods:{
			// 获取客服链接
			getCustomer(){
				customerApi().then(res => {
						if(res.code === 200){
							this.customer = res.data
						}else{
							this.$api.msg(res.message)
						}
				})
			},
			// 跳转客服
			customerCk(){
				window.open(this.customer)
			},
			about(){
				uni.navigateTo({
					url:`/pages/mine/about`
				})
			},
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 修改昵称
			editName(){
				uni.navigateTo({
					url:`/pages/mine/editName?id=${this.infoDetail.id}&nickname=${this.infoDetail.nickname}`
				})
			},
			// 用户协议 隐私政策
			agreement(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			logOut(){
				this.logOutvisible = true
			},
			closeLogOut(){
				this.logOutvisible = false
			},
			submitLogOut(){
				uni.removeStorageSync('box-token')
				uni.reLaunch({
					url:`/pages/login/login`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.setting-page{
		.header{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding-top: 200rpx;
			.avatar{
				width: 162rpx;
				height: 162rpx;
				border-radius: 50%;
			}
			.avatar-title{
				margin-top: 30rpx;
				font-size: 30rpx;
				color: #333333;
			}
		}
		.info{
			margin-top: 43rpx;
			width: 706rpx;
			background: #FFFFFF;
			box-shadow: 4rpx 6rpx 24rpx 0px rgba(212,212,212,0.18);
			border-radius: 9rpx;
			margin-left: 22rpx;
			.info-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 82rpx;
				border-bottom: 2rpx solid #EFEFEF;
				padding: 0 20rpx;
				.label{
					font-size: 30rpx;
					color: #333333;
				}
				.value{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #888888;
					.value-img{
						width: 13rpx;
						height: 24rpx;
						margin-left: 22rpx;
					}
				}
			}
		}
		.margin-top21{
			margin-top: 21rpx;
		}
		.border-none{
			border: none;
		}
		.out{
			margin: 44rpx 22rpx 119rpx 22rpx;
			width: 706rpx;
			height: 81rpx;
			background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
			border-radius: 41rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.log-out{
			width: 559rpx;
			// height: 285rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.log-out-title{
				padding-top: 37rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				text-align: center;
			}
			.log-out-tip{
				font-size: 26rpx;
				color: #333333;
				margin-top: 34rpx;
				text-align: center;
			}
			.log-out-footer{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid #E8E8E8;
				height: 101rpx;
				margin-top: 57rpx;
				.cancel{
					width: 278rpx;
					font-size: 30rpx;
					color: #666666;
					text-align: center;
				}
				.shu{
					width: 2rpx;
					height: 56rpx;
					border-left: 2rpx solid #E8E8E8;
				}
				.log-out-submit{
					width: 278rpx;
					font-size: 30rpx;
					color: #F3594E;
					text-align: center;
				}
			}
		}
	}
</style>