From f2597c1793f7bad367fb60319fefe9a9b9c6fe40 Mon Sep 17 00:00:00 2001
From: "452061493@qq.com" <452061493@qq.com>
Date: Mon, 6 May 2024 15:13:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 subpkg/list/list.vue | 406 ++++++++++++++++++++++++-------------------
 1 file changed, 223 insertions(+), 183 deletions(-)

diff --git a/subpkg/list/list.vue b/subpkg/list/list.vue
index ae7c607..8e7bfc6 100644
--- a/subpkg/list/list.vue
+++ b/subpkg/list/list.vue
@@ -7,41 +7,44 @@
 		</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">
+			<!-- 轮播图 -->
+			<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>
+					<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>
-		<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 class="popup-layer-back" v-if="showVerify ==true">
+				<view class="verify">
+					<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>
+			<!-- 场景区域 -->
+			<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>
-		    <image :src="item.uploadPath" class="nav-img"></image>
-		  </view>
-		</view>
 		</view>
 	</view>
 </template>
@@ -49,22 +52,24 @@
 <script>
 	import navigation from "@/components/navigation/navigation.vue";
 	export default {
-		components: {navigation},
+		components: {
+			navigation
+		},
 		data() {
 			return {
-				queryObj:{
-					name:"",
-					isOpen:0,
-					pageNum:1,
-					pageSize:10
+				queryObj: {
+					name: "",
+					isOpen: 0,
+					pageNum: 1,
+					pageSize: 10
 				},
-				time:1,
-				total:0,
-				showVerify:false,
-				validateCode:null,
+				time: 1,
+				total: 0,
+				showVerify: false,
+				validateCode: null,
 				search: false,
-				isloading:false,
-				item:null,
+				isloading: false,
+				item: null,
 				//轮播图数据列表
 				swiperList: [],
 				//场景数据列表
@@ -78,7 +83,8 @@
 		},
 		onShow() {
 			if (this.time == 1) {
-				this.time = 2; return;
+				this.time = 2;
+				return;
 			}
 			this.getSwiperList();
 			this.getSceneListReload();
@@ -91,11 +97,13 @@
 			async getSwiperList() {
 				const {
 					data: res
-				} = await uni.$http.post('/small/customImage/listAll',{page:'site'})
+				} = 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
+
+				res.data.forEach(item => {
+					item.uploadPath = uni.$http.baseUrl + item.uploadPath
 				})
 				this.swiperList = res.data
 				// uni.$showMsg('数据请求成功！')
@@ -104,17 +112,17 @@
 				this.isloading = true
 				const {
 					data: res
-				} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj)
+				} = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)
 				this.isloading = false
-				
-				res.rows.forEach(item=>{
-					item.uploadPath = uni.$http.baseUrl +item.uploadPath
+
+				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.sceneList = [...this.sceneList, ...res.rows]
 				}
 				this.total = res.total
 				// uni.$showMsg('数据请求成功！')
@@ -122,60 +130,68 @@
 			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
+				} = 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){
+				if (item !== "") {
+					if (this.queryObj.isOpen == 1) {
 						this.showVerify = true
 						this.item = item
-					} else{
+					} else {
 						uni.navigateTo({
-						  url: '/subpkg/role/role?guid=' + item.guid+'&name='+item.name
+							url: '/subpkg/role/role?guid=' + item.guid + '&name=' + item.name
 						})
 					}
 				}
 			},
-			close(){
+			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'})
+			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
+					url: '/subpkg/role/role?guid=' + this.item.guid + '&name=' + this.item.name
 				})
 			},
-			input(e){
+			input(e) {
 				clearTimeout(this.timer)
-				
+
 				this.timer = setTimeout(() => {
-				  this.queryObj.name = e
-				  this.search = true
-				  this.getSceneList()
+					this.queryObj.name = e
+					this.search = true
+					this.getSceneList()
 				}, 500)
 			},
-			back(){
+			back() {
 				uni.navigateBack({
-					delta:1,//返回层数，2则上上页
+					delta: 1, //返回层数，2则上上页
 				})
 			},
-			onReachBottom(){
-				if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景')
-				if(this.isloading) return
+			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})
+				uni.pageScrollTo({
+					scrollTop: 120
+				})
 			}
 		}
 	}
@@ -183,26 +199,29 @@
 
 <style lang="scss">
 	@import url("@/static/base_css.css");
+
 	.wrap {
-	    height: 101%;
+		height: 101%;
 	}
-   swiper {
+
+	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 {
+
+		.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;
@@ -217,101 +236,122 @@
 			margin-bottom: 20rpx;
 			width: 100%;
 			height: 280rpx;
-		    border-radius: 20rpx;
+			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;
-				}
+			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;
 			}
-	   
-		 .nav-img {
-		   width: 100%;
-		   height: 100%;
-		 }
-   }
-   
-   .search {
-	   position: relative;
-	   top: 70rpx;
-   }
-   
-   .search-title{
-   		color: #67676a;
-   		margin: 3% 0 0 3%;
-    }  
-	
+
+			.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>
+
+	.popup-layer-back {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+	}
+
+	.verify {
+		position: absolute;
+		top: 45%;
+		left: 50%;
+		z-index: 9999;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		padding: 30rpx;
+		width: 400rpx;
+		height: 300rpx;
+		background-color: #c0b9e1;
+		border-radius: 10px;
+		opacity: 0.9;
+	}
+
+	.uni-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		bottom: 15%;
+		left: 10%;
+		width: 80%;
+		font-size: 32rpx;
+		background: #1367fe;
+		border-radius: 50rpx;
+		color: #fff;
+		height: 70rpx;
+		line-height: 70rpx;
+	}
+
+	.close-button {
+		position: absolute;
+		top: -60rpx;
+		right: -30rpx;
+		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;
+	}
+
+	/deep/ .uni-easyinput {
+		top: 15%;
+	}
+</style>
\ No newline at end of file