You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
9.9 KiB
327 lines
9.9 KiB
<script setup lang="ts"> |
|
import { ref, reactive } from 'vue' |
|
import { Search } from '@element-plus/icons-vue' |
|
const { handleIntoPage } = useOrder() |
|
const tabList = ref([ |
|
{ |
|
name: '全部', |
|
type: -1, |
|
}, |
|
{ |
|
name: '待付款', |
|
type: 0, |
|
}, |
|
{ |
|
name: '待发货', |
|
type: 1, |
|
}, |
|
{ |
|
name: '待收货', |
|
type: 4, |
|
}, |
|
{ |
|
name: '已取消', |
|
type: 9, |
|
}, |
|
]) |
|
|
|
const bgColor = reactive<any>({ |
|
bgColor: '', |
|
Color: '#E93323', |
|
width: '36rpx', |
|
timeTxtwidth: '16rpx', |
|
isDay: true, |
|
fontSize: '14px', |
|
}) |
|
|
|
/** |
|
* 我的订单列表 |
|
*/ |
|
import { PageQuery } from '~/types/global' |
|
import { orderListApi } from '~/server/orderApi' |
|
import { orderStatusFilter, productTypeFilter, productTypeNameFilter } from '~/utils/filter' |
|
const where = reactive<PageQuery>({ |
|
page: 1, |
|
limit: 10, |
|
status: -1, |
|
keywords: '', |
|
}) |
|
const { |
|
data: tableData, |
|
refresh, |
|
pending: listLoading, |
|
} = await useAsyncData(async () => orderListApi(where), { |
|
default: () => ({ |
|
list: [], |
|
total: 0, |
|
}), |
|
}) |
|
// 分页数据 |
|
const pageChange = (e: number) => { |
|
where.page = e |
|
refresh() |
|
} |
|
|
|
const handleChangeTab = async (type: string) => { |
|
where.status = type |
|
where.page = 1 |
|
refresh() |
|
} |
|
|
|
//去订单详情 |
|
import { linkNavigateTo } from '~/utils/util' |
|
import useOrder from '~/composables/useOrder' |
|
import { CartBatchAdd } from '~/types/order' |
|
import NotLoggedIn from '~/components/notLoggedIn.vue' |
|
const handleToOrderDetails =async (orderNo: string) => { |
|
listLoading.value = true |
|
await linkNavigateTo(`/order/order_details`, { orderNo: orderNo }) |
|
} |
|
|
|
//去退款列表 |
|
const handleToOrderRefund = async (orderNo: string) =>{ |
|
listLoading.value = true |
|
await linkNavigateTo(`/users/refund_list`, { type: 9,orderNo: orderNo }) |
|
} |
|
|
|
const useOrders = useOrder() |
|
//再次购买 |
|
const handleByAgain = async (cartInfo: Array<any>) => { |
|
let cartListRequest: Array<CartBatchAdd> = [] |
|
cartInfo.map((item) => { |
|
cartListRequest.push({ |
|
productId: parseFloat(item.productId), |
|
productAttrUnique: item.attrValueId, |
|
cartNum: parseFloat(item.payNum), |
|
}) |
|
}) |
|
try { |
|
listLoading.value = true |
|
await useOrders.onByAgain(cartListRequest) |
|
listLoading.value = false |
|
} catch (e) { |
|
listLoading.value = false |
|
} |
|
} |
|
|
|
//删除订单 |
|
const handleDelOrder = async (orderNo: string) => { |
|
await useOrders.onDeleteOrder(orderNo).then(async () => { |
|
await refresh() |
|
}) |
|
} |
|
|
|
//确认收货 |
|
const handleConfirmOrder = async (orderNo: string) => { |
|
useOrders.onConfirmOrder(orderNo).then(async () => { |
|
await refresh() |
|
}) |
|
} |
|
|
|
//取消订单 |
|
const handleCancelOrder = async (orderNo: string) => { |
|
useOrders.onCancelOrder(orderNo).then(async () => { |
|
await refresh() |
|
}) |
|
} |
|
|
|
//立即付款 |
|
const handlePaymentOrder = (orderNo: string) => { |
|
linkNavigateTo(`/order/order_payment`, { orderNo: orderNo }) |
|
} |
|
|
|
//倒计时结束 |
|
const stopTime = (isShowCancelTime: boolean, item: any) => { |
|
item.isShowCancelTime = true |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="order-list h-100%" v-loading="listLoading"> |
|
<!--tab导航信息--> |
|
<div class="flex-between-center mb-23px"> |
|
<div class="acea-row"> |
|
<div |
|
v-for="item in tabList" |
|
:key="item.type" |
|
class="item text-16px mr-50px cursor-pointer" |
|
:class="where.status === item.type ? 'font-color font-500' : 'text-#666'" |
|
@click="handleChangeTab(item.type)" |
|
> |
|
{{ item.name }} |
|
</div> |
|
</div> |
|
<el-input @keyup.enter="refresh" v-model="where.keywords" style="width: 275px" placeholder="搜索商品名称或订单号"> |
|
<template #prefix> |
|
<el-icon class="el-input__icon"><search /></el-icon> |
|
</template> |
|
</el-input> |
|
</div> |
|
<!--订单信息--> |
|
<div v-if="tableData.total>0"> |
|
<div v-for="item in tableData.list" :key="item.id" class="b-rd-12px w-100% overflow-hidden borderSol-eee mb-20px"> |
|
<div class="h-54px lh-52px text-14px flex-between-center bg-#FAFAFA px-20px"> |
|
<div class="flex items-center"> |
|
<div v-if="item.type === 2" class="mr-10px font-color"> |
|
{{ '【' + productTypeNameFilter(item.type) + '】' }} |
|
</div> |
|
<div |
|
class="text-#fff labelClass mr-20px" |
|
:class="item.status === 6 || item.status === 9 ? 'bg-#BBBBBB' : 'bg-#E93323'" |
|
> |
|
{{ orderStatusFilter(item.status) }} |
|
</div> |
|
<div class="text-#999999 mr-20px oppoSans-R">{{ item.createTime }}</div> |
|
<div class="text-#999999 mr-50px oppoSans-R"> |
|
订单号：<span class="text-#333333 font-400 orderNo oppoSans-R">{{ item.orderNo }}</span> |
|
</div> |
|
<div |
|
@click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })" |
|
v-show="item.merName" |
|
class="cursors text-14px merchant-home" |
|
> |
|
<span class="iconfont icon-guanzhudianpu mr-5px line1" style="font-size: 14px"></span><span>{{ item.merName }}</span> |
|
</div> |
|
<div class="acea-row font-color" v-if="item.status === 0 && !item.isShowCancelTime"> |
|
<countDown |
|
class="ml-5px mr-5px" |
|
:is-day="true" |
|
:tip-text="' '" |
|
:day-text="' '" |
|
:hour-text="' : '" |
|
:minute-text="' : '" |
|
:second-text="' '" |
|
:datatime="item.cancelTime / 1000" |
|
:isCol="false" |
|
:bgColor="bgColor" |
|
:dataItem="item" |
|
@stopTime="stopTime" |
|
> |
|
</countDown> |
|
<div>后订单取消</div> |
|
</div> |
|
</div> |
|
<div class="text-12px fontColor333 dinProSemiBold"> |
|
<span class="oppoSans-M">￥</span><span class="text-20px dinProRegular font-600">{{ item.payPrice }}</span> |
|
</div> |
|
</div> |
|
<div class="flex justify-between pl-20px"> |
|
<div |
|
@click="handleToOrderDetails(item.orderNo)" |
|
class="w-786px mt-20px mb-20px orderProduct" |
|
style="border-right: 1px dashed #eeeeee" |
|
> |
|
<template v-for="(itm, indexs) in item.orderInfoList" :key="indexs"> |
|
<order-product :list="itm"></order-product> |
|
</template> |
|
</div> |
|
<!--操作--> |
|
<!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） --> |
|
<div class="w-180px pt-20px pb-6px"> |
|
<div |
|
v-if="item.status === 0 && !item.isShowCancelTime" |
|
class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center font-color text-12px mb-14px" |
|
style="border: 1px solid #e93323" |
|
@click="handlePaymentOrder(item.orderNo)" |
|
> |
|
立即支付 |
|
</div> |
|
<div |
|
v-if="item.status === 4" |
|
@click="handleConfirmOrder(item.orderNo)" |
|
class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center font-color text-12px mb-14px" |
|
style="border: 1px solid #e93323" |
|
> |
|
确认收货 |
|
</div> |
|
<div |
|
v-if="(item.status === 4 || item.status === 9 || item.status === 6) && item.type === 0" |
|
class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-12px mb-14px" |
|
:style="item.status === 4?'':'border: 1px solid #e93323'" |
|
:class="item.status === 4 ? 'text-#333 borderSol': 'font-color'" |
|
@click="handleByAgain(item.orderInfoList)" |
|
> |
|
再次购买 |
|
</div> |
|
<div |
|
v-if="item.status === 0" |
|
@click="handleCancelOrder(item.orderNo)" |
|
class="m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol cursors mb14px" |
|
> |
|
取消订单 |
|
</div> |
|
<div |
|
v-if="item.status == 6 || item.status == 9" |
|
@click="handleDelOrder(item.orderNo)" |
|
class="m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol cursors mb14px" |
|
> |
|
删除订单 |
|
</div> |
|
<div |
|
@click="handleToOrderDetails(item.orderNo)" |
|
class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol mb-14px" |
|
> |
|
查看详情 |
|
</div> |
|
<div |
|
v-if="item.status>0 && item.status<6" |
|
@click="handleToOrderRefund(item.orderNo)" |
|
class="cursors m-auto w-86px h-30px lh-29px b-rd-15px text-center text-#333 text-12px borderSol mb-14px" |
|
> |
|
申请退款 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="acea-row row-middle mt-30px"> |
|
<el-pagination |
|
background |
|
layout="prev, pager, next" |
|
:total="tableData.total" |
|
:page-size="where.limit" |
|
:current-page="where.page" |
|
@update:current-page="pageChange" |
|
class="page-item" |
|
/> |
|
</div> |
|
</div> |
|
<div v-else class="w-100%"> |
|
<empty-page title="暂无订单呦~"> |
|
<template v-slot:emptyImage> |
|
<img src="@/assets/images/wudingdan.png" /> |
|
</template> |
|
</empty-page> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.merchant-home{ |
|
color: #333333; |
|
&:hover{ |
|
color: #E93323 !important; |
|
} |
|
} |
|
.orderNo{ |
|
&:hover{ |
|
color: #E93323 !important; |
|
} |
|
} |
|
.order-list { |
|
:deep(.el-input__wrapper) { |
|
border: none !important; |
|
box-shadow: none !important; |
|
} |
|
:deep(.el-input) { |
|
--el-fill-color-blank: #f7f7f7 !important; |
|
--el-border-radius-base: 20px; |
|
} |
|
} |
|
.orderProduct { |
|
:deep(.orderProduct) { |
|
&:last-child { |
|
margin-bottom: 0 !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|