<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 == '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 { useUserStore } from '@/store'
|
import bookCover from '@/assets/images/personalCenter/book-cover.png'
|
const router = useRouter()
|
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') {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: bookId,
|
},
|
})
|
} else if (refCode == 'digitalTextbooks') {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: bookId,
|
},
|
})
|
} else {
|
parentData = await MG.store.getProductBySaleMethod({
|
saleMethodId: orderSaleMethodId,
|
})
|
if (parentData.parentProduct.length > 0) {
|
bookId = parentData.parentProduct[parentData.parentProduct.length - 1].id
|
}
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: bookId,
|
},
|
})
|
}
|
}
|
//立即支付
|
const toPay = (orderNo) => {
|
router.push({
|
path: '/paymentPage', //要跳转的页面
|
query: {
|
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;
|
}
|
|
.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>
|
