universal-wechat-uniapp-241007/pages/index/center.vue

<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" 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 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,
			dynamicItemEdit,
		},
		computed: {
			...mapState(['userInfo', 'headInfo']),
		},
		data() {
			return {
				tabs: [
					{
						name: '帖子',
						show : true,
					}, 
					{
						name: '租房',
						show : true,
					},
					{
						name: '招聘',
						show : true,
					},
					{
						name: '店铺',
						show : true,
					},
				],
				vipList : ['vip', 'vipBig'],
				mixinsListApi : '',
				apiList : [
					'getMyPostPage',//查询我的帖子
					'getMyRent',
					'getMyJob',
					'myShop',//查询我的店铺
				],
				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>