aiot-app/pages/saleManage/contact/components/comment.vue

<!--评论模块-->
<template>
	<view class="container">
		<view class="comment" v-for="(item, index) in contactDynamicsList" :key="index">
			<view class="info">
				<image class="avatar" :src="item.fromAvatar" style="width: 64rpx; height: 64rpx;" />
				<view class="right">
					<view class="name">{{ item.fromName }}</view>
					<view class="date">{{ item.date }}</view>
				</view>
			</view>
			<view class="content">{{ item.content }}</view>
			<u-album :urls="item.imgs" :multipleSize="120"></u-album>
			<view class="control">
				<!-- <text class="like" :class="{active: item.isLike}" @click="likeClick(item)">
            <i class="iconfont icon-like"></i>
            <text class="like-num">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</text>
          </text> -->
				<text class="comment-reply" @click="showCommentInput(item)">

					<text>评论</text>
				</text>
			</view>
			<view class="reply">
				<view class="item" v-for="reply in item.reply" :key="reply.id">
					<view class="reply-content">
						<text class="from-name">{{ reply.fromName }}</text><text>: </text>
						<text class="to-name">{{ reply.toName&&'@'+reply.toName }}</text>
						<text>{{ reply.content }}</text>
					</view>
					<view class="reply-bottom">
						<text>{{ reply.date }}</text>
						<text class="reply-text" @click="showCommentInput(item, reply)">

							<text>回复</text>
						</text>
					</view>
				</view>
				<!-- <view
          class="write-reply"
          v-if="item.reply.length > 0"
          @click="showCommentInput(item)"
        >
          <i class="el-icon-edit"></i>
          <text class="add-comment">添加新评论</text>
        </view> -->
				<!-- <transition name="fade"> -->
				<view class="input-wrapper" v-if="item.id && showItemId === item.id">

					<u--textarea class="gray-bg-input" placeholder="写下你的评论" border="surround"
						v-model="inputComment"></u--textarea>
					<view class="btn-control">
						<text class="cancel" @click="cancel">取消</text>
						<text class="btn" type="success" round @click="commitComment">确定</text>
						<!-- <u-button type="primary" @click="commitComment" text="确定"></u-button> -->
					</view>
				</view>
				<!-- </transition> -->
			</view>
		</view>
		<u-modal :show="show" @cancel="cancel1" :showCancelButton="true" :closeOnClickOverlay="true"
			@confirm="updateContactDynamics" :title="'发布动态'">
			<view style="dia">
				<u--textarea class="gray-bg-input" placeholder="动态内容" border="surround" v-model="content"></u--textarea>
			</view>
			<view @click="chooseImage" style="display: flex;">
				<text>现场照片：</text>
				<u-button type="primary" style="width: 150rpx;" size="small" text="拍照上传"></u-button>
			</view>
			<view>
				<u-album :urls="imgs" :singleSize="180" :multipleSize="180"></u-album>
			</view>
		</u-modal>
		<view class="add" @click="show=true">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		updateContactComment,
		contactDetail,
		updateContactDynamics
	} from '@/api/saleManage/contact/index.js'
	export default {
		components: {},
		data() {
			return {
				show: false,
				inputComment: '',
				showItemId: '',
				contactDynamicsList: [],
				row: {},
				item: {},
				reply: {},
				userInfo: {},
				content: '',
				imgs: []
			};
		},

		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			chooseImage() {
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '加载中'
						})

						_this.uploadFile(res.tempFilePaths).then(res => {
							res.forEach(item => {
								let fileNames = item.storePath.split('/')
								let url = _this.apiUrl +
									'/main/file/getFile?objectName=' +  item.storePath+
									'&fullfilename=' + fileNames[fileNames.length -
										1]
								_this.imgs.push(url)
							})
							uni.hideLoading()

						})
						// tempFilePaths.forEach(item => {
						// 	uni.uploadFile({
						// 		url: _this.apiUrl + '/main/file/upload',
						// 		filePath: item,
						// 		name: 'multiPartFile',
						// 		header: {
						// 			authorization: token
						// 		},

						// 		success: (uploadFileRes) => {
						// 			let data = JSON.parse(uploadFileRes.data)
						// 			if (data?.data) {
						// 				let fileNames = data?.data.storePath.split('/')
						// 				let url = _this.apiUrl +
						// 					'/main/file/getFile?objectName=' + data?.data
						// 					.storePath +
						// 					'&fullfilename=' + fileNames[fileNames.length -
						// 						1]
						// 				_this.imgs.push(url)
						// 			}
						// 			console.log(_this.imgs, '_this.imgs')

						// 		}
						// 	});
						// })
					}
				});
			},
			uploadFile(list) {
				let PromiseAll = []
				const apiUrl = this.apiUrl
				const token = uni.getStorageSync("token"); //取存本地的token
				list.forEach(item => {
					PromiseAll.push(
						new Promise((resolve, reject) => {
							uni.uploadFile({
								url: apiUrl + '/main/file/upload',
								filePath: item,
								name: 'multiPartFile',
								header: {
									authorization: token
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data)
									resolve(data.data)
								}
							});
						}),
					)
				})

				return Promise.all(PromiseAll)

			},
			/**
			 * 点击取消按钮
			 */
			cancel() {
				this.showItemId = '';
			},
			cancel1() {
				this.show = false
				this.imgs = []
				this.content = ''
			},

			confirm() {
				this.show = false
			},
			/**
			 * 提交评论
			 */
			async commitComment() {

				await updateContactComment({
					id: this.row.id,
					contactDynamicsList: [{
						id: '', //主键id
						date: '', //评论时间
						commentId: this.item.id,
						fromId: this.userInfo.userId, //评论者id
						fromName: this.userInfo.name, //评论者昵称
						fromAvatar: this.userInfo.avatar && this.userInfo.avatar[0]?.url, //评论者头像
						toId: this.reply.fromId, //被评论者id
						toName: this.reply.fromName, //被评论者昵称
						toAvatar: this.reply.fromAvatar, //被评论者头像
						content: this.inputComment, //评论内容
					}]
				});
				this.showItemId = '';
				uni.$emit('setContact', {
					key: 'form',
					data: this.form
				})
				const data = await contactDetail(this.row.id);
				this.init(data.base);
			},
			//发布动态
			async updateContactDynamics() {

				await updateContactDynamics({
					id: this.row.id,
					contactDynamicsList: [{
						id: '', //主键id
						date: '', //评论时间
						ownerId: '', //文章的id
						fromId: this.userInfo.userId, //评论者id
						fromName: this.userInfo.name, //评论者昵称
						fromAvatar: this.userInfo.avatar && this.userInfo.avatar[0]?.url, //评论者头像
						content: this.content, //评论内容
						imgs: this.imgs, //现场图
						reply: [
							//回复，或子评论
						]
					}]
				});
				const data = await contactDetail(this.row.id);
				this.cancel1()
				this.init(data.base);
			},
			/**
			 * 点击评论按钮显示输入框
			 * item: 当前大评论
			 * reply: 当前回复的评论
			 */
			showCommentInput(item, reply) {

				this.inputComment = ''
				this.item = item;
				this.reply = reply || {};
				this.showItemId = item.id;
			},
			init(row) {
				this.row = row;
				this.contactDynamicsList = row.contactDynamicsList
				this.$forceUpdate()
			}
		}
	}
</script>

<style scoped lang="scss">
	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.container {
		padding: 0 16rpx;
		box-sizing: border-box;

		.comment {
			display: flex;
			flex-direction: column;
			padding: 16rpx;
			border-bottom: 1rpx solid #F2F6FC;

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

				.avatar {
					border-radius: 50%;
				}

				.right {
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;

					.name {
						font-size: 28rpx;
						color: #303133;
						margin-bottom: 16rpx;
						font-weight: 500;
					}

					.date {
						font-size: 24rpx;
						color: #909399;
					}
				}
			}

			.content {
				font-size: 28rpx;
				color: #303133;
				line-height: 18rpx;
				padding: 18rpx 0;
			}

			.control {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #909399;

				.like {
					display: flex;
					align-items: center;
					margin-right: 32rpx;
					cursor: pointer;

					&.active,
					&:hover {
						color: #409EFF;
					}

					.iconfont {
						font-size: 26rpx;
						margin-right: 16rpx;
					}
				}

				.comment-reply {
					display: flex;
					align-items: center;
					cursor: pointer;

					&:hover {
						color: #333;
					}

					.iconfont {
						font-size: 28rpx;
						margin-right: 16rpx;
					}
				}
			}

			.reply {
				margin: 28rpx 0;
				border-left: 4rpx solid #DCDFE6;

				.item {
					margin: 0 18rpx;
					padding: 18rpx 0;
					border-bottom: 1rpx dashed #EBEEF5;

					.reply-content {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #303133;

						.from-name {
							color: #409EFF;
						}

						.to-name {
							color: #409EFF;
							margin-left: 16rpx;
							margin-right: 16rpx;
						}
					}

					.reply-bottom {
						display: flex;
						align-items: center;
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #909399;

						.reply-text {
							display: flex;
							align-items: center;
							margin-left: 18rpx;
							cursor: pointer;

							&:hover {
								color: #333;
							}

							.icon-comment {
								margin-right: 16rpx;
							}
						}
					}
				}

				.write-reply {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #909399;
					padding: 18rpx;
					cursor: pointer;

					&:hover {
						color: #303133;
					}

					.el-icon-edit {
						margin-right: 16rpx;
					}
				}

				.fade-enter-active,
				fade-leave-active {
					transition: opacity 0.5s;
				}

				.fade-enter,
				.fade-leave-to {
					opacity: 0;
				}

				.input-wrapper {
					padding: 18rpx;

					.gray-bg-input,
					.el-input__inner {
						/*background-color: #67C23A;*/
					}

					.btn-control {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						padding-top: 18rpx;

						.cancel {
							font-size: 28rpx;
							color: #606266;
							margin-right: 32rpx;
							cursor: pointer;

							&:hover {
								color: #333;
							}
						}

						.confirm {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

	/deep/.u-modal__content {
		flex-direction: column;
	}

	/deep/.u-album__row__wrapper {
		uni-image {
			width: 180rpx !important;
			height: 180rpx !important;
		}
	}
</style>