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="text" maxlength="6" :value="code" :focus="inputFocus"
        :selection-start="cursorPos" :selection-end="cursorPos" @input="onInput" @blur="onBlur" confirm-type="done" />

      <button class="confirm-btn" :class="{ active: code.length === 6 }" :disabled="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: true,
      isBlurred: false
    };
  },
  computed: {
    // 光标永远定位在最后一位
    cursorPos() {
      return this.code.length;
    }
  },
  onReady() {
    this.$nextTick(() => {
      this.inputFocus = true;
    });
  },
  methods: {
    focusInput() {
      // 核心修复：无论如何，重新聚焦时强制光标在最后
      this.inputFocus = false;
      this.$nextTick(() => {
        this.inputFocus = true;
        this.isBlurred = false;
      });
    },
    onBlur() {
      this.isBlurred = true;
    },
    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' });
        this.focusInput();
        return;
      }

      uni.showLoading({ title: '查询订单中...', mask: true });

      request.post('/sj/poster/getOrderByCode', {
        server_code: this.code
      }).then(res => {
        uni.hideLoading();
        if (res.code === 200 && res.data) {
          res.data.server_code = this.code;
          const orderDataStr = encodeURIComponent(JSON.stringify(res.data));
          uni.navigateTo({
            url: `/pages/shop/verify/verify-order-detail?data=${orderDataStr}`
          });
        } else {
          uni.navigateTo({ url: '/pages/shop/verify/verify-fail' });
        }
      }).catch(() => {
        uni.hideLoading();
        uni.navigateTo({ url: '/pages/shop/verify/verify-fail' });
      });
    }
  }
};
</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;
    }

    &[disabled] {
      opacity: 1;
      background: #ff476685;
      color: #fff;
    }
  }

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