344 lines
8.2 KiB
Vue
344 lines
8.2 KiB
Vue
<template>
|
|
<div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers}">
|
|
<!-- <div class="modal_title_text">
|
|
<div>Works</div>
|
|
</div> -->
|
|
<div class="modal_title_text modal_search" v-if="!otherUsers">
|
|
<div v-show="isScroll" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
|
|
{{ item.name }}
|
|
</div>
|
|
<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'all' == worksSelect}" @click="setWorksSelect({value:'all'})">All</div>
|
|
<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</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" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
|
|
<div class="page_loading_box" v-show="!isNoData">
|
|
<span class="page_loading" v-show="!isShowMark"></span>
|
|
<span v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</span>
|
|
</div>
|
|
<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
|
|
</div>
|
|
|
|
<newScaleImage ref="newScaleImage" @deletePorfolio="deletePorfolio"></newScaleImage>
|
|
<newScaleImageMobile ref="newScaleImageMobile" @deletePorfolio="deletePorfolio"></newScaleImageMobile>
|
|
<!-- <RobotAssist></RobotAssist> -->
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
|
|
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
|
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import { Https } from "@/tool/https";
|
|
import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
|
|
import newScaleImageMobile from "@/component/WorksPage/newScaleImageMobile.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
import { useRouter,useRoute } from 'vue-router'
|
|
import Falls from "@/component/WorksPage/Falls.vue";
|
|
export default defineComponent({
|
|
components: {
|
|
newScaleImage,
|
|
newScaleImageMobile,
|
|
Falls,
|
|
generalMenu,
|
|
},
|
|
props:{
|
|
isScroll:{
|
|
type:Boolean,
|
|
default:true,
|
|
},
|
|
otherUsers:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
userId:{
|
|
type:String,
|
|
default:'-1',
|
|
},
|
|
},
|
|
setup(prop) {
|
|
const router = useRouter()
|
|
let filter:any = reactive({
|
|
worksSelect: 'all',
|
|
isNull:true,
|
|
worksType: [
|
|
{
|
|
name: useI18n().t('works.all'),
|
|
value: 'all'
|
|
},
|
|
{
|
|
name: useI18n().t('works.FavoriteWorks'),
|
|
value: 'favoriteWorks'
|
|
},
|
|
{
|
|
name: useI18n().t('works.MyWorks'),
|
|
value: 'myWorks'
|
|
},
|
|
// {
|
|
// name: useI18n().t('works.RCAworkshop_2024'),
|
|
// value: 'RCAworkshop_2024'
|
|
// },
|
|
{
|
|
name: useI18n().t('works.NewYear_2025'),
|
|
value: 'NewYear_2025'
|
|
},
|
|
],
|
|
worksList: [
|
|
],
|
|
getListDate:{
|
|
"getLikePortfolio": 0,
|
|
"getMyPortfolio": 0,
|
|
page:1,
|
|
size:10,
|
|
tagId:'',
|
|
},
|
|
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 newScaleImageMobile:any = ref()
|
|
let fall:any = ref()
|
|
let setWorksSelect = (val:any) => {
|
|
filter.worksSelect = val.value
|
|
filter.getListDate.getLikePortfolio = 0
|
|
filter.getListDate.getMyPortfolio = 0
|
|
filter.getListDate.tagId = ''
|
|
if(val.value == 'all'){
|
|
}else if(val.value == 'favoriteWorks'){
|
|
filter.getListDate.getLikePortfolio = 1
|
|
}else if(val.value == 'myWorks'){
|
|
filter.getListDate.getMyPortfolio = 1
|
|
}else if(val.value == 'RCAworkshop_2024'){
|
|
filter.getListDate.tagId = 1
|
|
}else if(val.value == 'NewYear_2025'){
|
|
filter.getListDate.tagId = 3
|
|
}
|
|
filter.getListDate.page = 0
|
|
fall.value.clearData()
|
|
fall.list = []
|
|
fall.wait_list = []
|
|
filter.isShowMark = false
|
|
filter.isNoData = false
|
|
// getPorfolio()
|
|
}
|
|
let likeFile = (item:any,type:string) => {
|
|
}
|
|
let getImgScale = (item:any)=>{
|
|
let newScaleModel = null
|
|
if(window.innerWidth < 768){
|
|
newScaleModel = newScaleImageMobile
|
|
}else{
|
|
newScaleModel = newScaleImage
|
|
newScaleModel.value.scaleImageMask = true
|
|
|
|
}
|
|
newScaleModel.value.init(item)
|
|
|
|
}
|
|
let getPorfolio = ()=>{
|
|
let data = filter.getListDate
|
|
if(filter.isShowMark && !filter.isNoData)return
|
|
filter.isShowMark = true
|
|
if(prop.otherUsers){
|
|
data.accountId = prop.userId
|
|
}
|
|
Https.axiosPost(Https.httpUrls.getPorfolio, data)
|
|
.then((rv) => {
|
|
if(data.page == 1 && rv.content.length == 0){
|
|
filter.isNull = true
|
|
}else{
|
|
filter.isNull = false
|
|
}
|
|
if (rv.content.length > 0) {
|
|
filter.isNull = false
|
|
fall.value.push(rv.content);
|
|
} else {
|
|
filter.isNoData = true
|
|
}
|
|
// filter.worksList = rv.content
|
|
})
|
|
.catch((rv) => {
|
|
filter.isShowMark = false
|
|
if(data.page == 1){
|
|
filter.isNull = true
|
|
}
|
|
filter.isNoData = true
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
// filter.isShowMark = false
|
|
// fall.value.push(filter.worksList)
|
|
// }, 1000);
|
|
}
|
|
let {t} = useI18n()
|
|
let setprintModel= (data:any)=>{
|
|
selectMenu.value = data
|
|
}
|
|
let setPortfolioLike = (value:any) =>{
|
|
// let data = {id:value.id}
|
|
// Https.axiosGet(Https.httpUrls.portfolioLike, {params:data})
|
|
// .then((rv) => {
|
|
|
|
// })
|
|
// .catch((rv) => {
|
|
// });
|
|
}
|
|
let deletePorfolio = (value:any)=>{
|
|
fall.value.deleteItem(value);
|
|
|
|
}
|
|
let setPorfolioDom = ()=>{
|
|
filter.isShowMark = false
|
|
filter.isNoData = false
|
|
getPorfolio()
|
|
let worksPage:any = document.querySelector('.works_page')
|
|
let imgParent:any = document.querySelector('.works_page .page_loading')
|
|
new IntersectionObserver(
|
|
(entries, observer) => {
|
|
// 如果不是相交，则直接返回
|
|
// console.log(entries[0]);
|
|
if (!entries[0].intersectionRatio) return;
|
|
filter.getListDate.page += 1
|
|
getPorfolio()
|
|
},
|
|
// { root:worksPage }
|
|
).observe(imgParent);
|
|
}
|
|
onMounted (()=>{
|
|
nextTick(()=>{
|
|
setPorfolioDom()
|
|
})
|
|
let data = {
|
|
id:router.currentRoute.value.query?.workId
|
|
}
|
|
if(data.id){
|
|
getImgScale(data)
|
|
}
|
|
})
|
|
return {
|
|
...toRefs(filter),
|
|
menuList,
|
|
selectMenu,
|
|
newScaleImage,
|
|
newScaleImageMobile,
|
|
fall,
|
|
setWorksSelect,
|
|
likeFile,
|
|
getImgScale,
|
|
t,
|
|
setprintModel,
|
|
setPortfolioLike,
|
|
deletePorfolio,
|
|
}
|
|
},
|
|
async mounted(){
|
|
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.el-icon{
|
|
font-size: 14px;
|
|
}
|
|
.works_page {
|
|
border-radius: 4rem;
|
|
width: 100%;
|
|
// overflow: hidden;
|
|
// height: 100%;
|
|
height: auto;
|
|
min-height: 100%;
|
|
padding: 0 6rem;
|
|
// min-width: 1440px;
|
|
position: relative;
|
|
padding-top: 5rem;
|
|
|
|
.modal_title_text{
|
|
display: flex;
|
|
margin: 0;
|
|
padding-bottom: 2.4rem;
|
|
.gallery_btn{
|
|
min-width: 12rem;
|
|
margin-right: 2rem;
|
|
}
|
|
.gallery_btn:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.modal_search_menu{
|
|
margin-left: auto;
|
|
z-index: 10;
|
|
.generalMenu_printModel{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.page_content {
|
|
position: relative;
|
|
min-height: 80%;
|
|
height: auto;
|
|
background: #f7f8fa;
|
|
border-radius: 3rem;
|
|
@media (max-width: 768px) {
|
|
background: #fff;
|
|
}
|
|
|
|
>img{
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
&.active{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.page_content{
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
&.otherUsersActive{
|
|
padding: 0;
|
|
}
|
|
.page_loading_box{
|
|
text-align: center;
|
|
height: 50px;
|
|
.page_loading{
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
</style> |