-
-
+
-
+
+ ) in designCollectionList" :key="design?.designItemId" :style="collStyle">
-
-
+ -->
@@ -201,9 +207,6 @@
-
- ![]()
-
@@ -362,16 +365,37 @@ export default defineComponent({
return store.state.UploadFilesModule.chooseIsDesign})
let portfolio:any = ref({})
provide('portfolio',portfolio)
-
+ let showDesignMark = ref(false)
const collItemSize = reactive({
- collValue:JSON.parse(sessionStorage.getItem('collValue') as any) || 40,
- collStyle:{
- width:'24rem',
- height:'37rem'
+ collValue:JSON.parse(sessionStorage.getItem('collValue') as any) || 3,
+ minCollValue:4,
+ maxCollValue:20,
+ likeStyle:{
+ width:'240px',
+ height:'370px',
+ position:'absolute',
},
+ collStyle:{
+ width:'0',
+ height:'0',
+ position:'absolute',
+ },
+ itemStyle:{
+ width:0,
+ height:0,
+ },
+ scale:[1,1.54],
collTime:null as any,
+ isMove:false,
})
- let designImg = ref()
+ const posiitonData = ref({
+ likeElList:[] as any,
+ likeSelectIndex:0,
+ generateElList:[] as any,
+ generateSelectIndex:0,
+ })
+ let likeItemDom = ref()
+ let collItemDom = ref()
let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
let recycleDomHidden = ref(JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false);
let getDesignTime = null as any;
@@ -379,176 +403,205 @@ export default defineComponent({
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
nextTick(()=>{
- let wScale = 60,hScale = 92.5
- let num = collItemSize.collValue
- let width = wScale * ((num<20?20:num) / 100)
- let height =hScale * ((num<20?20:num) / 100)
+ let parentWidth = likeItemDom.value.parentElement.offsetWidth
+ collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
+ collItemSize.collValue = collItemSize.collValue
(likeDesignCollectionList.value.length + designCollectionList.value.length)){
- }else{
- let residue = parentWidth - Math.floor(parentWidth / (width*htmlfontSize+10 )) * (width*htmlfontSize + 10)
- itemAddWidth = residue / rowNum / htmlfontSize
- itemAddHeight = width / height * itemAddWidth
+ let value = collItemSize.maxCollValue - collItemSize.collValue
+ collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
+ collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
+
+ collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
+ collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
+
+ collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
+ collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
+ let elArr = likeItemDom.value.children
+ posiitonData.value.likeElList = []
+ for(let i = 0;i < elArr.length;i++){
+ posiitonData.value.likeElList.push({
+ el: elArr[i],
+ sort: likeDesignCollectionList.value[i].sort - 1,
+ index: i,
+ userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId
+ });
}
-
-
- collItemSize.collStyle.width = width + itemAddWidth + 'rem'
- collItemSize.collStyle.height = height + itemAddHeight + 'rem'
+ moveItem('like')
})
-
},time)
}
+
+
const setDeleteDesign = (index:any)=>{
store.commit("setDeleteDesignCollectionList",index);
}
const cancelDeleteDesign = (index:any)=>{
store.commit("cancelDeleteDesignCollectionList",index);
}
+ const designMousedown = (e:any,Id:number,str:string)=>{
+ if(str != 'like' && showDesignMark.value) return
+ let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
+ let item:any = arr.filter(item=>item.userLikeSortId == Id)[0]
+ item.el.style.zIndex = 2;
+ item.el.style.transition = 'all 0s';
+ let startX = e.clientX,
+ startY = e.clientY,
+ left = item.el.offsetLeft,
+ top = item.el.offsetTop;
+ collItemSize.isMove = false
+ let moveFun = (e:any) => {
+ collItemSize.isMove = true
+ let X = e.clientX - startX + left;
+ let Y = e.clientY - startY + top;
+ item.el.style.left = `${X}px`;
+ item.el.style.top = `${Y}px`;
+ reRange(item, X, Y,str);
+ };
+ let mouseUpFun = ()=>{
+ document.removeEventListener('mousemove',mouseMove)
+ document.removeEventListener('touchmove',touchmove)
- let moveData = reactive({
- moveDataImg:'',
- moveDataImg_:'',
- downType:'',
- moveDataStyle:{
- position: 'absolute',
- top: '0',
- left: '0',
- width:'',
- height:'',
- zIndex: 9,
- opacity:.5,
- pointerEvents:'none'
- },
- downIndex:-1,
- downXy:{x:0,y:0},
- })
- const designMousedown = (e:any)=>{
- if(e.target.getAttribute('index')){
- moveData.downIndex = e.target.getAttribute('index');
- moveData.moveDataImg_ = e.target.src
- moveData.downXy.x = e.clientX
- moveData.downXy.y = e.clientY
- moveData.moveDataStyle.width = e.target.offsetWidth + 'px'
- moveData.moveDataStyle.height = e.target.offsetHeight + 'px'
- moveData.downType = e.target.getAttribute('designType');
-
- window.addEventListener('mousemove', mouseMove);
- window.addEventListener('touchmove', touchmove);
- window.addEventListener('mouseup', designMouseup);
- window.addEventListener('touchend', designMouseup);
+ document.removeEventListener('mouseup',mouseUpFun)
+ document.removeEventListener('touchend',mouseUpFun)
+ item.el.style.zIndex = 1;
+ item.el.style.transition = 'top,left .5s';
+ moveItem(str);
+ if(str == 'like')sortDesignCollection()
}
- }
- let mouseMove = function(event:any){
- let e = getMousePosition(event,false)
- desingMousemove(e)
- }
- let touchmove = function(event:any){
- let e = getMousePosition(event,true)
- desingMousemove(e)
- }
- const designMouseup = async (e:any)=>{
- document.removeEventListener('mousemove',mouseMove)
- document.removeEventListener('touchmove',touchmove)
- document.removeEventListener('mouseup',designMouseup)
- document.removeEventListener('touchend',designMouseup)
- moveData.moveDataImg = ''
- moveData.moveDataImg_ = ''
- moveData.downXy = {x:0,y:0}
- var type = e.target.getAttribute('designType');
- var index = e.target.getAttribute('index');
- if(index){
- let likeList = likeDesignCollectionList.value
- let designList = designCollectionList.value
- let arr = moveData.downType == 'like' ? likeList : designList
- let arr1 = type == 'like' ? likeList : designList
- let item:any
- if(moveData.downType !== type){
- let httpsUrl = moveData.downType == 'like'?Https.httpUrls.designDislike:Https.httpUrls.designLike
- let data
- if(moveData.downType == 'like'){
- data = {
- designId: arr[moveData.downIndex].designId || designId.value,
- designPythonOutfitId:arr[moveData.downIndex].designOutfitId,
- groupDetailId: arr[moveData.downIndex].groupDetailId,
- timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
- }
- }else{
- data = {
- designItemId: arr[moveData.downIndex].designItemId,
- userGroupId: userGroupId.value,
- timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
- designPythonOutfitId: arr[moveData.downIndex].designOutfitId? arr[moveData.downIndex].designOutfitId: arr[moveData.downIndex].designPythonOutfitId
- }
-
- }
- if(moveData.downType == 'like'){
- await like(data,httpsUrl)
- }else{
- item = await like(data,httpsUrl)
- }
- }
- item = item?item:arr.splice(moveData.downIndex, 1)
- arr1.splice(index, 0, ...item)
+ let mouseMove = function(event:any){
+ let e = getMousePosition(event,false)
+ moveFun(e)
}
- }
- const like = async (data:any,httpsUrl:string)=>{
- await new Promise((resolve, reject) => {
- // let data = {
- // designItemId: item.designItemId,
- // userGroupId: userGroupId.value,
- // timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
- // designPythonOutfitId: item.designOutfitId? item.designOutfitId: item.designPythonOutfitId
- // }
- Https.axiosPost(httpsUrl, data).then((rv)=>{
- let value:any = {
- id:rv.userGroupId,
- userLikeSortId:rv.id,
- userLikeGroupId:rv.userGroupId,
- sort:rv.sort,
- }
- resolve(value)
- }).catch()
- })
+ let touchmove = function(event:any){
+ let e = getMousePosition(event,true)
+ moveFun(e)
+ }
+
+ document.addEventListener('mousemove',mouseMove)
+ document.addEventListener('touchmove',touchmove)
+
+ document.addEventListener('mouseup',mouseUpFun)
+ document.addEventListener('touchend',mouseUpFun)
}
//排序 从大到小
const sortDesignCollection = ()=> {
- let arr = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
let arrData:any = []
- arr.forEach((item:any,index:number)=>{
+ likeDesignCollectionList.value.forEach((likeItem:any)=>{
+ let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
+ likeItem.sort = item.sort + 1
let obj = {
- id:item.userLikeSortId,
- "sort": arr.length - index,
- "userLikeGroupId": item.userLikeGroupId,
- "userLikeId": item.id
+ id:likeItem.userLikeSortId,
+ "sort": item.sort + 1,
+ "userLikeGroupId": likeItem.userLikeGroupId,
+ "userLikeId": likeItem.id
}
arrData.push(obj)
})
- console.log(arrData);
let data = {
"userLikeGroupId": userGroupId.value,
"userLikeSortList": arrData
}
Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
- console.log(rv);
-
})
}
- const desingMousemove = (e:any)=>{
- if(!moveData.moveDataImg)moveData.moveDataImg = moveData.moveDataImg_
- let width = moveData.moveDataStyle.width.split('px')[0]
- let height = moveData.moveDataStyle.height.split('px')[0]
- moveData.moveDataStyle.left = e.clientX - Number(width)/2+'px'
- moveData.moveDataStyle.top = e.clientY - Number(height)/2+'px'
- }
const mouseenter = (e:any,str:string)=>{
- console.log(23,str);
-
+ }
+ const reRange = (item:any, x:number, y:number,str:string)=>{
+ let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
+ let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
+ let value = collItemSize.maxCollValue - collItemSize.collValue
+ let width,height,num
+ if(str == 'like'){
+ num = value
+ width = collItemSize.itemStyle.width
+ height = collItemSize.itemStyle.height
+ }else{
+ num = 3
+ width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
+ height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
+ }
+
+ let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+ moveIndex = elList.length - 1 - moveIndex
+ moveIndex = moveIndex < 0 ? 0 : moveIndex;
+ moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+ if(moveIndex != index){
+ if(str == 'like'){
+ posiitonData.value.likeSelectIndex = moveIndex;
+ }else{
+ posiitonData.value.generateSelectIndex = moveIndex;
+ }
+ let currentSort = item.sort;
+ for(let i = 0;i < elList.length;i++){
+ if(currentSort < moveIndex){
+ if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+ elList[i].sort -= 1;
+ };
+ }else if(currentSort > moveIndex){
+ if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+ elList[i].sort += 1;
+ };
+ }
+ };
+ elList[item.index].sort = moveIndex;
+ moveItem(str);
+ }
+ }
+ const setLikeDislLike = (str:string,value:any)=>{
+ posiitonData.value.likeSelectIndex = 0
+ nextTick(()=>{
+ if(str == 'like'){
+ let elArr = likeItemDom.value.children
+ posiitonData.value.likeElList.push({
+ el: elArr[0],
+ sort: value.sort - 1,
+ index: value.sort - 1,
+ userLikeSortId:value.userLikeSortId
+ });
+ let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
+ 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
+ }
+ })
+ }else if(str == 'disLike'){
+ let elArr = collItemDom.value.querySelectorAll('.content_img_GetWidth')
+ posiitonData.value.likeElList = posiitonData.value.likeElList.filter((item:any)=>(item.sort + 1) != value.sort)
+ posiitonData.value.likeElList.forEach((item:any)=>{
+ if(item.sort > value.sort - 1){
+ item.sort-=1
+ }
+ })
+ posiitonData.value.generateElList.push({
+ el: elArr[elArr.length-1],
+ sort: posiitonData.value.generateElList.length,
+ index: posiitonData.value.generateElList.length,
+ userLikeSortId:value.designItemId
+ });
+ }
+ moveItem('like');
+ // moveItem('disLike');
+ })
+ }
+ //排列
+ const moveItem = (str:any)=>{
+ let elLikeList = posiitonData.value.likeElList
+ let generateElList = posiitonData.value.generateElList
+ let value = collItemSize.maxCollValue - collItemSize.collValue
+ let width,height
+ width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
+ height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
+ // let num = str == 'like'?value:3
+ for(let i = 0;i < elLikeList.length;i++){
+ elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
+ elLikeList[i].el.style.top = parseInt((elLikeList.length - 1 - elLikeList[i].sort) / value) * (collItemSize.itemStyle.height +10) + 'px';
+ }
+ for(let i = 0;i < generateElList.length;i++){
+ generateElList[i].el.style.left = (generateElList.length - 1 - generateElList[i].sort) % 3 * (width +10) + 'px';
+ generateElList[i].el.style.top = parseInt((generateElList.length - 1 - generateElList[i].sort) / 3) * (height +10) + 'px';
+ }
}
return {
store,
@@ -573,19 +626,23 @@ export default defineComponent({
chooseIsDesign,
portfolio,
setSystemDesigner,
+ showDesignMark,
...toRefs(collItemSize),
- designImg,
+ likeItemDom,
+ collItemDom,
domHidden,
recycleDomHidden,
getDesignTime,
setDeleteDesign,
cancelDeleteDesign,
- ...toRefs(moveData),
designMousedown,
sortDesignCollection,
getMousePosition,
mouseenter,
+ setLikeDislLike,
+ posiitonData,
+ moveItem
};
},
data() {
@@ -602,7 +659,6 @@ export default defineComponent({
spin: true,
}),
designProgress: 0,
- showDesignMark: false,
startDesignType: "design", //设计类型 design 和 resdesign
disLikeLoading: false, //不喜欢防抖
likeLoading: false, //喜欢防抖
@@ -627,7 +683,6 @@ export default defineComponent({
beforeUnmount(){
clearTimeout(this.getDesignTime);
// alert(1)
- this.sortDesignCollection()
sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
@@ -694,8 +749,6 @@ export default defineComponent({
openGuide()
}
- // console.log(this.store.state.UserHabit);
-
let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
window.addEventListener('beforeunload', (event)=>{
this.store.commit("clearAllCollection");
@@ -788,7 +841,6 @@ export default defineComponent({
if(positionItem.value == sketchItem.categoryValue){
num ++
- // console.log(num,this.allBoardData?.sketchboardFiles.length);
}
});
@@ -882,8 +934,15 @@ export default defineComponent({
objectSignList:data.requestIdList.join(),
requestId:rv
}
+ this.posiitonData.generateElList.forEach((item:any) => {
+ item.sort -= 1
+ })
+ this.moveItem('disLike')
+
this.getDesignResult(value,'newDesign')
this.startDesignType = "design";
+ this.posiitonData.likeSelectIndex = 0
+ this.posiitonData.likeElList = []
}
this.isShowMark = false;
})
@@ -894,6 +953,7 @@ export default defineComponent({
},
getDesignResult(data:any,str:any){
this.showDesignMark = true
+ this.recycleDomHidden = true
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
.then(async (rv)=>{
if(rv.designCollectionItems){
@@ -910,21 +970,22 @@ export default defineComponent({
await new Promise((resolve, reject) => {
setTimeout(() => {
this.designCollectionList.unshift(item)
- this.setSystemDesigner(0)
+ nextTick().then(()=>{
+ let elArr:any = this.$refs.collItemDom.querySelectorAll(".content_img_GetWidth");
+ this.posiitonData.generateElList.push({
+ el: elArr[0],
+ sort: elArr.length - 2,
+ index: elArr.length - 1,
+ userLikeSortId:item.designItemId
+ });
+ this.moveItem('disLike')
+ })
resolve('')
}, 200);
})
-
}
- // this.designCollectionList.push(...result)
- // // for (let index = 0; index < rv.designCollectionItems.length; index++) {
-
- // }
-
}
-
if(rv.unfinishedList.length == 0){
-
this.showDesignMark = false
if(str == 'newDesign'){
if(rv.designCollectionItems){
@@ -941,6 +1002,11 @@ export default defineComponent({
}
nextTick().then(()=>{
driverObj__.moveNext();
+ this.posiitonData.generateElList.forEach((item:any) => {
+ item.sort += 1
+ });
+ this.moveItem('disLike')
+
})
}else{
this.getDesignTime = setTimeout(()=>{
@@ -975,6 +1041,10 @@ export default defineComponent({
objectSignList:data.requestIdList.join(),
requestId:rv
}
+ this.posiitonData.generateElList.forEach((item:any) => {
+ item.sort -= 1
+ })
+ this.moveItem('disLike')
this.getDesignResult(value,'resDesign')
this.startDesignType = "resDesign";
this.isShowMark = false
@@ -1148,12 +1218,21 @@ export default defineComponent({
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,
+ }
this.store.commit("setUserGroupId", rv.userGroupId);
design.groupDetailId = rv.groupDetailId;
this.store.commit(
"addLikeDesignCollectionList",
- design
+ value
);
+ this.setLikeDislLike('like',value)
this.store.commit("deleteDesignCollectionList", index);
if (this.startDesignType === "resDesign") {
this.getHistoryChoose(this.userGroupId, "like");
@@ -1189,6 +1268,13 @@ export default defineComponent({
"deleteLikeDesignCollectionList",
index
);
+ this.likeDesignCollectionList.forEach((item:any)=>{
+ if(item.sort > design.sort){
+ item.sort-=1
+ }
+ })
+
+ this.setLikeDislLike('disLike',design)
// if (!this.likeDesignCollectionList.length) {
// this.store.commit("deleteUserGroupId");
// }
@@ -1212,7 +1298,6 @@ export default defineComponent({
this.setPortfolio(rv.portfolioDTO)
this.store.commit("setUserGroupId", rv.userGroupId);
this.dealHistoryChooseData(rv, type);
- this.setSystemDesigner(0)
this.isShowMark = false;
})
.catch((rv) => {
@@ -1284,9 +1369,8 @@ export default defineComponent({
);
this.isHaveReviewCollection = true;
if (type === "normal") {
- let arr = data.userLikeDetails.sort((a:any, b:any) => b.sort - a.sort);
- let likeDesignCollectionList = arr.map(
+ let likeDesignCollectionList = data.userLikeDetails.map(
(v: any) => {
let data = {
...v,
@@ -1388,6 +1472,7 @@ export default defineComponent({
collectionList: any,
type: string
) {
+ if(this.isMove)return
let designDetail: any = this.$refs.designDetail;
design.designOutfitId = design.designPythonOutfitId?design.designPythonOutfitId:design.designOutfitId
let data = {
@@ -1810,17 +1895,22 @@ export default defineComponent({
// padding: 0 2.8rem 0 0.9rem;
width: 100%;
height: 100%;
- align-content: flex-start;
+ // align-content: flex-start;
+ overflow-x: hidden;
+ position: relative;
+ &::-webkit-scrollbar {
+ display: none;
+ }
}
.content_img_block {
- // width: 20.1rem;
- width: 24rem;
- height: 37rem;
- // height: 29.5rem;
+ // width: 24rem;
+ // height: 37rem;
+ width: calc(33.33% - 30px);
+ height: calc((33.33% - 30px) * 1.54);
box-sizing: border-box;
margin: 5px;
// min-height: 271px;
- max-height: 80%;
+ // max-height: 80%;
display: inline-block;
position: relative;
@@ -1829,6 +1919,8 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
+ position: absolute;
+ transition: top,left .3s;
&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
display: block;
}