From 6a3841dd7272d7e66039baa4b3e3e7d8ed89f130 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 15 Apr 2025 16:54:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=93=E5=BC=80=E6=9F=9C=E5=AD=90=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=94=AF=E4=BB=98=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E9=80=89=E6=8B=A9=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在订单页面添加打开柜子的功能，支持状态为1和5的订单商品
- 优化支付方式选择界面，使用更直观的单元格布局
- 在提交订单时添加手机号格式验证
---
 .env                                      |   2 +-
 src/pages/order/index.vue                 |  72 ++++++++----
 src/pages/product/components/checkout.vue | 127 +++++++++++++++++-----
 src/pinia/stores/order.ts                 |  10 +-
 types/auto/components.d.ts                |   2 -
 5 files changed, 160 insertions(+), 53 deletions(-)

diff --git a/.env b/.env
index db4e7e9..389397f 100644
--- a/.env
+++ b/.env
@@ -7,4 +7,4 @@ VITE_APP_TITLE = 借还柜
 VITE_ROUTER_HISTORY = hash
 
 ## 是否开启 console 调试工具
-VITE_CONSOLE = true
+VITE_CONSOLE = false
diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue
index aace50f..d55a2b7 100644
--- a/src/pages/order/index.vue
+++ b/src/pages/order/index.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useOrderStore } from '@/pinia/stores/order'
+import { OrderGoods, useOrderStore } from '@/pinia/stores/order'
 import { useRoute, useRouter } from 'vue-router'
+import { openCabinetApi } from '@/common/apis/shop'
+import { showSuccessToast, showFailToast } from 'vant'
+import { ref } from 'vue'
 
 const orderStore = useOrderStore()
 const route = useRoute()
@@ -55,6 +58,27 @@ onMounted(() => {
     // 订单不存在处理
   }
 })
+
+const isButtonDisabled = ref<Record<number, boolean>>({})
+
+async function handleOpenCabinet(item: OrderGoods) {
+  const orderGoodsId = item.orderGoods.orderGoodsId
+  isButtonDisabled.value[orderGoodsId] = true
+  try {
+    const result = await openCabinetApi(orderId.value, orderGoodsId)
+    if (result.code !== 0) {
+      showFailToast(result.msg || '开启失败，请稍后重试')
+      return
+    }
+    showSuccessToast('柜口已成功开启')
+  } catch (error) {
+    showFailToast('开启失败，请稍后重试')
+  } finally {
+    setTimeout((currentId) => {
+      delete isButtonDisabled.value[currentId]
+    }, 5000, orderGoodsId)
+  }
+}
 </script>
 
 <template>
@@ -94,16 +118,26 @@ onMounted(() => {
           <div class="action-row">
             <p>数量: {{ item.orderGoods.quantity }}</p>
             <p>小计: ¥{{ (item.orderGoods.price * item.orderGoods.quantity).toFixed(2) }}</p>
-            <template v-if="item.orderGoods.status === 1">
-            <van-button 
-              type="primary"
-              size="mini"
-              class="refund-btn"
-              @click="handleRefund(item)"
-            >
-              退还
-            </van-button>
-          </template>
+            <div class="button-group">
+              <van-button 
+                v-if="[1,5].includes(item.orderGoods.status)"
+                type="primary"
+                size="small"
+                @click="handleOpenCabinet(item)"
+                :disabled="isButtonDisabled[item.orderGoods.orderGoodsId]"
+              >
+                打开柜子
+              </van-button>
+              <van-button 
+                v-if="item.orderGoods.status === 1"
+                type="primary"
+                size="small"
+                @click="handleRefund(item)"
+              >
+                退还商品
+              </van-button>
+            </div>
+          </div>
           <span 
             v-if="[2,5,6].includes(item.orderGoods.status)"
             class="status-text"
@@ -111,7 +145,6 @@ onMounted(() => {
           >
             {{ getOrderGoodsStatusText(item.orderGoods.status) }}
           </span>
-          </div>
         </div>
       </van-cell>
     </van-cell-group>
@@ -183,20 +216,17 @@ goods-info {
   color: #999;
 }
 
-.refund-btn {
-  margin-left: auto;
-  color: #fff;
-  background: #ee0a24;
-  border-radius: 15px;
-  padding: 8px 20px;
-  font-size: 14px;
-  min-width: 80px;
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  width: 100%;
 }
 
 .action-row {
   display: flex;
   flex-direction: column;
-  gap: 8px;
   align-items: flex-end;
+  gap: 4px;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/product/components/checkout.vue b/src/pages/product/components/checkout.vue
index c9556c4..f83b64f 100644
--- a/src/pages/product/components/checkout.vue
+++ b/src/pages/product/components/checkout.vue
@@ -72,7 +72,13 @@ async function handleSubmit() {
     })
   }
 
-  // 移除原有的支付方式选择弹窗代码
+  // 在handleSubmit函数开头添加验证
+  if (!/^1[3-9]\d{9}$/.test(tel.value)) {
+    return showConfirmDialog({
+      title: "格式错误",
+      message: "请输入有效的手机号码"
+    });
+  }
 
   submitting.value = true
   try {
@@ -165,23 +171,40 @@ async function handleSubmit() {
             </div>
           </div>
         </van-cell>
+        <van-cell>
+          <van-field
+            v-model="tel"
+            label="手机号"
+            placeholder="请输入联系电话"
+            required
+            class="tel-input"
+          />
+        </van-cell>
       </van-cell-group>
 
       <van-cell-group class="contact-form">
-        <van-field label="支付方式" :model-value="selectedPayment" readonly>
-          <template #input>
-            <van-radio-group v-model="selectedPayment" direction="horizontal">
-              <van-radio name="wechat" v-if="!corpidLogin">
-                <van-icon name="wechat" class="method-icon" />
-                微信支付
-              </van-radio>
-              <van-radio name="balance" :disabled="balance < totalPrice">
-                <van-icon name="balance-o" class="method-icon" />
-                余额支付（当前：¥{{ balance.toFixed(2) }}）
-              </van-radio>
-            </van-radio-group>
-          </template>
-        </van-field>
+        <van-cell  v-if="!corpidLogin"
+          :class="['payment-option', { selected: selectedPayment === 'wechat' }]"
+          @click="selectedPayment = 'wechat'"
+        >
+          <van-icon name="wechat" class="method-icon" />
+          <span class="method-label">微信支付</span>
+          <div class="empty"></div>
+          <van-icon v-if="selectedPayment === 'wechat'" name="success" class="check-icon" />
+        </van-cell>
+
+        <van-cell
+          :class="['payment-option', { selected: selectedPayment === 'balance', disabled: balance < totalPrice }]"
+          @click="selectedPayment = 'balance'"
+        >
+          <van-icon name="balance-o" class="method-icon" />
+          <span class="method-label">
+            余额支付
+            <span class="balance-amount">（当前：¥{{ balance.toFixed(2) }}）</span>
+          </span>
+          <div class="empty"></div>
+          <van-icon v-if="selectedPayment === 'balance'" name="success" class="check-icon" />
+        </van-cell>
       </van-cell-group>
 
       <!-- 提交订单栏 -->
@@ -197,7 +220,7 @@ async function handleSubmit() {
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .van-nav-bar {
   position: fixed;
   top: 0;
@@ -253,15 +276,6 @@ async function handleSubmit() {
   font-size: 13px;
 }
 
-.method-icon {
-  font-size: 24px;
-  margin-right: 10px;
-}
-
-.method-label {
-  font-size: 15px;
-}
-
 .submit-bar {
   position: fixed;
   bottom: 0;
@@ -280,4 +294,67 @@ async function handleSubmit() {
   color: #e95d5d;
   font-weight: bold;
 }
+
+.payment-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 8px 0;
+  border: 1px solid #ebedf0;
+  border-radius: 8px;
+  transition: all 0.2s;
+
+  :deep(.van-cell__value) {
+    display: flex;
+  }
+}
+
+
+.check-icon {
+  font-size: 18px;
+}
+
+.payment-option.selected {
+  border-color: #07c160;
+  background-color: #f6ffed;
+}
+
+.payment-option.disabled {
+  opacity: 0.6;
+  filter: grayscale(1);
+  pointer-events: none;
+}
+
+.method-icon {
+  vertical-align: middle;
+  margin-right: 12px;
+  font-size: 24px;
+}
+
+.method-label {
+  vertical-align: middle;
+  font-size: 15px;
+}
+
+.empty {
+  flex-grow: 1;
+  margin-right: 20px;
+}
+
+.balance-amount {
+  font-size: 13px;
+  color: #666;
+}
+
+.tel-input {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 8px 12px;
+}
+
+.check-icon {
+  margin-left: auto;
+  color: #07c160;
+  font-size: 18px;
+}
 </style>
diff --git a/src/pinia/stores/order.ts b/src/pinia/stores/order.ts
index 9c9a222..67506e5 100644
--- a/src/pinia/stores/order.ts
+++ b/src/pinia/stores/order.ts
@@ -3,10 +3,12 @@ import { getOrdersByOpenIdApi } from "@@/apis/shop"
 import type { ShopOrderEntity, ShopOrderGoodsEntity, Goods } from "@@/apis/shop/type"
 
 export interface Order extends ShopOrderEntity {
-  goodsList: Array<{
-    goodsInfo: Goods
-    orderGoods: ShopOrderGoodsEntity
-  }>
+  goodsList: Array<OrderGoods>
+}
+
+export interface OrderGoods {
+  goodsInfo: Goods
+  orderGoods: ShopOrderGoodsEntity
 }
 
 export const useOrderStore = defineStore("order", () => {
diff --git a/types/auto/components.d.ts b/types/auto/components.d.ts
index 436f172..39a8321 100644
--- a/types/auto/components.d.ts
+++ b/types/auto/components.d.ts
@@ -27,8 +27,6 @@ declare module 'vue' {
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']
-    VanRadio: typeof import('vant/es')['Radio']
-    VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanSidebar: typeof import('vant/es')['Sidebar']
     VanSidebarItem: typeof import('vant/es')['SidebarItem']
     VanTabbar: typeof import('vant/es')['Tabbar']