<template>
|
<!-- <page> -->
|
<div class="personalPage-box">
|
<div class="personalPage-title">我的订单</div>
|
<div class="personalPage-content">
|
<div class="cartClass">
|
<el-tabs v-model="order" type="capsule" @tab-click="tabCart">
|
<el-tab-pane label="全部" name="all"></el-tab-pane>
|
<el-tab-pane label="待支付" name="payment"></el-tab-pane>
|
<el-tab-pane label="已完成" name="complete"></el-tab-pane>
|
<el-tab-pane label="已取消" name="cancellation"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="myCarTopPage">
|
<div class="cartContent" v-loading="pages.loading">
|
<div class="list-box">
|
<ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
|
<li class="head flex">
|
<span class="index">序号</span>
|
<span class="clear flex1">商品信息</span>
|
<span class="state">商品类型</span>
|
<span class="price">价格</span>
|
</li>
|
<li v-for="item in dataList" :key="item.index">
|
<div class="body flex ai-c">
|
<div class="index">{{ item.index }}</div>
|
<div class="list">
|
<div
|
v-for="pItem in item.productList"
|
:key="pItem.id"
|
class="listItem flex ai-c"
|
>
|
<div
|
class="clear hover"
|
@click="
|
goBookDetails(
|
pItem.orderSaleMethod.product.id,
|
pItem.orderSaleMethod.product.name,
|
pItem.orderSaleMethod.product.cmsTypeRefCode,
|
item.remarks,
|
pItem.orderSaleMethod.id
|
)
|
"
|
>
|
<div class="cover fl">
|
<img
|
:src="
|
pItem.orderSaleMethod.product.icon
|
? getPublicImage(
|
pItem.orderSaleMethod.product.icon,
|
'',
|
''
|
)
|
: bookCover
|
"
|
alt=""
|
/>
|
</div>
|
<div class="title flex ai-c">
|
{{
|
pItem.orderSaleMethod.type === "defaultSaleMethod" ||
|
pItem.orderSaleMethod.cmsItemList.length == 0
|
? pItem.orderSaleMethod.product.name
|
: pItem.orderSaleMethod.product.name +
|
"：" +
|
pItem.orderSaleMethod.cmsItemList[0].name
|
}}
|
</div>
|
</div>
|
<span class="state">{{
|
pItem.orderSaleMethod.product.cmsTypeRefCode ==
|
"jsek_digitalTextbooks"
|
? "数字教材"
|
: pItem.orderSaleMethod.product.cmsTypeRefCode ==
|
"jsek_digitalCourses"
|
? "数字课程"
|
: pItem.orderSaleMethod.type == "defaultSaleMethod"
|
? "图书服务-电子书"
|
: pItem.orderSaleMethod.type == "createProductSaleMethod" &&
|
pItem.orderSaleMethod.cmsItemList == 0
|
? "图书服务-组卷"
|
: pItem.orderSaleMethod.cmsItemList[0].type ==
|
"questionBankFolder"
|
? "图书服务-云测试"
|
: "图书服务-云学习"
|
}}</span>
|
<div class="price">
|
<span>￥{{ pItem.payPrice.toFixed(2) }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="count">
|
<span>订单号: {{ item.orderNumber }}</span>
|
<span v-if="item.createDate">
|
创建时间：
|
<span>{{ item.createDate.slice(0, 10) }}</span>
|
<span style="margin-left: 5px">{{
|
item.createDate.slice(11, 19)
|
}}</span>
|
</span>
|
<span class="right">
|
<span
|
>总计：<span class="main"
|
>￥{{ item.totalPrice.toFixed(2) }}</span
|
></span
|
>
|
<span class="status yes" v-if="item.state == 'Success'">已完成</span>
|
<span class="status cancel" v-if="item.state == 'Cancel'"
|
>已取消</span
|
>
|
<span class="status cancel" v-if="item.state == 'ReFoundFinished'"
|
>已退款</span
|
>
|
<span class="status" v-if="item.state == 'WaitPay'">
|
<span class="main hover" @click="toPay(item.orderNumber)"
|
>立即支付</span
|
>
|
<span class="grey hover" @click="cancleOrder(item.orderNumber)"
|
>取消订单</span
|
>
|
</span>
|
</span>
|
</div>
|
</li>
|
</ul>
|
<div v-if="dataList.length == 0 && !pages.loading">
|
<el-empty :image-size="200" description="暂无数据" />
|
</div>
|
</div>
|
<div class="pagination-box" v-if="dataList.length > 0 && !pages.loading">
|
<el-pagination
|
v-model:current-page="pages.page"
|
v-model:page-size="pages.pageSize"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- </page> -->
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from "vue";
|
import { ElMessage } from "element-plus";
|
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
|
import { useRouter } from "vue-router";
|
import { useBreadcrumbStore, useUserStore } from "@/store";
|
import bookCover from "@/assets/images/personalCenter/book-cover.png";
|
const router = useRouter();
|
const crumbStore = useBreadcrumbStore();
|
const userStore = useUserStore();
|
const MG: any = inject("MG");
|
let order = ref("all");
|
let dataList = ref([]);
|
let queryFilter = reactive([]);
|
let pages = reactive({
|
page: 1,
|
pageSize: 5,
|
count: 0,
|
loading: false,
|
});
|
|
const tabCart = (event: Event) => {
|
order.value = event.props.name;
|
pages.page = 1;
|
dataList.value = [];
|
if (order.value == "all") {
|
queryFilter.value = [];
|
}
|
if (order.value == "payment") {
|
queryFilter.value = [{ field: "State", value: "WaitPay" }];
|
}
|
if (order.value == "complete") {
|
queryFilter.value = [{ field: "State", value: "Success" }];
|
}
|
if (order.value == "cancellation") {
|
queryFilter.value = [{ field: "State", value: "Cancel" }];
|
}
|
getDataList();
|
};
|
function getDataList() {
|
pages.loading = true;
|
const data = {
|
start: pages.pageSize * pages.page - pages.pageSize,
|
size: pages.pageSize,
|
filterList: queryFilter.value,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
};
|
MG.store
|
.getUserOrderList(data)
|
.then((res) => {
|
res.datas.forEach((item, index) => {
|
item.index =
|
pages.page == 1 ? index + 1 : pages.pageSize * (pages.page - 1) + (index + 1);
|
item.productList = item.saleMethodLinks;
|
item.time = item.createDate.slice(0, 10) + +item.createDate.slice(11, 20);
|
});
|
pages.count = res.totalSize;
|
dataList.value = [...res.datas];
|
console.log("订单列表", res.datas);
|
pages.loading = false;
|
})
|
.catch(() => {
|
pages.loading = false;
|
});
|
}
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
// watch(
|
// () => userStore.token,
|
// () => {
|
// getDataList()
|
// }
|
// )
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val;
|
getDataList();
|
};
|
// 跳转书本详情
|
const goBookDetails = async (
|
id: number,
|
name: string,
|
refCode: string,
|
remarks: string,
|
orderSaleMethodId: string
|
) => {
|
let parentData = null;
|
let bookId = id;
|
if (refCode == "digitalCourses") {
|
let crumbs = [
|
{
|
name,
|
isCrumbs: true,
|
type: "digitalCourses",
|
path: "digitalCoursesDetails",
|
},
|
];
|
// 在全局数据中设置面包屑
|
crumbStore.setCrumbs({
|
type: "digitalCourses",
|
data: crumbs,
|
callback: (key: any) => {
|
router.push({
|
name: "digitalCoursesDetails",
|
query: {
|
crumbsKey: key,
|
bookId: bookId,
|
bookName: name,
|
type: "digitalCourses",
|
},
|
});
|
},
|
});
|
} else if (refCode == "digitalTextbooks") {
|
let crumbs = [
|
{
|
name,
|
isCrumbs: true,
|
type: "digitalTextbooks",
|
path: "digitalTextbooksDetails",
|
},
|
];
|
// 在全局数据中设置面包屑
|
crumbStore.setCrumbs({
|
type: "digitalTextbooks",
|
data: crumbs,
|
callback: (key: any) => {
|
router.push({
|
name: "digitalTextbooksDetails",
|
query: {
|
crumbsKey: key,
|
bookId: bookId,
|
bookName: name,
|
type: "digitalTextbooks",
|
},
|
});
|
},
|
});
|
} else {
|
parentData = await MG.store.getProductBySaleMethod({
|
saleMethodId: orderSaleMethodId,
|
});
|
if (parentData.parentProduct.length > 0) {
|
bookId = parentData.parentProduct[parentData.parentProduct.length - 1].id;
|
}
|
console.log(bookId, "bookId");
|
let crumbs = [
|
{
|
name,
|
isCrumbs: true,
|
type: "bookService",
|
path: "/bookService/details",
|
},
|
];
|
// 在全局数据中设置面包屑
|
crumbStore.setCrumbs({
|
type: "bookService",
|
data: crumbs,
|
callback: (key: any) => {
|
router.push({
|
name: "bookDetails",
|
query: {
|
crumbsKey: key,
|
bookId: bookId,
|
bookName: name,
|
type: "bookService",
|
},
|
});
|
},
|
});
|
}
|
};
|
//立即支付
|
const toPay = (orderNo) => {
|
let crumbs: any[] = [
|
{
|
name: "我的订单", // 面包屑名称
|
pathName: "myOrder", // 面包屑跳转路由，可传递 pathName 或 path
|
isCrumbs: true, // 面包屑点击跳转时是否创建新的面包屑记录
|
type: "personalCenter", // 如果需要创建新的面包屑记录，创建的type
|
query: {
|
type: "personalCenter",
|
},
|
},
|
];
|
crumbs.push({
|
name: "订单详情",
|
});
|
// 在全局数据中设置面包屑
|
crumbStore.setCrumbs({
|
type: "personalCenter",
|
data: crumbs,
|
callback: (key: any) => {
|
router.push({
|
path: "/paymentPage", //要跳转的页面
|
query: {
|
crumbsKey: key,
|
orderNum: orderNo,
|
type: "personalCenter",
|
},
|
});
|
},
|
});
|
};
|
|
//取消订单
|
const cancleOrder = (orderNum) => {
|
MG.store.cancelOrder({ orderNum: orderNum }).then(() => {
|
ElMessage({
|
message: "订单已取消",
|
type: "success",
|
});
|
getDataList();
|
});
|
};
|
</script>
|
<style lang="less" scoped>
|
.cartClass {
|
::v-deep .el-tabs__nav-wrap::after {
|
background-color: #019e58;
|
height: 1px;
|
}
|
|
::v-deep .el-tabs__item {
|
width: 100px;
|
padding: 0;
|
color: #545c63;
|
}
|
|
::v-deep .is-active {
|
background-color: #019e58;
|
color: #fff;
|
border-radius: 3px 3px 0 0;
|
}
|
}
|
|
.listTable {
|
.head {
|
font-weight: bold;
|
padding: 12px 10px;
|
background-color: #f3f3f3;
|
|
.flex1 {
|
padding: 0 50px;
|
}
|
}
|
|
.body {
|
padding: 15px 10px;
|
}
|
|
li {
|
line-height: 23px;
|
border-bottom: 1px solid #f4f4f4;
|
|
.index {
|
// padding: 0 20px;
|
text-align: center;
|
width: 80px;
|
flex-shrink: 0;
|
}
|
|
.list {
|
.listItem {
|
padding-bottom: 10px;
|
|
.clear {
|
width: 400px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
:last-child {
|
padding-bottom: 0px;
|
}
|
}
|
|
.cover {
|
box-shadow: 0px 0px 20px 1px #ccc;
|
margin-right: 20px;
|
width: 130px;
|
height: 180px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
|
.title {
|
height: 180px;
|
line-height: 180px;
|
}
|
|
.state {
|
padding: 0 20px;
|
width: 230px;
|
}
|
|
.price {
|
text-align: right;
|
padding: 0 20px;
|
// width: 100px;
|
color: #019e58;
|
}
|
|
.count {
|
// text-align: right;
|
display: flex;
|
justify-content: space-between;
|
padding: 10px;
|
background: rgba(205, 207, 219, 0.14);
|
|
.right {
|
float: right;
|
}
|
|
.cancel {
|
color: #949494;
|
}
|
|
.status {
|
margin-left: 40px;
|
|
span {
|
padding: 0 10px;
|
}
|
}
|
}
|
}
|
}
|
|
.list-box {
|
min-height: 495px;
|
}
|
|
.pagination-box {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
