caimei-distribution-www/src/views/ins-intention-report/detail.vue

<template>
  <div class="detail">
    <nav-bar :title="`${auditStatus}/${lockStatus}详情`" @click-left="$router.back()" />
    <order-report-card :odRpCd="resultInfo.cmReportingClub" :isTabImg="true" />
    <div class="label">上传凭证：</div>
    <div class="upload-img">
      <van-image
        v-for="(i, index) in resultInfo.cmRelatedImageList"
        :key="index"
        :src="i.image"
      />
    </div>
    <div class="label">
      备注：<span>{{ resultInfo.remarks || "无" }}</span>
    </div>
    <div class="label">
      审核状态：<span>{{ auditStatus }}</span>
    </div>
    <div class="label">
      锁定状态：<span style="color: #ff9100">{{ lockStatus }}</span>
    </div>
    <div class="label">
      报备时间：<span>{{ resultInfo.createTime }}</span>
    </div>
    <div class="label">
      已报备人数：<span v-if="resultInfo.cmReportingClub"
        >{{ resultInfo.cmReportingClub.distributionCount || 0 }}人</span
      >
    </div>
    <div
      class="detail-btn"
      v-if="
        resultInfo.cmReportingClub &&
        isReportAuditStatus(resultInfo.auditStatus) && !isReportDeal(resultInfo.cmReportingClub.orderStatus)
      "
    >
      <van-button color="#FF5B00" @click="handlerPlaceOrder(resultInfo.cmReportingClub)">下单</van-button>
      <van-button style="color: #ff9100" @click="shareOrderConfirm" v-if="!isReportLock(resultInfo.cmReportingClub.lockStatus)"
        >分享采购意向确认</van-button
      >
    </div>
  </div>
</template>

<script>
import { insIntentionReportDetail } from '@/api/userApi/ins-intention-report'
import reportStatus from './mixins/index'
import { Toast } from 'vant'
export default {
  mixins: [reportStatus],
  data () {
    return {
      resultInfo: {}
    }
  },
  computed: {
    lockStatus () {
      return this.isLock * 1 === 1 ? '已锁定' : '未锁定'
    },
    isLock () {
      if (this.resultInfo.cmReportingClub) { return this.resultInfo.cmReportingClub.lockStatus }
      return 0
    },
    isAudit () {
      if (this.resultInfo.cmReportingClub) return this.resultInfo.auditStatus
      return 0
    },
    id () {
      return this.$route.query.id
    },
    auditStatus () {
      return this.isAudit * 1 === 1
        ? '待审核'
        : this.isAudit * 1 === 2
          ? '审核通过'
          : '审核失败'
    }
  },
  mounted () {
    this.insIntentionReportDetail()
  },
  methods: {
    async insIntentionReportDetail () {
      const data = await insIntentionReportDetail({ id: this.id })
      this.resultInfo = data
    },
    shareOrderConfirm () {
      this.initAppMessageShareData()
      Toast.success('请点击右上角...分享微信好友')
    },
    handlerPlaceOrder ($event) {
      this.$router.push(`/goods-detail?productId=${$event.productId}&typeId=0&isLock=1&cId=${$event.id}`)
    },
    // 分享当前页面
    initAppMessageShareData () {
      this.$wxReady((wx) => {
        // 需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: '商品详情', // 分享标题
          desc: '商品详情', // 分享描述
          link: `https://sell-b.caimei365.com/#/intention-confirm?id=${this.resultInfo.cmReportingClub.id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: 'https://static.caimei365.com/app/mini-distribution/qrcode.png', // 分享图标
          fail: () => {
            this.initAppMessageShareData()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  background: #fff;
  padding-bottom: 34vw;
}
.reportCard {
  padding: 5.3vw 3.2vw 0 3.2vw;
  ::v-deep .line {
    display: none;
  }
}
.label {
  margin: 4.6vw 0 0 3.5vw;
  font-size: 4vw;
  color: #333333;
  span {
    color: #333333;
    font-weight: 600;
  }
}
.upload-img {
  display: flex;
  flex-wrap: wrap;
  margin: 2.3vw 0 0 3.5vw;
  ::v-deep .van-image {
    width: 23vw;
    height: 23vw;
    margin-right: 3vw;
    border-radius: 1.2vw;
  }
}
.detail-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  ::v-deep .van-button {
    width: 86.4vw;
    height: 13vw;
    margin-bottom: 3.6vw;
    border: 1px solid #ff5b00;
  }
}
</style>