index.vue

<template>
  <div class="full-page">
    <div class="container">
      <div class="detail-card" v-if="voucherData">
        <div class="head">
          <span class="before-dot"></span>
          <span class="after-dot"></span>
          <div class="picture">
            <div class="round">
              <mt-spinner v-show="voucherData.logoLoading" type="fading-circle" color="#43d1be"></mt-spinner>
              <img v-show="!voucherData.logoLoading" :src="voucherData.merchantsLogo" class="full-width"/>
            </div>
          </div>
          <div class="title">{{voucherData.deptName}}</div>
          <!-- <div class="tool">
            <img src="../../assets/images/icon-qr-code.png" class="full-width"/>
          </div> -->
        </div>
        <div class="body">
          <div class="big-title" v-if="voucherType === '2'">免费<span class="unit">价值{{voucherData.cost}}元</span></div>
          <div class="big-title" v-else>{{voucherData.cost}}<span class="unit">元</span></div>
          <div class="text-center">{{voucherData.voucherName}}</div>
          <div class="qrcode-block">
            <div class="qrcode-inner">
              <div class="qrcode-frame">
                <mt-spinner v-show="qrcodeLoading" type="fading-circle" color="#43d1be"></mt-spinner>
                <div id="qrcode"></div>
              </div>
            </div>
            <h4 class="text-danger text-center">请在使用时将券码出示给医生</h4>
          </div>
          <div class="table">
            <div class="tr">
              <div class="td label">领取人：</div>
              <div class="td text-left">{{voucherData.userName}}</div>
            </div>
            <div class="tr">
              <div class="td label">可用时间：</div>
              <div class="td text-left">{{voucherData.useStartTime && voucherData.useStartTime !== "" ? voucherData.useStartTime.split(" ")[0] : ""}} - {{voucherData.useEndTime && voucherData.useEndTime !== "" ? voucherData.useEndTime.split(" ")[0]:""}}</div>
            </div>
            <div class="tr">
              <div class="td label">服务内容：</div>
              <div class="td text-left">{{voucherData.content}} </div>
            </div>
            <div class="tr">
              <div class="td label">使用须知：</div>
              <div class="td text-left">{{voucherData.useNotice}} </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="table">
            <div class="tr">
              <div class="td" v-for="(item, index) in voucherBtnData" :key="index">
                <div class="table-btn" v-if="voucherBtnData.length > 3" :class="voucherBtnData.length > 3?'vertical':'transverse'" @click="handleClick(item.url)"> <!-- transverse：横向 vertical：垂直 -->
                  <div class="cell icon">
                    <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner>
                    <img v-show="!item.iconLoading" :src="item.picture"/>
                  </div>
                  <div class="cell title">{{item.title}}</div>
                </div>
                <div class="table-btn" v-if="voucherBtnData.length == 2" :class="voucherBtnData.length == 2 && index === 0?'transverse pull-right':'pull-left transverse'" @click="handleClick(item.url)"> <!-- transverse：横向 vertical：垂直 -->
                  <div class="cell icon">
                    <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner>
                    <img v-show="!item.iconLoading" :src="item.picture"/>
                  </div>
                  <div class="cell title">{{item.title}}</div>
                </div>
                <div class="table-btn transverse" v-if="voucherBtnData.length == 1" @click="handleClick(item.url)"> <!-- transverse：横向 vertical：垂直 -->
                  <div class="cell icon">
                    <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner>
                    <img v-show="!item.iconLoading" :src="item.picture"/>
                  </div>
                  <div class="cell title">{{item.title}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="block m-t">
        <div class="spinner" v-show="contentMessageSpinner"><mt-spinner type="fading-circle" color="#43d1be" :size="40"></mt-spinner></div>
        <ul>
          <li v-for="(item, index) in contentData" :key="index" @click="goToContent(item.imprId)">
            <ContentItem :data="item"></ContentItem>
          </li>
        </ul>
        <div v-show="contentMessageVisible" class="message-block"><i class="glyphicon glyphicon-info-sign"></i> 暂无相关健康知识！</div>
      </div>
      <!-- 扫码核销 -->
      <!-- <div class="model" v-show="qrCodeVisible">
        <div class="model-body">
          <div class="title">医生扫描券码即可服务</div>
          <div id="qrcode"></div>
        </div>
        <div class="text-center model-close">
          <i class="glyphicon glyphicon-remove-circle" @click="qrCodeVisible=false"></i>
        </div>
      </div> -->

      <!-- 小贴士 -->
      <div class="popup-model" v-if="tipsPopupVisible">
        <div class="body">
          <!-- <p class="label-title">产检时间</p>
          <p>{{tipsData.tipsTime}}</p>
          <p class="label-title">产检项目</p>
          <p>{{tipsData.tipsTitle}}</p>
          <p class="label-title">产检贴士</p> -->
          <p v-html="tipsData.tipsDetailed"></p>
          <div class="footer">
            <div style="padding: 10px;"><button class="btn-default btn-block" @click="tipsPopupVisible=false">确认</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVoucherInfoById, getButtonByVoucherId, getContentListByMakeId, getQrCodeByVoucherId, getTipsByVoucherId } from '@/api/apply/apply'
import { imageBase64 } from '@/api/admin/admin'
import QRCode from 'qrcodejs2'
import ContentItem from '@/components/contentItem'
// import { noscroll, renewscroll } from '@/util/index'

export default {
  name: 'detail',
  data () {
    return {
      voucherId: this.$route.query.voucherId,
      makeId: this.$route.query.makeId,
      voucherType: this.$route.query.voucherType,
      voucherData: null,
      voucherBtnData: null,
      contentData: [], // 内容流数据
      contentMessageSpinner: true, // 内容流加载状态，默认显示
      contentMessageVisible: false, // 内容流文字提示，默认不显示，接口返回数组为0显示
      qrCodeVisible: true, // 二维码显示状态
      qrcodeLoading: true,
      tipsPopupVisible: false, // “小贴士”弹窗显示状态
      tipsData: { // “小贴士”数据
        tipsTime: '无',
        tipsTitle: '无',
        tipsDetailed: '无'
      }
    }
  },
  created () {
    this.getVoucherInfoByIdFn() // 根据voucherId查询该券详情
    this.getContentListByMakeIdFn() // 根据券makeId查询内容流
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
    ContentItem
  },
  methods: {
    getVoucherInfoByIdFn () { // 根据voucherId获取该券信息
      if (this.voucherId) {
        getVoucherInfoById(this.voucherId).then(res => {
          if (res.code === 0) {
            let data = res.data
            if (data.merchantsLogo && data.merchantsLogo !== '') {
              this.imgBase64(data.merchantsLogo).then(res => { // 社区logo图片转换base64插入图片
                data.merchantsLogo = res
                data.logoLoading = false // 图片加载完成标识
              })
            }
            data.logoLoading = true // 图片加载中标识
            this.voucherData = data
            this.foreachButtons() // 配置按钮图标
            this.qrCodePopup() // 获取券的核销二维码
            console.log('getVoucherInfoByIdFn' + this.voucherData.merchantsLogo)
          }
        }).catch((error) => {
          this.$toast({
            message: error.message,
            position: 'center',
            duration: 3000
          })
        })
      } else {
        this.$toast({
          message: '券id不能为空',
          position: 'center',
          duration: 3000
        })
      }
    },
    foreachButtons () { // 按钮配置接口，多个按钮图标转换base64，插入对应对应按钮图标
      let that = this
      getButtonByVoucherId(this.voucherId).then(res => {
        if (res && res.msg === 'success') {
          that.voucherBtnData = res.data
          that.voucherBtnData.forEach(function (item, index) {
            item.iconLoading = true // 图片加载中标识
            that.imgBase64(item.picture).then(res => {
              let btn = that.voucherBtnData[index]
              btn.iconLoading = false // 图片加载完成标识
              btn.picture = res
            })
          })
        }
      }).catch((error) => {
        console.log(error.message)
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    handleClick (type) { // 券配置按钮点击
      console.log(type)
      switch (type) {
        case 'popup:code':
          this.qrCodePopup() // 核销二维码
          break
        case 'jump:report':
          this.reportLink()
          break
        case 'popup:tips':
          this.tipsPopup() // 小贴士
          break
        case 'jump:appraise':
          this.commentLink()
          break
      }
    },
    qrCodePopup () { // 核销二维码弹窗
      console.log(this.voucherId)
      // document.getElementById('qrcode').innerHTML = ''
      getQrCodeByVoucherId(this.voucherId).then(res => {
        this.qrcodeLoading = false
        if (res && res.msg === 'success') {
          // this.qrCodeVisible = true
          let qrcode = new QRCode('qrcode', {
            width: 200,
            height: 200,
            // text: '', // 二维码地址
            colorDark: '#000',
            colorLight: '#fff'
          })
          qrcode.clear()
          if (res.data) {
            qrcode.makeCode(JSON.stringify(res.data))
          } else {
            this.qrCodeVisible = false
          }
        } else {
          this.qrCodeVisible = false
          this.$toast({
            message: '获取服务券二维码失败',
            position: 'center',
            duration: 3000
          })
        }
      }).catch((error) => {
        console.log(error.message)
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    tipsPopup () { // 小贴士
      this.$Indicator.open()
      getTipsByVoucherId(this.voucherId).then(res => {
        this.$Indicator.close()
        if (res && res.msg === 'success') {
          this.tipsPopupVisible = true
          this.tipsData = res.data
          this.tipsData.tipsDetailed = this.tipsData.tipsDetailed.replace(/[\r\n]/g, '<br>')
        } else {
          this.$toast({
            message: '该服务券还没有小贴士噢！',
            position: 'center',
            duration: 3000
          })
        }
      }).catch((error) => {
        console.log(error.message)
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    reportLink () {
      this.$toast({
        message: '建设中',
        position: 'center',
        duration: 3000
      })
    },
    commentLink () { // 评价
      console.log(this.voucherId)
      this.$router.push({
        path: '/comment/comment',
        query: {
          voucherId: this.voucherId
        }
      })
    },
    // showTipsPopup () {
    //   this.tipsPopupVisible = true
    //   noscroll()
    // },
    // hideTipsPopup () {
    //   this.tipsPopupVisible = false
    //   renewscroll()
    // },
    getContentListByMakeIdFn () {
      let params = {
        curPage: 1,
        pageSize: 10
      }
      this.contentMessageSpinner = true
      getContentListByMakeId(this.makeId, params).then(res => {
        this.contentMessageSpinner = false
        if (res.code === 0) {
          this.contentData = res.data.records
          if (this.contentData.length <= 0) {
            this.contentMessageVisible = true
          } else {
            this.contentMessageVisible = false
          }
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    imgBase64 (url) {
      return new Promise((resolve, reject) => {
        imageBase64(url).then(res => {
          if (res.code === 0) {
            resolve(res.data)
          }
        }).catch((error) => {
          reject(error)
          console.log(error)
        })
      })
    },
    goToContent (imprId) { // 跳转至知识详情页
      this.$router.push({
        path: '/content',
        query: {
          imprId: imprId
        }
      })
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #43d1be;
  }
  .detail-card {
    margin-bottom: 1em;
  }
  .detail-card .body{
    font-size: 1em;
  }
  .detail-card .body .table .tr > .td {
    vertical-align: top;
  }
  .detail-card .body .table .tr > .td.label{
    width: 5em;
    font-size: 1em;
    font-weight:bold;
    text-align: right;
  }
  .detail-card .body .qrcode-block {
    margin: 2em 0;
  }
  .detail-card .body .qrcode-block h4{
    font-size: 1.2em;
  }
  .detail-card .body .qrcode-inner {
    margin-bottom: 1em;
    text-align: center;
  }
  .detail-card .body .qrcode-inner .qrcode-frame{
    display: inline-block;
    width: 220px;
    height: 220px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 16px rgb(221, 221, 221, 1);
  }
  .detail-card .body .qrcode-inner #qrcode {
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  /* .detail-card .body .qrcode-inner #qrcode > img:nth-child(2) {
    display: none;
  } */
</style>

<style>
  .detail-card .mint-spinner-fading-circle{
    width: 5em !important;
    height: 5em !important;
    margin: 4em auto 0 auto;
  }
</style>