tf-business/user_module/merchantCode/index.vue

<template>
  <view class="merchantCode">
    <view class="code-list">
      <view class="code-item" @click="goCodeDetail(0)">
        <view class="code-illustrate">
          <image class="" :src="shopInfo.shopLogo" />
          <text>商家店铺码</text>
        </view>
        <view class="code-img">
          <canvas canvas-id="shopCode"></canvas>
        </view>
      </view>
      <view class="code-item" @click="goCodeDetail(1)">
        <view class="code-illustrate">
          <image class="" :src="shopInfo.shopLogo" />
          <text>商家收款码</text>
        </view>
        <view class="code-img">
          <image class="" :src="payCode" />
        </view>
      </view>
      <view class="code-item" @click="goCodeDetail(2)">
        <view class="code-illustrate">
          <image class="" :src="shopInfo.shopLogo" />
          <text>兑换专区码</text>
        </view>
        <view class="code-img">
          <canvas canvas-id="exchangeCode"></canvas>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from "@/static/js/qrcode.js";
import { getShopQrcode } from "@/config/index.js";
export default {
  created() {
    this.getCode();
  },
  beforeMount() {
    //  获取本地存储的数据
    this.shopInfo = uni.getStorageSync("shopInfo");
    const { shopId, shopName } = this.shopInfo;
    //  生成店铺码
    this.setCode(
      `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`,
      "shopCode"
    );
    //  生成兑换码
    this.setCode(
      `https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${shopName}`,
      "exchangeCode"
    );
  },
  data() {
    return {
      shopInfo: {},
      payCode: "",
    };
  },
  methods: {
    async getCode() {
      //  获取收款二维码
      let res = await getShopQrcode({ codeType: 1, state: 1 });
      this.payCode = res.data.shopCode;
    },
    // 生成二维码
    setCode(url, id) {
      drawQrcode({
        width: 100,
        height: 100,
        canvasId: id,
        // ctx: wx.createCanvasContext('myQrcode'),
        text: url,
      });
    },
    goCodeDetail(type){
        switch(type){
            case 0:
            uni.setStorageSync('code',`https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${this.shopInfo.shopId}`)
            break;
            case 1:
            uni.setStorageSync('code',this.payCode)
            break;
            case 2:
            uni.setStorageSync('code',`https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${this.shopInfo.shopId}&shopName=${this.shopInfo.shopName}`)
            break;
        }
        //  mixin 中的跳转
        this.navigateTo(`/user_module/codeDetail/index?type=${type}`);
    }
  },
};
</script>

<style lang="scss" scoped>
.merchantCode {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);
  padding-top: 10rpx;
  box-sizing: border-box;
  .code-list {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    .code-item {
      width: 100%;
      margin-top: 32rpx;
      border-radius: 16rpx;
      height: 250rpx;
      position: relative;
      .code-illustrate {
        position: absolute;
        top: 28rpx;
        left: 28rpx;
        @include flex(center, null, 22rpx);
        image {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          border: 4rpx solid #ffffff;
        }
        text {
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 700;
        }
      }
      .code-img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 58rpx;
        /* border: 6rpx solid rgba(255, 255, 255, 0.3); */
        image {
          width: 200rpx;
          height: 200rpx;
        }
        canvas {
          width: 200rpx;
          height: 200rpx;
        }
      }
      &:nth-of-type(2) {
        .code-img {
          border: 0;
        }
      }
      &:nth-of-type(1) {
        background: linear-gradient(91deg, #24c4ef 0%, #46a8f7 99%);
        box-shadow: 0px 0px 10px 0px rgba(68, 169, 246, 0.5);
      }
      &:nth-of-type(2) {
        background: linear-gradient(91deg, #fc8857 0%, #fe5225 99%);
        box-shadow: 0px 0px 10px 0px rgba(254, 83, 38, 0.5);
      }
      &:nth-of-type(3) {
        background: linear-gradient(91deg, #7adbcf 0%, #46c9a3 99%);
        box-shadow: 0px 0px 10px 0px rgba(71, 201, 164, 0.5);
      }
    }
  }
}
</style>