收银台微信支付

tianwu
1 parent a16b16b8
Showing 8 changed files with 649 additions and 232 deletions
apps/web-payment/.env
apps/web-payment/index.html
apps/web-payment/src/api/index.ts
apps/web-payment/src/api/payment.ts
apps/web-payment/src/api/request.ts
apps/web-payment/src/router/routes/core.ts
apps/web-payment/src/views/payment/index.vue
apps/web-payment/vite.config.mts
 # 应用标题
-VITE_APP_TITLE=Vben Admin Ele
+VITE_APP_TITLE=收银台
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-payment
@@ -17,6 +17,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" ></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
 export * from './core';
+export * from './payment';
+import { requestClient } from '#/api/request';
+
+export namespace PaymentApi {
+  export interface orderPaymentParams {
+    tradeId: string;
+    pipelineId: string;
+    params: { openId: string };
+  }
+}
+
+/**
+ * 订单
+ * @param data
+ * @returns
+ */
+export async function orderPayment(data: PaymentApi.orderPaymentParams) {
+  return requestClient.post<any>('/payment/cashier/orderPayment', data);
+}
+
+/**
+ * 获取收银台信息
+ * @param data
+ * @returns
+ */
+export async function orderInfo(token: string) {
+  return requestClient.post<any>(`/payment/cashier/orderInfo?token=${token}`);
+}
+
+/**
+ *
+ * @param pipelineId 收银台支付方式的pipelineId
+ * @param userId userId
+ * @returns
+ */
+export async function listUserCards(
+  pipelineId: number | string,
+  userId: number | string,
+) {
+  return requestClient.post<any>(
+    `/card/payment/listUserCards?pipelineId=${pipelineId}&userId=${userId}`,
+  );
+}
@@ -76,7 +76,7 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
     defaultResponseInterceptor({
       codeField: 'code',
       dataField: 'data',
-      successCode: 0,
+      successCode: '200',
     }),
   );
@@ -40,7 +40,7 @@ const coreRoutes: RouteRecordRaw[] = [
     component: () => import('#/views/payment/index.vue'),
     meta: {
       icon: 'lucide:area-chart',
-      title: '收银台',
+      title: '订单支付',
     },
   },
 ];
 <script setup lang="ts">
-import { ref } from 'vue';
-
-import { ArrowRight, CreditCard, SuccessFilled } from '@element-plus/icons-vue';
-import { ElButton, ElCard, ElDialog, ElIcon, ElMessage } from 'element-plus';
-
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import {
+  CreditCard,
+  SuccessFilled,
+  Wallet,
+  WarningFilled,
+} from '@element-plus/icons-vue';
+import { ElButton, ElDialog, ElIcon, ElMessage, ElRadio } from 'element-plus';
+import qs from 'qs';
+
+import { listUserCards, orderInfo, orderPayment } from '#/api';
 import EnvironmentDetector from '#/composables/environmentDetector';
+
 // 类型定义
 interface Card {
-  id: string;
-  cardNo: string;
-  balance: number;
-  holderName: string;
+  customerId: number | string;
+  accountId: number | string;
+  cardNo: number | string;
+  name: string;
+  amount: number | string;
+}
+
+interface Pipeline {
+  pipelineId: number;
+  channelId: number;
+  channelName: string;
 }
-// 创建检测器实例
 const detector = new EnvironmentDetector();
 detector.logEnvironment();
-// 模拟的园区卡数据
-const mockCards: Card[] = [
-  {
-    id: '1',
-    cardNo: '6225 8801 2345 6789',
-    balance: 1580.5,
-    holderName: '张三',
-  },
-  { id: '2', cardNo: '6225 8801 9876 5432', balance: 3200, holderName: '李四' },
-  {
-    id: '3',
-    cardNo: '6225 8801 1111 2222',
-    balance: 500.8,
-    holderName: '王五',
-  },
-];
+const route = useRoute();
+const loadLoading = ref(false);
+const token = ref<string>('');
+const openId = ref<string>('');
+const env = ref();
+env.value = detector.env;
+
+// 检查参数是否有效
+const hasValidParams = computed(() => {
+  return !!(token.value && openId.value);
+});
+
+const cardList = ref<Card[]>([]);
+const orderInfoData = ref<any>(null);
 // 响应式数据
-const amount = ref<number>(128.5);
+const currentPayType = ref<null | Pipeline>(null);
 const payBtnShow = ref<boolean>(false);
-const currentPaymentMethod = ref<string>('');
+const currentPaymentMethod = ref<null | number>(null); // 改为存储 pipelineId
 const showCardDialog = ref<boolean>(false);
 const selectedCard = ref<Card | null>(null);
 const loading = ref<boolean>(false);
 const paymentSuccess = ref<boolean>(false);
+// 计算显示金额
+const displayAmount = computed(() => {
+  return orderInfoData.value?.amount || 0;
+});
+
+// 获取支付方式列表
+const paymentPipelines = computed(() => {
+  return orderInfoData.value?.pipelines || [];
+});
+
+// 根据渠道名称获取图标和颜色
+const getPaymentIcon = (channelName: string) => {
+  const lowerName = channelName.toLowerCase();
+  if (lowerName.includes('微信')) {
+    return {
+      type: 'wechat',
+      icon: 'wechat',
+      color: '#10b981',
+      activeColor: '#EA4200',
+      bgColor: '#d1fae5',
+      activeBgColor: '#fee2e2',
+    };
+  } else if (lowerName.includes('园区卡') || lowerName.includes('卡')) {
+    return {
+      type: 'card',
+      icon: 'card',
+      color: '#10b981',
+      activeColor: '#EA4200',
+      bgColor: '#d1fae5',
+      activeBgColor: '#fee2e2',
+    };
+  } else if (lowerName.includes('支付宝')) {
+    return {
+      type: 'alipay',
+      icon: 'wallet',
+      color: '#1677ff',
+      activeColor: '#EA4200',
+      bgColor: '#e6f4ff',
+      activeBgColor: '#fee2e2',
+    };
+  } else {
+    return {
+      type: 'other',
+      icon: 'wallet',
+      color: '#8b5cf6',
+      activeColor: '#EA4200',
+      bgColor: '#ede9fe',
+      activeBgColor: '#fee2e2',
+    };
+  }
+};
+
+// 获取支付方式描述
+const getPaymentDesc = (pipeline: Pipeline) => {
+  if (
+    pipeline.pipelineId === currentPaymentMethod.value &&
+    selectedCard.value
+  ) {
+    return `卡号：${selectedCard.value.cardNo}`;
+  }
+  const channelName = pipeline.channelName.toLowerCase();
+  if (channelName.includes('微信')) {
+    return '推荐使用';
+  } else if (channelName.includes('园区卡') || channelName.includes('卡')) {
+    return '点击选择园区卡';
+  } else if (channelName.includes('支付宝')) {
+    return '快捷支付';
+  } else {
+    return '安全便捷';
+  }
+};
+
 // 方法
-const handlepayBtnShowClick = (method: string) => {
-  currentPaymentMethod.value = method;
+const handlepayBtnShowClick = async (pipeline: Pipeline) => {
+  currentPaymentMethod.value = pipeline.pipelineId;
+  currentPayType.value = pipeline;
   payBtnShow.value = false;
-  if (method === 'card') {
+
+  const channelName = pipeline.channelName.toLowerCase();
+
+  // 判断是否是园区卡支付
+  if (channelName.includes('园区卡') || channelName.includes('卡支付')) {
+    // 如果还没有加载园区卡列表，先加载
+    if (cardList.value.length === 0) {
+      await getListUserCards();
+    }
     showCardDialog.value = true;
   } else {
+    // 其他支付方式直接显示支付按钮
     payBtnShow.value = true;
   }
 };
@@ -57,144 +152,310 @@ const handlepayBtnShowClick = (method: string) =&gt; {
 const handleCardSelect = (card: Card) => {
   selectedCard.value = card;
   showCardDialog.value = false;
-  ElMessage.success(`已选择 ${card.holderName} 的园区卡`);
+  ElMessage.success(`已选择 ${card.name} 的园区卡`);
   payBtnShow.value = true;
-  // 园区卡选择后自动支付
-  // handlePay();
+};
+
+const queryPayment = async () => {
+  if (!openId.value || !currentPayType.value) {
+    ElMessage.error('支付参数不完整');
+    return false;
+  }
+
+  try {
+    const params = {
+      tradeId: orderInfoData.value.tradeId,
+      pipelineId: currentPayType.value.pipelineId,
+      params: { openId: openId.value },
+    };
+
+    const data = await orderPayment(params);
+    const queryString = qs.stringify(data);
+
+    // 跳转到微信支付页面
+    if (typeof jWeixin !== 'undefined' && jWeixin.miniProgram) {
+      jWeixin.miniProgram.redirectTo({
+        url: `/packageA/pages/wePay/index?${queryString}`,
+      });
+    } else {
+      console.warn('非微信小程序环境');
+      // 模拟支付成功
+      setTimeout(() => {
+        loading.value = false;
+        paymentSuccess.value = true;
+        setTimeout(() => {
+          paymentSuccess.value = false;
+          resetPaymentState();
+        }, 2000);
+      }, 1500);
+    }
+  } catch (error) {
+    console.error('支付失败:', error);
+    ElMessage.error('支付请求失败，请重试');
+    loading.value = false;
+  }
 };
 const handlePay = async () => {
+  if (!currentPayType.value) {
+    ElMessage.warning('请先选择支付方式');
+    return;
+  }
+
+  const channelName = currentPayType.value.channelName.toLowerCase();
+  const isCardPayment =
+    channelName.includes('园区卡') || channelName.includes('卡支付');
+
+  if (isCardPayment && !selectedCard.value) {
+    ElMessage.warning('请先选择园区卡');
+    return;
+  }
+
   loading.value = true;
-  // 模拟支付处理
-  setTimeout(() => {
-    loading.value = false;
-    paymentSuccess.value = true;
-
-    // 2秒后重置状态
-    setTimeout(() => {
-      paymentSuccess.value = false;
-      payBtnShow.value = false;
-      selectedCard.value = null;
-    }, 2000);
-  }, 1500);
+  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;
+    }
+  } else {
+    // 其他支付方式（微信、支付宝等）
+    await queryPayment();
+  }
+};
+
+const resetPaymentState = () => {
+  payBtnShow.value = false;
+  currentPaymentMethod.value = null;
+  selectedCard.value = null;
+  currentPayType.value = null;
 };
 const handleCloseDialog = () => {
   showCardDialog.value = false;
   payBtnShow.value = false;
 };
+
+// 获取订单信息 支付方式等数据
+const getOrderInfo = async () => {
+  try {
+    const data = await orderInfo(token.value);
+    orderInfoData.value = data || {};
+  } catch (error) {
+    console.error('获取订单信息失败:', error);
+    throw error;
+  }
+};
+
+// 查询园区卡列表
+const getListUserCards = async () => {
+  if (!currentPayType.value || !orderInfoData.value.userId) {
+    return;
+  }
+
+  try {
+    const data = await listUserCards(
+      currentPayType.value.pipelineId,
+      orderInfoData.value.userId,
+    );
+    cardList.value = data || [];
+
+    if (cardList.value.length === 0) {
+      ElMessage.warning('未找到可用的园区卡');
+    }
+  } catch (error) {
+    console.error('获取园区卡列表失败:', error);
+    ElMessage.error('获取园区卡列表失败');
+  }
+};
+
+const init = async () => {
+  token.value = (route.query?.token as string) || '';
+  openId.value = (route.query?.openId as string) || '';
+
+  if (!hasValidParams.value) {
+    return;
+  }
+
+  try {
+    loadLoading.value = true;
+    await getOrderInfo();
+  } catch {
+    ElMessage.error('加载订单信息失败');
+  } finally {
+    loadLoading.value = false;
+  }
+};
+
+init();
 </script>
 <template>
-  <div class="cashier-container">
-    <div class="cashier-wrapper">
-      <!-- 头部 -->
-      <div class="header">
-        <div class="icon-wrapper">
-          <ElIcon :size="32" color="#fff">
-            <CreditCard />
+  <div class="cashier-container" v-loading="loadLoading">
+    <!-- 无效参数提示 -->
+    <div v-if="!hasValidParams" class="error-container">
+      <div class="error-content">
+        <div class="error-icon">
+          <ElIcon :size="64" color="#f59e0b">
+            <WarningFilled />
           </ElIcon>
         </div>
-        <h1 class="title">地利收银台</h1>
-        <p class="subtitle">请选择支付方式完成订单</p>
+        <h3 class="error-title">未查询到有效的订单信息</h3>
+        <p class="error-desc">请确认订单链接是否正确或重新发起支付</p>
+        <div class="error-tips">
+          <p>可能的原因：</p>
+          <ul>
+            <li>订单链接已过期</li>
+            <li>订单参数不完整</li>
+            <li>网络连接异常</li>
+          </ul>
+        </div>
       </div>
+    </div>
-      <!-- 订单金额卡片 -->
-      <ElCard class="amount-card" shadow="always">
-        <div class="amount-content">
-          <p class="amount-label">订单金额</p>
-          <p class="amount-value">¥{{ amount.toFixed(2) }}</p>
+    <!-- 正常支付界面 -->
+    <div v-else class="cashier-wrapper">
+      <div class="cashier-content">
+        <!-- 头部 -->
+        <div class="header">
+          <h1 class="title">地利收银台</h1>
+          <p class="subtitle">快捷·安全</p>
         </div>
-      </ElCard>
-
-      <!-- 支付方式选择 -->
-      <ElCard class="payment-card" shadow="always">
-        <template #header>
-          <span class="card-header">选择支付方式</span>
-        </template>
-        <!-- 微信支付 -->
-        <div
-          class="payment-item"
-          :class="{ active: currentPaymentMethod === 'wechat' }"
-          @click="handlepayBtnShowClick('wechat')"
-        >
-          <div class="payment-item-left">
-            <div
-              class="payment-icon"
-              :class="{ active: currentPaymentMethod === 'wechat' }"
-            >
-              <svg class="wechat-icon" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                  d="M8.5 9.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5zm7 0c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-1.7 0-3.3-.5-4.7-1.3l-4.8 1.5 1.5-4.5C3.4 14.5 3 13.3 3 12c0-5 4-9 9-9s9 4 9 9-4 9-9 9z"
-                />
-              </svg>
-            </div>
-            <div class="payment-info">
-              <p class="payment-name">微信支付</p>
-              <p class="payment-desc">快捷安全</p>
-            </div>
+        <!-- 订单金额卡片 -->
+        <div class="amount-card">
+          <div class="amount-content">
+            <p class="amount-label">订单金额</p>
+            <p class="amount-value">¥{{ displayAmount }}</p>
+            <p class="goods-info">{{ orderInfoData?.goods || '商品信息' }}</p>
           </div>
-          <ElIcon
-            :size="20"
-            :color="currentPaymentMethod === 'wechat' ? '#fff' : '#909399'"
-          >
-            <ArrowRight />
-          </ElIcon>
         </div>
-        <!-- 园区卡支付 -->
-        <div
-          class="payment-item"
-          :class="{ active: currentPaymentMethod === 'card' }"
-          @click="handlepayBtnShowClick('card')"
-        >
-          <div class="payment-item-left">
-            <div
-              class="payment-icon"
-              :class="{ active: currentPaymentMethod === 'card' }"
-            >
-              <ElIcon
-                :size="28"
-                :color="currentPaymentMethod === 'card' ? '#fff' : '#10b981'"
+        <!-- 支付方式选择 -->
+        <div class="payment-section">
+          <div class="section-header">
+            <span class="section-title">选择支付方式</span>
+          </div>
+
+          <!-- 循环渲染支付方式 -->
+          <div
+            v-for="pipeline in paymentPipelines"
+            :key="pipeline.pipelineId"
+            class="payment-item"
+            :class="{ active: currentPaymentMethod === pipeline.pipelineId }"
+            @click="handlepayBtnShowClick(pipeline)"
+          >
+            <div class="payment-item-left">
+              <div
+                class="payment-icon"
+                :class="{
+                  active: currentPaymentMethod === pipeline.pipelineId,
+                }"
+                :style="{
+                  backgroundColor:
+                    currentPaymentMethod === pipeline.pipelineId
+                      ? getPaymentIcon(pipeline.channelName).activeBgColor
+                      : getPaymentIcon(pipeline.channelName).bgColor,
+                }"
               >
-                <CreditCard />
-              </ElIcon>
-            </div>
-            <div class="payment-info">
-              <p class="payment-name">园区卡支付</p>
-              <p class="payment-desc">
-                {{
-                  selectedCard
-                    ? `卡号：${selectedCard.cardNo}`
-                    : '点击选择园区卡'
-                }}
-              </p>
+                <!-- 微信支付图标 -->
+                <svg
+                  v-if="getPaymentIcon(pipeline.channelName).icon === 'wechat'"
+                  class="payment-svg-icon"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  :style="{
+                    color:
+                      currentPaymentMethod === pipeline.pipelineId
+                        ? getPaymentIcon(pipeline.channelName).activeColor
+                        : getPaymentIcon(pipeline.channelName).color,
+                  }"
+                >
+                  <path
+                    d="M8.5 9.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5zm7 0c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-1.7 0-3.3-.5-4.7-1.3l-4.8 1.5 1.5-4.5C3.4 14.5 3 13.3 3 12c0-5 4-9 9-9s9 4 9 9-4 9-9 9z"
+                  />
+                </svg>
+
+                <!-- 园区卡图标 -->
+                <ElIcon
+                  v-else-if="
+                    getPaymentIcon(pipeline.channelName).icon === 'card'
+                  "
+                  :size="28"
+                  :color="
+                    currentPaymentMethod === pipeline.pipelineId
+                      ? getPaymentIcon(pipeline.channelName).activeColor
+                      : getPaymentIcon(pipeline.channelName).color
+                  "
+                >
+                  <CreditCard />
+                </ElIcon>
+
+                <!-- 其他支付方式图标 -->
+                <ElIcon
+                  v-else
+                  :size="28"
+                  :color="
+                    currentPaymentMethod === pipeline.pipelineId
+                      ? getPaymentIcon(pipeline.channelName).activeColor
+                      : getPaymentIcon(pipeline.channelName).color
+                  "
+                >
+                  <Wallet />
+                </ElIcon>
+              </div>
+              <div class="payment-info">
+                <p class="payment-name">{{ pipeline.channelName }}</p>
+                <p class="payment-desc">{{ getPaymentDesc(pipeline) }}</p>
+              </div>
             </div>
+            <ElRadio
+              :model-value="currentPaymentMethod"
+              :label="pipeline.pipelineId"
+              size="large"
+            />
+          </div>
+
+          <!-- 无支付方式提示 -->
+          <div v-if="paymentPipelines.length === 0" class="no-payment">
+            <p>暂无可用支付方式</p>
           </div>
-          <ElIcon
-            :size="20"
-            :color="currentPaymentMethod === 'card' ? '#fff' : '#909399'"
-          >
-            <ArrowRight />
-          </ElIcon>
         </div>
-      </ElCard>
+      </div>
-      <!-- 微信支付确认按钮 -->
-      <transition name="slide-fade">
+      <!-- 底部支付按钮 -->
+      <div class="payment-footer">
         <ElButton
-          v-if="payBtnShow === true"
+          :disabled="!payBtnShow"
           class="pay-button"
-          type="success"
+          type="primary"
           size="large"
           :loading="loading"
           @click="handlePay"
         >
-          {{ loading ? '处理中...' : `确认支付 ¥${amount.toFixed(2)}` }}
+          {{ loading ? '处理中...' : `确认支付 ¥${displayAmount}` }}
         </ElButton>
-      </transition>
+      </div>
     </div>
     <!-- 园区卡选择弹窗 -->
@@ -208,20 +469,25 @@ const handleCloseDialog = () =&gt; {
     >
       <div class="card-list-dialog">
         <div
-          v-for="card in mockCards"
-          :key="card.id"
+          v-for="card in cardList"
+          :key="card.cardNo"
           class="card-item-dialog"
           @click="handleCardSelect(card)"
         >
           <div class="card-item-info">
-            <p class="card-holder">{{ card.holderName }}</p>
+            <p class="card-holder">{{ card.name }}</p>
             <p class="card-number">{{ card.cardNo }}</p>
           </div>
           <div class="card-balance">
             <p class="balance-label">余额</p>
-            <p class="balance-value">¥{{ card.balance.toFixed(2) }}</p>
+            <p class="balance-value">
+              ¥{{ (Number(card.amount) / 100).toFixed(2) }}
+            </p>
           </div>
         </div>
+        <div v-if="cardList.length === 0" class="empty-card">
+          <p>暂无可用园区卡</p>
+        </div>
       </div>
       <template #footer>
         <ElButton @click="handleCloseDialog">取消</ElButton>
@@ -296,39 +562,113 @@ const handleCloseDialog = () =&gt; {
 .cashier-container {
   min-height: 100vh;
+  background: linear-gradient(
+    to bottom,
+    #fff9f1 0%,
+    #ffe9d4 20%,
+    #ffe3c8 29%,
+    #f7f7f7 45%,
+    #f7f7f7 100%
+  );
+}
+
+// 错误提示容器
+.error-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
   padding: 20px;
-  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
+}
-  @media (min-width: 768px) {
-    padding: 40px;
+.error-content {
+  max-width: 500px;
+  padding: 40px 30px;
+  text-align: center;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
+  animation: fadeIn 0.5s ease-out;
+
+  .error-icon {
+    margin-bottom: 24px;
+    animation: bounceIn 0.6s ease-out;
+  }
+
+  .error-title {
+    margin: 0 0 12px;
+    font-size: 22px;
+    font-weight: bold;
+    color: #1f2937;
+  }
+
+  .error-desc {
+    margin: 0 0 24px;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #6b7280;
+  }
+
+  .error-tips {
+    padding: 20px;
+    text-align: left;
+    background: #fef3c7;
+    border-radius: 12px;
+
+    p {
+      margin: 0 0 12px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #92400e;
+    }
+
+    ul {
+      padding-left: 20px;
+      margin: 0;
+
+      li {
+        margin-bottom: 8px;
+        font-size: 13px;
+        line-height: 1.5;
+        color: #78350f;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }
 .cashier-wrapper {
+  display: flex;
+  flex-direction: column;
   max-width: 500px;
+  min-height: 100vh;
   margin: 0 auto;
 }
+.cashier-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+
+  @media (min-width: 768px) {
+    padding: 40px 20px 20px;
+  }
+}
+
 // 头部样式
 .header {
+  display: flex;
+  align-items: end;
+  justify-content: flex-start;
   margin-bottom: 30px;
   text-align: center;
   animation: fadeIn 0.5s ease-out;
-  .icon-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 64px;
-    height: 64px;
-    margin-bottom: 16px;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    border-radius: 50%;
-    box-shadow: 0 10px 30px rgb(16 185 129 / 30%);
-  }
-
   .title {
-    margin: 0 0 8px;
+    margin-right: 10px;
     font-size: 28px;
     font-weight: bold;
     color: #1f2937;
@@ -339,7 +679,7 @@ const handleCloseDialog = () =&gt; {
   }
   .subtitle {
-    margin: 0;
+    margin-top: 18px;
     font-size: 14px;
     color: #6b7280;
   }
@@ -347,16 +687,23 @@ const handleCloseDialog = () =&gt; {
 // 金额卡片
 .amount-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  padding: 32px;
   margin-bottom: 24px;
+  background: linear-gradient(180deg, #fff8ee 0%, #fff 100%);
   border: none;
   border-radius: 16px;
   animation: slideUp 0.5s ease-out 0.1s both;
-  :deep(.el-card__body) {
-    padding: 32px;
-  }
-
   .amount-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     text-align: center;
     .amount-label {
@@ -366,29 +713,38 @@ const handleCloseDialog = () =&gt; {
     }
     .amount-value {
-      margin: 0;
-      font-size: 48px;
-      font-weight: bold;
-      color: #10b981;
+      margin: 0 0 8px;
+      font-size: 26px;
+      font-weight: 700;
+      color: #ea4200;
       @media (min-width: 768px) {
-        font-size: 56px;
+        font-size: 48px;
       }
     }
+
+    .goods-info {
+      margin: 0;
+      font-size: 14px;
+      color: #6b7280;
+    }
   }
 }
-// 支付方式卡片
-.payment-card {
+// 支付方式区域
+.payment-section {
   margin-bottom: 24px;
-  border: none;
-  border-radius: 16px;
   animation: slideUp 0.5s ease-out 0.2s both;
-  .card-header {
-    font-size: 16px;
-    font-weight: 600;
-    color: #1f2937;
+  .section-header {
+    padding: 0 4px;
+    margin-bottom: 16px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1f2937;
+    }
   }
   .payment-item {
@@ -398,7 +754,8 @@ const handleCloseDialog = () =&gt; {
     padding: 16px;
     margin-bottom: 12px;
     cursor: pointer;
-    background: #f9fafb;
+    background: #fff;
+    border: 2px solid transparent;
     border-radius: 12px;
     transition: all 0.3s ease;
@@ -407,19 +764,11 @@ const handleCloseDialog = () =&gt; {
     }
     &:hover {
-      background: #f3f4f6;
-      transform: translateX(4px);
+      border-color: #fecaca;
     }
     &.active {
-      color: white;
-      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-      box-shadow: 0 8px 24px rgb(16 185 129 / 40%);
-      transform: scale(1.02);
-
-      .payment-desc {
-        color: rgb(255 255 255 / 80%);
-      }
+      border-color: #ea4200;
     }
     .payment-item-left {
@@ -434,29 +783,20 @@ const handleCloseDialog = () =&gt; {
       justify-content: center;
       width: 48px;
       height: 48px;
-      background: #d1fae5;
       border-radius: 50%;
       transition: all 0.3s ease;
-      &.active {
-        background: rgb(255 255 255 / 20%);
-      }
-
-      .wechat-icon {
+      .payment-svg-icon {
         width: 28px;
         height: 28px;
-        color: #10b981;
       }
     }
-    &.active .wechat-icon {
-      color: white;
-    }
-
     .payment-name {
       margin: 0 0 4px;
       font-size: 16px;
       font-weight: 600;
+      color: #1f2937;
     }
     .payment-desc {
@@ -464,27 +804,73 @@ const handleCloseDialog = () =&gt; {
       font-size: 13px;
       color: #6b7280;
     }
+
+    :deep(.el-radio) {
+      margin-right: 0;
+
+      .el-radio__input {
+        .el-radio__inner {
+          width: 20px;
+          height: 20px;
+          border-width: 2px;
+        }
+      }
+
+      .el-radio__label {
+        display: none;
+      }
+    }
+
+    &.active :deep(.el-radio) {
+      .el-radio__input.is-checked {
+        .el-radio__inner {
+          background-color: #ea4200;
+          border-color: #ea4200;
+        }
+      }
+    }
+  }
+
+  .no-payment {
+    padding: 40px 20px;
+    color: #9ca3af;
+    text-align: center;
+    background: #fff;
+    border-radius: 12px;
   }
 }
-// 支付按钮
-.pay-button {
-  width: 100%;
-  height: 56px;
-  font-size: 18px;
-  font-weight: 600;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  border: none;
-  border-radius: 16px;
-  box-shadow: 0 8px 24px rgb(16 185 129 / 40%);
+// 底部支付按钮区域
+.payment-footer {
+  padding: 16px 20px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
-  &:hover {
-    box-shadow: 0 12px 32px rgb(16 185 129 / 50%);
-    transform: translateY(-2px);
-  }
+  .pay-button {
+    width: 100%;
+    height: 42px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #fff;
+    background: #ea4200;
+    border: none;
+    border-radius: 21px;
+    box-shadow: 0 4px 16px rgb(234 66 0 / 30%);
+
+    &:hover:not(:disabled) {
+      background: #d93d00;
+      box-shadow: 0 6px 20px rgb(234 66 0 / 40%);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.98);
+    }
-  &:active {
-    transform: scale(0.98);
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 }
@@ -512,6 +898,12 @@ const handleCloseDialog = () =&gt; {
   gap: 12px;
   max-height: 400px;
   overflow-y: auto;
+
+  .empty-card {
+    padding: 40px 20px;
+    color: #9ca3af;
+    text-align: center;
+  }
 }
 .card-item-dialog {
@@ -602,23 +994,4 @@ const handleCloseDialog = () =&gt; {
     color: #6b7280;
   }
 }
-
-// 过渡动画
-.slide-fade-enter-active {
-  transition: all 0.3s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter-from {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.slide-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-20px);
-}
 </style>
@@ -17,7 +17,7 @@ export default defineConfig(async () =&gt; {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:5320/api',
+            target: 'http://10.28.3.24:8686',
             ws: true,
           },
         },