调整selectStyle图片和参数交互

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>