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">
          <image class="" :src="codeImage" />
          <u-qrcode
            v-show="false"
            ref="code"
            canvas-id="code"
            :value="shopText"
            :size="size"
            :options="{
              foreground,
            }"
            @complete="complete($event,'code')"
          ></u-qrcode>
          <!-- <canvas canvas-id="shopCode"></canvas> -->
        </view>
        <view class="code-logo">
          <image class="" src="@/static/image/user/logo.png" />
        </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 class="code-logo">
          <image class="" src="@/static/image/user/logo.png" />
        </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">
          <image class="" :src="exchangeImage" />
          <u-qrcode
            ref="exchangeCode"
            v-show="false"
            canvas-id="exchangeCode"
            :value="exchangeText"
            :size="size"
            :options="{
              foreground,
            }"
            @complete="complete($event,'exchangeCode')"
          ></u-qrcode>
          <!-- <canvas canvas-id="exchangeCode"></canvas> -->
        </view>
        <view class="code-logo">
          <image class="" src="@/static/image/user/logo.png" />
        </view>
      </view>
    </view>
    <view class="qrcode"> </view>
  </view>
</template>

<script>
// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中
// import drawQrcode from "@/static/js/qrcode.js";
import { getShopQrcode, getloadImage } from "@/config/index.js";
export default {
  created() {
    this.getCode();
  },
  beforeMount() {
    //  获取本地存储的数据
    this.shopInfo = uni.getStorageSync("shopInfo");
    const { shopId, shopName, shopLogo } = this.shopInfo;
    this.shopText = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`;
    this.foreground = {
      image: {
        src: shopLogo,
        width: 25,
        height: 25,
        align: ["center", "center"],
        anchor: [0, 0],
      },
    };
    this.exchangeText = `https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${shopName}`;
  },
  data() {
    return {
      shopInfo: {},
      payCode: "",
      // 店铺名称
      shopName:"",
      //  店铺二维码
      shopText: "",
      //  兑换专区二维码
      exchangeText: "",
      size: 100,
      //  图片参数
      foreground: {},
      codeImage: "",
      exchangeImage: "",
    };
  },
  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(
            "codeImage",
            this.codeImage
          );
          break;
        case 1:
          uni.setStorageSync("codeImage", this.payCode);
          break;
        case 2:
          uni.setStorageSync(
            "codeImage",
            this.exchangeImage
          );
          break;
      }
      //  mixin 中的跳转
      this.navigateTo(`/user_module/codeDetail/index?type=${type}&shopName=${this.shopInfo.shopName}`);
    },
    complete(e,val) {
      if (e.success) {
        console.log("生成成功", e);
        this.$refs[val].toTempFilePath({
          success: (res) => {
            if (val == "exchangeCode") {
              this.exchangeImage = res.tempFilePath;
            } else if (val == "code") {
              this.codeImage = res.tempFilePath;
            }
          },
        });
      } else {
        console.log("生成失败");
      }
    },
  },
};
</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;
        }
      }
      .code-logo {
        position: absolute;
        right: 0;
        bottom: 0;
        image {
          width: 354rpx;
          height: 212rpx;
        }
      }
      &: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>