assess-app/pages/task/task-msg.vue

<template>
  <view class="task-set">
    <!-- <headNav :isBackShow="false" :textContents="'任务反馈'" :navBackgroundColor="'#fff'"></headNav> -->
    <view class="nav">
      任务反馈
    </view>
<!--    <view class="content">-->
<!--      <view class="leave-message-box">-->
<!--        <view class="">-->
<!--          <textarea placeholder="留个言吧" v-model="msgData.msg" :maxlength="999" auto-height />-->
<!--        </view>-->
<!--        <view class="img-box">-->
<!--          <view class="credentials-img" @click="showImg(msgData.msg_img,pIndex)"-->
<!--            v-for="(msg_img,pIndex) in msgData.msg_img">-->
<!--            <image class="credentials-imgs" :src="msg_img" mode="aspectFit"></image>-->
<!--            <image @click="shutImg(pIndex)" class="gb-img" src="@/static/login/gb.png" mode=""></image>-->
<!--          </view>-->

<!--          <image class="img-box-img" @click="showUploadingImg(true)" src="@/static/add-client/scmb.png" mode=""></image>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <add-msg v-model="msgData"></add-msg>
    <view class="submit-box" @click="setMsg">
      <view class="submit">
        提交
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-block">
        <view class="popup-row" @click="uploadingImg(1)">拍照</view>
        <view class="popup-row" @click="uploadingImg(2)">从手机里面选择</view>
        <view class="popup-row" @click="showUploadingImg(false)">取消</view>
      </view>
    </uni-popup>
    <PreviewImage ref="previewImage" :imgs="previewList" :current="current"></PreviewImage>
  </view>
</template>

<script>
  import txUploadFile from "@/common/js/txOssSts";
  import tools from "@/common/js/tools";
  import {
    setMsg
  } from "@/api/task";
  import PreviewImage from "@/components/PreviewImage/index";
  import AddMsg from "@/pages-task/task-info/module/add-msg";

  export default {
    props: {
      businessId: {
        default: 0
      },
      replyId:{
        default: 0
      }

    },
    components: {
      AddMsg,
      PreviewImage
    },
    data() {
      return {
        title: "",
        msgData: {
          business_id: '',
          msg: '',
          reply_id: 0,
          msg_img: [],
          file_list: [],
        },
        isAjax: false,
        previewList: [],
        current: 0
      }
    },
    onLoad() {

    },
    watch:{
      'replyId':function (){
        if (this.replyId) {
          this.msgData.reply_id = this.replyId;
        }else {
          this.msgData.reply_id =''
        }
      }
    },
    mounted() {
      console.log('-----------businessId:'+this.businessId,'--------------replyId:'+this.replyId)
      this.msgData.business_id = this.businessId
      if (this.replyId) {
        this.msgData.reply_id = this.replyId;
      }
    },
    methods: {

      showImg(item, index) {
        if (typeof item === 'string') {
          item = [item];
        }
        this.previewList = item
        this.current = index
        this.$refs.previewImage.open(index);
      },
      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)
            uni.$emit('newMsg')
            this.msgData.reply_id=''
            this.msgData.msg=''
            this.msgData.msg_img=[]
          } else {
            tools.error(res.msg)
            this.isAjax = false;
          }

        })
      },
      shutImg(indexT) {
        this.msgData.msg_img.splice(indexT, 1)
      },
      showUploadingImg(showImg) {
        if (showImg) {
          this.$refs.popup.open("bottom");
          // this.uploadingImg(2)
        } else {
          this.$refs.popup.close();
        }
      },
      uploadingImg(sourceType) {
        uni.chooseMedia({
          mediaType: 'image',
          count: sourceType === 1 ? 1 : 9, //默认9
          sizeType: "compressed",
          sourceType: [sourceType === 1 ? 'camera' : 'album'],
          success: (res) => {
            console.log(res)
            if (res.tempFiles.length > 0) {
              res.tempFiles.forEach((tempFile) => {
                txUploadFile(tempFile.tempFilePath).then((data) => {
                  if (!data) {
                    tools.error('图片上传失败')
                  } else {
                    this.msgData.msg_img.push(data.Location)
                  }
                })
              })
              this.showUploadingImg(false);
            } else {
              tools.error("请选择上传的图片")
            }
          },
        });
      },
      leftClick() {
        uni.navigateBack({
          delta: 1
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .popup-block {
    border-radius: 20rpx 20rpx 0rpx 0rpx;

    background-color: #f5f5f5;

    .popup-row {
      height: 100rpx;
      background-color: #fff;
      text-align: center;
      line-height: 100rpx;
      border-bottom: 2rpx solid #f5f5f5;

      &:nth-child(2) {
        margin-bottom: 20rpx;
      }

      &:last-child {
        height: 112rpx;
        border: none;
        line-height: 112rpx;
      }

      &:active {
        background-color: rgb(244, 244, 244);
      }
    }
  }

  .task-set {
    width: 100%;
    min-height: 50vh;
    max-height: 70vh;
    background: #F6F7FB;
    overflow: auto;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .nav {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      padding: 30rpx 0 15rpx;
      background: #fff;
    }

    .content {
      width: 100%;
      height: auto;
      padding: 22rpx 0 0 0;

      .choose-box {
        width: 100%;
        height: auto;
        padding: 34rpx 35rpx;
        box-sizing: border-box;
        background: #fff;
        border-top: 1px solid #F0F0F0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .choose-box-left {
          font-size: 16px;
          color: #666666;
        }

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

          .choose-box-right-content {
            font-size: 16px;
            font-weight: 400;
            color: #232A35;
            margin: 0 18rpx 0 0;
          }

          .choose-box-right-img {
            width: 12rpx;
            height: 20rpx;
          }
        }
      }

      .choose-box-two {
        margin: 0 0 22rpx 0;
      }

      .leave-message-box {
        width: 100%;
        height: auto;
        padding: 36rpx 30rpx 106rpx;
        box-sizing: border-box;
        background: #fff;

        .img-box {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          padding: 40rpx 0 0 0;

          .credentials-img {
            width: 160rpx;
            height: 160rpx;
            margin: 0 16rpx 30rpx 0;
            position: relative;

            .credentials-imgs {
              width: 100%;
              height: 100%;
              display: block;
            }

            .gb-img {
              width: 32rpx;
              height: 32rpx;
              position: absolute;
              right: 0;
              top: 0;
              z-index: 2;
            }
          }

          .img-box-img {
            width: 216rpx;
            height: 216rpx;
          }
        }
      }
    }

    .submit-box {
      width: 100%;
      height: auto;
      border-top: 1px solid #F0F0F0;
      background: #fff;
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 12rpx 32rpx;
      box-sizing: border-box;

      .submit {
        width: 100%;
        height: auto;
        background: #3169FA;
        border-radius: 4px;
        font-size: 16px;
        color: #FFFFFF;
        padding: 20rpx 0;
        text-align: center;
      }
    }
  }
</style>