tf-business/user_module/codeDetail/index.vue

<template>
  <view
    class="codeDetail"
    :style="{
      background: colorList[idx].bgColor,
      boxShadow: colorList[idx].shadow,
    }"
  >
    <capsule :showBorder="true" bgColor="transparent">
      <template v-slot:top>
        <view class="shop-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="36" color="#FFFFFF"></tui-icon>
          </view>
          <view class="shop-name">{{ title }}</view>
        </view>
      </template>
    </capsule>
    <view class="code-container">
      <view class="top-img">
        <image class="" :src="shopInfo.shopLogo" />
      </view>
      <view class="code-img">
        <image class="" :src="payCode" :show-menu-by-longpress="true" />
        <canvas canvas-id="code" id="code"></canvas>
        <!-- <template v-if="idx == 1">
         
        </template>
        <template v-else>
          
        </template> -->
      </view>
      <view class="code-text">长按保存二维码</view>
    </view>
  </view>
</template>

<script>
import drawQrcode from "@/static/js/qrcode.js";
export default {
  created() {
    //  获取本地info
    this.shopInfo = uni.getStorageSync("shopInfo");
  },
  onLoad(option) {
    this.idx = Number(option.type);
    switch (this.idx) {
      case 0:
        this.title = "商家店铺码";
        this.setCode(uni.getStorageSync("code"), "code");
        break;
      case 1:
        this.title = "商家收款码";
        this.payCode = uni.getStorageSync("code");
        break;
      case 2:
        this.title = "兑换专区码";
        this.setCode(uni.getStorageSync("code"), "code");
        break;
    }
  },
  data() {
    return {
      idx: 0,
      title: "",
      shopInfo: {},
      colorList: [
        {
          bgColor: "linear-gradient(90deg, #24c4ef 0%, #46a8f7 100%)",
          shadow: "0px 0px 10px 0px rgba(68, 169, 246, 0.5)",
        },
        {
          bgColor: "linear-gradient(90deg, #FC8756 0%, #FE5427 100%)",
          shadow: "0px 0px 10px 0px rgba(68, 169, 246, 0.5)",
        },
        {
          bgColor: "linear-gradient(90deg, #7ADBCF 0%, #47CAA4 100%)",
          shadow: "0px 0px 10px 0px rgba(68, 169, 246, 0.5)",
        },
      ],
      payCode: "",
    };
  },
  methods: {
    // 生成二维码
    async setCode(url, id) {
      this.$loading.show("生成中...");
      await drawQrcode({
        width: 202,
        height: 202,
        canvasId: id,
        text: url,
        callback: (e) => {
          uni.canvasToTempFilePath({
            canvasId: "code",
            success: (res) => {
              console.log("成功", res);
              this.getImage(res.tempFilePath);
            },
            fail: (res) => {
              console.log("失败", res);
            },
          });
        },
      });
    },
    //  图片上传接口
    async getImage(file) {
      //  加载状态
      uni.uploadFile({
        url: "https://nsbusinessapi.tuanfengkeji.cn/file/upload", //仅为示例，非真实的接口地址
        filePath: file,
        header: {
          "Content-Type": "application/json; charset=UTF-8",
          "Authorization-Business": uni.getStorageSync("storage_key"),
        },
        name: "file",
        formData: {
          user: "code",
        },
        success: (uploadFileRes) => {
          this.payCode = JSON.parse(uploadFileRes.data).data.url;
          this.$loading.hide();
        },
      });
    },
    backClick() {
      uni.navigateBack();
    },
  },
  //    页面卸载清除缓存
  onUnload() {
    uni.removeStorageSync("code");
  },
};
</script>

<style lang="scss" scoped>
.codeDetail {
  width: 100vw;
  height: 100vh;
  position: relative;
  .shop-top {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
    @include flex(center);

    .back-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .shop-name {
      color: #ffffff;
    }
  }
  .code-container {
    margin: 0 auto;
    margin-top: 186rpx;
    border-radius: 32rpx;
    width: 606rpx;
    height: 724rpx;
    background-color: #ffffff;
    position: relative;
    .top-img {
      width: 144rpx;
      height: 144rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -72rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 10rpx solid #ffffff;
      }
    }
    .code-img {
      width: 404rpx;
      height: 404rpx;
      position: absolute;
      top: 128rpx;
      left: 52%;
      transform: translateX(-50%);
      image {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        z-index: 1;
      }
      canvas {
        width: 100%;
        height: 100%;
        z-index: -2;
        position: fixed;
        top: 1000rpx;
        left: 1000rpx;
      }
    }
    .code-text {
      color: #666666;
      font-size: 28rpx;
      position: absolute;
      bottom: 32rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>