emis-app/pages/tabBar/mine/mine.vue

<template>
	<tpx-page>
		<view style="position: relative;">
			<view class="customer_nav_bar">
			   <!-- 这里是状态栏 -->
			</view>
			<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
			
			<view class="pg-container">
				
				<view class="com-jianju" style="margin-top: 10rpx;">
					<u-row align="center" justify="between">
						<view>
							<u-row>
								<u-avatar size="120" :src="userInfo.avatar"></u-avatar>
								<view class="pl-30">
									<u-row>
										<u-text :text="userInfo.empName" color="#fff" size="32" bold="true"></u-text>
										<view class="ml-20 clr-wht font-24 pos-rlt" style="padding: 8rpx 12rpx;">{{userInfo.ownerSiteName}}
											<view class="pos-abt-all" style="z-index: 0;background: #FFFFFF;opacity: 0.2;border-radius: 20rpx;"></view>
										</view>
									</u-row>
									<view class="mt-20 clr-wht font-24">{{userInfo.phonenumber}}</view>
								</view>
							</u-row>
						</view>
						<view>
							<u-image @click="goto('user/exclusiveQrcode')" height="140" width="140" :src="userInfo.qrCodeImgUrl" radius="10"></u-image>
						</view>
					</u-row>
					
					<view v-if="staticDataList.length > 0" class="mt-40">
						<u-row justify="between">
							<template v-for="(mbItem, mIndex) in staticDataList">
								<view style="flex: 1;text-align: center;">
									<view class="clr-wht font-32 font-weight">
										<text class="font-26">￥</text>
										<tex>{{mbItem.subTitle}}</tex>
									</view>
									<view class="pt-20 clr-wht font-26" style="opacity: 0.8;">{{mbItem.title}}</view>
								</view>
								<view v-if="mIndex+1 != staticDataList.length">
									<u-line direction="col" color="#fff" length="60"></u-line>
								</view>
							</template>
						</u-row>
					</view>
									
				    <view v-if="mainBtnlist.length > 0" class="blk-mdl">
						<u-row>
							<u-col v-for="(item, index) in mainBtnlist" span="3" align="center" custom-style="padding: 30rpx 0;"
								@click="goto(item.url)"
							>
								<u-image height="60" width="60" :src="item.icon" custom-style="margin-left: auto;margin-right: auto;"></u-image>
								<u-text :text="item.title" margin="20rpx 0 0 0" align="center" color="#666" size="26"></u-text>
							</u-col>
						</u-row>
					</view>
					
					<view class="blk-mdl">
						<view v-if="isAppChannel">
							<u-row @click="handleCheckAppVersion" custom-style="padding: 30rpx;" justify="between">
								<u-row>
									<u-image :src="getCdnUrl(`mine/banbenup.png`)" height="34" width="34"></u-image>
									<u-text margin="0 0 0 30rpx" text="版本更新" size="28" color="#333"></u-text>
								</u-row>
								<u-row>
									<u-text margin="0 10rpx 0 0" :text="curAppVersion" size="28" color="#666"></u-text>
									<u-icon name="arrow-right" size="32" color="#333"></u-icon>
								</u-row>
							</u-row>
							<u-line></u-line>
						</view>
						
						<u-row @click="setClipboardData(curDeviceId)" custom-style="padding: 30rpx;" justify="between">
							<u-row custom-style="margin-right: 30rpx;">
								<!-- <u-image :src="getCdnUrl(`mine/banbenup.png`)" height="34" width="34"></u-image> -->
								<u-icon name="tags" size="46" color="#333" custom-style="margin-left:-12rpx;"></u-icon>
								<u-text margin="0 0 0 30rpx" text="设备Id" size="28" color="#333"></u-text>
							</u-row>
							<u-row custom-style="flex: 1;">
								<view style="text-align: right;flex: 1;">
									<tpx-text-dic :value="curDeviceId"></tpx-text-dic>
								</view>
								<u-icon name="arrow-right" size="32" color="#333"></u-icon>
							</u-row>
						</u-row>
						<u-line></u-line>
						<u-row @click="handleClearCache()" custom-style="padding: 30rpx;" justify="between">
							<u-row>
								<u-image :src="getCdnUrl(`mine/qingchu.png`)" height="34" width="34"></u-image>
								<u-text margin="0 0 0 30rpx" text="清空本地缓存" size="28" color="#333"></u-text>
							</u-row>
							<u-row>
								<u-icon name="arrow-right" size="32" color="#333"></u-icon>
							</u-row>
						</u-row>
						<u-line></u-line>
						<u-row custom-style="padding: 30rpx;" justify="between">
							<u-row>
								<u-image :src="getCdnUrl(`mine/sao.png`)" height="34" width="34"></u-image>
								<u-text margin="0 0 0 30rpx" text="红线扫描模式" size="28" color="#333"></u-text>
							</u-row>
							<u-row>
								<u-switch v-model="saomiao" active-color="#B12D29" size="34"></u-switch>
							</u-row>
						</u-row>
						<u-line></u-line>
						<u-row @click="goto(`user/updatePassword`)" custom-style="padding: 30rpx;" justify="between">
							<u-row>
								<u-image :src="getCdnUrl(`mine/xiumima.png`)" height="34" width="34"></u-image>
								<u-text margin="0 0 0 30rpx" text="修改密码" size="28" color="#333"></u-text>
							</u-row>
							<u-row>
								<u-icon name="arrow-right" size="32" color="#333"></u-icon>
							</u-row>
						</u-row>
						<u-line></u-line>
					</view>
					
					<view class="pt-40 pb-40">
						<u-button @click="handleUnlogin" type="primary" size="large" shape="circle"
							custom-style="height:86rpx;font-size: 32rpx;border-radius: 20rpx;"
						>退出登录</u-button>
					</view>
				</view>
				
			</view>
		</view>
	</tpx-page>
</template>
<script>
	import { USERKEY } from "@/store/actionKey"
	import { dealBtnMap } from "@/common/enum"
	import * as apiService from "@/common/api"
	import { getAuthList, authCodeEnum } from "@/common/authCode"
	import { getCurrentAppInfo, getSystemInfo, checkUpdate } from "@/common/appUpdate"
	
	export default {
		computed: {
		    userInfo() {
		      return this.$store.getters.userInfo
		    },
			staticDataList(){
				let { commStat } = this.staticInfo
				let list = [
					{  title: '计提预估', subTitle: commStat.estMoney, url: '', code: authCodeEnum.jiTiYuGu },
					{  title: '待回款', subTitle: commStat.waitPay, url: '', code: authCodeEnum.daiHuiKuan }
				]
				list = getAuthList({ list, _thisPage: this })
				return list
			},
			mainBtnlist(){
				let list =  [
					{...dealBtnMap.woDeRenWu},
					{...dealBtnMap.jiTiMingXi},
					{...dealBtnMap.woDeErWeiMa},
					{...dealBtnMap.yeWuTongJi},
				]
				list = getAuthList({ list, _thisPage: this })
				return list
			},
		},
		props: {
		},
		data() {
			return {
				staticInfo: {
					commStat: {},
					orderStat: {},
				},
				saomiao: true,
				curAppVersion: '',
				curDeviceId: ''
				
			}
		},
		onShareAppMessage() {
			return {
				
			}
		},
		onLoad() {
			this.initData()
		},
		onShow(){
			this.initData()
		},
		methods: {
			async initData(){
				this.getAppHomeStatData()
				this.curDeviceId = getSystemInfo()?.deviceId
				let appRes = await getCurrentAppInfo()
				this.curAppVersion = appRes._appVersion
			},
			async getAppHomeStatData(){
				let res = await apiService.getAppHomeStatData()
				this.staticInfo = res.data
			},
			async handleUnlogin() {
				await this.$store.dispatch(USERKEY.LOGOUT)
				this.goto(`login/login`, 2)
			},
			async handleCheckAppVersion() {
				let res = await checkUpdate()
				this.showToast('已经是最新版本，无需更新')
			},
			handleClearCache() {
				// TODO
				this.showToast('清除成功')
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
</style>
<style scoped lang="scss">
	.com-jianju {
		margin-left: 28rpx;
		margin-right: 28rpx;
	}
	.hdbg{
		position: absolute;
		height: 600rpx;
		top: 0;
		z-index: 1;
		width: 100%;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	
	.blk-mdl{
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>