155 lines
3.6 KiB
Vue
155 lines
3.6 KiB
Vue
<template>
|
|
<div class="ap-container">
|
|
<div class="h-box">
|
|
|
|
|
|
<div class="top_">
|
|
<div class="tab-box" :class="tabindex == index ? 'active' : ''" v-for="(item,index) in tabList" :key="index" @click="gettab(index)" >
|
|
{{item.title}}
|
|
</div>
|
|
</div>
|
|
<jcindex :id="id" v-if="tabindex == 0"></jcindex>
|
|
<payment :id="id" :deptId="deptId" v-if="tabindex == 1" ></payment>
|
|
<way :id="id" :deptId="deptId" v-if="tabindex == 2" ></way>
|
|
<staff :id="id" :deptId="deptId" v-if="tabindex == 3" ></staff>
|
|
<allOrder :id="id" v-if="tabindex == 4"></allOrder>
|
|
|
|
<!-- <el-card >-->
|
|
<!-- <div class="top-box">-->
|
|
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">-->
|
|
<!-- <el-tab-pane label="基本设置" name="first">-->
|
|
<!-- <jcindex :id="id"></jcindex>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane label="支付配置" name="second">-->
|
|
<!-- <payment :id="id"></payment>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane label="员工管理" name="staff">-->
|
|
<!-- <staff :id="id"></staff>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane label="订单查看" name="allOrder">-->
|
|
<!-- <allOrder :id="id"></allOrder>-->
|
|
<!-- </el-tab-pane>-->
|
|
|
|
<!-- </el-tabs>-->
|
|
<!-- </div>-->
|
|
<!-- </el-card >-->
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
// import peizhi from '../components/Service/peizhi'
|
|
import payment from '../components/Service/payment'
|
|
import staff from '../components/Service/staff'
|
|
import allOrder from '../components/Service/allOrder'
|
|
import jcindex from '../components/Service/index'
|
|
import way from '../components/Service/way'
|
|
export default {
|
|
name: 'details',
|
|
data() {
|
|
return {
|
|
id:'',
|
|
deptId:'',
|
|
activeName: 'first',
|
|
tabindex:0,
|
|
tabList:[
|
|
{
|
|
name:'first',
|
|
title:'基本设置',
|
|
component:jcindex
|
|
},
|
|
{
|
|
name:'second',
|
|
title:'支付配置',
|
|
component:payment
|
|
},
|
|
{
|
|
name:'way',
|
|
title:'付费方式',
|
|
component:way
|
|
},
|
|
{
|
|
name:'staff',
|
|
title:'员工管理',
|
|
component:staff
|
|
},
|
|
{
|
|
name:'allOrder',
|
|
title:'订单查看',
|
|
component:allOrder
|
|
}
|
|
]
|
|
|
|
};
|
|
},
|
|
|
|
// peizhi
|
|
components:{
|
|
jcindex,staff,payment,allOrder,way
|
|
},
|
|
created() {
|
|
this.id = this.$route.query.id
|
|
this.deptId = this.$route.query.deptId
|
|
},
|
|
mounted() {
|
|
console.log(this.id)
|
|
|
|
},
|
|
methods: {
|
|
gettab(index){
|
|
this.tabindex = index
|
|
console.log(this.tabindex)
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ap-container{
|
|
height: 100vh;
|
|
|
|
background: #f9f9f9;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.top-box{
|
|
width: 100%;
|
|
}
|
|
.top_{
|
|
width: 100%;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 10px 25px;
|
|
padding-bottom: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
.active{
|
|
color: #FF9655 !important;
|
|
border-bottom: 2px solid #FF9655 !important;
|
|
}
|
|
.tab-box{
|
|
color: #999999;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
width: 60px;
|
|
border-bottom: 2px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0px 25px;
|
|
cursor: pointer;
|
|
}
|
|
.h-box{
|
|
height: 100%;
|
|
background: #f9f9f9;
|
|
|
|
}
|
|
</style>
|