设置store
This commit is contained in:
@@ -24,6 +24,17 @@ const request = (config: any) => {
|
||||
* @param data.isRegenerated 是否重新生成 0-否,1-是
|
||||
*/
|
||||
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({
|
||||
url: '/api/try-on-effects/generate',
|
||||
method: 'post',
|
||||
@@ -38,6 +49,16 @@ export function generateTryOnEffect(data: Object) {
|
||||
* @param data.file 顾客照片文件
|
||||
*/
|
||||
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({
|
||||
url: '/api/customer-photos/upload',
|
||||
method: 'post',
|
||||
|
||||
@@ -23,7 +23,18 @@ export const useGenerateStore = defineStore({
|
||||
photoInfo: {
|
||||
id: "",
|
||||
url: "",
|
||||
}
|
||||
file: null,
|
||||
},
|
||||
/** AI魔改信息 */
|
||||
customizeInfo: {
|
||||
inputText:"",
|
||||
|
||||
tryOnId: "",
|
||||
tryOnUrl: "",
|
||||
styleUrl: "",
|
||||
isRegenerated: "",
|
||||
isFavorite: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@@ -65,6 +76,16 @@ export const useGenerateStore = defineStore({
|
||||
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 || ""
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -13,20 +13,19 @@
|
||||
import { useGenerateStore } from '@/stores'
|
||||
const store = useGenerateStore()
|
||||
|
||||
const customizeInfo = store.customizeInfo
|
||||
const router = useRouter()
|
||||
const inputText = ref('')
|
||||
const isFavorite = ref(false)
|
||||
const tryOnUrl = ref('')
|
||||
const loading = ref(false)
|
||||
const onSend = () => {
|
||||
if (inputText.value === '') return
|
||||
if (customizeInfo.inputText === '') return
|
||||
generate()
|
||||
const text = inputText.value
|
||||
inputText.value = ''
|
||||
customizeInfo.inputText = ''
|
||||
// const text = inputText.value
|
||||
// inputText.value = ''
|
||||
// console.log('发送消息:', text)
|
||||
}
|
||||
const onReload = () => {
|
||||
inputText.value = ''
|
||||
customizeInfo.inputText = ''
|
||||
generate(true)
|
||||
}
|
||||
|
||||
@@ -40,13 +39,16 @@
|
||||
customerPhotoId: store.customerPhotoId,
|
||||
originalTryOnId: store.originalTryOnId,
|
||||
isRegenerated: isRegenerated ? 1 : 0,
|
||||
prompt: inputText.value
|
||||
prompt: customizeInfo.inputText
|
||||
}
|
||||
loading.value = true
|
||||
generateTryOnEffect(data)
|
||||
.then((res) => {
|
||||
tryOnUrl.value = res.tryOnUrl
|
||||
isFavorite.value = !!res.isFavorite
|
||||
customizeInfo.tryOnId = res.tryOnId
|
||||
customizeInfo.tryOnUrl = res.tryOnUrl
|
||||
customizeInfo.styleUrl = res.styleUrl
|
||||
customizeInfo.isRegenerated = res.isRegenerated
|
||||
customizeInfo.isFavorite = !!res.isFavorite
|
||||
loading.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -54,15 +56,15 @@
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
generate()
|
||||
if (customizeInfo.tryOnId === '') generate()
|
||||
|
||||
// 喜欢
|
||||
const isLoveLoading = ref(false)
|
||||
const onLove = () => {
|
||||
if (isLoveLoading.value) return
|
||||
const http = isFavorite.value ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
|
||||
const http = customizeInfo.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
|
||||
customizeInfo.isFavorite = !customizeInfo.isFavorite
|
||||
isLoveLoading.value = true
|
||||
isFavorite.value = !isFavorite.value
|
||||
http('tryOnId')
|
||||
.then(() => {
|
||||
isLoveLoading.value = false
|
||||
@@ -94,21 +96,23 @@
|
||||
<div class="help">?</div>
|
||||
<input
|
||||
type="text"
|
||||
v-model="inputText"
|
||||
v-model="customizeInfo.inputText"
|
||||
@keyup.enter="onSend"
|
||||
placeholder="Try: “Change background to Tokyo City”"
|
||||
/>
|
||||
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img :src="tryOnUrl" />
|
||||
<img :src="customizeInfo.tryOnUrl" />
|
||||
<!-- <div class="select-box">
|
||||
<div class="icon"><SvgIcon name="history" size="35" /></div>
|
||||
<div class="label">History</div>
|
||||
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
|
||||
</div> -->
|
||||
<div class="icons">
|
||||
<div @click="onLove"><SvgIcon :name="`love_${isFavorite ? 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="onDownload"><SvgIcon name="download" size="35" /></div> -->
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGenerateStore } from '@/stores'
|
||||
const generateStore = useGenerateStore()
|
||||
const emit = defineEmits(['view-type'])
|
||||
onMounted(() => {
|
||||
emit('view-type', 1)
|
||||
@@ -11,10 +13,13 @@
|
||||
const faceUrl = ref('')
|
||||
// 上传照片
|
||||
const handleUploadFace = () => {
|
||||
generateStore.updatePhotoInfo({})
|
||||
router.push({ name: 'uploadFace2' })
|
||||
}
|
||||
// 完成上传
|
||||
// 跳过上传
|
||||
const handleFinish = () => {
|
||||
generateStore.updatePhotoInfo({})
|
||||
generateStore.clearCustomizeInfo({})
|
||||
router.push({ name: 'customize' })
|
||||
}
|
||||
</script>
|
||||
@@ -71,7 +76,7 @@
|
||||
line-height: 132%;
|
||||
}
|
||||
}
|
||||
>.btns {
|
||||
> .btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -12,10 +12,7 @@
|
||||
emit('view-type', 1)
|
||||
})
|
||||
const router = useRouter()
|
||||
const fileData = reactive({
|
||||
url:"",
|
||||
file: null,
|
||||
});
|
||||
const fileData = generateStore.photoInfo
|
||||
// 上传照片
|
||||
const handleUploadFace = () => {
|
||||
const input = document.createElement('input')
|
||||
@@ -27,6 +24,7 @@
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
const url = URL.createObjectURL(file)
|
||||
fileData.id = ''
|
||||
fileData.url = url
|
||||
fileData.file = file
|
||||
// const reader = new FileReader()
|
||||
@@ -38,13 +36,15 @@
|
||||
}
|
||||
// 生成照片
|
||||
const handleGenerate = () => {
|
||||
if (fileData.id) return router.push({ name: 'customize' })
|
||||
if (!fileData.file) return
|
||||
const formData = new FormData()
|
||||
formData.append('customerId', "1")
|
||||
formData.append('visitRecordId', "1")
|
||||
formData.append('customerId', '1')
|
||||
formData.append('visitRecordId', '1')
|
||||
formData.append('file', fileData.file)
|
||||
uploadCustomerPhoto(formData).then(res => {
|
||||
generateStore.updatePhotoInfo(res);
|
||||
uploadCustomerPhoto(formData).then((res) => {
|
||||
generateStore.updatePhotoInfo(res)
|
||||
generateStore.clearCustomizeInfo({})
|
||||
router.push({ name: 'customize' })
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user