458 lines
12 KiB
Vue
458 lines
12 KiB
Vue
<template>
|
||
<div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers,'positionLogin':true}">
|
||
<!-- <div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers,'positionLogin':position=='login'}"> -->
|
||
|
||
<!-- <div class="modal_title_text modal_search" v-if="!otherUsers && position!='login'">
|
||
<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> -->
|
||
<div class="page_content" ref="autoscrollDom">
|
||
<Falls ref="fall" @loadend="isShowMark = false" :itemWidth="failWidth" @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,watch,onBeforeUnmount} from '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";
|
||
import { useStore } from "vuex";
|
||
export default defineComponent({
|
||
components: {
|
||
newScaleImage,
|
||
newScaleImageMobile,
|
||
Falls,
|
||
generalMenu,
|
||
},
|
||
props:{
|
||
autoscroll:{
|
||
type:Boolean,
|
||
default:false,
|
||
},
|
||
isScroll:{
|
||
type:Boolean,
|
||
default:true,
|
||
},
|
||
otherUsers:{
|
||
type:Boolean,
|
||
default:false,
|
||
},
|
||
position:{
|
||
type:String,
|
||
default:'',
|
||
},
|
||
},
|
||
setup(prop) {
|
||
const router = useRouter() as any
|
||
const route = useRoute() as any
|
||
const store = useStore();
|
||
let filter:any = reactive({
|
||
worksSelect: 'all',
|
||
isNull:true,
|
||
failWidth:300,
|
||
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,//如果数据为空就不加载
|
||
autoscrollDom:null as any,
|
||
autoscrollTime:null as any,
|
||
})
|
||
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
|
||
filter.getListDate.getLikePortfolio = 0
|
||
filter.getListDate.getMyPortfolio = 0
|
||
filter.getListDate.tagId = ''
|
||
if(val == 'all'){
|
||
}else if(val == 'favoriteWorks'){
|
||
filter.getListDate.getLikePortfolio = 1
|
||
}else if(val == 'myWorks'){
|
||
filter.getListDate.getMyPortfolio = 1
|
||
}else if(val == 'RCAworkshop_2024'){
|
||
filter.getListDate.tagId = 1
|
||
}else if(val == '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(getScreenOrientation() == 'landscape'){
|
||
newScaleModel = newScaleImage
|
||
newScaleModel.value.scaleImageMask = true
|
||
}else{
|
||
newScaleModel = newScaleImageMobile
|
||
}
|
||
newScaleModel.value.init(item)
|
||
|
||
}
|
||
function getScreenOrientation() {
|
||
// 优先使用标准API
|
||
if (screen.orientation) {
|
||
return screen.orientation.type.includes('portrait') ? 'portrait' : 'landscape';
|
||
}
|
||
// 回退到宽高比检测
|
||
return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
|
||
}
|
||
|
||
// 监听方向变化
|
||
function setupOrientationListener(callback:any) {
|
||
// 标准事件
|
||
const handleOrientationChange = () => {
|
||
callback(getScreenOrientation());
|
||
};
|
||
|
||
// 优先使用标准API
|
||
if (screen.orientation) {
|
||
screen.orientation.addEventListener('change', handleOrientationChange);
|
||
}
|
||
// 回退到resize事件
|
||
else {
|
||
window.addEventListener('resize', handleOrientationChange);
|
||
}
|
||
// 返回清除监听的方法
|
||
return () => {
|
||
if (screen.orientation) {
|
||
screen.orientation.removeEventListener('change', handleOrientationChange);
|
||
} else {
|
||
window.removeEventListener('resize', handleOrientationChange);
|
||
}
|
||
};
|
||
}
|
||
const cleanup = setupOrientationListener((orientation:any) => {
|
||
if (orientation === 'portrait') {
|
||
// 竖屏逻辑
|
||
return 'portrait'
|
||
} else {
|
||
// 横屏逻辑
|
||
return 'landscape'
|
||
}
|
||
});
|
||
let getPorfolio = ()=>{
|
||
let data = filter.getListDate
|
||
|
||
if(filter.isShowMark && !filter.isNoData)return
|
||
filter.isShowMark = true
|
||
// if(prop.otherUsers){
|
||
data.accountId = store.state.UserHabit.userDetail.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) => {
|
||
// 如果不是相交，则直接返回
|
||
if (!entries[0].intersectionRatio) return;
|
||
filter.getListDate.page += 1
|
||
getPorfolio()
|
||
},
|
||
// { root:worksPage }
|
||
).observe(imgParent);
|
||
}
|
||
watch(() => route.query,
|
||
(query, oldQuery) => {
|
||
if(oldQuery && query?.works == oldQuery?.works)return
|
||
let str = query.works
|
||
if(!str)str = 'all'
|
||
nextTick(()=>{
|
||
setWorksSelect(str)
|
||
})
|
||
},
|
||
{ immediate: true } // 立即触发一次以处理初始参数
|
||
);
|
||
onMounted (()=>{
|
||
if(window.innerWidth < 1200)filter.failWidth = 240
|
||
nextTick(()=>{
|
||
setPorfolioDom()
|
||
})
|
||
//对元素设置自动滚动，每次滚动10px
|
||
if (prop.autoscroll) {
|
||
let isAdd = true
|
||
filter.autoscrollTime = setInterval(() => {
|
||
// console.log(filter.autoscrollDom.scrollHeight,filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight)
|
||
if(filter.autoscrollDom.scrollHeight > filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight-3 && filter.autoscrollDom.scrollHeight < filter.autoscrollDom.scrollTop+ filter.autoscrollDom.clientHeight+3){
|
||
isAdd = false
|
||
}
|
||
if(filter.autoscrollDom.scrollTop < 3){
|
||
isAdd = true
|
||
}
|
||
if(isAdd){
|
||
filter.autoscrollDom.scrollTop += 2;
|
||
}else{
|
||
filter.autoscrollDom.scrollTop -= 2;
|
||
}
|
||
}, 10);
|
||
}
|
||
|
||
|
||
// const start = filter.autoscrollDom.scrollTop;
|
||
// const maxScroll = filter.autoscrollDom.scrollHeight - filter.autoscrollDom.clientHeight;
|
||
// const duration = 3000; // 完整滚动时长（ms）
|
||
// let startTime:any = null;
|
||
|
||
// function animate(currentTime:any) {
|
||
// if (!startTime) startTime = currentTime;
|
||
// const elapsed = currentTime - startTime;
|
||
// const progress = Math.min(elapsed / duration, 1); // 0~1
|
||
|
||
// // 缓动函数（easeInOutQuad）
|
||
// const easeProgress = progress < 0.5
|
||
// ? 2 * progress * progress
|
||
// : 1 - Math.pow(-2 * progress + 2, 2) / 2;
|
||
|
||
// filter.autoscrollDom.scrollTop = start + (maxScroll - start) * easeProgress;
|
||
|
||
// if (progress < 1) {
|
||
// filter.autoscrollTime = requestAnimationFrame(animate);
|
||
// }
|
||
// }
|
||
|
||
// filter.autoscrollTime = requestAnimationFrame(animate);
|
||
|
||
let data = {
|
||
id:router.currentRoute.value.query?.workId
|
||
}
|
||
if(data.id){
|
||
getImgScale(data)
|
||
}
|
||
})
|
||
onBeforeUnmount(() => {
|
||
clearInterval(filter.autoscrollTime); // 清除定时器
|
||
})
|
||
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;
|
||
&.positionLogin{
|
||
padding: 0;
|
||
border-radius: 0;
|
||
.page_content{
|
||
scrollbar-width: none;
|
||
border-radius: 0;
|
||
min-height: 100%;
|
||
}
|
||
}
|
||
.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%;
|
||
top: 50%;
|
||
transform: translate(-50%,-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> |