tf-business/user_module/codeDetail/index.vue

<template>
  <view class="codeDetail">
    <capsule :showBorder="true" bgColor="#FFFFFF">
      <template v-slot:top>
        <view class="detail-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="32" color="#000"></tui-icon>
          </view>
          <view class="shop-name">{{ title }}</view>
        </view>
      </template>
    </capsule>
    <view class="seize"></view>
    <view class="container">
      <view class="code-image" :style="{ display: isShow ? 'block' : 'none' }">
        <l-painter ref="painter">
          <l-painter-view css="width:100%;backgroundColor: #FFFFFF;opacity:0;">
            <l-painter-view
              css="height:908rpx;width:100%;background:#EF530E;borderRadius:32rpx;position:relative;"
            >
              <l-painter-text
                :text="textCode"
                css="width:100%;textAlign:center;marginTop:48rpx;fontSize:40rpx;color:#FFFFFF;fontStyle:italic;fontWeight:500;"
              ></l-painter-text>
              <l-painter-text
                :text="textBig"
                css="width:100%;textAlign:center;marginTop:16rpx;fontSize:64rpx;color:#FFFFFF;fontStyle:italic;fontWeight:700;"
              ></l-painter-text>
              <l-painter-image
                :src="codeImage"
                css="width:440rpx;height:440rpx;margin:0 auto;marginTop:40rpx;"
              ></l-painter-image>
              <!-- <l-painter-text text="扫码消费有补贴" css="width:100%;position:absolute;left:0;"></l-painter-text> -->
              <l-painter-text
                :text="shopName"
                css="width:100%;height:128rpx;position: absolute;left: 0;bottom: 0;background:#FFFFFF;textAlign:center;color:#3D3D3D;fontSize:32rpx;borderRadius:0 0 32rpx 32rpx;"
              ></l-painter-text>
            </l-painter-view>
          </l-painter-view>
        </l-painter>
      </view>
      <image
        class="img-box"
        :style="{ display: !isShow ? 'block' : 'none' }"
        :src="filePath"
        :show-menu-by-longpress="true"
      />
      <view class="text">打开微信扫一扫可付款</view>
      <view class="btn" @click="saveCode">{{ textBtn }}</view>
    </view>
    <view class="illustrate" v-if="idx == 1">
      <view class="illustrate-box" @click="popupChange(1)">
        <tui-icon name="about" color="#EF530E" :size="18"></tui-icon>
        <text>商家收款码使用说明</text>
      </view>
      <view class="illustrate-box" @click="popupChange(2)">
        <tui-icon name="about" color="#EF530E" :size="18"></tui-icon>
        <text>支持支付方式</text>
      </view>
    </view>
    <tui-bottom-popup backgroundColor="#FFFFFF" :show="popupShow">
      <view class="use-illustrate" v-show="popopIdx == 1">
        <view class="use-title">商家收款码使用说明</view>
        <view class="use-text">
            商家收款码仅限入驻团蜂平台的商家使用，请勿向他人出租商家收款码，否则可能被他人用于违法犯罪活动。
        </view>
        <view class="use-btn" @click="closePopup">好的</view>
      </view>
      <view class="pay-way" v-show="popopIdx == 2">
        <view class="pay-title">支持支付方式</view>
        <view class="pay-more">
            <view class="more-box">
                <image src="@/static/image/user/pay_1.png" />
                <text>团蜂佣金</text>
            </view>
            <view class="more-box">
                <image src="@/static/image/user/pay_2.png" />
                <text>团蜂代金券</text>
            </view>
            <view class="more-box">
                <image src="@/static/image/user/pay_3.png" />
                <text>建行支付</text>
            </view>
            <view class="more-box">
                <image src="@/static/image/user/pay_4.png" />
                <text>团蜂消费金</text>
            </view>
            <view class="more-box">
                <image src="@/static/image/user/pay_5.png" />
                <text>微信支付</text>
            </view>
            <view class="more-box">
                <image src="@/static/image/user/pay_6.png" />
                <text>支付宝</text>
            </view>
        </view>
        <view class="pay-btn" @click="closePopup">好的</view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.idx = Number(option.type);
    console.log(option);
    this.shopName = option.shopName;
    // console.log(option);
    switch (this.idx) {
      case 0:
        this.title = "商家店铺码";
        this.textBtn = "下载店铺码";
        break;
      case 1:
        this.title = "商家收款码";
        break;
      case 2:
        this.title = "兑换专区码";
        this.textCode = "兑换专区";
        this.textBig = "扫码兑换商品";
        this.textBtn = "下载兑换二维码";
        break;
    }
    this.codeImage = uni.getStorageSync("codeImage");
    this.$loading.show("生成中...");
    // console.log(this.codeImage);
  },
  mounted() {
    this.$refs.painter.canvasToTempFilePathSync({
      fileType: "jpg",
      // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
      pathType: "url",
      quality: 1,
      success: (res) => {
        this.$loading.hide();
        this.filePath = res.tempFilePath;
        this.isShow = false;
      },
    });
  },
  data() {
    return {
      //  控制盒子显示隐藏
      isShow: true,
      //  店铺名称
      shopName: "",
      //  传递的第几个码
      idx: 0,
      //  头部 title
      title: "",
      //    二维码图片
      codeImage: "",
      filePath: null,
      textCode: "团蜂同城生活",
      textBig: "扫码消费有补贴",
      textBtn: "下载收款码",
      //    控制弹框
      popupShow: false,
      popopIdx:1,
    };
  },
  methods: {
    //  下载收款码
    saveCode() {
      uni.saveImageToPhotosAlbum({
        filePath: this.filePath,
        success: function() {
          console.log("save success");
        },
      });
    },
    //  点击弹框
    popupChange(val){
        this.popupShow = true;
        this.popopIdx = val
        console.log(this.popopIdx);
    },
    //  关闭弹框
    closePopup(){
        this.popupShow = false
    },
    backClick() {
      uni.navigateBack();
    },
  },
  //    页面卸载清除缓存
  onUnload() {
    uni.removeStorageSync("codeImage");
  },
};
</script>

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