zdxtDrillProgram/subpkg/role/role.vue

<template>
<view class="role-container">
	<view class="wrap">
		<view class="stabar"></view>
	    <view class="secbar"> <label class="back" @click="back()"></label></view>
	    <view class="mainwrap3"> 
	      <img src="/static/images/bg_role.jpg" alt=""/>
	      <view class="role_wrap">
	        <view class="contit">请选择您在“<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="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
			    // url: '/subpkg/respractice/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%;	
}

.mainwrap3 {
    top: 90rpx;
}

.mainwrap3 > img {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.role_wrap {
	position: absolute;
	top: 47.5%;
	margin: 0 3%;
	width: 94%;
}

.contit {
	margin: 3% 0;
}

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