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

src/components/FooterNavigation.vue

@@ -27,7 +27,7 @@
 			.catch(() => {})
 	}
 	const navs = [
-		{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
+		{ label: 'Home', icon: 'home', size: 73, path: '/stylist/customer', on: onHome },
 		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
 		{ label: 'Profile', icon: 'profile', size: 55, path: '' }
 	]

src/components/MyList.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+	import { ref, onMounted, onBeforeUnmount } from 'vue'
+	const props = defineProps({
+		loading: { default: false, type: Boolean },
+		finish: { default: false, type: Boolean },
+		pel: { default: () => {}, type: Function }
+	})
+	const emit = defineEmits(['load'])
+	const el = ref()
+	const placeholder = ref()
+	const observer = ref()
+	onMounted(() => {
+		observer.value = new IntersectionObserver(
+			(entries, observer) => {
+				if (!entries[0].intersectionRatio || props.loading || props.finish) return
+				emit('load')
+			},
+			{ root: props.pel() || el.value }
+		).observe(placeholder.value)
+	})
+	onBeforeUnmount(() => {
+		observer.value?.disconnect()
+	})
+</script>
+<template>
+	<div class="my-list" ref="el">
+		<slot></slot>
+		<div class="footer">
+			<p v-show="!loading" class="placeholder" ref="placeholder"></p>
+			<span class="loading" v-show="loading">Loading...</span>
+			<span class="nomore" v-show="finish">Mo more</span>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.my-list {
+		width: 100%;
+		height: 100%;
+		overflow-y: auto;
+		> .footer {
+			width: 100%;
+			font-size: 3rem;
+			color: #000;
+			text-align: center;
+			> .placeholder {
+				height: 1px;
+			}
+		}
+	}
+</style>

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">
+			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
-				<img src="@/assets/images/workshop/posture/posture_1.png" />
+				<div class="item" v-for="(v,i) in list" :key="i">
-			</div>
+					<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;
+			overflow: hidden;
-			flex-wrap: wrap;
+			> .my-list {
-			justify-content: space-between;
+				padding: 0 6rem;
-			// justify-content: space-around;
+				display: flex;
-			> .item {
+				flex-wrap: wrap;
-				width: 47%;
+				justify-content: space-between;
-				height: 52.9rem;
+				// justify-content: space-around;
-				overflow: hidden;
+				.item {
-				border-radius: 2rem;
+					width: 47%;
-				background-color: #fff;
+					height: 52.9rem;
-				margin-bottom: 4rem;
+					overflow: hidden;
-				border: 0.1rem solid #000;
+					border-radius: 2rem;
-				> img {
+					background-color: #fff;
-					width: 100%;
+					margin-bottom: 4rem;
-					height: 100%;
+					border: 0.1rem solid #000;
-					object-fit: contain;
+					> 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 {
+		> .btns {
-			box-sizing: content-box;
+			margin-top: 2.5rem;
-			font-family: satoshiRegular;
+			width: 100%;
-			margin: 2.5rem 2.5rem 0 auto;
+			display: flex;
-			width: 35rem;
+			justify-content: center;
-			height: 7rem;
+			> button {
-			border-radius: 1.3rem;
+				box-sizing: content-box;
-			background: #000;
+				font-family: satoshiRegular;
-			font-weight: 400;
+				margin: 0 2rem;
-			font-size: 4.2rem;
+				width: 35rem;
-			color: #fff;
+				height: 6rem;
-			&:active {
+				border-radius: 1.3rem;
-				opacity: 0.7;
+				background: #000;
+				font-weight: 400;
+				font-size: 3.6rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
 			}
 		}
 	}