516 lines
11 KiB
Vue
516 lines
11 KiB
Vue
<template>
|
||
<view class="user-center" :style="{backgroundImage: `url(${staticHost + bgPath1})`}">
|
||
<customNavbar title="个人中心" ref="navbar" :is-transparent="navbarStyle.isTransparent"
|
||
:bg-color="navbarStyle.bgColor" :text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity"
|
||
:extra-icons="navbarStyle.extraIcons" :show-home="false" :show-back="false" />
|
||
<!-- 顶部用户信息 -->
|
||
<view class="user-header">
|
||
<u-avatar :src="avatar" size="133"></u-avatar>
|
||
<view class="user-info">
|
||
<view class="user-name">
|
||
<text class="name-text">{{user.userName || '用户0564'}}</text>
|
||
<text class="auth-tag">{{user.oaAuth ? '已认证' : '未认证'}}</text>
|
||
</view>
|
||
<view class="user-type">用户类型：{{user.userType ==='0' ? '个人' : '组织'}}</view>
|
||
</view>
|
||
<view class="msg-setting">
|
||
<view class="u-relative msg-icon" @click="toMessage()">
|
||
<u-icon name="chat" size="48" color="#333"></u-icon>
|
||
<view v-if="unreadMsgCount > 0" class="badge">
|
||
{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}
|
||
</view>
|
||
</view>
|
||
<u-icon name="setting" size="48" color="#333" @click="toSetting()"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="contract-view" :style="{backgroundImage: `url(${staticHost + bgPath2})`}">
|
||
<!-- 我的合同和我的预约 -->
|
||
<view class="contract-appointment">
|
||
<view class="card" @click="clickNav('/pages-biz/contract/contract')">
|
||
<view class="card-title">我的合同</view>
|
||
<view class="card-main">
|
||
<view class="card-content">
|
||
<view class="card-number">{{unsignContractNum}}</view>
|
||
<view class="card-type">份待签署合同</view>
|
||
</view>
|
||
<view class="card-icon">
|
||
<image :src="staticHost + '/public' + '/static/icon/sign.png'" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" @click="clickNav('/pages-biz/reserve/reserveRecords')">
|
||
<view class="card-title">我的预约</view>
|
||
<view class="card-main">
|
||
<view class="card-content">
|
||
<view class="card-number">{{handlingReserveNum}}</view>
|
||
<view class="card-type">个预约中</view>
|
||
</view>
|
||
<view class="card-icon">
|
||
<image :src="staticHost + '/public' + '/static/icon/sign.png'" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="my-service">
|
||
<view class="service-title">订单信息</view>
|
||
<view class="service-list">
|
||
<view class="service-item" @click="clickNav('/pages-biz/bill/payHistory')">
|
||
<view class="service-icon">
|
||
<image :src="staticHost + '/public' + '/static/icon/bill.png'"></image>
|
||
</view>
|
||
<view class="service-name">账单</view>
|
||
</view>
|
||
<view class="service-item" @click="clickNav('/pages-biz/myrent/myLease')">
|
||
<view class="service-icon">
|
||
<image :src="staticHost + '/public' + '/static/icon/myrent.png'"></image>
|
||
</view>
|
||
<view class="service-name">租赁资产</view>
|
||
</view>
|
||
<view class="service-item" @click="clickNav('/pages-biz/wae/wae')">
|
||
<view class="service-icon badge-wrapper">
|
||
<image :src="staticHost + '/public' + '/static/icon/wae.png'"></image>
|
||
<view v-if="unpaidWaeCount > 0" class="badge">
|
||
{{ unpaidWaeCount > 99 ? '99+' : unpaidWaeCount }}
|
||
</view>
|
||
</view>
|
||
<view class="service-name">水电费待付</view>
|
||
</view>
|
||
<view class="service-item" @click="clickNav('/pages-biz/unpaid/unpaid')">
|
||
<view class="service-icon badge-wrapper">
|
||
<image :src="staticHost + '/public' + '/static/icon/unpaid.png'"></image>
|
||
<view v-if="unpaidRentCount > 0" class="badge">
|
||
{{ unpaidRentCount > 99 ? '99+' : unpaidRentCount }}
|
||
</view>
|
||
</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-assets/fallback/fallback')">
|
||
<view class="tool-icon">
|
||
<image :src="staticHost + '/public' + '/static/icon/fallback.png'" mode="widthFix"></image>
|
||
</view>
|
||
<view class="tool-name">留言板</view>
|
||
</view>
|
||
<!-- 新增计算器 -->
|
||
<view class="tool-item" @click="clickNav('/pages-biz/tool/calculator')">
|
||
<view class="tool-icon">
|
||
<image :src="staticHost + '/public/static/icon/calculator.png'" mode="widthFix"></image>
|
||
</view>
|
||
<view class="tool-name">计算器</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "@/common/config.js";
|
||
|
||
export default {
|
||
data() {
|
||
const life = uni.getStorageSync('lifeData') || {}
|
||
return {
|
||
user:{},
|
||
bgPath1: '/public/static/center/my-bg.png',
|
||
bgPath2: '/public/static/center/my-bg2.png',
|
||
unsignContractNum:0,
|
||
handlingReserveNum:0,
|
||
// 导航栏样式控制
|
||
unreadMsgCount: 0, // 未读消息
|
||
unpaidWaeCount: 0, // 水电费待付
|
||
unpaidRentCount: 0, // 租金待付
|
||
navbarStyle: {
|
||
isTransparent: true,
|
||
bgColor: '#ffffff',
|
||
textColor: '#000000',
|
||
opacity: 0,
|
||
extraIcons: [] // 右侧额外图标
|
||
},
|
||
}
|
||
},
|
||
|
||
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
|
||
},
|
||
staticHost() {
|
||
return this.$config.staticUrl
|
||
}
|
||
|
||
},
|
||
|
||
onLoad() {
|
||
uni.$on('updateAvatar', () => {
|
||
this.updateAvatar();
|
||
})
|
||
|
||
},
|
||
|
||
onUnload() {
|
||
uni.$off('updateAvatar')
|
||
},
|
||
|
||
onShow() {
|
||
this.$checkToken(this.$getToken())
|
||
this.loadUserInfo()
|
||
this.countHandlingReserve()
|
||
this.countUnHandleContract()
|
||
this.countUnpayRentBills()
|
||
this.countUnpayWaeBills()
|
||
this.countUnreadMsg()
|
||
},
|
||
|
||
methods: {
|
||
loadUserInfo(){
|
||
let userInfo = uni.getStorageSync('userInfo');
|
||
if(!userInfo) {
|
||
return
|
||
}
|
||
let url = `/login/userInfo`;
|
||
this.$u.get(url, {}, {
|
||
'WT': this.$getToken(),
|
||
'USERTYPE': userInfo.userType
|
||
}).then(obj => {
|
||
if(obj.flag){
|
||
uni.setStorageSync('userInfo', {
|
||
userType: obj.data.userType,
|
||
oaAuth: obj.data.oaAuth,
|
||
cusNo: obj.data.cusNo,
|
||
userName: obj.data.userName,
|
||
openId: obj.data.openId,
|
||
subscribe: obj.data.subscribeMsg
|
||
})
|
||
}
|
||
});
|
||
this.user = uni.getStorageSync('userInfo');
|
||
},
|
||
logout() {
|
||
this.$u.vuex('vuex_token', '');
|
||
this.$u.vuex('vuex_user', {});
|
||
this.$u.route('/pages/login/login');
|
||
uni.removeStorageSync('userInfo');
|
||
},
|
||
|
||
toMessage() {
|
||
this.$u.route('/pages-biz/message/message')
|
||
},
|
||
|
||
toSetting() {
|
||
this.$u.route('/pages-biz/profile/setting')
|
||
},
|
||
|
||
callPhoneNumber() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: "18720989281"
|
||
});
|
||
},
|
||
clickNav(url) {
|
||
if (url) {
|
||
this.$u.route({
|
||
url
|
||
});
|
||
} else {
|
||
this.$mytip.toast('敬请期待')
|
||
}
|
||
},
|
||
|
||
updateAvatar() {
|
||
// 触发 computed 自动更新
|
||
this.$forceUpdate()
|
||
},
|
||
countUnHandleContract(){
|
||
this.$u.get(`/contract/countUnsign`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
if(res.flag){
|
||
this.unsignContractNum = res.data
|
||
}
|
||
})
|
||
},
|
||
countHandlingReserve(){
|
||
this.$u.get(`/reservate/countHandling`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
if(res.flag){
|
||
this.handlingReserveNum = res.data
|
||
}
|
||
})
|
||
},
|
||
countUnreadMsg(){
|
||
this.$u.get(`/message/countUnread`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
if(res.flag){
|
||
this.unreadMsgCount = res.data
|
||
}
|
||
})
|
||
},
|
||
countUnpayRentBills(){
|
||
this.$u.get(`/bill/countUnpayRentBills`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
if(res.flag){
|
||
this.unpaidRentCount = res.data
|
||
}
|
||
})
|
||
},
|
||
countUnpayWaeBills(){
|
||
this.$u.get(`/bill/countUnpayWaeBills`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
if(res.flag){
|
||
this.unpaidWaeCount = res.data
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-center {
|
||
padding-top: 175rpx;
|
||
background-color: #fff;
|
||
background-repeat: no-repeat;
|
||
background-size: 750rpx 731rpx;
|
||
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: 10rpx;
|
||
}
|
||
|
||
.name-text {
|
||
font-size: 38rpx;
|
||
font-weight: 500;
|
||
color: #2D2B2C;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.auth-tag {
|
||
font-size: 26rpx;
|
||
color: #86868C;
|
||
padding: 4rpx 12rpx;
|
||
}
|
||
|
||
.user-type {
|
||
font-size: 26rpx;
|
||
color: #86868C;
|
||
}
|
||
|
||
.msg-setting {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.contract-view {
|
||
width: 96%;
|
||
margin: 0 auto;
|
||
background-repeat: round;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
/* 合同和预约卡片 */
|
||
.contract-appointment {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.card {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
}
|
||
|
||
.card-main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.card-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.card-number {
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
color: #EC712E;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-type {
|
||
font-size: 26rpx;
|
||
color: #86868C;
|
||
}
|
||
|
||
.card-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: -20rpx;
|
||
}
|
||
|
||
.card-icon image {
|
||
width: 120rpx;
|
||
height: 111rpx;
|
||
}
|
||
|
||
/* 我的服务 */
|
||
.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;
|
||
padding: 30rpx 40rpx;
|
||
}
|
||
|
||
.tools-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.tools-list {
|
||
margin-top: 50rpx;
|
||
margin-left: -20rpx;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
}
|
||
|
||
.tool-item {
|
||
width: 25%;
|
||
margin-bottom: 40rpx;
|
||
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;
|
||
|
||
}
|
||
.badge-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 80rpx; // 对应 image 尺寸
|
||
height: 70rpx; // 对应 image 尺寸
|
||
}
|
||
/* 红点角标 */
|
||
.badge {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -14rpx;
|
||
min-width: 32rpx;
|
||
height: 32rpx;
|
||
padding: 0 8rpx;
|
||
|
||
background-color: #ff3b30;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 消息图标特殊一点 */
|
||
.msg-icon {
|
||
position: relative;
|
||
}
|
||
</style> |