zhishifufei_uniapp/pages/my/verify_activity.vue

<template>
  
  <BaseContainer class="verify-activity">
    <NavBar title="报名核销" />
    <view class="one">
      <view><text v-if="isCanScanCode">扫码或</text>输入核销码核销</view>
    </view>
    <view class="two">
      <view class="form">
        <view class="top-box">
          <input v-model.trim="code" type="text" placeholder="输入核销码" />
          <i
            v-if="isCanScanCode"
            class="iconfont iconsaoma"
            @click="scanQRCode"
          ></i>
        </view>
        <view class="submit flex flex-center" @click="verify">立即核销</view>
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { verifyOffCode } from "@/api/activity";
export default {
  data() {
    return {
      code: "",
      // #ifdef H5
      isCanScanCode: false,
      // #endif
      // #ifndef H5
      isCanScanCode: true,
      // #endif
    };
  },
  methods: {
    scanQRCode() {
      this.$util.wrapFn(uni.scanCode).then(({ result }) => {
        if (result) {
          this.code = result;
        }
      });
    },
    async verify() {
      if (!this.code)
        return this.$util.showMsg(
          "请" + (this.isCanScanCode ? "扫码或" : "") + "输入核销码核销"
        );

      uni.showLoading({ mask: true });

      try {
        const { data } = await verifyOffCode(this.code);
        uni.hideLoading();
        uni.navigateTo({
          url: "/pages/my/sign_order?type=2&order_id=" + data.order_id,
        });
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.verify-activity .one {
  height: 500rpx;
  padding: 80rpx;
  border-bottom-right-radius: 750rpx 97rpx;
  border-bottom-left-radius: 750rpx 97rpx;
  background: url(getAssetsPath("/wap/first/zsff/images/verify-activity.png"))
      left top/100% no-repeat,
    url(getAssetsPath("/wap/first/zsff/images/verify-activity.png")) left
      top/100% no-repeat,
    url(getAssetsPath("/wap/first/zsff/images/verify-activity.png")) left
      top/100% no-repeat,
    linear-gradient(227deg, #1581fd 0%, #40aeff 100%);
  font-size: 32rpx;
  line-height: 45rpx;
  color: #ffffff;
  letter-spacing: 1px;
}

.verify-activity .one view {
  padding: 100rpx 0 0 8rpx;
  margin-left: -18rpx;
  background: url(getAssetsPath("/wap/first/zsff/images/bmhx.png")) left
    top/340rpx no-repeat;
}

.verify-activity .two {
  padding: 0 30rpx;
  margin-top: -97rpx;
}

.verify-activity .form {
  padding: 79rpx 30rpx 112rpx;
  border-radius: 16rpx;
  background-color: #ffffff;

  box-shadow: 0 3rpx 18rpx rgba(0, 77, 167, 0.1);
}

.verify-activity .form .top-box {
  display: flex;

  align-items: center;
  padding: 19rpx 30rpx;
  border-radius: 8rpx;
  background-color: #f4f4f4;
}

.verify-activity input {
  flex: 1;
  min-width: 0;
  height: 59rpx;
  font-size: 42rpx;
  color: #282828;
}

.verify-activity .iconfont {
  font-size: 36rpx;
  color: #8a8a8a;
}

.verify-activity .submit {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 56rpx;
  background-color: #409dff;
  font-size: 32rpx;
  color: #ffffff;
}
</style>