uni-app根据单选框页面切换

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