assess-app/page_task/task_details/module/record.vue

<template>
	<view class="text-color-12">
		<view class="sys-background-fff m-20 p-20 r-20" v-for="(msg,index) in msgList" :key="index">
			<view class="record-box row-justify-sb">
				<view class="row-c">
					<image class="wh-80 sys-radius-50" :src="msg.head_img" mode="aspectFill"></image>
					<view class="column m-l16">
						<text class="size-26 sys-weight-600">{{ msg.name }}</text>
						<text class="size-24 text-color-999">{{ msg.position_name }}</text>
					</view>
				</view>
				<view class="reply-box size-24">
					<view class="reply-top size-24"></view>
					<view class="reply-buttom size-24" @click="onSendChat(msg.id)">回复</view>
				</view>
			</view>
			<view class="row m-t20 ">
				<view class="empty-box"></view>
				<view class="m-l16 size-26 flex">
					<!-- 自己发送 -->
					<text> {{ msg.msg }}</text>
					<view class="image-box" v-if="msg.msg_img.length>0">
						<EnImageVideo @onShowImg="onPreviewImage" :img-list="msg.msg_img"></EnImageVideo>
					</view>
					<!-- 文件类型 -->
					<view class="sys-from-background-color p-20 r-20 m-t20" v-if="msg.file_list.length>0">
						<view class="file-item row-c m-b20" @click.stop="openFile(file)"
							v-for="(file,fileIndex) in msg.file_list" :key="index">
							<image class="wh-45 m-r20" src="/page_task/static/img/task-details/icon-pdf.png"
								v-if="file.file_type===1" mode="aspectFill"></image>
							<image class="wh-45 m-r20" src="page_task//static/img/task-details/icon-word.png"
								v-else-if="file.file_type===2" mode="aspectFill"> </image>
							<image class="wh-45 m-r20" src="/page_task/static/img/task-details/icon-excel.png" v-else
								mode="aspectFill"> </image>
							<text class="size-24 color-111827">{{ file.name }}</text>
						</view>
					</view>
					<!-- 1对1回复 -->
					<view class="sys-from-background-color p-20 m-t10 r-20" v-if="msg.reply_list.length>0">
						<view class="m-t10" v-for="replyItem in msg.reply_list">
							<text class="color-00A775">{{ replyItem.name }}</text><text
								class="m-lr10 text-color-666">回复</text><text
								class="color-00A775">{{ replyItem.ru_name }}:</text>
							<view class="">
								<view class="m-t16">{{ replyItem.msg }}</view>
								<view class="image-box" v-if="replyItem.msg_img.length>0">
                  <EnImageVideo @onShowImg="onPreviewImage" :img-list="replyItem.msg_img"></EnImageVideo>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="row m-t20 ">
				<view class="empty-box"></view>
				<view class="size-22 text-color-999 m-l16">{{ msg.created_at }}</view>
			</view>
		</view>
		<en-blank v-if="msgList.length<=0"></en-blank>
		<uni-popup ref="popup" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="page-env-160 sys-background-fff r-20">
				<view class="row-justify-sb center p-lr30 p-t30">
					<view class="wh-25"></view>
					<text class="size-30 sys-weight-600">任务反馈</text>
					<image class="wh-25" src="/page_task/static/img/task-details/close.png" mode="" @click="onClose">
					</image>
				</view>
				<SendChat is_button @butClick="setMsg" v-model="msgData"></SendChat>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SendChat from "./send_chat.vue"
	import {
		getMsgList,
		setMsg
	} from "@/api/task";
	import EnImageVideo from "@/components/en-utils/en-image-video/en-image-video.vue";
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank,
			EnImageVideo,
			SendChat
		},
		props: {
			businessId: {
				default: 0
			}
		},
		watch: {
			'businessId': function() {

			}
		},
		data() {
			return {
				msgList: [],
				replyId: '',
				msgData: {
					business_id: '',
					msg: '',
					reply_id: 0,
					msg_img: [],
					file_list: [],
				},
				isAjax: false
			}
		},
		methods: {
      onPreviewImage(url){
        this.$emit('onShowImg',url)
      },
			startData() {
				this.getMsgList()
			},
			setMsg() {
				if (this.isAjax) {
					return;
				}
				// this.isAjax=true;
				this.msgData.business_id = this.businessId
				if (this.replyId) {
					this.msgData.reply_id = this.replyId;
				}
				setMsg(this.msgData).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg)
						this.msgData.reply_id = ''
						this.msgData.msg = ''
						this.msgData.msg_img = []
						this.getMsgList()
						this.$refs.popup.close()
					} else {
						tools.error(res.msg)
						this.isAjax = false;
					}

				})
			},
			openFile(file) {
				if (!file.url) {
					tools.error('下载地址不存在')
					return
				}
				tools.showLoading()
				uni.downloadFile({
					url: file.url, //仅为示例，并非真实的资源
					success: (dRes) => {
						tools.hideLoading()
						if (dRes.statusCode === 200) {
							tools.success('下载成功')
							uni.saveFile({
								tempFilePath: dRes.tempFilePath,
								success: (res) => {
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu: true,
										success: function(res) {}
									});
								}
							});
						}
					}
				});
			},
			getMsgList() {
				if (this.businessId <= 0) {
					return
				}
				getMsgList({
					'business_id': this.businessId
				}).then((res) => {
					if (res.code === 1) {
						this.msgList = res.data;
						// this.setImgList()
					}
				})
			},
			moveHandle() {
				return false
			},
			onSendChat(replyId) {
				this.replyId = replyId
				this.$refs.popup.open('bottom')
			},
			onClose() {
				this.$refs.popup.close('bottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-box {


		.reply-box {
			position: relative;

		}

		.reply-top {
			width: 98rpx;
			height: 45rpx;
			background: #0FB160;
			border-radius: 6rpx;
			opacity: 0.1;
		}

		.reply-buttom {
			width: 98rpx;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			position: absolute;
			top: 0;
			color: #0FB160;
		}
	}

	.empty-box {
		width: 80rpx;
	}

	.image-box {
		display: flex;
		flex-wrap: wrap;

		.reply-img {
			width: 130rpx;
			height: 130rpx;
			display: block;
		}
	}

	.file-item:last-child {
		margin-bottom: 0;
	}
</style>