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.
328 lines
9.9 KiB
328 lines
9.9 KiB
10 months ago
|
<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>
|