From 9cad6a832c786989be620573b09badccfe7e3b51 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 15:11:37 +0800
Subject: [PATCH] 首页头部，样式调整
---
src/views/personalCenter/myOrder.vue | 397 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 396 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myOrder.vue b/src/views/personalCenter/myOrder.vue
index 1002f5e..a7ffeb7 100644
--- a/src/views/personalCenter/myOrder.vue
+++ b/src/views/personalCenter/myOrder.vue
@@ -1,3 +1,398 @@
<template>
- <div>鎴戠殑璁㈠崟</div>
+ <!-- <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>
--
Gitblit v1.9.1