uni-app switches based on radio button page

<template>
	<view class="vCheckBreakdown">

		<view class="divider-class"></view>
		<view class="form-class">

			<view class="end-title">
				<view>类型</view>

				<view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
					<view class="shar-item-ckb" @click="timedata(index)">
						<uni-icons :type="index == iconSelect?'circle-filled':'circle'" :size="20" color="#05928B">
						</uni-icons>
						{
   
   {item}}
					</view>

				</view>
			</view>
			<view class="end-cont" :class="{dis:btnnum == 4}">
				
				<digitalBusiness @clickIcon="clickIcon"  ref="digitalBusiness"></digitalBusiness>

			</view>
			<view class="end-cont" :class="{dis:btnnum == 1}">
				
				<broadbandServices @clickIcon="clickIcon" ref="broadbandServices"></broadbandServices>
				
			</view>
			<view class="end-cont" :class="{dis:btnnum == 2}">
				<interactiveBusiness @clickIcon="clickIcon" ref="interactiveBusiness"></interactiveBusiness>
			</view>
			<view class="query-btn display-flex-allcenter-column"  @click="queGatewayFault">提交</view>

		</view>


		


	</view>
</template>

<script>
	import broadbandServices from './components/broadbandServices.vue';
	import digitalBusiness from './components/digitalBusiness.vue';
	import interactiveBusiness from './components/interactiveBusiness.vue';


	export default {
      
      
		data() {
      
      
			return {
      
      
				
				
				btnnum: 0,
				items: ['数字业务', '宽带业务', '互动业务'],
				count: "",
				iconSelect: 0,
				icon: "circle-filled",
				permark:1,
			};
		},

		beforeCreate() {
      
      
			uni.$on('localCustSuccess', () => {
      
      
				this.initData();
			});
		},

		created() {
      
      
			if (!this.custInfo) {
      
      
				this.initData();
			}
		},

		//标题栏点击
		onNavigationBarButtonTap: function(obj) {
      
      
			if (obj.index == 0 && window.baseAppJs) {
      
      
				window.baseAppJs.back();
			} else {
      
      
				window.history.back()
			}
		},

		components: {
      
      
			broadbandServices,
			digitalBusiness,
			interactiveBusiness
		},

		computed: {
      
      

		},

		watch: {
      
      
			servs: {
      
      
				handler(newVal) {
      
      
					if (newVal && newVal.length > 0) {
      
      
						this.serv = newVal[this.currentDevIndex];
					}
				},
				// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
				immediate: true
			},
			currentDevIndex: {
      
      
				handler(newVal) {
      
      
					if (this.servs && this.servs.length > 0) {
      
      
						this.serv = this.servs[newVal];
					}
				}
			},
			serv: {
      
      
				handler(newVal) {
      
      
					this.labels = this.getLabels(newVal);
					this.equipments = this.getEquipments(newVal);
				}
			}
		},

		methods: {
      
      
			initData() {
      
      


			},

			getLabels(servItem) {
      
      
				return servItem.permark.map((permarkItem, index) => {
      
      
					return {
      
      
						labelName: permarkItem.value || '未知业务'
					};
				});
			},

			
            // 下面两个方法是切换页面方法
			change(e) {
      
      
				this.count = e
			 this.btnnum = e
				console.log(this.count)
			},
			timedata(id) {
      
      
				this.iconSelect = id;
				console.log("timedata===" + id)
				
			},
			
			

		}
	};
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
      
      
		display: flex;
		padding-top: 20rpx;
	}

	.end-title view {
      
      
		flex-grow: 1;
		text-align: center;
	}

	.end-cont {
      
      
		display: none;
		background: #C8C7CC;
	}

	.btna {
      
      
		color: #FFFFFF;
		background: #ffffff;
	}

	.dis {
      
      
		display: block;
	}
	
	.display-flex-allcenter-column{
      
      
		background-color: #FF761E;
		    margin: 1px 5%;
	}
	
	
</style>