great_distribution/pages/me/index.vue

<template>
	<view class="me-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="me-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="me-content-header">	
				<customNavbar 
				title="我的" 
				bgColor="#fff"
				:is-left="false"
				:contentStyle="{color: '#000'}"
				></customNavbar>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- userInfo内容 开始 -->
			
			<view class="me-content-userinfo">
				<view class="me-userinfo-info">
					<view><text>分销商名称：</text><text>{{ userInfo && userInfo.name }}</text></view>
					<view><text>负责人：</text><text>{{ userInfo && userInfo.contact }}</text></view>
				</view>
			</view>
			<!-- userInfo内容 结束 -->
			
			<!-- tool内容 开始  -->
			<view class="me-content-tool">
				<view 
				class="me-tool-item"
				v-for="(item,index) in tool"
				:key="index"
				@click="navigateToFun(item)"
				>
					<image 
					class="me-tool-item-icon"
					:src="item.icon"></image>
					<text>{{ item.title }}</text>
					<view><u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
			<!-- tool内容 结束  -->
			<!--  退出登录  -->
			<view class="me-content-loginout">
				<u-button
				class="login-info-submit-but"
				@click="submit()"
				:loading="loading"
				loadingText="退出中..."
				>退出登录</u-button>
			</view>
		</view>
		<!-- 我的分享码  -->
		<customPromotionCode ref="customPromotionCode" />
	</view>
</template>

<script>
	import { navigateTo } from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '这是我的',
				loading: false,
				statusBarHeight: 0, // 状态栏安全距离
				tool: [ // 我的工具
					{ title: "邀请统计",icon: this.$commonConfig.staticUrl + 'me/yijian2.png', url: '/pages/invitationStatistics/index' },
					{ title: "余额提现",icon: this.$commonConfig.staticUrl + 'me/beifeng.png', url: '/pages/balance/index' },
					{ title: "我的推广码",icon: this.$commonConfig.staticUrl + 'me/yijian1.png', url: '' },
					// { title: "提现记录",icon: this.$commonConfig.staticUrl + 'me/beifeng.png', url: '/pages/cashList/index' },
				],
				userInfo: {}
			}
		},
	
		
		mounted() {
			console.log('wpsdfsfasdfads')
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.getUserInfo() 
			// #ifdef H5
			//window.addEventListener('popstate', this.browserBack)
			// #endif
		},
		destroyed() {
			console.log("dsfadsfsdfasdf")
			//window.removeEventListener("popstate", this.browserBack);
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(item){
				if(item.url) {
					navigateTo(item.url)
				}else {
					this.getRetailQrcode()
				}
				
			},
			/**
			 * 获取用户信息
			 */
			async getUserInfo() {
				try{
					let res = await this.$u.api.getInfo({
						noSign: 1,
						userid: this.vuex_user_info.userId
					})
					
					if(res && res.code ===200) {
						this.userInfo = res.data
					} 
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
				}
			},
			/**
			 * 我的推广码
			 */
			async getRetailQrcode(){
				try{
					let res = await this.$u.api.getRetailQrcode({
						noSign: 1,
						userid: this.vuex_user_info.userId
					})
					
					if(res && res.code ===200) {
						this.$refs.customPromotionCode.initData(res.data)
						// #ifdef H5
						//window.history.pushState(null, null, document.URL)
						// #endif
					} 
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
				}
			},
			/**
			 * 
			 * 提交登录
			 * 
			 */
			submit() {
				// 在这里写弹框
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗?',
					cancelText: '取消',
					confirmText: '确定',
					success: (res) => {
						if(res.confirm){
							this.loginOut()
						}
						
					}
				});
			},
			async loginOut() {
				// console.log("vuex_user_info===",this.vuex_user_info)
				// return
				// if(!this.vuex_user_info.accessToken) {
				// 	this.$u.vuex('vuex_user_info', {});
				// 	uni.reLaunch({
				// 		url: "/pages/login/index"
				// 	})
				// 	return
				// }
				this.loading = true
				try{
					let res = await this.$u.api.loginOut({})
					this.loading = false
					if(res && res.code ===200) {
						uni.setStorageSync('lifeData',{}); // 清除缓存
						this.$u.vuex('vuex_user_info', {});
						uni.reLaunch({
							url: "/pages/login/index"
						})
					} else {
						// uni.showToast({
						// 	icon: "none",
						// 	title: res.msg
						// })
						uni.setStorageSync('lifeData',{}); // 清除缓存
						this.$u.vuex('vuex_user_info', {});
						uni.reLaunch({
							url: "/pages/login/index"
						})
					}
					this.loading = false
				}catch(e){
					//TODO handle the exception
					console.error("e===",e)
					// uni.showToast({
					// 	icon: "none",
					// 	title: "退出失败"
					// })
					uni.setStorageSync('lifeData',{}); // 清除缓存
					this.$u.vuex('vuex_user_info', {});
					uni.reLaunch({
						url: "/pages/login/index"
					})
					this.loading = false
				}
			},
			browserBack() {
				// 在这里写弹框
				uni.showModal({
					title: '提示',
					content: '返回后此页面的操作将不作保留！',
					cancelText: '确定返回',
					confirmText: '留在此页',
					success: (res) => {
						if (res.confirm) {
							// 用户选择留在此页，不进行任何操作
						} else if (res.cancel) {
							window.history.back(); // 使用window.history.back()返回上一页
						}
					}
				});
				//window.history.replaceState(null, null, document.URL); // 保留此行代码
			},
		}
	}
</script>

<style lang="scss" scoped>
	.me-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--header-h: 90rpx;
		.me-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.me-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	/** userInfo内容 开始 */
	.me-content-userinfo {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		.me-userinfo-info {
			width: 100%;
			height: 200rpx;
			box-sizing: border-box;
			background: linear-gradient(to bottom, rgba(238, 12, 12, 1) 0%, rgba(243, 157, 159, 1) 100%);
			border-radius: 20rpx;
			box-shadow: 0rpx 0 20rpx 2rpx rgba(205, 205, 205, 0.50);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			padding: 0 50rpx;
			>view:nth-child(1) {
				display: flex;
				font-weight: 600;
				width: 100%;
				text:nth-child(1) {
					width: 168rpx;
					flex-shrink: 0;
				}
				text:nth-child(2) {
					width: calc( 100% - 168rpx );
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 设置最大显示行数 */
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
				}
			}
			>view:nth-child(2) {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				text:nth-child(1) {
					width: 112rpx;
					flex-shrink: 0;
				}
				text:nth-child(2) {
					width: calc( 100% - 112rpx );
				}
			}
		}
	}
	/** userInfo内容 结束  **/
	
	/** tool内容 开始  */
	.me-content-tool {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 0;
		.me-tool-item {
			width: 100%;
			background: #FBFBFB;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(54, 54, 54, 1);
			font-size: 28rpx;
			padding: 12rpx 10rpx;
			margin-bottom: 20rpx;
			.me-tool-item-icon {
				width: 54rpx;
				height: 56rpx;
				flex-shrink: 0;
			}
			>text {
				width: 100%;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			
		}
	}
	/** tool内容 结束  */
	
	/** */
	.me-content-loginout {
		width: 100%;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
		.login-info-submit-but {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			width: 100% !important;
			height: 80rpx !important;
			background-color: var(--gd-bgm-color);
			color: #fff;
		}
	}
</style>