From b15a997e95d715c41df3a76aecbf58ec1141ab53 Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期四, 21 八月 2025 18:37:17 +0800
Subject: [PATCH] 个人中心-接口测试
---
src/views/personalCenter/myOrder.vue | 494 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 493 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myOrder.vue b/src/views/personalCenter/myOrder.vue
index 1002f5e..fa053cd 100644
--- a/src/views/personalCenter/myOrder.vue
+++ b/src/views/personalCenter/myOrder.vue
@@ -1,3 +1,495 @@
<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 ==
+ "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>
--
Gitblit v1.9.1