468 lines
15 KiB
Vue
468 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<common current-name="supplier">
|
||
<template #main>
|
||
<div class="user-orders-warp">
|
||
<userHeader :title="'订单管理'"></userHeader>
|
||
<div class="user-orders-content">
|
||
<div class="order-tab">
|
||
<el-tabs v-model="activeCurrent" @tab-change="handleClick">
|
||
<el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
<div class="order-list-warp">
|
||
<div class="order-list">
|
||
<div v-show="!show" class="empty">
|
||
<img style="width: 300px; height: 300px" src="../../assets/images/empty.png" alt="" />
|
||
</div>
|
||
<div v-for="(o, indexo) in store.data.records" v-show="show" :key="indexo" class="order-item">
|
||
<div class="order-item-top">
|
||
<div class="top-l">
|
||
<div class="top-item">
|
||
<div class="label">订单编号：</div>
|
||
<div class="val">{{ o.orderNo || '--' }}</div>
|
||
</div>
|
||
<div class="top-item">
|
||
<div class="label">下单时间：</div>
|
||
<div class="val">{{ o.createTime || '--' }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-r">
|
||
<div class="top-item">
|
||
<div class="label">订单金额：</div>
|
||
<div class="val amount">{{ o.totalAmount.toFixed(2) || '0.00' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="o.orderItemInfos && o.orderItemInfos.length > 0" class="order-item-content">
|
||
<div class="content-list">
|
||
<div v-for="(g, indexg) in o.orderItemInfos" :key="indexg" class="good-item">
|
||
<div class="good-img">
|
||
<img class="good-img" :src="g.productImage" alt="" />
|
||
<!-- <costomImg
|
||
:url="'images/ecommerce/' + 'pic.png'"
|
||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
|
||
:is-view="false"
|
||
></costomImg> -->
|
||
</div>
|
||
<div class="good-info">
|
||
<div class="good-info-pos">
|
||
<div class="txt-ellipsis clamp2">{{ g.productName || '--' }}</div>
|
||
<div v-if="o.refundAuditResult == '拒绝退款' && o.orderStatus == '10'" style="color: red; font-size: 15px">
|
||
已拒绝退款：{{ o.refundFailReason }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="good-price-num">
|
||
<div class="good-price-num-pos">
|
||
<div class="price">￥{{ g.unitPrice }} / {{ g.unit }} * {{ g.quantity }}</div>
|
||
<div class="total">
|
||
<div class="amount">{{ (g.unitPrice * g.quantity).toFixed(2) }}</div>
|
||
<!-- <div class="amount">{{ (g.unitPrice * g.quantity + g.carriage).toFixed(2) }}</div> -->
|
||
<!-- <div class="carriage">( 含运费{{ g.carriage.toFixed(2) }})</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="content-right-pos">
|
||
<div v-if="o.orderStatus == '1'" class="right-item do-btn">
|
||
<el-button type="primary" @click="doPay(o.id)">立即付款</el-button>
|
||
</div>
|
||
<div v-if="o.orderStatus == '4' || o.orderStatus == '5'" class="right-item do-btn">
|
||
<el-button type="primary" @click="sureToReceives(o.id)">确认收货</el-button>
|
||
</div>
|
||
<div v-if="o.orderStatus == '1'" class="right-item do-btn">
|
||
<el-button @click="doCancel(o.id)">取消订单</el-button>
|
||
</div>
|
||
|
||
<div
|
||
v-if="o.orderStatus == '2' || o.orderStatus == '3' || o.orderStatus == '4' || o.orderStatus == '5'"
|
||
class="right-item do-btn"
|
||
>
|
||
<el-button type="danger" @click="doPay(o.id)">退货/退款</el-button>
|
||
</div>
|
||
|
||
<!-- <div v-if="o.orderStatus == '5'" class="right-item">已发货</div> -->
|
||
<!-- <div v-if="o.orderStatus == '5'" class="right-item text-link">快递单号</div> -->
|
||
<el-button type="primary" class="right-item do-btn" @click="goInfo(o.id)">订单详情</el-button>
|
||
<div class="right-item text-link">
|
||
{{
|
||
o.orderStatus == '7'
|
||
? '已取消'
|
||
: o.orderStatus == '8'
|
||
? '已完成'
|
||
: o.orderStatus == '4'
|
||
? '已发货'
|
||
: o.orderStatus == '5'
|
||
? '待收货'
|
||
: o.orderStatus == '6'
|
||
? '已收货'
|
||
: o.orderStatus == '10'
|
||
? '退款中'
|
||
: o.orderStatus == '11'
|
||
? '已退款'
|
||
: ''
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pager">
|
||
<div style="margin-bottom: 3px">共{{ total }}条</div>
|
||
<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="total" @change="pagerChange" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ElMessage } from 'element-plus';
|
||
import common from './components/common.vue';
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { isEmpty, getAssetsFile } from '@/utils';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import userHeader from './components/userHeader.vue';
|
||
import { cancelOrder, sureToReceive } from '../../apis/user';
|
||
import { useGetUserOrder } from '../../store/modules/userOrder';
|
||
let store = useGetUserOrder();
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
let page = reactive({
|
||
current: 1,
|
||
size: 20,
|
||
});
|
||
let total = ref(0);
|
||
let show = ref(false);
|
||
let handleClick = (value) => {
|
||
activeCurrent.value = value;
|
||
page.orderStatus = value;
|
||
if (value == 5) {
|
||
page.orderStatus = value + ',4';
|
||
}
|
||
store.getData(page).then((res) => {
|
||
total.value = res.total;
|
||
if (res.records.length > 0) {
|
||
show.value = true;
|
||
} else {
|
||
show.value = false;
|
||
}
|
||
console.log(show.value);
|
||
});
|
||
};
|
||
|
||
const pagerChange = (value) => {
|
||
console.log(page);
|
||
page.current = value;
|
||
store.getData(page).then((res) => {
|
||
if (res.records.length > 0) {
|
||
show.value = true;
|
||
} else {
|
||
show.value = false;
|
||
}
|
||
console.log(show.value);
|
||
});
|
||
};
|
||
|
||
const goInfo = (id) => {
|
||
router.push({
|
||
path: '/sub-operation-service/orderDetails',
|
||
query: { id: id, page: JSON.stringify(page) },
|
||
});
|
||
};
|
||
|
||
let bottomList = reactive([
|
||
{ title: '全部', name: 'all' },
|
||
{ title: '待付款', name: '1' },
|
||
{ title: '待发货', name: '3' },
|
||
// { title: '已发货', name: '6' },
|
||
{ title: '待收货', name: '4' },
|
||
{ title: '已收货', name: '6' },
|
||
{ title: '退款中', name: '10' },
|
||
{ title: '已退款', name: '11' },
|
||
]);
|
||
|
||
onMounted(() => {
|
||
page.orderStatus = 'all';
|
||
store.getData(page).then((res) => {
|
||
total.value = res.total;
|
||
if (res.records.length > 0) {
|
||
show.value = true;
|
||
} else {
|
||
show.value = false;
|
||
}
|
||
});
|
||
});
|
||
|
||
const sureToReceives = (id) => {
|
||
sureToReceive({ orderId: id }).then((res) => {
|
||
ElMessage({
|
||
message: '确认收货成功',
|
||
type: 'success',
|
||
plain: true,
|
||
});
|
||
store.getData(page);
|
||
});
|
||
};
|
||
|
||
let activeCurrent = ref('all');
|
||
|
||
let orderList = reactive([
|
||
{
|
||
id: '1',
|
||
orderNo: 'YH8888888888',
|
||
createTime: '2025.01.01 10:00:00',
|
||
payAmount: 81,
|
||
status: 0,
|
||
goodlist: [
|
||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 10, carriage: 6 },
|
||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 10, carriage: 0 },
|
||
],
|
||
},
|
||
{
|
||
id: '2',
|
||
orderNo: 'YH8888888889',
|
||
createTime: '2025.02.01 10:00:00',
|
||
payAmount: 110,
|
||
status: 1,
|
||
goodlist: [
|
||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
|
||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
|
||
{ id: '002', title: '耿马镇 原生态 有机 茄子', price: 2.5, unit: '份', num: 10, carriage: 0 },
|
||
],
|
||
},
|
||
{
|
||
id: '3',
|
||
orderNo: 'YH8888888899',
|
||
createTime: '2025.02.01 10:00:00',
|
||
payAmount: 85,
|
||
status: 2,
|
||
goodlist: [
|
||
{ id: '001', title: '勐简镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
|
||
{ id: '002', title: '勐简镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
|
||
],
|
||
},
|
||
]);
|
||
|
||
const doPay = (id) => {
|
||
router.push({
|
||
path: '/sub-operation-service/orderDetails',
|
||
query: { id: id, page: JSON.stringify(page) },
|
||
});
|
||
};
|
||
|
||
const doCancel = (id) => {
|
||
cancelOrder({ id: id }).then((res) => {
|
||
ElMessage({
|
||
message: '取消订单成功',
|
||
type: 'success',
|
||
plain: true,
|
||
});
|
||
store.getData(page);
|
||
});
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.pager {
|
||
align-items: center;
|
||
display: flex;
|
||
position: fixed;
|
||
bottom: 42px;
|
||
color: #999999;
|
||
font-size: 12px;
|
||
}
|
||
.user-orders-warp {
|
||
width: 100%;
|
||
.user-orders-content {
|
||
margin-top: 16px;
|
||
padding: 16px 16px 30px 16px;
|
||
width: 100%;
|
||
height: calc(100vh - 136px);
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
}
|
||
.order-tab {
|
||
width: 100%;
|
||
::v-deep() {
|
||
.el-tabs__nav-wrap::after {
|
||
background: transparent !important;
|
||
}
|
||
.el-tabs__item {
|
||
font-size: 20px !important;
|
||
}
|
||
.el-tabs__active-bar {
|
||
height: 5px !important;
|
||
border-radius: 4px;
|
||
}
|
||
.el-descriptions__label,
|
||
.el-descriptions__content {
|
||
font-size: 16px !important;
|
||
}
|
||
.cell-item {
|
||
display: inline-flex;
|
||
}
|
||
.el-descriptions__label {
|
||
color: $color-999;
|
||
}
|
||
.el-descriptions__content {
|
||
color: $color-333;
|
||
}
|
||
}
|
||
}
|
||
.order-list-warp {
|
||
position: relative;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
height: calc(100% - 60px);
|
||
.order-list {
|
||
width: 100%;
|
||
.empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
.order-item {
|
||
width: 100%;
|
||
.order-item-top {
|
||
display: inline-flex;
|
||
padding: 16px 0;
|
||
width: 100%;
|
||
.top-l,
|
||
.top-r {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.top-l {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
width: 80%;
|
||
gap: 64px;
|
||
}
|
||
.top-r {
|
||
text-align: right;
|
||
}
|
||
.top-item {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
.label,
|
||
.val {
|
||
font-size: 18px;
|
||
}
|
||
.label {
|
||
padding-right: 8px;
|
||
}
|
||
.amount::before {
|
||
content: '￥';
|
||
}
|
||
}
|
||
}
|
||
.order-item-content {
|
||
display: inline-flex;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
background: $color-f5;
|
||
.content-list,
|
||
.content-right {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
.content-list {
|
||
width: calc(100% - 160px);
|
||
.good-item {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
margin: 8px 0;
|
||
padding-left: 16px;
|
||
width: 100%;
|
||
gap: 16px;
|
||
}
|
||
.good-img,
|
||
.good-info,
|
||
.good-price-num {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.good-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
.good-info {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
width: 200px;
|
||
flex-direction: column;
|
||
.good-info-pos {
|
||
font-size: 18px;
|
||
color: $color-666;
|
||
}
|
||
}
|
||
.good-price-num {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
width: calc(100% - 340px);
|
||
flex-direction: column;
|
||
.good-price-num-pos {
|
||
display: inline-flex;
|
||
justify-content: space-around;
|
||
gap: 16px;
|
||
.price,
|
||
.total {
|
||
font-size: 20px;
|
||
}
|
||
.price {
|
||
font-weight: 400;
|
||
}
|
||
.total {
|
||
text-align: center;
|
||
.amount {
|
||
font-weight: 700;
|
||
color: $color-main;
|
||
}
|
||
.amount::before {
|
||
content: '￥';
|
||
}
|
||
.carriage {
|
||
font-size: 16px;
|
||
color: $color-666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-right {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
width: 160px;
|
||
text-align: center;
|
||
flex-direction: column;
|
||
.content-right-pos {
|
||
.text-normal {
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.text-link {
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.do-btn {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|