Files
dvcp_v2_wxcp_app/library/apps/AppWorkOrderXbot/AppWorkOrderXbot.vue
2024-10-31 14:34:57 +08:00

146 lines
2.9 KiB
Vue

<template>
<div class="AppWorkOrderXbot">
<component v-if="refresh" :is="component" @change="onChange" :params="params" :ref="component"/>
<div class="tabs" v-if="isTab">
<div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
<img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
<p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
</div>
</div>
</div>
</template>
<script>
import List from './List.vue'
import Statistics from './Statistics.vue'
import {mapState} from 'vuex'
export default {
name: 'AppWorkOrderXbot',
appName: '工单管理',
data() {
return {
component: 'List',
params: {},
refresh: true,
tabIndex: 0,
tabs: [
{
img: require('./components/img/handle-icon.png'),
activeImg: require('./components/img/handle-icon-active.png'),
text: '办理',
component: 'List',
},
{
img: require('./components/img/statistics-icon.png'),
activeImg: require('./components/img/statistics-icon-active.png'),
text: '统计',
component: 'Statistics',
},
],
isTab: true,
}
},
computed: {
...mapState(['user']),
isGridMember() {
return this.user.girdCheckType > 0
}
},
components: {
List,
Statistics,
Set,
},
methods: {
onChange(e) {
this.params = e.params
this.component = e.type
},
tabClick(index, component) {
this.tabIndex = index
this.component = component
this.refresh = false
this.$nextTick(() => {
this.refresh = true
})
}
},
onShow() {
document.title = '工单管理'
uni.$on('hideTab', () => {
this.isTab = false
})
uni.$on('showTab', () => {
this.isTab = true
})
if (!this.tabIndex) {
this.$nextTick(() => this.$refs['List'].getListInit())
}
},
onReachBottom() {
if (!this.tabIndex) {
this.$nextTick(() => this.$refs['List'].nextPage())
}
},
}
</script>
<style lang="scss" scoped>
.AppWorkOrderXbot {
height: 100%;
}
.tabs {
width: 100%;
height: 98px;
background: #fff;
border-top: 1px solid #ddd;
position: fixed;
bottom: 0;
left: 0;
display: flex;
.item {
flex: 1;
text-align: center;
img {
width: 56px;
height: 56px;
margin-top: 8px;
}
p {
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #c4cad4;
line-height: 8px;
}
.color-3267F0 {
color: #3267f0;
}
}
}
.empty {
text-align: center;
img {
width: 282px;
height: 306px;
margin: 136px auto 0;
}
p {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 40px;
}
}
</style>