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.
319 lines
7.3 KiB
319 lines
7.3 KiB
<template>
|
|
<view class="role-container">
|
|
<view class="wrap">
|
|
<view class="secbar"> <span class="back" @click="back()"></span></view>
|
|
<view class="mainwrap3">
|
|
<img src="/static/images/bg_role.jpg" alt=""/>
|
|
<view class="role_wrap">
|
|
<view class="<strong>contit</strong>">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view>
|
|
<view class="role_box">
|
|
<block class="role-item" v-for="(item,i) in roleList" :key="i">
|
|
<span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)">{{item.name}}</span>
|
|
<!-- <span class="spanitem" @click="chooseRole(item)">{{item.name}}</span> -->
|
|
</block>
|
|
</view>
|
|
<view class="more_role" @click="showMoreRole()"><a>更多角色</a></view>
|
|
</view>
|
|
|
|
<!-- <view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> -->
|
|
<view :class="practice"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view>
|
|
</view>
|
|
|
|
<view class="cnote">题目来源：深圳市******有限公司</view>
|
|
</view>
|
|
|
|
<view class="maskbox"></view>
|
|
<view class="popbox" v-if="this.showMore == 1">
|
|
<view class="poptit">选择角色<a class="closea"></a></view>
|
|
<view class="subsearch">
|
|
<input class="msearchbox" placeholder="搜索角色" name="keyword" id="" onclick="">
|
|
</view>
|
|
<view class="role_cont">
|
|
<h5>角色分类一</h5>
|
|
<view class="role_item">
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
</view>
|
|
<h5>角色分类二</h5>
|
|
<view class="role_item">
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
</view>
|
|
<h5>角色分类三</h5>
|
|
<view class="role_item">
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
<span>角色1</span> <span>角色2</span> <span>角色3</span> <span>角色4</span> <span>角色5</span>
|
|
</view>
|
|
</view>
|
|
<view class="onebtn">确定</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view>
|
|
<view class="role-list">
|
|
<view class="role-item" v-for="(item,i) in roleList" :key="i" @click="navClickHandler(item)">
|
|
<image :src="item" class="scene-img"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
showMore: 0,
|
|
sceneId:"",
|
|
sceneName:"",
|
|
roleId:"",
|
|
roleList:[],
|
|
practice:"startbtn"
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.sceneId = options.guid
|
|
this.sceneName = options.name
|
|
this.getSwiperList();
|
|
},
|
|
methods: {
|
|
showMoreRole(){
|
|
this.showMore = 1
|
|
},
|
|
async getSwiperList() {
|
|
|
|
const {
|
|
data: res
|
|
} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId})
|
|
if (!res.success) return uni.$showMsg()
|
|
|
|
res.data.forEach(item=>{
|
|
this.$set(item, 'choose', 'false')
|
|
})
|
|
this.roleList = res.data
|
|
//uni.$showMsg('数据请求成功！')
|
|
},
|
|
chooseRole(item){
|
|
if (item.choose === "true") {
|
|
this.$set(item, 'choose', 'false')
|
|
this.roleId = ''
|
|
this.practice = 'startbtn'
|
|
} else if(item.choose === "false"){
|
|
this.roleList.forEach(item=>{this.$set(item, 'choose', 'false')})
|
|
this.$set(item, 'choose', 'true')
|
|
this.roleId = item.guid
|
|
this.practice = 'startbtn.active'
|
|
}
|
|
},
|
|
startPractice(item) {
|
|
if (this.roleId === "") {
|
|
return uni.$showMsg('请先选择一个角色')
|
|
}
|
|
uni.navigateTo({
|
|
url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
|
|
//url: '/subpkg/practice/respractice?roleId='+this.roleId
|
|
})
|
|
},
|
|
back(){
|
|
uni.navigateBack({
|
|
delta:1,//返回层数，2则上上页
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import url("@/static/base_css.css");
|
|
.role-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.secbar {
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.secbar ._span.back {
|
|
top: 50px;
|
|
}
|
|
.mainwrap3 {
|
|
top: 0;
|
|
height: calc(100% - 70px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mainwrap3 > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.role_wrap {
|
|
position: absolute;
|
|
top: 47.5%;
|
|
margin: 0 3%;
|
|
width: 94%;
|
|
}
|
|
|
|
.role_box {
|
|
margin: 1% 0 2% 4%;
|
|
width: 96%;
|
|
}
|
|
|
|
.role_box span {
|
|
display: inline-block;
|
|
margin: 1% 0 0 3%;
|
|
padding: 1.5% 4.5%;
|
|
border: 1px solid #1367fe;
|
|
border-radius: 8px;
|
|
color: #1367fe;
|
|
}
|
|
|
|
.role_box span.seled {
|
|
background: #1367fe;
|
|
color: #fff;
|
|
}
|
|
|
|
.more_role {
|
|
margin: 5% 3%;
|
|
width: 94%;
|
|
height: 3rem;
|
|
border-bottom: 1px dotted #96b9fb;
|
|
text-align: center;
|
|
}
|
|
|
|
.more_role a {
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
padding: 2% 8% 2% 3%;
|
|
// background: #a6c5fd url(/static/images/arrow-b.png) no-repeat right 10% center;
|
|
background-size: auto 40%;
|
|
border-radius: 8px;
|
|
color: #2e6ddd;
|
|
}
|
|
|
|
.startbtn {
|
|
position: relative;
|
|
z-index: 1;
|
|
bottom: 35%;
|
|
width: 100%;
|
|
height: 30%;
|
|
background:no-repeat 47.5% center;
|
|
background-size: 60% auto;
|
|
text-align: center;
|
|
opacity: .5;
|
|
}
|
|
|
|
.startbtn.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.startbtn a {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 15%;
|
|
width: 30%;
|
|
height: 40%;
|
|
line-height: 30rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cnote {
|
|
position: absolute;
|
|
bottom: 3%;
|
|
width: 100%;
|
|
color: rgba(255, 255, 255, .5);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.maskbox {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.popbox {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 10001;
|
|
bottom: 0;
|
|
width: 100%;
|
|
max-height: 80%;
|
|
min-height: 50%;
|
|
background: #fff;
|
|
border-radius: 20px 20px 0 0;
|
|
}
|
|
|
|
.poptit {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 3rem;
|
|
line-height: 2.5;
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid #f3f4f5;
|
|
}
|
|
|
|
.poptit a.closea {
|
|
position: absolute;
|
|
top: 20%;
|
|
right: 1rem;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
// background: url(/static/images/icon_60add.png) no-repeat;
|
|
background-size: 100%;
|
|
transform: rotateZ(45deg);
|
|
}
|
|
|
|
.role_cont h5 {
|
|
margin: 0 3% 2%;
|
|
font-size: 1.0rem;
|
|
}
|
|
|
|
.role_item {
|
|
margin: 1% 0 5% 0;
|
|
}
|
|
|
|
.role_item span {
|
|
display: inline-block;
|
|
margin: 1% 0 2% 3%;
|
|
padding: 1.5% 3.5%;
|
|
background: #f2f3f4;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
color: #4c4c4c;
|
|
}
|
|
|
|
.role_item span.selrole {
|
|
background: #e9f2fb;
|
|
color: #1367fe;
|
|
}
|
|
|
|
.popbox .onebtn {
|
|
position: relative;
|
|
bottom: 1vw;
|
|
background: #1367fe;
|
|
width: 94%;
|
|
border-radius: 30px;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin: 3% 3%;
|
|
line-height: 3.0;
|
|
letter-spacing: 2px;
|
|
}
|
|
.change_color {
|
|
background: #1367fe;
|
|
color: #fff !important;
|
|
}
|
|
|
|
|
|
</style>
|