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

<template>
	<tpx-page>
		<view style="position: relative;">
			<view class="customer_nav_bar">
			   <!-- 这里是状态栏 -->
			</view>
			<image class="hdbg" :src="getCdnUrl(`mine/hdbg.png`)"/>
			
			<view class="pg-container">
				
				<view class="com-jianju" style="margin-top: 30rpx;">
					<u-row align="center" >
						<u-col span="11">
							<u-row>
								<u-avatar :src="userInfo.avatar" size="120"></u-avatar>
								<u-col custom-style="padding-left: 24rpx;">
									<u-text :text="userInfo.nickName" color="#fff" :bold="true" size="36"></u-text>
									<u-text margin="10rpx 0 0 0" :text="userInfo.phonenumber" color="#fff" size="26"></u-text>
								</u-col>
							</u-row>
						</u-col>
						<!-- <u-col @click="handleUnlogin" span="1" align="end">
							<image style="height: 32rpx;width: 32rpx;" :src="getCdnUrl(`mine/right.png`)"/>
						</u-col> -->
					</u-row>
				</view>
				
				
				<view class="com-jianju" style="margin-top: 50rpx;">
					<u-row justify="between">
						<u-col v-for="(mbItem, mIndex) in staticDataList" span="5.8" 
							customStyle="background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);border-radius: 20rpx;padding: 30rpx;"
						>
							<u-row justify="center">
								<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
								<view style="margin-left: 22rpx;">
									<u-text size="28rpx" color="#fff" :bold="true" :text="mbItem.title"></u-text>
									<u-text size="24rpx" color="#999"  margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
								</view>
							</u-row>
						</u-col>
					</u-row>
				</view>
				
				<view class="com-jianju pb-block" style="margin-top: 30rpx;padding: 10rpx 0;">
					<u-row justify="start" custom-style="flex-wrap: wrap;">
						<u-col span="3" v-for="tlItem in toolBtnlist" align="center"
							@click="handlePageRedirect(tlItem)"
						>
							<u-col align="center" justify="center" custom-style="padding: 20rpx 0;display: flex;">
								<image :src="tlItem.icon" style="height: 66rpx;width: 66rpx" mode="aspectFit"/>
								<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
							</u-col>
						</u-col>
					</u-row>
				</view>
				
			</view>
		</view>
		<buns-privacy-dialog v-model:show="privacyModal.show" :content="privacyModal.content" title="快件运单契约条款"> </buns-privacy-dialog>
	</tpx-page>
</template>
<script>
	import getCdnUrl from "@/common/getCdnUrl"
	import { dealBtnMap } from "@/common/enum"
	import { USERKEY } from "@/store/actionKey"
	import * as apiService from "@/common/api"
	import { goLogin } from "@/common/loginHandle"
	
	export default {
		computed: {
		    userInfo() {
		      return this.$store.getters.userInfo
		    },
			staticDataList(){
				let { recieveNum, sendNum } = this.staticInfo
				let list = [
					{  title: `${sendNum || 0}单`, subTitle: "寄件", icon: getCdnUrl(`mine/jijian.png`), url: '' },
					{  title: `${recieveNum || 0}单`, subTitle: "收件", icon: getCdnUrl(`mine/shjian.png`), url: '' }
				]
				return list
			}, 
		},
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		data() {
			return {
				staticInfo: {
				},
				toolBtnlist: [
					{  title: '运单列表', subTitle: "", icon: getCdnUrl(`mine/ydlib.png`), url: 'tabBar/search/search' },
					{  title: '月结卡号', subTitle: "", icon: getCdnUrl(`mine/jcdan.png`), url: 'user/monthCardList' },
					{  title: '协议', subTitle: "", icon: getCdnUrl(`mine/xieyi.png`), url: '', enType: 'rule' },
					{  title: '账单查询', subTitle: "", icon: getCdnUrl(`mine/zhdancha.png`), url: 'bill/list' },
					{  title: '地址簿', subTitle: "", icon: getCdnUrl(`mine/dizhi.png`), url: 'address/list' },
					{  title: '快件查询', subTitle: "", icon: getCdnUrl(`mine/kjcha.png`), url: 'post/query' },
					{  title: '投诉建议', subTitle: "", icon: getCdnUrl(`mine/tousu.png`), url: 'complaint/complaint' },
					{  title: '实名填写', subTitle: "", icon: getCdnUrl(`mine/shiming.png`), url: 'user/certification' }
				],
				privacyModal: {
					show: false,
				},
			}
		},
		onShareAppMessage() {
			return {
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			handlePageRedirect(item) {
				item.url && this.goto(item.url)
				if(item.enType == 'rule') {
					this.handleDialogClick(this.privacyModal)
				}
			},
			async initData(){
				this.getOrderStatData()
				this.getPrivateRuleData()
			},
			async getPrivateRuleData(){
				let res = await apiService.getAgreementTxt()
				this.privacyModal.content = res?.data || ''
			},
			async getOrderStatData(){
				let res = await apiService.getCustOrderStatData()
				this.staticInfo = res.data
			},
			async handleUnlogin() {
				await this.$store.dispatch(USERKEY.LOGOUT)
				goLogin()
			},
			handleDialogClick(curModal){
				curModal.show = true
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
</style>
<style scoped lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.hdbg{
		position: absolute;
		height: 636rpx;
		top: 0;
		z-index: 1;
		width: 100%;
	}
	.pg-container{
		position: relative;
		z-index: 2;
		overflow-x: hidden;
	}
	
	.header{
		color: #FFF;
		.btn-ljyy{
			margin-left: 0;
			width: 144rpx;
			margin-top: 26rpx;
			box-sizing: content-box;
			background: #FFF;
			border-radius: 21rpx;
			font-size: 24rpx;
			color: #B12D29;
			padding: 8rpx 0;
			text-align: center;
			line-height: normal;
		}
		.fjhw{
			margin-top: 20rpx;
			height: 162rpx;
			width: 328rpx;
		}
	}
	
	.pb-block{
		background: #FFF;
		border-radius: 20px;
	}
</style>