RentWeAppFront/pages/center/center.vue

<template>
	<view class="user-center" :style="{backgroundImage: `url(${staticHost + bgPath1})`}">
		<customNavbar title="个人中心" ref="navbar" :is-transparent="navbarStyle.isTransparent"
			:bg-color="navbarStyle.bgColor" :text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity"
			:extra-icons="navbarStyle.extraIcons" :show-home="false" :show-back="false" />
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<u-avatar :src="avatar" size="133"></u-avatar>
			<view class="user-info">
				<view class="user-name">
					<text class="name-text">{{user.userName || '用户0564'}}</text>
					<text class="auth-tag">{{user.oaAuth ? '已认证' : '未认证'}}</text>
				</view>
				<view class="user-type">用户类型：{{user.userType ==='0' ? '个人' : '组织'}}</view>
			</view>
			<view class="msg-setting">
				<view class="u-relative msg-icon" @click="toMessage()">
					<u-icon name="chat" size="48" color="#333"></u-icon>
					<view v-if="unreadMsgCount > 0" class="badge">
							{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}
						</view>
				</view>
				<u-icon name="setting" size="48" color="#333" @click="toSetting()"></u-icon>
			</view>
		</view>

		<view class="contract-view" :style="{backgroundImage: `url(${staticHost + bgPath2})`}">
			<!-- 我的合同和我的预约 -->
			<view class="contract-appointment">
				<view class="card" @click="clickNav('/pages-biz/contract/contract')">
					<view class="card-title">我的合同</view>
					<view class="card-main">
						<view class="card-content">
							<view class="card-number">{{unsignContractNum}}</view>
							<view class="card-type">份待签署合同</view>
						</view>
						<view class="card-icon">
							<image :src="staticHost + '/public' + '/static/icon/sign.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="card" @click="clickNav('/pages-biz/reserve/reserveRecords')">
					<view class="card-title">我的预约</view>
					<view class="card-main">
						<view class="card-content">
							<view class="card-number">{{handlingReserveNum}}</view>
							<view class="card-type">个预约中</view>
						</view>
						<view class="card-icon">
							<image :src="staticHost + '/public' + '/static/icon/sign.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="my-service">
				<view class="service-title">订单信息</view>
				<view class="service-list">
					<view class="service-item" @click="clickNav('/pages-biz/bill/payHistory')">
						<view class="service-icon">
							<image :src="staticHost + '/public' + '/static/icon/bill.png'"></image>
						</view>
						<view class="service-name">账单</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/myrent/myLease')">
						<view class="service-icon">
							<image :src="staticHost + '/public' + '/static/icon/myrent.png'"></image>
						</view>
						<view class="service-name">租赁资产</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/wae/wae')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/icon/wae.png'"></image>
							<view v-if="unpaidWaeCount > 0" class="badge">
										{{ unpaidWaeCount > 99 ? '99+' : unpaidWaeCount }}
									</view>
						</view>
						<view class="service-name">水电费待付</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/unpaid/unpaid')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/icon/unpaid.png'"></image>
							<view v-if="unpaidRentCount > 0" class="badge">
										{{ unpaidRentCount > 99 ? '99+' : unpaidRentCount }}
									</view>
						</view>
						<view class="service-name">租金待付</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 辅助工具 -->
		<view class="common-tools">
			<view class="tools-title">辅助工具</view>
			<view class="tools-list">
				<view class="tool-item" @click="clickNav('/pages-assets/fallback/fallback')">
					<view class="tool-icon">
						<image :src="staticHost + '/public' + '/static/icon/fallback.png'" mode="widthFix"></image>
					</view>
					<view class="tool-name">留言板</view>
				</view>
				<!-- 新增计算器 -->
				<view class="tool-item" @click="clickNav('/pages-biz/tool/calculator')">
					<view class="tool-icon">
						<image :src="staticHost + '/public/static/icon/calculator.png'" mode="widthFix"></image>
							</view>
							<view class="tool-name">计算器</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js";

	export default {
		data() {
			const life = uni.getStorageSync('lifeData') || {}
			return {
				user:{},
				bgPath1: '/public/static/center/my-bg.png',
				bgPath2: '/public/static/center/my-bg2.png',
				unsignContractNum:0,
				handlingReserveNum:0,
				// 导航栏样式控制
					unreadMsgCount: 0,      // 未读消息
					unpaidWaeCount: 0,      // 水电费待付
					unpaidRentCount: 0,     // 租金待付
				navbarStyle: {
					isTransparent: true,
					bgColor: '#ffffff',
					textColor: '#000000',
					opacity: 0,
					extraIcons: [] // 右侧额外图标
				},
			}
		},

		computed: {
			avatar() {
				const life = uni.getStorageSync('lifeData') || {}
				const user = life.vuex_user || {}
				const raw = user.avatarUrl

				if (!raw) return raw

				return raw.includes(config.staticUrl) ?
					raw :
					config.staticUrl + raw
			},
			staticHost() {
				return this.$config.staticUrl
			}
			
		},

		onLoad() {
			uni.$on('updateAvatar', () => {
				this.updateAvatar();
			})
			
		},

		onUnload() {
			uni.$off('updateAvatar')
		},

		onShow() {
			this.$checkToken(this.$getToken())
			this.loadUserInfo()
			this.countHandlingReserve()
			this.countUnHandleContract()
			
	
		},

		methods: {
			loadUserInfo(){
				this.user = uni.getStorageSync('userInfo');
			},
			logout() {
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				this.$u.route('/pages/login/login');
			    uni.removeStorageSync('userInfo');
			},

			toMessage() {
				this.$u.route('/pages-biz/message/message')
			},

			toSetting() {
				this.$u.route('/pages-biz/profile/setting')
			},

			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18720989281"
				});
			},
			clickNav(url) {
				if (url) {
					this.$u.route({
					    url
					});
				} else {
					this.$mytip.toast('敬请期待')
				}
			},

			updateAvatar() {
				// 触发 computed 自动更新
				this.$forceUpdate()
			},
			countUnHandleContract(){
				this.$u.get(`/contract/countUnsign`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unsignContractNum = res.data
					}
				})
			},
			countHandlingReserve(){
				this.$u.get(`/reservate/countHandling`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.handlingReserveNum = res.data
					}
				})
			},
			countUnreadMsg(){
				this.$u.get(`/messsage/countUnread`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unreadMsgCount = res.data
					}
				})
			},
			countUnpayRentBills(){
				this.$u.get(`/bill/countUnpayRentBills`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unpaidRentCount = res.data
					}
				})
			},
			countUnpayWaeBills(){
				this.$u.get(`/bill/countUnpayWaeBills`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unpaidWaeCount = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-center {
		padding-top: 175rpx;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: 750rpx 731rpx;
		min-height: 100vh;
	}

	/* 用户信息头 */
	.user-header {
		padding: 20rpx 40rpx 40rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.user-info {
		margin-left: 37rpx;
		flex: 1;
	}

	.user-name {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name-text {
		font-size: 38rpx;
		font-weight: 500;
		color: #2D2B2C;
		margin-right: 16rpx;
	}

	.auth-tag {
		font-size: 26rpx;
		color: #86868C;
		padding: 4rpx 12rpx;
	}

	.user-type {
		font-size: 26rpx;
		color: #86868C;
	}

	.msg-setting {
		display: flex;
		gap: 20rpx;
	}

	.contract-view {
		width: 96%;
		margin: 0 auto;
		background-repeat: round;
		border-radius: 10rpx;
	}

	/* 合同和预约卡片 */
	.contract-appointment {
		display: flex;
		gap: 30rpx;
		padding: 20rpx;
	}

	.card {
		flex: 1;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.card-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
	}

	.card-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.card-content {
		flex: 1;
	}

	.card-number {
		font-size: 48rpx;
		font-weight: 600;
		color: #EC712E;
		margin-bottom: 8rpx;
	}

	.card-type {
		font-size: 26rpx;
		color: #86868C;
	}

	.card-icon {
		position: absolute;
		right: 0;
		bottom: -20rpx;
	}

	.card-icon image {
		width: 120rpx;
		height: 111rpx;
	}

	/* 我的服务 */
	.my-service {
		padding: 30rpx 40rpx;
		margin-bottom: 30rpx;
	}

	.service-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 30rpx;
	}

	.service-list {
		display: flex;
		gap: 60rpx;
	}

	.service-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-icon {
		// margin-bottom: 16rpx;
	}

	.service-icon image {
		width: 80rpx;
		height: 70rpx;
	}

	.service-name {
		font-size: 24rpx;
		color: #222222;
	}

	/* 常用工具 */
	.common-tools {
		width: 96%;
		margin: 0 auto;
		padding: 30rpx 40rpx;
	}

	.tools-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 30rpx;
	}

	.tools-list {
		margin-top: 50rpx;
		margin-left: -20rpx;
		display: flex;
		flex-flow: row wrap;
	}

	.tool-item {
		width: 25%;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tool-icon {
		margin-bottom: 16rpx;
	}

	.tool-icon image {
		width: 47rpx;
		height: 47rpx;
	}

	.tool-name {
		font-size: 24rpx;
		color: #222222;
		
	}
	.badge-wrapper {
		position: relative;
		display: inline-block;
		width: 80rpx;   // 对应 image 尺寸
		height: 70rpx;  // 对应 image 尺寸
	}
	/* 红点角标 */
	.badge {
		position: absolute;
		top: -10rpx;
		right: -14rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
	
		background-color: #ff3b30;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
	
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		box-sizing: border-box;
	}
	
	/* 消息图标特殊一点 */
	.msg-icon {
		position: relative;
	}
</style>