手动打开柜口

src/common/apis/shop/index.ts

@@ -36,3 +36,11 @@ export function getOrdersByOpenIdApi(openid: string) {
     method: "get"
   })
 }
+
+/** 打开储物柜接口 */
+export function openCabinetApi(orderId: number, orderGoodsId: number) {
+  return request<ApiResponseData<void>>({
+    url: `order/openCabinet/${orderId}/${orderGoodsId}`,
+    method: "post"
+  })
+}

src/pages/order/Success.vue

@@ -1,16 +1,42 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useRoute } from 'vue-router'
+import { Order, useOrderStore } from '@/pinia/stores/order'
+import { useWxStoreOutside } from '@/pinia/stores/wx'
+import { openCabinetApi } from '@/common/apis/shop'
+import { showSuccessToast, showFailToast } from 'vant'
+import { ref } from 'vue'
 
 const router = useRouter()
 const route = useRoute()
-const orderId = route.query.orderId as any
-
+const orderStore = useOrderStore()
+const wxStore = useWxStoreOutside()
+const orderId = ref(Number(route.query.orderId))
+const currentOrder = ref<Order>()
+const isButtonDisabled = ref(false)
 
+async function handleOpenCabinet(orderId: number, orderGoodsId: number) {
+  isButtonDisabled.value = true
+  try {
+    await openCabinetApi(orderId, orderGoodsId)
+    showSuccessToast('柜口已成功开启')
+  } catch (error) {
+    showFailToast('开启失败，请稍后重试')
+  } finally {
+    setTimeout(() => {
+      isButtonDisabled.value = false
+    }, 5000)
+  }
+}
 
 function backToHome() {
   router.push('/')
 }
+
+watch(() => orderId.value, async (newVal) => {
+  await orderStore.getOrders(wxStore.openid)
+  currentOrder.value = orderStore.orders.find(o => o.orderId === newVal)
+}, { immediate: true })
 </script>
 
 <template>
@@ -22,6 +48,42 @@ function backToHome() {
         <van-cell title="订单号" :value="orderId" class="orderid-cell" />
       </van-cell-group>
 
+      <van-cell-group v-if="currentOrder" class="goods-list">
+        <van-cell
+          v-for="(item, index) in currentOrder.goodsList"
+          :key="index"
+          class="goods-item"
+        >
+          <template #icon>
+            <van-image 
+              :src="item.goodsInfo.coverImg"
+              width="80"
+              height="80"
+              class="product-image"
+            />
+          </template>
+          <div class="product-info">
+            <div class="product-name van-ellipsis">
+              {{ item.goodsInfo.goodsName }}
+            </div>
+            <div class="product-price">
+              ¥{{ (item.goodsInfo.price / 100).toFixed(2) }}
+            </div>
+            <div class="action-row">
+              <van-button
+                type="primary"
+                size="small"
+                class="open-btn add-cart-btn"
+                @click.stop="handleOpenCabinet(currentOrder.orderId, item.orderGoods.orderGoodsId)"
+                :disabled="isButtonDisabled"
+              >
+                {{ isButtonDisabled ? '处理中...' : '打开柜口' }}
+              </van-button>
+            </div>
+          </div>
+        </van-cell>
+      </van-cell-group>
+
       <div class="action-buttons">
         <van-button 
           type="primary" 
@@ -46,21 +108,67 @@ function backToHome() {
 <style scoped>
 .success-container {
   padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 .content-wrapper {
   padding-top: 46px;
+  flex: 1;
+  overflow-y: auto;
 }
 
-.success-info {
+.goods-list {
   margin: 20px 0;
+  padding: 0 16px;
 }
 
-.status-cell :deep(.van-cell__value) {
-  color: #07c160;
+.goods-item {
+  margin-bottom: 10px;
+  padding: 10px 0;
+  position: relative;
+}
+
+.product-image {
+  margin-right: 12px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.product-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 80px;
+}
+
+.product-name {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.product-price {
+  font-size: 16px;
+  color: #e95d5d;
   font-weight: bold;
 }
 
+.action-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: auto;
+}
+
+.open-btn {
+  background-color: #e95d5d;
+  border-color: #e95d5d;
+  border-radius: 16px;
+  padding: 0 24px;
+}
+
 .action-buttons {
   position: fixed;
   bottom: 30px;
@@ -70,5 +178,12 @@ function backToHome() {
 
 .home-button {
   margin-bottom: 12px;
+  background-color: #e95d5d;
+  border: none;
+}
+
+.detail-button {
+  border: 1px solid #e95d5d;
+  color: #e95d5d;
 }
 </style>

src/pages/product/components/checkout.vue

@@ -148,11 +148,11 @@ async function handleSubmit() {
 
       <!-- 联系方式与备注 -->
       <van-cell-group class="contact-form">
-        <van-field v-model="contact" label="联系方式" placeholder="请输入手机号" :rules="[
+        <!-- <van-field v-model="contact" label="联系方式" placeholder="请输入手机号" :rules="[
           { required: true, message: '请填写联系方式' },
           { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
         ]" />
-        <van-field v-model="remark" label="备注" type="textarea" placeholder="选填，可备注特殊需求" rows="2" autosize />
+        <van-field v-model="remark" label="备注" type="textarea" placeholder="选填，可备注特殊需求" rows="2" autosize /> -->
       </van-cell-group>
 
       <!-- 提交订单栏 -->

src/pinia/stores/order.ts

@@ -0,0 +1,45 @@
+import { pinia } from "@/pinia"
+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
+  }>
+}
+
+export const useOrderStore = defineStore("order", () => {
+  const orders = ref<Order[]>([])
+  const orderGoods = ref<ShopOrderGoodsEntity[]>([])
+  const goods = ref<Goods[]>([])
+
+  const getOrders = async (openid: string) => {
+    try {
+      const { data } = await getOrdersByOpenIdApi(openid)
+      
+      // 重组订单结构
+      orders.value = data.orders.map(order => ({
+        ...order,
+        goodsList: data.orderGoods
+          .filter(og => og.orderId === order.orderId)
+          .map(og => ({
+            orderGoods: og,
+            goodsInfo: data.goods.find(g => g.goodsId === og.goodsId)!
+          }))
+      }))
+      
+      // 保留原始数据结构
+      orderGoods.value = data.orderGoods
+      goods.value = data.goods
+    } catch (error) {
+      console.error("获取订单数据失败:", error)
+    }
+  }
+
+  return { orders, orderGoods, goods, getOrders }
+})
+
+export function useOrderStoreOutside() {
+  return useOrderStore(pinia)
+}