yichael_zhongchuang_front_2/components/home/simulationLibrary.vue

<template>
	<view class="s_container">
		<view class="s_content_container" v-if="bShow[0]">
			<view class="s_search">
				<img src="../../assets/home/search.png" class="s_search_img_logo" alt="">
				<input type="text" value="" class="s_search_input" placeholder="请输入搜索内容" />
				<button type="warn" size="mini" class="s_btn_search">搜索</button>
			</view>
			
			<view class="content">
				<view class="top-dispaly-block">
					<view class="top_content" v-for="(item,index) in allContentArr" :key="index">
						<img :src="item.Texture_Url" class="top_image" mode="" @click="viewDetail(index)"></img>
					</view>
				</view>
				
				<view class="s_content_block">
					<view class="s_img_title" v-text="'场景'"></view>
					<view class="s_img_image_block">
						<view class="s_img_content">
							<view  class="s_image_block" v-for="(item,index) in sceneArr" :key="index">
								<img :src="item.Texture_Url" class="s_image" mode="" @click="viewDetail1(index)"></img>
							</view>
						</view>
						<img src="../../assets/home/left.png" class="v-left" alt="" @click="more1()">
					</view>
				</view>
				
				<view class="s_content_block">
					<view class="s_img_title" v-text="'角色'"></view>
					<view class="s_img_image_block">
						<view class="s_img_content">
							<view class="s_image_block" v-for="(item,index) in charactorArr" :key="index">
								<img :src="item.Texture_Url" class="s_image" mode="" @click="viewDetail0(index)"></img>
							</view>
						</view>
						<img src="../../assets/home/left.png" class="v-left" alt="" @click="more0()">
					</view>
				</view>
				
				<view class="s_content_block">
					<view class="s_img_title" v-text="'道具'"></view>
					<view class="s_img_image_block">
						<view class="s_img_content">
							<view class="s_image_block" v-for="(item,index) in itemArr" :key="index">
								<img :src="item.Texture_Url" class="s_image" mode="" @click="viewDetail2(index)"></img>
							</view>
						</view>
						<img src="../../assets/home/left.png" class="v-left" alt=""  @click="more2()">
					</view>
				</view>
			</view>		
		</view>
		
		<view class="detail" v-if="bShow[1]">
			<view class="creator-info-block">
				<view class="firstLine">
					<img src="../../assets/login/loginPic3.png" class="avatar" alt="">
					<text class="creatorName">{{creatorName}}</text>
				</view>
				<view class="secondLine">
					<view class="secondLine-block1">
						<view class="Star"></view>
						<view class="CollectionAuth">收藏作者</view>
					</view>
					<view class="secondLine-block2"><text>联系作者</text></view>
				</view>
				<view class="detailBack" @click="detailBack()"><text>返回</text></view>
			</view>
			<view class="detail-block">
				<view class="DefaultDisplayImg-block">
					<image :src="imageUrl" ></image>
					<!-- <img :src="imageUrl" mode="widthFix"></img> -->
					<!-- <img :src="imageUrl" ></img> -->
				</view>
				<view class="Label-block">
					<text>作品名称:{{ItemName}}</text>
					<text>上传时间:{{uploadTime}}</text>
					<text @click="dowload()">下载</text>
					<!-- <text>学生互评</text> -->
				</view>
			</view>
		</view>
		
		<view class="more" v-if="bShow[2]">
			<view class="ListBack" @click="detailBack()"><text>返回</text></view>
			<view class="detail_image_block" v-for="(item,index) in detailArr" :key="index">
				<img :src="item.Texture_Url" class="detail_image" @click="viewDetail0(index)"  :style="{left:`${index%6*400}rpx`,top:`${parseInt(index/6)*400+100}rpx`}" v-if="bShowImg[0]"></img>
				<img :src="item.Texture_Url" class="detail_image" @click="viewDetail1(index)"  :style="{left:`${index%6*400}rpx`,top:`${parseInt(index/6)*400+100}rpx`}" v-if="bShowImg[1]"></img>
				<img :src="item.Texture_Url" class="detail_image" @click="viewDetail2(index)"  :style="{left:`${index%6*400}rpx`,top:`${parseInt(index/6)*400+100}rpx`}" v-if="bShowImg[2]"></img>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "simulationLibrary",
		
		data() {
			return {
				array: ['项目类型'],
				index: 0,
				// url: '/assets/home/homeBG.jpg',
				// imageUrl:require('../../assets/home/simulationLibrary/DefaultDisplayImg.png'),
				imageUrl:'',
				fbx_url:'',
				allContentArr:[],
				itemArr:[],
				charactorArr:[],
				sceneArr:[],
				
				allContentBigArr:[],
				itemBigArr:[],
				charactorBigArr:[],
				sceneBigArr:[],
				
				bShow: [
					true, //normal
					false, //detail
					false, //more
				],
				bShowImg:[
					false, //normal
					false, //detail
					false, //more
				],
				detailArr:[],
				creatorName:"姓名",
				ItemName:'物品名',
				uploadTime:'上传时间',
				
			}
		},
		methods: {
			
			init() {
				this.bShow = [
					true, //normal
					false, //detail
					false, //more
				];
				this.bShowImg = [
					false, //normal
					false, //detail
					false, //more
				];
				//临时
				this.allContentArr.length = 0;
				this.itemArr.length = 0;
				this.charactorArr.length = 0;
				this.sceneArr.length = 0;
				
				this.allContentBigArr.length = 0;
				this.itemBigArr.length = 0;
				this.charactorBigArr.length = 0;
				this.sceneBigArr.length = 0;
				
		
				this.allContentArr.push({'CreateUserName':'郭佳','Name':'昆仑山','UploadTime':'2021-05-19 10:51:29','Texture_Url':'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/WebDownload/Library/昆仑山.png?versionId=CAEQDxiBgIDms5S.1BciIGEyYjVhMTdkZGFkNDQ1MTc4MjI0NDhlMDY4MTIxYjQz'});
				this.allContentArr.push({'CreateUserName':'吴之雨','Name':'星际探索','UploadTime':'2021-05-19 10:51:29','Texture_Url':'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/WebDownload/Library/星际探索3.png?versionId=CAEQDxiBgMDAspS.1BciIGY1NWIyNGRhNDc0MzQ4MDY4YjI4ZmMxYTU2ZGY4MTQx'});
				this.allContentArr.push({'CreateUserName':'张耀中','Name':'陆地居住区','UploadTime':'2021-05-19 10:51:29','Texture_Url':'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/WebDownload/Library/陆地居住区.png?versionId=CAEQDxiBgIDytpS.1BciIDdmNDA3NzBiYjA5ZDRjZjBhMmM1OGMxNzYxMWE5NDhm'});
			
				
				//场景
				uni.request({
					url: mydata_api + "/project/getallprojectcontent",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 100,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"Type":"场景图"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('场景=',res);
						let aArr = res.data.ProjectItem;
			
						for(let i=0;i<aArr.length;i++)
						{
							let item = aArr[i];
							this.sceneBigArr.push({'CreateUserName':item.UploadUserName,'Name':item.Name,'UploadTime':item.UPloadTime,'Texture_Url':item.URL});
							
							if(i>5) continue;
							this.sceneArr.push({'CreateUserName':item.UploadUserName,'Name':item.Name,'UploadTime':item.UPloadTime,'Texture_Url':item.URL});
						}
					}
				})	
				
				//角色
				uni.request({
					url: mydata_api + "/project/getallprojectcontent",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 100,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"Type":"气氛图"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('角色=',res);
						let aArr = res.data.ProjectItem;
						
						for(let i=0;i<aArr.length;i++)
						{
							let item = aArr[i];
							this.charactorBigArr.push({'CreateUserName':item.UploadUserName,'Name':item.Name,'UploadTime':item.UPloadTime,'Texture_Url':item.URL});
							
							if(i>5) continue;
							this.charactorArr.push({'CreateUserName':item.UploadUserName,'Name':item.Name,'UploadTime':item.UPloadTime,'Texture_Url':item.URL});
						}
					}
				})
				
				//道具
				uni.request({
					url: mydata_api + "/item/getitemlist",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 100,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"ItemType":"道具"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('道具=',res.data.Items);
						this.itemBigArr = res.data.Items;
						// let items =  res.data.Items;
						// console.log('道具=',items)
						for(let i=0;i<this.itemBigArr.length;i++)
						{
							let item = this.itemBigArr[i];
							if(i>5) break;
							this.itemArr.push(item);
						}
						
					}
				})	
				
			},
			// previewImage(url){
			// 	uni.downloadFile({
			// 		url:url,
			// 		success: (res) => {
			// 			if (res.statusCode === 200) {
			// 				uni.openDocument({
			// 					filePath: res.tempFilePath, 
			// 					// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
			// 					success: function(res) {
			// 						console.log('打开文档成功');
			// 					}
			// 				});
			// 			}
			// 		},
			// 	});
			// },
			viewDetail(e) {
				let index = parseInt(e);
				let aItem = this.allContentArr[index];
				console.log('aItem=',aItem)
				if(aItem)
				{
					this.imageUrl = aItem.Texture_Url;
					
					this.bShow = [
						false, //normal
						true, //detail
						false, //more
					]
					
					this.creatorName = aItem.CreateUserName;
					this.ItemName = aItem.Name;
					this.uploadTime = aItem.UploadTime;
					this.fbx_url = aItem.Fbx_Url;
				}
			},
			viewDetail0(e) {
				let index = parseInt(e);
				
				let aItem = this.charactorArr[index];
				if(aItem)
				{
					this.imageUrl = aItem.Texture_Url;
					
					this.bShow = [
						false, //normal
						true, //detail
						false, //more
					]
					this.creatorName=aItem.CreateUserName;
					this.ItemName = aItem.Name;
					this.uploadTime = aItem.UploadTime;
					this.fbx_url = aItem.Fbx_Url;
				}
			},
			viewDetail1(e) {
				let index = parseInt(e);
				let aItem = this.sceneArr[index];
				if(aItem)
				{
					this.imageUrl = aItem.Texture_Url;
				
					this.bShow = [
						false, //normal
						true, //detail
						false, //more
					]
					this.creatorName=aItem.CreateUserName;
					this.ItemName = aItem.Name;
					this.uploadTime = aItem.UploadTime;
					this.fbx_url = aItem.Fbx_Url;
				}
			},
			viewDetail2(e) {
				let index = parseInt(e);
				let aItem = this.itemArr[index];
				
				if(aItem)
				{
					this.imageUrl = aItem.Texture_Url;
				
					this.bShow = [
						false, //normal
						true, //detail
						false, //more
					]
				
					this.creatorName=aItem.CreateUserName;
					this.ItemName = aItem.Name;
					this.uploadTime = aItem.UploadTime;
					this.fbx_url = aItem.Fbx_Url;
				}
			},
			more0(){
				
				this.bShow = [
					false, //normal
					false, //detail
					true, //more
				]
				
				this.bShowImg = [
					true, //normal
					false, //detail
					false, //more
				]
				this.detailArr=this.charactorBigArr;//.itemArr;
			},
			more1(){
				
				this.bShow = [
					false, //normal
					false, //detail
					true, //more
				]
				
				this.bShowImg = [
					false, //normal
					true, //detail
					false, //more
				]
				
				this.detailArr=this.sceneBigArr;//charactorArr;
				
			},
			more2(){
				this.bShow = [
					false, //normal
					false, //detail
					true, //more
				]
				
				this.bShowImg = [
					false, //normal
					false, //detail
					true, //more
				]
				
				this.detailArr=this.itemBigArr;
				
				// console.log('this.detailArr=',this.detailArr);
			},
			detailBack(){
				this.bShow = [
					true, //normal
					false, //detail
					false, //more
				]
			},
			dowload() {		
				window.location.href = this.fbx_url;			
			}
			// preview(e) {
			// 	let index = parseInt(e);
			// 	console.log('index=',typeof(index),'=',index);
				
			// 	if(this.allContentArr[index])
			// 	{
			// 		// console.log('this.allContentArr[index]=',this.allContentArr[index]);
			// 		console.log('src=',this.allContentArr[index].src);
			// 		this.previewImage(this.allContentArr[index].src);
			// 	}
			// },
			// dowload(e) {
			// 	let index = parseInt(e);
			// 	console.log('index=',typeof(index),'=',index);
				
			// 	if(this.allContentArr[index])
			// 	{
			// 		console.log('fbx=',this.allContentArr[index].fbx);
			// 		window.location.href = this.allContentArr[index].fbx;
			// 	}
				
			// },
		}
	}
</script>

<style scoped>
	.s_container {
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: column;
			
		background-color: #fff;
	}
	
	.s_content_container {
		width: 96%;
		height: 96%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: column;
		
		border-bottom: 3rpx solid #D7D7D7;
	}
	
	.s_search {
		width: 100%;
		height: 3%;
		
		margin-top: 3%;
		
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row;
	}
	
	.s_search_img_logo{
		height: 100%;
		margin-right: 1%;
	}
	
	.s_search_input {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		font-size: 20rpx;	
		border: 2rpx solid #DDDDDD;
	}
	
	.s_btn_search {
		width: 130rpx;
		height: 100%;
		line-height: 80rpx;
		margin-left: 1%;
	}
	
	.content{
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: column;
		
		margin-top: 1%;
		margin-bottom: 1%;
	}
	
	.top-dispaly-block {
		width: 100%;
		height: 30%;
		
		display: flex;
		justify-content: space-between;
		align-items:center;	
		flex-direction: row;
		border-bottom: 3rpx solid #D7D7D7;
	}
	
	.top_content {
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		margin-right: 1%;
	}
	
	.top_image{
		width: 100%;
		height: 100%;
	}
	
	.s_content_block {
		width: 100%;
		/* height: 20%; */
		margin-bottom: 3%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: column;
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.s_img_title {
		width: 100%;
		
		font-size: 36rpx;
		line-height: 200rpx;
		font-weight: bold;
		
		display: flex;
		justify-content: left;
		align-items:center;
	    flex-direction: row;
	}
	
	.s_img_image_block {
		
		width: 100%;
		/* height: 100%; */
		
		display: flex;
		justify-content: space-around;
		align-items:center;	
		flex-direction: row;
		
		 /* border: 1rpx solid #ff0000; */
	}
	
	.s_img_content {
		width: 100%;
		/* height: 100%; */
		
		display: flex;
		justify-content: left;
		align-items:center;
		flex-direction: row;
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.s_image_block{
		width: 16%;
		/* height: 100%; */
		margin-right: 1%;
		/* border: 1rpx solid #ff0000; */
	}
	
	.s_image {
		/* width: 350rpx; */
		/* height: 350rpx; */

		width: 100%;
		/* height: 350rpx; */
		/* border: 1rpx solid #ff0000; */
	}
	
	.v-left {
		width: 25rpx;
		height: 50rpx;
	}
	
	.detail{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row;
		
		/* border: 1rpx solid #ff0000; */
	}
	.detailBack{
		width: 100%;
		height: 3%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		margin-top:60%;
		
		/* border: 1rpx solid #000000; */
	}
	
	.detailBack text{
		width: 30%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		border: 1rpx solid #000000;
	}
	
	.creator-info-block{
		width: 30%;
		height: 100%;
		/* border: 1rpx solid #ff0000; */
	}
	
	.firstLine{
		height: 8%;
		margin-left: 10%;
		margin-top: 30%;
		
		display: flex;
		justify-content: flex-start;
		align-items:center;
		flex-direction: row;
		
		/* border: 1rpx solid #ff0000; */
	}
	.avatar{
		
	}
	.creatorName{
		font-size: 50rpx;
		color: #A27452;
		margin-left: 5%;
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.secondLine{
		height: 4%;
		margin-left: 10%;
		margin-top: 10%;
		
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row;
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.secondLine-block1{
		background-image:url( "../../assets/home/simulationLibrary/Bg.png");
		background-size: 90% 90%;
		background-repeat: no-repeat;
		 
		width:48%;
		height: 100%;
		
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row;
		
		/* border: 1rpx solid #000000; */
	}
	
	.Star{
		background-image:url( "../../assets/home/simulationLibrary/Start.png");
		background-size: 99% 99%;
		background-repeat: no-repeat;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		width:10%;
		height: 50%;
		
		margin-left: 10%;
		margin-bottom: 2%;
		/* border: 1rpx solid #000000; */
	}
	
	.CollectionAuth{
		color: #000000;
		font-size: 30rpx;
		
		width:80%;
		height: 80%;
		
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		margin-right: 1%;
		margin-bottom: 2%;
		/* border: 1rpx solid #000000; */
	}
	
	.secondLine-block2{
		background-image:url( "../../assets/home/simulationLibrary/Block2.png");
		background-size: 90% 90%;
		background-repeat: no-repeat;
		
		width:48%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		color: #000000;
		font-size: 30rpx;
		/* border: 1rpx solid #000000; */
	}
	
	.secondLine-block2 text{
		margin-right: 10%;
		margin-bottom: 1%;
		color: #000000;
		font-size: 30rpx;
		/* border: 1rpx solid #000000; */
	}
	
	
	.detail-block{
		width: 70%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		flex-direction: column;
		
		border: 1rpx solid #000000;
	}
	
	.DefaultDisplayImg-block{
		width: 90%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		margin-top: 20%;
		margin-bottom: 5%;
		/* border: 1rpx solid #ff0000; */
	}
	
	.DefaultDisplayImg-block img{
		width: 100%;
		/* height: 80%; */
	}
	
	.DefaultDisplayImg-block image{
		width: 100%;
		height: 100%;
	}
	
	.Label-block{
		width:70%;
		height:10%;
		
		display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row;
		
		margin-bottom: 10%;
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.more{
		position: absolute;
		width: 80%;
		height: 80%;
		/* background-color: #000000; */
		/* background-color: #FFFFFF; */
		
		/* display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: column; */
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.detail_image_block{
		
		width:30%;
		/* height:90%; */
		
	/* 	display: flex;
		justify-content: space-between;
		align-items:center;
		flex-direction: row; */
		
		/* border: 1rpx solid #ff0000; */
	}
	
	.detail_image{
		position: absolute;
		width: 350rpx;
		height: 350rpx;
	}
	.ListBack{
		width: 5%;
		height: 3%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		margin-bottom: 5%;
		border: 1rpx solid #000000;
	}
</style>