<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>
uni-app根据单选框页面切换
猜你喜欢
转载自blog.csdn.net/weixin_40476233/article/details/122703702
今日推荐
周排行