syApp/pages/userDetails/userDetails.vue

<template>
	<view>
		<view class="userDetalis_ul">
			<view class="userDetalis_listLine"></view>
			<view class="userDetalis_listA">
				<view class="userDetalis_listBox">
					<view class="userDetalis_listTxt">账号</view>
					<view class="userDetalis_listName">{{user_name}}</view>
				</view>
				<view class="userDetalis_listLineA"></view>
			</view>

			<view class="userDetalis_listLineB"></view>

			<view class="userDetalis_list" @click="showA = true">
				<view class="userDetalis_listTxt">退出账号</view>
				<u-icon name="arrow-right" color="#666" class="userDetalis_listRight" size="28"></u-icon>
			</view>
		</view>
		<!-- 操作菜单 -->
		<u-action-sheet @click="click" :list="list" v-model="showA"></u-action-sheet>
		<!-- 退出登录 -->
		<u-modal v-model="show" @confirm="confirm" @cancel="cancel" :show-cancel-button="true" :content="content">
		</u-modal>

		<!-- 顶部提示 -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //退出登录
				content: '？', //退出登录内容
				// nickname: false, //修改昵称
				value: '', //修改昵称内容
				list: [{
					text: '退出账号'
				}, {
					text: '退出程序'
				}],
				showA: false,
				userObj: {}, //个人信息
				imgShow: true,
				imgArr: [],
				type: 'text',
				user_name: uni.getStorageSync('user_name')
			}
		},
		watch: {
			// nickname(val) {
			// 	if (val == false) {
			// 		this.value = ''
			// 	}
			// },
		},
		methods: {
			//退出
			click(index) {
				if (index == 0) {
					this.content = '是否退出当前账号?'
				} else if (index == 1) {
					this.content = '是否退出程序?'
				}
				this.show = true
			},
			// 确定事件
			async confirm() {
				if (this.content == '是否退出当前账号?') {
					console.log('退出账号')
					const res = await this.$myRequest({
						url: '/api/api_gateway?method=back_source.production.user_logout',
					})
					if (res) {
						uni.clearStorageSync();//同步清理本地数据缓存
						uni.showToast({
							title: '退出成功',
							mask: true,
							icon: "success",
						})
						uni.redirectTo({
							url: '../login/login',
						});
						console.log(999)
					}
				} else if (this.content == '是否退出程序?') {
					console.log('退出程序')
					// #ifdef APP-PLUS
					plus.runtime.quit();
					// #endif
				}
			},
			// 取消事件
			cancel() {
				var that = this
				that.$refs.uTips.show({
					title: '取消该操作',
					type: 'warning',
					duration: '1500'
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #f7f8fc;
	}

	.userDetalis_ul {
		background: #fff;

		.userDetalis_list {
			height: 90rpx;
			display: flex;
			width: 700rpx;
			margin: 0 auto;
			justify-content: space-between;

			.userDetalis_listTxt {
				color: #5d5d5d;
				padding: 25rpx 0 25rpx 0;
			}

			.userDetalis_listName {
				color: #5d5d5d;
			}

			.userDetalis_listImg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 55px;
				margin: 2px 0 0 0;
			}

			.userDetalis_listRight {
				width: 50rpx;
				height: 50rpx;
				margin: 20rpx 0 0 0;
			}
		}

		.userDetalis_listA {
			width: 700rpx;
			margin: 0 auto;

			.userDetalis_listBox {
				display: flex;
				justify-content: space-between;
				height: 90rpx;

				.userDetalis_listTxt {
					padding: 25rpx 0 25rpx 0;
				}

				.userDetalis_listName {
					padding: 25rpx 0 25rpx 0;
					color: #5d5d5d;
				}
			}
		}
	}


	.userDetalis_listLine {
		border: 3px solid #f7f8fc;
	}

	.userDetalis_listLineA {
		border-bottom: 1rpx solid #dfdfdf;
	}

	.userDetalis_listLineB {
		border: 5px solid #f7f8fc;
	}

	// 修改昵称弹框
	.popIntBox {
		margin: 100rpx auto;
		width: 450rpx;
	}

	.popBtnBox {
		display: flex;
	}
</style>