This commit is contained in:
X1627315083
2025-10-24 11:52:16 +08:00
5 changed files with 120 additions and 45 deletions

View File

@@ -6,7 +6,7 @@ const request = (config: any) => {
if (config.loading) useOverallStore().setLoading(true) if (config.loading) useOverallStore().setLoading(true)
setTimeout(() => { setTimeout(() => {
res({}) res({})
if (!config.loading) useOverallStore().setLoading(false) if (config.loading) useOverallStore().setLoading(false)
}, 1000) }, 1000)
}) })
} }
@@ -24,6 +24,17 @@ const request = (config: any) => {
* @param data.isRegenerated 是否重新生成 0-否1-是 * @param data.isRegenerated 是否重新生成 0-否1-是
*/ */
export function generateTryOnEffect(data: Object) { export function generateTryOnEffect(data: Object) {
return new Promise(resolve => {
setTimeout(() => {
resolve({
tryOnId: 1,
tryOnUrl: "http://118.31.39.42:3000/falls/1.png",
styleUrl: "http://118.31.39.42:3000/falls/1.png",
isRegenerated: 0,
isFavorite: 0,
})
}, 1000)
})
return request({ return request({
url: '/api/try-on-effects/generate', url: '/api/try-on-effects/generate',
method: 'post', method: 'post',
@@ -38,10 +49,21 @@ export function generateTryOnEffect(data: Object) {
* @param data.file 顾客照片文件 * @param data.file 顾客照片文件
*/ */
export function uploadCustomerPhoto(data: FormData) { export function uploadCustomerPhoto(data: FormData) {
return new Promise(resolve => {
useOverallStore().setLoading(true)
setTimeout(() => {
resolve({
visitRecordId: "2",
defaultImageUrl: URL.createObjectURL(data.get('file')),
})
useOverallStore().setLoading(false)
}, 1000)
})
return request({ return request({
url: '/api/customer-photos/upload', url: '/api/customer-photos/upload',
method: 'post', method: 'post',
data, data,
loading: true,
}) })
} }
/** /**

View File

@@ -16,14 +16,37 @@ export const useGenerateStore = defineStore({
isLike: false,//是否喜欢 isLike: false,//是否喜欢
}, },
isGenerate: false,//点击继续按钮后是否需要生成 isGenerate: false,//点击继续按钮后是否需要生成
/** 顾客照片信息 */
photoInfo: {
id: "",
url: "",
file: null,
},
/** AI魔改信息 */
customizeInfo: {
inputText:"",
tryOnId: "",
tryOnUrl: "",
styleUrl: "",
isRegenerated: "",
isFavorite: false,
},
} }
}, },
getters: { getters: {
customerId: (state) => state.style.id,//顾客id /** 顾客id */
visitRecordId: (state) => state.style.id,//进店记录id customerId: (state) => state.style.id,
styleId: (state) => state.style.id,//服装id /** 进店记录id */
modelPhotoId: (state) => state.model.id,//模特照片id visitRecordId: (state) => state.style.id,
originalTryOnId: (state) => state.style.id,//原始试穿id /** 服装id */
styleId: (state) => state.style.id,
/** 模特照片id */
modelPhotoId: (state) => state.model.id,
/** 原始试穿id */
originalTryOnId: (state) => state.style.id,
/** 顾客照片id */
customerPhotoId: (state) => state.photoInfo.id,
}, },
actions: { actions: {
selectStyle(data: any) { selectStyle(data: any) {
@@ -48,6 +71,21 @@ export const useGenerateStore = defineStore({
}, },
setIsGenerate(isGenerate: boolean) { setIsGenerate(isGenerate: boolean) {
this.isGenerate = isGenerate this.isGenerate = isGenerate
} },
/** 更新顾客照片信息 */
updatePhotoInfo(data: any) {
this.photoInfo.id = data.visitRecordId || ""
this.photoInfo.url = data.defaultImageUrl || ""
this.photoInfo.file = null
},
/** 更新AI魔改信息 */
clearCustomizeInfo(data: any) {
this.customizeInfo.inputText = data.inputText || ""
this.customizeInfo.tryOnId = data.tryOnId || ""
this.customizeInfo.tryOnUrl = data.tryOnUrl || ""
this.customizeInfo.styleUrl = data.styleUrl || ""
this.customizeInfo.isRegenerated = data.isRegenerated || ""
this.customizeInfo.isFavorite = data.isFavorite || ""
},
} }
}) })

View File

@@ -3,26 +3,30 @@
import FooterNavigation from '@/components/FooterNavigation.vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue' import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite } from '@/api/workshop' import {
generateTryOnEffect,
setTryOnEffectFavorite,
cancelTryOnEffectFavorite
} from '@/api/workshop'
const emit = defineEmits(['viewType']) const emit = defineEmits(['viewType'])
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useGenerateStore } from '@/stores' import { useGenerateStore } from '@/stores'
const store = useGenerateStore() const store = useGenerateStore()
const customizeInfo = store.customizeInfo
const router = useRouter() const router = useRouter()
const inputText = ref('')
const isLoved = ref(false)
const loading = ref(false) const loading = ref(false)
const onSend = () => { const onSend = () => {
if (inputText.value === '') return if (customizeInfo.inputText === '') return
generate(); generate()
const text = inputText.value customizeInfo.inputText = ''
inputText.value = '' // const text = inputText.value
console.log('发送消息:', text) // inputText.value = ''
// console.log('发送消息:', text)
} }
const onReload = () => { const onReload = () => {
inputText.value = '' customizeInfo.inputText = ''
generate(true); generate(true)
} }
// 生成结果 // 生成结果
@@ -32,33 +36,36 @@
visitRecordId: store.visitRecordId, visitRecordId: store.visitRecordId,
styleId: store.styleId, styleId: store.styleId,
modelPhotoId: store.modelPhotoId, modelPhotoId: store.modelPhotoId,
customerPhotoId: store.id, customerPhotoId: store.customerPhotoId,
originalTryOnId: store.originalTryOnId, originalTryOnId: store.originalTryOnId,
isRegenerated: isRegenerated ? 1 : 0, isRegenerated: isRegenerated ? 1 : 0,
prompt: inputText.value, prompt: customizeInfo.inputText
}
};
loading.value = true loading.value = true
generateTryOnEffect(data) generateTryOnEffect(data)
.then(res => { .then((res) => {
console.log(res) customizeInfo.tryOnId = res.tryOnId
customizeInfo.tryOnUrl = res.tryOnUrl
customizeInfo.styleUrl = res.styleUrl
customizeInfo.isRegenerated = res.isRegenerated
customizeInfo.isFavorite = !!res.isFavorite
loading.value = false loading.value = false
}) })
.catch(err => { .catch((err) => {
console.error(err) console.error(err)
loading.value = false loading.value = false
}) })
} }
generate(); if (customizeInfo.tryOnId === '') generate()
// 喜欢 // 喜欢
const isLoveLoading = ref(false) const isLoveLoading = ref(false)
const onLove = () => { const onLove = () => {
if (isLoveLoading.value) return if (isLoveLoading.value) return
const http = isLoved.value ? cancelTryOnEffectFavorite : setTryOnEffectFavorite const http = customizeInfo.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
customizeInfo.isFavorite = !customizeInfo.isFavorite
isLoveLoading.value = true isLoveLoading.value = true
isLoved.value = !isLoved.value http('tryOnId')
http("tryOnId")
.then(() => { .then(() => {
isLoveLoading.value = false isLoveLoading.value = false
}) })
@@ -89,21 +96,23 @@
<div class="help">?</div> <div class="help">?</div>
<input <input
type="text" type="text"
v-model="inputText" v-model="customizeInfo.inputText"
@keyup.enter="onSend" @keyup.enter="onSend"
placeholder="Try: “Change background to Tokyo City”" placeholder="Try: “Change background to Tokyo City”"
/> />
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div> <div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
</div> </div>
<div class="card"> <div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" /> <img :src="customizeInfo.tryOnUrl" />
<!-- <div class="select-box"> <!-- <div class="select-box">
<div class="icon"><SvgIcon name="history" size="35" /></div> <div class="icon"><SvgIcon name="history" size="35" /></div>
<div class="label">History</div> <div class="label">History</div>
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div> <div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div> --> </div> -->
<div class="icons"> <div class="icons">
<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div> <div @click="onLove">
<SvgIcon :name="`love_${customizeInfo.isFavorite ? 1 : 0}`" size="35" />
</div>
<div @click="onReload"><SvgIcon name="reload" size="35" /></div> <div @click="onReload"><SvgIcon name="reload" size="35" /></div>
<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> --> <!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
</div> </div>

View File

@@ -3,6 +3,8 @@
import FooterNavigation from '@/components/FooterNavigation.vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useGenerateStore } from '@/stores'
const generateStore = useGenerateStore()
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
@@ -11,10 +13,13 @@
const faceUrl = ref('') const faceUrl = ref('')
// 上传照片 // 上传照片
const handleUploadFace = () => { const handleUploadFace = () => {
generateStore.updatePhotoInfo({})
router.push({ name: 'uploadFace2' }) router.push({ name: 'uploadFace2' })
} }
// 完成上传 // 跳过上传
const handleFinish = () => { const handleFinish = () => {
generateStore.updatePhotoInfo({})
generateStore.clearCustomizeInfo({})
router.push({ name: 'customize' }) router.push({ name: 'customize' })
} }
</script> </script>
@@ -71,7 +76,7 @@
line-height: 132%; line-height: 132%;
} }
} }
>.btns { > .btns {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -4,27 +4,27 @@
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { uploadCustomerPhoto } from '@/api/workshop' import { uploadCustomerPhoto } from '@/api/workshop'
import { useGenerateStore } from '@/stores'
const generateStore = useGenerateStore()
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
}) })
const router = useRouter() const router = useRouter()
const fileData = reactive({ const fileData = generateStore.photoInfo
url:"",
file: null,
});
console.log(fileData)
// 上传照片 // 上传照片
const handleUploadFace = () => { const handleUploadFace = () => {
const input = document.createElement('input') const input = document.createElement('input')
input.type = 'file' input.type = 'file'
input.accept = 'image/*' input.accept = 'image/*'
input.capture = 'camera' // input.capture = 'camera'
input.click() input.click()
input.onchange = (e: any) => { input.onchange = (e: any) => {
const file = e.target.files[0] const file = e.target.files[0]
if (!file) return if (!file) return
const url = URL.createObjectURL(file) const url = URL.createObjectURL(file)
fileData.id = ''
fileData.url = url fileData.url = url
fileData.file = file fileData.file = file
// const reader = new FileReader() // const reader = new FileReader()
@@ -36,14 +36,15 @@
} }
// 生成照片 // 生成照片
const handleGenerate = () => { const handleGenerate = () => {
if (fileData.id) return router.push({ name: 'customize' })
if (!fileData.file) return if (!fileData.file) return
const formData = new FormData() const formData = new FormData()
formData.append('customerId', "1") formData.append('customerId', '1')
formData.append('visitRecordId', "1") formData.append('visitRecordId', '1')
formData.append('file', fileData.file) formData.append('file', fileData.file)
uploadCustomerPhoto(formData).then(res => { uploadCustomerPhoto(formData).then((res) => {
console.log(res, res.photoUrl) generateStore.updatePhotoInfo(res)
generateStore.clearCustomizeInfo({})
router.push({ name: 'customize' }) router.push({ name: 'customize' })
}) })
} }