RentWeAppFront/pages/center/center.vue

<template>
	<view class="user-center">
		<u-navbar title="个人中心" :is-back="false" :background="background" title-color="#2D2B2C"></u-navbar>
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<u-avatar :src="avatar" size="133"></u-avatar>
			<view class="user-info">
				<view class="user-name">
					<text class="name-text">黄某某</text>
					<text class="auth-tag">未认证</text>
				</view>
				<view class="user-type">用户类型：组织</view>
			</view>
			<view class="msg-setting">
				<view class="u-relative" @click="toMessage()">
					<u-icon name="chat" size="48" color="#333"></u-icon>
				</view>
				<u-icon name="setting" size="48" color="#333" @click="toSetting()"></u-icon>
			</view>
		</view>

		<view class="contract-view">
			<!-- 我的合同和我的预约 -->
			<view class="contract-appointment">
				<view class="card" @click="clickNav('pages/center/history')">
					<view class="card-content">
						<view class="card-number">5</view>
						<view class="card-type">份合同</view>
					</view>
					<view class="card-icon">
						<image src="/static/icon/sign.png" mode="widthFix"></image>
					</view>
					<view class="card-title">我的合同</view>
				</view>
				<view class="card" @click="clickNav('pages/reserve/reserveRecords')">
					<view class="card-content">
						<view class="card-number">3</view>
						<view class="card-type">个预约</view>
					</view>
					<view class="card-icon">
						<image src="/static/icon/预约.png" mode="widthFix"></image>
					</view>
					<view class="card-title">我的预约</view>
				</view>
			</view>

			<!-- 我的服务 -->
			<view class="my-service">
				<view class="service-title">我的服务</view>
				<view class="service-list">
					<view class="service-item" @click="clickNav('pages/bill/bill')">
						<view class="service-icon">
							<image src="/static/icon/账单.png" mode="widthFix"></image>
						</view>
						<view class="service-name">账单</view>
					</view>
					<view class="service-item" @click="clickNav('pages/center/myLease')">
						<view class="service-icon">
							<image src="/static/icon/住房C.png" mode="widthFix"></image>
						</view>
						<view class="service-name">租赁资产</view>
					</view>
					<view class="service-item" @click="clickNav('pages/wae/wae')">
						<view class="service-icon">
							<image src="/static/icon/水电费.png" mode="widthFix"></image>
						</view>
						<view class="service-name">水电缴费</view>
					</view>
					<view class="service-item" @click="clickNav('pages/unpaid/unpaid')">
						<view class="service-icon">
							<image src="/static/icon/待付款.png" mode="widthFix"></image>
						</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/message/guestbook')">
					<view class="tool-icon">
						<image src="/static/icon/留言纸.png" mode="widthFix"></image>
					</view>
					<view class="tool-name">留言板</view>
				</view>
				<view class="tool-item" @click="clickNav('pages/bill/payHistory')">
					<view class="tool-icon">
						<image src="/static/icon/账本.png" mode="widthFix"></image>
					</view>
					<view class="tool-name">缴费记录</view>
				</view>
				<view class="tool-item" @click="clickNav('pages/wae/waeRecords')">
					<view class="tool-icon">
						<image src="/static/icon/书签.png" mode="widthFix"></image>
					</view>
					<view class="tool-name">水电费明细</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UCellItemPlus from "../../components/ucellitem/UCellItemPlus.vue";
	import config from "@/common/config.js";

	export default {
		components: {
			UCellItemPlus
		},

		data() {
			const life = uni.getStorageSync('lifeData') || {}
			const user = (life.vuex_user && life.vuex_user.user) || {}

			return {
				user, // user 信息放这里即可
				show: true,
				showGetProfile: false,
				userType:'',
				oaAuth:'',
				gridList: [{
						name: "我的合同",
						icon: "/static/icon/sign.png",
						url: "pages/center/history"
					},
					{
						name: "我的账单",
						icon: "../../static/icon/账单.png",
						url: "pages/bill/bill"
					},
					{
						name: "我的待付",
						icon: "../../static/icon/待付款.png",
						url: "pages/unpaid/unpaid"
					},
					{
						name: "水电缴费",
						icon: "../../static/icon/水电费.png",
						url: "pages/wae/wae"
					}
				],
				cellList: [{
						name: "我的租赁资产",
						icon: "/static/icon/住房C.png",
						url: "pages/center/myLease"
					},
					{
						name: "我的预约",
						icon: "/static/icon/预约.png",
						url: "pages/reserve/reserveRecords"
					},
					{
						name: "缴费记录",
						icon: "/static/icon/账本.png",
						url: "pages/bill/payHistory"
					},
					{
						name: "水电费明细",
						icon: "/static/icon/书签.png",
						url: "pages/wae/waeRecords"
					},
					{
						name: "留言板",
						icon: "/static/icon/留言纸.png",
						url: "pages/wae/waeRecords"
					}
				],
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
				},
			}
		},

		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
			}
		},

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

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

		onShow() {
			// this.checkToken();
			
		},

		methods: {
			logout() {
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				this.$u.route('/pages/login/login')
			},

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

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

			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18720989281"
				});
			},

			aboutMe() {
				this.$u.route('/pages/profile/aboutMe')
			},

			toMyLease() {
				this.$u.route('/pages/center/myLease')
			},
			checkToken() {
				let lifeData = uni.getStorageSync('lifeData');
				let token = lifeData.vuex_token
				if (!token || token === null || token === undefined ||
					(typeof token === 'object' && Object.keys(token).length === 0)) {
					console.log("登录态不存在")
					return uni.reLaunch({
						url: '../login/login'
					})
				}
				let url = "/login/checkExpiration";
				this.$u.get(url, {}, {'WT': token}).then(obj => {
					if (obj.data) {
						uni.reLaunch({
							url: '../login/login'
						});
					}
				});
			},

			clickNav(url) {
				if (url) {
					this.$u.route(url);
				} else {
					this.$mytip.toast('敬请期待')
				}
			},

			updateAvatar() {
				// 触发 computed 自动更新
				this.$forceUpdate()
			},
			// 进入个人中心时判断是否需要补充资料
			checkNeedProfile() {
				let life = uni.getStorageSync('lifeData') || {}
				let user = life.vuex_user
				let token = life.vuex_token
				if (!token) return; // 未登录不弹窗
				// 没有头像或昵称才弹窗
				if (!user || !user.avatarUrl || !user.nickName) {
					this.showGetProfile = true;
				}
			},
			getWxProfile() {
				uni.getUserProfile({
					desc: "用于完善个人资料展示",
					success: res => {
						const userInfo = res.userInfo;
						// 存储
						this.$u.vuex('vuex_user', userInfo);

						// 也可同步调用后端更新头像昵称
						// this.$u.post('/user/updateWxInfo', userInfo);

						this.showGetProfile = false;
					},
					fail: () => {
						uni.showToast({
							title: "授权失败",
							icon: "none"
						});
					}
				});
			},
			getUserOtherInfo() {
				let life = uni.getStorageSync('lifeData') || {}
				let token = life.vuex_token
				let url = "/login/userOtherInfo";
				this.$u.get(url, {}, {'WT': token}).then(obj => {
					this.userType = obj.data.userType;
					this.oaAuth = obj.data.oaAuth;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-center {
		background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
		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: 20rpx;
	}

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

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

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

	.msg-setting {
		display: flex;
		gap: 20rpx;
	}
	
	.contract-view{
		width: 96%;
		margin: 0 auto;
		background: linear-gradient(0deg, #FCFAF5 0%, #FAECCE 100%);
		border-radius: 10rpx;
	}

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

	.card {
		flex: 1;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.card-content {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.card-number {
		font-size: 48rpx;
		font-weight: 600;
		color: #FF6B35;
	}

	.card-type {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

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

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

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

	/* 我的服务 */
	.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;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 40rpx;
	}

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

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

	.tool-item {
		width: 25%;
		margin-bottom: 20rpx;
		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;
	}
</style>