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

<template>
  <view class="task-box" :class="isExecute>0?'task-info':'task-info-two'">
    <en-nav :isBackShow="true" :backType="false" :titleColor="titleColor" :title="title"
            :bgckgroundBox="titleBg"></en-nav>
    <view class="task-title">
      <text >{{business.status_name}}</text>
    </view>
    <view class="switch-box">
      <view class="switch-left" @click="switchShow(1)">
        <view class="" :class="switchNum===1?'switch-left-style':''">
          任务信息
        </view>
        <view class="switch-left-styles" v-if="switchNum===1"></view>
      </view>
      <view class="switch-left switch-right" @click="switchShow(2)">
        <view class="" :class="switchNum===2?'switch-left-style':''">
          流程进度
        </view>
        <view class="switch-left-styles" v-if="switchNum===2"></view>
      </view>
    </view>
    <view class="" v-if="switchNum===1">
      <view class="content">
        <uni-collapse>
          <uni-collapse-item v-for="typeItem in product.type_data" :title="typeItem.type_name" v-show="product.product_types.indexOf('1')>=0">
            <view class="basic-information" v-if="typeItem.type==='1'">
              <task-client :business="business" :type-keys="typeItem.type_keys" @onShowImg="onShowImg"></task-client>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='2'">
              <task-property :property-list="propertyList" :type-keys="typeItem.type_keys" @onShowImg="onShowImg"></task-property>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='3'">
              <task-apply-for :apply-for="applyFor" :type-keys="typeItem.type_keys" @onShowImg="onShowImg"></task-apply-for>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='4'">
             <task-tripartite :tripartite="tripartite" :type-keys="typeItem.type_keys" @onShowImg="onShowImg"></task-tripartite>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='5'">
              <task-linkman :linkman="linkman" :type-keys="typeItem.type_keys" ></task-linkman>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='6'">
              <task-credit :credit="credit" :type-keys="typeItem.type_keys" @onShowImg="onShowImg"></task-credit>
            </view>
            <view class="basic-information" v-else-if="typeItem.type==='7'">
              <task-post-loan :post-loan="postLoan" :type-keys="typeItem.type_keys"></task-post-loan>
            </view>
          </uni-collapse-item>

        </uni-collapse>
      </view>
      <view class="set-box">
        <view class="set-title">
          任务执行信息
        </view>
        <view class="task-phase">
          <view class="task-phase-left">
            任务阶段
          </view>
          <view class="task-phase-right">
            {{ stageData.stageName ? stageData.stageName : '未设置阶段' }}
          </view>
        </view>
        <view class="task-phase perform-personnel">
          <view class="task-phase-left">
            执行人员
          </view>
          <view class="task-phase-left">
            {{ stageData.userName ? stageData.userName : '暂无执行人' }}
          </view>
        </view>
      </view>
      <view class="leave-message-box">
        <view class="title-name">
          留言
        </view>
        <view class="leave-message" v-for="(msg,mIndex) in msgList">
          <image class="head-portrait" :src="msg.head_img" mode=""></image>
          <view class="leave-message-right">
            <view class="leave-message-right-one">
              <view class="one-name">
                <view class="name">
                  {{ msg.name }}
                </view>
                <view class="state">
                  {{ msg.position_name }}
                </view>
              </view>
              <view class="one-reply" @click="goToUrl(1,msg.id)">
                回复
              </view>
            </view>
            <view class="leave-message-right-two">
              <text>{{ msg.msg }}</text>
            </view>
            <view class="leave-message-right-three">
              <view class="three-item" v-for="(msg_img,index) in msg.msg_img" :key="index">
                <view class="three-img" @click.stop="onShowImg(msg_img.url)" v-if="msg_img.type===1">
                  <image
                      :src="msg_img.url" mode="aspectFill"></image>
                </view>
                <view class="three-img three-video" @click.stop="showVideoImg(msg_img.url)" v-else>
                  <image class="three-img"
                         :src="getVideoImg(msg_img.url)" mode="aspectFill"></image>
                  <image class="video-img" src="@/static/task/video-img.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="leave-message-right-file" v-if="msg.file_list.length>0">
              <view class="file-list">
                <view class="file-item" @click.stop="openFile(file)" v-for="(file,fileIndex) in msg.file_list">
                  <view class="file-img">
                    <image src="/static/task/file-icon.png"></image>
                    <view class="img-icon" v-if="file.file_type===1">PDF</view>
                    <view class="img-icon icon-four" v-else-if="file.file_type===2">Word</view>
                    <view class="img-icon icon-two" v-else>XLS</view>
                  </view>
                  <view class="file-text">
                    {{ file.name }}
                  </view>
                </view>
              </view>
            </view>
            <view class="leave-message-right-four">
              {{ msg.created_at }}
            </view>
            <view class="leave-message-right-five" v-for="replyItem in msg.reply_list">
              <view class="info-list">
                <view class="reply-info">
                  <view>
                    <text class="info-name">{{ replyItem.name }}</text>
                    <text
                        class="reply">&nbsp;&nbsp;回复&nbsp;&nbsp;
                    </text>
                    <text
                        class="info-name">{{ replyItem.ru_name }}:
                    </text>
                  </view>
                  <view>
                    <text class="info-content">{{ replyItem.msg }}</text>
                  </view>



                </view>
              </view>
              <view class="info-img-box" v-if="replyItem.msg_img.length>0">
                <view class="info-item" v-for="(r_img,index) in replyItem.msg_img">
                  <view class="info-img" @click.stop="onShowImg(r_img.url)" v-if="r_img.type===1">
                    <image :src="r_img.url" mode="aspectFill"></image>
                  </view>
                  <view class="info-img info-video" @click.stop="showVideoImg(r_img.url)" v-else>
                    <image class="three-img"
                           :src="getVideoImg(r_img.url)" mode="aspectFill"></image>
                    <image class="video-img" src="@/static/task/video-img.png" mode=""></image>
                  </view>
                </view>
              </view>
              <view class="info-file-list" v-if="replyItem.file_list.length>0">
                <view class="file-list">
                  <view class="file-item" @click.stop="openFile(file)" v-for="(file,fileIndex) in replyItem.file_list">
                    <view class="file-img">
                      <image src="/static/task/file-icon.png"></image>
                      <view class="img-icon" v-if="file.file_type===1">PDF</view>
                      <view class="img-icon icon-four" v-else-if="file.file_type===2">Word</view>
                      <view class="img-icon icon-two" v-else>XLS</view>
                    </view>
                    <view class="file-text">
                      {{ file.name }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="one-reply" @click="goToUrl(1,replyItem.id)">
                回复
              </view>
            </view>

          </view>
        </view>
        <view class="blank-box" v-if="msgList.length<=0">
          <image class="blank-box-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/static/rwzx/blank-img.png" mode=""></image>
          <view class="blank-box-text">
            暂无内容
          </view>
        </view>
      </view>
      <view class="but-box" v-if="isExecute>0 && business.status<4">
        <view class="but" v-if="isExecute===3" @click="takeTask">
          <!--领取操作-->
          领取
        </view>
        <view class="but" v-else-if="isExecute===5" @click="endTask">
          <!--完成操作-->
          完成
        </view>
        <view class="but-box-two" v-else-if="isExecute===4">
          <!--        部门主管操作-->
                    <view class="turn-single but-two" @click="cancellation" >
                      作废
                    </view>
          <view class="turn-single but-two" @click="openExecute">
            交接
          </view>
          <view class="operation but-two" @click="goToUrl(1)">
            反馈
          </view>
        </view>
        <view class="but-box-two" v-else-if="isExecute===2">
          <!-- 超级管理员操作-->
          <view class="turn-single but-two" @click="cancellation" >
            作废
          </view>
          <view class="operation but-two" @click="goToUrl(1)">
            反馈
          </view>
        </view>
        <view class="but-box-two" v-else-if="isExecute===7">
          <!-- 超级管理员操作-->

          <view class="operation but-one" @click="editTask()">
            编辑
          </view>
        </view>
        <view class="but-box-two" v-else-if="isExecute===8">
          <!-- 超级管理员操作-->

          <view class="operation but-one" @click="setPostLoan()">
            完善贷后
          </view>
        </view>
        <view class="but-box-two" v-else-if="isExecute===6">
          <view class="turn-single but-three" @click="openExecute">
            交接
          </view>
          <view class="turn-single but-three" @click="auditTask(2)">
            拒绝
          </view>
          <view class="operation but-three" @click="auditTask(1)">
            同意
          </view>
        </view>
        <view class="but-box-two" v-else>

          <view class="turn-single but-two" @click="openExecute">
            交接
          </view>
          <view class="operation but-two" @click="setStage()">
            操作
          </view>
        </view>
      </view>
      <view v-show="showExecute">
        <uni-data-picker class="" popup-title="选择执行人" :localdata="executeData" ref="popupObj"
                         @change="setNewExecute"
                         :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
        </uni-data-picker>
      </view>
    </view>
    <view class="schedule-box" v-else>
      <view class="schedule-list" v-for="(item,index) in businessStageList" :key="index">
        <view class="list-one">
          <view class="list-left">
            <view class="mark">
              <view class="mark-two" :class="{'mark-two-no':item.id<=0}"></view>
            </view>
            <text class="switch-digital" :class="{'switch-digital-no':item.id<=0}">
              {{ item.stage_name }}
            </text>
            <text class="switch-hr" v-if="item.id>0"></text>
            {{ item.id <= 0 ? '' : item.name }}
          </view>
          <view class="list-right">
            {{ item.updated_at }}
          </view>
        </view>
        <view class="list-hr" v-if="businessStageList.length>(index+1)"></view>
      </view>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="task-msg-box">
        <taskSet ref="taskSetObj" :businessId="businessId" @endTaskSet="endTaskSet"></taskSet>
      </view>
    </uni-popup>
    <uni-popup ref="feedback" type="bottom">
      <view class="task-msg-box">
        <taskMsg :businessId="businessId" :replyId="replyId"></taskMsg>
      </view>
    </uni-popup>
    <uni-popup ref="videoPopup" @change="closeVideoImg">
      <view class="video-box" v-if="videoUrl">
        <video class="myVideo" :src="videoUrl" :autoplay="true"></video>
      </view>
    </uni-popup>
  </view>
</template>

<script>

import taskSet from "./task-set"
import taskMsg from "./task-msg"
import {
  getStageList,
  getTaskDetail,
  cancellation,
  endTask,
  getExecuteList,
  getMsgList,
  setExecute,
  takeTask, getBusinessStageList,
} from "@/api/task";
import tools from "@/service/tools";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup";
import EnNav from "@/components/en-utils/en-nav/en-nav";
import TaskClient from "./module/task-client";
import TaskProperty from "./module/task-property";
import TaskApplyFor from "./module/task-apply-for";
import TaskLinkman from "./module/task-linkman";
import TaskTripartite from "./module/task-tripartite";
import TaskCredit from "./module/task-credit";
import TaskPostLoan from "./module/task-post-loan";

export default {
  components: {
    TaskPostLoan,
    TaskCredit,
    TaskTripartite,
    TaskLinkman,
    TaskApplyFor,
    TaskProperty,
    TaskClient,
    EnNav,
    UniPopup,
    taskSet,
    taskMsg
  },
  data() {
    return {
      title: '任务详情',
      titleColor: '#fff',
      titleBg: '',
      switchNum: 1,
      product: {
        product_name: '',
        product_types: [],
        type_data:[]
      },
      business: {
        status: 1,
        phone: '',
        identity_one: '',
        identity_two: '',
        marriage_img: [],
        credit_img: [],
      }, //基本信息
      propertyList: [], //资产信息
      applyFor: {}, //申请信息
      credit: {}, //征信信息
      postLoan: {}, //贷后信息
      tripartite: [], //第三方信息
      linkman: [], //联系人信息
      stageData: {
        stageName: '',
        userName: ""
      },
      isAjax: false,
      isExecute: 0,
      msgList: [],
      executeData: [],
      showExecute: false,
      businessId: 0,
      auditType: 0,
      previewList: [],
      current: 0,
      imgKey: 0,
      imgList: [],
      replyId: "",
      stageList: [],
      businessStageList: [],
      businessFile: {
        fileList: [],
        imgList: [],
        videoList: [],
      },
      videoUrl: ''
    }
  },
  onPageScroll(e) {
    if (e.scrollTop > 50) {
      this.titleBg = '#fff'
      this.titleColor = '#333333'
    } else {
      this.titleBg = ''
      this.titleColor = '#fff'
    }
  },
  onLoad(data) {
    if (data.id === undefined) {
      this.backEvent();
    } else {
      this.businessId = data.id
      this.getTaskDetail()
      this.getStageList()
    }
  },
  mounted() {
    uni.$on('newMsg', () => {
      if (this.$refs.feedback) {
        this.$refs.feedback.close()
      }
      //重新加载msg信息
      this.getMsgList();

    })
    uni.$on('newTaskInfo',()=>{
      this.getTaskDetail()
    })
  },
  methods: {
    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) {
                  }
                });
              }
            });
          }
        }
      });
    },
    getVideoImg(url) {
      return tools.getOssVideo(url)
    },
    closeVideoImg(e) {
      if (!e.show) {
        console.log('关闭视频了')
        this.videoUrl = ''
      }
    },
    showVideoImg(url) {
      console.log(url)
      this.videoUrl = url
      this.$refs.videoPopup.open('center')
    },
    setPostLoan(){
      uni.navigateTo({
        url: '/pages-task/task-info/task-loan?id=' +  this.business.id
      });
    },
    editTask() {
      // uni.reLaunch({
      //   url: '/pages/add-client/add-client?businessId=' + this.business.id
      // })
      uni.reLaunch({
        url: '/pages-task/add-client/new-add?businessId=' + this.business.id
      })
    },
    getBusinessStageList() {
      getBusinessStageList({'business_id': this.businessId}).then((res) => {
        if (res.code === 1) {
          this.businessStageList = res.data
        }
      })
    },
    getStageList() {
      getStageList({'id': this.businessId}).then((res) => {
        if (res.code === 1) {
          this.stageList = res.data
        }
      })
    },
    switchShow(num) {
      this.switchNum = num
    },
    onShowImg(item) {
      if (this.businessFile.imgList.length < 0) {
        this.businessFile.imgList.push(item)
      }
      // 预览图片
      uni.previewImage({
        current: item,
        urls: this.businessFile.imgList,
      });
    },
    makingCall() {
      tools.makingCall(this.business.phone)
    },
    openExecute() {
      this.executeData = [];
      getExecuteList({
        'business_id': this.business.id
      }).then((res) => {
        if (res.code === 1) {
          res.data.forEach((item) => {
            this.executeData.push({
              'text': item.name,
              'value': item.id
            })
          })
          this.showExecute = true;
          this.$refs.popupObj.show();
        }
      })
    },
    setPopupClosed() {
      //关闭选择器
      this.showExecute = false;
    },
    setNewExecute(e) {
      //设置新执行人
      console.log(e)
      let newUid = e.detail.value[0].value
      console.log(newUid)
      if (!newUid) {
        newUid = 0;
      }
      setExecute({
        'business_id': this.business.id,
        'user_id': newUid
      }).then((res) => {
        if (res.code === 1) {
          tools.success(res.msg)
          uni.$emit('newReceiving')
          this.getTaskDetail()

        } else {
          tools.error(res.msg)
        }
        this.showExecute = false
      })
    },
    getMsgList() {
      getMsgList({
        'business_id': this.business.id
      }).then((res) => {
        if (res.code === 1) {
          this.msgList = res.data;
          // this.setImgList()
        }
      })
    },
    goToUrl(type, id) {
      this.replyId = id
      this.$refs.feedback.open()
    },
    endTaskSet() {
      this.$refs.popup.close();
      this.getTaskDetail()
      this.getStageList()
    },
    setStage() {
      this.$refs.popup.open("bottom");
      this.$refs.taskSetObj.startStage();
    },
    auditTask(auditType) {
      this.$refs.popup.open("bottom");
      this.auditType = auditType
      this.$refs.taskSetObj.startAuditType(auditType);
    },
    takeTask() {
      if (this.isAjax) {
        // return;
      }
      this.isAjax = true;
      takeTask({
        'id': this.business.id
      }).then((res) => {
        if (res.code === 1) {
          tools.success('领取成功')
          uni.$emit('newReceiving')
          this.getTaskDetail()
        } else {
          this.isAjax = false;
          tools.error(res.msg)
        }
      })
    },
    endTask() {
      uni.showModal({
        title: '提示',
        content: '是否完成当前任务？',
        success: (res) => {
          console.log(res)
          if (res.confirm) {

            endTask({
              'id': this.business.id
            }).then((res) => {
              if (res.code === 1) {
                this.business.status = 4;
                this.isExecute = 0;
                tools.success(res.msg)
                uni.$emit('newReceiving')
              } else {
                tools.error(res.msg)
              }
            })
          }
        }
      });
    },
    cancellation() {
      uni.showModal({
        title: '提示',
        content: '是否作废当前任务？',
        success: (res) => {
          console.log(res)
          if (res.confirm) {

            cancellation({
              'id': this.business.id
            }).then((res) => {
              if (res.code === 1) {
                this.business.status = 5;
                this.isExecute = 0;
                tools.success(res.msg)
                uni.$emit('newReceiving')
              } else {
                tools.error(res.msg)
              }
            })
          }
        }
      });
    },
    async getTaskDetail() {
      const res = await getTaskDetail({
        id: this.businessId
      })
      if (res.code === 1) {
        this.product = res.data.product
        this.title = this.product.product_name
        this.business = res.data.business
        this.propertyList = res.data.propertyList
        this.applyFor = res.data.applyFor
        this.tripartite = res.data.tripartite
        this.linkman = res.data.linkman
        this.credit = res.data.credit
        this.postLoan = res.data.postLoan
        this.stageData = res.data.stageData
        this.isExecute = res.data.isExecute
        this.businessFile = res.data.businessFile
        this.getMsgList();
        this.getBusinessStageList()
      } else {
        this.backEvent();
      }
    },
    backEvent() {
      uni.navigateBack({
        delta: 1
      })
    }

  },
}
</script>
<style lang="scss" scoped>
/deep/ .uni-collapse-item__title-text {
  color: #333333 !important;
  font-size: 34rpx !important;
  font-weight: 600 !important;
}

.task-box {
  background-image: url("@/static/img/task/task-bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #F6F7FB;
  min-height: 100vh;
  .task-title{
    padding: 0 32rpx;
    height: 120rpx;
    line-height: 120rpx;
    text{
      font-size: 44rpx;
      font-weight: 600;
      color: #fff;
    }
  }

  .video-box {
    height: 70vh;
    width: 100vw;

    .myVideo {
      height: 70vh;
      width: 100vw;
    }
  }

  .blank-box {
    width: 100%;
    min-height: 30vh;

    .blank-box-img {
      width: 500rpx;
      height: 500rpx;
      margin: 0 auto;
    }

    .blank-box-text {
      font-size: 15px;
      color: #666666;
      text-align: center;
    }
  }

  .content {
    margin: 0 0 22rpx 0;
  }

  .switch-box {
    width: 100%;
    height: auto;
    padding: 26rpx 0 6rpx 0;
    display: flex;
    background: #fff;
    margin: 0 0 20rpx 0;

    .switch-left {
      width: 50%;
      font-size: 32rpx;
      color: #999999;
      text-align: center;
    }

    .switch-left-text {
      padding: 0 0 20rpx 0;
    }

    .switch-left-style {
      color: #306AFB;
      font-weight: 600;
      padding: 0 0 20rpx 0;
    }

    .switch-left-styles {
      width: 134rpx;
      height: 4rpx;
      background: #306AFB;
      margin: 0 auto;
    }
  }


  .set-box {
    margin: 0 0 20rpx 0;
    background: #fff;

    .set-title {
      font-size: 34rpx;
      color: #333333;
      font-weight: 600;
      padding: 17px 32rpx;
      box-sizing: border-box;
    }

    .task-phase {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 17px 32rpx;
      box-sizing: border-box;
      border-top: 1px solid #F0F0F0;

      .task-phase-left {
        font-size: 16px;
        color: #666666;
      }

      .task-phase-right {
        font-size: 16px;
        color: #232A35;
      }
    }

    .perform-personnel {
      .perform-personnel-left {
      }

      .perform-personnel-right {
      }
    }
  }

  .leave-message-box {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 32rpx 32rpx;
    box-sizing: border-box;
    // margin: 0 0 20rpx 0;

    .title-name {
      font-size: 34rpx;
      color: #232A35;
      font-weight: 600;
      margin: 0 0 32rpx 0;
    }

    .leave-message {
      width: 100%;
      height: auto;
      display: flex;

      .head-portrait {
        width: 90rpx;
        height: 90rpx;
        display: block;
        margin: 0 20rpx 0 0;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .leave-message-right {
        width: 100%;
        height: auto;
        box-sizing: border-box;

        .leave-message-right-one {
          width: 95%;
          height: auto;
          display: flex;
          justify-content: space-between;
          margin: 0 0 24rpx 0;

          .one-name {
            display: flex;
            align-items: center;

            .name {
              font-size: 16px;
              color: #5C7C9B;
              padding: 0 20rpx 0 0;
              box-sizing: border-box;
            }

            .state {
              height: 32rpx;
              padding: 0 4rpx;
              box-sizing: border-box;
              background: #3169FA;
              border-radius: 3px;
              font-size: 10px;
              color: #FFFFFF;
              line-height: 32rpx;
            }
          }

          .one-reply {
            padding: 6rpx 12rpx;
            border: 1px solid #DCDCDC;
            border-radius: 2px;
            font-size: 12px;
            color: #000000;
          }
        }

        .leave-message-right-two {
          width: 578rpx;
          height: auto;
          margin: 0 0 16rpx 0;
          box-sizing: border-box;
          display: inline-block;
          text{
            font-size: 14px;
            color: #232A35;
            word-wrap: break-word;
          }
        }

        .leave-message-right-three {
          width: 100%;
          height: auto;
          // background: pink;
          display: flex;
          flex-wrap: wrap;

          .three-item {
            width: calc((100vw - 220rpx) / 3);
            height: calc((100vw - 220rpx) / 3);
            margin-right: 16rpx;

            .three-img {
              image {
                width: calc((100vw - 220rpx) / 3);
                height: calc((100vw - 220rpx) / 3);
              }
            }

            .three-video {
              position: relative;

              .video-img {
                position: absolute;
                top: calc(50% - 28rpx);
                left: calc(50% - 28rpx);
                width: 56rpx;
                height: 56rpx;
              }
            }
          }


          .three-item:nth-of-type(3n+0) {
            margin-right: 0;
          }

          .three-item:nth-of-type(n+4) {
            margin-top: 16rpx;
          }


        }

        .leave-message-right-file {
          margin-top: 20rpx;
          margin-bottom: 20rpx;
          width: calc(100vw - 174rpx);

          .file-list {
            border: 2rpx solid #F0F0F0;

            .file-item {
              height: 72rpx;
              padding: 19rpx 20rpx;
              display: flex;
              justify-content: left;

              .file-img {
                height: 72rpx;
                width: 72rpx;
                position: relative;

                .img-icon {
                  position: absolute;
                  left: 0;
                  top: 37rpx;
                  width: 32rpx;
                  height: 20rpx;
                  background: #F24949;
                  font-weight: 600;
                  color: #FFFFFF;
                  font-size: 12rpx;
                  line-height: 20rpx;
                  text-align: center;
                }

                .icon-two {
                  background: #00BF72;
                }

                .icon-three {
                  background: #F9742C;
                }

                .icon-four {
                  background: #0083FB;
                }

                image {
                  height: 72rpx;
                  width: 72rpx;
                }
              }

              .file-text {
                margin-left: 24rpx;
                width: calc(100vw - 184rpx);
                height: 72rpx;
                line-height: 72rpx;
                color: #333333;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }

            }
          }
        }

        .leave-message-right-four {
          font-size: 12px;
          color: #A6A6A6;
          margin: 0 0 21rpx 0;
        }

        .leave-message-right-five {
          width: 100%;
          height: auto;
          background: #F6F6F6;
          border-radius: 6rpx;
          padding: 24rpx 24rpx 10rpx;
          box-sizing: border-box;

          .info-list {
            width: 100%;
            flex-wrap: wrap;
            .reply-info{
              .info-name {
                font-size: 28rpx;
                color: #5C7C9B;
                flex-shrink: 0;
                word-wrap: break-word;
                box-sizing: border-box;
                display: inline-block;
              }

              .reply {
                font-size: 28rpx;
                color: #232A35;
                flex-shrink: 0;
                padding-left: 6rpx;
                padding-right: 6rpx;
              }

              .info-content {
                font-size: 28rpx;
                color: #232A35;
                //flex-wrap: wrap-reverse
                word-wrap: break-word;
                box-sizing: border-box;
                display: inline-block;
              }
            }



          }

          .one-reply {
            padding: 6rpx 12rpx;
            border: 1px solid #DCDCDC;
            border-radius: 2px;
            font-size: 12px;
            color: #000000;
            width: 50rpx;
            margin-top: 20rpx;
          }

          .info-img-box {
            margin-top: 28rpx;
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;

            .info-item {
              width: calc((100vw - 244rpx) / 4);
              height: calc((100vw - 244rpx) / 4);
              margin-right: 8rpx;

              .info-img {
                image {
                  width: calc((100vw - 244rpx) / 4);
                  height: calc((100vw - 244rpx) / 4);
                }
              }

              .info-video {
                position: relative;

                .video-img {
                  position: absolute;
                  top: calc(50% - 15rpx);
                  left: calc(50% - 15rpx);
                  width: 30rpx;
                  height: 30rpx;
                }
              }
            }

            .info-item:nth-of-type(4n+0) {
              margin-right: 0;
            }

            .info-item:nth-of-type(n+5) {
              margin-top: 16rpx;
            }

          }

          .info-file-list {
            margin-top: 20rpx;
            //margin-bottom: 20rpx;
            width: calc(100vw - 174rpx);

            .file-list {
              border: 2rpx solid #F0F0F0;

              .file-item {
                height: 72rpx;
                padding: 19rpx 20rpx;
                display: flex;
                justify-content: left;

                .file-img {
                  height: 72rpx;
                  width: 72rpx;
                  position: relative;

                  .img-icon {
                    position: absolute;
                    left: 0;
                    top: 37rpx;
                    width: 32rpx;
                    height: 20rpx;
                    background: #F24949;
                    font-weight: 600;
                    color: #FFFFFF;
                    font-size: 12rpx;
                    line-height: 20rpx;
                    text-align: center;
                  }

                  .icon-two {
                    background: #00BF72;
                  }

                  .icon-three {
                    background: #F9742C;
                  }

                  .icon-four {
                    background: #0083FB;
                  }

                  image {
                    height: 72rpx;
                    width: 72rpx;
                  }
                }

                .file-text {
                  margin-left: 24rpx;
                  width: calc(100vw - 184rpx);
                  height: 72rpx;
                  line-height: 72rpx;
                  color: #333333;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                }

              }
            }
          }
        }


      }
    }

    .leave-message:nth-of-type(n+1) {
      margin-top: 20rpx;
    }

  }

  .but-box {
    width: 100%;
    height: auto;
    padding: 12rpx 32rpx;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;


    .but {
      width: 100%;
      height: auto;
      padding: 11px 0;
      background: #3169FA;
      text-align: center;
      font-size: 16px;
      color: #FFFFFF;
      border-radius: 4px;
    }

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

      .Leave-message {
        // padding: 0 26rpx;
        //width: 118rpx;
        //height: 88rpx;
        border: 1px solid #DCDCDC;
        line-height: 88rpx;
        background: #fff;
        color: #232A35;
        border-radius: 8rpx;
        text-align: center;
      }

      .contact-user {
        padding: 8rpx 0;
        //width: 174rpx;
        // height: 88rpx;
        border: 1px solid #3169FA;
        // line-height: 88rpx;
        background: #fff;
        margin: 0 16rpx;
        text-align: center;
        border-radius: 8rpx;

        .contact-user-one {
          color: #3169FA;
        }

        .contact-user-two {
          font-size: 10px;
          color: #3169FA;
        }
      }

      .turn-single {
        // padding: 0 56rpx;
        //width: 174rpx;
        //height: 88rpx;
        border: 1px solid #3169FA;
        line-height: 88rpx;
        background: #fff;
        margin: 0 16rpx;
        color: #3169FA;
        border-radius: 8rpx;
        text-align: center;
      }

      .operation {
        // padding: 0 56rpx;
        //width: 174rpx;
        //height: 88rpx;
        line-height: 88rpx;
        background: #3169FA;
        color: #fff;
        border-radius: 8rpx;
        text-align: center;
      }

      .but-one {
        width: 100%;
        height: auto;
        text-align: center;
        border-radius: 8rpx;
      }

      .but-two {
        width: 50%;
        height: auto;
        text-align: center;
        border-radius: 8rpx;
      }

      .but-three {
        width: 33.33%;
        height: auto;
        text-align: center;
        border-radius: 8rpx;
      }
    }
  }

  .schedule-box {
    padding: 32rpx 34rpx 26rpx;
    box-sizing: border-box;
    background: #fff;

    .schedule-list {
      .list-one {
        display: flex;
        justify-content: space-between;

        .list-left {
          max-width: 364rpx;
          display: flex;
          align-items: flex-start;
          font-size: 14px;
          color: #333333;

          .mark {
            // width: 22rpx;
            // height: 22rpx;
            background: rgba(#3169FA, 0.1);
            border-radius: 50%;
            margin: 10rpx 9px 0 0;
            padding: 6rpx;
            flex-shrink: 0;

            .mark-two {
              width: 12rpx;
              height: 12rpx;
              background: #3169FA;
              border-radius: 50%;
              margin: 0 auto;
            }

            .mark-two-no {
              background: #999;
            }
          }

          .switch-digital {
            color: #333333;
            font-size: 28rpx;
            font-weight: 600;
            flex-shrink: 0;
            line-height: 36rpx;
          }

          .switch-digital-no {
            color: #999;
            font-weight: 400;
          }

          .switch-hr {
            width: 18rpx;
            height: 2rpx;
            background: #707070;
            margin: 18rpx 13rpx 0;
            flex-shrink: 0;
          }
        }

        .list-right {
          font-size: 13px;
          color: #999999;
        }
      }

      .list-hr {
        width: 2rpx;
        height: 50rpx;
        background: #F0F0F0;
        margin: 9rpx 0 9rpx 12rpx;
      }
    }
  }

  .task-msg-box {
    width: 100%;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

}

.task-info-two {
  width: 100%;
  height: auto;
  padding: 0;
}

.task-info {
  width: 100%;
  height: auto;
  padding: 0 0 112rpx 0;
}


</style>