弹窗样式

subpkg/list/list.vue

@@ -23,14 +23,17 @@
 			<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>
+					<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" > 
+			<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="请输入场景码"/>
+					<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)">
@@ -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,41 +130,47 @@
 			async getSceneListReload() {
 				const {
 					data: res
-				} = await uni.$http.post('/small/scene/manage/listApp',this.queryObj)
+				} = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)
 
-				res.rows.forEach(item=>{
-					item.uploadPath = uni.$http.baseUrl +item.uploadPath
+				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(() => {
@@ -165,17 +179,19 @@
 					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,9 +199,11 @@
 
 <style lang="scss">
 	@import url("@/static/base_css.css");
+
 	.wrap {
 		height: 101%;
 	}
+
 	swiper {
 		position: relative;
 		top: 3vh;
@@ -202,6 +220,7 @@
 			border-radius: 20rpx;
 		}
 	}
+
 	.nav-list {
 		position: relative;
 		top: 50rpx;
@@ -220,6 +239,7 @@
 			border-radius: 20rpx;
 			overflow: hidden;
 		}
+
 		.nav-marsk {
 			position: absolute;
 			z-index: 10;
@@ -228,10 +248,12 @@
 			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;
@@ -249,7 +271,7 @@
 		top: 70rpx;
 	}
 
-   .search-title{
+	.search-title {
 		color: #67676a;
 		margin: 3% 0 0 3%;
 	}
@@ -257,38 +279,52 @@
 	.uni-searchbar__box {
 		border: 1px solid #ddd;
 	}
+
+	.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 {
-    border-radius: 10px;
-	background-color: #c0b9e1;
-	opacity: 0.9;
 		position: absolute;
 		top: 45%;
 		left: 50%;
+		z-index: 9999;
 		-webkit-transform: translate(-50%, -50%);
 		transform: translate(-50%, -50%);
+		padding: 30rpx;
 		width: 400rpx;
 		height: 300rpx;
-  	padding: 30rpx;
-  	z-index: 9999;
+		background-color: #c0b9e1;
+		border-radius: 10px;
+		opacity: 0.9;
 	}
 
 	.uni-button {
-	margin-top: 40rpx;
-  	font-size: 30rpx;
-  	width: 100%;
-  	height: 70rpx;
 		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: -10rpx;
+		right: -30rpx;
 		width: 50rpx;
 		height: 50rpx;
 		background-color: rgba(255, 255, 255, .5);
@@ -314,4 +350,8 @@
 		height: 4rpx;
 		width: 24rpx;
 	}
+
+	/deep/ .uni-easyinput {
+		top: 15%;
+	}
 </style>