kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

弹窗样式

h5_css
蟑螂恶霸 3 years ago
parent
17777b476f
commit
f2597c1793
1 changed files with 223 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 150
      subpkg/list/list.vue

150
subpkg/list/list.vue
View File

@ -23,14 +23,17 @@
<view class="search"> <view class="search">
<view class="search-title">请选择演练场景</view> <view class="search-title">请选择演练场景</view>
<view class="my-search-container"> <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> </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> <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> <button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button>
</view> </view>
</view>
<!-- 场景区域 --> <!-- 场景区域 -->
<view class="nav-list"> <view class="nav-list">
<view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)"> <view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
@ -49,22 +52,24 @@
<script> <script>
import navigation from "@/components/navigation/navigation.vue"; import navigation from "@/components/navigation/navigation.vue";
export default { export default {
components: {navigation}, components: {
navigation
},
data() { data() {
return { return {
queryObj:{ queryObj: {
name:"", name: "",
isOpen:0, isOpen: 0,
pageNum:1, pageNum: 1,
pageSize:10 pageSize: 10
}, },
time:1, time: 1,
total:0, total: 0,
showVerify:false, showVerify: false,
validateCode:null, validateCode: null,
search: false, search: false,
isloading:false, isloading: false,
item:null, item: null,
//轮播图数据列表 //轮播图数据列表
swiperList: [], swiperList: [],
//场景数据列表 //场景数据列表
@ -78,7 +83,8 @@
}, },
onShow() { onShow() {
if (this.time == 1) { if (this.time == 1) {
this.time = 2; return; this.time = 2;
return;
} }
this.getSwiperList(); this.getSwiperList();
this.getSceneListReload(); this.getSceneListReload();
@ -91,11 +97,13 @@
async getSwiperList() { async getSwiperList() {
const { const {
data: res 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() if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{ res.data.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
this.swiperList = res.data this.swiperList = res.data
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
@ -104,17 +112,17 @@
this.isloading = true this.isloading = true
const { const {
data: res 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 this.isloading = false
res.rows.forEach(item=>{ res.rows.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
if (this.search) { if (this.search) {
this.sceneList = res.rows this.sceneList = res.rows
this.search = false this.search = false
} else { } else {
this.sceneList =[...this.sceneList,...res.rows] this.sceneList = [...this.sceneList, ...res.rows]
} }
this.total = res.total this.total = res.total
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
@ -122,41 +130,47 @@
async getSceneListReload() { async getSceneListReload() {
const { const {
data: res 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=>{ res.rows.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
this.sceneList = res.rows this.sceneList = res.rows
this.total = res.total this.total = res.total
// uni.$showMsg('数据请求成功！') // uni.$showMsg('数据请求成功！')
}, },
navClickHandler(item) { navClickHandler(item) {
if(item !== ""){ if (item !== "") {
if(this.queryObj.isOpen == 1){ if (this.queryObj.isOpen == 1) {
this.showVerify = true this.showVerify = true
this.item = item this.item = item
} else{ } else {
uni.navigateTo({ 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 this.showVerify = false
}, },
verifyMethod(){ verifyMethod() {
if (this.validateCode == null){ if (this.validateCode == null) {
return uni.showToast({title:'场景码不能为空',icon:'none'}) return uni.showToast({
} else if(parseInt(this.validateCode)!== this.item.code){ title: '场景码不能为空',
return uni.showToast({title:'场景码错误',icon:'none'}) icon: 'none'
})
} else if (parseInt(this.validateCode) !== this.item.code) {
return uni.showToast({
title: '场景码错误',
icon: 'none'
})
} }
uni.navigateTo({ 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) clearTimeout(this.timer)
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
@ -165,17 +179,19 @@
this.getSceneList() this.getSceneList()
}, 500) }, 500)
}, },
back(){ back() {
uni.navigateBack({ uni.navigateBack({
delta:1,//返回层数，2则上上页 delta: 1, //返回层数，2则上上页
}) })
}, },
onReachBottom(){ onReachBottom() {
if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景') if (this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景')
if(this.isloading) return if (this.isloading) return
this.queryObj.pageNum++ this.queryObj.pageNum++
this.getSceneList() this.getSceneList()
uni.pageScrollTo({scrollTop: 120}) uni.pageScrollTo({
scrollTop: 120
})
} }
} }
} }
@ -183,9 +199,11 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.wrap { .wrap {
height: 101%; height: 101%;
} }
swiper { swiper {
position: relative; position: relative;
top: 3vh; top: 3vh;
@ -202,6 +220,7 @@
border-radius: 20rpx; border-radius: 20rpx;
} }
} }
.nav-list { .nav-list {
position: relative; position: relative;
top: 50rpx; top: 50rpx;
@ -220,6 +239,7 @@
border-radius: 20rpx; border-radius: 20rpx;
overflow: hidden; overflow: hidden;
} }
.nav-marsk { .nav-marsk {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
@ -228,10 +248,12 @@
background-color: rgba(0, 0, 0, .45); background-color: rgba(0, 0, 0, .45);
color: #fff; color: #fff;
line-height: 1.5; line-height: 1.5;
.scename { .scename {
margin: 10% 0 2% 5%; margin: 10% 0 2% 5%;
font-size: 42rpx; font-size: 42rpx;
} }
.scecount { .scecount {
margin: 1% 0 0 5%; margin: 1% 0 0 5%;
font-size: 28rpx; font-size: 28rpx;
@ -249,7 +271,7 @@
top: 70rpx; top: 70rpx;
} }
.search-title{ .search-title {
color: #67676a; color: #67676a;
margin: 3% 0 0 3%; margin: 3% 0 0 3%;
} }
@ -257,38 +279,52 @@
.uni-searchbar__box { .uni-searchbar__box {
border: 1px solid #ddd; 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 { .verify {
border-radius: 10px;
background-color: #c0b9e1;
opacity: 0.9;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: 50%; left: 50%;
z-index: 9999;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 30rpx;
width: 400rpx; width: 400rpx;
height: 300rpx; height: 300rpx;
padding: 30rpx; background-color: #c0b9e1;
z-index: 9999; border-radius: 10px;
opacity: 0.9;
} }
.uni-button { .uni-button {
margin-top: 40rpx;
font-size: 30rpx;
width: 100%;
height: 70rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute;
bottom: 15%;
left: 10%;
width: 80%;
font-size: 32rpx;
background: #1367fe; background: #1367fe;
border-radius: 50rpx; border-radius: 50rpx;
color: #fff; color: #fff;
height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
} }
.close-button { .close-button {
position: absolute; position: absolute;
top: -60rpx; top: -60rpx;
right: -10rpx; right: -30rpx;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
background-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .5);
@ -314,4 +350,8 @@
height: 4rpx; height: 4rpx;
width: 24rpx; width: 24rpx;
} }
/deep/ .uni-easyinput {
top: 15%;
}
</style> </style>
Write Preview
Loading…
Cancel
Save