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

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

		<view class="works" @click="$emit('click')">
			<view class="box" :style="{'--sexcolor' : sex[detail.sex].color}">
				<view class="headPortraitimg">
					<image :src="detail.userImage" mode="aspectFill"></image>
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide">
						<view class="username text-ellipsis">
							{{ detail.userName }}
						</view>
						<view class="inde" v-if="detail.sex">
							<!-- 性别 -->
							{{ detail.sex }}
						</view>
						<view class="inde" v-if="detail.yearDate">
							<!-- 年份 -->
							{{ detail.yearDate }}
						</view>
						<view class="inde" v-if="detail.address">
							<!-- 地址 -->
							{{ detail.address }}
						</view>
						<view class="authentication" v-if="detail.isContent">
							<!-- 个人认证 -->
							{{ detail.isContent }}
						</view>
					</view>

					<view class="Times">
						<view class="TimeMonth">
							<!-- 10-08 -->
							{{ detail.createTime }}发布
						</view>
						<!-- <view class="Month">
							12:34
						</view> -->
					</view>
				</view>
			</view>
			<view class="dynamics" v-html="$utils.stringFormatHtml(detail.title)">
			</view>
			<view class="Artworkimages">
				<view class="wrokimg" @click.stop="previewImage(detail.image, i)" :key="i"
					v-for="(img, i) in detail.image">
					<image :src="img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottom">
				<view class="browse">
					{{ detail.isBrowse }}浏览
				</view>
				<view class="browse">
					{{ detail.isComment }}条评论
				</view>
				<view class="Leavingamessage">
					<uv-icon size="40rpx" name="chat"></uv-icon>
				</view>
				<view class="Leavingamessage" v-if="del" @click.stop="$emit('del')">
					<uv-icon size="40rpx" name="trash"></uv-icon>
				</view>
			</view>
		</view>

		<view class="comment-list">
			<view class="comment"
			v-for="(item, index) in list">
				<view class="box">
					<view class="headPortraitimg">
						<image :src="item.userHead" mode="aspectFill"></image>
					</view>
					<view class="YaoduUniversalWall">
						<view class="heide">
							<view class="username text-ellipsis">
								{{ item.userName }}
							</view>
						</view>

						<view class="Times">
							<view class="TimeMonth">
								{{ item.createTime }}发布
							</view>
						</view>
					</view>
				</view>
				<view class="dynamics" v-html="$utils.stringFormatHtml(item.userValue)">
				</view>
			</view>
		</view>


		<view class="submit-box">
			<view class="top">
				<uv-icon
				color="#00cf05"
				size="50rpx"
				name="weixin-fill"></uv-icon>
				
				<input type="text"
				:placeholder="'评论给' + detail.userName"
				v-model="form.userValue"/>
				
				<view class="submit"
				@click="submit">
					发布
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins: [mixinsSex, mixinsList],
		components: {},
		data() {
			return {
				detail: {},
				form : {},
				mixinsListApi : 'getCommentPage',
			}
		},
		onLoad(options) {
			// this.$route.query的参数
			console.log(options)
			this.id = options.id
			this.queryParams.orderId = options.id
			this.queryParams.type = 0
		},
		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: {
			getDetail() {
				this.$api('getPostDetail', {
					id: this.id
				}, res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {

						res.result.image =
						res.result.image ?
						res.result.image.split(',') : [],

						this.detail = res.result
					}
				})
			},
			submit(){
				if (this.$utils.verificationAll(this.form, {
						userValue: '说点什么吧',
					})) {
					return
				}
				
				// this.form.image = this.fileList.map((item) => item.url).join(",")
				this.form.orderId = this.id
				this.$api('addComment', this.form, res => {
					this.form.userValue = ''
					if(res.code == 200){
						uni.showToast({
							title: '发布成功!',
							icon: 'none'
						})
						this.getData()
					}
				})
			},
		}
	}
</script>

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

			.box {
				display: flex;
				align-items: center;

				.headPortraitimg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 15rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.YaoduUniversalWall {
					padding: 0rpx 10rpx;

					.username {
						max-width: 200rpx;
					}

					.heide {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.inde {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0rpx 10rpx;
						margin: 0rpx 5rpx;
						font-size: 20rpx;
						height: 30rpx;
						color: white;
						// background-color: rgb(124, 136, 242);
						background-color: var(--sexcolor);
						border-radius: 7rpx;
						flex-shrink: 0;
					}

					.authentication {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0rpx 10rpx;
						margin: 0rpx 5rpx;
						font-size: 20rpx;
						height: 34rpx;
						padding: 0rpx 10rpx;
						color: white;
						background-color: #ffd036;
						border-radius: 7rpx;
						flex-shrink: 0;
					}

					.Times {
						display: flex;
						padding: 5rpx 0rpx;
						font-size: 20rpx;
						margin-top: 10rpx;

						.Month {
							margin: 0rpx 15rpx;
						}
					}

				}
			}

			.personalInformation {
				display: flex;

				.inde {
					font-size: 25rpx;
					padding: 0rpx 8rpx;
				}

				.authentication {
					font-size: 25rpx;
				}
			}

			.dynamics {
				margin-top: 20rpx;
				font-size: 28rpx;
				// font-weight: bold;
				// line-height: 35rpx;
				letter-spacing: 3rpx;
			}

			.Artworkimages {
				display: flex;
				flex-wrap: wrap;

				.wrokimg {
					margin: 10rpx;

					image {
						height: 190rpx;
						width: 190rpx;
						border-radius: 20rpx;
					}
				}
			}

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

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

				.Leavingamessage {
					height: 20rpx;
					width: 20rpx;
					margin-left: auto;
				}
			}
		}

		.comment-list {
			margin-top: 20rpx;
			padding-bottom: 150rpx;
			.comment {
				background-color: #fff;
				padding: 30rpx 40rpx;
				margin-top: 10rpx;
				.box {
					display: flex;
					align-items: center;

					.headPortraitimg {
						width: 80rpx;
						height: 80rpx;
						border-radius: 15rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.YaoduUniversalWall {
						padding: 0rpx 10rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						.Times{
							font-size: 22rpx;
						}
					}
				}

				.dynamics {
					margin-top: 20rpx;
					margin-left: 100rpx;
					font-size: 28rpx;
					letter-spacing: 3rpx;
				}
			}
		}
		
		.submit-box{
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			width: 100%;
			box-shadow: 0 0 6rpx 6rpx #00000011;
			padding-bottom: env(safe-area-inset-bottom);
			.top{
				align-items: center;
				display: flex;
				justify-content: center;
				input{
					background-color: #f3f3f3;
					width: 460rpx;
					height: 40rpx;
					border-radius: 40rpx;
					margin: 20rpx;
					padding: 20rpx 30rpx;
					font-size: 28rpx;
				}
				.submit{
					
				}
			}
		}
	}
</style>