library懒加载

src/main.ts

@@ -10,10 +10,9 @@ import "virtual:svg-icons-register";
 
 // vant组件库
 import 'vant/lib/index.css'
-import { Locale } from 'vant';
+import { Locale, Lazyload, Loading } from 'vant';
 import enUS from 'vant/es/locale/lang/en-US';
 Locale.use('en-US', enUS);
-import { Loading } from 'vant';
 
 
 import flexible from "./utils/flexible.js";
@@ -33,6 +32,7 @@ document.addEventListener('touchend', function(event) {
 const app = createApp(App)
 app.use(router)
 .use(store)
+.use(Lazyload)
 .use(Loading)
 .component("SvgIcon", SvgIcon)
 .mount('#app')

src/stores/modules/generate.ts

@@ -42,11 +42,11 @@ export const useGenerateStore = defineStore({
 		/** 进店记录id */
 		visitRecordId: (state) => 1,
 		/** 服装id */
-		styleId: (state) => state.style.id,
+		styleId: (state) => state.style.id || state.style.oldId,
 		/** 模特照片id */
 		modelPhotoId: (state) => state.model.id,
 		/** 原始试穿id-优先AI魔改 */
-		originalTryOnId: (state) => state.customizeInfo.tryOnId || state.tryOnId.id,
+		originalTryOnId: (state) => state.customizeInfo.tryOnId || state.originalTryOn.id,
 		/** 顾客照片id */
 		customerPhotoId: (state) => state.photoInfo.id,
 	},

src/views/Workshop/creation/creation-list.vue

@@ -30,7 +30,7 @@
 	const onLoad = () => {
 		loading.value = true
 		const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
-		const id = visitRecordId.value || generateStore.visitRecordId;
+		const id = visitRecordId.value || generateStore.visitRecordId
 		http(id)
 			.then((data) => {
 				data?.forEach((v) => {
@@ -155,7 +155,7 @@
 		<div class="list">
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
 				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
-					<img :src="v.tryOnUrl" />
+					<img v-lazy="v.tryOnUrl" />
 					<div class="corner">
 						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
 						<div class="tryon" v-else>Try-on</div>
@@ -234,6 +234,7 @@
 						width: 100%;
 						height: 100%;
 						object-fit: contain;
+						border-radius: var(--border-radius);
 					}
 					> .corner {
 						position: absolute;

src/views/Workshop/library.vue

@@ -74,7 +74,7 @@
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
 				<div class="item" v-for="(v, i) in list" :key="v.visitRecordId">
 					<div class="image">
-						<img :src="v.defaultImageUrl" />
+						<img v-lazy="v.defaultImageUrl" />
 					</div>
 					<div class="content">
 						<!-- <span class="userID">User ID: {{ v.userID }}</span> -->
@@ -155,6 +155,7 @@
 							width: 100%;
 							height: 100%;
 							object-fit: contain;
+							display: block;
 						}
 					}
 					> .content {

src/views/Workshop/uploadFace1.vue

@@ -13,7 +13,7 @@
 	const faceUrl = ref('')
 	// 上传照片
 	const handleUploadFace = () => {
-		generateStore.updatePhotoInfo({})
+		// generateStore.updatePhotoInfo({})
 		router.push({ name: 'uploadFace2' })
 	}
 	// 跳过上传

src/views/Workshop/uploadFace2.vue

@@ -50,7 +50,7 @@
 	}
 	// 处理照片加载错误
 	const pictureLoadError = (e: any) => {
-		// generateStore.updatePhotoInfo({})
+		generateStore.updatePhotoInfo({})
 	}
 </script>