RentWeAppFront/pages/center/center.vue

<template>
	<view class="user-center">
		<!-- 顶部用户信息 -->
		<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>
			<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>
				<u-icon name="setting" size="50" 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>
			<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>
				</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>
	
			<!-- 弹窗 -->
		<!-- 	<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>
			</u-popup> -->

			<!-- <UCellItemPlus v-for="(item, index) in cellList" :key="index" :title="item.name" :icon="item.icon" arrow
				@click="clickNav(item.url)" /> -->
		</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"
					}
				]
			}
		},

		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>
	.swiper {
		height: 700rpx;
	}

	.user-center {
		background-color: #f7f8fa;
		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 {
		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;
		}
	}

	.function-grid {
		margin: 0 20rpx;
		padding: 20rpx 0;
	}

	.popup-content {
		padding: 40rpx;
		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;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 40rpx;
	}
</style>