You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
8.2 KiB
378 lines
8.2 KiB
<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="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>
|
|
</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 {
|
|
// this.getRoleList(item.guid,item.name);
|
|
uni.navigateTo({
|
|
url: '/subpkg/role/role?guid=' + item.guid + '&name=' + item.name
|
|
})
|
|
}
|
|
}
|
|
},
|
|
async getRoleList(guid,name) {
|
|
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/project/role/listAll',{sceneId: guid,name:""})
|
|
if (!res.success) return uni.$showMsg()
|
|
console.log(res.data )
|
|
if (res.data.length === 1) {
|
|
uni.navigateTo({
|
|
// url: '/subpkg/practice/practice?roleId='+res.data[0].roleId+'&sceneId='+guid
|
|
url: '/subpkg/practice/practice?roleId='+res.data[0].guid+'&sceneId='+guid
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/subpkg/role/role?guid=' + guid + '&name=' + name
|
|
})
|
|
}
|
|
},
|
|
close() {
|
|
this.showVerify = false
|
|
this.validateCode = ""
|
|
},
|
|
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'
|
|
})
|
|
}
|
|
// this.getRoleList(this.item.guid,this.item.name);
|
|
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;
|
|
}
|
|
|
|
.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>
|