作品广场

src/component/WorksPage/newScaleImage.vue

@@ -23,17 +23,17 @@
 			<div class="newScaleImage_left">
 				<div class="newScaleImage_content_right">
 					<div class="newScaleImage_content_right_img">
-						<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
+						<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
 					</div>
 					<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
-						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.imgUrl" :key="item.id">
+						<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.designPythonOutfitUrl" :key="item.id">
 					</div>
 				</div>
 			</div>
 			<div class="newScaleImage_right">
 				<div class="newScaleImage_right_content">
 					<div class="newScaleImage_right_content_type">
-						<div class="generate_item_title_left scaleImage_chunk_title">类型：collection/generate</div>
+						<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
 					</div>
 					<div v-if="true" class="newScaleImage_right_content_collection">
 						<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
@@ -45,12 +45,13 @@
 						<div class="scaleImage_chunk_item content_left_collection_content">
 							<div class="scaleImage_chunk_title">Finished Products</div>
 							<div class="content_left_collection_content_list">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
-								<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
+								<!-- <img v-for="item in scaleImageData.collectionElementList" v-lazy="item.url"> -->
+								<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
+								<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
 							</div>
 						</div>
-						<div class="started_btn">二创</div>
+						<div class="started_btn" @click="setChoose">二创</div>
 					</div>
 					<div v-else class="newScaleImage_right_content_generate">
 						<div class="scaleImage_chunk_item content_left_generate_item">
@@ -85,17 +86,17 @@
 							</div>
 						</div>
 						<div class="detail_right_work_detail detail_left_right_item">
-							<div class="scaleImage_chunk_title">这是一套合成图</div>
-							<div class="scaleImage_chunk_title_intro">1111111111111111111111111111</div>
+							<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
+							<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</div>
 						</div>
 						<div class="detail_right_date detail_left_right_item">
 							<div class="detail_right_date_setUp">
 								<div>创建时间</div>
-								<span>2024/11/1/1</span>
+								<span>{{ scaleImageList[scaleImageIndex].createDate }}</span>
 							</div>
 							<div class="detail_right_date_upData">
 								<div>更新时间</div>
-								<span>2024/11/1/1</span>
+								<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
 							</div>
 						</div>
 						<div class="detail_right_look_operation detail_left_right_item">
@@ -203,13 +204,16 @@
 
 <script lang="ts">
 import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
-// import { Https } from "@/tool/https";
+import { Https } from "@/tool/https";
 // import { getCookie } from "@/tool/cookie";
 // import domTurnImg from '@/tool/domTurnImg'
+import { useRouter } from 'vue-router'
 import { downloadIamge } from "@/tool/util";
 
 export default defineComponent({
     setup() {
+		//首先在setup中定义
+ 		const router = useRouter()
         let scaleImage: any = ref(false);//弹窗
 		let scaleImageMask:any = ref(false)//弹窗遮罩
 		let imgData:any = reactive({
@@ -218,6 +222,7 @@ export default defineComponent({
 			scaleImageMarginTop:0,
 			scaleImageList:[],
 			scaleImageIndex:0,//当前图片索引
+			scaleImageData:{},//当前图片内容
 		})
 		let textarea: any = ref(null)
 		let setCopy = ()=>{
@@ -228,12 +233,15 @@ export default defineComponent({
 			scaleImage.value = true
 			imgData.scaleImageList = list
 			imgData.scaleImageIndex = index
+			let data = list[index]
+			getDetail(data)
+
 			// let scaleImageList = this.store.state.UploadFilesModule.moodboard
 		}
 		let cancelDsign = ()=>{
 			scaleImage.value = false
-			imgData.scaleImageList = []
 			imgData.scaleImageIndex = 0
+			imgData.scaleImageData = {}
 		}
 		let download = ()=>{
 			downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -244,8 +252,6 @@ export default defineComponent({
 		let LikeFile = (item:any,str:string)=>{
 			const currentInstance = getCurrentInstance();
 			let parent:any = currentInstance?.parent
-			console.log(parent);
-			
 			parent.likeFile(item,str)
 		}
 	
@@ -253,6 +259,20 @@ export default defineComponent({
 		// 	let parent:any = this.$parent
 		// 	parent.likeFile(item,str)
 		// },
+		let getDetail = (value:any)=>{
+			let data = value
+		    Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
+				(rv: any) => {
+						console.log(rv);
+						imgData.scaleImageData = rv
+					}
+				).catch((res)=>{
+				}
+			)
+		}
+		let setChoose = () =>{
+        	router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId.id,type:'Works'}})
+		}
 		watch(()=>imgData.scaleImageIndex,
 			(newVal,oldVal)=>{
 				let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
@@ -272,6 +292,7 @@ export default defineComponent({
 			download,
 			setScaleImageIndex,
 			LikeFile,
+			setChoose,
         };
     },
 	directives:{
@@ -499,9 +520,11 @@ export default defineComponent({
 			.nav_centent_img{
 				max-width: calc(var(--snap-size) - 2rem);
 				height: calc(var(--snap-size) - 2rem);
+				width: calc(var(--snap-size) - 2rem);
 				object-fit: contain;
-				width: auto;
-				background-color: #fff;
+				padding: .5rem 0;
+				background-color: #ffffff;
+				border: 1px solid #777777;
 				object-position: 50%,50%;
 				border-radius: calc(1rem*1.2);
 				cursor: pointer;
@@ -820,6 +843,7 @@ export default defineComponent({
 				display: flex;
 				justify-content: space-between;
 				.detail_right_date_setUp,.detail_right_date_upData{
+					width: 45%;
 					div{
 						font-size: 2rem;
 						font-weight: 600;