yichael_zhongchuang_front_2/components/home/simulationLibrary.vue

<template>
	<view class="s_container">
		<image src="../../assets/test/4.png" class="s_logo" mode=""></image>
		<view class="s_content_container">
			<view class="s_search" style="">
				<view class="" style="position: relative;width: 100%;">
					<img src="../../assets/home/search.png" class="s_search_img_input" alt="">
					<input type="text" value="" class="s_search_input" style="width: 96%;" placeholder="请输入搜索内容" />
				</view>
				<button type="warn" size="mini" class="s_btn_search">搜索</button>
			</view>
			<view class="s_search_condition">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<view class="s_search_img">

				<view class="s_img_left">
					<view class="s_top_img">
						<view class="s_top_content" v-for="(item,index) in allContentArr" :key="index">
							<!-- <img :src="item.src" class="s_top_image" mode=""></img>
							<view class="s_top_title">
								{{item.name}}
							</view> -->
							<img :src="item.src" class="s_image" mode="" @click="change(index)"></img>
							<view class="s_operation" v-show="index==act">
								<text>{{item.name}}</text>
								<view>
									<img src="../../assets/home/find.png" @click="preview(index)">
									<img src="../../assets/home/dowload.png" alt="" @click="dowload(index)">
								</view>
							
							</view>
						</view>
					</view>
					<view class="s_img s_img_1">
						<view class="s_img_title" v-text="'道具'"></view>
						<view class="s_img_image">
							<view class="s_img_content" v-for="(item,index) in itemArr" :key="index">
								<img :src="item.src" class="s_image" mode="" @click="change1(index)"></img>
								<view class="s_operation" v-show="index==act1">
									<text>{{item.name}}</text>
									<view>
										<img src="../../assets/home/find.png" alt="" @click="preview1(index)">
										<img src="../../assets/home/dowload.png" alt="" @click="dowload1(index)">
									</view>

								</view>
							</view>
							<img src="../../assets/home/left.png" class="v-left" alt="">
						</view>
					</view>
					<view class="s_img">
						<view class="s_img_title" v-text="'角色'"></view>
						<view class="s_img_image">
							<view class="s_img_content" v-for="(item,index) in charactorArr" :key="index">
								<img :src="item.src" class="s_image" mode="" @click="change2(index)"></img>
								<view class="s_operation" v-show="index==act2">
									<text>{{item.name}}</text>
									<view>
										<img src="../../assets/home/find.png" alt="" @click="preview2(index)">
										<img src="../../assets/home/dowload.png" alt="" @click="dowload2(index)">
									</view>

								</view>
							</view>
							<img src="../../assets/home/left.png" class="v-left" alt="">
						</view>
					</view>
					<view class="s_img">
						<view class="s_img_title" v-text="'场景'"></view>
						<view class="s_img_image">
							<view class="s_img_content" v-for="(item,index) in sceneArr" :key="index">
								<img :src="item.src" class="s_image" mode="" @click="change3(index)"></img>
								<view class="s_operation" v-show="index==act3">
									<text>{{item.name}}</text>
									<view>
										<img src="../../assets/home/find.png" alt="" @click="preview3(index)">
										<img src="../../assets/home/dowload.png" alt="" @click="dowload3(index)">
									</view>
					
								</view>
							</view>
							<img src="../../assets/home/left.png" class="v-left" alt="">
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="s_footer" style="text-align: center;padding: 80rpx;">
		</view>
	</view>
</template>

<script>
	export default {
		name: "simulationLibrary",
		data() {
			return {
				act: -1,
				act1: -1,
				act2: -1,
				act3: -1,
				array: ['项目类型'],
				index: 0,
				url: '/assets/home/homeBG.png',
				allContentArr:[],
				itemArr:[],
				charactorArr:[],
				sceneArr:[],
			}
		},
		methods: {
			init() {
				console.log('simulationLibrary=',mydata_userInfo.UserID)
				uni.request({
					url: mydata_api + "/item/getitemlist",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 3,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"ItemType":""      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						// console.log('res=',res)
						let items =  res.data.Items;
						console.log('全部=',items)
						
						items.forEach(item=>{
						    let data = {};
						    data.src = item.Texture_Url;
						    data.name = item.Name;
						    data.fbx = item.Fbx_Url;
						    this.allContentArr.push(data);
							
						});
					}
				})
				//道具
				uni.request({
					url: mydata_api + "/item/getitemlist",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 5,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"ItemType":"道具"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						let items =  res.data.Items;
						console.log('道具=',items)
						
						items.forEach(item=>{
						    let data = {};
						    data.src = item.Texture_Url;
						    data.name = item.Name;
						    data.fbx = item.Fbx_Url;
						    this.itemArr.push(data);
						});
					}
				})
				
				//角色
				uni.request({
					url: mydata_api + "/item/getitemlist",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 5,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"ItemType":"角色"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						let items =  res.data.Items;
						console.log('角色=',items)
						
						items.forEach(item=>{
						    let data = {};
						    data.src = item.Texture_Url;
						    data.name = item.Name;
						    data.fbx = item.Fbx_Url;
						    this.charactorArr.push(data);
						});
					}
				})
				
				//场景
				uni.request({
					url: mydata_api + "/item/getitemlist",
					data: {
						"BeginNum" : 0,  //第一个
						"EndNum" : 5,   //最后一个
						"UserID": mydata_userInfo.UserID,
						"ItemType":"场景"      //道具 角色 场景  空为全部
					},
					method: "POST",
					dataType: "json",
					success: res => {
						let items =  res.data.Items;
						console.log('场景=',items)
						
						items.forEach(item=>{
						    let data = {};
						    data.src = item.Texture_Url;
						    data.name = item.Name;
						    data.fbx = item.Fbx_Url;
						    this.sceneArr.push(data);
						});
					}
				})
				
			},
			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('打开文档成功');
								}
							});
						}
					},
				});
			},
			bindPickerChange(e) {
				this.index = e.target.value
			},
			change(e) {
				if (this.act == e) {
					this.act = -1;
				} else {
					this.act = e;
				}
			
			},
			change1(e) {
				if (this.act1 == e) {
					this.act1 = -1;
				} else {
					this.act1 = e;
				}

			},
			change2(e) {
				if (this.act2 == e) {
					this.act2 = -1;
				} else {
					this.act2 = e;
				}
			},
			change3(e) {
				if (this.act3 == e) {
					this.act3 = -1;
				} else {
					this.act3 = e;
				}
			},
			preview(e) {
				// allContentArr:[],
				// itemArr:[],
				// charactorArr:[],
				// sceneArr:[],
				
				// console.log('this.allContentArr=',this.allContentArr);
				// console.log('typeof(e)=',typeof(e),'=',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;
				}
				
			},
			preview1(e) {
				
			},
			dowload1(e) {
				
			},
			preview2(e) {
				
			},
			dowload2(e) {
				
			},
			preview3(e) {
				
			},
			dowload3(e) {
				
			}
		}
	}
</script>

<style scoped>
	.s_container {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.s_logo {
		width: 100%;
		height: 400rpx;
	}




	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}

	.s_search {
		display: flex;
		justify-content: space-between;
	}

	.s_search_input {
		border: 2rpx solid #DDDDDD;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 60rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.s_content_container {
		padding: 40rpx 100rpx;
	}

	.s_btn_search {
		width: 130rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
	}

	.s_search_condition {
		background-color: #F9F9F9;
		margin-top: 40rpx;
		height: 100rpx;
		width: 100%;
	}

	.m_select {
		width: 300rpx;
		line-height: 80rpx;
	}

	.uni-list-cell-db {
		width: 300rpx;
		// height: 100rpx;
		line-height: 100rpx;
	}


	.uni-selector-select .uni-picker-item.selected {
		color: red;
	}

	.uni-input {
		text-align: center;
	}

	.s_search_condition {
		display: flex;
		justify-items: start;
	}

	.uni-list {
		position: relative;
	}

	.uni-list::after {
		content: url(../../assets/learning/icon_ylrz_arrow.png);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.s_image_text {
		margin-left: 20rpx;
	}

	.s_top_img {
		display: flex;
		justify-content: space-between;
		padding-bottom: 80rpx;
		border-bottom: 3rpx solid #D7D7D7;
	}

	.s_top_content {
		margin-top: 40rpx;
		width: 30%;
		position: relative;
	}

	.s_top_image {
		width: 100%;
	}

	.s_top_title {
		color: #fff;
		position: absolute;
		bottom: 40rpx;
		font-size: 2.0rem;
		line-height: 100rpx;
		font-weight: 500;
		width: 100%;
		text-align: left;
		margin-left: 50rpx;
	}

	.s_img_title {
		font-size: 36rpx;
		line-height: 200rpx;
		font-weight: bold;
	}

	/* .s_top_image {
		width: 400rpx;
	} */

	.s_img_image {
		display: flex;
		position: relative;
	}

	/* .s_image {
		margin-right: 40rpx; */

		/* height: 550rpx; */
	/* } */

	.s_img_1 {
		padding-bottom: 80rpx;
		border-bottom: 3rpx solid #D7D7D7;
	}

	.s_img_left {
		padding-right: 130rpx;
	}

	.s_img_content {
		position: relative;
		padding: 10rpx;
		/* display: flex; */
		/* justify-content: left; */
		/* 	justify-items: center; */
	}

	.s_image {
		width: 100%;
	}

	/* @media sscreen (min-with:1050px)  and (max-width: 1920px) and {
		
	} */

	.s_operation {
		/* 	position: absolute;
		bottom: -10rpx;
		left: 0;
		width: 100%; */
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	/* 	margin-right: 40rpx; */
		background-color: #dbd9d9;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.s_operation img {
		margin-left: 20rpx;
	}

	.v-left {
		position: absolute;
		width: 25rpx;
		height: 50rpx;
		right: -100rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.s_search_img_input {
		position: absolute;
		left: 20rpx;
		top: 50%;
		width: 30rpx;
		transform: translateY(-50%);
	}
</style>