tf-business/pages_module/scanCode/index.vue

<template>
  <view class="scanCode">
    <capsule :showBorder="true">
      <template v-slot:top>
        <view class="shop-top">
          <view class="back-icon" @click="backClick">
            <tui-icon name="arrowleft" :size="42" color="#FFFFFF"></tui-icon>
          </view>
          <view class="shop-name">{{ shopInfo.shopName }}</view>
        </view>
      </template>
    </capsule>
    <view class="scanning">
      <view class="scan-box">
        <view class="border-box"></view>
        <view class="border-box2"></view>
        <view class="border-box3"></view>
        <view class="border-box4"></view>
        <camera
          class="scan-camera"
          @scancode="onScancode"
          @error="errorChange"
          @initdone="cameraReady"
          mode="scanCode"
          device-position="back"
          flash="auto"
        >
          <cover-view
            class="scan-animation"
            :animation="animation"
          ></cover-view>
        </camera>
      </view>
      <view class="scab-txt">将二维码/条码放到取景框中，即可自动扫描</view>
    </view>
    <view class="btn-list">
      <view class="btn" @click="goCoupons">
        <image src="@/static/image/code/keyboard.png" />
        <text>输码验劵</text>
      </view>
      <view class="btn" @click="openAlbum">
        <image src="@/static/image/code/photo.png" />
        <text>打开相册</text>
      </view>
    </view>
    <modal
      :showModal="modal"
      :promptList="promptList"
      @closeModal="closeModal"
      @btnClick="btnClick"
      :showBtn="showBtn"
      showText="确定"
    ></modal>
  </view>
</template>

<script>
var animation = uni.createAnimation({
  timingFunction: "linear",
  delay: 0,
});
export default {
  created() {
    //  获取本地存储的店铺数据
    this.shopInfo = uni.getStorageSync("shopInfo");
    // setTimeout(() => {
    //     // this.getOrderIdFromUrl('https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/jump/jump?orderId=5557&type=verification&code=5557~JFHXF4LCXA')
    //     this.getOrderIdFromUrl('https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/jump/jump?orderId=5065&type=verification&code=5065~JFHXUDHQUM')
    //     // this.getOrderIdFromUrl('https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/jump/jump?orderId=5555&type=verification&code=5557~JFHXF4LCXA')
    // }, 3000)
    uni.getSetting({
      success: (res) => {
        let flag = res.authSetting["scope.camera"];
        if (!flag) {
          this.errorChange();
        }
      },
    });
  },
  onShow() {
    this.lineAnimation();
  },
  data() {
    return {
      //  扫描线动画
      animation: {},
      shopInfo: {},
      // 控制框显示
      modal: false,
      //  弹框显示的内容
      promptList: [],
      //   控制弹框按钮
      showBtn: false,
    };
  },
  methods: {
    lineAnimation() {
      this.animation = animation;
      let that = this;
      let scode = true;
      this.timer = setInterval(
        function() {
          if (scode) {
            animation.translateY(260).step({
              duration: 1500,
            });
            scode = !scode;
          } else {
            animation.translateY(-10).step({
              duration: 1500,
            });
            scode = !scode;
          }
          that.animation = animation.export();
        }.bind(this),
        1500
      );
    },
    //  关闭弹框
    //  关闭弹框
    closeModal() {
      this.modal = false;
    },
    // 相机初始化完成回调函数
    onCameraInitDone() {
      // setInterval(() => {
      // 	this.$refs.camera.scanCode();
      // }, 1000);
    },
    // 用户不同意使用摄像头
    errorChange(e) {
      this.showBtn = true;
      this.modal = true;
      this.promptList = ["摄像头权限未开启", "请在设置中打开摄像头权限"];
    },
    //  相机初始化完成
    cameraReady() {
      this.modal = false;
      console.log("初始化完成了，打卡时间可达时间跨度");
    },
    /**扫码成功*/
    onScancode(e) {
        console.log(e.detail.result);
      this.getOrderIdFromUrl(e.detail.result);
    },
    //  获取订单
    getOrderIdFromUrl(url) {
      try {
        let march = url.match(/orderId=(\d+)/);
        let marchTwo = url.match(/code=([^&]*)/);
        //  传递值过去
        uni.navigateTo({
          url: `/pages_module/orderVerifica/index?orderId=${march[1]}&code=${marchTwo[1]}`,
        });
      } catch (error) {
        this.modal = true;
        this.showBtn = false;
        this.promptList = ["此二维码/条码无效", "请扫描正常的二维码/条码"];
      }
    },
    //  打开相册
    openAlbum() {
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], // 选择图片的来源，相册
        success: function(res) {
          // console.log(res,res.tempFiles[0].path);
          uni.scanCode({
            path: res.tempFiles[0].path,
            success: function(res) {
              console.log("二维码内容为：" + res.result);
            },
            fail: function(res) {
              console.log("识别二维码失败");
            },
          });
        },
      });
    },
    // 去到输入验劵
    goCoupons() {
      uni.navigateTo({
        url: "/pages_module/scanCoupons/index",
      });
    },
    //  确定打开设置
    btnClick() {
      this.modal = false;
      uni.openSetting({
        success: (res) => {
          if (res.authSetting["scope.camera"]) {
            uni.reLaunch({
              url: "/pages_module/scanCode/index",
            });
          }
        },
      });
    },
    backClick() {
      // uni.navigateBack()
      uni.switchTab({
        url: "/pages/tabbar/index/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
%btn {
  width: 55rpx;
  height: 13rpx;
  background-color: #fff;
  position: relative;
}

%btnAfter {
  content: "";
  position: absolute;
  width: 13rpx;
  height: 55rpx;
  background-color: #fff;
}

.scanCode {
  width: 100vw;
  height: 100vh;
  background: url("https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1717469011005-bg.png")
    center;
  background-size: 100% 100%;
  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;
    }
  }

  .scanning {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    @include flex(center, column, 30rpx);

    .scan-box {
      width: 452rpx;
      height: 452rpx;
      position: relative;

      .border-box {
        @extend %btn;
        position: absolute;
        left: -5rpx;
        top: -5rpx;

        &::after {
          @extend %btnAfter;
          left: -2rpx;
          top: 0;
        }
      }

      .border-box2 {
        @extend %btn;
        position: absolute;
        right: -5rpx;
        top: -5rpx;

        &::after {
          @extend %btnAfter;
          right: -2rpx;
          top: 0;
        }
      }

      .border-box3 {
        @extend %btn;
        position: absolute;
        right: -5rpx;
        bottom: -5rpx;

        &::after {
          @extend %btnAfter;
          right: -2rpx;
          bottom: 0;
        }
      }

      .border-box4 {
        @extend %btn;
        position: absolute;
        left: -5rpx;
        bottom: -5rpx;

        &::after {
          @extend %btnAfter;
          left: -2rpx;
          bottom: 0;
        }
      }

      .scan-camera {
        width: 100%;
        height: 100%;
      }

      .scan-animation {
        position: absolute;
        top: 5%;
        left: 0;
        width: 100%;
        height: 3rpx;
        background-color: $primary-color;
        border-radius: 50%;
      }
    }

    .scab-txt {
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .btn-list {
    position: absolute;
    left: 50%;
    bottom: 104rpx;
    transform: translateX(-50%);
    @include flex(center, null, 60rpx);
    display: none;
    .btn {
      width: 276rpx;
      height: 108rpx;
      background: rgba(255, 255, 255, 0.4);
      @include flex(center, null, 22rpx);
      border-radius: 24rpx;

      image {
        width: 44rpx;
        height: 36rpx;
        display: block;
      }

      text {
        font-size: 36rpx;
        color: #e6e4e5;
      }
    }
  }
}
</style>