111

src/views/pay/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="pay">
 		<div class="content">
+			<payment :ids="ids" />
 			<sc-list title="Order Summary" is-view is-mini :list="list" />
 		</div>
 		<my-footer />
@@ -10,10 +11,14 @@
 <script setup lang="ts">
 	import { computed, onMounted, ref } from 'vue'
 	import scList from '../shoppingCart/sc-list.vue'
+	import payment from './payment.vue'
 	import myFooter from '@/components/Footer.vue'
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
 	const list = ref([])
+	const ids = computed(() => {
+		return list.value.map((item) => item.listingId)
+	})
 	try {
 		let str = route.query.list as string
 		list.value = JSON.parse(decodeURIComponent(atob(str)))
@@ -28,23 +33,30 @@
 		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);
+				flex: 1;
 			}
+			// 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/pay/payment.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="pay">{{ props.ids }}</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, ref } from 'vue'
+	const props = defineProps({
+		ids: {
+			type: Array,
+			default: () => []
+		}
+	})
+</script>
+
+<style lang="less" scoped>
+	.pay {
+	}
+</style>