From 6413160b6396c0cfbc65551242757f557be0b907 Mon Sep 17 00:00:00 2001
From: "wenqi.peng" <1647700520@qq.com>
Date: Mon, 29 Dec 2025 16:56:48 +0800
Subject: [PATCH] update

---
 pages/center/center.vue | 571 ++++++++++++++++++----------------------
 1 file changed, 258 insertions(+), 313 deletions(-)

diff --git a/pages/center/center.vue b/pages/center/center.vue
index fddddbe..610eb39 100644
--- a/pages/center/center.vue
+++ b/pages/center/center.vue
@@ -1,216 +1,104 @@
 <template>
 	<view class="user-center">
+		<u-navbar title="个人中心" :is-back="false" :background="background" title-color="#2D2B2C"></u-navbar>
 		<!-- 顶部用户信息 -->
-		<view class="user-header u-flex u-p-30">
-			<u-avatar :src="avatar" size="100"></u-avatar>
-			<view class="user-info u-m-l-20">
-				<view class="u-font-18 u-m-b-10">{{vuex_user.nickName}}</view>
-				<view class="user-tag">用户类型: {{userType === '0' ? '个人' : '组织'}}</view>
-				<view class="user-tag">系统认证：{{oaAuth === '1' ? '已认证' : '未认证'}}</view>
+		<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 u-m-r-20" @click="toMessage()">
-					<u-icon name="chat" size="50" color="#333"></u-icon>
-					<u-badge count="2" type="error" absolute :offset="[2,-2]"></u-badge>
+				<view class="u-relative" @click="toMessage()">
+					<u-icon name="chat" size="48" color="#333"></u-icon>
 				</view>
-				<u-icon name="setting" size="50" color="#333" @click="toSetting()"></u-icon>
+				<u-icon name="setting" size="48" color="#333" @click="toSetting()"></u-icon>
 			</view>
 		</view>
 
-		<!-- 会员中心卡片 -->
-		<!-- <view class="vip-card">
-			<view class="vip-header u-flex u-row-between">
-				<view class="vip-title">会员中心</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>
-			<u-tabs :list="vipTabs" :current="currentTab" @change="tabChange"></u-tabs>
-			<u-row gutter="20" class="vip-benefits u-m-t-20">
-				<u-col span="3" v-for="(item,index) in benefits" :key="index">
-					<view class="benefit-item u-text-center">
-						<u-icon :name="item.icon" color="#111" size="50"></u-icon>
-						<view class="u-font-14 u-m-t-10">{{ item.name }}</view>
-						<view class="u-font-12 u-tips-color">{{ item.desc }}</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>
-				</u-col>
-			</u-row>
-			<view class="vip-upgrade-btn" @click="upgrade">超值优惠 升级立享</view>
-		</view> -->
-        <view class="user-content">
-			<!-- 功能网格 -->
-				<!-- <view class="function-grid u-m-t-30">
-					<u-grid :col="4" :border="false">
-						<u-grid-item v-for="(item,index) in gridList" :key="index" @click="clickNav(item.url)">
-							<u-icon :name="item.icon" size="65" color="#333"></u-icon>
-							<text class="u-font-14 u-m-t-10" >{{ item.name }}</text>
-						</u-grid-item>
-					</u-grid>
-				</view> -->
-				<!-- <view class="function-grid">
-			      <swiper
-			            :indicator-dots="true"
-			            class="swiper"
-			    >
-			        <swiper-item>
-			            <u-grid :border="false">
-			                <u-grid-item
-			                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-			                        v-for="(item, index) in gridList"
-			                        :index="index"
-			                        :key="index"
-			                >
-			                    <u-icon
-			                            :customStyle="{paddingTop:20+'rpx'}"
-			                            :name="item.icon"
-			                            size="46" color="#333"
-			                    ></u-icon>
-			                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-			                </u-grid-item>
-			            </u-grid>
-			        </swiper-item>
-			        <swiper-item>
-			            <u-grid :border="false">
-			                <u-grid-item
-			                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-			                        v-for="(item, index) in gridList"
-			                        :index="index + 9"
-			                        :key="index"
-			                >
-			                    <u-icon
-			                            :customStyle="{paddingTop:20+'rpx'}"
-			                            :name="item.icon"
-			                            size="46" color="#333"
-			                    ></u-icon>
-			                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-			                </u-grid-item>
-			            </u-grid>
-			        </swiper-item>
-			        <swiper-item>
-			            <u-grid :border="false">
-			                <u-grid-item
-			                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-			                        v-for="(item, index) in gridList"
-			                        :index="index + 18"
-			                        :key="index"
-			                >
-			                    <u-icon
-			                            :customStyle="{paddingTop:20+'rpx'}"
-			                            :name="item.icon"
-			                            size="46" color="#333"
-			                    ></u-icon>
-			                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-			                </u-grid-item>
-			            </u-grid>
-			        </swiper-item>
-			    </swiper>
-			</view> -->
-				<view class="center-nav">
-					<u-row>
-						<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
-							<view v-if="item.name=='问题反馈'">
-								<!-- 调用微信反馈功能 -->
-								<button type="default" open-type="feedback" class="clearBtn" hover-class="none"
-									style="background-color: #FFFFFF;">
-									<u-icon :name="item.icon" color="#909399" size="50"></u-icon>
-									<view class="tabName" style="padding-top: 15rpx;">{{item.name}}</view>
-								</button>
-							</view>
-							<view @click="clickNav(item.url)" v-else>
-								<image :src="item.icon" style="width: 80rpx;height: 80rpx;" mode="widthFix"></image>
-								<view class="tabName">{{item.name}}</view>
-							</view>
-						</u-col>
-					</u-row>
 				</view>
-				<!-- 分隔条广告 -->
-				<!-- <view class="ad-banner u-m-t-20">
-					<image src="/static/ad-banner.png" mode="widthFix" style="width: 100%; border-radius: 12rpx;"></image>
-				</view> -->
-			
-				<!-- 其他功能列表 -->
-				<view class="other-list u-m-t-20 cell-group">
-					<!-- 功能网格 -->
-		
-						<view class="function-grid">
-					      <swiper
-					            :indicator-dots="true"
-					            class="swiper"
-					    >
-					        <swiper-item>
-					            <u-grid :border="false">
-					                <u-grid-item 
-					                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-					                        v-for="(item, index) in cellList"
-					                        :index="index"
-					                        :key="index"
-											v-if="index < 9"
-											@click="clickNav(item.url)"
-					                >
-					                    <!-- <u-icon
-					                            :customStyle="{paddingTop:20+'rpx'}"
-					                            :name="item.icon"
-					                            size="46" color="#333"
-					                    ></u-icon> -->
-										<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
-					                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-					                </u-grid-item>
-					            </u-grid>
-					        </swiper-item>
-					        <swiper-item>
-					            <u-grid :border="false">
-					                <u-grid-item
-					                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-					                        v-for="(item, index) in cellList"
-					                        :index="index + 9"
-											v-if="index >= 9 && index < 18 "
-					                        :key="index"
-											@click="clickNav(item.url)"
-					                >
-					                   <!-- <u-icon
-					                            :customStyle="{paddingTop:20+'rpx'}"
-					                            :name="item.icon"
-					                            size="46" color="#333"
-					                    ></u-icon> -->
-										<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
-					                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-					                </u-grid-item>
-					            </u-grid>
-					        </swiper-item>
-					        <swiper-item>
-					            <u-grid :border="false">
-					                <u-grid-item
-					                        :customStyle="{width:220+'rpx',height:220+'rpx'}"
-					                        v-for="(item, index) in cellList"
-					                        :index="index + 18"
-					                        :key="index"
-											@click="clickNav(item.url)"
-					                >
-					                 <!--   <u-icon
-					                            :customStyle="{paddingTop:20+'rpx'}"
-					                            :name="item.icon"
-					                            size="46" color="#333"
-					                    ></u-icon> -->
-										<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
-					                    <text class="u-font-14 u-m-t-10">{{item.name}}</text>
-					                </u-grid-item>
-					            </u-grid>
-					        </swiper-item>
-					    </swiper>
-					</view>
+			</view>
 		</view>
-	
-			<!-- 弹窗 -->
-		<!-- 	<u-popup v-model="showGetProfile" mode="center" border-radius="20">
-				<view class="popup-content">
-					<view class="title">获取头像</view>
-					<view class="desc">获取微信头像与昵称用于展示</view>
 
-					<button class="auth-btn" @click="getWxProfile">
-						授权获取头像
-					</button>
+		<!-- 常用工具 -->
+		<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>
-			</u-popup> -->
-
-			<!-- <UCellItemPlus v-for="(item, index) in cellList" :key="index" :title="item.name" :icon="item.icon" arrow
-				@click="clickNav(item.url)" /> -->
+				<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>
@@ -280,7 +168,11 @@
 						icon: "/static/icon/留言纸.png",
 						url: "pages/wae/waeRecords"
 					}
-				]
+				],
+				background: {
+					// 渐变色
+					backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
+				},
 			}
 		},
 
@@ -310,7 +202,7 @@
 
 		onShow() {
 			// this.checkToken();
-		
+			
 		},
 
 		methods: {
@@ -419,138 +311,191 @@
 </script>
 
 <style lang="scss" scoped>
-	.swiper {
-		height: 700rpx;
-	}
-
 	.user-center {
-		background-color: #f7f8fa;
+		background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
 		min-height: 100vh;
 	}
 
-	.user-content{
-		padding: 0 20rpx 20rpx 20rpx;
-		position: relative; /* 相对定位不会脱流，仅创建一个 z-index 环境 */
-		z-index: 1;
-		margin: 0 20rpx;
-		margin-top: 12rpx; /* 视觉上插入到延伸背景中，调节数值以适配 */
-			
-	}
-	.center-nav {
-		background-color: #FFFFFF;
-		padding: 30rpx 0;
-		border-radius: 8px;
-
-		.tabName {
-			color: black;
-			font-size: 26rpx;
-			padding-top: 10rpx;
-		}
-	}
-
-	.cell-group {
-		background-color: #fff;
-		border-radius: 20rpx;
-		overflow: hidden;
-	}
-
-	.cell-group>view:not(:last-child) {
-		border-bottom: 1rpx solid #f0f0f0;
-	}
-
-	/* 用户信息卡 */
+	/* 用户信息头 */
 	.user-header {
+		padding: 20rpx 40rpx 40rpx;
+		display: flex;
 		align-items: center;
-	      position: relative;
-	        padding-top: 200rpx !important;
-	        padding-bottom: 80rpx !important;
-	        background: linear-gradient(to right, #89CFF0, #5AA4D1);
-	        overflow: visible; /* 必须，否则延伸区域会被裁掉 */
-		.user-info {
-
-			.user-tag {
-				color: black;
-				padding: 8rpx 12rpx;
-				border-radius: 8rpx;
-				font-size: 24rpx;
-				width: fit-content;
-			}
-		}
-
-		.msg-setting {
-			display: flex;
-			position: absolute;
-			right: 85rpx;
-		}
-	}
-.user-header::after {
-    	content: "";
-    	position: absolute;
-    	left: 0;
-    	right: 0;
-    	bottom: -80rpx;
-    	height: 80rpx;
-    	background: inherit;
-    	border-bottom-left-radius: 40rpx;
-    	border-bottom-right-radius: 40rpx;
-    	/* 把伪元素放在 header 背景后面 */
-    	z-index: 0;
-}
-	.vip-card {
-		margin: 20rpx;
-		padding: 30rpx;
-		background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
-		border-radius: 20rpx;
-		color: #fff;
-
-		.vip-title {
-			font-size: 30rpx;
-			font-weight: bold;
-			color: #f8e28e;
-		}
-
-		.vip-upgrade-btn {
-			margin-top: 30rpx;
-			background: linear-gradient(to right, #ffb347, #ffcc33);
-			color: #fff;
-			text-align: center;
-			padding: 20rpx 0;
-			border-radius: 40rpx;
-			font-weight: bold;
-		}
+		position: relative;
 	}
 
-	.function-grid {
-		margin: 0 20rpx;
-		padding: 20rpx 0;
+	.user-info {
+		margin-left: 37rpx;
+		flex: 1;
 	}
 
-	.popup-content {
-		padding: 40rpx;
+	.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;
 	}
 
-	.auth-btn {
-		width: 80%;
-		height: 80rpx;
-		border-radius: 40rpx;
-		background: linear-gradient(90deg, #4CAF50, #07c160);
-		color: white;
-		line-height: 80rpx;
-		text-align: center;
+	.service-icon {
+		margin-bottom: 16rpx;
 	}
 
-	.title {
-		font-size: 34rpx;
-		font-weight: bold;
+	.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;
 	}
 
-	.desc {
-		font-size: 26rpx;
-		color: #666;
-		margin-bottom: 40rpx;
+	.tool-icon {
+		margin-bottom: 16rpx;
+	}
+
+	.tool-icon image {
+		width: 47rpx;
+		height: 47rpx;
+	}
+
+	.tool-name {
+		font-size: 24rpx;
+		color: #222222;
 	}
 </style>
\ No newline at end of file