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.
526 lines
11 KiB
526 lines
11 KiB
<template>
|
|
<view class="page">
|
|
<view class="beijin">
|
|
<view class="profile">
|
|
<!-- 未登录状态 -->
|
|
<view v-if="!isLogin" class="login-section">
|
|
<view class="avatar-placeholder">
|
|
<uv-icon name="account" size="80rpx" color="#ccc"></uv-icon>
|
|
</view>
|
|
<view class="login-info">
|
|
<view class="welcome-text">欢迎来到墙友社区</view>
|
|
<view class="login-desc">登录后享受更多功能</view>
|
|
<button class="login-btn" @click="$utils.toLogin">立即登录</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已登录状态 -->
|
|
<view v-else>
|
|
<view class="o">
|
|
<view class="headImage" @click="goToMyProfile">
|
|
<image
|
|
:src="userInfo.headImage"
|
|
mode="aspectFill"></image>
|
|
|
|
<view class="vip_info"
|
|
v-if="userInfo.isPay">
|
|
<view class="title">
|
|
{{ headInfo[vipList[userInfo.isPay - 1]].keyName }}
|
|
</view>
|
|
|
|
<!-- <view class="time">
|
|
2024-6-6到期
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="vip_info">
|
|
<view class="title">
|
|
普通会员
|
|
</view>
|
|
|
|
<view class="time">
|
|
2024-6-6到期
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="setUp"
|
|
@click="$utils.navigateTo('/pages_order/mine/setting')">
|
|
设置
|
|
</view>
|
|
</view>
|
|
|
|
<view class="account">
|
|
<view class="number">
|
|
{{ userInfo.nickName || '墙友1712378974678376' }}
|
|
</view>
|
|
<view class="gender">
|
|
<uv-icon
|
|
:name="sex[userInfo.sex].name"
|
|
size="34rpx"
|
|
:color="sex[userInfo.sex].color"></uv-icon>
|
|
</view>
|
|
|
|
<view class="authentication">
|
|
{{ auth[userInfo.idCardOpen] || '未认证' }}
|
|
</view>
|
|
</view>
|
|
<view class="Days">
|
|
<!-- 你已经成为狐友133天啦~ -->
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="fenst"
|
|
@click="$utils.navigateTo('/pages_order/mine/promotion')">
|
|
<view class="digit">
|
|
<uv-icon
|
|
size="40rpx"
|
|
color="#black"
|
|
name="grid"></uv-icon>
|
|
</view>
|
|
<view class="fans">
|
|
二维码
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shut">
|
|
|
|
|
</view>
|
|
|
|
<view class="fenst"
|
|
@click="$utils.navigateTo('/pages_order/mine/fans')">
|
|
<view class="digit">
|
|
{{ userInfo.intentionNum }}
|
|
</view>
|
|
<view class="fans">
|
|
粉丝
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shut">
|
|
|
|
|
</view>
|
|
|
|
<view class="fenst"
|
|
@click="$utils.navigateTo('/pages_order/mine/runningWater?status=0')">
|
|
<view class="digit">
|
|
{{ userInfo.price }}
|
|
</view>
|
|
<view class="fans">
|
|
余额
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shut">
|
|
|
|
|
</view>
|
|
|
|
<view class="fenst"
|
|
@click="$utils.navigateTo('/pages_order/mine/runningWater?status=1')">
|
|
<view class="digit">
|
|
{{ userInfo.integerPrice }}
|
|
</view>
|
|
<view class="fans">
|
|
积分
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 只有登录后才显示内容标签页 -->
|
|
<view v-if="isLogin" class="Content">
|
|
<uv-tabs :list="tabs" @click="click"
|
|
:activeStyle="{color : '#000', fontWeight : 900}"
|
|
lineColor="#5baaff"
|
|
lineHeight="8rpx"
|
|
lineWidth="50rpx"></uv-tabs>
|
|
</view>
|
|
|
|
<!-- 我的帖子 -->
|
|
<view v-if="isLogin && type == 0">
|
|
<dynamicItemEdit
|
|
:key="index"
|
|
@click="$utils.navigateTo('/pages_order/post/addPost?id=' + item.id)"
|
|
v-for="(item, index) in list"
|
|
:item="item"
|
|
del
|
|
@del="delDynamic(item.id)"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 我的租房 -->
|
|
<view v-if="isLogin && type == 1">
|
|
<rentingItem :key="index" v-for="(item, index) in list" :item="item"
|
|
@click="$utils.navigateTo('/pages_order/renting/addRenting?id=' + item.id)" />
|
|
</view>
|
|
|
|
<!-- 我的招聘 -->
|
|
<view v-if="isLogin && type == 2">
|
|
<workItem :key="index" v-for="(item, index) in list" :item="item"
|
|
@click="$utils.navigateTo('/pages_order/work/addWork?id=' + item.id)" />
|
|
</view>
|
|
|
|
<!-- 我的店铺 -->
|
|
<view v-if="isLogin && type == 3">
|
|
<gourmetItem :key="index" v-for="(item, index) in list" :item="item"
|
|
@click="$utils.navigateTo('/pages_order/gourmet/gourmetDetail?id=' + item.id)" />
|
|
</view>
|
|
|
|
<!-- 我的同城群 -->
|
|
<view v-if="isLogin && type == 4">
|
|
<groupItem :key="index" v-for="(item, index) in list" :item="item" :edit="true"
|
|
@refresh="getData" />
|
|
</view>
|
|
|
|
<!-- 未登录提示 -->
|
|
<view v-if="!isLogin" class="login-prompt">
|
|
<uv-empty
|
|
text="请先登录查看更多内容"
|
|
textSize="30rpx"
|
|
iconSize="200rpx"
|
|
icon="account">
|
|
</uv-empty>
|
|
</view>
|
|
|
|
<view class="no-data"
|
|
v-if="isLogin && !tabs[type].show">
|
|
暂未开放
|
|
</view>
|
|
|
|
<uv-empty
|
|
v-else-if="isLogin && list.length == 0"
|
|
text="空空如也"
|
|
textSize="30rpx"
|
|
iconSize="200rpx"
|
|
icon="list"></uv-empty>
|
|
|
|
<tabber select="3" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import dynamicItemEdit from '@/components/list/dynamic/dynamicItemEdit.vue'
|
|
import gourmetItem from '@/components/list/gourmet/gourmetItem.vue'
|
|
import rentingItem from '@/components/list/renting/rentingItem.vue'
|
|
import workItem from '@/components/list/work/workItem.vue'
|
|
import groupItem from '@/components/list/group/groupItem.vue'
|
|
import mixinsList from '@/mixins/list.js'
|
|
import mixinsSex from '@/mixins/sex.js'
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
mixins: [mixinsList, mixinsSex],
|
|
components: {
|
|
tabber,
|
|
gourmetItem,
|
|
rentingItem,
|
|
workItem,
|
|
groupItem,
|
|
dynamicItemEdit,
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo', 'headInfo']),
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{
|
|
name: '帖子',
|
|
show : true,
|
|
},
|
|
{
|
|
name: '租房',
|
|
show : true,
|
|
},
|
|
{
|
|
name: '招聘',
|
|
show : true,
|
|
},
|
|
{
|
|
name: '店铺',
|
|
show : true,
|
|
},
|
|
{
|
|
name: '同城群',
|
|
show : true,
|
|
},
|
|
],
|
|
vipList : ['vip', 'vipBig'],
|
|
mixinsListApi : '',
|
|
apiList : [
|
|
'getMyPostPage',//查询我的帖子
|
|
'getMyRent',
|
|
'getMyJob',
|
|
'myShop',//查询我的店铺
|
|
'getMyPublishedList',//查询我发布的同城群
|
|
],
|
|
auth : ['审核中', '个人认证', '店铺认证'],
|
|
type : 0,
|
|
isLogin: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.checkLoginStatus()
|
|
},
|
|
methods: {
|
|
// 检查登录状态
|
|
checkLoginStatus() {
|
|
// 检查是否有用户信息或token来判断登录状态
|
|
const token = uni.getStorageSync('token')
|
|
if (token) {
|
|
this.mixinsListApi = this.apiList[this.type]
|
|
this.isLogin = true
|
|
this.$store.commit('getUserInfo')
|
|
this.getData()
|
|
} else {
|
|
this.isLogin = false
|
|
}
|
|
},
|
|
click({index}) {
|
|
if (!this.isLogin) {
|
|
this.showLoginTip()
|
|
return
|
|
}
|
|
this.type = index
|
|
this.mixinsListApi = this.apiList[index]
|
|
this.list = []
|
|
this.getData()
|
|
},
|
|
// 显示登录提示
|
|
showLoginTip() {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
// 删除帖子
|
|
delDynamic(postId){
|
|
let self = this
|
|
uni.showModal({
|
|
title: '确认要删除吗？',
|
|
success(e) {
|
|
if(e.confirm){
|
|
self.$api('deletePost', {
|
|
postId
|
|
}, res => {
|
|
if(res.code == 200){
|
|
self.getData()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 跳转到我的个人主页
|
|
goToMyProfile() {
|
|
if (!this.isLogin) {
|
|
this.showLoginTip()
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages_order/profile/userProfile?userId=${this.userInfo.id}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
.beijin {
|
|
// background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
|
|
background: linear-gradient($uni-color, #fff);
|
|
background-color: black;
|
|
color: black;
|
|
|
|
|
|
.profile {
|
|
padding: 40rpx;
|
|
padding-top: 160rpx;
|
|
|
|
// 未登录状态样式
|
|
.login-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40rpx 0;
|
|
|
|
.avatar-placeholder {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.login-info {
|
|
text-align: center;
|
|
|
|
.welcome-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.login-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.login-btn {
|
|
background: linear-gradient(45deg, #5baaff, #4a90e2);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
padding: 0rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
.followWithnterest {
|
|
.digit {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.close {
|
|
}
|
|
|
|
}
|
|
|
|
.shut{
|
|
margin: 0rpx 20rpx;
|
|
|
|
}
|
|
|
|
.fenst {
|
|
.digit {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.fans {
|
|
}
|
|
}
|
|
}
|
|
|
|
.account {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.number {
|
|
letter-spacing: 2rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.gender {
|
|
|
|
margin: 20rpx 10rpx;
|
|
|
|
}
|
|
|
|
.authentication {
|
|
font-size: 20rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.Days {
|
|
margin-top: 15rpx;
|
|
font-size: 22rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.o {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 60rpx;
|
|
|
|
.headImage {
|
|
position: relative;
|
|
height: 100px;
|
|
width: 100px;
|
|
border-radius: 50%;
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
.vip_info{
|
|
--lg1Color : #ffb700;
|
|
--lg2Color : #ff3300;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: linear-gradient(var(--lg1Color), var(--lg2Color));
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 15rpx 0;
|
|
border-radius: 20rpx;
|
|
margin-top: auto;
|
|
margin-right: auto;
|
|
position: absolute;
|
|
bottom: -30rpx;
|
|
left: 50%;
|
|
width: 160rpx;
|
|
transform: translate(-50%);
|
|
}
|
|
}
|
|
|
|
// .vip_info{
|
|
// // display: flex;
|
|
// // justify-content: center;
|
|
// background-color: #2800ee;
|
|
// color: #fff;
|
|
// font-size: 20rpx;
|
|
// padding: 15rpx 30rpx;
|
|
// line-height: 50rpx;
|
|
// border-radius: 20rpx;
|
|
// margin-right: auto;
|
|
// margin-left: 20rpx;
|
|
// .title{
|
|
// font-size: 26rpx;
|
|
// }
|
|
// .time{
|
|
// // margin-left: 20rpx;
|
|
// }
|
|
// }
|
|
|
|
.setUp {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Content {}
|
|
|
|
.login-prompt {
|
|
padding: 100rpx 0;
|
|
}
|
|
|
|
.no-data{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
padding: 100rpx 0;
|
|
color: #777;
|
|
}
|
|
}
|
|
</style>
|