mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-08 01:42:28 +08:00
完成大体功能和样式
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="user-center">
|
||||
<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" />
|
||||
@@ -8,174 +8,127 @@
|
||||
<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>
|
||||
<text class="name-text">{{user.userName || '用户0564'}}</text>
|
||||
<text class="auth-tag">{{user.oaAuth ? '已认证' : '未认证'}}</text>
|
||||
</view>
|
||||
<view class="user-type">用户类型：组织</view>
|
||||
<view class="user-type">用户类型：{{user.userType ==='0' ? '个人' : '组织'}}</view>
|
||||
</view>
|
||||
<view class="msg-setting">
|
||||
<view class="u-relative" @click="toMessage()">
|
||||
<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">
|
||||
<view class="contract-view" :style="{backgroundImage: `url(${staticHost + bgPath2})`}">
|
||||
<!-- 我的合同和我的预约 -->
|
||||
<view class="contract-appointment">
|
||||
<view class="card" @click="clickNav('pages/center/contract')">
|
||||
<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">5</view>
|
||||
<view class="card-type">份合同</view>
|
||||
<view class="card-number">{{unsignContractNum}}</view>
|
||||
<view class="card-type">份待签署合同</view>
|
||||
</view>
|
||||
<view class="card-icon">
|
||||
<image src="/static/icon/sign.png" mode="widthFix"></image>
|
||||
<image :src="staticHost + '/public' + '/static/icon/sign.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" @click="clickNav('pages/reserve/reserveRecords')">
|
||||
<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">3</view>
|
||||
<view class="card-type">个预约</view>
|
||||
<view class="card-number">{{handlingReserveNum}}</view>
|
||||
<view class="card-type">个预约中</view>
|
||||
</view>
|
||||
<view class="card-icon">
|
||||
<image src="/static/icon/sign.png" mode="widthFix"></image>
|
||||
<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-title">订单信息</view>
|
||||
<view class="service-list">
|
||||
<view class="service-item" @click="clickNav('pages/bill/bill')">
|
||||
<view class="service-item" @click="clickNav('/pages-biz/bill/payHistory')">
|
||||
<view class="service-icon">
|
||||
<image src="/static/icon/账单.png"></image>
|
||||
<image :src="staticHost + '/public' + '/static/icon/bill.png'"></image>
|
||||
</view>
|
||||
<view class="service-name">账单</view>
|
||||
</view>
|
||||
<view class="service-item" @click="clickNav('pages/center/myLease')">
|
||||
<view class="service-item" @click="clickNav('/pages-biz/myrent/myLease')">
|
||||
<view class="service-icon">
|
||||
<image src="/static/icon/租赁资产.png"></image>
|
||||
<image :src="staticHost + '/public' + '/static/icon/myrent.png'"></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"></image>
|
||||
<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 class="service-name">水电费待付</view>
|
||||
</view>
|
||||
<view class="service-item" @click="clickNav('pages/unpaid/unpaid')">
|
||||
<view class="service-icon">
|
||||
<image src="/static/icon/待付款.png"></image>
|
||||
<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 class="service-name">租金待付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常用工具 -->
|
||||
<!-- 辅助工具 -->
|
||||
<view class="common-tools">
|
||||
<view class="tools-title">常用工具</view>
|
||||
<view class="tools-title">辅助工具</view>
|
||||
<view class="tools-list">
|
||||
<view class="tool-item" @click="clickNav('pages/message/guestbook')">
|
||||
<view class="tool-item" @click="clickNav('/pages-assets/fallback/fallback')">
|
||||
<view class="tool-icon">
|
||||
<image src="/static/icon/留言纸.png" mode="widthFix"></image>
|
||||
<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/bill/payHistory')">
|
||||
<!-- 新增计算器 -->
|
||||
<view class="tool-item" @click="clickNav('/pages-biz/tool/calculator')">
|
||||
<view class="tool-icon">
|
||||
<image src="/static/icon/账本.png" mode="widthFix"></image>
|
||||
<image :src="staticHost + '/public/static/icon/calculator.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tool-name">计算器</view>
|
||||
</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>
|
||||
|
||||
<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"
|
||||
}
|
||||
],
|
||||
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',
|
||||
@@ -197,13 +150,18 @@
|
||||
return raw.includes(config.staticUrl) ?
|
||||
raw :
|
||||
config.staticUrl + raw
|
||||
},
|
||||
staticHost() {
|
||||
return this.$config.staticUrl
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
uni.$on('updateAvatar', () => {
|
||||
this.updateAvatar();
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
@@ -211,23 +169,31 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// this.checkToken();
|
||||
|
||||
this.$checkToken(this.$getToken())
|
||||
this.loadUserInfo()
|
||||
this.countHandlingReserve()
|
||||
this.countUnHandleContract()
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadUserInfo(){
|
||||
this.user = uni.getStorageSync('userInfo');
|
||||
},
|
||||
logout() {
|
||||
this.$u.vuex('vuex_token', '');
|
||||
this.$u.vuex('vuex_user', {});
|
||||
this.$u.route('/pages/login/login')
|
||||
this.$u.route('/pages/login/login');
|
||||
uni.removeStorageSync('userInfo');
|
||||
},
|
||||
|
||||
toMessage() {
|
||||
this.$u.route('/pages/message/message')
|
||||
this.$u.route('/pages-biz/message/message')
|
||||
},
|
||||
|
||||
toSetting() {
|
||||
this.$u.route('/pages/profile/setting')
|
||||
this.$u.route('/pages-biz/profile/setting')
|
||||
},
|
||||
|
||||
callPhoneNumber() {
|
||||
@@ -235,39 +201,11 @@
|
||||
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);
|
||||
this.$u.route({
|
||||
url
|
||||
});
|
||||
} else {
|
||||
this.$mytip.toast('敬请期待')
|
||||
}
|
||||
@@ -277,48 +215,50 @@
|
||||
// 触发 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"
|
||||
});
|
||||
countUnHandleContract(){
|
||||
this.$u.get(`/contract/countUnsign`, {},{
|
||||
WT: this.$getToken()
|
||||
}).then(res => {
|
||||
if(res.flag){
|
||||
this.unsignContractNum = res.data
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
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;
|
||||
});
|
||||
countHandlingReserve(){
|
||||
this.$u.get(`/reservate/countHandling`, {},{
|
||||
WT: this.$getToken()
|
||||
}).then(res => {
|
||||
if(res.flag){
|
||||
this.handlingReserveNum = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
countUnreadMsg(){
|
||||
this.$u.get(`/messsage/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
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -326,8 +266,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-center {
|
||||
padding-top: 120rpx;
|
||||
background-image: url("https://eyidu.ydszw.cn/static/img/test/my-bg.png");//只支持网络图片，请自行上传至图片服务器并替换
|
||||
padding-top: 175rpx;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 750rpx 731rpx;
|
||||
@@ -379,7 +318,6 @@
|
||||
.contract-view {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
background-image: url("https://eyidu.ydszw.cn/static/img/test/my-bg2.png"); //只支持网络图片，请自行上传至图片服务器并替换
|
||||
background-repeat: round;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
@@ -520,5 +458,38 @@
|
||||
.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>
|
||||
Reference in New Issue
Block a user