You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
401 lines
9.1 KiB
401 lines
9.1 KiB
<template>
|
|
<view class="user-page">
|
|
<!-- 顶部背景和用户卡片 -->
|
|
<view class="header-bg">
|
|
<view class="user-header">
|
|
<u-avatar class="avatar" mode="aspectFill" :src="userData ? userData.avatar : null"/>
|
|
<view class="user-info">
|
|
<view class="nickname">{{ userData ? userData.nickname : '请登录' }}</view>
|
|
<view class="auth-row" v-if="userData">
|
|
<button class="auth-btn" v-if="userData.wechatUser.isAudit === 3" size="mini"
|
|
@click="navTo('/pages/user/auth')">
|
|
去认证
|
|
</button>
|
|
<button class="auth-btn" v-if="userData.wechatUser.isAudit === 0" size="mini">认证审核中</button>
|
|
<button class="auth-btn" v-if="userData.wechatUser.isAudit === 1" size="mini">认证通过</button>
|
|
<button class="auth-btn" v-if="userData.wechatUser.isAudit === 2" size="mini"
|
|
@click="navTo('/pages/user/auth')">
|
|
认证拒绝
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="header-icons">
|
|
<view class="icon-btn">
|
|
<text class="iconfont"></text>
|
|
</view>
|
|
<view class="icon-btn">
|
|
<text class="iconfont"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分卡片 -->
|
|
<!-- <view class="score-card">-->
|
|
<!-- <view class="score-left">-->
|
|
<!-- <image class="score-icon" src="https://img.icons8.com/color/48/000000/hexagonal-structure.png"/>-->
|
|
<!-- <text class="score-title">我的积分</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="score-value">---->
|
|
<!-- <text class="score-unit">分</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- 快捷入口 -->
|
|
<view class="quick-entry">
|
|
<view class="entry-item" @click="navTo('/pages/user/my-properties')">
|
|
<image class="entry-img" src="/static/房产.png"/>
|
|
<text class="entry-title">我的房产</text>
|
|
</view>
|
|
<view class="entry-item">
|
|
<image class="entry-img" src="/static/车位信息.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
|
|
<text class="entry-title">我的车位车辆</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能区 -->
|
|
<view class="func-area">
|
|
<view class="func-item" @click="navTo('/pages/user/my-properties')">
|
|
<image class="entry-img" src="/static/我的家人.png"/>
|
|
<text class="func-text">添加家人</text>
|
|
</view>
|
|
<view class="func-item">
|
|
<image class="entry-img" src="/static/汽车.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
|
|
<text class="func-text">添加车辆</text>
|
|
</view>
|
|
<view class="func-item">
|
|
<image class="entry-img" src="/static/访客.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
|
|
<text class="func-text">访客记录</text>
|
|
</view>
|
|
<view class="func-item" @click="jumpWithAuth('/pages/user/property-bill')">
|
|
<image class="entry-img" src="/static/20-缴费记录.png"/>
|
|
<text class="func-text">我的账单</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 列表区 -->
|
|
<!-- <view class="list-area">-->
|
|
<!-- <view class="list-item">-->
|
|
<!-- <u-icon name="/static/工单.png"/>-->
|
|
<!-- <text class="list-title">我的工单</text>-->
|
|
<!-- <text class="arrow">›</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="list-item">-->
|
|
<!-- <u-icon name="/static/发布.png"/>-->
|
|
<!-- <text class="list-title">我的发布</text>-->
|
|
<!-- <text class="arrow">›</text>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="list-item">-->
|
|
<!-- <u-icon name="/static/收藏.png"/>-->
|
|
<!-- <text class="list-title">我的收藏</text>-->
|
|
<!-- <text class="arrow">›</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<view class="m-20">
|
|
<u-button type="primary" shape="circle" @click="logout" v-if="isLogin">退出登录</u-button>
|
|
</view>
|
|
<Login ref="Login" @done="getUserData"></Login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Login from "@/components/Login.vue";
|
|
import {clearUserInfo, getUserInfo} from "@/util/user";
|
|
import {userInfoReq} from "@/api/user";
|
|
|
|
export default {
|
|
components: {Login},
|
|
data() {
|
|
return {
|
|
isLogin: false,
|
|
userInfo: {
|
|
avatar: '',
|
|
mobile: ''
|
|
},
|
|
roleName: '注册用户',
|
|
defaultAvatar: 'https://oss.wsdns.cn/20250627/340ae6bd9c014e75bb1da95e074a027e.png',
|
|
userData: null
|
|
}
|
|
},
|
|
methods: {
|
|
navTo(url) {
|
|
uni.navigateTo({url})
|
|
},
|
|
async getUserData() {
|
|
const res = await userInfoReq()
|
|
if (res) {
|
|
this.userData = res.data
|
|
this.isLogin = true
|
|
}
|
|
},
|
|
logout() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.isLogin = false
|
|
this.userData = null
|
|
clearUserInfo()
|
|
this.$refs.Login.open()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
jumpWithAuth(url) {
|
|
if (!this.userData || this.userData.wechatUser.isAuth !== 1) {
|
|
this.$toast('请先完成认证')
|
|
this.$jump('/pages/user/auth')
|
|
} else {
|
|
this.$jump(url)
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
if (!getUserInfo().token) this.$refs.Login.open()
|
|
else {
|
|
this.getUserData()
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background: linear-gradient(to bottom, #e9fff2, #f9fafb);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header-bg {
|
|
background: linear-gradient(120deg, #b6e5a6 0%, #e9fff2 100%);
|
|
border-bottom-left-radius: 40rpx;
|
|
border-bottom-right-radius: 40rpx;
|
|
padding-bottom: 40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.user-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 180rpx 40rpx 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.avatar {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
border: 4rpx solid #e6e6e6;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nickname {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.auth-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.auth-status {
|
|
font-size: 22rpx;
|
|
color: #4facfe;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 2rpx 18rpx;
|
|
margin-right: 12rpx;
|
|
border: 1rpx solid #4facfe;
|
|
}
|
|
|
|
.auth-btn {
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
background: #19b6ff;
|
|
border-radius: 10rpx;
|
|
padding: 2rpx 18rpx;
|
|
border: none;
|
|
line-height: 1.8;
|
|
margin: 0 15rpx;
|
|
}
|
|
|
|
.header-icons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 50rpx;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 32rpx;
|
|
color: #7ecb6f;
|
|
}
|
|
|
|
.score-card {
|
|
margin: -40rpx 24rpx 0 24rpx;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 36rpx;
|
|
height: 100rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.score-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.score-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.score-title {
|
|
font-size: 30rpx;
|
|
color: #222;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.score-value {
|
|
font-size: 36rpx;
|
|
color: #ff6f00;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.score-unit {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-left: 2rpx;
|
|
}
|
|
|
|
.quick-entry {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 32rpx 24rpx 0 24rpx;
|
|
}
|
|
|
|
.entry-item {
|
|
flex: 1;
|
|
background: #f8fafc;
|
|
border-radius: 20rpx;
|
|
margin-right: 18rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 32rpx 0 24rpx 0;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.entry-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.entry-title {
|
|
font-size: 26rpx;
|
|
color: #6a7a8c;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.func-area {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 32rpx 24rpx 0 24rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
padding: 32rpx 0;
|
|
}
|
|
|
|
.func-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.func-icon {
|
|
font-size: 44rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.func-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.list-area {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 32rpx 24rpx 0 24rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 32rpx 0 32rpx 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
position: relative;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.list-icon {
|
|
font-size: 32rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.list-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.arrow {
|
|
font-size: 36rpx;
|
|
color: #c0c0c0;
|
|
margin-right: 32rpx;
|
|
}
|
|
|
|
</style>
|