wechat/src/pages/user/receive/index.vue

<template>
  <div class="mainPage" v-if="show">
    <!-- <div class="residue">
      <i class="iconfont icon-gantanhao"></i>
      <span>仅剩{{data.TotalCount - data.UsedCount}}张券可以领取！</span>
    </div>
    <div class="logo">
      <img :src="logo" alt="">
    </div> -->
    <div class="banner"  v-if="!video">
      <img :src="data.Images[0].CardImageUrl" alt="" width="100%" height="100%" v-if="type === 'card'">
      <img :src="data.Images[0].CouponImageUrl" alt="" width="100%" height="100%" v-if="type === 'coupon'">
    </div>
    <div class="content">
      <div class="title" v-if="$route.query.type === 'card'">{{data.CardName}}</div>
      <div class="title" v-else>{{data.CouponName}}</div>
      <div class="video" v-if='video'>
        <video :src="data.VideoUrl" width="100%" height="100%"></video>
      </div>
      <div class="text">
        <div>
          <i class="icon-shuoming iconfont"></i>
          <span>卡券使用说明</span>
        </div>
        <pre v-if="$route.query.type === 'card'">{{data.Share.CardUseInstruction}}</pre>
        <pre v-else>{{data.Share.UseInstruction}}</pre>
      </div>
      <div class="text">
        <div>
          <i class="icon-kaquan iconfont"></i>
          <span>卡券有效期</span>
        </div>
        <pre>有效期至{{toolClass.dateFormat(data.EndDate,'yyyy-MM-dd')}}，请在有效期结束前使用， 过期作废；</pre>
      </div>
      <div class="text">
        <div>
          <i class="icon-dingwei iconfont"></i>
          <span>服务网点</span>
        </div>
        <pre>{{data.address}}</pre>
      </div>
      <div class="submit" v-if="button" @click="receive">确认领取</div>
      <div class="submit" v-else>点击右上角分享给客户</div>
    </div>
  </div>
</template>

<script>
import wxsdk from '../../../util/share'
import logo from '../../../common/icon/logoTop.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapShareState, mapActions: mapShareActions } = createNamespacedHelpers('share')
const { mapState: mapAppState, mapActions: mapAppActions } = createNamespacedHelpers('app')

export default {
  data () {
    return {
      logo,
      video: true,
      button: true,
      show: false,
      type: '',
      data: {}
    }
  },
  computed: {
    ...mapShareState({
      cardShare: x => x.cardShare,
      couponShare: x => x.couponShare
    }),
    ...mapAppState({
      caseList: x => x.CaseList
    })
  },
  created () {
    this.data = {}
    if (this.$route.params) {
      let that = this
      Object.keys(this.$route.params).forEach(function (key) {
        that.$route.query[key] = that.$route.params[key]
      })
    }

    this.type = this.$route.query.type

    if (this.$route.query.sharetype === 'share') {
      this.button = false
    }
    this.getCaseList().then(() => {
      this.init()
    })
  },
  methods: {
    ...mapShareActions(['getCardShare', 'getCouponShare', 'setCardShare', 'setCouponShare']),
    ...mapAppActions(['getCaseList']),
    init () {
      if (this.$route.query.type === 'card') {
        this.getCardShare({ id: this.$route.query.id }).then(() => {
          this.data = this.cardShare.Card
          this.data.address = this.caseList.filter(x => x.CaseId === this.data.CaseId)[0].CaseAddress
          if (!this.data.VideoUrl) {
            this.video = false
          }
          this.show = true
          this.sdk(this.data.Share.CardShareInfo)
        })
      } else {
        this.getCouponShare({ id: this.$route.query.id }).then(() => {
          this.data = this.couponShare.coupon
          this.data.address = this.caseList.filter(x => x.CaseId === this.data.CaseId)[0].CaseAddress
          if (!this.data.VideoUrl) {
            this.video = false
          }
          this.show = true
          this.sdk(this.data.Share.CouponShareInfo)
        })
      }
    },
    receive () {
      if (this.$route.query.type === 'card') {
        this.setCardShare({ id: this.$route.query.id, salesid: this.$route.query.salesid, serialcode: this.$route.query.random }).then(() => {
          this.$router.push({ name: 'receiveResults', query: { type: 'success', text: '卡券' } })
        }).catch((err) => {
          this.$router.push({ name: 'receiveResults', query: { type: 'fail' } })
          console.log(err)
        })
      } else {
        this.setCouponShare({ id: this.$route.query.id, salesid: this.$route.query.salesid, serialcode: this.$route.query.random }).then(() => {
          this.$router.push({ name: 'receiveResults', query: { type: 'success', text: '优惠券' } })
        }).catch((err) => {
          this.$router.push({ name: 'receiveResults', query: { type: 'fail' } })
          console.log(err)
        })
      }
    },
    sdk (info) {
      let logo, title
      if (this.$route.query.type === 'card') {
        logo = this.data.Images[0].CardImageUrl + '?x-oss-process=style/wxicon'
        title = this.data.CardName
      } else {
        logo = this.data.Images[0].CouponImageUrl + '?x-oss-process=style/wxicon'
        title = this.data.CouponName
      }
      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
        title: title,
        desc: info,
        link: `${window.location.origin}${window.location.pathname}#/receiveShared/${this.$route.query.id}/${this.$route.query.salesid}/${this.$route.query.type}/${this.$route.query.random}/receive`,
        thu_image: logo
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';
</style>