支付

src/api/user.ts

@@ -1,5 +1,15 @@
 import request from '@/utils/request'
-
+export interface AxiosProgressEvent {
+	loaded: number;
+	total?: number;
+	progress?: number;
+	bytes: number;
+	rate?: number;
+	estimated?: number;
+	upload?: boolean;
+	download?: boolean;
+	event?: any;
+}
 export interface WardrobeItem {
 	buyerId: number
 	categories: string[]
@@ -38,7 +48,7 @@ export interface Download {
 	ids: string[]
 }
 // 下载资源
-export const fetchDownloadItemsByGet = (params: Download): Promise<ApiResponse> => {
+export const fetchDownloadItemsByGet = (params: Download, onDownloadProgress?: (event: AxiosProgressEvent) => void): Promise<ApiResponse> => {
 	return request({
 		url: '/buyer/listing/mall/main-product/download',
 		method: 'get',
@@ -60,7 +70,8 @@ export const fetchDownloadItemsByGet = (params: Download): Promise<ApiResponse>
 				})
 			}
 			return usp.toString()
-		}
+		},
+		onDownloadProgress
 	})
 }
 

src/views/pay/payment.vue

@@ -60,8 +60,22 @@
 					Wardrobe.
 				</div>
 			</div>
+
+			<div class="progres" v-if="downloadInfo.status !== DOWNLOAD_STATUS.null">
+				<el-progress
+					:text-inside="true"
+					:percentage="downloadInfo.progress * 100"
+					:status="progressStatus"
+					:duration="0.3"
+				>
+					<span class="text"
+						>{{ FormatBytes(downloadInfo.loaded, { unitBig: true }) }} /
+						{{ FormatBytes(downloadInfo.total, { unitBig: true }) }}</span
+					>
+				</el-progress>
+			</div>
 			<div class="buttons">
-				<button custom="black">download all Assets</button>
+				<button custom="black" @click="handleDownloadAllAssets">download all Assets</button>
 				<button custom="black-box">
 					<span class="icon"><svg-icon name="order-file" size="18" /></span>
 					<span class="text">Export Invoice</span>
@@ -75,6 +89,8 @@
 </template>
 
 <script setup lang="ts">
+	import { FormatBytes } from '@/utils/tools'
+	import { fetchDownloadItemsByGet } from '@/api/user'
 	import { computed, onMounted, ref } from 'vue'
 	import { CreateOrder } from '@/api/shoppingCart'
 	import { useRouter } from 'vue-router'
@@ -96,13 +112,80 @@
 		const ids = [...props.ids]
 		if (ids.length === 0) return
 		// CreateOrder(ids, true).then((res) => {
-		// 	console.log(res)
-		// })
+		openView('https://www.baidu.com/')
 		status.value = 1
+		// })
 	}
 	const getOrderStatus = () => {
 		status.value = 2
 	}
+	const openView = (url, width = 800, height = 600) => {
+		const left = (screen.width - width) / 2
+		const top = (screen.height - height) / 2
+		window.open(
+			url,
+			'_blank',
+			'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
+		)
+	}
+	const DOWNLOAD_STATUS = {
+		null: 0, // 未开始
+		dowloading: 1, // 下载中
+		success: 2, // 下载成功
+		failed: 3 // 下载失败
+	}
+	const downloadInfo = ref({
+		progress: 0,
+		status: DOWNLOAD_STATUS.null,
+		total: 0,
+		loaded: 0
+	})
+	const progressStatus = computed(() => {
+		if (downloadInfo.value.status === DOWNLOAD_STATUS.dowloading) {
+			return 'warning'
+		} else if (downloadInfo.value.status === DOWNLOAD_STATUS.success) {
+			return 'success'
+		} else if (downloadInfo.value.status === DOWNLOAD_STATUS.failed) {
+			return 'exception'
+		} else {
+			return 'warning'
+		}
+	})
+	const handleDownloadAllAssets = () => {
+		const ids = props.ids as string[]
+		downloadInfo.value.status = DOWNLOAD_STATUS.dowloading
+		downloadInfo.value.progress = 0
+		fetchDownloadItemsByGet({ ids }, (event) => {
+			downloadInfo.value.progress = event.progress
+			downloadInfo.value.loaded = event.loaded
+			downloadInfo.value.total = event.total
+		})
+			.then((res) => {
+				const disposition = res.headers['content-disposition']
+				const fileName = disposition?.split('filename=')[1]?.replace(/"/g, '') || 'download.zip'
+				const blob = res.data
+				const url = window.URL.createObjectURL(blob)
+
+				const link = document.createElement('a')
+				link.href = url
+
+				const timestamp = new Date().getTime()
+				link.download = fileName || `wardrobe_download_${timestamp}.zip`
+
+				document.body.appendChild(link)
+				link.click()
+
+				document.body.removeChild(link)
+				window.URL.revokeObjectURL(url)
+			})
+			.catch((error) => {
+				downloadInfo.value.status = DOWNLOAD_STATUS.failed
+			})
+			.finally(() => {
+				downloadInfo.value.progress = 1
+				downloadInfo.value.status = DOWNLOAD_STATUS.success
+			})
+	}
 </script>
 
 <style lang="less" scoped>
@@ -234,5 +317,20 @@
 				text-align: center;
 			}
 		}
+		> .progres {
+			margin: 2rem auto;
+			max-width: 50rem;
+			width: 100%;
+			.text {
+				font-size: 1.4rem;
+				line-height: 2.2rem;
+				color: #000;
+			}
+			&:deep(.el-progress) {
+				.el-progress-bar__outer {
+					height: 2.2rem !important;
+				}
+			}
+		}
 	}
 </style>

src/views/shoppingCart/sc-list.vue

@@ -105,7 +105,12 @@
 		isView: { type: Boolean, default: false },
 		list: { type: Array }
 	})
-	const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
+	const allAmount = computed(() =>
+		list.value
+			.filter((v) => v.status === SCART_STATUS.NORMAL)
+			.reduce((pre, cur) => pre + cur.amount, 0)
+			.toFixed(2)
+	)
 	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
 	const maxLength = computed(() => list.value.filter((v) => v.status === SCART_STATUS.NORMAL).length)
 	const allSelected = computed(() =>