详情页面角色筛选

pages/mine/details2.vue

@@ -11,10 +11,15 @@
 			</view>
 			<view class="headboxbott">
 				<view class="headovfu">
-					<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="roleindex"
+<!-- 					<u-tabs ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="roleindex"
 						@change="tapspagek" inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist"
 						:is-scroll="true">
-					</u-tabs-swiper>
+					</u-tabs> -->
+					<block v-for="(item,index) in tablist">
+						<view class="mytab"  :key="index" @click="tapspagek(item, index)">
+							<view class="tab-item" :class="{tabActive: item.select}">{{item.name}}</view>
+						</view>
+					</block>
 				</view>
 				<view class="headpade">
 					<view class="biaoji" @tap="tagtap()">标记</view>
@@ -99,7 +104,7 @@
 				</view>
 				<view class="fill"></view>
 				<!-- audioinfo2 -->
-				<view class="tmmchen">
+				<view class="tmmchen" v-if="Menulistisshow">
 					<image @click="Receivedetailsabouttab('Receivedetailsabout')" src="../../static/images/allimg.png"
 						mode=""></image>
 					<view @click="Receivedetailsabouttab('Receivedetailsabout')">更多</view>
@@ -107,12 +112,12 @@
 						<view v-if="eqLog!=-1" @click="eqLogClick()" style="line-height: 70rpx;margin-top: 10rpx;">设备日志
 						</view>
 						<view @click="Receivetap()" style="line-height: 70rpx;margin-top: 10rpx;">接待信息</view>
-						<view v-if="Menulistisshow==true" @click="alllogo()" style="line-height:70rpx;">
+						<view @click="alllogo()" style="line-height:70rpx;">
 							{{userlistobj.validInvalidName}}
 						</view>
 					</view>
 				</view>
-				<view class="tmmchen" @click="Receivetap()" v-if="Menulistisshow==false">
+				<view class="tmmchen" @click="Receivetap()" v-else>
 					<image @click="Receivedetailsabouttab('Receivedetailsabout')"
 						src="../../static/images/audioinfo2.png" mode=""></image>
 					<view @click="Receivedetailsabouttab('Receivedetailsabout')">接待信息</view>
@@ -1090,7 +1095,8 @@
 			// 添加角色
 			addRole() {
 				this.tablist.push({
-					name: String.fromCharCode(this.tablist.length + 64)
+					name: String.fromCharCode(this.tablist.length + 64),
+					select: false
 				})
 			},
 
@@ -1141,11 +1147,13 @@
 				})
 			},
 			//分角色
-			tapspagek(index) {
-				this.roleindex = index;
-				this.newluyinList = [];
-				this.fenjiaoseunfo()
-				this.$forceUpdate()
+			tapspagek(item, index) {
+				console.log(item, index)
+				item.select = !item.select
+				// this.roleindex = index;
+				// this.newluyinList = [];
+				// this.fenjiaoseunfo()
+				// this.$forceUpdate()
 			},
 			//------------------------------------分角色标记刷新
 			fenjiaoseunfo() {
@@ -1183,11 +1191,13 @@
 						for (var i = 0; i <= data.data.data.speakerNum; i++) {
 							if (i === 0) {
 								this.tablist.push({
-									name: '全部'
+									name: '全部',
+									select: true
 								})
 							} else {
 								this.tablist.push({
-									name: String.fromCharCode(i + 64)
+									name: String.fromCharCode(i + 64),
+									select: false
 								})
 							}
 						}
@@ -1759,11 +1769,13 @@
 						for (var i = 0; i <= data.data.data.speakerNum; i++) {
 							if (i === 0) {
 								this.tablist.push({
-									name: '全部'
+									name: '全部',
+									select: true,
 								})
 							} else {
 								this.tablist.push({
-									name: String.fromCharCode(i + 64)
+									name: String.fromCharCode(i + 64),
+									select: false,
 								})
 							}
 						}
@@ -2082,6 +2094,33 @@
 			flex: 1;
 			height: 88rpx;
 			overflow: hidden;
+			display: flex;
+			align-items: center;
+
+			.mytab {
+				margin-left: 20rpx;
+				flex-shrink: 0;
+
+				.tab-item {
+					padding: 0 20rpx;
+					height: 52rpx;
+					line-height: 52rpx;
+					background: #FFFFFF;
+					border-radius: 8rpx;
+					border: 1rpx solid #E0E0E0;
+					font-size: 26rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #999999;
+
+				}
+
+				.tabActive {
+					background: #2671E2;
+					color: #fff;
+				}
+			}
+
 		}
 
 		.headpade {