zdxtDrillProgram/subpkg/list/list.vue

<template>
	<view class="scene-container">
		<view class="secbar"> <span class="back" @click="back()"></span></view>
		<view class="mainwrap3">
		<!-- 轮播图 -->
		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<!-- <view class="swiper-item">
					<image :src="item.image_src"></image>
				</view> -->
				<navigator class="swiper-item">
					<image :src="item"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 搜索 -->
		<!-- <my-search></my-search> -->
		<view class="search">
			<view class="search-title">请选择演练场景</view>
			<view class="my-search-container">
			  <uni-search-bar class="my-search-box" @confirm="search" @input="input" cancel-button="none"></uni-search-bar>
			</view>
		</view>
		<!-- 场景区域 -->
		<view class="nav-list">
		  <view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
		    <image :src="item.uploadPath" class="nav-img"></image>
		  </view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj:{
					name:"",
					pageNum:1,
					pageSize:10
				},
				total:0,
				isloading:false,
				//轮播图数据列表
				swiperList: [],
				//场景数据列表
				sceneList: []
			};
		},
		onLoad() {
			this.getSwiperList();
			this.getSceneList()
		},
		methods: {
			
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll',{page:'site'})
				if (!res.success) return uni.$showMsg()
		
				res.data.forEach(item=>{
					item.uploadPath = uni.$http.baseUrl +item.uploadPath
					this.swiperList.push(item.uploadPath)
				})
				
				// uni.$showMsg('数据请求成功！')
			},
			async getSceneList() {
				this.isloading = true
				const {
					data: res
				} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj)
				this.isloading = false
				
				res.rows.forEach(item=>{
					item.uploadPath = uni.$http.baseUrl +item.uploadPath
				})
				this.sceneList =[...this.sceneList,...res.rows]
				this.total = res.total
				// uni.$showMsg('数据请求成功！')
			},
			navClickHandler(item) {
				if(item !== ""){
					uni.navigateTo({
					  url: '/subpkg/role/role?guid=' + item.guid+'&name='+item.name
					})
				}
			},
			input(e){
				clearTimeout(this.timer)
				
				this.timer = setTimeout(() => {
				  this.name = e
				  this.getSceneList()
				}, 500)
			},
			back(){
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			},
			onReachBottom(){
				if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景')
				if(this.isloading) return
				this.queryObj.pageNum++
				this.getSceneList()
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	.scene-container {
		width: 100%;
		height: 100%;	
	}
	.secbar {
	    top: 0;
	    z-index: 1;
	}
	.secbar ._span.back {
	    top: 50px;
	}
	.mainwrap3 {
		top: 0;
		height: calc(100% - 200rpx);
		overflow: hidden;
	}
	
   swiper {
	   position: relative;
	   top: 30px;
	   margin: 0 3%;
	   width: 94%;
   	   height: 280rpx;
   
   	.swiper-item,
   	image {
   		width: 99.8%;
		margin-left: 0.1%;
   		height: 100%;
		align-items: center;
   		border-radius: 10px;
   	}
   }
   .nav-list {
		position: relative;
		top: 50rpx;
		justify-content: space-around;
		margin: 4% 3%;
		width: 94%;
		height: 65%;
		overflow-y: auto;
	   
     .nav-img {
       width: 100%;
       height: 240rpx;
	   margin-bottom: 10rpx;
	   border-radius: 10px;
     }
   }
   
   .search {
	   position: relative;
	   top: 70rpx;
   }
   
   .search-title{
   		font-family: 'Courier New', Courier, monospace;
   		color: #67676a;
   		margin-left: 8px;
   		margin-top: 6px;
    }  
  
</style>