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/myCart.vue | 544 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 543 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myCart.vue b/src/views/personalCenter/myCart.vue
index 9e855f4..3c03131 100644
--- a/src/views/personalCenter/myCart.vue
+++ b/src/views/personalCenter/myCart.vue
@@ -1,3 +1,545 @@
<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="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: 120px;">
+ <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="200" />
+ <el-table-column property="productType" label="鍟嗗搧绫诲瀷" width="200" />
+ <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="primary" @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 { useUserStore } from '@/store'
+import { getPublicImage } from '@/assets/js/middleGround/tool.js'
+import defaultImg from '@/assets/images/default-book-img.png'
+const dialogVisible = ref(false)
+const router = useRouter()
+const userStore = useUserStore()
+const MG: any = 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: '#019e58' }
+ }
+}
+
+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) => {
+ 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) {
+ router.push({
+ name: 'paymentPage',
+ query: {
+ 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;
+ }
+ }
+}
+
+::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: 120px;
+ height: 160px;
+ }
+
+ .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;
+ box-sizing: border-box;
+
+ 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