86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<Navbar :title="navbarTitle" />
|
|
<div class="tabs" v-if="opt.isDetail">
|
|
<div class="item" :class="{ active: active == 1 }" @click="handleTab(1)">计划详情</div>
|
|
<div class="item" :class="{ active: active == 2 }" @click="handleTab(2)">派车详情</div>
|
|
<div class="item" :class="{ active: active == 3 }" @click="handleTab(3)" v-if="!opt.isArrival">审核记录</div>
|
|
</div>
|
|
<!-- <div v-if="opt.isDetail" style="height: 45px"></div> -->
|
|
|
|
<PlanDetails v-if="active == 1" :opt="opt" />
|
|
<PlanAuditDetails v-if="active == 2" :opt="opt" />
|
|
<AuditRecord v-if="active == 3" :opt="opt" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AuditRecord from './components/AuditRecord'
|
|
import PlanDetails from './components/PlanDetails'
|
|
import PlanAuditDetails from './components/PlanAuditDetails'
|
|
|
|
export default {
|
|
components: { AuditRecord, PlanDetails, PlanAuditDetails },
|
|
data() {
|
|
return {
|
|
opt: {},
|
|
navbarTitle: '详情',
|
|
active: 1
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.opt = JSON.parse(opt.params)
|
|
console.log('🚀 ~ onLoad ~ this.opt', this.opt)
|
|
this.active = this.opt.active
|
|
if (this.opt.isPlan) {
|
|
this.navbarTitle = '计划详情'
|
|
} else if (this.opt.isAudit) {
|
|
this.navbarTitle = '派车详情'
|
|
} else if (this.opt.isDetail && !this.opt.isArrival) {
|
|
this.navbarTitle = '派车详情'
|
|
} else {
|
|
this.navbarTitle = '详情'
|
|
}
|
|
},
|
|
methods: {
|
|
handleTab(index) {
|
|
this.active = index
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
.tabs {
|
|
width: 100%;
|
|
/* position: fixed;
|
|
top: 44px;
|
|
left: 0; */
|
|
background-color: #fff;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
.item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
color: #666;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid #dcdcdc; // 添加透明边框
|
|
transition: color 0.3s ease, border-bottom 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
// 激活状态
|
|
&.active {
|
|
color: $u-primary;
|
|
border-bottom: 2px solid $u-primary;
|
|
background-color: #f8f8f8;
|
|
}
|
|
}
|
|
}
|
|
</style>
|