123

src/router/index.ts

@@ -65,6 +65,11 @@ const router = createRouter({
       name:'account',
       component:()=>import('@/views/account/index.vue')
     },
+    {
+      path:'/pay',
+      name:'pay',
+      component:()=>import('@/views/pay/index.vue')
+    },
     {
       path: '/:pathMatch(.*)',
       name: '404',

src/views/pay/index.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="pay">
+		<div class="content">
+			<sc-list title="Order Summary" is-view is-mini :list="list" />
+		</div>
+		<my-footer />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	import scList from '../shoppingCart/sc-list.vue'
+	import myFooter from '@/components/Footer.vue'
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+	const list = ref([])
+	try {
+		let str = route.query.list as string
+		list.value = JSON.parse(decodeURIComponent(atob(str)))
+	} catch (error) {}
+</script>
+
+<style lang="less" scoped>
+	.pay {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		overflow-y: auto;
+		--content-top: 4.8rem;
+		> .content {
+			max-width: 126rem;
+			padding-top: var(--content-top);
+			margin: 0 auto;
+			min-height: var(--app-view-height);
+			display: flex;
+			align-items: flex-start;
+			> .sc-list {
+				flex: 1;
+				margin-right: 7.5rem;
+				margin-bottom: 8rem;
+				--sc-list-header-top: var(--content-top);
+			}
+			> .order-summary {
+				position: sticky;
+				top: var(--content-top);
+				max-height: var(--app-view-height);
+			}
+		}
+	}
+</style>

src/views/shoppingCart/index.vue

@@ -3,8 +3,6 @@
 		<div class="content">
 			<sc-list @selected-change="(v) => (selectedList = v)" />
 			<order-summary :list="selectedList" />
-			<!-- <sc-list is-mini style="height: 70rem" /> -->
-			<!-- <sc-list is-mini is-view title="Order Summary" style="height: 70rem" /> -->
 		</div>
 		<my-footer />
 	</div>

src/views/shoppingCart/order-summary.vue

@@ -62,11 +62,11 @@
 	})
 	const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const handleCheckout = () => {
-		const ids = props.list.map((v: any) => v.listingId)
-		if (ids.length === 0) return
-		console.log('购买：', ids)
-		CreateOrder(ids, true).then((res) => {
-			router.go(0)
+		if (props.list.length === 0) return
+		const list = btoa(encodeURIComponent(JSON.stringify(props.list)))
+		router.push({
+			name: 'pay',
+			query: { list }
 		})
 	}
 </script>

src/views/shoppingCart/sc-list.vue

@@ -102,7 +102,8 @@
 	const props = defineProps({
 		title: { type: String, default: '' },
 		isMini: { type: Boolean, default: false },
-		isView: { type: Boolean, default: false }
+		isView: { type: Boolean, default: false },
+		list: { type: Array }
 	})
 	const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
@@ -134,7 +135,7 @@
 
 	const list_ = ref([])
 	const list = computed(() => {
-		if(sortBy.value === 'BestSelling') {
+		if (sortBy.value === 'BestSelling') {
 			return list_.value.sort((a, b) => b.salesVolume - a.salesVolume)
 		}
 		if (sortBy.value === 'PriceLowToHigh') {
@@ -174,7 +175,11 @@
 			handleSelectedChange()
 		})
 	}
-	GetList()
+	if (props.list) {
+		list_.value = props.list
+	} else {
+		GetList()
+	}
 	const handleAllAllClick = (checked?: boolean) => {
 		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
 		list.value.forEach((v) => (v.checked = v.status === SCART_STATUS.NORMAL ? checked_ : false))