2025-11-14 11:39:33 +08:00
|
|
|
|
<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>
|
2025-11-17 17:30:29 +08:00
|
|
|
|
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,
|
|
|
|
|
|
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",url:"pages/center/myLease"},
|
|
|
|
|
|
{title:"我的预约",icon:"star",url:"pages/reserve/reserveRecords"},
|
|
|
|
|
|
{title:"缴费记录",icon:"star",url:"pages/bill/payHistory"},
|
|
|
|
|
|
{title:"水电费明细",icon:"star",url:"pages/wae/waeRecords"}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
avatar() {
|
|
|
|
|
|
const life = uni.getStorageSync('lifeData') || {}
|
|
|
|
|
|
const user = (life.vuex_user && life.vuex_user.user) || {}
|
|
|
|
|
|
const raw = user.avatar || ""
|
|
|
|
|
|
|
|
|
|
|
|
if (!raw) return "/static/images/default-avatar.png"
|
|
|
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
|
|
console.log("登录态不存在")
|
|
|
|
|
|
return uni.reLaunch({ url:'../login/login' })
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let url = "/api/profile/isExpiration";
|
|
|
|
|
|
this.$u.get(url,{ token }).then(obj => {
|
|
|
|
|
|
if(obj.data){
|
|
|
|
|
|
return uni.reLaunch({ url:'../login/login' })
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
clickNav(url){
|
|
|
|
|
|
if(url){
|
|
|
|
|
|
this.$u.route(url);
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.$mytip.toast('敬请期待')
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
updateAvatar() {
|
|
|
|
|
|
// 触发 computed 自动更新
|
|
|
|
|
|
this.$forceUpdate()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-11-14 11:39:33 +08:00
|
|
|
|
</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>
|
