更多角色样式

subpkg/role/role.vue

@@ -8,13 +8,12 @@
 	        <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="item.choose === 'true' ? 'change_color':''"  @click="chooseRole(item)" v-if="i<3">{{item.name}}</span>
 			   <!-- <span class="spanitem"  @click="chooseRole(item)">{{item.name}}</span> -->
 			   </block>
 			</view>
-	        <view class="more_role" @click="showMoreRole()"><a>更多角色</a></view>
+	        <view class="more_role" @click="showMoreRole()" v-if="showButton"><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>
@@ -23,41 +22,23 @@
 	</view>
 	
 	<view class="maskbox"></view>
-	<view class="popbox"  v-if="this.showMore == 1">
+	<view class="popbox" v-if="showMore==1">
 	   <view class="poptit">选择角色<a class="closea"></a></view>
 	   <view class="subsearch">
-	        <input class="msearchbox" placeholder="搜索角色" name="keyword" id="" onclick="">
+		    <!-- <uni-search-bar class="msearchbox" @confirm="search" @input="input" cancel-button="none"></uni-search-bar> -->
+	        <input class="msearchbox" placeholder="搜索角色" v-model="roleName" id="" onclick="" @input="input()">
 	   </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>
+	      <!-- <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>
+			 <block  v-for="(item,i) in roleList" :key="i">
+				<span  :class="item.choose === 'true' ? 'change_color':''"  @click="chooseRole(item)">{{item.name}}</span>
+			 </block>
 	       </view>
 	   </view>
-	   <view class="onebtn">确定</view>
+	   <view class="onebtn" @click="close()">确定</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>
@@ -65,9 +46,11 @@
 
 		data() {
 			return {
+			   showButton: false,
 			   showMore: 0,
 			   sceneId:"",
 			   sceneName:"",
+			   roleName:"",
 			   roleId:"",
 			   roleList:[],
 			   practice:"startbtn"
@@ -76,19 +59,19 @@
 		onLoad(options) {
 		  this.sceneId = options.guid
 		  this.sceneName = options.name
-		  this.getSwiperList();
+		  this.getRoleList();
 		},
 		methods: {
-			showMoreRole(){
-				this.showMore = 1
-			},
-			async getSwiperList() {
+			async getRoleList() {
 			    
 				const {
 					data: res
-				} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId})
+				} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId,name:this.roleName})
 				if (!res.success) return uni.$showMsg()
 			
+			   if (res.data.length > 3) {
+				   this.showButton = true
+			   }
 			   res.data.forEach(item=>{
 				 this.$set(item, 'choose', 'false')
 			   })
@@ -121,6 +104,21 @@
 					delta:1,//返回层数，2则上上页
 				})
 			},
+			showMoreRole(){
+				this.showMore = 1
+				this.getRoleList()
+			},
+			close() {
+				this.showMore = 0
+				this.roleName = ""
+			},
+			input(){
+				clearTimeout(this.timer)
+				
+				this.timer = setTimeout(() => {
+				  this.getRoleList()
+				}, 500)
+			},
 		}
 	}
 </script>
@@ -177,7 +175,7 @@
 }
 
 .more_role {
-    margin: 5% 3%;
+    margin: 2% 3%;
     width: 94%;
     height: 3rem;
     border-bottom: 1px dotted #96b9fb;
@@ -241,7 +239,7 @@
 }
 
 .popbox {
-	display: none;
+	// display: none;
 	position: absolute;
 	z-index: 10001;
 	bottom: 0;