小程序开发二维码扫描自定义页面 自定义扫码页面 扫一扫

<template>
  <view class="custom-scan">
    <!-- 扫码区域 -->
    <camera
      mode="scanCode"
      frame-size="large"
      class="scan-view"
      @scancode="scancode"
    >
      <view class="scan-container-box">
        <view class="scan-wrap">
          <view class="scan-line"></view>
        </view>
      </view>
      <view class="scan-container-main">
        <slot></slot>
      </view>
    </camera>
  </view>
</template>

<script>
// const innerAudioContext = wx.createInnerAudioContext(); // 提示音
// innerAudioContext.src = "https://qdstorage.okii.com/retail-app/common/beep.mp3";

export default {
  data() {
    return {
      isTf: false,
    };
  },
  methods: {
    // 扫码
    scancode(event) {
      if (this.isTf) return;
      this.isTf = true;
      setTimeout(() => {
        // 3秒扫描一次
        this.isTf = false;
        return;
      }, 3000); 
      wx.vibrateShort(); // 触发手机振动
      // innerAudioContext.play(); // 提示音
      const { result } = event.detail; // 获取校验扫描结果
      console.log("result", result);
      wx.showToast({ title: `扫描结果：${result}`, icon: "none" });
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-scan {
  width: 100vw;
  height: 100vh;

  .scan-view {
    width: 100%;
    height: 100%;
  }
  .scan-container-main {
    display: flex;
    width: 100%;
    height: 60vh;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
  .scan-container-box {
    width: 100vw;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

    .scan-wrap {
      position: relative;
      width: 400rpx;
      height: 300rpx;
      .scan-line {
        position: absolute;
        width: 100%;
        height: 1rpx;
        background-color: #0f0;
        box-shadow: 0px -0px 10px 1px #0f0;
        top: 0;
        left: 0;
        animation: scan 2s infinite linear;
      }
    }
  }

  @keyframes scan {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    80% {
      opacity: 1;
      box-shadow: 0px -0px 10px 1px #0f0;
    }
    100% {
      transform: translateY(20vh);
      opacity: 0;
    }
  }
}
</style>