175 lines
3.9 KiB
Vue
175 lines
3.9 KiB
Vue
<template>
|
||
<view :style="{ height: '100vh', overflow: 'hidden' }">
|
||
<u-status-bar></u-status-bar>
|
||
<u-navbar
|
||
title="预警"
|
||
:autoBack="true"
|
||
:titleStyle="{
|
||
fontSize: '18px',
|
||
}"
|
||
:height="44"
|
||
:safeAreaInsetTop="true"
|
||
leftIconSize="20"
|
||
leftIconColor="rgb(153, 153, 153)"
|
||
>
|
||
</u-navbar>
|
||
<!-- <u-tabs
|
||
:list="tabsOptions"
|
||
@click="tabsChange"
|
||
:scrollable="false"
|
||
class="tabsClass"
|
||
:activeStyle="{ color: 'rgb(37, 157, 255)', fontSize: '16px' }"
|
||
:inactiveStyle="{ color: '#606266', fontSize: '16px' }"
|
||
lineColor="transparent"
|
||
itemStyle="height: 44px"
|
||
:customItemClass="getCustomItemClass"
|
||
>
|
||
</u-tabs> -->
|
||
|
||
<view class="tab-container">
|
||
<view
|
||
v-for="(item, index) in tabsOptions"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ 'tab-active': tabsVal === item.components }"
|
||
@click="tabsChange(item)"
|
||
>
|
||
{{ item.name }}
|
||
<view v-if="item.hasData" class="red-dot"></view>
|
||
</view>
|
||
</view>
|
||
<uniSh
|
||
v-show="tabsVal === 'uniSh'"
|
||
@hasData="updateTabData('uniSh', $event)"
|
||
ref="shComponent"
|
||
></uniSh>
|
||
<uniSk
|
||
v-show="tabsVal === 'uniSk'"
|
||
@hasData="updateTabData('uniSk', $event)"
|
||
ref="skComponent"
|
||
></uniSk>
|
||
<uniHd
|
||
v-show="tabsVal === 'uniHd'"
|
||
@hasData="updateTabData('uniHd', $event)"
|
||
ref="hdComponent"
|
||
></uniHd>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "moment";
|
||
import uniSh from "./sh.vue";
|
||
import uniSk from "./sk.vue";
|
||
import uniHd from "./hd.vue";
|
||
|
||
export default {
|
||
components: { uniSh, uniSk, uniHd },
|
||
data() {
|
||
return {
|
||
tabsOptions: [
|
||
{
|
||
name: "山洪预警",
|
||
components: "uniSh",
|
||
hasData: true,
|
||
},
|
||
{
|
||
name: "水库预警",
|
||
components: "uniSk",
|
||
hasData: false,
|
||
},
|
||
{
|
||
name: "河道预警",
|
||
components: "uniHd",
|
||
hasData: false,
|
||
},
|
||
],
|
||
tabsVal: "uniSh",
|
||
};
|
||
},
|
||
methods: {
|
||
getCustomItemClass(item, index) {
|
||
return item.hasData ? "u-tabs__wrapper__nav__item--data-dot" : "";
|
||
},
|
||
tabsChange(item) {
|
||
this.tabsVal = item.components;
|
||
console.log(this.tabsVal);
|
||
// 直接调用当前激活组件的submit方法
|
||
if (this.tabsVal === 'uniSh') {
|
||
this.$refs.shComponent.submit();
|
||
} else if (this.tabsVal === 'uniSk') {
|
||
this.$refs.skComponent.submit();
|
||
} else if (this.tabsVal === 'uniHd') {
|
||
this.$refs.hdComponent.submit();
|
||
}
|
||
|
||
},
|
||
updateTabData(component, hasData) {
|
||
const index = this.tabsOptions.findIndex(
|
||
(item) => item.components === component
|
||
);
|
||
if (index !== -1) {
|
||
this.tabsOptions[index].hasData = hasData;
|
||
}
|
||
},
|
||
// 初始化所有子组件的数据
|
||
initAllTabsData() {
|
||
// 这里不需要做任何事情，因为子组件在created钩子中会自动请求数据
|
||
// 由于我们使用了v-show而不是v-if，所有子组件都会被创建并执行created钩子
|
||
}
|
||
},
|
||
mounted() {
|
||
// 页面加载完成后初始化所有标签页数据
|
||
this.initAllTabsData();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.myTitleStyle {
|
||
font-size: 30px;
|
||
background-color: red;
|
||
height: 200px;
|
||
}
|
||
.tabsClass {
|
||
margin-top: 44px;
|
||
height: 44px;
|
||
padding: 0 40px;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.tab-container {
|
||
display: flex;
|
||
margin-top: 44px;
|
||
height: 44px;
|
||
padding: 0 40px;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: #606266;
|
||
height: 100%;
|
||
}
|
||
|
||
.tab-active {
|
||
color: rgb(37, 157, 255);
|
||
}
|
||
|
||
.red-dot {
|
||
position: absolute;
|
||
top: 9px;
|
||
right: 9px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: red;
|
||
}
|
||
</style>
|