OfficeApp/subpkg/otherTask/otherTask.vue

<template>
  <view style="padding-top: 28rpx;padding-bottom: 160rpx;">
    <view class="card">
      <view class="title">任务名称: {{task_info.title}}</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <!-- <view class="text">阶段类型: 单次</view> -->
      <view class="text" style="color: #FF7C32;">任务金额: {{task_info.money}}元</view>
    </view>
    <view class="card">
      <view class="title">任务描述</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <view class="text">{{task_info.content}}</view>
    </view>
    <view class="card" v-if="approve_status==3">
      <view class="title" style="color: #FF7C32;">驳回提示</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <view class="text" style="color: #FF7C32;">{{deny_notes}}</view>
      <button v-if="other.is_commit==1" class="btn" @click="toUpdate">去修改</button>
    </view>
    <view class="card">
      <view class="title">详情描述</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <u--textarea :disabled="other.is_commit==1" v-model="note" placeholder="请输入内容"
        placeholderStyle="font-size: 22rpx;" style="font-size: 28rpx;background-color: #eee;min-height: 100px;"
        autoHeight maxlength="-1"></u--textarea>
      <view class="title" style="margin-top: 16rpx;">添加附件</view>
      <u-tabs :current="current" :list="list1" @click="clickTabs" lineColor='#0122c7' :itemStyle="{height: '80rpx'}"
        lineWidth='20' inactiveStyle='color:#666' activeStyle="color:#0122c7"
        style="margin-bottom: 16rpx;font-size: 28rpx;"></u-tabs>
      <!-- 图片 -->
      <view class="file" v-show="current==0">
        <view class="file_item" v-for="(item, index) in fileList" :key="'file'+index">
          <image class="image" :src="item" @click="priview(index)"></image>
          <image v-if="!other.is_commit" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)">
          </image>
        </view>
        <view v-if="!other.is_commit" class="file_btn" @click="chooseFile">
          <image src="/static/icons/plus.png"></image>
        </view>
        <view class="file_empty" v-for="k in placeholderLength" :key="'empty'+k"></view>
      </view>
      <!-- 视频 -->
      <view class="file" v-show="current==1">
        <view class="file_item" v-for="(item, index) in videoList" :key="'file_v'+index">
          <image class="image" src="/static/img/task/video_bg.png" @click="videoshow(item)"></image>
          <image v-if="!other.is_commit" class="del" src="/static/icons/delete.png"
            @click.stop="deleteFile(index, 'video')">
          </image>
        </view>
        <view v-if="!other.is_commit" class="file_btn" @click="chooseVideo">
          <image src="/static/icons/plus.png"></image>
        </view>
        <view class="file_empty" v-for="k in placeholderLengthVideo" :key="'empty_v'+k"></view>
      </view>
    </view>
    <!-- <mybtn text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn> -->
    <mybtn v-if="!other.is_commit" text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn>
    <mybtn v-else-if="task_info.status==3" text="已完成" :my_btn_disabled="true" @click="showToast('任务已完成')"></mybtn>
    <mybtn v-else-if="task_info.status==5" text="已关闭" :my_btn_disabled="true" @click="showToast('任务已关闭!')"></mybtn>
    <mybtn v-else-if="approve_status==3" text="已驳回,请重新提交" @click="toUpdate"></mybtn>
    <mybtn v-else text="已提交,请等待审核" :my_btn_disabled="true" @click="showToast('请耐心等待审核结果')"></mybtn>
    <!--视频预览弹窗-->
    <view v-if="show_video" class="video-count">
      <video id="myVideo" class="videoLink" autoplay loop muted show-mute-btn enable-play-gesture
        vslide-gesture-in-fullscreen :src="video_src"></video>
    </view>
    <view class='mask' catchtouchmove="true" :hidden='show_video==false' @tap="show_video=false"></view>
  </view>
</template>

<script>
  import {
    upLoadImage,
    VIDEO_URL
  } from "@/api/file.js"
  import {
    taskOtherTaskDetail,
    taskOtherTaskCommit
  } from "@/api/task.js"
  import { Toast } from "../../libs/uniApi";
  export default {
    data() {
      return {
        task_id: -1,
        task_info: {},
        approve_status: 0, // 审核状态： 1待审核，2已通过，3已驳回
        deny_notes: '', // 驳回提示
        other: {
          annex: [], // 图片列表
          is_commit: 0, // 是否提交
          note: "", // 详情描述
          video_annex: [] // 视频列表
        },
        list1: [{
          name: '图片',
        }, {
          name: '视频',
        }],
        current: 0,
        note: '',
        fileList: [],
        videoList: [],
        video_src: '',
        show_video: false
      };
    },
    onLoad(options) {
      this.task_id = options.task_id;
      this.initDetail();
    },
    computed: {
      // 占位长度 
      placeholderLength() {
        if (this.other.is_commit == 1) return this.fileList.length % 3 == 0 ? 0 : 3 - this.fileList.length % 3;
        return (this.fileList.length + 1) % 3 == 0 ? 0 : 3 - (this.fileList.length + 1) % 3;
      },
      placeholderLengthVideo() {
        if (this.other.is_commit == 1) return this.videoList.length % 3 == 0 ? 0 : 3 - this.videoList.length % 3;
        return (this.videoList.length + 1) % 3 == 0 ? 0 : 3 - (this.videoList.length + 1) % 3;
      },
    },
    methods: {
      // 初始化
      initDetail() {
        taskOtherTaskDetail({ id: this.task_id }).then((res) => {
          this.task_info = res.data;
          this.other = JSON.parse(JSON.stringify(res.data?.extend?.other)); // 深拷贝
          this.approve_status = res.data?.approve_status;
          this.deny_notes = res.data?.deny_notes;
          res.data?.extend?.other?.note ? this.note = res.data?.extend?.other?.note : null;
          res.data?.extend?.other?.annex ? this.fileList = res.data?.extend?.other?.annex : null;
          res.data?.extend?.other?.video_annex ? this.videoList = res.data?.extend?.other?.video_annex : null;
          // this.other.is_commit = 0;
        })
      },
      // 被驳回时点击重新修改
      toUpdate() {
        this.other.is_commit = 0;
      },
      // 判断内容是否更改, 返回true代表更改
      isReject(){
        if (this.approve_status == 3) { // 被驳回，重新提交需要修改内容后方可提交
          let other = {
            note: this.note,
            annex: this.fileList,
            video_annex: this.videoList
          }
          let flag = true;
          if(JSON.stringify(other)==JSON.stringify({
            note: this.other.note,
            annex: this.other.annex,
            video_annex: this.other.video_annex
          })) flag = false;
          if (!flag) {
            Toast('未检测到您的修改，请修改后提交')
          } 
          return flag;
        }
        else return true;
      },
      // 提交
      async submit() {
        if(!this.isReject())return; // 判断是否进行更改
        if (this.note.trim() == '') return Toast('详情描述不能为空');
        await taskOtherTaskCommit({
          id: this.task_id,
          note: this.note,
          annex: this.fileList,
          video_annex: this.videoList
        });
        this.other.is_commit = 1;
        this.approve_status = 1;
        Toast('提交成功');
      },
      clickTabs(item) {
        this.current = item.index;
      },
      showToast(str) {
        Toast(str)
      },
      chooseFile() {
        uni.chooseImage({
          sizeType: ['compressed'],
          success: async (res) => {
            for (let item of res.tempFiles) {
              let ul = await upLoadImage({
                filePath: item.path,
                name: 'file'
              });
              this.fileList.push(ul.data.uri);
            }
          }
        });
      },
      chooseVideo() {
        uni.chooseVideo({
          sourceType: ['album', 'camera'], // 视频选择的来源，可以是相册或摄像头
          maxDuration: 60, // 视频最大时长，单位秒
          success: (res) => {
            const video = res.tempFilePath;
            let timer;
            let title = '上传中';
            timer = setInterval(() => {
              uni.showLoading({
                title: title
              })
            }, 1000)
            // 上传视频文件
            let uploadTask = uni.uploadFile({
              url: VIDEO_URL,
              filePath: video,
              name: 'file',
              header: {
                token: this.$store.state.app.token
              },
              success: (uploadFileRes) => {
                clearInterval(timer);
                uni.hideLoading();
                uploadFileRes.data = JSON.parse(uploadFileRes.data)
                if (uploadFileRes.data.code == 1) {
                  this.videoList.push(uploadFileRes.data.data.uri)
                } else Toast('网络错误')
              },
              fail: (err) => {
                clearInterval(timer);
                uni.hideLoading();
                Toast('网络错误')
              }
            })
            uploadTask.onProgressUpdate((fileRes) => {
              title = `上传中...${fileRes.progress}%`;
            })
          },
          fail() {
            Toast('用户取消上传')
          }
        });
      },
      priview(index) {
        uni.previewImage({
          urls: this.fileList,
          current: index,
          longPressActions: {
            itemList: ['删除'],
            itemColor: '#ff0000',
            success(e) {
              if (e.tapIndex == 0) this.deleteFile(e.index);
            }
          },
        })
      },
      /*查看视频*/
      videoshow(src) {
        this.video_src = src;
        this.show_video = true;
        this.$nextTick(() => {
          this.videoContext = uni.createVideoContext('myVideo', this);
          this.videoContext.play();
        })
      },
      // 删除已上传文件
      deleteFile(index, type = 'image') {
        if (type == 'image') this.fileList.splice(index, 1);
        else if (type == 'video') this.videoList.splice(index, 1);
      },
      navTo(url) {
        if (url) {
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
            url: url,
            success() {
              uni.hideLoading()
            }
          })
        } else Toast('暂未开放')
      },
    }
  }
</script>

<style lang="scss">
  ::v-deep .u-tabs__wrapper__nav__item__text {
    font-size: 28rpx !important;
  }

  .video-count {
    position: fixed;
    width: 600rpx;
    height: 500rpx;
    top: 50%;
    left: 50%;
    margin-left: -300rpx;
    margin-top: -250rpx;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;

    .videoLink {
      width: 600rpx;
      height: 500rpx;
    }
  }

  .card {
    margin: 0 auto;
    margin-bottom: 28rpx;
    width: 694rpx;
    background: #FFFFFF;
    border-radius: 14rpx;
    padding: 28rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .text {
      line-height: 50rpx;
    }

    .btn {
      background-color: $theme-oa-color;
      color: #FFFFFF;
      font-size: 28rpx;
      height: 60rpx;
      line-height: 60rpx;
      margin-top: 16rpx;
    }

    .file {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;

      &_item {
        flex-shrink: 0;
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        margin-bottom: 16rpx;
        border: 2px solid #ccc;
        border-radius: 10rpx;
        overflow: hidden;
        position: relative;

        .image {
          width: 100%;
          height: 100%;
        }

        .del {
          position: absolute;
          height: 40rpx;
          width: 40rpx;
          top: 10rpx;
          right: 10rpx;
        }
      }

      &_btn {
        flex-shrink: 0;
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        margin-bottom: 16rpx;
        border: 2px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10rpx;

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

      &_empty {
        flex-shrink: 0;
        width: 200rpx;
        height: 200rpx;
        margin: 0 auto;
        margin-bottom: 16rpx;
        border: 2px solid transparent;
      }
    }

  }
</style>