hospital-accompaniment-wechat/components/voucherDetails/index.vue

<template>
  <u-popup :show="popupShow" bgColor="transparent" mask="true" :safeAreaInsetBottom="false" mask-close-able="true" @close="close">
    <view class="popupBox">
      <view class="popupBox_title">
        <image class="popupBox_title_img13" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img13.png" mode="" />
        <image class="popupBox_title_img12" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img12.png" mode="" />
        <view>
          <view class="popupBox_title_l">卡券详情
            <text>凭【核销码】可进入</text>
          </view>
        </view>
      </view>
      <view class="popupBox_content">
        <view class="">
          <view class="list_info">
            <image :src="details.businessProductImage||shop.businessImage" mode="" />
            <view class="list_info_r">
              <view class="list_info_r_title">{{details.businessProductName}}</view>
              <view class="list_info_r_hint">{{details.costIncluded||shop.productDataJosn.costIncluded}}</view>
            </view>
          </view>
          <view class="popupBox_content_date">
            有效期：
            <text>{{details&&details.expireTime?details.expireTime.replace(/-/g,'.'):''}}之前可用</text>
          </view>
          <view class="popupBox_content_card">
            <view class="popupBox_content_card_item">
              <view>
                卡券号：
                <text>{{details.couponCode}}</text>
                <view class="copy" @click="copyOrderNo()">
                  <text class="iconfont icon-fuzhi"></text>
                </view>
              </view>
            </view>
            <swiper class="swiper" :current="currentIndex" :autoplay="false" @change="swiperChange" v-if="popupShow">
              <swiper-item v-for="(v,i) in list" :key="i">
                <view class="popupBox_content_card_item">
                  <view class="popupBox_content_card_c">
                    <view class="popupBox_content_card_item_l">核销码</view>
                    <view class="popupBox_content_card_item_r">
                      <!-- <canvas :id="'qrcode'+i" :canvas-id="'qrcode'+i" style="width: 200px;height: 200px;"></canvas> -->
                      <view class="qrimg">
                        <tki-qrcode ref="qrcode" :val="details.couponCode" onval loadMake :size="200" unit="px" />
                      </view>
                      <image v-if="v.couponStatus!=0" class="popupBox_content_card_item_r_used" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img17.png" mode="" />
                      <view v-if="v.couponStatus!=0" class="shade"></view>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
            <view class="arrow-left" v-if="currentIndex>0" @click="currentIndex>0?currentIndex--:0"> <u-icon name="arrow-left" color="#666666" size="28"></u-icon></view>
            <view class="arrow-right" v-if="currentIndex<list.length-1" @click="(currentIndex<list.length-1)?currentIndex++:0"> <u-icon class="arrow-right" name="arrow-right" color="#666666" size="28"></u-icon></view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
// import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
  components: { tkiQrcode },
  data () {
    return {
      popupShow: false,
      details: {},
      shop: {},
      // list: [],
      currentIndex: 0
    }
  },
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    }
  },
  methods: {
    open (list, index, shop) {
      // open (val, index, shop) {
      // this.list = list;
      this.shop = shop;
      this.currentIndex = index;
      this.details = this.list[index];
      this.popupShow = true;
      // this.initCode(index)
    },
    initCode (index) {
      setTimeout(() => {
        var qr = new UQRCode();
        // 设置二维码内容
        qr.data = this.details.couponCode;
        // 设置二维码大小，必须与canvas设置的宽高一致
        qr.size = 200;
        // 调用制作二维码方法
        qr.make();
        // 获取canvas上下文
        var canvasContext = uni.createCanvasContext('qrcode' + index, this); // 如果是组件，this必须传入
        // 设置uQRCode实例的canvas上下文
        qr.canvasContext = canvasContext;
        // 调用绘制方法将二维码图案绘制到canvas上
        qr.drawCanvas();
      }, 200)
    },
    close () {
      this.popupShow = false;
      this.$emit('close');
    },
    swiperChange (e) {
      this.currentIndex = e.detail.current;
      this.details = this.list[this.currentIndex]
      this.initCode(this.currentIndex)
    },
    copyOrderNo () {
      uni.setClipboardData({
        data: String(this.details.couponCode),
        success: () => {
          uni.$u.toast("复制成功");
        },
      });
    }
  }
}
</script>

<style lang='scss' scoped>
.popupBox {
  position: relative;
  .popupBox_title {
    width: 100%;
    position: absolute;
    top: -93rpx;
    z-index: 10;
    > .popupBox_title_img13 {
      width: 720rpx;
      height: 204rpx;
    }
    .popupBox_title_img12 {
      width: 195rpx;
      height: 222rpx;
      position: absolute;
      top: -59rpx;
      right: 27rpx;
    }
    > view {
      display: flex;
      align-items: center;
      padding: 75rpx 0 0 30rpx;
      position: absolute;
      top: 0;
      left: 0;
      .popupBox_title_l {
        font-size: 48rpx;
        color: #ffffff;
        font-family: FZCuYuan-M03;
        margin-right: 100rpx;
        text {
          font-size: 32rpx;
          color: #ffffff;
          display: inline-block;
          margin-left: 20rpx;
        }
      }
      .popupBox_title_r {
        .popupBox_title_r_l {
          font-size: 26rpx;
          color: #ffffff;
          text-decoration: line-through;
        }
        .popupBox_title_r_r {
          font-size: 32rpx;
          color: #ffffff;
          font-family: FZCuYuan-M03;
          text-decoration: none;
        }
      }
    }
  }
  .popupBox_content {
    padding: 60rpx 0rpx 0;
    background: linear-gradient(180deg, #c90700 0%, #ffe8e6 58%, #ffffff 32%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background-size: 100% 1900rpx;
    background-position-y: -300rpx;
    > view {
      background: linear-gradient(180deg, #ffedec 0%, #ffffff 39%);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      padding: 50rpx 0rpx 20rpx;
      position: relative;
      z-index: 11;
    }
    .list_info {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e6e6e6;
      padding-bottom: 30rpx;
      margin: 0 50rpx;
      image {
        width: 154rpx;
        height: 154rpx;
        background: rgba(0, 0, 0, 0);
        border-radius: 12rpx;
        margin-right: 24rpx;
        flex-shrink: 0;
      }
      .list_info_r {
        .list_info_r_title {
          font-size: 26rpx;
          color: #242424;
          font-family: FZCuYuan-M03;
          padding-top: 10rpx;
        }
        .list_info_r_hint {
          font-size: 24rpx;
          color: #1a1a1a;
          margin-top: 10rpx;
        }
      }
    }
    .popupBox_content_date {
      font-size: 26rpx;
      color: #1a1a1a;
      padding: 30rpx 50rpx 40rpx;
      border-bottom: 1rpx solid #e6e6e6;
      text {
        font-size: 26rpx;
        color: #666666;
      }
    }
    .popupBox_content_card {
      border-top: 1rpx solid #e6e6e6;
      padding: 44rpx 50rpx;
      position: relative;
      .arrow-left {
        position: absolute;
        top: 50%;
        left: 75rpx;
      }
      .arrow-right {
        position: absolute;
        top: 50%;
        right: 75rpx;
      }
      .swiper {
        height: 530rpx;
      }
      .popupBox_content_card_item {
        background: linear-gradient(180deg, #fb2715, #ff0901);
        border-radius: 30rpx;
        padding: 3rpx;
        .copy {
          display: inline-block;
          margin-left: 30rpx;
        }
        > view {
          font-size: 38rpx;
          color: #1a1a1a;
          font-family: FZCuYuan-M03;
          text-align: center;
          background: #ffffff;
          border-radius: 30rpx;
          padding: 40rpx 0;
        }
        .popupBox_content_card_item_l {
          width: 60rpx;
          height: 402rpx;
          background: #666666;
          border: 1rpx solid #e6e6e6;
          border-radius: 10rpx;
          box-sizing: border-box;
          color: #ffffff;
          display: flex;
          align-items: center;
        }
        .popupBox_content_card_item_r {
          font-size: 0;
          position: relative;
          image {
            width: 402rpx;
            height: 402rpx;
          }
          .popupBox_content_card_item_r_used {
            width: 179rpx;
            height: 179rpx;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 999;
          }
          .shade {
            width: 202px;
            height: 202px;
            background: rgba(204, 204, 204, 0.6);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
          }
        }
        .popupBox_content_card_c {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>