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" src="/static/img/index/index-avatar.png" 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">
						<image class="reply-img wh-60 m-t20 r-10 m-r20" :src="msg_img.url" mode="aspectFill"
							v-for="(msg_img,index) in msg.msg_img" :key="index"></image>
<!--            <en-image :img="msg.msg_img" :width="130" height="130"></en-image>-->
					</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="/static/img/task-details/icon-pdf.png" 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-t20 r-20"  v-if="msg.reply_list.length>0">
						<view class="" 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">
									<image class="reply-img wh-60 m-t20 r-10 m-r20" :src="r_img.url"
										mode="aspectFill" v-for="(r_img,index) in replyItem.msg_img" :key="index"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
      <view class="row m-t20 ">
        <view class="empty-box"></view>
        <view class="size-22 text-color-999">{{ msg.created_at }}</view>
      </view>

		</view>
    <en-blank v-if="msgList.length<=0"></en-blank>
		<uni-popup background-color="#fff" ref="popup" type="bottom" borderRadius="10px 10px 0 0"
			@touchmove.stop.prevent="moveHandle">
			<view class="page-env-160">
				<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="/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 EnImage from "@/components/en-utils/en-image/en-image.vue";
  import tools from "@/service/tools";
  import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
      EnBlank,
      EnImage,
			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: {
      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>