角色样式

subpkg/role/role.vue

@@ -3,12 +3,13 @@
 	<view class="wrap">
 	    <view class="secbar"> <span class="back" @click="back()"></span></view>
 	    <view class="mainwrap3"> 
-	      <img src="/static/images/bg_role.jpg" alt="" />
+	      <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 @click="startPractice(item)">{{item.name}}</span>
+				<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>
@@ -86,12 +87,27 @@
 				} = 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 = ''
+				} else if(item.choose === "false"){
+					this.$set(item, 'choose', 'true')
+					this.roleId = item.guid
+				}
+			},
 			startPractice(item) {
+			  if (this.roleId === "") {
+				  return uni.$showMsg('请先选择一个角色')
+			  }
 			  uni.navigateTo({
-			    url: '/subpkg/practice/practice?roleId='+item.guid
+			    url: '/subpkg/practice/practice?roleId='+this.roleId
 			  })
 			},
 			back(){
@@ -288,5 +304,9 @@
 	line-height: 3.0;
 	letter-spacing: 2px;
 }
+.change_color{
+     background:rgba(0, 153, 255, 1.0);
+ }
+ 
 
 </style>