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

<template>
	<view class="page">
		<view class="beijin">

			<view class=" profile">
				<view class="o">
					<view class="headImage">
						<!-- <img src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
							alt="" /> -->
						<image
						:src="userInfo.headImage"
						mode="aspectFill"></image>
					</view>

					<view class="setUp"
					@click="$utils.navigateTo('/pages_order/auth/wxUserInfo?back=1')">
						设置
					</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="followWithnterest">
						<view class="digit">
							0
						</view>
						<view class="close">
							关注
						</view>
					</view>
					<view class="shut">
						|
					</view>
					<view class="fenst"
					@click="$utils.navigateTo('/pages_order/mine/fans')">
						<view class="digit">
							0
						</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 class="">
			<dynamicItem
			: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>

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

<script>
	import tabber from '@/components/base/tabbar.vue'
	import dynamicItem from '@/components/list/dynamic/dynamicItem.vue'
	import mixinsList from '@/mixins/list.js'
	import mixinsSex from '@/mixins/sex.js'
	import { mapState } from 'vuex'
	export default {
		mixins: [mixinsList, mixinsSex],
		components: {
			tabber,
			dynamicItem,
		},
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				tabs: [
					{
						name: '我发布的帖子',
					}, 
					{
						name: '评论',
					},
				],
				mixinsListApi : 'getMyPostPage',
				auth : ['审核中', '个人认证', '店铺认证'],
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			getDataThen(list){
				list.forEach(n => {
					n.image = n.image ? n.image.split(',') : []
				})
			},
			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-color: black;
			color: white;

			.profile {
				padding: 40rpx;
				padding-top: 160rpx;

				.box {
					padding: 5rpx 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;

					.headImage {
						image {
							height: 100px;
							width: 100px;
							border-radius: 50%;
						}
					}

					.setUp {
					}
				}
			}
		}

		.Content {}
	}
</style>