323 lines
7.5 KiB
Vue
323 lines
7.5 KiB
Vue
<template>
|
|
<div class="works_page" :class="{active:isScroll}">
|
|
<!-- <div class="modal_title_text">
|
|
<div>Works</div>
|
|
</div> -->
|
|
<div class="modal_title_text modal_search">
|
|
<div v-show="isScroll" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
|
|
{{ item.name }}
|
|
</div>
|
|
<div v-show="!isScroll" class="modal_title_text_assistant active">All</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>
|
|
</div>
|
|
|
|
<newScaleImage ref="newScaleImage" @deletePorfolio="deletePorfolio"></newScaleImage>
|
|
<!-- <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 { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import {getUploadUrl,isMoible} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { Https } from "@/tool/https";
|
|
import { getCookie } from "@/tool/cookie";
|
|
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',
|
|
worksType: [
|
|
{
|
|
name: useI18n().t('works.all'),
|
|
value: 'all'
|
|
},
|
|
// {
|
|
// name: 'generate',
|
|
// value: 'generate'
|
|
// },
|
|
// {
|
|
// name: 'freehand sketching',
|
|
// value: 'freehandSketching'
|
|
// },
|
|
{
|
|
name: useI18n().t('works.FavoriteWorks'),
|
|
value: 'favoriteWorks'
|
|
},
|
|
{
|
|
name: useI18n().t('works.MyWorks'),
|
|
value: 'myWorks'
|
|
},
|
|
],
|
|
worksList: [
|
|
],
|
|
getListDate:{
|
|
"getLikePortfolio": 0,
|
|
"getMyPortfolio": 0,
|
|
page:1,
|
|
size:10,
|
|
},
|
|
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
|
|
filter.getListDate.getLikePortfolio = 0
|
|
filter.getListDate.getMyPortfolio = 0
|
|
if(val.value == 'all'){
|
|
}else if(val.value == 'favoriteWorks'){
|
|
filter.getListDate.getLikePortfolio = 1
|
|
}else if(val.value == 'myWorks'){
|
|
filter.getListDate.getMyPortfolio = 1
|
|
}
|
|
filter.getListDate.page = 0
|
|
fall.value.clearData()
|
|
filter.isShowMark = false
|
|
filter.isNoData = false
|
|
// getPorfolio()
|
|
}
|
|
let likeFile = (item:any,type:string) => {
|
|
}
|
|
let getImgScale = (item:any)=>{
|
|
newScaleImage.value.scaleImageMask = true
|
|
newScaleImage.value.init(item)
|
|
}
|
|
let getPorfolio = ()=>{
|
|
let data = filter.getListDate
|
|
if(filter.isShowMark && !filter.isNoData)return
|
|
filter.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.getPorfolio, data)
|
|
.then((rv) => {
|
|
if (rv.content.length > 0) {
|
|
filter.isShowMark = false
|
|
fall.value.push(rv.content);
|
|
} else {
|
|
filter.isNoData = true
|
|
}
|
|
// filter.worksList = rv.content
|
|
})
|
|
.catch((rv) => {
|
|
filter.isShowMark = false
|
|
});
|
|
|
|
// 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);
|
|
|
|
}
|
|
onMounted (()=>{
|
|
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;
|
|
console.log(123123);
|
|
|
|
filter.getListDate.page += 1
|
|
getPorfolio()
|
|
},
|
|
// { root:worksPage }
|
|
).observe(imgParent);
|
|
})
|
|
return {
|
|
...toRefs(filter),
|
|
menuList,
|
|
selectMenu,
|
|
newScaleImage,
|
|
fall,
|
|
setWorksSelect,
|
|
likeFile,
|
|
getImgScale,
|
|
t,
|
|
setprintModel,
|
|
setPortfolioLike,
|
|
deletePorfolio,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: this.selectCode,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
};
|
|
},
|
|
watch:{
|
|
sex(newVal,oldVal){
|
|
this.upload.gender = newVal.value
|
|
},
|
|
searchPictureName(newVal,oldVal){
|
|
// clearTimeout(this.getLibraryListInputTime)
|
|
// this.getLibraryListInputTime = setTimeout(() => {
|
|
// if(newVal != oldVal){
|
|
// this.currentPage = 1
|
|
// }
|
|
// }, 500);
|
|
},
|
|
},
|
|
async mounted(){
|
|
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.el-icon{
|
|
font-size: 14px;
|
|
}
|
|
.works_page {
|
|
border-radius: 4rem;
|
|
width: 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;
|
|
background: #eee;
|
|
margin-right: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.modal_title_text_assistant:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.active{
|
|
background: #39215b;
|
|
color: #fff;
|
|
}
|
|
.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;
|
|
.page_loading_box{
|
|
text-align: center;
|
|
height: 50px;
|
|
.page_loading{
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
&.active{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.page_content{
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |