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

<template>
	<view class="page">
		<view class="beijin">
			<view class="profile">
				<view class="o">
					<view class="headImage">
						<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 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="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 class="no-data">
			暂未开放
		</view>

		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import dynamicItemEdit from '@/components/list/dynamic/dynamicItemEdit.vue'
	import mixinsList from '@/mixins/list.js'
	import mixinsSex from '@/mixins/sex.js'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList, mixinsSex],
		components: {
			tabber,
			dynamicItemEdit,
		},
		computed: {
			...mapState(['userInfo', 'headInfo']),
		},
		data() {
			return {
				tabs: [
					{
						name: '帖子',
					}, 
					{
						name: '租房',
					},
					{
						name: '招聘',
					},
					{
						name: '店铺',
					},
				],
				vipList : ['vip', 'vipBig'],
				mixinsListApi : 'getMyPostPage',
				auth : ['审核中', '个人认证', '店铺认证'],
				type : 0,
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
		},
		methods: {
			click({index}) {
				this.type = index
			},
			delDynamic(postId){
				let self = this
				uni.showModal({
					title: '确认要删除吗？',
					success(e) {
						if(e.confirm){
							self.$api('deletePost', {
								postId
							}, res => {
								if(res.code == 200){
									self.getData()
								}
							})
						}
					}
				})
			},
		}
	}
	
</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;

				.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 {}
		
		.no-data{
			display: flex;
			justify-content: center;
			align-content: center;
			padding: 100rpx 0;
			color: #777;
		}
	}
</style>