dvcp_v2_wxcp_app/src/project/fd/AppPointsReview/detail.vue

<template>
  <div class="detail">
    <div class="header-content">
      <div class="title-flex">
        <p>{{info.applyItemName}}</p>
        <div :class="`color-${info.status}`">{{ $dict.getLabel('appIntegralApplyEventStatus', info.status) }}</div>
      </div>
      <div class="user-flex">
        <div>申请人：{{info.createUserName}}</div>
        <div>电话号码：<span style="color:#1365DD;" @click="callPhone(info.phone)">{{info.phone}}</span></div>
      </div>
    </div>
    <div class="content">
      <div class="title-flex">
        <p>申请信息</p>
        <div style="color:#1365DD;">
          <span style="margin-right:16px" v-if="isEdit" @click="isEdit=false;getDetail()">取消</span>
          <span @click="edit">{{isEdit ? '保存' : '编辑'}}</span>
        </div>
      </div>
      <div class="info-flex solid">
        <div class="label">积分值</div>
        <div class="value">
          <u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="info.applyIntegral" maxlength="5" v-if="isEdit"/>
          <span v-else>{{info.applyIntegral}}</span>
        </div>
      </div>

      <div class="info-flex">
        <div class="label">详情描述</div>
      </div>
      <div class="info-textarea" v-if="isEdit">
        <u-input v-model="info.content" type="textarea" :height="200" auto-height maxlength="300" placeholder="请输入详细描述" />
        <div class="hint">{{ info.content.length }}/300</div>
      </div>
      <p class="text solid" v-else>{{info.content}}</p>

      <div class="items solid" v-if="isEdit">
        <p>上传图片</p>
        <div class="upload">
          <AiUploader :def.sync="info.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
        </div>
        <div class="text-tips left">可上传图片，最多上传9张。</div>
      </div>
      <div class="items" v-if="isEdit">
        <p>上传视频</p>
        <div class="upload">
          <AiUploader :def.sync="info.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
        </div>
        <div class="text-tips left">可上传视频，最大30M。</div>
      </div>
      <div class="img-list" v-if="info.files && info.files.length && !isEdit">
        <div v-for="(item, index) in info.files"  :key="index">
          <div v-if="item.postfix == '.mp4'" class="video-item" @click="choose(item)" >
            <img :src="item.facePicture" alt="" class="pic-img">
            <img :src="`${$cdn}video/play-icon.png`" alt="" class="play-icon">
          </div>
          <img :src="item.accessUrl" alt="" @click="previewImages(item.accessUrl)" class="pic-img" v-else>
        </div>
      </div>

    </div>
    <div class="pass-info" v-if="info.status == 2">
      <div class="title"><span></span>未通过理由</div>
      <p>{{info.auditDesc}}</p>
    </div>
    <div class="footer" v-if="info.status == 0 && !isEdit">
      <div class="confirm" @click="agree()">通过</div>
      <div class="cancel" @click="show=true">不通过</div>
    </div>
    <u-popup v-model="show" mode="bottom">
      <div class="textarea">
        <u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入不通过原因" :clearable="false" maxlength="500" />
        <p>字数{{ value.length }}/500</p>
      </div>
      <div class="btn">
        <span @click="value = ''">清空内容</span>
        <span class="confirm" @click="confirm">保存</span>
      </div>
    </u-popup>
    <u-popup v-model="showVideo" mode="bottom">
      <div class="audio">
        <video controls class="only_video" :src="videoUrl" autoplay></video>
        <!-- <audio :src="url" ref="audio" :controls="true" :name="autioName" style="display: block;"></audio> -->
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      show: false,
      value: '',
      id: '',
      info: {},
      showVideo: false,
      videoUrl: '',
      isEdit: false
    };
  },
  onLoad(option) {
    this.id = option.id
    this.$dict.load('appIntegralApplyEventStatus').then(() => {
      this.getDetail()
    })
  },
  onShow() {
    document.title = '积分详情'
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res=> {
        if(res?.data) {
          this.info = res.data
          this.info.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.name.split('.')[1])))
          this.info.videos = res.data.files.filter(e => (['mp4'].includes(e.name.split('.')[1])))
        }
      })
    },
    confirm() {
      if(!this.value) {
        return this.$u.toast('请输入不通过原因')
      }
      this.submit(0)
    },
    agree() {
      this.$confirm('确定通过该条申请').then(() => {
        this.submit(1)
      })
    },
    submit(status) {
      this.$http.post(`/app/appintegraluserapply/auditById`, {
        auditDesc: this.value,
        id: this.id,
        auditStatus: status
      }).then(res=> {
        if(res.code == 0) {
          this.$u.toast('操作成功')
          uni.$emit('updateList')
          this.show = false
          this.getDetail()

        }
      })
    },
    previewImages(img) {
      var imgs = []
      this.info.files.map((item) => {
        if(item.postfix != '.mp4') {
          imgs.push(item.accessUrl)
        }
      })
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },
    callPhone(phone) {
      uni.makePhoneCall({ phoneNumber: phone })
    },
    choose(item) {
      this.videoUrl = item.accessUrl
      this.showVideo = true
    },
    edit() {
      if(this.isEdit) {
        this.editConfirm()
      }else {
        this.isEdit = true
      }
    },
    editConfirm() {

    }
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #F4F5FA;
}
.detail {
  height: 100%;
  padding-top: 32px;
  .title-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    p {
      color: #333;
      font-size: 34px;
      font-weight: 600;
      font-family: "PingFang SC";
      line-height: 40px;
      word-break: break-all;
    }
    div {
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 40px;
      width: 280px;
      text-align: right;
      span {
        display: inline-block;
      }
    }
    .color-0{
      color: #FF9A40;
    }
    .color-1{
      color: #42D784;
    }
    .color-2{
      color: #cd413aff;
    }
  }
  .header-content {
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    margin-bottom: 32px;
    .user-flex {
      display: flex;
      justify-content: space-between;
      line-height: 42px;
      margin-bottom: 16px;
      font-size: 28px;
      color: #333;
    }
  }
  .content {
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    .info-flex {
      display: flex;
      padding: 24px 0;
      line-height: 40px;
      box-sizing: border-box;
      .label {
        color: #999;
        vertical-align: top;
        width: 160px;
      }

      .value {
        display: inline-block;
        width: calc(100% - 160px);
        word-break: break-all;
        text-align: right;
      }
      
    }
    .text {
      color: #333;
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 42px;
      margin-bottom: 32px;
      padding-bottom: 24px;
    }
    .info-textarea{
      padding: 16px 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;
      margin-bottom: 32px;
      .hint {
        padding: 4px 0 8px 0;
        text-align: right;
        color: #999;
      }
    }
    .img-list {
      div {
        display: inline-block;
      }
      .pic-img {
        width: 210px;
        height: 210px;
        margin: 0 16px 16px 0;
      }
      .pic-img:nth-of-type(3n) {
        margin-right: 0;
      }
      .video-item {
        position: relative;
      }
      .play-icon {
        position: absolute;
        top: 80px;
        left: 80px;
        width: 50px;
        height: 50px;
      }
    }
  }
  .pass-info {
    padding: 40px;
    background-color: #fff;
    .title {
      color: #222;
      font-size: 30px;
      font-family: "PingFang SC";
      line-height: 40px;
      margin-bottom: 24px;

      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #CD413A;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
    p {
      color: #666;
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 42px;
      word-break: break-all;
    }
  }
  .footer{
    width: 100%;
    height: 96px;
    background: #FFF;
    box-shadow: inset 0 0 0 0 #D4D4D4;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    bottom: 0;
    div {
      flex: 1;
      height: 96px;
      line-height: 96px;
      background: #FFF;
      font-family: PingFangSC-Regular;
      font-size: 32px;
      text-align: center;
      font-weight: 500;
    }
    .cancel {
      color: #1365DD;
      box-sizing: border-box;
    }
    .confirm {
      background-color: #1365DD;
      color: #fff;
    }
  }
  .textarea {
    margin: 32px 32px 24px;
    width: calc(100% - 64px);
    padding: 16px;
    box-sizing: border-box;
    background: #f7f7f7;
    border-radius: 8px;
    p {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999;
      line-height: 36px;
      text-align: right;
    }
  }
  .btn {
    padding: 0 32px 24px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      line-height: 64px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
    }
    .confirm {
      width: 144px;
      text-align: center;
      background: #1365dd;
      border-radius: 32px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #fff;
    }
  }
  .audio {
    width: 100%;
    height: 600px;
    box-sizing: border-box;
    padding: 32px;
    .only_video {
      width: 100%;
      height: 100%;
    }
  }
  .items {
    width: 100%;
    background: #FFF;
    margin-bottom: 24px;
    p {
      padding: 24px 32px;
      box-sizing: border-box;
    }
    textarea {
      padding: 24px 32px;
      box-sizing: border-box;
      width: 100%;
    }
    .tips {
      color: #f46;
      font-size: 24px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .text-tips {
      padding: 12px 32px;
      box-sizing: border-box;
      text-align: right;
      color: #999999;
      font-size: 24px;
      font-weight: 400;
    }
    .left {
      text-align: left;
    }
    .upload {
      padding: 24px 32px 0 32px;
      box-sizing: border-box;
    }
  }
}
</style>