feat(订单): 添加订单列表页面的退货状态筛选功能
- 在订单列表页面添加标签页切换功能,支持筛选未退还和已退还订单 - 修改订单相关API和store,增加hasReturn参数用于筛选不同状态的订单 - 调整订单列表页面的布局和样式
This commit is contained in:
parent
9b3b201ead
commit
7ab5130cff
|
@ -57,19 +57,20 @@ export function fakeQyLoginApi(params: {corpid: string, userid: string}) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 根据openid获取用户订单信息 */
|
/** 根据openid获取用户订单信息 */
|
||||||
export function getOrdersByOpenIdApi(corpid: string, openid: string) {
|
export function getOrdersByOpenIdApi(corpid: string, openid: string, hasReturn: number) {
|
||||||
return request<ApiResponseData<GetOrdersByOpenIdDTO>>({
|
return request<ApiResponseData<GetOrdersByOpenIdDTO>>({
|
||||||
url: `order/user/${openid}`,
|
url: `order/user/${openid}`,
|
||||||
method: "get",
|
method: "get",
|
||||||
params: { corpid }
|
params: { corpid, hasReturn }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 根据openid获取用户订单信息 */
|
/** 根据openid获取用户订单信息 */
|
||||||
export function getOrdersByQyUserIdApi(qyUserId: number) {
|
export function getOrdersByQyUserIdApi(qyUserId: number, hasReturn: number) {
|
||||||
return request<ApiResponseData<GetOrdersByOpenIdDTO>>({
|
return request<ApiResponseData<GetOrdersByOpenIdDTO>>({
|
||||||
url: `order/user/qy/${qyUserId}`,
|
url: `order/user/qy/${qyUserId}`,
|
||||||
method: "get"
|
method: "get",
|
||||||
|
params: { hasReturn }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,28 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useOrderStore } from '@/pinia/stores/order'
|
import { useOrderStore } from '@/pinia/stores/order'
|
||||||
import { useWxStoreOutside } from '@/pinia/stores/wx'
|
import { useWxStoreOutside } from '@/pinia/stores/wx'
|
||||||
|
|
||||||
|
const activeTab = ref(0);
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const orderStore = useOrderStore()
|
const orderStore = useOrderStore()
|
||||||
const wxStore = useWxStoreOutside()
|
const wxStore = useWxStoreOutside();
|
||||||
|
|
||||||
|
const hasReturn = ref<number>(0);
|
||||||
|
|
||||||
|
// 处理标签页切换
|
||||||
|
const handleTabChange = (tabIndex: number) => {
|
||||||
|
hasReturn.value = tabIndex;
|
||||||
|
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value);
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId)
|
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeRouteUpdate(() => {
|
onBeforeRouteUpdate(() => {
|
||||||
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId)
|
orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const statusMap: Record<number, string> = {
|
const statusMap: Record<number, string> = {
|
||||||
|
@ -30,7 +40,11 @@ const getStatusText = (status: number) => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="order-list">
|
<div class="order-list">
|
||||||
<h2>我的订单</h2>
|
<!-- 状态切换标签页 -->
|
||||||
|
<van-tabs v-model:active="activeTab" @change="handleTabChange">
|
||||||
|
<van-tab title="未退还"></van-tab>
|
||||||
|
<van-tab title="已退还"></van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
|
||||||
<div v-if="orderStore.orders.length === 0" class="empty">
|
<div v-if="orderStore.orders.length === 0" class="empty">
|
||||||
暂无订单
|
暂无订单
|
||||||
|
@ -85,7 +99,7 @@ const getStatusText = (status: number) => {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.order-list {
|
.order-list {
|
||||||
padding: 20px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
|
|
|
@ -16,11 +16,11 @@ export const useOrderStore = defineStore("order", () => {
|
||||||
const orderGoods = ref<ShopOrderGoodsEntity[]>([])
|
const orderGoods = ref<ShopOrderGoodsEntity[]>([])
|
||||||
const goods = ref<Goods[]>([])
|
const goods = ref<Goods[]>([])
|
||||||
|
|
||||||
const getOrders = async (corpid: string, openid: string, qyUserId: number) => {
|
const getOrders = async (corpid: string, openid: string, qyUserId: number, hasReturn: number) => {
|
||||||
try {
|
try {
|
||||||
const { data } = qyUserId ?
|
const { data } = qyUserId ?
|
||||||
await getOrdersByQyUserIdApi(qyUserId)
|
await getOrdersByQyUserIdApi(qyUserId, hasReturn)
|
||||||
: await getOrdersByOpenIdApi(corpid, openid);
|
: await getOrdersByOpenIdApi(corpid, openid, hasReturn);
|
||||||
|
|
||||||
// 重组订单结构
|
// 重组订单结构
|
||||||
orders.value = data.orders.map(order => ({
|
orders.value = data.orders.map(order => ({
|
||||||
|
|
|
@ -58,6 +58,12 @@ export const routes: RouteRecordRaw[] = [
|
||||||
component: () => import('@/pages/order/components/OrderList.vue'),
|
component: () => import('@/pages/order/components/OrderList.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '订单列表',
|
title: '订单列表',
|
||||||
|
layout: {
|
||||||
|
navBar: {
|
||||||
|
showNavBar: true,
|
||||||
|
showLeftArrow: true
|
||||||
|
}
|
||||||
|
},
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue