mrr.sj.front/pages/shop/verify/manual-verify.vue

<template>
  <view class="manual-verify">
    <CustomNavbar title="" backgroundColor="#FFFFFF"></CustomNavbar>

    <view class="content">
      <view class="tip">请输入6位核销码</view>

      <view class="code-inputs" @tap="focusInput">
        <view
          class="input-box"
          :class="{ filled: code[i-1] }"
          v-for="i in 6"
          :key="i"
        >
          {{ code[i-1] || '' }}
        </view>
      </view>

      <input
        class="hidden-input"
        type="number"
        maxlength="6"
        :value="code"
        :focus="inputFocus"
        @input="onInput"
        @blur="resetFocus"
        confirm-type="done"
      />

      <button class="confirm-btn" :class="{ active: code.length === 6 }" @tap="submitCode">
        确认
      </button>
    </view>
  </view>
</template>

<script>
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
import request from "@/utils/request";

export default {
  components: { CustomNavbar },
  data() {
    return {
      code: '',
      inputFocus: false
    };
  },
  methods: {
    focusInput() {
      this.inputFocus = false;
      this.$nextTick(() => {
        this.inputFocus = true;
      });
    },
    resetFocus() {
      this.inputFocus = false;
    },
    onInput(e) {
      let value = e.detail.value;
      value = value.replace(/\D/g, '');
      if (value.length > 6) value = value.slice(0, 6);
      this.code = value;
    },
    submitCode() {
      if (this.code.length !== 6) {
        uni.showToast({ title: '请输入6位核销码', icon: 'none' });
        return;
      }
      request.post('/sj/poster/useOrderServerCode', {
        server_code: this.code,
        id: this.orderId,
        order_type: this.orderType
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '核销成功' });
          setTimeout(() => uni.navigateBack(), 1500);
        } else {
          uni.showToast({ title: res.msg || '核销失败', icon: 'none' });
        }
      }).catch(() => {
        uni.showToast({ title: '网络异常', icon: 'none' });
      });
    }
  }
};
</script>

<style lang="scss">
.manual-verify {
  padding-top: 150rpx;
  background-color: #fff;
  min-height: 100vh;

  .tip {
    font-weight: 500;
    font-size: 46rpx;
    color: #333333;
    line-height: 65rpx;
    text-align: left;
    margin-bottom: 80rpx;
    margin-left: 48rpx;
  }

  .code-inputs {
    display: flex;
    justify-content: center;
    gap: 24rpx;
    margin-bottom: 80rpx;
    padding: 0 30rpx;

    .input-box {
      width: 88rpx;
      height: 88rpx;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      font-weight: 500;
      color: #333;
      background-color: #F3F3F3;
    }
  }

  .confirm-btn {
    margin: 0 49rpx;
    background: #ff476685;
    color: #fff;
    border-radius: 88rpx;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 36rpx;
    font-weight: 500;
    box-shadow: 0 8rpx 20rpx rgba(255, 71, 103, 0.2);
    transition: all 0.2s;

    &.active {
      background: #FF4767;
    }
  }

  .hidden-input {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    background: transparent;
  }
}
</style>