zdxtDrillProgram/subpkg/list/list.vue

<template>
	<view class="wrap">
		<view class="stabar"></view>
		<!-- <view class="secbar" :style="{top:getWXStatusHeight()}"> 
			<label class="back" @click="back()"></label>
			<view class="title">场景演练</view>
		</view> -->
		<navigation title="场景演练"></navigation>
		<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.uploadPath"></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="verify" v-if="showVerify ==true" > 
			<label @click="close()" class="close-button"></label>
		    <uni-easyinput type="text" v-model="validateCode" placeholder="请输入场景码"/>
			<button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button>
		</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">{{item.name}}</view>
				<view class="scecount">演练角色：{{item.roleTotal}}</view>
				<view class="scecount">演练人次：{{item.useTotal}}</view>
			</view>
		    <image :src="item.uploadPath" class="nav-img"></image>
		  </view>
		</view>
		</view>
	</view>
</template>

<script>
	import navigation from "@/components/navigation/navigation.vue";
	export default {
		components: {navigation},
		data() {
			return {
				queryObj:{
					name:"",
					isOpen:0,
					pageNum:1,
					pageSize:10
				},
				time:1,
				total:0,
				showVerify:false,
				validateCode:null,
				search: false,
				isloading:false,
				item:null,
				//轮播图数据列表
				swiperList: [],
				//场景数据列表
				sceneList: [],
			};
		},
		onLoad(options) {
			this.queryObj.isOpen = options.isOpen
			this.getSwiperList();
			this.getSceneList();
		},
		onShow() {
			if (this.time == 1) {
				this.time = 2; return;
			}
			this.getSwiperList();
			this.getSceneListReload();
		},
		onPullDownRefresh() {
			this.getSwiperList();
			this.getSceneListReload();
		},
		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 = res.data
				// 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('数据请求成功！')
			},
			async getSceneListReload() {
				const {
					data: res
				} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj)
				
				res.rows.forEach(item=>{
					item.uploadPath = uni.$http.baseUrl +item.uploadPath
				})
				this.sceneList = res.rows
				this.total = res.total
				// uni.$showMsg('数据请求成功！')
			},
			navClickHandler(item) {
				if(item !== ""){
					if(this.queryObj.isOpen == 1){
						this.showVerify = true
						this.item = item
					} else{
						uni.navigateTo({
						  url: '/subpkg/role/role?guid=' + item.guid+'&name='+item.name
						})
					}
				}
			},
			close(){
				this.showVerify = false
			},
			verifyMethod(){
				if (this.validateCode == null){
					return uni.showToast({title:'场景码不能为空',icon:'none'})
				} else if(parseInt(this.validateCode)!== this.item.code){
					return uni.showToast({title:'场景码错误',icon:'none'})
				}
				uni.navigateTo({
				  url: '/subpkg/role/role?guid=' + this.item.guid+'&name='+this.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()
				uni.pageScrollTo({scrollTop: 120})
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	.wrap {
	    height: 101%;
	}
   swiper {
		position: relative;
		top: 3vh;
		margin: 0 3%;
		width: 94%;
		height: 18vh;
   
   	.swiper-item,
   	image {
   		width: 99.8%;
		margin-left: 0.1%;
   		height: 100%;
		align-items: center;
   		border-radius: 20rpx;
   	}
   }
   .nav-list {
		position: relative;
		top: 50rpx;
		justify-content: space-around;
		margin: 4% 3%;
		padding: 0 0 8%;
		width: 94%;
		height: 52vh;
		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;
	}
   .verify {
    border-radius: 10px;
	background-color: #c0b9e1;
	opacity: 0.9;
  	position: absolute;
  	top: 45%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	width: 400rpx;
  	height: 300rpx;
  	padding: 30rpx;
  	z-index: 9999;
  }
  
  .uni-button {
	margin-top: 40rpx;
  	font-size: 30rpx;
  	width: 100%;
  	height: 70rpx;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: #1367fe;
  	border-radius: 50rpx;
  	color: #fff;
  	line-height: 70rpx;
  }
  .close-button {
  	position: absolute;
  	top: -60rpx;
  	right: -10rpx;
  	width: 50rpx;
  	height: 50rpx;
  	background-color: rgba(255, 255, 255, .5);
  	border: 1rpx solid rgba(255, 255, 255, .7);
  	border-radius: 50%;
  	transform: rotate(45deg);
  }
  
  .close-button:before,
  .close-button:after {
  	content: '';
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	background: #333;
  	border-radius: 50%;
  	transform: translate(-50%, -50%);
  	height: 24rpx;
  	width: 4rpx;
  }
  
  .close-button:after {
  	height: 4rpx;
  	width: 24rpx;
  }
</style>