提交修改
This commit is contained in:
X1627315083
788
src/component/home/design/editDesignType/index.vue
Normal file
788
src/component/home/design/editDesignType/index.vue
Normal file
@@ -0,0 +1,788 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="scaleImage_modal generalModel"
|
||||
v-model:visible="scaleImage"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<div class="generalModel_closeIcon download" @click.stop="download()">
|
||||
<i class="fi fi-rr-down-to-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scaleImage_content">
|
||||
<div v-if="isProductimg" class="productImg_modal">
|
||||
<div class="productImg_left">
|
||||
<div class="productImg_content_item_title productImg_content_item_title_menu">
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||
</div>
|
||||
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="productimgSimilarity"
|
||||
:tooltipVisible="false"
|
||||
:step="5"
|
||||
@afterChange="()=>{}"
|
||||
>
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="productimgSimilarity">
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction">
|
||||
<!-- <a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
@afterChange="setSimilarity"
|
||||
:tooltipVisible="false"
|
||||
:step="5"
|
||||
>
|
||||
</a-slider> -->
|
||||
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="productimgBrightenValue"
|
||||
:tooltipVisible="false"
|
||||
:max="3"
|
||||
:min="1"
|
||||
:step="0.1"
|
||||
>
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="productimgBrightenValue">
|
||||
</div>
|
||||
<div class="input_border productImg_content_item_generate">
|
||||
<div class="input_box">
|
||||
<div class="input_box_btnBox">
|
||||
<input
|
||||
class="search_input"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
v-model="productimgSearchName"
|
||||
@keydown.enter="getPrductimg()"
|
||||
/>
|
||||
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
||||
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
||||
</div>
|
||||
<textarea
|
||||
v-show="productimgIsTextarea"
|
||||
class="search_textarea "
|
||||
@keydown.enter="getPrductimg()"
|
||||
v-model="productimgSearchName"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content_item_generate_btn input_border">
|
||||
<div class="input_box">
|
||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||
{{ $t('Generate.Generate') }}
|
||||
</div>
|
||||
<div v-show="productimgIsProductimg && !productimgRemProductimg" class="generage_btn started_btn" @click="getPrductimg">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</div>
|
||||
<div v-show="productimgRemProductimg" @click="removeProductimg" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
||||
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
|
||||
<div class="loadBox" v-show="generateSuccess">
|
||||
<div class="load" v-show="productimgIsProductimg">
|
||||
<a-spin size="large" class="content_img_flex"></a-spin>
|
||||
</div>
|
||||
<img v-show="!productimgIsProductimg" :src="generateSuccess?.url">
|
||||
</div>
|
||||
|
||||
<div class="img_operate_block" v-if="isLike">
|
||||
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
|
||||
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="scaleImage_nav">
|
||||
<div class="nav_left">
|
||||
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
</div>
|
||||
<div class="nav_list" v-mousewheel>
|
||||
<div class="nav_centent">
|
||||
<img v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
||||
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components:{UpgradePlan},
|
||||
props:{
|
||||
productData:{
|
||||
type:Object,
|
||||
default:{
|
||||
similarity:30,
|
||||
brightenValue:1,
|
||||
upload:'',
|
||||
},
|
||||
},
|
||||
isCanvas:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
sex:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
},
|
||||
emits:['addGenerateImg'],
|
||||
setup(props:any,{emit}) {
|
||||
const store = useStore();
|
||||
let userDetail:any= computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
})
|
||||
let {t} = useI18n()
|
||||
let productimg = reactive({
|
||||
UpgradePlan:null,
|
||||
isProductimg:false,
|
||||
productimgSearchName:'',
|
||||
productimgIsTextarea:false,
|
||||
productimgRemProductimg:false,
|
||||
productimgIsProductimg:false,
|
||||
productimgSimilarity:30,
|
||||
productimgBrightenValue:1,
|
||||
productimgUpload:props.productData.upload,
|
||||
productimgRelightDirection:props.productData.RelightDirection,
|
||||
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
generateSuccess:null as any,//生成成功后返回的数据
|
||||
})
|
||||
let scaleImage: any = ref(false);
|
||||
let isShowMark = ref(false)
|
||||
let loadingShow = ref(false)
|
||||
let isComparison = ref(false)
|
||||
const visible = ref<boolean>(false);
|
||||
const setVisible = (value:any): void => {
|
||||
visible.value = value;
|
||||
};
|
||||
let scaleImageList:any = ref([
|
||||
|
||||
])
|
||||
let scaleImageMask:any = ref(false)
|
||||
let scaleImageIndex:any = ref(0)
|
||||
let isLike:any = ref(true)
|
||||
let robotAssits:any = ref(0)
|
||||
|
||||
//procuctimg
|
||||
let remPrductimgTime:any = null
|
||||
let prductimgTime:any = null
|
||||
const getData = ()=>{
|
||||
let obj = null as any
|
||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||
obj = {
|
||||
elementId:scaleImageList.value[scaleImageIndex.value].designOutfitId||scaleImageList.value[scaleImageIndex.value].elementId,
|
||||
elementType:'DesignOutfit',
|
||||
}
|
||||
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'Relight'){
|
||||
obj = {
|
||||
elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
|
||||
elementType:'ToProductImage',
|
||||
}
|
||||
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
|
||||
|
||||
}
|
||||
return obj
|
||||
}
|
||||
let getPrductimg = ()=>{
|
||||
let obj = getData()
|
||||
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
|
||||
let data:any ={
|
||||
direction:productimg.productimgRelightDirection,
|
||||
prompt:productimg.productimgSearchName,
|
||||
toProductImageVOList:[obj],
|
||||
brightenValue:productimg.productimgBrightenValue,
|
||||
projectId:productimg.selectObject.id,
|
||||
imageStrength:(100 - imageStrength)/100,
|
||||
}
|
||||
// console.log(data)
|
||||
// return
|
||||
productimg.productimgIsProductimg = true
|
||||
remPrductimgTime = setTimeout(()=>{
|
||||
productimg.productimgRemProductimg = true
|
||||
},10000)
|
||||
let url = Https.httpUrls.relight
|
||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||
url = Https.httpUrls.toProduct
|
||||
}
|
||||
isShowMark.value = true
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
isShowMark.value = false
|
||||
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||
let arr:any = []
|
||||
rv.forEach((item:any)=>{
|
||||
arr.push(item.taskId)
|
||||
})
|
||||
|
||||
// productimg.generateList.unshift(...rv)
|
||||
setPrductimg(arr)
|
||||
}
|
||||
).catch(res=>{
|
||||
isShowMark.value = false
|
||||
productimg.productimgIsProductimg = false
|
||||
clearInterval(remPrductimgTime)
|
||||
productimg.productimgRemProductimg = false
|
||||
if(res.errCode === 2){
|
||||
Modal.confirm({
|
||||
title: res.errMsg,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
zIndex:99999,
|
||||
centered:true,
|
||||
onOk() {
|
||||
let UpgradePlan:any = productimg.UpgradePlan
|
||||
UpgradePlan.init()
|
||||
},
|
||||
onCancel(){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
let generateProceedList:any = []
|
||||
let setPrductimg = (dataList:any)=>{
|
||||
let data = dataList
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
let url = Https.httpUrls.relightResult
|
||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||
url = Https.httpUrls.toProductImageResult
|
||||
}
|
||||
prductimgTime = setInterval(()=>{
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
state = true
|
||||
if(productimg.productimgIsProductimg){//防止取消后有正在执行的获取状态
|
||||
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||||
let isEnd = false
|
||||
if(rv[0].status == 'Success'){
|
||||
// let id = productimg.generateSuccess?.designItemId || rv[0].id
|
||||
// rv[0].id = id
|
||||
// let listType = productimg.generateSuccess.listType
|
||||
productimg.generateSuccess = Object.assign(productimg.generateSuccess,rv[0])
|
||||
// productimg.generateSuccess.listType = listType
|
||||
isEnd = true
|
||||
clearInterval(remPrductimgTime)
|
||||
}else if(rv[0].status == 'Fail'){
|
||||
isEnd = true
|
||||
}
|
||||
generateProceedList = data
|
||||
if(isEnd){
|
||||
store.state.store.dispatch('getCredits')
|
||||
clearInterval(prductimgTime)
|
||||
clearInterval(remPrductimgTime)
|
||||
productimg.productimgRemProductimg = false
|
||||
productimg.productimgIsProductimg = false
|
||||
}
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
clearInterval(prductimgTime)
|
||||
clearInterval(remPrductimgTime)
|
||||
productimg.productimgIsProductimg = false
|
||||
productimg.productimgRemProductimg= false
|
||||
});
|
||||
},1000)
|
||||
}
|
||||
let removeProductimg = ()=>{
|
||||
productimg.productimgIsProductimg = false
|
||||
productimg.productimgRemProductimg= false
|
||||
clearInterval(prductimgTime)
|
||||
if(generateProceedList){
|
||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||
let str = generateProceedList.join(',')
|
||||
let data = {
|
||||
uniqueId:str,
|
||||
userId:userDetail.value.userId,
|
||||
type:scaleImageList.value[scaleImageIndex.value]?.resultType
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||
(rv) => {
|
||||
generateProceedList = []
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
}
|
||||
let submitBase64Data = async (rv:any)=>{
|
||||
loadingShow.value = true
|
||||
let isOverlay = false
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
Modal.confirm({
|
||||
title: t('scaleImage.overlayOrNot'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
resolve()
|
||||
isOverlay = true
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
isOverlay = false
|
||||
resolve()
|
||||
}
|
||||
});
|
||||
})
|
||||
let data = {
|
||||
"base64": rv,
|
||||
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
|
||||
"gender": props.sex,
|
||||
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
|
||||
"isOverride":isOverlay,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
|
||||
(rv) => {
|
||||
rv.imgUrl = rv.url
|
||||
rv.status = 'Success'
|
||||
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
|
||||
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
|
||||
isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
|
||||
loadingShow.value = false
|
||||
scaleImage.value = false
|
||||
}
|
||||
).catch(res=>{
|
||||
loadingShow.value = false
|
||||
});
|
||||
}
|
||||
return {
|
||||
t,
|
||||
...toRefs(productimg),
|
||||
scaleImage,
|
||||
isShowMark,
|
||||
loadingShow,
|
||||
isComparison,
|
||||
visible,
|
||||
setVisible,
|
||||
scaleImageList,
|
||||
scaleImageMask,
|
||||
scaleImageIndex,
|
||||
isLike,
|
||||
robotAssits,
|
||||
getPrductimg,
|
||||
removeProductimg,
|
||||
submitBase64Data,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
isNext:false
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
init(list:any,index:any,dialogueIndex:any,status:any,listType:string){
|
||||
if(status == 'edit'){
|
||||
this.generateSuccess = {
|
||||
...list[index],
|
||||
id:list[index].designItemId || list[index].id,
|
||||
oldId:list[index].designItemId || list[index].id,
|
||||
url:list[index].designOutfitUrl || list[index].url,
|
||||
designItemId:list[index].designOutfitId,
|
||||
listType,
|
||||
}
|
||||
if(list[index].imageStrength)this.productimgSimilarity = 100 - list[index].imageStrength * 100
|
||||
if(list[index].imageStrength)list[index].brightenValue
|
||||
if(list[index].imageStrength)list[index].direction
|
||||
}else{
|
||||
this.generateSuccess = {
|
||||
listType,
|
||||
}
|
||||
}
|
||||
this.scaleImage = true
|
||||
this.scaleImageList = list
|
||||
// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
|
||||
this.scaleImageIndex = index
|
||||
if(dialogueIndex)this.robotAssits = dialogueIndex
|
||||
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
|
||||
document.addEventListener('keydown',this.setKeydown)
|
||||
},
|
||||
async cancelDsign(){
|
||||
|
||||
document.removeEventListener('keydown',this.setKeydown)
|
||||
let data = {
|
||||
...JSON.parse(JSON.stringify(this.generateSuccess)),
|
||||
}
|
||||
let isIndex = -1
|
||||
if(data?.oldId){
|
||||
this.scaleImageList.forEach((rv:any,index:number)=>{
|
||||
if(rv.designItemId == data?.oldId || rv.id == data?.oldId){
|
||||
isIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
data.isIndex = isIndex
|
||||
if(isIndex != -1 && data.oldId){
|
||||
await new Promise((resolve,reject)=>{
|
||||
let this_ = this
|
||||
Modal.confirm({
|
||||
title: this.t('scaleImage.cover'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
this_.$emit('addGenerateImg',data)
|
||||
resolve('')
|
||||
},
|
||||
onCancel(){
|
||||
resolve('')
|
||||
}
|
||||
});
|
||||
})
|
||||
}else{
|
||||
this.$emit('addGenerateImg',data)
|
||||
}
|
||||
this.scaleImage = false
|
||||
this.scaleImageIndex = 0
|
||||
this.isNext = false
|
||||
this.generateSuccess = null
|
||||
this.scaleImageList = []
|
||||
},
|
||||
lastStep(){
|
||||
if(this.productimgIsProductimg) return
|
||||
if(this.isNext)return
|
||||
let num = this.scaleImageIndex
|
||||
if(this.scaleImageIndex <= 0){
|
||||
}else{
|
||||
num -=1
|
||||
this.setImageIndex(num)
|
||||
}
|
||||
},
|
||||
nextStep(){
|
||||
if(this.productimgIsProductimg) return
|
||||
if(this.isNext)return
|
||||
let num = this.scaleImageIndex
|
||||
if(this.scaleImageIndex >= this.scaleImageList.length-1){
|
||||
}else{
|
||||
num += 1
|
||||
this.setImageIndex(num)
|
||||
}
|
||||
},
|
||||
download(){
|
||||
let url = this.scaleImageList[this.scaleImageIndex].imgUrl || this.scaleImageList[this.scaleImageIndex]?.url
|
||||
downloadIamge(url)
|
||||
},
|
||||
setScaleImageIndex(index:any){
|
||||
// this.scaleImageIndex = index
|
||||
this.setImageIndex(index)
|
||||
},
|
||||
setImageIndex(index:any){
|
||||
if(this.isNext)return
|
||||
let this_ = this
|
||||
if(this.isCanvas){
|
||||
this.isNext = true
|
||||
new Promise((resolve,reject)=>{
|
||||
Modal.confirm({
|
||||
title: this.t('scaleImage.submitCanvas'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
this_.scaleImageIndex = index
|
||||
this_.isNext = false
|
||||
resolve('')
|
||||
},
|
||||
onCancel(){
|
||||
this_.isNext = false
|
||||
resolve('')
|
||||
}
|
||||
});
|
||||
})
|
||||
}else{
|
||||
this.scaleImageIndex = index
|
||||
}
|
||||
},
|
||||
LikeFile(item:any,str:string){
|
||||
let parent:any = this.$parent
|
||||
if(this.robotAssits){
|
||||
parent.likeFile(item,this.scaleImageIndex,this.robotAssits)
|
||||
}else{
|
||||
parent.likeFile(item,str)
|
||||
}
|
||||
},
|
||||
setKeydown(event:any){
|
||||
if(event.keyCode == 37){
|
||||
this.lastStep()
|
||||
}else if(event.keyCode == 39){
|
||||
this.nextStep()
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.scaleImage_modal{
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.scaleImage_modal {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// margin-top: calc(5rem*1.2);
|
||||
// height: 75%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.productImg_modal{
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
.productImg_left{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.input_box_btnBox{
|
||||
width: 100%;
|
||||
}
|
||||
.input_box{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
// transform: translateY(100%);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
margin-top: 0;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
padding-bottom: 2.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scaleImage_content_imgBox{
|
||||
position: relative;
|
||||
// max-width: 70rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
> .loadBox{
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 50rem;
|
||||
min-width: 40rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 50rem;
|
||||
min-width: 40rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
display: flex;
|
||||
img{
|
||||
// width: 50%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
.img_operate_block{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.4rem;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 2rem;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
.operate_icon{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
&.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.scaleImage_content_imgBox:hover{
|
||||
.img_operate_block{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.scaleImage_nav{
|
||||
flex: 1;
|
||||
margin: calc(2.5rem*1.2) calc(0rem*1.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
.nav_left,.nav_right{
|
||||
cursor: pointer;
|
||||
top: 50%;
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 4rem;
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
// .nav_left{
|
||||
// left: 0;
|
||||
// transform: translate(-200%,-50%);
|
||||
// }
|
||||
// .nav_right{
|
||||
// right: 0;
|
||||
// transform: translate(200%,-50%);
|
||||
// }
|
||||
.nav_left:hover,.nav_right:hover{
|
||||
i{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.nav_list{
|
||||
margin: 0 calc(2rem*1.2);
|
||||
max-width: calc(60rem*1.2);
|
||||
overflow-y: hidden;
|
||||
&.nav_list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.nav_centent{
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
img{
|
||||
max-width: calc(5rem*1.2);
|
||||
max-height: calc(5rem*1.2);
|
||||
object-fit: cover;
|
||||
object-position: 50%,50%;
|
||||
margin-left: calc(1rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: calc(.1rem*1.2);
|
||||
flex-shrink: 0;
|
||||
&.active{
|
||||
border: 2px solid #aaaaaa;
|
||||
}
|
||||
}
|
||||
img:nth-child(1){
|
||||
margin-left: calc(0rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -45,17 +45,29 @@
|
||||
{{ $t('HomeView.Redesign') }}
|
||||
</div> -->
|
||||
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
|
||||
<div class="text">Small</div>
|
||||
<a-slider
|
||||
class="system_silder"
|
||||
v-model:value="elementWidth"
|
||||
:min="minCollValue"
|
||||
:max="maxCollValue-1"
|
||||
@afterChange="setSystemDesigner(500)"
|
||||
:tooltipVisible="false"
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_top_right">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item smail">
|
||||
<span>Size :</span>
|
||||
<a-select
|
||||
v-model:value="widthValue"
|
||||
show-search
|
||||
size="large"
|
||||
allowClear
|
||||
style="width: 150px"
|
||||
placeholder="Please select"
|
||||
:options="widthList"
|
||||
@change="setSystemDesigner(500)"
|
||||
>
|
||||
</a-slider>
|
||||
<div class="text">Big</div>
|
||||
<!-- <template #option="{ value: val, label, icon }">
|
||||
<span role="img" :aria-label="val">{{ icon }}</span>
|
||||
{{ label }}
|
||||
</template> -->
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,14 +96,36 @@
|
||||
'like'
|
||||
)">
|
||||
<div class="content_img_flex">
|
||||
<img class="content_img" :src="design.designOutfitUrl"
|
||||
<img class="content_img" :src="design.designOutfitUrl||design.url"
|
||||
:key="design.designOutfitUrl" designType="like" :index="index"/>
|
||||
</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
|
||||
dislikeDesignCollection(
|
||||
design,
|
||||
index
|
||||
)">
|
||||
<div class="btn">
|
||||
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
|
||||
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
|
||||
<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
|
||||
<div class="text">On Like</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
|
||||
<div class="text">Transfer Pose</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||||
</div> -->
|
||||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
|
||||
<div class="text">Relight</div>
|
||||
<i class="fi fi fi-br-keyboard-brightness"></i>
|
||||
</div>
|
||||
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
|
||||
<div class="text">To Product Image</div>
|
||||
<i class="fi fi fi-ss-box-open"></i>
|
||||
</div>
|
||||
<!-- <div class="item" @click="setDeleteDesign(design,index)">
|
||||
<div class="text">Delete</div>
|
||||
<i class="fi fi-rr-trash icon_delete">
|
||||
</i>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,16 +162,33 @@
|
||||
)">
|
||||
<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
|
||||
</div>
|
||||
<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
|
||||
likeDesignCollection(
|
||||
design,
|
||||
index
|
||||
)
|
||||
">
|
||||
<div class="btn">
|
||||
<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
|
||||
<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
|
||||
<div class="item" @click="likeDesignCollection(design,index,design.resultType)">
|
||||
<div class="text">Like</div>
|
||||
<div class="icon iconfont icon-jushoucang icon_like">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
|
||||
<div class="text">Transfer Pose</div>
|
||||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||||
</div> -->
|
||||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
|
||||
<div class="text">Relight</div>
|
||||
<i class="fi fi fi-br-keyboard-brightness"></i>
|
||||
</div>
|
||||
<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
|
||||
<div class="text">To Product Image</div>
|
||||
<i class="fi fi fi-ss-box-open"></i>
|
||||
</div>
|
||||
<div class="item" @click="setDeleteDesign(design,index)">
|
||||
<div class="text">Delete</div>
|
||||
<i class="fi fi-rr-trash icon_delete">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fi fi-rr-trash icon_delete" @click.stop="
|
||||
setDeleteDesign(design,index)">
|
||||
</i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -165,13 +216,20 @@
|
||||
<!-- design collection的进度蒙层 end-->
|
||||
<affiche ref="affiche"></affiche>
|
||||
<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
|
||||
|
||||
<editDesignType ref="editDesignType"
|
||||
@addGenerateImg="addGenerateImg"
|
||||
:productData="{
|
||||
upload:upload,
|
||||
RelightDirection:RelightDirection,
|
||||
RelightDirectionList:RelightDirectionList,
|
||||
}"
|
||||
:isProductimg="true"></editDesignType>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
|
||||
import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
|
||||
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
||||
import generalCanvas from "@/component/modules/generalCanvas.vue";
|
||||
@@ -183,6 +241,7 @@ import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
import editDesignType from './editDesignType/index.vue'
|
||||
// import JSZip, { forEach } from "jszip";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import i18n from "@/lang";
|
||||
@@ -200,7 +259,8 @@ export default defineComponent({
|
||||
NewCollectionReview,
|
||||
affiche,
|
||||
generalCanvas,
|
||||
DesignDetailcopy
|
||||
DesignDetailcopy,
|
||||
editDesignType,
|
||||
},
|
||||
emits:['setTask'],
|
||||
activated() {
|
||||
@@ -210,6 +270,25 @@ export default defineComponent({
|
||||
props:['isState'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const editDesignType = reactive({
|
||||
upload:{id:store.state.Workspace.probjects.id},
|
||||
RelightDirectionList:[
|
||||
{
|
||||
value:'Right Light',
|
||||
label:useI18n().t('ProductImg.RightLight')
|
||||
},{
|
||||
value:'Left Light',
|
||||
label:useI18n().t('ProductImg.LeftLight')
|
||||
},{
|
||||
value:'Top Light',
|
||||
label:useI18n().t('ProductImg.TopLight')
|
||||
},{
|
||||
value:'Bottom Light',
|
||||
label:useI18n().t('ProductImg.BottomLight')
|
||||
}
|
||||
],
|
||||
RelightDirection:'Right Light'
|
||||
})
|
||||
let likeDesignCollectionList: any = computed(() => {
|
||||
return store.state.HomeStoreModule.likeDesignCollectionList;
|
||||
});
|
||||
@@ -276,6 +355,23 @@ export default defineComponent({
|
||||
])
|
||||
const dataDom = reactive({
|
||||
collectionModal:null as any,
|
||||
editDesignType:null as any,
|
||||
})
|
||||
const designData = reactive({
|
||||
openEditBtnId:-1,
|
||||
likeLoading: false, //喜欢防抖
|
||||
widthList:[
|
||||
{
|
||||
label:'Medium',
|
||||
value:170,
|
||||
},{
|
||||
label:'Large',
|
||||
value:250,
|
||||
},{
|
||||
label:'Extra-large',
|
||||
value:400,
|
||||
}
|
||||
],
|
||||
})
|
||||
provide('exportNav',exportNav)
|
||||
let isShowOperate = ref(false)
|
||||
@@ -298,10 +394,8 @@ export default defineComponent({
|
||||
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
|
||||
|
||||
const collItemSize = reactive({
|
||||
widthValue:150,
|
||||
collValue:6,
|
||||
elementWidth:100,
|
||||
minCollValue:100,
|
||||
maxCollValue:999,
|
||||
padding:60,
|
||||
likeStyle:{
|
||||
width:'240px',
|
||||
@@ -340,10 +434,10 @@ export default defineComponent({
|
||||
collItemSize.collTime = setTimeout(()=>{
|
||||
nextTick(()=>{
|
||||
let parentWidth = likeItemDom.value.parentElement.offsetWidth
|
||||
collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
|
||||
collItemSize.maxCollValue = parentWidth / 2
|
||||
collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
|
||||
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.elementWidth))
|
||||
collItemSize.widthValue = collItemSize.widthValue == -1?100:collItemSize.widthValue
|
||||
collItemSize.widthValue = collItemSize.widthValue > parentWidth?parentWidth:collItemSize.widthValue
|
||||
collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue)
|
||||
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue))
|
||||
let value = collItemSize.collValue
|
||||
|
||||
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
|
||||
@@ -508,6 +602,7 @@ export default defineComponent({
|
||||
const setLikeDislLike = (str:string,value:any)=>{
|
||||
posiitonData.value.likeSelectIndex = 0
|
||||
nextTick(()=>{
|
||||
console.log(posiitonData.value.likeElList)
|
||||
if(str == 'like'){
|
||||
let elArr = likeItemDom.value.children
|
||||
posiitonData.value.likeElList.push({
|
||||
@@ -517,8 +612,8 @@ export default defineComponent({
|
||||
userLikeSortId:value.userLikeSortId
|
||||
});
|
||||
let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
|
||||
console.log(collItem)
|
||||
posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
|
||||
|
||||
posiitonData.value.generateElList.forEach((item:any)=>{
|
||||
if(item.sort > collItem.sort){
|
||||
item.sort-=1
|
||||
@@ -565,8 +660,178 @@ export default defineComponent({
|
||||
const openCollection = (str:string)=>{
|
||||
dataDom.collectionModal.init(str)
|
||||
}
|
||||
const openEditBtn = (id:number)=>{
|
||||
designData.openEditBtnId = id
|
||||
let removeEditBtnId = ()=>{
|
||||
designData.openEditBtnId = -1
|
||||
document.removeEventListener('click',removeEditBtnId)
|
||||
}
|
||||
document.addEventListener('click',removeEditBtnId)
|
||||
|
||||
}
|
||||
let setEditDesignType = (arr:any,index:any,type:any,status:any,listType:string)=>{
|
||||
arr = JSON.parse(JSON.stringify(arr))
|
||||
let item = arr[index]
|
||||
if(status == 'add'){
|
||||
item.sourceUrl = item.designOutfitUrl || item.url
|
||||
}else{
|
||||
|
||||
}
|
||||
arr[index].resultType = type
|
||||
// dataDom.editDesignType.isProductimg = isLike
|
||||
dataDom.editDesignType.isProductimg = true
|
||||
dataDom.editDesignType.init(arr,index,null,status,listType)
|
||||
dataDom.editDesignType.isLike = false
|
||||
dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
|
||||
dataDom.editDesignType.isComparison = true
|
||||
}
|
||||
const addGenerateImg = (data:any)=>{
|
||||
if(!data.id)return
|
||||
let obj = {
|
||||
id:data.id,
|
||||
designItemId:data.id,
|
||||
// designItemId:data.elementId,
|
||||
designOutfitId:'',
|
||||
designOutfitUrl:data.url,
|
||||
sourceUrl:data.sourceUrl,
|
||||
resultType:data.resultType,
|
||||
elementId:data.elementId,
|
||||
elementType:data.elementType,
|
||||
sort:data.sort,
|
||||
}
|
||||
let list = []
|
||||
if(data.listType == 'disLike'){
|
||||
list = designCollectionList.value
|
||||
}else{
|
||||
list = likeDesignCollectionList.value
|
||||
}
|
||||
if(data.isIndex == -1){
|
||||
if(data.listType == 'like'){
|
||||
likeDesignCollection(obj,-1,data.resultType)
|
||||
}else{
|
||||
list.unshift(obj)
|
||||
nextTick().then(()=>{
|
||||
setDesignItemStyle()
|
||||
moveItem('disLike')
|
||||
})
|
||||
}
|
||||
}else{
|
||||
// collectionLikeUpdate
|
||||
// Https
|
||||
if(data.listType == 'like'){
|
||||
let value = {
|
||||
"oldRelationId": data.oldId,
|
||||
"relationId": data.id,
|
||||
"relationType": data.resultType,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.collectionLikeUpdate,value).then((rv:any)=>{
|
||||
if(rv){
|
||||
}
|
||||
})
|
||||
}
|
||||
list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
|
||||
list[data.isIndex].resultType = obj.resultType
|
||||
list[data.isIndex].id = obj.id
|
||||
list[data.isIndex].designItemId = obj.designItemId
|
||||
list[data.isIndex].sourceUrl = obj.sourceUrl
|
||||
}
|
||||
}
|
||||
const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
|
||||
let url
|
||||
let data = {
|
||||
toProductImageResultId:[(design.designItemId || design.id)],
|
||||
projectId: store.state.Workspace.probjects.id,
|
||||
}
|
||||
if(type == 'ToProductImage' || type == 'Relight'){
|
||||
if(str == 'like'){
|
||||
url = Https.httpUrls.productImageLike
|
||||
}else{
|
||||
url = Https.httpUrls.productImageUnLike
|
||||
}
|
||||
}else{
|
||||
if(str == 'like'){
|
||||
url = Https.httpUrls.productImageLike
|
||||
}else{
|
||||
url = Https.httpUrls.productImageUnLike
|
||||
}
|
||||
}
|
||||
designData.likeLoading = true;
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
if(str == 'like'){
|
||||
let value:any = {
|
||||
...design,
|
||||
sort:likeDesignCollectionList.value.length + 1,
|
||||
}
|
||||
design.groupDetailId = rv.groupDetailId;
|
||||
store.commit(
|
||||
"addLikeDesignCollectionList",
|
||||
value
|
||||
);
|
||||
setLikeDislLike('like',value)
|
||||
if(index != -1)store.commit("deleteDesignCollectionList", index);
|
||||
}else{
|
||||
if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
|
||||
store.commit("addDesignCollectionList", [design]);
|
||||
likeDesignCollectionList.value.forEach((item:any)=>{
|
||||
if(item.sort > design.sort){
|
||||
item.sort-=1
|
||||
}
|
||||
})
|
||||
}
|
||||
designData.likeLoading = false;
|
||||
}
|
||||
).catch(res=>{
|
||||
designData.likeLoading = false;
|
||||
});
|
||||
}
|
||||
let likeDesignCollection = (design:any,index:any,type:any) => {
|
||||
if (designData.likeLoading) {
|
||||
return;
|
||||
}
|
||||
if(type != 'Design'){
|
||||
setNoDesignLike(design,index,type,'like')
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
designItemId: design.designItemId,
|
||||
userGroupId: store.state.HomeStoreModule.userGroupId,
|
||||
projectId: store.state.Workspace.probjects.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||||
};
|
||||
|
||||
|
||||
designData.likeLoading = true;
|
||||
Https.axiosPost(Https.httpUrls.designLike, data)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
let value:any = {
|
||||
...design,
|
||||
id:rv.userLikeId,
|
||||
groupDetailId:rv.userLikeId,
|
||||
userLikeSortId:rv.userLikeSortId,
|
||||
userLikeGroupId:rv.userGroupId,
|
||||
sort:rv.sort,
|
||||
}
|
||||
store.commit("setUserGroupId", rv.userGroupId);
|
||||
design.groupDetailId = rv.groupDetailId;
|
||||
store.commit(
|
||||
"addLikeDesignCollectionList",
|
||||
value
|
||||
);
|
||||
setLikeDislLike('like',value)
|
||||
if(index != -1)store.commit("deleteDesignCollectionList", index);
|
||||
}
|
||||
designData.likeLoading = false;
|
||||
})
|
||||
.catch((rv) => {
|
||||
designData.likeLoading = false;
|
||||
});
|
||||
}
|
||||
return {
|
||||
store,
|
||||
...toRefs(editDesignType),
|
||||
likeDesignCollectionList,
|
||||
deleteDesignCollectionList,
|
||||
designCollectionList,
|
||||
@@ -592,6 +857,7 @@ export default defineComponent({
|
||||
setDesignItemStyle,
|
||||
showDesignMark,
|
||||
...toRefs(collItemSize),
|
||||
...toRefs(designData),
|
||||
...toRefs(dataDom),
|
||||
likeItemDom,
|
||||
collItemDom,
|
||||
@@ -609,6 +875,10 @@ export default defineComponent({
|
||||
posiitonData,
|
||||
moveItem,
|
||||
openCollection,
|
||||
setEditDesignType,
|
||||
openEditBtn,
|
||||
addGenerateImg,
|
||||
setNoDesignLike,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -626,7 +896,6 @@ export default defineComponent({
|
||||
designProgress: 0,
|
||||
startDesignType: "design", //设计类型 design 和 resdesign
|
||||
disLikeLoading: false, //不喜欢防抖
|
||||
likeLoading: false, //喜欢防抖
|
||||
dragIdx:0,
|
||||
designRandom:'',
|
||||
detailDestroy:false,//销毁detail
|
||||
@@ -996,7 +1265,15 @@ export default defineComponent({
|
||||
deleteDesignCollection(list:any,index:any){
|
||||
list.splice(index,1)
|
||||
},
|
||||
likeDesignCollection(design: any, index: any) {
|
||||
|
||||
likeDesignCollection(design: any, index: any,type:any) {
|
||||
if (this.likeLoading) {
|
||||
return;
|
||||
}
|
||||
if(type != 'Design'){
|
||||
this.setNoDesignLike(design,index,type,'like')
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
designItemId: design.designItemId,
|
||||
userGroupId: this.store.state.HomeStoreModule.userGroupId,
|
||||
@@ -1004,9 +1281,7 @@ export default defineComponent({
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||||
};
|
||||
if (this.likeLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
this.likeLoading = true;
|
||||
Https.axiosPost(Https.httpUrls.designLike, data)
|
||||
@@ -1027,15 +1302,12 @@ export default defineComponent({
|
||||
value
|
||||
);
|
||||
this.setLikeDislLike('like',value)
|
||||
this.store.commit("deleteDesignCollectionList", index);
|
||||
if(index != -1)this.store.commit("deleteDesignCollectionList", index);
|
||||
if (this.startDesignType === "resDesign") {
|
||||
this.getHistoryChoose(this.userGroupId, "like");
|
||||
}
|
||||
}
|
||||
this.likeLoading = false;
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext();
|
||||
}
|
||||
})
|
||||
.catch((rv) => {
|
||||
this.likeLoading = false;
|
||||
@@ -1043,13 +1315,18 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
//不喜欢设计
|
||||
dislikeDesignCollection(design: any, index: any) {
|
||||
dislikeDesignCollection(design:any,type:string, index: any) {
|
||||
let data = {
|
||||
designId: design.designId || this.designId,
|
||||
designPythonOutfitId:design.designOutfitId,
|
||||
groupDetailId: design.groupDetailId || design.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
};
|
||||
console.log(type)
|
||||
if(type != 'Design'){
|
||||
this.setNoDesignLike(design,index,type,'disLike')
|
||||
return
|
||||
}
|
||||
if (this.disLikeLoading) {
|
||||
return;
|
||||
}
|
||||
@@ -1237,20 +1514,6 @@ export default defineComponent({
|
||||
});
|
||||
return colorList;
|
||||
},
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent() {
|
||||
this.isShowOperate = !this.isShowOperate;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
this.closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
},
|
||||
//关闭下拉图标
|
||||
closeShowOperateContent() {
|
||||
this.isShowOperate = false;
|
||||
document.removeEventListener("click", this.closeShowOperateContent);
|
||||
},
|
||||
|
||||
//销毁图片详情
|
||||
setDetailDestroy() {
|
||||
@@ -1265,7 +1528,12 @@ export default defineComponent({
|
||||
collectionList: any,
|
||||
type: string
|
||||
) {
|
||||
// if()
|
||||
if(this.isMove)return
|
||||
if(design.resultType != "Design"){
|
||||
this.setEditDesignType(collectionList,index,design.resultType,'edit',type)
|
||||
return
|
||||
}
|
||||
design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
|
||||
let data = {
|
||||
design: design,
|
||||
@@ -1644,14 +1912,9 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
transition: top,left .3s;
|
||||
&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
|
||||
display: block;
|
||||
&:hover .btn{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// &:nth-child(4n) {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
|
||||
.content_img_flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -1660,6 +1923,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #E0E0E0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
&.active{
|
||||
@@ -1677,27 +1941,61 @@ export default defineComponent({
|
||||
// max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.Dustbin{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
border-radius: 4rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
}
|
||||
.icon_like,.icon_delete {
|
||||
font-size: 2.4rem;
|
||||
|
||||
.btn{
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
> .btnOpen{
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
left: 3rem;
|
||||
top: 3rem;
|
||||
transform: translateX(-100%);
|
||||
background: #e4e4e7;
|
||||
padding: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
display: none;
|
||||
z-index: 99;
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
> .item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .8rem;
|
||||
padding: .8rem;
|
||||
border-radius: .8rem;
|
||||
cursor: pointer;
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
> .text{
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
&:hover{
|
||||
background: #efeff1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon_like,.icon_delete {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_delete{
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
style="color: #000"
|
||||
></span
|
||||
></template>
|
||||
</a-select> -->
|
||||
@@ -1356,10 +1356,10 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
background: #000;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.placement_remove_point_block{
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
style="color: #000"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
|
||||
Reference in New Issue
Block a user