tf-business/user_module/codeDetail/oldIndex.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>
      </view>
      <view class="code-text">长按保存二维码</view>
    </view>
    <view class="code-logo">
      <image class="" src="@/static/image/user/logo.png" />
    </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("生成中...");
    },
    //  图片上传接口
    async getImage(file) {
    },
    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%);
    }
  }
  .code-logo {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
    padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
    image {
      width: 474rpx;
      height: 342rpx;
      display: block;
    }
  }
}
</style>