aida_front/src/views/HomeView/Works.vue

<template>
    <div class="works_page">
		<!-- <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>
		</div>
		<newScaleImage ref="newScaleImage"></newScaleImage>
        <!-- 蒙层 start-->
        <div class="mark_loading" v-show="isShowMark">
            <a-spin size="large" />
        </div>
        <!-- 蒙层 end-->
		<!-- <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";
export default defineComponent({
    components: {
        newScaleImage,
    },
    setup() {
		let filter:any = reactive({
			worksSelect: 'all',
			worksType: [
				{
					name: '全部',
					value: 'all'
				},
				{
					name: 'generate',
					value: 'generate'
				},
				{
					name: 'freehand sketching',
					value: 'freehandSketching'
				},
			],
			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',
					name:'bbb',
					lookNum:'999',
					likeNum:'123',
					like: true,
				},
				{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					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',
					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',
					name:'bbb',
					lookNum:'999',
					likeNum:'123',
					like: true,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
					name:'bbb',
					lookNum:'999',
					likeNum:'123',
					like: true,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					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',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				},{
					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
					name:'aaa',
					lookNum:'213',
					likeNum:'123',
					like: false,
				}
			],
			getListDate:{
				page:1,
				size:10,
			},
			isShowMark:false
		})
		let newScaleImage:any = ref()
		let setWorksSelect = (val:any) => {
			filter.worksSelect = val.value
		}
		let likeFile = (item:any,type:string) => {
		}
		let getImgScale = (index:any)=>{
			newScaleImage.value.scaleImageMask = true
			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 {t} = useI18n()
		onMounted (()=>{
			getPorfolio()
		})
        return {
			...toRefs(filter),
			newScaleImage,
			setWorksSelect,
			likeFile,
			getImgScale,
			t,
        }
    },
	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 {
    width: 100%;
	overflow: hidden;
    height: 100%;
	padding: 0 9rem;
	// min-width: 1440px;
	position: relative;
	.modal_title_text{
		display: flex;
		.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;
		}
	}
    .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);
					}
				}
			}
		}
    }
}
</style>