收银台页面

tianwu
1 parent bf9336df
Showing 12 changed files with 884 additions and 51 deletions
apps/web-payment/public/fail.png
apps/web-payment/public/favicon.ico
apps/web-payment/public/success.png
apps/web-payment/src/api/payment.ts
apps/web-payment/src/router/routes/core.ts
apps/web-payment/src/views/payment/component/PasswordInput.vue
apps/web-payment/src/views/payment/index.vue
apps/web-payment/src/views/payment/payFailed.vue
apps/web-payment/src/views/payment/paySuccess.vue
apps/web-payment/vite.config.mts
packages/@core/base/shared/src/utils/util.ts
packages/effects/request/src/request-client/preset-interceptors.ts
@@ -2,14 +2,25 @@ import { requestClient } from &#39;#/api/request&#39;;
 export namespace PaymentApi {
   export interface orderPaymentParams {
-    tradeId: string;
-    pipelineId: string;
-    params: { openId: string };
+    tradeId: number | string;
+    pipelineId: number | string;
+    params: {
+      accountId?: number | string;
+      cardNo?: number | string;
+      openId?: number | string;
+      password?: number | string;
+    };
   }
 }
+// 换取openId
+export async function getOpenId(pipelineId: number | string, code: string) {
+  return requestClient.post<any>(
+    `/wechat/payment/openId.do?pipelineId=${pipelineId}&code=${code}`,
+  );
+}
 /**
- * 订单
+ * 园区卡支付 微信支付共用接口
  * @param data
  * @returns
  */
@@ -39,10 +39,19 @@ const coreRoutes: RouteRecordRaw[] = [
     path: '/payment',
     component: () => import('#/views/payment/index.vue'),
     meta: {
-      icon: 'lucide:area-chart',
+      icon: '',
       title: '订单支付',
     },
   },
+  {
+    name: 'PaymentSuccess',
+    path: '/paymentSuccess',
+    component: () => import('#/views/payment/PaySuccess.vue'),
+    meta: {
+      icon: '',
+      title: '支付成功',
+    },
+  },
 ];
 export { coreRoutes, fallbackNotFoundRoute };
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  length?: number;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'complete', password: string): void;
+  (e: 'cancel'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '请输入支付密码',
+  length: 6,
+});
+
+const emit = defineEmits<Emits>();
+
+// 密码输入框数组
+const passwordValues = ref<string[]>(
+  Array.from({ length: props.length }).fill(''),
+);
+const inputRefs = ref<HTMLInputElement[]>([]);
+const currentIndex = ref(0);
+
+// 设置输入框引用
+const setInputRef = (el: any, index: number) => {
+  if (el) {
+    inputRefs.value[index] = el;
+  }
+};
+
+// 处理输入
+const handleInput = (index: number, event: Event) => {
+  const target = event.target as HTMLInputElement;
+  let value = target.value;
+
+  // 只允许输入数字
+  value = value.replaceAll(/\D/g, '');
+
+  // 只保留第一个字符
+  if (value.length > 1) {
+    value = value.charAt(0);
+  }
+
+  passwordValues.value[index] = value;
+  target.value = value;
+
+  // 如果输入了数字，自动聚焦到下一个输入框
+  if (value && index < props.length - 1) {
+    currentIndex.value = index + 1;
+    nextTick(() => {
+      inputRefs.value[index + 1]?.focus();
+    });
+  }
+
+  // 检查是否已完成输入
+  checkComplete();
+};
+
+// 处理键盘事件
+const handleKeydown = (index: number, event: KeyboardEvent) => {
+  // 处理退格键
+  if (event.key === 'Backspace') {
+    event.preventDefault();
+
+    if (passwordValues.value[index]) {
+      // 如果当前框有值，清空当前框
+      passwordValues.value[index] = '';
+      (event.target as HTMLInputElement).value = '';
+    } else if (index > 0) {
+      // 如果当前框没值，回退到上一个框并清空
+      currentIndex.value = index - 1;
+      passwordValues.value[index - 1] = '';
+      nextTick(() => {
+        const prevInput = inputRefs.value[index - 1];
+        if (prevInput) {
+          prevInput.value = '';
+          prevInput.focus();
+        }
+      });
+    }
+  }
+
+  // 禁用左右箭头键
+  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+    event.preventDefault();
+  }
+};
+
+// 处理粘贴事件
+const handlePaste = (index: number, event: ClipboardEvent) => {
+  event.preventDefault();
+  const pasteData = event.clipboardData?.getData('text') || '';
+  const numbers = pasteData.replaceAll(/\D/g, '');
+
+  if (numbers) {
+    // 从当前位置开始填充
+    for (let i = 0; i < numbers.length && index + i < props.length; i++) {
+      passwordValues.value[index + i] = numbers[i];
+      if (inputRefs.value[index + i]) {
+        inputRefs.value[index + i].value = numbers[i];
+      }
+    }
+
+    // 聚焦到最后一个填充的位置或下一个空位
+    const nextEmptyIndex = passwordValues.value.findIndex(
+      (v, i) => i >= index && !v,
+    );
+    if (nextEmptyIndex === -1) {
+      currentIndex.value = props.length - 1;
+      nextTick(() => {
+        inputRefs.value[props.length - 1]?.focus();
+      });
+    } else {
+      currentIndex.value = nextEmptyIndex;
+      nextTick(() => {
+        inputRefs.value[nextEmptyIndex]?.focus();
+      });
+    }
+
+    checkComplete();
+  }
+};
+
+// 处理点击输入框 - 禁止点击跳转
+const handleFocus = (index: number, event: FocusEvent) => {
+  event.preventDefault();
+  // 找到第一个空的输入框位置
+  const firstEmptyIndex = passwordValues.value.findIndex((v) => !v);
+  const targetIndex =
+    firstEmptyIndex === -1 ? props.length - 1 : firstEmptyIndex;
+
+  // 如果点击的不是当前应该输入的位置，则重新聚焦到正确位置
+  if (index !== targetIndex) {
+    nextTick(() => {
+      inputRefs.value[targetIndex]?.focus();
+    });
+  }
+  currentIndex.value = targetIndex;
+};
+
+// 检查是否完成输入
+const checkComplete = () => {
+  const password = passwordValues.value.join('');
+  if (password.length === props.length) {
+    // 延迟一点点，让用户看到最后一个数字输入
+    setTimeout(() => {
+      emit('complete', password);
+    }, 100);
+  }
+};
+
+// 重置密码
+const reset = () => {
+  passwordValues.value = Array.from({ length: props.length }).fill('');
+  inputRefs.value.forEach((input) => {
+    if (input) input.value = '';
+  });
+  currentIndex.value = 0;
+  nextTick(() => {
+    inputRefs.value[0]?.focus();
+  });
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:modelValue', false);
+  emit('cancel');
+};
+
+// 点击遮罩关闭
+const handleMaskClick = (event: MouseEvent) => {
+  if (event.target === event.currentTarget) {
+    handleClose();
+  }
+};
+
+// 监听弹窗打开，自动清空并聚焦第一个输入框
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      nextTick(() => {
+        reset();
+      });
+    }
+  },
+);
+
+// 暴露方法给父组件
+defineExpose({
+  reset,
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        class="password-modal-overlay"
+        @click="handleMaskClick"
+      >
+        <Transition name="slide-up">
+          <div v-if="modelValue" class="password-modal-content">
+            <!-- 头部 -->
+            <div class="modal-header">
+              <h3 class="modal-title">{{ title }}</h3>
+              <button class="close-btn" @click="handleClose">
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- 主体内容 -->
+            <div class="modal-body">
+              <div class="password-input-group">
+                <input
+                  v-for="(value, index) in passwordValues"
+                  :key="index"
+                  :ref="(el) => setInputRef(el, index)"
+                  type="tel"
+                  inputmode="numeric"
+                  maxlength="1"
+                  class="password-input"
+                  :class="{
+                    active: currentIndex === index,
+                    filled: passwordValues[index],
+                  }"
+                  @input="handleInput(index, $event)"
+                  @keydown="handleKeydown(index, $event)"
+                  @paste="handlePaste(index, $event)"
+                  @focus="handleFocus(index, $event)"
+                  @mousedown.prevent
+                />
+              </div>
+
+              <div class="password-tips">
+                <p>为了您的资金安全，请输入支付密码</p>
+              </div>
+            </div>
+
+            <!-- 底部 -->
+            <div class="modal-footer">
+              <button class="cancel-btn" @click="handleClose">取消</button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+// 脉动动画
+@keyframes pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 3px rgb(234 66 0 / 10%);
+  }
+
+  50% {
+    box-shadow: 0 0 0 6px rgb(234 66 0 / 5%);
+  }
+}
+
+// 移动端优化
+@media (max-width: 767px) {
+  .password-input-group {
+    gap: 6px;
+  }
+
+  .password-input {
+    max-width: 45px;
+    height: 48px;
+    font-size: 22px;
+  }
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+// 内容区域滑入动画
+.slide-up-enter-active {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.slide-up-leave-active {
+  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.slide-up-enter-from {
+  transform: translateY(100%);
+}
+
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+// 遮罩层
+.password-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0 0 0 / 50%);
+}
+
+// 弹窗内容
+.password-modal-content {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  background: #fff;
+  border-radius: 20px 20px 0 0;
+  box-shadow: 0 -4px 20px rgb(0 0 0 / 10%);
+}
+
+// 头部
+.modal-header {
+  position: relative;
+  padding: 20px 20px 10px;
+  border-bottom: 1px solid #f0f0f0;
+
+  .modal-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    text-align: center;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    color: #909399;
+    cursor: pointer;
+    outline: none;
+    background: transparent;
+    border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #606266;
+      background: #f5f5f5;
+      border-radius: 50%;
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    svg {
+      display: block;
+    }
+  }
+}
+
+// 主体
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 20px 20px;
+}
+
+.password-input-group {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  width: 100%;
+  max-width: 360px;
+  margin-bottom: 24px;
+
+  @media (min-width: 768px) {
+    gap: 12px;
+    max-width: 420px;
+  }
+}
+
+.password-input {
+  flex: 1;
+  max-width: 50px;
+  height: 50px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+  text-align: center;
+  appearance: none;
+  cursor: pointer;
+  caret-color: transparent;
+  user-select: none;
+  outline: none;
+  background: #f9fafb;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+
+  @media (min-width: 768px) {
+    max-width: 60px;
+    height: 60px;
+    font-size: 28px;
+  }
+
+  &:focus {
+    background: #fff;
+    border-color: #ea4200;
+    box-shadow: 0 0 0 3px rgb(234 66 0 / 10%);
+  }
+
+  &.active {
+    background: #fff;
+    border-color: #ea4200;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  &.filled {
+    // 显示为星号
+    -webkit-text-security: disc;
+    text-security: disc;
+    font-family: text-security-disc;
+    background: #fff;
+    border-color: #ea4200;
+  }
+
+  // iOS 样式重置
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+
+  // 禁用选中效果
+  &::selection {
+    background: transparent;
+  }
+}
+
+.password-tips {
+  text-align: center;
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #6b7280;
+  }
+}
+
+// 底部
+.modal-footer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0 20px 20px;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+
+  .cancel-btn {
+    width: 100%;
+    max-width: 360px;
+    height: 44px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #6b7280;
+    cursor: pointer;
+    outline: none;
+    background: #f3f4f6;
+    border: none;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #374151;
+      background: #e5e7eb;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+</style>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+
+import { fenToYuan } from '@vben/utils';
 import {
   CreditCard,
@@ -11,9 +13,10 @@ import {
 import { ElButton, ElDialog, ElIcon, ElMessage, ElRadio } from 'element-plus';
 import qs from 'qs';
-import { listUserCards, orderInfo, orderPayment } from '#/api';
+import { getOpenId, listUserCards, orderInfo, orderPayment } from '#/api';
 import EnvironmentDetector from '#/composables/environmentDetector';
+import PasswordInput from './component/PasswordInput.vue';
 // 类型定义
 interface Card {
   customerId: number | string;
@@ -33,15 +36,20 @@ const detector = new EnvironmentDetector();
 detector.logEnvironment();
 const route = useRoute();
+const router = useRouter();
 const loadLoading = ref(false);
+const showPasswordDialog = ref(false);
 const token = ref<string>('');
 const openId = ref<string>('');
+const code = ref<string>('');
 const env = ref();
 env.value = detector.env;
+const REDIRECT_CHANNEL_ID = 29;
+
 // 检查参数是否有效
 const hasValidParams = computed(() => {
-  return !!(token.value && openId.value);
+  return !!(token.value && code.value);
 });
 const cardList = ref<Card[]>([]);
@@ -55,10 +63,12 @@ const showCardDialog = ref&lt;boolean&gt;(false);
 const selectedCard = ref<Card | null>(null);
 const loading = ref<boolean>(false);
 const paymentSuccess = ref<boolean>(false);
+const payErrorDialog = ref<boolean>(false);
+const errorMessage = ref<string>('支付失败');
 // 计算显示金额
 const displayAmount = computed(() => {
-  return orderInfoData.value?.amount || 0;
+  return fenToYuan(orderInfoData.value?.amount || 0);
 });
 // 获取支付方式列表
@@ -108,6 +118,20 @@ const getPaymentIcon = (channelName: string) =&gt; {
   }
 };
+const jumpTest = () => {
+  // jWeixin.miniProgram.redirectTo({
+  //   url: `/packageA/pages/wePay/index?amount=${displayAmount.value}&businessType=3&redirect=${true}`,
+  // });
+  router.push({
+    path: '/paymentSuccess',
+    query: {
+      amount: displayAmount.value,
+      success: 'true',
+      payType: '园区卡支付',
+    },
+  });
+};
+
 // 获取支付方式描述
 const getPaymentDesc = (pipeline: Pipeline) => {
   if (
@@ -128,6 +152,19 @@ const getPaymentDesc = (pipeline: Pipeline) =&gt; {
   }
 };
+const loadOpenId = async () => {
+  try {
+    if (openId.value) {
+      payBtnShow.value = true;
+      return;
+    }
+    const data = await getOpenId(currentPayType.value?.pipelineId, code.value);
+    openId.value = data || null;
+    // 其他支付方式直接显示支付按钮\
+    payBtnShow.value = true;
+  } catch {}
+};
+
 // 方法
 const handlepayBtnShowClick = async (pipeline: Pipeline) => {
   currentPaymentMethod.value = pipeline.pipelineId;
@@ -144,8 +181,11 @@ const handlepayBtnShowClick = async (pipeline: Pipeline) =&gt; {
     }
     showCardDialog.value = true;
   } else {
-    // 其他支付方式直接显示支付按钮
-    payBtnShow.value = true;
+    if (pipeline.channelId === REDIRECT_CHANNEL_ID) {
+      payBtnShow.value = true;
+      return;
+    }
+    await loadOpenId();
   }
 };
@@ -156,12 +196,73 @@ const handleCardSelect = (card: Card) =&gt; {
   payBtnShow.value = true;
 };
+// 处理密码输入取消
+const handlePasswordCancel = () => {
+  showPasswordDialog.value = false;
+  loading.value = false;
+};
+
+const handlePasswordComplete = async (password: string) => {
+  showPasswordDialog.value = false;
+  try {
+    const params = {
+      tradeId: orderInfoData.value.tradeId,
+      pipelineId: currentPayType.value.pipelineId,
+      params: {
+        accountId: selectedCard.value?.accountId,
+        cardNo: selectedCard.value?.cardNo,
+        password,
+      },
+    };
+
+    const data = await orderPayment(params);
+    router.push({
+      path: '/paymentSuccess',
+      query: {
+        amount: displayAmount.value,
+        success: 'true',
+        payType: '园区卡支付',
+      },
+    });
+  } catch (error) {
+    errorMessage.value = error?.message || '支付失败';
+    payErrorDialog.value = true;
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
 const queryPayment = async () => {
-  if (!openId.value || !currentPayType.value) {
+  if (
+    !(currentPayType.value.channelId === REDIRECT_CHANNEL_ID) &&
+    !openId.value
+  ) {
     ElMessage.error('支付参数不完整');
     return false;
   }
-
+  // 跳转云商户支付
+  if (currentPayType.value.channelId === REDIRECT_CHANNEL_ID) {
+    const params = {
+      tradeId: orderInfoData.value.tradeId,
+      amount: orderInfoData.value.amount,
+      pipelineId: currentPayType.value.pipelineId,
+      goods: orderInfoData.value.goods,
+      payType: currentPayType.value.channelName,
+      redirect: true,
+      payee: orderInfoData.value.mchName,
+      redirectUrl: orderInfoData.value.redirectUrl,
+    };
+    const queryString = qs.stringify(params);
+    if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
+      jWeixin.miniProgram.navigateTo({
+        url: `/packageA/pages/wxPay/index?${queryString}`,
+      });
+      loading.value = false;
+    }
+    return false;
+  }
+  // redirect: currentPayType.value.channelId === REDIRECT_CHANNEL_ID
   try {
     const params = {
       tradeId: orderInfoData.value.tradeId,
@@ -170,19 +271,27 @@ const queryPayment = async () =&gt; {
     };
     const data = await orderPayment(params);
-    const queryString = qs.stringify(data);
+    const pramsData = {
+      ...data,
+      goods: orderInfoData.value.goods,
+      amount: orderInfoData.value.amount,
+      payType: currentPayType.value.channelName,
+      redirectUrl: orderInfoData.value.redirectUrl,
+      payee: orderInfoData.value.mchName,
+    };
+    const queryString = qs.stringify(pramsData);
     // 跳转到微信支付页面
     if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
-      jWeixin.miniProgram.redirectTo({
-        url: `/packageA/pages/wePay/index?${queryString}`,
+      jWeixin.miniProgram.navigateTo({
+        url: `/packageA/pages/wxPay/index?${queryString}`,
       });
+      loading.value = false;
     } else {
       console.warn('非微信小程序环境');
       // 模拟支付成功
       setTimeout(() => {
         loading.value = false;
-        paymentSuccess.value = true;
         setTimeout(() => {
           paymentSuccess.value = false;
           resetPaymentState();
@@ -216,28 +325,8 @@ const handlePay = async () =&gt; {
   if (isCardPayment) {
     // 园区卡支付逻辑
     try {
-      const params = {
-        tradeId: orderInfoData.value.tradeId,
-        pipelineId: currentPayType.value.pipelineId,
-        params: {
-          openId: openId.value,
-          cardNo: selectedCard.value?.cardNo,
-        },
-      };
-
-      const data = await orderPayment(params);
-      loading.value = false;
-      paymentSuccess.value = true;
-
-      setTimeout(() => {
-        paymentSuccess.value = false;
-        resetPaymentState();
-      }, 2000);
-    } catch (error) {
-      console.error('园区卡支付失败:', error);
-      ElMessage.error('支付失败，请重试');
-      loading.value = false;
-    }
+      showPasswordDialog.value = true;
+    } catch {}
   } else {
     // 其他支付方式（微信、支付宝等）
     await queryPayment();
@@ -292,16 +381,17 @@ const getListUserCards = async () =&gt; {
 const init = async () => {
   token.value = (route.query?.token as string) || '';
   openId.value = (route.query?.openId as string) || '';
-
-  if (!hasValidParams.value) {
+  code.value = (route.query?.code as string) || '';
+  if (!token.value) {
     return;
   }
-
   try {
     loadLoading.value = true;
     await getOrderInfo();
-  } catch {
-    ElMessage.error('加载订单信息失败');
+  } catch (error) {
+    // ElMessage.error(error?.message || '获取订单信息失败');
+    errorMessage.value = error?.message || '获取订单信息失败';
+    payErrorDialog.value = true;
   } finally {
     loadLoading.value = false;
   }
@@ -442,7 +532,6 @@ init();
           </div>
         </div>
       </div>
-
       <!-- 底部支付按钮 -->
       <div class="payment-footer">
         <ElButton
@@ -480,9 +569,7 @@ init();
           </div>
           <div class="card-balance">
             <p class="balance-label">余额</p>
-            <p class="balance-value">
-              ¥{{ (Number(card.amount) / 100).toFixed(2) }}
-            </p>
+            <p class="balance-value">¥{{ card.amount }}</p>
           </div>
         </div>
         <div v-if="cardList.length === 0" class="empty-card">
@@ -494,6 +581,39 @@ init();
       </template>
     </ElDialog>
+    <ElDialog
+      v-model="payErrorDialog"
+      title=""
+      width="90%"
+      :style="{ maxWidth: '500px' }"
+      class="card-dialog"
+      :close-on-click-modal="true"
+    >
+      <div class="color-[#333] items-center">
+        <img src="/fail.png" class="m-auto block h-[64px] w-[64px]" />
+        <div class="py-[20px] text-center text-[20px] font-bold">支付失败</div>
+        <div class="w-full overflow-y-auto text-left text-[18px] leading-6">
+          {{ errorMessage }}
+        </div>
+        <div class="mt-10">
+          <ElButton
+            plain
+            @click="payErrorDialog = false"
+            class="confirm-button"
+          >
+            确 认
+          </ElButton>
+        </div>
+      </div>
+    </ElDialog>
+
+    <!-- 支付密码输入弹窗 -->
+    <PasswordInput
+      v-model="showPasswordDialog"
+      @complete="handlePasswordComplete"
+      @cancel="handlePasswordCancel"
+    />
+
     <!-- 支付成功对话框 -->
     <ElDialog
       v-model="paymentSuccess"
@@ -994,4 +1114,29 @@ init();
     color: #6b7280;
   }
 }
+
+.confirm-button {
+  width: 100%;
+  height: 42px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ea4200;
+  background: #fff;
+  border: 1px solid #ea4200;
+  border-radius: 21px;
+
+  &:hover:not(:disabled) {
+    background: #f7f7f7;
+    box-shadow: 0 6px 20px rgb(234 66 0 / 40%);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
 </style>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { ElButton } from 'element-plus';
+
+import EnvironmentDetector from '#/composables/environmentDetector';
+
+const route = useRoute();
+const loadLoading = ref(false);
+
+const queryData = ref<any>({});
+const detector = ref();
+const init = async () => {
+  queryData.value = route.query || {};
+};
+
+const handleBack = () => {
+  if (
+    typeof jWeixin !== 'undefined' &&
+    jWeixin.miniProgram &&
+    detector.value?.env.isMiniProgram
+  ) {
+    jWeixin.miniProgram.switchTab({
+      url: `/pages/newhome/newhome`,
+    });
+  }
+};
+
+onMounted(() => {
+  init();
+  detector.value = new EnvironmentDetector();
+});
+</script>
+
+<template>
+  <div class="cashier-container" v-loading="loadLoading">
+    {{ detector?.env }}
+    <!-- 正常支付界面 -->
+    <div class="cashier-wrapper">
+      <div class="pt-[40px]">
+        <div class="flex flex-col items-center justify-center">
+          <img src="/success.png" class="w-[64px]" />
+          <p class="color-[#49250B] mt-2 text-[18px] font-bold">支付成功</p>
+        </div>
+        <div class="color-[#333] flex flex-col gap-4 p-[40px]">
+          <div class="flex justify-between">
+            <div>支付方式</div>
+            <div>{{ queryData?.payType }}</div>
+          </div>
+          <div class="flex justify-between">
+            <div>支付金额</div>
+            <div>{{ queryData?.amount }} 元</div>
+          </div>
+          <div class="mt-10 flex justify-between">
+            <ElButton
+              class="pay-button"
+              plain
+              type="primary"
+              size="large"
+              @click="handleBack"
+            >
+              完成
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cashier-container {
+  min-height: 100vh;
+  background: linear-gradient(
+    to bottom,
+    #fff9f1 0%,
+    #ffe9d4 20%,
+    #ffe3c8 29%,
+    #fff 45%,
+    #fff 100%
+  );
+}
+
+.cashier-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 500px;
+  min-height: 100vh;
+  margin: 0 auto;
+}
+
+.pay-button {
+  width: 100%;
+  height: 42px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ea4200;
+  background: #fff;
+  border: 1px solid #ea4200;
+  border-radius: 21px;
+
+  &:hover:not(:disabled) {
+    background: #f7f7f7;
+    box-shadow: 0 6px 20px rgb(234 66 0 / 40%);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+</style>
@@ -17,7 +17,7 @@ export default defineConfig(async () =&gt; {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://10.28.3.24:8686',
+            target: 'http://10.28.3.34:8686',
             ws: true,
           },
         },
@@ -42,3 +42,36 @@ export function getNestedValue&lt;T&gt;(obj: T, path: string): any {
   return current;
 }
+
+/**
+ * 分转元 + 千分位格式化（TS 严格模式安全）
+ * @param amount 分
+ * @param decimals 小数位，默认 2
+ */
+export function fenToYuan(
+  amount: bigint | number | string,
+  decimals: number = 2,
+): string {
+  if (amount === null || amount === undefined || amount === '') {
+    return (0).toFixed(decimals);
+  }
+
+  const num = Number(amount);
+  if (Number.isNaN(num)) {
+    return (0).toFixed(decimals);
+  }
+
+  const isNegative = num < 0;
+  const yuan = Math.abs(num) / 100;
+
+  const fixed = yuan.toFixed(decimals);
+
+  // 👇 关键修复点
+  const parts = fixed.split('.');
+  const integer = parts[0] ?? '0';
+  const decimal = parts[1];
+
+  const thousand = integer.replaceAll(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  return `${isNegative ? '-' : ''}${thousand}${decimal ? `.${decimal}` : ''}`;
+}
@@ -9,7 +9,7 @@ import axios from &#39;axios&#39;;
 export const defaultResponseInterceptor = ({
   codeField = 'code',
   dataField = 'data',
-  successCode = 0,
+  successCode = 200,
 }: {
   /** 响应数据中代表访问结果的字段名 */
   codeField: string;
@@ -131,6 +131,7 @@ export const errorMessageResponseInterceptor = (
       }
       let errorMessage = '';
+      debugger;
       const status = error?.response?.status;
       switch (status) {
@@ -158,7 +159,7 @@ export const errorMessageResponseInterceptor = (
           errorMessage = $t('ui.fallback.http.internalServerError');
         }
       }
-      makeErrorMessage?.(errorMessage, error);
+      // makeErrorMessage?.(errorMessage, error);
       return Promise.reject(error);
     },
   };