mobile_h5/actMgt/pages/my/index.vue

<!-- 
我的
http://localhost:5173/actMgt/#/pages/my/index
https://oss-mbh5.colormaprun.com/actMgt/#/pages/my/index
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column top">
				<view class="top-content uni-row">
					<image class="tc-headimg" mode="aspectFit" src="/static/headimg.png"></image>
					<view class="tc-userBox uni-column uni-ais uni-jcse">
						<view class="userBox-name">{{selfInfo.name}}</view>
						<view class="userBox-info uni-row">
							<view class="">等级：{{userLevel[selfInfo.level]}}</view>
							<!-- <view class="" style="margin-left: 20px;">余额：￥120.00</view> -->
						</view>
					</view>
					<view class="btnQuit" @click="btnQuit">退出</view>
				</view>
			</view>

			<view class="main uni-column">
				<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
					<uni-list-item v-for="(item,i) in sublist" :title="item.title" :showArrow="item.to != ''" :rightText="item.rightText"
						:key="i" :clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
						:extraIcon="{type:item.icon,color:'#999'}">
						<template v-slot:footer>
							<view v-if="item.rightCustom" class="item-footer" :class="item.rightCustomCss">
								<view class="item-footer-text" v-html="item.rightText"></view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		
		<uni-popup ref="confirmDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" :content="confirmContent"
				@confirm="confirmDialogConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools.js';
	import { userLevel } from '/utils/define.js';
	import {
		apiSignOut,
		apiGetSelfInfo,
		checkResCode
	} from '/utils/api.js';
	
	export default {
		components: {},
		data() {
			return {
				userLevel: userLevel,
				queryObj: {},
				queryString: "",
				confirmContent: "",
				
				selfInfo: {
					name: "",	// 姓名
					phone: "",	// 手机号
					balance: "",// 余额
					level: "",	// 等级
				},
				
				ucenterList: [
					[
						/* {
							"title": "姓名",
							"rightText": "",
							"icon": "person",
							"to": ""
						}, */
						{
							"title": "手机号",
							"rightText": "",
							"icon": "phone",
							"event": '',
							"to": ""
						}
					],
					[{
						"title": "余额",
						"rightCustom": true,
						"rightCustomCss": "item-balance",
						"rightText": "",
						"icon": "wallet",
						"to": ""
					/* }, {
						"title": "费用明细",
						"icon": "list",
						"to": "/pages/my/costList"
					}, {
						"title": "在线充值",
						"icon": "shop",
						"to": "/pages/my/onlinePay" */
					}]
				],
			}
		},
		computed: {
			...mapState([
				'username', // 映射 this.username 为 store.state.username
				'token'
			]),
			...mapGetters([
				'metadata'
			]),
		},
		onLoad(query) {
			// this.init();
		},
		onShow() {
			// console.log("metadata:", this.metadata);
			this.init();
		},
		methods: {
			init() {
				this.getSelfInfo();
			},
			// 获取个人信息
			getSelfInfo() {
				uni.request({
					url: apiGetSelfInfo,
					header: this.metadata,
					method: "POST",
					data: {
					},
					success: (res) => {
						// console.log("getSelfInfo", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.selfInfo = data;
							
							// this.ucenterList[0][0]["rightText"] = this.selfInfo.name;
							// this.ucenterList[0][1]["rightText"] = this.selfInfo.phone;
							this.ucenterList[0][0]["rightText"] = this.selfInfo.phone;
							this.ucenterList[1][0]["rightText"] = this.selfInfo.balance + " 元";
						}
					},
					fail: (err) => {
						console.log("getSelfInfo err", err)
					},
				});
			},
			// 用户退出
			signOut() {
				uni.request({
					url: apiSignOut,
					header: this.metadata,
					method: "POST",
					data: {
						username: this.username,
						password: this.password
					},
					success: (res) => {
						// console.log("signOut", res);
						if (res.data.code == 0) {
			
							this.$store.commit("setUsername", "");
							this.$store.commit("setUserlevel", 0);
							this.$store.commit("setToken", "");
			
							uni.showToast({
								title: `账号已退出`,
								icon: 'none',
								duration: 3000
							});
							
							const url = '/pages/login/login';
							tools.appAction(url, "uni.navigateTo");
						} else {
							uni.showToast({
								title: `退出失败: ${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("signOut err", err);
					},
				});
			},
			/* showDetail(data) {
				console.log("showDetail data:", data);
				this.queryObj.actId = data.actId;
				this.queryString = tools.objectToQueryString(this.queryObj);
				const url = '/pages/exchange/style1/goodsDetail?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			}, */
			btnQuit() {
				this.confirmContent = `您确定要退出吗？`;
				this.$refs.confirmDialog.open();
			},
			confirmDialogConfirm() {
				this.signOut();
			},
			ucenterListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
		}
	}
</script>

<style scoped>
	/deep/ uni-page {
		background-color: #F6F6F6;
	}
	
	.top {
		background: url("../../static/bg_topbar.png") no-repeat;
		background-size: 100% 100%;
	}
	
	.top-content {
		position: relative;
		width: 90%;
		height: 90px;
	}

	.tc-headimg {
		width: 48px;
		height: 48px;
	}

	.tc-userBox {
		height: 80%;
		margin-left: 20px;
		flex-grow: 1;
	}

	.userBox-name {
		font-size: 16px;
		font-weight: 550;
		color: #ffffff;
	}

	.userBox-info {
		width: 90%;
		font-size: 14px;
		font-weight: 500;
		color: #ffffff;
	}

	.btnQuit {
		width: 45px;
		height: 26px;
		border-radius: 4px;
		background: #FFE19C;

		line-height: 26px;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #383838;
	}
	
	.center-list {
		width: 100%;
		margin-top: 10px;
	}
	
	::v-deep .uni-list-item__extra-text {
		font-size: 14px;
	}
	
	.item-footer {
		flex-direction: row;
		align-items: center;
	}
	
	.item-balance {
		color: #383838;
		font-size: 18px;
		font-weight: 500;
		/* padding-right: 10rpx; */
	}
	
</style>