admin123
/
shop-wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(订单页面): 使用wd-tabs组件重构标签页布局 

重构订单页面的标签页切换功能，使用wd-tabs组件替代原有自定义实现
调整相关样式以适应新组件，保持功能不变但提高代码可维护性
This commit is contained in:
dzq 2025-11-04 17:28:37 +08:00
parent 175fa52247
commit 3f0b5cb431
1 changed files with 103 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/pages/order/index.vue
View File

@ -18,8 +18,8 @@ const wxStore = useWxStore()
const hasReturn = ref<number>(0)
// 处理标签页切换
const handleTabChange = (tabIndex: number) => {
hasReturn.value = tabIndex
const handleTabChange = (event: { index: number; name: string | number }) => {
hasReturn.value = event.index
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
}
@ -53,98 +53,111 @@ const goToOrderDetail = (orderId: number) => {
<template>
<view class="order-list">
<!-- 状态切换标签页 -->
<view class="tabs-container">
<view
class="tab-item"
:class="{ active: activeTab === 0 }"
@tap="() => { activeTab = 0; handleTabChange(0) }"
>
未退还
</view>
<view
class="tab-item"
:class="{ active: activeTab === 1 }"
@tap="() => { activeTab = 1; handleTabChange(1) }"
>
已退还
</view>
</view>
<view v-if="orderStore.orders.length === 0" class="empty">
<view class="empty-icon">📦</view>
<view class="empty-text">暂无订单</view>
</view>
<view v-else class="orders">
<view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
<view class="order-header">
<text class="order-id">订单号: {{ order.orderId }}</text>
<button
class="detail-btn"
size="mini"
type="primary"
@tap="goToOrderDetail(order.orderId)"
>
订单详情
</button>
<wd-tabs v-model="activeTab" @change="handleTabChange" sticky>
<wd-tab title="未退还">
<view v-if="orderStore.orders.length === 0" class="empty tab-item">
<view class="empty-icon">📦</view>
<view class="empty-text">暂无订单</view>
</view>
<view class="goods-list">
<view
v-for="(goods, index) in order.goodsList.slice(0, 1)"
:key="goods.orderGoods.orderGoodsId"
class="goods-item"
>
<image
:src="goods.goodsInfo?.coverImg"
mode="aspectFill"
class="product-image"
/>
<view class="product-info">
<text class="product-name text-ellipsis">
{{ goods.goodsInfo?.goodsName }}
</text>
<view class="product-meta">
<text class="status">状态: {{ getStatusText(order.status) }}</text>
<text class="total">总价: ¥{{ order.totalAmount }}</text>
<view v-else class="orders tab-item">
<view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
<view class="order-header">
<text class="order-id">订单号: {{ order.orderId }}</text>
<button
class="detail-btn"
size="mini"
type="primary"
@tap="goToOrderDetail(order.orderId)"
>
订单详情
</button>
</view>
<view class="goods-list">
<view
v-for="(goods, index) in order.goodsList.slice(0, 1)"
:key="goods.orderGoods.orderGoodsId"
class="goods-item"
>
<image
:src="goods.goodsInfo?.coverImg"
mode="aspectFill"
class="product-image"
/>
<view class="product-info">
<text class="product-name text-ellipsis">
{{ goods.goodsInfo?.goodsName }}
</text>
<view class="product-meta">
<text class="status">状态: {{ getStatusText(order.status) }}</text>
<text class="total">总价: ¥{{ order.totalAmount }}</text>
</view>
</view>
</view>
<view v-if="order.goodsList.length > 1" class="more-goods">
<text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
</view>
</view>
</view>
<view v-if="order.goodsList.length > 1" class="more-goods">
<text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
</view>
</wd-tab>
<wd-tab title="已退还">
<view v-if="orderStore.orders.length === 0" class="empty tab-item">
<view class="empty-icon">📦</view>
<view class="empty-text">暂无订单</view>
</view>
<view v-else class="orders tab-item">
<view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
<view class="order-header">
<text class="order-id">订单号: {{ order.orderId }}</text>
<button
class="detail-btn"
size="mini"
type="primary"
@tap="goToOrderDetail(order.orderId)"
>
订单详情
</button>
</view>
<view class="goods-list">
<view
v-for="(goods, index) in order.goodsList.slice(0, 1)"
:key="goods.orderGoods.orderGoodsId"
class="goods-item"
>
<image
:src="goods.goodsInfo?.coverImg"
mode="aspectFill"
class="product-image"
/>
<view class="product-info">
<text class="product-name text-ellipsis">
{{ goods.goodsInfo?.goodsName }}
</text>
<view class="product-meta">
<text class="status">状态: {{ getStatusText(order.status) }}</text>
<text class="total">总价: ¥{{ order.totalAmount }}</text>
</view>
</view>
</view>
<view v-if="order.goodsList.length > 1" class="more-goods">
<text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
</view>
</view>
</view>
</view>
</view>
</view>
</wd-tab>
</wd-tabs>
</view>
</template>
<style scoped>
.order-list {
padding: 20rpx;
}
.tabs-container {
display: flex;
background-color: #fff;
margin-bottom: 20rpx;
border-radius: 16rpx;
padding: 8rpx;
}
.tab-item {
flex: 1;
text-align: center;
padding: 20rpx 0;
border-radius: 12rpx;
font-size: 28rpx;
color: #666;
transition: all 0.3s;
}
.tab-item.active {
background-color: #e95d5d;
color: #fff;
width: 100%;
}
.empty {
@ -192,6 +205,7 @@ const goToOrderDetail = (orderId: number) => {
border: none;
border-radius: 26rpx;
font-size: 24rpx;
margin-right: 8rpx;
}
.goods-list {
@ -255,4 +269,11 @@ const goToOrderDetail = (orderId: number) => {
color: #999;
font-size: 24rpx;
}
.tab-item {
padding: 24rpx;
background-color: #f8f9fa;
min-height: 400rpx;
}
</style>