添加接口

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

@@ -4,12 +4,13 @@
 	import { DownloadImages } from '@/utils/tools'
 	const router = useRouter()
 	const query = computed(() => router.currentRoute.value.query)
-
+	const styleUrl = computed(() => query.value.styleUrl)
+		
 	onMounted(() => {})
 	const loading = ref(false)
 	const onDownload = () => {
 		DownloadImages([{
-			url: 'http://118.31.39.42:3000/falls/2.png',
+			url: styleUrl.value,
 			name: 'lane-crawford.png'
 		}])
 	}
@@ -23,7 +24,7 @@
 	<div class="creation-details">
 		<div class="title">Lane Crawford</div>
 		<p class="tip">Business Casual Suits</p>
-		<div class="image"><img src="@/assets/images/workshop/creation-details.png" /></div>
+		<div class="image"><img :src="styleUrl" /></div>
 		<div class="btns">
 			<div class="icon" @click="onDownload"><SvgIcon name="download" size="33" /></div>
 			<button @click="onEdit">Edit</button>

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

@@ -2,11 +2,18 @@
 	import { ref, reactive, onMounted, computed } from 'vue'
 	import MyList from '@/components/myList.vue'
 	import { DownloadImages } from '@/utils/tools'
+	import {
+		getTryOnEffectFavoriteList,
+		getTryOnEffectStyleList,
+		setTryOnEffectFavorite,
+		cancelTryOnEffectFavorite
+	} from '@/api/workshop'
 
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
 	const emit = defineEmits(['view-type'])
-	const query = router.currentRoute.value.query
+	const query = computed(() => router.currentRoute.value.query)
+	const visitRecordId = computed(() => query.value.visitRecordId)
 
 	onMounted(() => {
 		emit('view-type', 1)
@@ -20,35 +27,55 @@
 
 	const onLoad = () => {
 		loading.value = true
-		setTimeout(() => {
-			for (var i = 0; i < 10; i++)
-				list.push({
-					id: list.length,
-					love: Math.random() > 0.5,
-					isAi: Math.random() > 0.5,
+		const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
+		http(visitRecordId.value)
+			.then((data) => {
+				data?.forEach((v) => {
+					const obj = {
+						tryOnId: v.tryOnId,
+						tryOnUrl: v.tryOnUrl,
+						styleUrl: v.styleUrl,
+						isFavorite: !!v.isFavorite,
+						isRegenerated: !!v.isRegenerated,
 
-					selected: list.length < maxSelectCount,
-					loading: false,
-					downloaded: false
+						selected: list.length < maxSelectCount,
+						loading: false,
+						downloaded: false
+					}
+					list.push(obj)
 				})
-			loading.value = false
-			if (list.length >= 30) {
+				loading.value = false
 				finish.value = true
-			}
-		}, 500)
+			})
+			.catch((err) => {
+				console.error(err)
+				loading.value = false
+				finish.value = false
+			})
 	}
 	const onItem = (v) => {
 		isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
 	}
+	// 详情页
 	const onDetailsItem = (v) => {
-		if (v.isAi) return
-		console.log('详情', v)
-		router.push({ query: { did: v.id } })
+		if (v.isRegenerated) return
+		router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
 	}
+	// 喜欢
+	const isLoveLoading = ref(false)
 	const onLoveItem = (v) => {
-		// Outfit暂时不可以like
-		console.log('喜欢', v)
-		v.love = !v.love
+		if (isLoveLoading.value) return
+		const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
+		isLoveLoading.value = true
+		v.isFavorite = !v.isFavorite
+		http(v.tryOnId)
+			.then(() => {
+				isLoveLoading.value = false
+			})
+			.catch((err) => {
+				console.error(err)
+				isLoveLoading.value = false
+			})
 	}
 	const onDownloadItem = (v) => {
 		// console.log('保存', v)
@@ -56,8 +83,8 @@
 		v.loading = true
 		v.selected = false
 		const obj = {
-			url: 'http://118.31.39.42:3000/falls/1.png',
-			name: v.id + '.png'
+			url: v.tryOnUrl,
+			name: v.tryOnUrl.split('/').pop()
 		}
 		DownloadImages([obj], null, null, () => {
 			v.loading = false
@@ -74,6 +101,7 @@
 	const onBackChooseSave = () => {
 		isChooseSave.value = false
 	}
+	// 下载选中项
 	const onConfirm = () => {
 		const downloadList = []
 		if (selectCount.value > 0) {
@@ -83,8 +111,8 @@
 					v.loading = true
 					downloadList.push({
 						index: i,
-						url: 'http://118.31.39.42:3000/falls/1.png',
-						name: i + 1 + '.png'
+						url: v.tryOnUrl,
+						name: v.tryOnUrl.split('/').pop()
 					})
 				}
 			})
@@ -124,14 +152,14 @@
 		<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="@/assets/images/workshop/posture/posture_1.png" />
+					<img :src="v.tryOnUrl" />
 					<div class="corner">
-						<div class="ai" v-if="v.isAi">Gen-AI</div>
+						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
 						<div class="tryon" v-else>Try-on</div>
 					</div>
 					<div class="icons">
 						<div @click.stop="onLoveItem(v)">
-							<SvgIcon :name="`love_${v.love ? '1' : '0'}`" size="27" />
+							<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
 						</div>
 						<div @click.stop="onDownloadItem(v)">
 							<SvgIcon name="download" size="27" v-show="!v.loading" />
@@ -146,7 +174,7 @@
 				</div>
 			</my-list>
 		</div>
-		<div class="btns" v-show="!query.date">
+		<div class="btns" v-show="!visitRecordId">
 			<template v-if="!isChooseSave">
 				<button @click="onChooseSave">Choose to Save</button>
 				<button @click="onContinue">Continue</button>

src/views/Workshop/creation/index.vue

@@ -7,7 +7,7 @@
 
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
-	const detailsID = computed(() => router.currentRoute.value.query.did);
+	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl);
 	const emit = defineEmits(['view-type'])
 	watch(
 		() => router.currentRoute.value,
@@ -21,8 +21,8 @@
 
 <template>
 	<header-title style-type="2" />
-	<creation-list v-show="!detailsID" />
-	<creation-details v-if="detailsID" />
+	<creation-list v-show="!styleUrl" />
+	<creation-details v-if="styleUrl" />
 	<footer-navigation is-placeholder />
 </template>