universal-wechat-uniapp-241007/pages_order/post/postDetail.vue

<template>
	<view class="postDetail">
		<navbar leftClick @leftClick="$utils.navigateBack" title="详情" />

		<view class="works">
			
			<userHeadItem :item="detail"/>
			
			<daynamicInfo :item="detail"/>
			
			<dynamicToShop
			:shop="detail.shop"
			/>
			
			<statisticalDataInfo :item="detail"/>
			
		</view>


		<view style="background-color: #fff;margin-top: 20rpx;">
			<uv-tabs :list="tags"
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#5baaff"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="tabsClick"></uv-tabs>
		</view>
		
		<view class="" v-if="tagIndex == 1">
			<!-- 头像堆叠组件 - 显示查看过的用户 -->
			<avatarStack 
				:avatars="viewedUsers || []"
				:maxDisplay="5"
				:avatarSize="50"
				:overlapOffset="12"
				descriptionType="viewed"
				@avatarClick="handleAvatarClick"
				@moreClick="handleMoreViewers"
				v-if="viewedUsers && viewedUsers.length > 0"
			/>
		</view>
		
		<commentList v-if="tagIndex == 0" @getData="getData" :list="list" :params="params" />
		
		
		<!-- <commentList 
		@getData="getData"
		:list="list"
		:params="params"
		/> -->
		
	</view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	import mixinsList from '@/mixins/list.js'
	import commentList from '../components/list/comment/commentList.vue'
	import userHeadItem from '@/components/list/dynamic/userHeadItem.vue'
	import daynamicInfo from '@/components/list/dynamic/daynamicInfo.vue'
	import statisticalDataInfo from '@/components/list/statisticalDataInfo.vue'
	import dynamicToShop from '@/components/list/dynamic/dynamicToShop.vue'
	import avatarStack from '@/components/list/avatarStack.vue'
	export default {
		mixins: [mixinsSex, mixinsList],
		components: {
			commentList,
			userHeadItem,
			daynamicInfo,
			statisticalDataInfo,
			dynamicToShop,
			avatarStack,
		},
		data() {
			return {
				detail: {
					
				},
				// 测试数据 - 查看过帖子的用户头像
				viewedUsers: [
					{
						id: '1',
						userHead: '/static/image/logo.jpg',
						name: '用户A'
					},
					{
						id: '2', 
						userHead: 'https://image.hhlm1688.com/2025-06-08/67fbe844-da4a-4272-8d51-364453d0f3aa.jpeg',
						name: '用户B'
					},
					{
						id: '3',
						userHead: '/static/image/logo.jpg', 
						name: '用户C'
					},
					{
						id: '4',
						userHead: 'https://image.hhlm1688.com/2025-06-08/67fbe844-da4a-4272-8d51-364453d0f3aa.jpeg',
						name: '用户D'
					},
					{
						id: '5',
						userHead: '/static/image/logo.jpg',
						name: '用户E'
					},
					{
						id: '6',
						userHead: 'https://image.hhlm1688.com/2025-06-08/67fbe844-da4a-4272-8d51-364453d0f3aa.jpeg',
						name: '用户F'
					},
					{
						id: '7',
						userHead: '/static/image/logo.jpg',
						name: '用户G'
					}
				],
				mixinsListApi : 'getCommentPage',
				params : {
					type : '0',
					orderId : '',
					name : '',
				},
				tags : [
					{
						name : '评论'
					},
					{
						name : '浏览'
					},
					{
						name : '点赞'
					},
					{
						name : '分享'
					},
				],
				tagIndex : 0,
				id : 0,
			}
		},
		
		onLoad(options) {
			// this.$route.query的参数
			console.log(options)
			this.id = options.id
			this.queryParams.type = this.params.type
			this.queryParams.orderId = options.id
			
			this.params.orderId = options.id
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.title,
				path: '/pages_order/post/postDetail?id=' + this.id
			}
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		onShareAppMessage(res) {
			// return {
			//   title: this.item.title,
			//   desc: this.item.content && this.item.content.slice(0, 30),
			//   path: '/pages/publish/postDetail?id=' + this.id
			// }
		},
		methods: {
			tabsClick({index}){
				this.tagIndex = index
			},
			getDetail() {
				this.$api('getPostDetail', {
					id: this.id
				}, res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						
						this.params.name = res.result.userName

						this.detail = res.result
					}
				})
			},
			
			// 处理头像点击事件
			handleAvatarClick(avatar, index) {
				console.log('点击头像:', avatar, index);
				// 可以跳转到用户详情页面
				this.$u.route({
					url: '/pages_order/user/userDetail',
					params: {
						userId: avatar.id
					}
				});
			},
			
			// 处理查看更多用户事件
			handleMoreViewers() {
				console.log('查看更多查看者');
				// 可以跳转到查看者列表页面
				this.$u.route({
					url: '/pages_order/post/viewersList',
					params: {
						postId: this.detail.id
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.postDetail {
		padding-bottom: env(safe-area-inset-bottom);
		.works {
			background-color: #fff;
			padding: 40rpx;
			border-radius: 20rpx;

			.bottom {
				display: flex;
				margin-top: 20rpx;
				font-size: 24rpx;

				.browse {
					margin: 0rpx 30rpx;
					color: rgb(132, 132, 132);
				}

				.Leavingamessage {
					margin-left: auto;
					display: flex;
					align-items: center;
				}
				
				.phone{
					background-color: rgba($uni-color, 0.2);
					color: $uni-color;
					padding: 8rpx 16rpx;
					border-radius: 10rpx;
					margin-left: auto;
					image{
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}
		
	}
</style>