distributor-h5/src/views/promotion/components/PaymentDialog.vue

<template>
  <van-popup
    v-model:show="dialogVisible"
    round
    position="bottom"
    :style="{ height: '70%' }"
  >
    <div class="p-4 flex flex-col h-full">
      <!-- Header -->
      <div class="flex justify-between items-center mb-8">
        <div class="text-gray-400 cursor-pointer" @click="onClose">取消</div>
        <div class="text-lg font-medium">下单</div>
        <div class="w-8"></div>
      </div>

      <!-- Form -->
      <div class="flex-1">
        <div class="mb-6">
          <van-field
            v-model.trim="phone"
            type="tel"
            maxlength="11"
            placeholder="请输入您的手机号"
            :border="false"
            class="!bg-gray-100 rounded-lg"
          />
        </div>

        <div class="mb-6 flex gap-2">
          <van-field
            v-model.trim="verificationCode"
            placeholder="请输入验证码"
            :border="false"
            class="!bg-gray-100 rounded-lg flex-1"
          />
          <van-button
            type="primary"
            @click="handleGetCode"
            :disabled="countdown > 0"
            class="!bg-[#7B68EE] !border-none min-w-[100px]"
          >
            {{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
          </van-button>
        </div>

        <div class="text-orange-400 text-sm mb-8">
          会员权益将会绑定到该手机号
        </div>
      </div>

      <!-- Bottom Payment Button -->
      <div class="mt-auto">
        <van-button
          block
          class="!bg-[#7AB02E] !border-none h-12 rounded-lg"
          @click="handleConfirm"
        >
          <div class="flex items-center justify-center">
            <img
              src="data:image/svg+xml,%3Csvg t='1709711834444' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4180' width='32' height='32'%3E%3Cpath d='M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795606-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381316-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z' fill='white' p-id='4181'%3E%3C/path%3E%3C/svg%3E"
              class="w-6 h-6 mr-2"
              alt="WeChat Pay"
            />
            <span class="text-white">微信支付</span>
          </div>
        </van-button>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { ref, computed } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { request } from "@/utils";

const [route, router] = [useRoute(), useRouter()];
const props = defineProps({
  show: Boolean,
  onClose: Function,
  onConfirm: Function,
});

const emit = defineEmits(["update:show"]);

const phone = ref("17612888982");
const verificationCode = ref("8888");
const countdown = ref(0);
const timer = ref(null);

// 使用computed处理show
const dialogVisible = computed({
  get: () => props.show,
  set: (value) => emit("update:show", value),
});

const startCountdown = () => {
  countdown.value = 60;
  timer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

const sendCode = async () => {
  return await request.post(`/archivesService/member/promotionGoods/sms/send`, {
    promotionGoodsId: route.query.promotionGoodsId,
    mobile: phone.value,
  });
};
const handleGetCode = async () => {
  if (!phone.value) {
    showToast("请输入手机号");
    return;
  }
  // if (!/^1[3-9]\d{9}$/.test(phone.value)) {
  //   showToast("请输入正确的手机号");
  //   return;
  // }
  await sendCode();
  // 开始倒计时
  startCountdown();
  // 这里添加获取验证码的逻辑
  showToast("验证码已发送");
};
const handleConfirm = async () => {
  if (!phone.value || !verificationCode.value) {
    showToast("请填写完整信息");
    return;
  }

  props.onConfirm?.(phone.value, verificationCode.value);
};
</script>

<style scoped>
:deep(.van-field) {
  background-color: #f5f5f5 !important;
}

:deep(.van-field__control) {
  color: #333;
}

:deep(.van-popup) {
  background-color: white;
}
</style>