jsm-mall-h5-front/src/packageWorkorder/pages/nandufysq.vue

<template>
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="info-container card mt30" v-if="orderDetail">
        <view class="common-title"><text>工单信息</text></view>
        <view>
          <view class="row">
            <view class="label">订单编号</view>
            <view class="value">{{ orderDetail.id }}</view>
            <view class="ctrl" @tap="$copy(orderDetail.id)">复制</view>
          </view>
          <view class="row">
            <view class="label">客户名称</view>
            <view class="value">{{ orderDetail.userName }}</view>
          </view>
          <view class="row">
            <view class="label">客户电话</view>
            <view class="value">{{ orderDetail.userMobile }}</view>
          </view>
          <view class="row">
            <view class="label">客户地址</view>
            <view class="value">
              {{ orderDetail.province || '' }}{{ orderDetail.city || '' }}{{ orderDetail.area || ''
              }}{{ orderDetail.street || '' }}{{ orderDetail.address || orderDetail.gpsAddress }}
            </view>
          </view>
        </view>
      </view>

      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->

      <view class="mt30 remark-container">
        <view class="common-title"
          ><text><text>*</text>申请理由</text></view
        >
        <u--textarea
          v-model="remarkVal"
          :disabled="!isBinji"
          placeholder="请输入备注内容"
          fixed
          border="none"
          height="120"
        ></u--textarea>
      </view>

      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->

      <view class="mt30 remark-container">
        <view class="common-title"
          ><text><text>*</text>问题描述</text></view
        >
        <u--textarea
          v-model="remarkVal2"
          :disabled="!isBinji"
          placeholder="请输入备注内容"
          fixed
          border="none"
          height="120"
        ></u--textarea>
      </view>

      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->

      <view class="mt30 image-container">
        <view class="common-title"
          ><text><text>*</text>环境照片(最多15张，可上传图片或视频)</text></view
        >
        <view class="images">
          <block v-for="(item, index) in imageList" :key="index">
            <view class="img">
              <image v-if="isImage(item.url)" :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
              <image
                v-if="!isImage(item.url)"
                src="@/static/common/shipin.png"
                mode="aspectFill"
                @tap="prevVideo(item.url)"
              ></image>
              <text v-if="isBinji" class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
            </view>
          </block>
          <view class="add" @tap="addImage" v-if="imageList.length < 15 && isBinji">
            <text class="iconfont icon-xiangji"></text>
            <text class="text">添加图片</text>
          </view>
        </view>
      </view>

      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->
      <!--  -->

      <view
        class="info-container card mt30"
        v-if="oldData && oldData.workerInvolveApplyItems && oldData.workerInvolveApplyItems.length"
      >
        <view class="common-title">
          <text>审核信息</text>
          <text style="color: orange">
            {{ returnText(oldData) }}
          </text>
        </view>
        <view>
          <view class="row">
            <view class="label">申请时间</view>
            <view class="value">{{ oldData.createTime }}</view>
          </view>
          <view class="row">
            <view class="label">审批费用</view>
            <view class="value">{{ oldData.maintenancePricePass || oldData.websitMaintenancePricePass }}</view>
          </view>
          <view class="row">
            <view class="label">审批时间</view>
            <view class="value">{{ oldData.auditTime || oldData.websitAuditTime }}</view>
          </view>
          <view class="row">
            <view class="label">审批备注</view>
            <view class="value">{{ oldData.remark || oldData.websitRemark }} </view>
          </view>
        </view>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group" v-if="!oldData">
        <u-button text="提交" type="primary" size="large" @click="submitData"></u-button>
      </view>
      <view class="footer-btn-group" v-if="oldData && oldData.status == 2">
        <u-button text="重新申请" type="primary" size="large" @click="shenheapi"></u-button>
      </view>
    </template>

    <video
      v-if="videoUrl"
      :src="videoUrl"
      style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999999999999"
    ></video>
    <cover-image
      v-if="videoUrl"
      style="
        width: 120rpx;
        height: 120rpx;
        position: fixed;
        right: 10rpx;
        top: 10rpx;
        z-index: 9999999999999999;
        border-radius: 50%;
      "
      @click="videoUrl = ''"
      src="@/static/common/guanbi.png"
    ></cover-image>
  </zj-page-layout>
</template>

<script>
import { uploadImgFull } from '@/common/utils/util.js'
export default {
  components: {},
  data() {
    return {
      remarkVal: '',
      remarkVal2: '',
      imageList: [],
      orderDetail: null,
      canClickBtn: true,
      oldData: null,
      videoUrl: ''
    }
  },

  computed: {
    isBinji() {
      return !this.oldData || this.oldData?.status == 2
    }
  },

  async onLoad({ id, type }) {
    this.id = id
    this.getOrderDetail()
    this.$api
      .post('/workerApply/detail', {
        orderBaseId: this.id
      })
      .then(res => {
        if (res.data) {
          this.oldData = res.data
          this.remarkVal = res.data.reason
          this.remarkVal2 = res.data.problemDescription
          this.imageList = res.data?.image ? res.data.image.split(',').map(url => ({ url })) : []
        }
      })
      .catch(res => {})
  },

  methods: {
    returnText(data) {
      return { 1: '待网点审核', 2: '驳回重申', 3: '待中心审核', 4: '驳回禁止申诉', 5: '通过审核' }[data.status]
    },
    // 获取详情
    getOrderDetail() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/detail', {
            orderBaseId: this.id
          })
          .then(res => {
            this.orderDetail = res.data
            resolve(1)
          })
          .catch(res => {
            reject(0)
          })
      })
    },

    // 添加图片
    async addImage() {
      uni.showActionSheet({
        title: '上传图片或视频',
        itemList: ['图片', '视频'],
        itemColor: '#000',
        success: e => {
          if (e.tapIndex === 0) {
            uni.chooseImage({
              count: 6 - this.imageList.length,
              success: res => {
                uni.showLoading()
                res.tempFilePaths.forEach(async item => {
                  let data = await uploadImgFull(item)
                  this.imageList.push(data)
                })
                uni.hideLoading()
              },
              fail: err => {}
            })
          } else if (e.tapIndex === 1) {
            uni.chooseVideo({
              compressed: true,
              sourceType: ['camera', 'album'],
              camera: 'back',
              maxDuration: 300,
              success: async res => {
                uni.showLoading()
                let data = await uploadImgFull(res.tempFilePath)
                this.imageList.push(data)
                uni.hideLoading()
              }
            })
          }
        },
        fail: e => {
          console.log(e)
        }
      })
    },

    isImage(ext) {
      return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].includes(
        ext.substr(ext.lastIndexOf('.') + 1)
      )
    },

    // 删除图片
    delImage(index) {
      this.imageList.splice(index, 1)
    },

    //预览图片
    prevImg(current) {
      uni.previewImage({
        current,
        urls: this.imageList.map(item => {
          return item.url
        })
      })
    },

    prevVideo(current) {
      this.videoUrl = current
    },

    // 提交
    async submitData() {
      if (!this.canClickBtn) return this.$toast('请勿频繁操作')
      this.canClickBtn = false
      setTimeout(() => {
        this.canClickBtn = true
      }, 3000)

      var params = {
        orderBaseId: this.id
      }

      if (!this.remarkVal) {
        return this.$toast('请填写申请理由')
      } else {
        params.reason = this.remarkVal
      }

      if (!this.remarkVal2) {
        return this.$toast('请填写问题描述')
      } else {
        params.problemDescription = this.remarkVal2
      }

      if (!this.imageList.length) {
        return this.$toast('请上传环境照片')
      } else {
        params.image = this.imageList
          .map(item => {
            return item.url
          })
          .join(',')
      }

      this.$api
        .postJson('/workerApply/add', {
          ...params
        })
        .then(res => {
          this.canClickBtn = true
          this.submitSuccess()
        })
    },

    async shenheapi() {
      if (!this.canClickBtn) return this.$toast('请勿频繁操作')
      this.canClickBtn = false
      setTimeout(() => {
        this.canClickBtn = true
      }, 3000)

      var params = {
        id: this.oldData.id,
        orderBaseId: this.id
      }

      if (!this.remarkVal) {
        return this.$toast('请填写申请理由')
      } else {
        params.reason = this.remarkVal
      }

      if (!this.remarkVal2) {
        return this.$toast('请填写问题描述')
      } else {
        params.problemDescription = this.remarkVal2
      }

      if (!this.imageList.length) {
        return this.$toast('请上传环境照片')
      } else {
        params.image = this.imageList
          .map(item => {
            return item.url
          })
          .join(',')
      }

      this.$api
        .postJson('/workerApply/update', {
          ...params
        })
        .then(res => {
          this.canClickBtn = true
          this.submitSuccess()
        })
    },

    submitSuccess(tab = '') {
      this.$successToast('提交成功')
      setTimeout(() => {
        this.$navToPage(
          {
            delta: 1
          },
          'navigateBack'
        )
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.all-container {
  padding-bottom: 30rpx;
}

.common-title {
  font-size: 32rpx;
  font-weight: 600;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;

  text {
    text {
      color: $minor-color;
    }
  }
}

.type-container {
  background: #ffffff;
  padding: 0 30rpx;

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

    .item {
      width: calc((100% - 30rpx) / 3);
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 20rpx;
      background: #f4f5f9;
      margin-bottom: 30rpx;

      &.active {
        background: $theme-color;
        color: #ffffff;
      }
    }
  }
}

.date-conteiner {
  background: #ffffff;
  padding: 30rpx 30rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;

    .label {
      margin-right: 30rpx;

      text {
        color: $error-color;
      }
    }

    .picker {
      .placeholder {
        color: $sec-font;
      }

      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
  }
}

.over-container {
  background: #ffffff;
  padding: 10rpx 30rpx;

  .row {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;

      text {
        color: $minor-color;
      }

      ::v-deep .u-icon {
        margin-left: 8rpx;
      }
    }

    .btn {
      ::v-deep .u-button {
        height: 60rpx;
      }
    }
  }
}

.sign-container {
  background: #ffffff;
  padding: 0 30rpx 30rpx;

  .empty {
    height: 200rpx;
    background: #f4f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    color: $sec-font;
  }

  .img {
    position: relative;

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

    text {
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #ff3f42;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 40rpx;
      display: block;
    }
  }
}

.remark-container {
  padding: 1rpx 30rpx 30rpx;
  background: #ffffff;

  ::v-deep .u-textarea {
    background: #f4f5f9;
  }
}

.image-container {
  padding: 1rpx 30rpx 30rpx;
  background: #ffffff;

  .images {
    display: flex;
    flex-wrap: wrap;

    .add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 146rpx;
      height: 146rpx;
      border: 2rpx dashed #dadada;
      border-radius: 10rpx;
      margin-top: 20rpx;

      .iconfont {
        font-size: 48rpx;
        color: #999999;
      }

      .text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }

    .img {
      position: relative;
      margin-right: 20rpx;
      margin-top: 20rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: block;
      }

      text {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #ff3f42;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 40rpx;
        display: block;
      }
    }
  }
}

.info-container {
  background: #ffffff;
  padding: 30rpx;

  .row {
    display: flex;
    margin-top: 20rpx;

    &:first-child {
      margin-top: 0;
    }

    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
    }

    .ctrl {
      font-size: 28rpx;
      color: $theme-color;
      margin-left: 20rpx;
    }
  }
}
// .card {
//   @include zj-card;
// }
</style>