调整selectStyle图片和参数交互

src/components/selectStyle/selectItem.vue

@@ -6,12 +6,12 @@ const props = defineProps({
 		default: () => [],
 	} as any,
 	select: {
-		type: Array,
+		type: Object,
 		default: () => {},
 	} as any,
 })
 const emit = defineEmits([
-	'update:select'
+	'selectItem','updateStyle'
 ])
 let data = reactive({
 })
@@ -25,7 +25,10 @@ const setLike = (item,str)=>{
 }
 
 const setSelectList = (item)=>{
-	emit('update:select', {...item})
+	if(item.id == props.select?.oldId){
+		return
+	}
+	emit('selectItem', item)
 }
 
 const deleteStyle = (index)=>{
@@ -33,17 +36,7 @@ const deleteStyle = (index)=>{
 }
 
 const updateStyle = (item,index)=>{
-	props.selectList[index] = {
-		id:item.id,
-		imgList:[
-			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
-			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
-			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
-			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
-		],
-		isLike: false,
-		isAdd: false,
-	}
+	emit('updateStyle', {item,index})
 }
 
 onMounted(()=>{
@@ -58,10 +51,12 @@ const {} = toRefs(data);
 		<div class="item" v-for="(item,index) in selectList" :key="item.id">
 			<div class="title">look {{ index + 1 }}</div>
 			<div class="imgBox" @click="setSelectList(item)">
-				<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
+				<img :src="item.imgUrl" alt="">
+				<!-- <img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt=""> -->
 				<div class="icon" v-if="item.id == select?.id">
 					<SvgIcon  name="modelSelected" size="60" />
 				</div>
+				<div class="mask" v-if="item.id == select?.oldId"></div>
 			</div>
 			<div class="btn">
 				<!-- <div>
@@ -113,6 +108,14 @@ const {} = toRefs(data);
 				border: .6px solid #acacac;
 				border-radius: 1.3px;
 				position: relative;
+				> .mask{
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					background-color: rgba(0, 0, 0, 0.5);
+					top: 0;
+					left: 0;
+				}
 				> .icon{
 					position: absolute;
 					width: 6rem;
@@ -121,11 +124,13 @@ const {} = toRefs(data);
 					right: -2.1rem;
 				}
 				> img{
-					height: 26rem;
-					object-fit: cover;
-					// object-fit: contain;
-					max-width: 50%;
-					max-height: 50%;
+					// height: 26rem;
+					width: 100%;
+					height: 100%;
+					// object-fit: cover;
+					object-fit: contain;
+					// max-width: 50%;
+					// max-height: 50%;
 				}
 			}
 			> .btn{

src/router/index.ts

@@ -75,9 +75,9 @@ const router = createRouter({
           component: () => import('../views/Workshop/selectModel.vue')
         },
         {
-          path: '/workshop/selectModelContinue',
-          name: 'SelectModelContinue',
-          component: () => import('../views/Workshop/selectModelContinue.vue')
+          path: '/workshop/product',
+          name: 'Product',
+          component: () => import('../views/Workshop/product.vue')
         },
         {
           // 上传照片1

src/stores/modules/generate.ts

@@ -9,6 +9,10 @@ export const useGenerateStore = defineStore({
 			name: '123123',
 			describe: '',
 			id:'',
+			style:{
+				id:-1,
+				oldId:-1,//表示从生成页面返回回来，需要调整的样式id
+			},
 		},
 		queryList:[]
     }
@@ -17,15 +21,20 @@ export const useGenerateStore = defineStore({
     // doubleCount: (state) => state.num * 2
   },
   actions: {
-    setLogin(data:any) {
-		this.userData.title= data.title
-		this.userData.name= data.name
-		this.userData.describe= data.describe      
-		this.userData.id= data.id      
+    selectStyle(data:any) {
+		this.userData.style.id = data.id
 		console.log(this.userData)
     },
-    setQueryList(list:any) {
-		this.queryList = list
-    },
+	//生成后去掉id 设置oldId来修改样式
+	useStyleGenerate(){
+		this.userData.style.oldId = this.userData.style.id
+		this.userData.style.id = -1
+	},
+	updateStyle(data){
+		console.log(data)
+		if(data.id == this.userData.style.oldId){
+			this.userData.style.oldId = -1
+		}
+	}
   }
 })

src/views/Workshop/product.vue

@@ -4,6 +4,7 @@ import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
 import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
+import { useGenerateStore } from '@/stores'
 const router = useRouter()
 //const props = defineProps({
 //})
@@ -33,6 +34,7 @@ onMounted(() => {
 	emit('view-type', 1)
 	data.isLoading = true;
 	setTimeout(()=>{
+		useGenerateStore().useStyleGenerate()
 		data.isLoading = false;
 	}, 2000)
 })
@@ -43,7 +45,7 @@ const { isLoading } = toRefs(data);
 </script>
 <template>
 	<header-title style-type="2" />
-	<div class="selectModelContinue" v-if="!isLoading">
+	<div class="product" v-if="!isLoading">
 		<div class="text">
 			<div class="title">
 				Go with this Look?
@@ -78,7 +80,7 @@ const { isLoading } = toRefs(data);
 	</div>
 </template>
 <style lang="less" scoped>
-	.selectModelContinue{
+	.product{
 		width: 100%;
 		// height: 100%;
 		position: relative;

src/views/Workshop/selectModel.vue

@@ -47,8 +47,8 @@ const setSelectedModelId = (item)=>{
 onMounted(()=>{
 	emit('view-type', 1)
 })
-const toSelectModelContinue = ()=>{
-	router.push({ path: 'selectModelContinue' })
+const toProduct = ()=>{
+	router.push({ path: 'product' })
 }
 onMounted(()=>{
 })
@@ -81,7 +81,7 @@ const { modelList, selectedModelId } = toRefs(data);
 	</div>
 	<div class="footer placeholder"></div>
 	<div class="footer">
-		<button @click.stop="toSelectModelContinue">Continue</button>
+		<button @click.stop="toProduct">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>

src/views/Workshop/selectStyle.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
 import SelectItem from "@/components/selectStyle/selectItem.vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import { useRouter } from 'vue-router'
-import editProfile1_1 from '@/assets/images/workshop/selectStyle/selectStyle1-1.png'
-import editProfile1_2 from '@/assets/images/workshop/selectStyle/selectStyle1-2.png'
-import editProfile1_3 from '@/assets/images/workshop/selectStyle/selectStyle1-3.png'
-import editProfile1_4 from '@/assets/images/workshop/selectStyle/selectStyle1-4.png'
+import editProfile1 from '@/assets/images/workshop/selectStyle/selectStyle1.png'
+import editProfile2 from '@/assets/images/workshop/selectStyle/selectStyle2.png'
+import editProfile3 from '@/assets/images/workshop/selectStyle/selectStyle3.png'
+import editProfile4 from '@/assets/images/workshop/selectStyle/selectStyle4.png'
 import { useGenerateStore } from '@/stores'
 const router = useRouter()
 
@@ -15,63 +15,44 @@ const router = useRouter()
 const emit = defineEmits([
 	'view-type'
 ])
+const generateStore = useGenerateStore()
 let data = reactive({
 	selectList: 
 	[
 		{
 			id:1,
-			imgList:[
-				editProfile1_1,
-				editProfile1_2,
-				editProfile1_3,
-				editProfile1_4,
-			],
-			isLike: false,
-			isAdd: false,
+			imgUrl:editProfile1,
 		},
 		{
 			id:2,
-			imgList:[
-				editProfile1_1,
-				editProfile1_2,
-				editProfile1_3,
-				editProfile1_4,
-			],
-			isLike: false,
-			isAdd: false,
+			imgUrl:editProfile2,
 		},
 		{
 			id:3,
-			imgList:[
-				editProfile1_1,
-				editProfile1_2,
-				editProfile1_3,
-				editProfile1_4,
-			],
-			isLike: false,
-			isAdd: false,
+			imgUrl:editProfile3,
 		},
 		{
 			id:4,
-			imgList:[
-				editProfile1_1,
-				editProfile1_2,
-				editProfile1_3,
-				editProfile1_4,
-			],
-			isLike: false,
-			isAdd: false,
+			imgUrl:editProfile4,
 		},
 	],
-	select:{
-		
-	}
+	select:computed(()=>generateStore.userData.style)
 })
 
-const generateStore = useGenerateStore()
+const selectItem = (item)=>{
+	generateStore.selectStyle(item)
+}
 
-const toSelectModelContinue = ()=>{
-	router.push({ path: 'selectModelContinue' })
+const updateStyle = ({item,index})=>{
+	generateStore.updateStyle(item)
+	data.selectList[index] = {
+		id:9,
+		imgUrl:item.imgUrl,
+	}
+}
+
+const toProduct = ()=>{
+	router.push({ path: 'product' })
 }
 onMounted(()=>{
 	emit('view-type', 1)
@@ -94,12 +75,12 @@ const { selectList, select } = toRefs(data);
 			</div>
 		</div>
 		<div class="selectContent">
-			<SelectItem :selectList="selectList" v-model:select="select" />
+			<SelectItem :selectList="selectList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
 		</div>
 	</div>
 	<div class="footer placeholder"></div>
 	<div class="footer">
-		<button @click.stop="toSelectModelContinue">Continue</button>
+		<button @click.stop="toProduct">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>