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">{{ userName }}</view> -->
				 <view class="u-font-18 u-m-b-10">吴康桥</view>
				<view class="user-tag">用户类型: 个人</view>
				<view class="user-tag">系统认证：已认证</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="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">
			
			   <UCellItemPlus
			      v-for="(item, index) in cellList"
			      :key="index"
			      :title="item.title"
			      :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() {
			return {
				avatar:uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar,
				show:true,
				gridList:[
				  {name:"我的合同",icon:"../../static/icon/我的合同.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:[
				   {title:"我的租赁资产",icon:"star",function:"goTo",url:"pages/center/myLease"},
				   {title:"我的预约",icon:"star",function:"goTo",url:"pages/reserve/reserveRecords"},
				   {title:"缴费记录",icon:"star",function:"goTo",url:"pages/bill/payHistory"},
				   {title:"水电费明细",icon:"star",function:"goTo",url:"pages/wae/waeRecords"}
				],
			}
		},
		onLoad() {
			uni.$on('updateAvatar', (obj) => {
				// 获取数据
				this.updateAvatar();
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('updateAvatar');
		},
		onShow(){
			// 检查token
			this.checkToken();
		},
		methods: {
			logout() {
				// 登录成功修改token与用户信息
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				this.$u.route('/pages/login/login')
			},
			profile(){
				this.$u.route('/pages/profile/profile')
			},
			toMessage(){
				this.$u.route('/pages/message/message')
			},
			toSetting(){
				this.$u.route('/pages/profile/setting')
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18720989281",
				});
			},
			problem(){
				this.$u.route({
					url: 'pages/login/problem'
				})
			},
			// 关于作者
			aboutMe() {
				this.$u.route('/pages/profile/aboutMe')
			},
			toMyLease(){
				this.$u.route('/pages/center/myLease')
			},
			checkToken(){
				// 判断是否有token
				let lifeData = uni.getStorageSync('lifeData');
				let token = lifeData.vuex_token
				if(!token){
					// 没有token 则跳转到登录
					return uni.reLaunch({
						url:'../login/login'
					})
				}else{
					// 判断Token是否有效
					let url = "/api/profile/isExpiration";
					this.$u.get(url,{
						token:token
					}).then(obj => {
						if(obj.data){
							// 没有token过期则跳转到登录
							return uni.reLaunch({
								url:'../login/login'
							})
						}
					});
				}
			},
			code(){
				this.$mytip.toast('敬请期待')
			},
			clickNav(url){
				if(url){
					this.$u.route(url);
				}else{
					this.$mytip.toast('敬请期待')
				}
			},
			updateAvatar(){
				this.avatar = uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar
			},
		}
	}
</script>

<style lang="scss" scoped>
  .swiper {
        height: 400rpx;
    }
.user-center {
	background-color: #f7f8fa;
	min-height: 100vh;
	padding: 15rpx;
}
.center-nav{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	padding: 30rpx 0;
	border-radius: 8px;
	.tabName{
		color: #606266;
		font-size: 26rpx;
		padding-top: 10rpx;
	}
}
.cell-group {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}
.cell-group > view:not(:last-child) {
  border-bottom: 1rpx solid #f0f0f0;
}
/* 用户信息卡 */
.user-header {
	align-items: center;
	margin-top: 200rpx;
	.user-info {
		
		.user-tag {
			background: #f6f6f6;
			color: #ff8c00;
			padding: 8rpx 12rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			width: fit-content;
		}
	}
	.msg-setting {
	display: flex;
	position: absolute;
    right: 85rpx;
	}
}
.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;
}

</style>