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/myCart.vue | 598 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 597 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myCart.vue b/src/views/personalCenter/myCart.vue
index 9e855f4..a726dfc 100644
--- a/src/views/personalCenter/myCart.vue
+++ b/src/views/personalCenter/myCart.vue
@@ -1,3 +1,599 @@
<template>
- <div>璐墿杞�</div>
+ <div class="personalPage-box">
+ <div class="personalPage-title">鎴戠殑璐墿杞�</div>
+ <div class="personalPage-content">
+ <div class="deleteBox">
+ <el-dialog
+ v-model="dialogVisible"
+ width="30%"
+ draggable
+ align-center
+ :modal="false"
+ >
+ <span>
+ <el-icon style="color: orange"> <Warning /> </el-icon
+ >纭瑕佸垹闄ら�変腑鐨勫晢鍝佸悧锛�</span
+ >
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleDelete"> 纭畾 </el-button>
+ </span>
+ </template>
+ </el-dialog>
+
+ <el-dialog v-model="showHide" width="30%" draggable align-center :modal="false">
+ <span
+ ><el-icon style="color: orange"> <Warning /> </el-icon
+ >纭瑕佸垹闄ら�変腑鐨勫晢鍝佸悧锛�</span
+ >
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="showHide = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmEvent"> 纭畾 </el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+
+ <div class="breadcrumbsBox">
+ <p>
+ 浣嶇疆锛� <span>璐墿杞�({{ total }})</span>
+ </p>
+ </div>
+ <div class="selectproduct">
+ <el-table
+ ref="multipleTableRef"
+ :data="shoppingCartData"
+ style="width: 100%"
+ @selection-change="handleSelectionChange"
+ :cell-style="cellStyle"
+ v-loading="loading"
+ >
+ <template v-slot:empty>
+ <el-empty class="noData" image-size="100" description="鏆傛棤鏁版嵁" />
+ </template>
+
+ <el-table-column type="selection" width="30" />
+
+ <el-table-column label="鍏ㄩ��" width="200">
+ <template #default="scope">
+ <div style="position: relative; width: 110px">
+ <el-image
+ :src="scope.row.imgUrl ? scope.row.imgUrl : defaultImg"
+ class="bookImg"
+ >
+ </el-image>
+ <div
+ class="labelBox"
+ :style="{
+ background: scope.row.type == 'product' ? '#019e58 ' : '#5f92fd',
+ }"
+ >
+ <p>{{ scope.row.typeTxt }}</p>
+ </div>
+ </div>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ property="name"
+ label="鍟嗗搧淇℃伅"
+ width="300"
+ :cell-style="{ margin: '30px' }"
+ />
+ <el-table-column property="productType" label="鍟嗗搧绫诲瀷" width="300" />
+ <el-table-column label="浠锋牸">
+ <template #default="scope">楼{{ scope.row.unitprice.toFixed(2) }}</template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔">
+ <template #default="scope">
+ <span @click="dialog(scope.$index, scope.row)" class="deleteBtn">鍒犻櫎</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ <div class="settlement">
+ <div class="box">
+ <div class="gaugeOutfit">
+ <div class="leftBox">
+ <el-checkbox
+ v-if="shoppingCartData.length"
+ class="checkbox"
+ v-model="selectAll"
+ label="鍏ㄩ��"
+ name="type"
+ @change="toggleAllSelection"
+ />
+ <el-checkbox
+ v-else
+ class="checkbox"
+ v-model="select"
+ disabled
+ label="鍏ㄩ��"
+ name="type"
+ @change="toggleAllSelection"
+ />
+ <el-button class="buttonBox" @click="batchDelete">鎵归噺鍒犻櫎</el-button>
+ </div>
+
+ <div class="rightBox">
+ <p>
+ 宸查�夋嫨 <span>{{ selectedItemCount }}</span> 浠跺晢鍝�
+ </p>
+ <p>
+ 鎬讳环锛�<span v-if="sumUnitprice">楼{{ sumUnitprice.toFixed(2) }}</span>
+ <span v-else>楼0.00</span>
+ </p>
+ <el-button class="button" type="warning" @click="goPaymentPage"
+ >缁撶畻</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
+
+<script setup lang="ts">
+import { onMounted, ref, inject, watch } from "vue";
+import { ElTable, ElMessage } from "element-plus";
+import { reactive } from "vue";
+import { useRouter } from "vue-router";
+import { InfoFilled } from "@element-plus/icons-vue";
+import { useUserStore, useBreadcrumbStore } from "@/store";
+import { getPublicImage } from "@/assets/js/middleGround/tool.js";
+import defaultImg from "@/assets/images/default-book-img.png";
+const dialogVisible = ref(false);
+const crumbStore = useBreadcrumbStore();
+const router = useRouter();
+const userStore = useUserStore();
+const MG = inject("MG");
+const total = ref();
+const multipleTableRef = ref();
+const loading = ref(true);
+const selectAll = ref(false);
+const multipleSelection = ref([]);
+const orderNumber = ref();
+const select = ref(false);
+const showHide = ref(false);
+const selectedItemCount = ref(0); // 鏂板涓�涓彉閲忕敤浜庡瓨鍌ㄥ凡閫夊晢鍝佹暟閲�
+const sumUnitprice = ref();
+
+watch(multipleSelection, (newSelection) => {
+ // 褰� multipleSelection.value 鍙戠敓鍙樺寲鏃惰Е鍙戠殑鍥炶皟鍑芥暟
+ let sum = 0;
+ newSelection.forEach((item) => {
+ sum += item.unitprice;
+ });
+
+ sumUnitprice.value = sum;
+
+ selectedItemCount.value = newSelection.length;
+});
+
+onMounted(() => {
+ shoppingCartGet();
+ // totalPrice()
+});
+const batchDelete = (evt) => {
+ let target = evt.target;
+ if (target.nodeName == "SPAN") {
+ target = evt.target.parentNode;
+ }
+ target.blur();
+ if (multipleSelection.value.length === 0) {
+ // 濡傛灉娌℃湁閫夋嫨浠讳綍鍟嗗搧锛屽彲浠ュ湪姝ゅ缁欏嚭鎻愮ず鎴栬�呯洿鎺ヨ繑鍥�
+ ElMessage({
+ message: "鏈�夋嫨鍟嗗搧",
+ type: "warning",
+ });
+ } else {
+ showHide.value = true;
+ // showHide.value = false
+ }
+};
+
+const handleSelectionChange = (val) => {
+ // console.log(val);
+
+ multipleSelection.value = val;
+ // 鍒ゆ柇鏄惁鍏ㄩ儴閫夋嫨
+ if (!delShoppingSelec.value) {
+ if (val.length === shoppingCartData.length) {
+ selectAll.value = true;
+ } else {
+ selectAll.value = false;
+ }
+ }
+};
+
+// 鍒囨崲鎵�鏈夎閫変腑鐘舵�佺殑鏂规硶
+const toggleAllSelection = () => {
+ if (shoppingCartData.length === 0) {
+ selectAll.value = false;
+
+ ElMessage({
+ message: "娌℃湁鍙�夋嫨鐨勫晢鍝�",
+ type: "warning",
+ });
+ } else {
+ multipleTableRef.value.toggleAllSelection();
+ }
+};
+const selectedRow = ref();
+const dialog = (index, row) => {
+ dialogVisible.value = true;
+
+ // 灏嗗綋鍓嶈鏁版嵁瀛樺偍璧锋潵锛屼互澶囧垹闄ゆ椂浣跨敤
+ selectedRow.value = row;
+};
+
+const handleDelete = () => {
+ const row = selectedRow.value;
+ dialogVisible.value = false;
+ MG.store
+ .delShoppingCart({
+ ids: [row.id],
+ })
+ .then((res) => {
+ shoppingCartGet();
+ ElMessage({
+ message: "鍒犻櫎鎴愬姛",
+ type: "success",
+ });
+ //鏇存柊璐墿杞︽暟閲�
+ userStore.updateRightPop();
+ })
+ .catch((error) => {
+ ElMessage.error("鍒犻櫎澶辫触");
+ });
+};
+
+//琛ㄥ崟鐨勬牱寮�
+const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+ if (columnIndex === 4) {
+ return { color: "#FF6C00" };
+ }
+};
+
+const shoppingCartData = reactive([]);
+
+const shoppingCartGet = () => {
+ let query = {
+ start: 0,
+ size: 999,
+ filterList: [],
+ searchList: [],
+ };
+ MG.store.getShoppingCartProductList(query).then((res) => {
+ const newData = res.datas.map((item) => {
+ console.log(item.saleMethod.type, "item.saleMethod.type");
+ if (item.productMonWithLinkDto.links[0].storeRefCode == "jsek_digitalTextbooks") {
+ item.typeTxt = "鏁板瓧鏁欐潗";
+ item.productType = "鏁板瓧鏁欐潗";
+ } else if (
+ item.productMonWithLinkDto.links[0].storeRefCode == "jsek_digitalCourses"
+ ) {
+ item.typeTxt = "鏁板瓧璇剧▼";
+ item.productType = "鏁板瓧璇剧▼";
+ } else {
+ item.typeTxt = "鐢靛瓙涔�";
+ item.productType = "鍥句功鏈嶅姟-鐢靛瓙涔�";
+ }
+
+ // console.log(item.saleMethod.id);
+ console.log(item.saleMethod.type, "item.saleMethod.type");
+ return {
+ saleMethodId: item.saleMethod.id,
+ id: item.id,
+ name:
+ item.linkCmsItems.length && item.linkCmsItems[0].name
+ ? item.productMonWithLinkDto.product.name + "锛�" + item.linkCmsItems[0].name
+ : item.productMonWithLinkDto.product.name,
+ type: item.saleMethod.type == "createProductItemSaleMethod" ? "item" : "product",
+ typeTxt: item.typeTxt,
+ productType: item.productType,
+ imgUrl: getPublicImage(item.productMonWithLinkDto.product.icon, "", "160"),
+ unitprice: item.saleMethod.price,
+ expire:
+ new Date(item.saleMethod.endDate).getTime() < new Date().getTime() ||
+ new Date().getTime() < new Date(item.saleMethod.beginDate).getTime()
+ ? true
+ : false,
+ };
+ });
+
+ // 閲嶆柊璧嬪�� shoppingCartData.value
+ shoppingCartData.splice(0, shoppingCartData.length, ...newData);
+ loading.value = false;
+ });
+};
+
+//璺宠浆闈㈠寘灞�
+const goPaymentPage = async () => {
+ try {
+ // console.log(multipleSelection.value, 346588998)
+ let expire = multipleSelection.value.filter((item) => item.expire == true);
+ if (expire.length > 0) {
+ ElMessage({
+ message: "鎮ㄩ�夋嫨鐨勫晢鍝佹湁涓嶅湪鏈夋晥鏈熷唴鐨�,璇烽噸鏂伴�夋嫨鍙喘涔板晢鍝�!",
+ type: "warning",
+ });
+ } else {
+ const selectedIds = multipleSelection.value.map((item) => item.id);
+ const saleMethodId = multipleSelection.value.map((item) => item.saleMethodId);
+
+ console.log(saleMethodId, 789);
+
+ let queryCreateOrder = { linkIds: selectedIds };
+ const createOrderResult = await MG.store.shoppingCartCreateOrder(queryCreateOrder);
+ orderNumber.value = createOrderResult.orderNumber;
+
+ if (selectedIds.length) {
+ let crumbs = {
+ name: "璁㈠崟鏀粯", // 闈㈠寘灞戝悕绉�
+ pathName: "paymentPage", // 闈㈠寘灞戣烦杞矾鐢憋紝鍙紶閫� pathName 鎴� path
+ isCrumbs: true, // 闈㈠寘灞戠偣鍑昏烦杞椂鏄惁鍒涘缓鏂扮殑闈㈠寘灞戣褰�
+ type: "shoppingCart", // 濡傛灉闇�瑕佸垱寤烘柊鐨勯潰鍖呭睉璁板綍锛屽垱寤虹殑type
+ };
+ // 鍦ㄥ叏灞�鏁版嵁涓缃潰鍖呭睉
+ crumbStore.setCrumbs({
+ type: "shoppingCart",
+ data: [crumbs],
+ callback: (key) => {
+ router.push({
+ name: "paymentPage",
+ query: {
+ crumbsKey: key,
+ orderNumber: orderNumber.value,
+ // type: route.query.type,
+ type: "shoppingCart",
+ onNorderSaleMethod: saleMethodId,
+ },
+ });
+ },
+ });
+ } else {
+ ElMessage({
+ message: "璇烽�夋嫨鍟嗗搧",
+ type: "warning",
+ });
+ }
+ }
+ } catch (error) {
+ console.error(error);
+ // 閿欒澶勭悊閫昏緫
+ }
+};
+
+const delShoppingSelec = ref();
+
+const confirmEvent = () => {
+ showHide.value = false;
+ if (multipleSelection.value.length === 0) {
+ // 濡傛灉娌℃湁閫夋嫨浠讳綍鍟嗗搧锛屽彲浠ュ湪姝ゅ缁欏嚭鎻愮ず鎴栬�呯洿鎺ヨ繑鍥�
+ return;
+ } else {
+ const selectedIds = multipleSelection.value.map((item) => item.id);
+ MG.store
+ .delShoppingCart({ ids: selectedIds })
+ .then((res) => {
+ delShoppingSelec.value = res;
+ ElMessage({
+ message: "鎵归噺鍒犻櫎鎴愬姛",
+ type: "success",
+ });
+ selectAll.value = false;
+ // 鍒犻櫎鎴愬姛鍚庯紝鍒锋柊璐墿杞﹀垪琛�
+ shoppingCartGet();
+ //鏇存柊璐墿杞︽暟閲�
+ userStore.updateRightPop();
+ })
+ .catch((error) => {
+ console.error("鎵归噺鍒犻櫎澶辫触", error);
+ ElMessage.error("鎵归噺鍒犻櫎澶辫触");
+ });
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.deleteBtn {
+ cursor: pointer;
+ color: #019e58;
+}
+
+page {
+ position: relative;
+ min-height: calc(100vh - 430px);
+}
+
+.bookImg {
+ box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
+
+ /deep/ .el-image__inner {
+ object-fit: contain !important;
+ }
+}
+
+.settlement {
+ width: 100%;
+ box-shadow: 0px -2px 10px 1px rgba(0, 0, 0, 0.08);
+
+ position: sticky;
+
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #fff;
+ z-index: 2;
+
+ .box {
+ position: relative;
+
+ .gaugeOutfit {
+ padding-left: 12px;
+ box-shadow: 0px -2px 5px 1px rgba(0, 0, 0, 0.02);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 2;
+ background-color: #fff;
+ height: 60px;
+
+ .leftBox {
+ display: flex;
+ flex-direction: row;
+
+ .checkbox {
+ margin-right: 20px;
+ }
+
+ /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+ color: #000 !important;
+ }
+ }
+
+ .rightBox {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ p {
+ margin: 0 10px;
+ font-size: 14px;
+
+ span {
+ color: #019e58;
+ font-size: 18px;
+ }
+ }
+
+ .button {
+ margin-left: 50px;
+ background-color: #019e58;
+ width: 150px;
+ height: 50px;
+ }
+ }
+ }
+
+ .selected {
+ display: flex;
+ justify-content: center;
+ height: 200px;
+ min-width: 1370px;
+ width: 1370px;
+ margin: 0 auto;
+ }
+ }
+}
+
+.selectproduct {
+ margin-top: 30px;
+}
+
+::v-deep {
+ .el-checkbox__label {
+ margin-left: 6px;
+ color: #000;
+ font-weight: bold;
+ }
+
+ .el-table td.el-table__cell div {
+ margin-right: 20px;
+ }
+
+ .el-table th {
+ background-color: #f3f3f3;
+ color: #000;
+ }
+
+ .el-table td {
+ color: #333333;
+ }
+
+ .el-table--enable-row-transition .el-table__body td.el-table__cell {
+ height: 180px;
+ }
+
+ .el-checkbox__inner {
+ width: 16px;
+ height: 16px;
+ }
+
+ .el-image__inner {
+ box-shadow: 0px 0px 20px 1px #ccc;
+ object-fit: contain !important;
+ width: 110px;
+ height: 140px;
+ }
+
+ .el-icon {
+ margin-right: 10px;
+ font-size: 20px;
+ position: relative;
+ top: 3px;
+ left: 0px;
+ }
+
+ .deleteBox {
+ .el-dialog.is-align-center {
+ width: 350px;
+ }
+
+ .el-dialog__body {
+ display: flex;
+ justify-content: center;
+ font-size: 16px;
+ }
+ }
+
+ .el-table__inner-wrapper::before {
+ height: 0px;
+ }
+}
+
+.labelBox {
+ // width: 50px;
+ padding: 0 4px;
+ height: 25px;
+ color: #fff;
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0 !important;
+ border-radius: 0px 0px 0px 5px;
+
+ p {
+ display: flex;
+ justify-content: center;
+ }
+}
+
+.breadcrumbsBox {
+ height: 60px;
+ border-bottom: 1px solid #f5f5f5;
+
+ p {
+ line-height: 60px;
+ font-size: 14px;
+ color: #545c63;
+ }
+}
+
+.noData {
+ font-size: 26px;
+ font-weight: bold;
+ display: flex;
+ justify-content: center;
+ margin: 0 auto;
+}
+</style>
--
Gitblit v1.9.1