zdxtDrillProgram/subpkg/list/list.vue

<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="secbar"> <span class="back" @click="back()"></span>
		<view class="title">场景演练</view>
		</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)">
			<view class="nav-marsk">
				<view class="scename">消防演练</view>
				<view class="scecount">演练题目：5</view>
				<view class="scecount">演练人次：367</view>
			</view>
		    <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,
				search: false,
				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
				})
				if (this.search) {
					this.sceneList = res.rows
					this.search = false
				} else {
					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.queryObj.name = e
				  this.search = true
				  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");
	
	.mainwrap3 {
		top: 50rpx;
	}
	
   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: 62%;
		overflow-y: auto;
		.nav-item {
			position: relative;
			margin-bottom: 20rpx;
			width: 100%;
			height: 280rpx;
		    border-radius: 20rpx;
			overflow: hidden;
		}
		.nav-marsk {
				position: absolute;
				z-index: 10;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .45);
				color: #fff;
				line-height: 1.5;
				.scename {
					margin: 10% 0 2% 5%;
					font-size: 42rpx;
				}
				.scecount {
					margin: 1% 0 0 5%;
					font-size: 28rpx;
				}
			}
	   
		 .nav-img {
		   width: 100%;
		   height: 100%;
		 }
   }
   
   .search {
	   position: relative;
	   top: 70rpx;
   }
   
   .search-title{
   		color: #67676a;
   		margin: 3% 0 0 3%;
    }  
	
	.uni-searchbar__box {
		border: 1px solid #ddd;
	}
  
</style>