aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product

Browse Source
This commit is contained in:
X1627315083
2024-06-01 10:02:21 +08:00
parent 89ee910ce9
commit ff9e2f510b
21 changed files with 2046 additions and 1798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
src/views/HomeView/Works.vue
View File

@@ -1,59 +1,27 @@
<template>
<div class="works_page">
<div class="works_page" :class="{active:isScroll}">
<!-- <div class="modal_title_text">
<div>Works</div>
</div> -->
<div class="modal_title_text">
<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
</div>
<div class="page_content">
<div class="page_content_item" v-for="item,index in worksList" :key="item">
<div class="page_content_item_img" @click.stop="getImgScale(index)">
<img v-lazy="item.designPythonOutfitUrl" alt="">
<div class="delete_like_file_block" >
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
</div>
</div>
<div class="page_content_item_text">
<div class="page_content_item_text_name" :title="item.portfolioName">
{{item.portfolioName}}
</div>
<div class="page_content_item_text_bottom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
<!-- <span>{{ item.likeNum }}</span> -->
</div>
<div>
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
<!-- <span>{{ item.lookNum }}</span> -->
</div>
<!-- <div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>{{ item.lookNum }}</span>
</div> -->
</div>
</div>
<div class="modal_title_text modal_search">
<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
{{ item.name }}
</div>
<div class="modal_search_menu">
<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
</div>
</div>
<div class="page_content" >
<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll"></Falls>
<div class="page_loading_box">
<span class="page_loading" v-show="!isShowMark"></span>
<span v-show="isShowMark">
<a-spin size="large" />
</span>
</div>
</div>
<newScaleImage ref="newScaleImage"></newScaleImage>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<!-- 蒙层 end-->
<!-- <RobotAssist></RobotAssist> -->
</div>
@@ -73,10 +41,21 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
import { useI18n } from "vue-i18n";
import { ElCascader } from 'element-plus'
import { remove } from "jszip";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import Falls from "@/component/WorksPage/Falls.vue";
export default defineComponent({
components: {
newScaleImage,
Falls,
generalMenu,
},
props:{
isScroll:{
type:Boolean,
default:true,
},
},
setup() {
let filter:any = reactive({
worksSelect: 'all',
@@ -93,101 +72,121 @@ export default defineComponent({
name: 'freehand sketching',
value: 'freehandSketching'
},
{
name: 'My Works',
value: 'myWorks'
},
],
worksList: [
{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},
{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/11.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/1.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
@@ -198,9 +197,36 @@ export default defineComponent({
page:1,
size:10,
},
isShowMark:false
isShowMark:false,
isNoData:false,//如果数据为空就不加载
})
let menuList:any = ref([
{
label:'全部',
value:'all',
},{
label:'男装',
value:'man',
},{
label:'女装',
value:'woman',
},{
label:'鞋子',
value:'shoes',
},{
label:'包包',
value:'bag',
},{
label:'配饰',
value:'accessories',
}
])
let selectMenu:any = ref({
label:'全部',
value:'all',
})
let newScaleImage:any = ref()
let fall:any = ref()
let setWorksSelect = (val:any) => {
filter.worksSelect = val.value
}
@@ -211,25 +237,49 @@ export default defineComponent({
newScaleImage.value.init(filter.worksList,index)
}
let getPorfolio = ()=>{
let data = filter.getListDate
Https.axiosPost(Https.httpUrls.getPorfolio, data)
.then((rv) => {
console.log(rv);
filter.worksList = rv.content
})
.catch((rv) => {});
// let data = filter.getListDate
// Https.axiosPost(Https.httpUrls.getPorfolio, data)
// .then((rv) => {
// console.log(rv);
// filter.worksList = rv.content
// })
// .catch((rv) => {});
if(filter.isShowMark && !filter.isNoData)return
filter.isShowMark = true
setTimeout(() => {
filter.isShowMark = false
fall.value.push(filter.worksList);
}, 1000);
}
let {t} = useI18n()
let setprintModel= (data:any)=>{
selectMenu.value = data
}
onMounted (()=>{
getPorfolio()
let worksPage:any = document.querySelector('.works_page')
let imgParent:any = document.querySelector('.page_loading')
new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
// console.log(entries[0]);
if (!entries[0].intersectionRatio) return;
getPorfolio()
},
// { root:worksPage }
).observe(imgParent);
})
return {
...toRefs(filter),
menuList,
selectMenu,
newScaleImage,
fall,
setWorksSelect,
likeFile,
getImgScale,
t,
setprintModel,
}
},
data() {
@@ -273,14 +323,20 @@ export default defineComponent({
font-size: 14px;
}
.works_page {
border-radius: 4rem;
width: 100%;
overflow: hidden;
height: 100%;
// overflow: hidden;
// height: 100%;
height: auto;
padding: 0 9rem;
// min-width: 1440px;
position: relative;
padding-top: 5rem;
.modal_title_text{
display: flex;
margin: 0;
padding-bottom: 2.4rem;
.modal_title_text_assistant{
padding: 1rem 3rem;
border-radius: 2rem;
@@ -295,84 +351,36 @@ export default defineComponent({
background: #39215b;
color: #fff;
}
.modal_search_menu{
margin-left: auto;
z-index: 10;
.generalMenu_printModel{
margin-right: 0;
}
}
}
.page_content {
position: relative;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
height: 125rem;
align-content: flex-start;
.page_content_item{
display: flex;
flex-direction: column;
margin-right: 4rem;
margin-bottom: 4rem;
width: 30rem;
}
.page_content_item_text,.page_content_item_img{
display: flex;
}
.page_content_item_img{
width: 30rem;
height: 30rem;
overflow: hidden;
padding: 2rem 0;
justify-content: center;
border-radius: 2rem;
position: relative;
img{
// width: 100%;
cursor: pointer;
max-height: 100%;
object-fit: cover;
transform: scale(1.15);
transition: all 0.5s;
}
.delete_like_file_block{
cursor: pointer;
}
&:hover{
.delete_like_file_block{
display: block;
}
img{
transform: scale(1);
}
}
}
.page_content_item_text{
justify-content: space-between;
align-items: center;
>div{
font-size: 2rem;
}
.page_content_item_text_name{
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page_content_item_text_bottom{
width: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
>div{
display: flex;
align-items: center;
font-size: 2rem;
margin-right: 1rem;
i{
display: flex;
font-size: 2rem;
}
span{
margin-left: calc(var(--padding) / 2);
}
}
height: auto;
background: #f7f8fa;
.page_loading_box{
text-align: center;
.page_loading{
display: block;
width: 20px;
height: 20px;
}
}
}
&.active{
display: flex;
flex-direction: column;
height: 100%;
.page_content{
overflow-y: auto;
width: 100%;
}
}
}
</style>