修复bug

src/pages-store/pages/order/checkout.vue

@@ -2,6 +2,7 @@
 import { useConfigStore, useUserStore } from "@/store";
 import { dayjs } from "@/plugin/index";
 import Config from '@/config/index'
+import ChooseImage from '@/components/choose-image/choose-image.vue'
 import CheckoutSkeleton from "./components/checkout-skeleton.vue";
 import ChangePhone from "./components/change-phone.vue";
 import PriceDetail from "./components/price-detail.vue";
@@ -19,7 +20,8 @@ import {
   appMerchantOrderCreateOrderCartBatchPost,
   appMerchantOrderCalculatePriceCartBatchPost,
   appMerchantCartListMerchantPost,
-  appMerchantOrderPayOrderBatchPost
+  appMerchantOrderPayOrderBatchPost,
+  appMerchantOrderZipPayVoucherPost
 } from "@/service";
 import useEventEmit from "@/hooks/useEventEmit";
 import {EventEnum} from "@/constant/enums";
@@ -268,14 +270,90 @@ const openPriceDetail = () => {
 function navigateTo(url: string) {
   uni.navigateTo({ url })
 }
+function chooseCardForCheckout() {
+  payMethodSelected.value = 1
+  uni.navigateTo({
+    url: '/pages-user/pages/select-credit-card/index',
+    events: {
+      selectedCard: function(data: any) {
+        if (data) {
+          payMethodOptions.value.cardId = data.cardId || ''
+          payMethodOptions.value.cardNumber = data.cardNumber || ''
+        }
+      },
+    },
+  })
+}
 
 // 支付参数
 const payMethodOptions = ref({
   orderId: '',
   cardId: '',
+  cardNumber: '',
   payMethod: 1, // 支付方式 1信用卡 2余额
   payPassword: '',
 })
+const payMethodPopupVisible = ref(false)
+const payMethodSelected = ref(1)
+const zellePopupVisible = ref(false)
+const zelleOrderIdForVoucher = ref('')
+const voucherChooseRef = ref<InstanceType<typeof ChooseImage>>()
+const voucherSubmitting = ref(false)
+const zellePayPath = Config.zellePayPath;
+
+function openPayMethodPopup() {
+  payMethodSelected.value = Number(payMethodOptions.value.payMethod || 1)
+  payMethodPopupVisible.value = true
+}
+function confirmPayMethodForSettle() {
+  payMethodOptions.value.payMethod = Number(payMethodSelected.value || 1)
+  payMethodPopupVisible.value = false
+  handleGoSettle()
+}
+function openUploadVoucher() {
+  if (!zelleOrderIdForVoucher.value) {
+    uni.showToast({ title: t('pages-store.order.voucherUploadFailed'), icon: 'none' })
+    return
+  }
+  voucherChooseRef.value?.init()
+}
+function normalizeVoucherUrl(payload: unknown): string {
+  if (Array.isArray(payload)) {
+    const first = payload[0]
+    return typeof first === 'string' ? first : ''
+  }
+  return typeof payload === 'string' ? payload : ''
+}
+async function onVoucherImageUploaded(urls: unknown) {
+  const zipPayVoucher = normalizeVoucherUrl(urls)
+  if (!zipPayVoucher || !zelleOrderIdForVoucher.value) {
+    uni.showToast({ title: t('pages-store.order.voucherUploadFailed'), icon: 'none' })
+    return
+  }
+  if (voucherSubmitting.value) return
+  voucherSubmitting.value = true
+  try {
+    await appMerchantOrderZipPayVoucherPost({
+      body: {
+        orderId: zelleOrderIdForVoucher.value,
+        zipPayVoucher,
+      }
+    })
+    uni.showToast({ title: t('pages-store.order.voucherSubmitSuccess'), icon: 'none' })
+    zellePopupVisible.value = false
+    setTimeout(() => {
+      if (zelleOrderIdForVoucher.value) {
+        uni.reLaunch({
+          url: `/pages-store/pages/order/index?id=${zelleOrderIdForVoucher.value}`
+        })
+      }
+    }, 500)
+  } catch {
+    uni.showToast({ title: t('pages-store.order.voucherSubmitFailed'), icon: 'none' })
+  } finally {
+    voucherSubmitting.value = false
+  }
+}
 useEventEmit(EventEnum.CHOOSE_PAYMENT_METHOD, (data) => {
   if(data) {
     if(data.payMethod === 1) {
@@ -791,6 +869,9 @@ function handleGoSettle() {
         // 如果是余额支付,弹出支付密码弹窗
         if(payMethodOptions.value.payMethod === 2) {
           passwordInputRef.value?.showPasswordInput()
+        } else if (payMethodOptions.value.payMethod === 3) {
+          zelleOrderIdForVoucher.value = resOrderIds.value?.[0] ? String(resOrderIds.value[0]) : ''
+          zellePopupVisible.value = true
         } else {
           appMerchantOrderPayOrderBatch()
         }
@@ -799,6 +880,9 @@ function handleGoSettle() {
       // 如果是余额支付,弹出支付密码弹窗
       if(payMethodOptions.value.payMethod === 2) {
         passwordInputRef.value?.showPasswordInput()
+      } else if (payMethodOptions.value.payMethod === 3) {
+        zelleOrderIdForVoucher.value = resOrderIds.value?.[0] ? String(resOrderIds.value[0]) : ''
+        zellePopupVisible.value = true
       } else {
         appMerchantOrderPayOrderBatch()
       }
@@ -852,6 +936,9 @@ function handleGoSettle() {
         // 如果是余额支付,弹出支付密码弹窗
         if(payMethodOptions.value.payMethod === 2) {
           passwordInputRef.value?.showPasswordInput()
+        } else if (payMethodOptions.value.payMethod === 3) {
+          zelleOrderIdForVoucher.value = String(resOrderId.value || '')
+          zellePopupVisible.value = true
         } else {
           appMerchantOrderPayOrder()
         }
@@ -860,6 +947,9 @@ function handleGoSettle() {
       // 如果是余额支付,弹出支付密码弹窗
       if(payMethodOptions.value.payMethod === 2) {
         passwordInputRef.value?.showPasswordInput()
+      } else if (payMethodOptions.value.payMethod === 3) {
+        zelleOrderIdForVoucher.value = String(resOrderId.value || '')
+        zellePopupVisible.value = true
       } else {
         appMerchantOrderPayOrder()
       }
@@ -1345,27 +1435,6 @@ function handleClose(merchantId?: string) {
       </view>
     </view>
 
-    <!-- 支付方式 -->
-    <view class="checkout-block">
-      <view class="checkout-section-label">{{ t('pages-store.checkout.payMethodSection') }}</view>
-      <view
-        @click="navigateTo('/pages-user/pages/choose-paymethod/index')"
-        class="checkout-card checkout-gutter checkout-pay-row"
-      >
-        <view class="flex-1 min-w-0 pr-16rpx">
-          <template v-if="payMethodOptions.payMethod === 1">
-            <text class="checkout-card-primary block">{{ t('pages-user.choosePaymethod.creditCard') }}</text>
-            <text v-if="payMethodOptions.cardId" class="checkout-card-secondary block mt-10rpx">{{ payMethodOptions.cardNumber }}</text>
-            <text v-else class="checkout-card-secondary block mt-10rpx">{{ t("pages-user.member.creditCard") }}</text>
-          </template>
-          <template v-else>
-            <text class="checkout-card-primary block">{{ t('pages-user.choosePaymethod.wallet') }}</text>
-          </template>
-        </view>
-        <image src="@img/chef/142.png" class="checkout-chevron" mode="aspectFit" />
-      </view>
-    </view>
-
     <!-- 确认订单（单店） -->
     <view v-if="orderType === 'normal' && cartDataList.length > 0" class="checkout-block">
       <view class="checkout-section-label">{{ t('pages-store.checkout.confirmOrder') }}</view>
@@ -1875,7 +1944,7 @@ function handleClose(merchantId?: string) {
             <text class="checkout-bottom-bar-one-line">{{ subtotalOneLineText }}</text>
           </view>
           <wd-button
-            @click="handleGoSettle"
+            @click="openPayMethodPopup"
             custom-class="checkout-pay-btn"
           >{{ t('pages-store.checkout.pay') }}
           </wd-button>
@@ -1891,6 +1960,89 @@ function handleClose(merchantId?: string) {
     <!-- 价格明细 -->
     <price-detail ref="priceDetailRef" />
     <password-container @success="payPawSuccess" ref="passwordInputRef" />
+    <choose-image ref="voucherChooseRef" :count="1" @change="onVoucherImageUploaded" />
+    <wd-popup v-model="payMethodPopupVisible" position="bottom" @close="payMethodPopupVisible = false">
+      <view class="checkout-paymethod-popup">
+        <view class="checkout-paymethod-popup-title">{{ t('pages-store.checkout.payMethodSection') }}</view>
+
+        <view
+          class="checkout-paymethod-option"
+          :class="{ 'is-active': payMethodSelected === 1 }"
+          @click="payMethodSelected = 1"
+        >
+          <view class="checkout-paymethod-option-left">
+            <view class="checkout-paymethod-dot">
+              <view class="checkout-paymethod-dot-inner"></view>
+            </view>
+            <view class="checkout-paymethod-text-wrap">
+              <view class="checkout-paymethod-name">{{ t('pages-user.choosePaymethod.creditCard') }}</view>
+              <view class="checkout-paymethod-desc">{{ payMethodOptions.cardId ? payMethodOptions.cardNumber : t('pages-user.member.creditCard') }}</view>
+            </view>
+          </view>
+          <view
+            class="checkout-paymethod-replace-btn"
+            @click.stop="chooseCardForCheckout"
+          >
+            {{ payMethodOptions.cardId ? t('pages-user.choosePaymethod.replace') : t('pages-user.member.creditCard') }}
+          </view>
+        </view>
+
+        <view
+          class="checkout-paymethod-option"
+          :class="{ 'is-active': payMethodSelected === 2 }"
+          @click="payMethodSelected = 2"
+        >
+          <view class="checkout-paymethod-option-left">
+            <view class="checkout-paymethod-dot">
+              <view class="checkout-paymethod-dot-inner"></view>
+            </view>
+            <view class="checkout-paymethod-text-wrap">
+              <view class="checkout-paymethod-name">{{ t('pages-user.choosePaymethod.wallet') }}</view>
+              <view class="checkout-paymethod-desc">Balance</view>
+            </view>
+          </view>
+        </view>
+
+        <view
+          class="checkout-paymethod-option"
+          :class="{ 'is-active': payMethodSelected === 3 }"
+          @click="payMethodSelected = 3"
+        >
+          <view class="checkout-paymethod-option-left">
+            <view class="checkout-paymethod-dot">
+              <view class="checkout-paymethod-dot-inner"></view>
+            </view>
+            <view class="checkout-paymethod-text-wrap">
+              <view class="checkout-paymethod-name">Zelle</view>
+              <view class="checkout-paymethod-desc">Scan QR and upload voucher</view>
+            </view>
+          </view>
+        </view>
+
+        <wd-button @click="confirmPayMethodForSettle" custom-class="checkout-paymethod-confirm-btn" block>
+          {{ t('common.confirm') }}
+        </wd-button>
+        <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
+      </view>
+    </wd-popup>
+    <wd-popup v-model="zellePopupVisible" custom-style="background: transparent;" @close="zellePopupVisible = false">
+      <view class="w-620rpx rounded-24rpx bg-white p-28rpx">
+        <view class="text-32rpx lh-32rpx text-#333 font-600 text-center mb-24rpx">Zelle</view>
+        <image v-if="zellePayPath" :src="zellePayPath" mode="aspectFit" class="w-100% h-520rpx rounded-16rpx bg-#F7F7F7" />
+        <view v-else class="h-220rpx rounded-16rpx bg-#F7F7F7 center text-#999 text-24rpx">
+          zellePayPath is empty
+        </view>
+        <wd-button
+          :loading="voucherSubmitting"
+          :disabled="voucherSubmitting"
+          @click="openUploadVoucher"
+          custom-class="!h-92rpx !rounded-40rpx !text-30rpx !mt-26rpx !bg-#14181B"
+          block
+        >
+          {{ t('pages-store.order.uploadPaidVoucher') }}
+        </wd-button>
+      </view>
+    </wd-popup>
   </view>
   </view>
 </template>
@@ -2075,6 +2227,122 @@ $checkout-gutter: 32rpx;
   box-sizing: border-box;
 }
 
+.checkout-paymethod-popup {
+  padding: 36rpx 30rpx 20rpx;
+  background: #fff;
+  border-radius: 28rpx 28rpx 0 0;
+}
+
+.checkout-paymethod-popup-title {
+  font-size: 34rpx;
+  line-height: 1.3;
+  font-weight: 700;
+  color: #14181b;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
+
+.checkout-paymethod-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 128rpx;
+  padding: 0 24rpx;
+  border: 2rpx solid #ececec;
+  border-radius: 22rpx;
+  background: #fff;
+  margin-bottom: 18rpx;
+  transition: all .2s ease;
+}
+
+.checkout-paymethod-option.is-active {
+  border-color: #14181b;
+  background: #f7f8fa;
+  box-shadow: 0 6rpx 20rpx rgba(20, 24, 27, 0.08);
+}
+
+.checkout-paymethod-option-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.checkout-paymethod-dot {
+  width: 34rpx;
+  height: 34rpx;
+  border-radius: 50%;
+  border: 2rpx solid #d0d0d0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 18rpx;
+  flex-shrink: 0;
+}
+
+.checkout-paymethod-dot-inner {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.checkout-paymethod-option.is-active .checkout-paymethod-dot {
+  border-color: #14181b;
+}
+
+.checkout-paymethod-option.is-active .checkout-paymethod-dot-inner {
+  background: #14181b;
+}
+
+.checkout-paymethod-text-wrap {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.checkout-paymethod-name {
+  font-size: 30rpx;
+  line-height: 1.25;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+
+.checkout-paymethod-desc {
+  font-size: 24rpx;
+  line-height: 1.3;
+  color: #8b8b8b;
+}
+
+.checkout-paymethod-replace-btn {
+  margin-left: 16rpx;
+  height: 50rpx;
+  padding: 0 20rpx;
+  border-radius: 25rpx;
+  background: #ffffff;
+  border: 1rpx solid #e6e6e6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  color: #333333;
+  flex-shrink: 0;
+}
+
+.checkout-paymethod-option:last-of-type {
+  margin-bottom: 0;
+}
+
+.checkout-paymethod-confirm-btn {
+  margin-top: 28rpx !important;
+  height: 96rpx !important;
+  border-radius: 46rpx !important;
+  font-size: 30rpx !important;
+  font-weight: 600 !important;
+  background: #14181b !important;
+}
+
 .checkout-confirm-head {
   display: flex;
   flex-direction: row;