Merge branches 'master' and 'master' of https://gitee.com/lvYeJu/lane-crawford-3

src/views/Workshop/creation.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-	import { ref, onMounted } from 'vue'
+	import { ref, reactive, onMounted } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import MyList from '@/components/myList.vue'
 
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
@@ -17,6 +18,19 @@
 	const onContinue = () => {
 		router.push({ name: 'end' })
 	}
+	const list = reactive([{},{},{},{},{},{}])
+	const loading = ref(false)
+	const finish = ref(false)
+	const onLoad = () => {
+		loading.value = true
+		setTimeout(() => {
+			list.push({},{},{},{},{},{})
+			loading.value = false
+			if (list.length >= 20) {
+				finish.value = true
+			}
+		}, 1500)
+	}
 </script>
 
 <template>
@@ -24,9 +38,11 @@
 	<div class="creation">
 		<div class="title">Your Creation</div>
 		<div class="list">
-			<div class="item" v-for="i in 10" :key="i">
-				<img src="@/assets/images/workshop/posture/posture_1.png" />
-			</div>
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
+				<div class="item" v-for="(v,i) in list" :key="i">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+				</div>
+			</my-list>
 		</div>
 		<div class="btns">
 			<button @click="onSave">Save</button>
@@ -57,25 +73,27 @@
 		}
 		> .list {
 			flex: 1;
-			overflow-y: auto;
-			padding: 0 6rem;
 			margin: 0 3.8rem;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			// justify-content: space-around;
-			> .item {
-				width: 47%;
-				height: 52.9rem;
-				overflow: hidden;
-				border-radius: 2rem;
-				background-color: #fff;
-				margin-bottom: 4rem;
-				border: 0.1rem solid #000;
-				> img {
-					width: 100%;
-					height: 100%;
-					object-fit: contain;
+			overflow: hidden;
+			> .my-list {
+				padding: 0 6rem;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				// justify-content: space-around;
+				.item {
+					width: 47%;
+					height: 52.9rem;
+					overflow: hidden;
+					border-radius: 2rem;
+					background-color: #fff;
+					margin-bottom: 4rem;
+					border: 0.1rem solid #000;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
 				}
 			}
 		}

src/views/Workshop/customize.vue

@@ -16,7 +16,6 @@
 		console.log('发送消息:', text)
 	}
 	const onLove = () => {
-		console.log('love')
 		isLoved.value = !isLoved.value
 	}
 	const onReload = () => {
@@ -25,6 +24,9 @@
 	const onDownload = () => {
 		console.log('download')
 	}
+	const onRetry = () => {
+		router.back()
+	}
 	const onContinue = () => {
 		router.push({ name: 'creation' })
 	}
@@ -58,7 +60,10 @@
 				<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
 			</div>
 		</div>
-		<button class="continue-btn" @click="onContinue">Continue</button>
+		<div class="btns">
+			<button @click="onRetry">Re-try?</button>
+			<button @click="onContinue">Continue</button>
+		</div>
 	</div>
 	<footer-navigation />
 </template>
@@ -175,19 +180,25 @@
 				}
 			}
 		}
-		> .continue-btn {
-			box-sizing: content-box;
-			font-family: satoshiRegular;
-			margin: 2.5rem 2.5rem 0 auto;
-			width: 35rem;
-			height: 7rem;
-			border-radius: 1.3rem;
-			background: #000;
-			font-weight: 400;
-			font-size: 4.2rem;
-			color: #fff;
-			&:active {
-				opacity: 0.7;
+		> .btns {
+			margin-top: 2.5rem;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiRegular;
+				margin: 0 2rem;
+				width: 35rem;
+				height: 6rem;
+				border-radius: 1.3rem;
+				background: #000;
+				font-weight: 400;
+				font-size: 3.6rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
 			}
 		}
 	}