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

<template>
  <div class="detail">
    <div class="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>
      <p class="text">{{info.content}}</p>
      <div class="img-list" v-if="info.files && info.files.length">
        <img :src="item.accessUrl" alt="" v-for="(item, index) in info.files" :key="index" @click="previewImages(info.files, item.accessUrl)">
      </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">
      <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>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      show: false,
      value: '',
      id: '',
      info: {},
    };
  },
  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
        }
      })
    },
    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(images, img) {
      uni.previewImage({
        urls: images.map(v => v.accessUrl),
        current: img
      })
    },
    callPhone(phone) {
      uni.makePhoneCall({ phoneNumber: phone })
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #F4F5FA;
}
.detail {
  height: 100%;
  padding-top: 32px;
  .content {
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    .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;
      }
      .color-0{
        color: #FF9A40;
      }
      .color-1{
        color: #42D784;
      }
      .color-2{
        color: #cd413aff;
      }
    }
    .user-flex {
      display: flex;
      justify-content: space-between;
      line-height: 42px;
      margin-bottom: 16px;
      font-size: 28px;
      color: #333;
    }
    .text {
      color: #333;
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 42px;
      margin-bottom: 20px;
    }
    .img-list {
      img {
        width: 210px;
        height: 210px;
        margin: 0 16px 16px 0;
      }
      img:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
  .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;
    }
  }
}
</style>