mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
528 lines
11 KiB
Vue
528 lines
11 KiB
Vue
<template>
|
||
<view class="user-center">
|
||
<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">黄某某</text>
|
||
<text class="auth-tag">未认证</text>
|
||
</view>
|
||
<view class="user-type">用户类型：组织</view>
|
||
</view>
|
||
<view class="msg-setting">
|
||
<view class="u-relative" @click="toMessage()">
|
||
<u-icon name="chat" size="48" color="#333"></u-icon>
|
||
</view>
|
||
<u-icon name="setting" size="48" color="#333" @click="toSetting()"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="contract-view">
|
||
<!-- 我的合同和我的预约 -->
|
||
<view class="contract-appointment">
|
||
<view class="card" @click="clickNav('pages/center/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>
|
||
<view class="card-icon">
|
||
<image src="/static/icon/sign.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" @click="clickNav('pages/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>
|
||
<view class="card-icon">
|
||
<image src="/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/bill/bill')">
|
||
<view class="service-icon">
|
||
<image src="/static/icon/账单.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="service-name">账单</view>
|
||
</view>
|
||
<view class="service-item" @click="clickNav('pages/center/myLease')">
|
||
<view class="service-icon">
|
||
<image src="/static/icon/租赁资产.png" mode="widthFix"></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" mode="widthFix"></image>
|
||
</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" mode="widthFix"></image>
|
||
</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/message/guestbook')">
|
||
<view class="tool-icon">
|
||
<image src="/static/icon/留言纸.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="tool-name">留言板</view>
|
||
</view>
|
||
<view class="tool-item" @click="clickNav('pages/bill/payHistory')">
|
||
<view class="tool-icon">
|
||
<image src="/static/icon/账本.png" mode="widthFix"></image>
|
||
</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"
|
||
}
|
||
],
|
||
// 导航栏样式控制
|
||
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
|
||
}
|
||
},
|
||
|
||
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>
|
||
.user-center {
|
||
padding-top: 120rpx;
|
||
background-image: url(https://eyidu.ydszw.cn/static/img/test/my-bg.png);
|
||
background-color: #fff;
|
||
background-repeat: space;
|
||
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-image: url("https://eyidu.ydszw.cn/static/img/test/my-bg2.png");//只支持网络图片，请自行上传至图片服务器
|
||
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;
|
||
}
|
||
</style> |