mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
556 lines
16 KiB
Vue
556 lines
16 KiB
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">{{vuex_user.nickName}}</view>
|
||
<view class="user-tag">用户类型: {{userType === '0' ? '个人' : '组织'}}</view>
|
||
<view class="user-tag">系统认证：{{oaAuth === '1' ? '已认证' : '未认证'}}</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="user-content">
|
||
<!-- 功能网格 -->
|
||
<!-- <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">
|
||
<!-- 功能网格 -->
|
||
|
||
<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 cellList"
|
||
:index="index"
|
||
:key="index"
|
||
v-if="index < 9"
|
||
@click="clickNav(item.url)"
|
||
>
|
||
<!-- <u-icon
|
||
:customStyle="{paddingTop:20+'rpx'}"
|
||
:name="item.icon"
|
||
size="46" color="#333"
|
||
></u-icon> -->
|
||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||
<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 cellList"
|
||
:index="index + 9"
|
||
v-if="index >= 9 && index < 18 "
|
||
:key="index"
|
||
@click="clickNav(item.url)"
|
||
>
|
||
<!-- <u-icon
|
||
:customStyle="{paddingTop:20+'rpx'}"
|
||
:name="item.icon"
|
||
size="46" color="#333"
|
||
></u-icon> -->
|
||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||
<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 cellList"
|
||
:index="index + 18"
|
||
:key="index"
|
||
@click="clickNav(item.url)"
|
||
>
|
||
<!-- <u-icon
|
||
:customStyle="{paddingTop:20+'rpx'}"
|
||
:name="item.icon"
|
||
size="46" color="#333"
|
||
></u-icon> -->
|
||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 弹窗 -->
|
||
<!-- <u-popup v-model="showGetProfile" mode="center" border-radius="20">
|
||
<view class="popup-content">
|
||
<view class="title">获取头像</view>
|
||
<view class="desc">获取微信头像与昵称用于展示</view>
|
||
|
||
<button class="auth-btn" @click="getWxProfile">
|
||
授权获取头像
|
||
</button>
|
||
</view>
|
||
</u-popup> -->
|
||
|
||
<!-- <UCellItemPlus v-for="(item, index) in cellList" :key="index" :title="item.name" :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() {
|
||
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"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
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>
|
||
.swiper {
|
||
height: 700rpx;
|
||
}
|
||
|
||
.user-center {
|
||
background-color: #f7f8fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.user-content{
|
||
padding: 0 20rpx 20rpx 20rpx;
|
||
position: relative; /* 相对定位不会脱流，仅创建一个 z-index 环境 */
|
||
z-index: 1;
|
||
margin: 0 20rpx;
|
||
margin-top: 12rpx; /* 视觉上插入到延伸背景中，调节数值以适配 */
|
||
|
||
}
|
||
.center-nav {
|
||
background-color: #FFFFFF;
|
||
padding: 30rpx 0;
|
||
border-radius: 8px;
|
||
|
||
.tabName {
|
||
color: black;
|
||
font-size: 26rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.cell-group {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cell-group>view:not(:last-child) {
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
/* 用户信息卡 */
|
||
.user-header {
|
||
align-items: center;
|
||
position: relative;
|
||
padding-top: 200rpx !important;
|
||
padding-bottom: 80rpx !important;
|
||
background: linear-gradient(to right, #89CFF0, #5AA4D1);
|
||
overflow: visible; /* 必须，否则延伸区域会被裁掉 */
|
||
.user-info {
|
||
|
||
.user-tag {
|
||
color: black;
|
||
padding: 8rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
width: fit-content;
|
||
}
|
||
}
|
||
|
||
.msg-setting {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 85rpx;
|
||
}
|
||
}
|
||
.user-header::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: -80rpx;
|
||
height: 80rpx;
|
||
background: inherit;
|
||
border-bottom-left-radius: 40rpx;
|
||
border-bottom-right-radius: 40rpx;
|
||
/* 把伪元素放在 header 背景后面 */
|
||
z-index: 0;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
.popup-content {
|
||
padding: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.auth-btn {
|
||
width: 80%;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background: linear-gradient(90deg, #4CAF50, #07c160);
|
||
color: white;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
</style> |