Commit 591b3a6b authored by agping's avatar agping

成交报告详情修改

parent a9616080
......@@ -52,6 +52,8 @@
userid: '',
initTabNumMain: 0,
mainData: [{
'titlet': '人员排行1',
'title': '人员排行',
'isLoad': false,
'topLineNum': 5,
......@@ -60,6 +62,8 @@
'index_': 4
}
}, {
'titlet': '人员排行2',
'title': '门店排行',
'isLoad': false,
'topLineNum': 5,
......@@ -68,6 +72,8 @@
'index_': 4
}
}, {
'titlet': '人员排行3',
'title': '部门排行',
'isLoad': false,
'topLineNum': Number.POSITIVE_INFINITY,
......
......@@ -27,6 +27,13 @@
'query': {
'id': 1
}
},
{
'path': '/reportDetails',
'nameCustom': '成交报告',
'query': {
'token': _token
}
}
]
}
......
<template>
<div>
<nav>
<div class="nav-main">
<div v-for="(item, index) in mainData" :key="item.title" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.title}}</div>
</div>
<div class="nav-seat"></div>
</nav>
<main>
<section v-show="0 === initTabNumMain">
<ul>
<li class="deal-shop">
<div class="bottom-border">
<div class="deal-shop-top right">成交商铺</div>
<div class="left deal-shop-adress">
<div class="left">宝山万达惬意烤羊肉串</div>
<div class="left clear font-24">梅林路666弄13号</div>
</div>
</div>
</li>
<li class="deal-shop">
<div class="bottom-border">
<div class="deal-shop-top right">成交客源</div>
<div class="left deal-shop-adress">
<div class="left">刘女士</div>
<div class="left clear font-24">15517301736</div>
</div>
</div>
</li>
<li class="main-sec-li">
<div class="bottom-border">商铺号<span class="left">1314</span></div>
</li>
<li class="main-sec-li">
<div class="bottom-border">是否开业<span class="left"></span></div>
</li>
<li class="main-sec-li">
<div class="bottom-border">成交类型<span class="left">增佣</span></div>
</li>
<li class="main-sec-li">
<div class="bottom-border">成交价<span class="left">100元</span></div>
</li>
<li class="main-sec-li">
<div>应收佣金<span class="left">100元</span></div>
</li>
<li class="paid-in color main-sec-li">
<div class="bottom-border">实收佣金1<span class="left">100元</span></div>
</li>
<li class="color main-sec-li">
<div>收佣日期1<span class="left">2018-08-08</span></div>
</li>
<li class="paid-in color main-sec-li">
<div class="bottom-border">实收佣金1<span class="left">100元</span></div>
</li>
<li class="color main-sec-li">
<div>收佣日期1<span class="left">2018-08-08</span></div>
</li>
</ul>
</section>
<section v-show="1 === initTabNumMain">
<ul>
<li class="main-sec-li">
<div class="bottom-border">分佣方<span class="left">盘方</span></div>
</li>
<li class="main-sec-li">
<div class="bottom-border">业务员<span class="left">周小雨15517301736</span></div>
</li>
<li class="main-sec-li">
<div class="bottom-border">分佣比例<span class="left">12%</span></div>
</li>
<li class="main-sec-li">
<div>应分佣金<span class="left">666元</span></div>
</li>
<li class="main-sec-li color paid-in">
<div class="bottom-border">实收佣金1<span class="left">888元</span></div>
</li>
<li class="main-sec-li color">
<div class="bottom-border">
<div class="right width-170 ">手续费1</div>
<div class="right width-170 ">慈善基金1</div>
<div class="right width-170 ">现金奖1</div>
<div class="right width-170-border">实收佣金1</div>
</div>
</li>
<li class="main-sec-li color">
<div class="bottom-border">
<div class="right width-170 ">600元</div>
<div class="right width-170 ">600元</div>
<div class="right width-170 ">600元</div>
<div class="right width-170-border">600元</div>
</div>
</li>
<li class="main-sec-li color">
<div>
<div class="left">确认时间1:2017-08-02</div>
</div>
</li>
<li class="main-sec-li color paid-in">
<div class="bottom-border">实收佣金2<span class="left">888元</span></div>
</li>
<li class="main-sec-li color">
<div class="bottom-border">
<div class="right width-170 ">手续费2</div>
<div class="right width-170 ">慈善基金2</div>
<div class="right width-170 ">现金奖2</div>
<div class="right width-170-border">实收佣金2</div>
</div>
</li>
<li class="main-sec-li color">
<div class="bottom-border">
<div class="right width-170 ">600元</div>
<div class="right width-170 ">600元</div>
<div class="right width-170 ">600元</div>
<div class="right width-170-border">600元</div>
</div>
</li>
<li class="main-sec-li color">
<div>
<div class="left">确认时间2:2017-08-02</div>
</div>
</li>
</ul>
</section>
<section v-show="2 === initTabNumMain">
<ul>
<li class="main-sec-li">
<div class="bottom-border">开票金额<span class="left">6000元</span></div>
</li>
<li class="main-sec-li">
<div>开票日期<span class="left">2018-08-02</span></div>
</li>
<li class="main-sec-li paid-in">
<div class="bottom-border">
<div class="right width-170-border">分佣方</div>
<div class="right width-170-border">业务员</div>
<div class="right width-170-border">分佣比例</div>
<div class="right width-170-border">税费</div>
</div>
</li>
<li class="main-sec-li">
<div class="bottom-border">
<div class="right width-170">盘方</div>
<div class="right width-170">周小雨</div>
<div class="right width-170">30%</div>
<div class="right width-170-border color">6000元</div>
</div>
</li>
<li class="main-sec-li">
<div class="bottom-border">
<div class="right width-170">盘方</div>
<div class="right width-170">周小雨</div>
<div class="right width-170">30%</div>
<div class="right width-170-border color">6000元</div>
</div>
</li>
<li class="main-sec-li">
<div class="bottom-border">
<div class="right width-170">盘方</div>
<div class="right width-170">周小雨</div>
<div class="right width-170">30%</div>
<div class="right width-170-border color">6000元</div>
</div>
</li>
<li class="main-sec-li">
<div class="bottom-border">
<div class="right width-170">盘方</div>
<div class="right width-170">周小雨</div>
<div class="right width-170">30%</div>
<div class="right width-170-border color">6000元</div>
</div>
</li>
</ul>
</section>
</main>
</div>
</template>
<script>
import '@/assets/js/layer041002.js';
export default {
data: () => ({
initTabNumMain: 0,
mainData: [{
'title': '成交报告',
}, {
'title': '分佣提成',
}, {
'title': '开票税费',
}],
}),
created() {
let _this = this;
let _token = _this.$route.query.token;
if(!_token) {
layer.tipsX('token获取出错');
return false;
};
_this.common.h5PageC(_token, () => {
_this.loadMain();
});
},
methods: {
loadMain() {
let _this = this;
_this.ajaxUl();
},
tabMain(index) { //tab切换
let _this = this;
_this.initTabNumMain = index;
},
ajaxUl() {
let _this = this;
_this.axios({
method: 'get',
url: '/broker/selectPerformanceByTime',
responseType: 'json',
data: {
}
})
.then(function(response) {
if(response.data.code == 200) {
} else {
layer.tipsX(response.data.msg);
}
})
.catch(function(error) {
layer.tipsX(error);
});
}
}
}
</script>
<style>
nav>.nav-main {
display: flex;
box-sizing: border-box;
background-color: white;
width: 100%;
height: .9rem;
line-height: .9rem;
padding: 0 .3rem;
border-bottom: 1px solid #eee;
position: fixed;
left: 0;
font-size: .28rem;
}
nav>.nav-seat {
height: .9rem;
}
nav>.nav-main>div {
flex: 1;
text-align: center;
}
nav>.nav-main>div.active {
color: rgb(255, 148, 25);
position: relative;
}
nav>.nav-main>div.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 1.3rem;
margin-left: -.65rem;
height: .06rem;
border-radius: .03rem;
background-color: rgb(255, 161, 50);
}
.main-sec-li {
background: #fff;
height: .9rem;
line-height: .9rem;
font-size: .3rem;
/*border-bottom: 1px solid #F0F0F0;*/
}
li {
background: #fff;
padding: 0 .4rem;
}
li .bottom-border {
border-bottom: 1px solid #F0F0F0;
height: 98%;
}
li.paid-in {
margin-top: .2rem;
}
.left {
float: right;
}
.color {
color: #FA903F;
}
.deal-shop {
height: 1.3rem;
}
.deal-shop-top {
margin-top: .5rem;
}
.deal-shop-adress {
margin-top: .3rem;
}
.right {
float: left;
}
.clear {
clear: both;
}
.font-24 {
color: #999;
font-size: .28rem;
}
.width-170 {
width: 1.6rem;
border-right: 1px solid #F0F0F0;
text-align: center;
}
.width-170-border {
width: 1.6rem;
text-align: center;
}
</style>
\ No newline at end of file
......@@ -3,6 +3,7 @@ import Router from 'vue-router'
import entrance from '@/components/publicEg/entrance'
import achieveFork from '@/components/achieveMain/achieveFork'
import feeds from '@/components/feed/feeds'
import reportDetails from '@/components/reportDetails/reportDetails'
Vue.use(Router)
......@@ -26,6 +27,11 @@ export default new Router({
path: '/feeds',
name: 'v-feeds',
component: feeds
},
{
path: '/reportDetails',
name: 'v-report-details',
component: reportDetails
}
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment