手动打开柜口

This commit is contained in:
dzq 2025-03-24 10:26:34 +08:00
parent 52a0b9761b
commit 82ec130ba2
6 changed files with 175 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

View File

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

View File

@ -1,16 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useRoute } 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 router = useRouter()
const route = useRoute() 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() { function backToHome() {
router.push('/') router.push('/')
} }
watch(() => orderId.value, async (newVal) => {
await orderStore.getOrders(wxStore.openid)
currentOrder.value = orderStore.orders.find(o => o.orderId === newVal)
}, { immediate: true })
</script> </script>
<template> <template>
@ -22,6 +48,42 @@ function backToHome() {
<van-cell title="订单号" :value="orderId" class="orderid-cell" /> <van-cell title="订单号" :value="orderId" class="orderid-cell" />
</van-cell-group> </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"> <div class="action-buttons">
<van-button <van-button
type="primary" type="primary"
@ -46,21 +108,67 @@ function backToHome() {
<style scoped> <style scoped>
.success-container { .success-container {
padding: 12px 16px; padding: 12px 16px;
display: flex;
flex-direction: column;
height: 100vh;
} }
.content-wrapper { .content-wrapper {
padding-top: 46px; padding-top: 46px;
flex: 1;
overflow-y: auto;
} }
.success-info { .goods-list {
margin: 20px 0; margin: 20px 0;
padding: 0 16px;
} }
.status-cell :deep(.van-cell__value) { .goods-item {
color: #07c160; 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; 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 { .action-buttons {
position: fixed; position: fixed;
bottom: 30px; bottom: 30px;
@ -70,5 +178,12 @@ function backToHome() {
.home-button { .home-button {
margin-bottom: 12px; margin-bottom: 12px;
background-color: #e95d5d;
border: none;
}
.detail-button {
border: 1px solid #e95d5d;
color: #e95d5d;
} }
</style> </style>

View File

@ -148,11 +148,11 @@ async function handleSubmit() {
<!-- 联系方式与备注 --> <!-- 联系方式与备注 -->
<van-cell-group class="contact-form"> <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: '请填写联系方式' }, { required: true, message: '请填写联系方式' },
{ pattern: /^1[3-9]\d{9}$/, 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> </van-cell-group>
<!-- 提交订单栏 --> <!-- 提交订单栏 -->

45
src/pinia/stores/order.ts Normal file
View File

@ -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)
}