|
|
|
@ -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> |
