kxmall-ui/kxmall-rider-ui/pages/verification/index.vue

<template>
  <view class="container">
    <view class="header">
      <image mode="aspectFit" :src="`/static/order/writeOffBg.jpg`" @click="openQRCode" />
    </view>

    <view class="cells">
      <view class="cell">
        <view class="input">
          <input type="number" placeholder="请输入核销码" v-model="verify_code" />
        </view>
      </view>
    </view>

    <view class="verification-btn-container">
      <button class="verification-btn" @click="storeCancellation">
        <text>立即核销</text>
      </button>
      <button class="verification-btn" v-if="$deviceType !== 'weixin'" @click="openQRCode">
        <text>扫码核销</text>
      </button>
    </view>

    <tab-bar :active="1"></tab-bar>

  </view>
</template>

<script>
import TabBar from '../../components/tab-bar';
import { mapState } from 'vuex';

export default {
  components: {
    TabBar
  },
  computed: {
    ...mapState(['token'])
  },
  data() {
    return {
      orderInfo: {},
      verify_code: '',
      id: undefined,
    };
  },
  methods: {
    storeCancellation() {
      let ref = /^[a-zA-Z0-9]{6}$/;  // Changed to allow alphanumeric and 6 characters
      if (!this.verify_code) {
        uni.showToast({
          title: '请输入核销码',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      if (!ref.test(this.verify_code)) {
        uni.showToast({
          title: '请输入6位数字或字母的核销码',
          icon: 'none',
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        title: '查询中',
      });

      this.request('get', 'order/storeOrder/completePickup', this.token, {id: this.id,verifyCode:this.verify_code})
          .then(res => {
            uni.hideLoading();
            this.orderInfo = res.data;
            uni.showToast({
              title: res.msg,
              icon: 'success',
              duration: 5000,
            });
          })
          .catch(error => {
            uni.hideLoading();
            uni.showToast({
              title: error.msg || error.response.data.msg || error.response.data.message,
              icon: 'none',
              duration: 2000,
            });
          });
    },
    openQRCode() {
      let that = this;
      uni.scanCode({
        success: res => {
          var result = res.result;
          if (result) {
            // Split the result by underscore
            const parts = result.split('_');
            if (parts.length === 2) {
              // First part is order ID, second part is verification code
              that.id = parts[0];
              that.verify_code = parts[1];
              that.storeCancellation();
            } else {
              // Fallback for simple verification codes
              that.verify_code = result;
              that.storeCancellation();
            }
          } else {
            uni.showToast({
              title: '没有扫描到什么！',
              icon: 'none',
              duration: 2000,
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  line-height: 1.2;
  position: relative;
  min-height: 100vh;
}

.header {
  width: 100%;
  height: 300rpx;

  image {
    width: 100%;
    height: 300rpx;
  }
}

.cells {
  padding: 0 $uni-spacing-row-lg;
  margin-top: 20rpx;

  .cell {
    display: flex;
    align-items: center;
    height: 110rpx;
    font-size: $uni-font-size-base;
    padding: 0 $uni-spacing-row-lg;
    border-bottom: 1rpx solid $uni-border-color;
    background-color: $uni-bg-color;
    border-radius: 14rpx;
  }

  .input {
    width: 100%;

    input {
      width: 100%;
      text-align: center;
      font-size: $uni-font-size-lg;
      color: $font-color-black;
    }
  }
}

/* Verification Button Styles */
.verification-btn-container {
  padding: 30rpx $uni-spacing-row-lg;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .verification-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    line-height: 90rpx;
    font-size: $uni-font-size-lg;
    color: #fff;
    background-color: $uni-color-primary;
    border-radius: 45rpx;
    border: none;
    width: 100%;
    &:last-child {
      background-color: $uni-color-warning;
    }
  }

  button::after {
    border: none;
  }
}
</style>