Skip to content

T
tl_estate
Commit 4dbaef36 authored by xishifeng's avatar xishifeng
Browse files
Options

成交详情优化1

parent 70cb347f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 232 additions and 146 deletions
application/app_broker/view/index/bargaininfo_detail_static_pc.html
View file @ 4dbaef36
...@@ -13,123 +13,185 @@ ...@@ -13,123 +13,185 @@
<body class="body-pc" style="display: none;"> <body class="body-pc" style="display: none;">
<div id="app"> <div id="app">
<nav class="oh"> <nav class="oh">
<a href="javascript:;" class="btn-pc">成交信息</a> <a href="javascript:;" class="btn-pc" @click="tabMain(0)" :class="{'btn-default-pc':mainInit == 0}">成交信息</a>
<a href="javascript:;" class="btn-pc">分佣提成</a> <a href="javascript:;" class="btn-pc" @click="tabMain(1)" :class="{'btn-default-pc':mainInit == 1}">分佣提成</a>
<a href="javascript:;" class="btn-pc">开票税费</a> <a href="javascript:;" class="btn-pc" @click="tabMain(2)" :class="{'btn-default-pc':mainInit == 2}">开票税费</a>
</nav> </nav>
<main> <main>
<section> <section v-show="mainInit == 0">
<div class="list-area1 oh"> <div class="sec1-area1 oh">
<ul> <ul>
<li> <li>
<div>商铺类型：</div> <div>商铺类型：</div>
<div>商场</div> <div>{{detailData.shop_type=='1'?'街铺':'商场'}}</div>
</li> </li>
<li> <li>
<div>商铺地址：</div> <div>商铺地址：</div>
<div>商场nnn</div> <div>{{detailData.internal_address}}</div>
</li> </li>
<li> <li>
<div>业态：</div> <div>业态：</div>
<div>商场nnn</div> <div>{{detailData.industry_type}}</div>
</li> </li>
<li> <li>
<div>客户姓名：</div> <div>客户姓名：</div>
<div>商场nnn</div> <div>{{detailData.user_name}}</div>
</li> </li>
<li> <li>
<div>成交类型：</div> <div>成交类型：</div>
<div>商场nnn</div> <div>{{dealDoneType(detailData.trade_type)}}</div>
</li> </li>
<li> <li>
<div>应收总佣金：</div> <div>应收总佣金：</div>
<div>商场nnn</div> <div>{{detailData.commission}}元</div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<div>是否开业：</div> <div>是否开业：</div>
<div>商场</div> <div>{{detailData.is_open=='1'?'是':'否'}}</div>
</li> </li>
<li> <li>
<div>商铺号：</div> <div>商铺号：</div>
<div>商场</div> <div>{{detailData.house_number}}</div>
</li> </li>
<li> <li>
<div>预计收款时间：</div> <div>预计收款时间：</div>
<div>商场</div> <div>{{detailData.estimated_receipt_date}}</div>
</li> </li>
<li> <li>
<div>客户电话：</div> <div>客户电话：</div>
<div>商场</div> <div>{{hidePhone(detailData.user_phone)}}</div>
</li> </li>
<li> <li>
<div>成交日期：</div> <div>成交日期：</div>
<div>商场</div> <div>{{detailData.create_time}}</div>
</li> </li>
<li> <li>
<div>成交价：</div> <div>成交价：</div>
<div>商场</div> <div>{{detailData.price}}元</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="list-area2"> <div class="sec1-area2">
<p>分佣提成</p> <ul>
<ul></ul> <li class="flex" v-for="(item, index) in detailData.practical_fee" :key="index" :data-id="item.fee_id">
<div><span>实收佣金：</span>{{item.money}}元</div>
<div><span>收佣日期：</span>{{item.income_time}}</div>
</li>
</ul>
</div> </div>
</section> <div class="sec1-area3">
<section></section> <ul>
<section></section> <li>备注：{{detailData.content}}</li>
</main> </ul>
</div> </div>
</section>
<script id="fenyong_li_tpl" type="text/template"> <section v-show="mainInit == 1">
<li class="fenyong-li por"> <table class="fenyong-ticheng-main-table">
<ul class="flex"> <thead>
<li class="fenyong-sub-li flex"> <tr>
<div>分佣方：</div> <th>分佣ID</th>
<div class="arrow-select-pc flex-center"> <th>分佣方</th>
<select class="fenyong-fang"> <th>业务员</th>
<option value="">请选择</option> <th>所属门店</th>
<option value="1">盘方</option> <th>分佣比例</th>
<option value="2">客方</option> <th>应分佣金(元)</th>
<option value="3">反签</option> <th>预分佣金(元)</th>
<option value="4">独家</option> <th>手续费(元)</th>
<option value="5">合作方</option> <th>慈善基金(元)</th>
<option value="6">APP盘下载方</option> <th>现金奖(元)</th>
<option value="7">APP客下载方</option> <th>实收佣金(元)</th>
</select> <th>收佣日期</th>
<th>确认时间</th>
</tr>
</thead>
<tbody v-if="Array.isArray(fenyongData) && fenyongData.length>0">
<tr v-for="(item, index) in fenyongData" :key="index" :data-id="item.id">
<td>{{item.id}}</td>
<td>{{item.role_name}}</td>
<td>{{item.agent}}</td>
<td>{{item.district_store}}</td>
<td class="detail-modal-maid-span-scale">{{item.scale}}%</td>
<td class="detail-modal-maid-td-should-commission">{{item.scale_fee}}</td>
<td colspan="7" class="fenyong-ticheng-mix-td" v-if="item.partial_commission&&item.partial_commission.length&&item.partial_commission.length>0">
<div data-id="354" v-for="(item2, index2) in item.partial_commission">
<span>{{item2.real_fee}}</span>
<span>{{item2.service_charge}}</span>
<span>{{item2.charity_fund}}</span>
<span>{{item2.cash}}</span>
<span>{{item2.practical_fee}}</span>
<span v-if="!item2.income_time||(item2.income_time.length&&item.income_time.length<1)"></span>
<span v-else>{{item2.income_time.income_time}}</span>
<span>{{item2.confirm_date.split(' ')[0]}}</span>
</div> </div>
<div></div> </td>
</li> <td colspan="7" class="fenyong-ticheng-mix-td" v-else>
<li class="fenyong-sub-li flex"> <div>
<div>业务员：</div> <span class="detail-modal-maid-span-real-fee"></span>
<div class="flex-center por"> <span class="detail-modal-maid-span-service-charge">0</span>
<input type="text" class="add_input_ywy" placeholder="请输入姓名或手机号" /> <span class="detail-modal-maid-span-charity-fund">0</span>
<ul></ul> <span class="detail-modal-maid-span-cash">0</span>
<span class="detail-modal-maid-span-practical-fee"></span>
<span></span>
<span></span>
</div> </div>
<div></div> </td>
</li> </tr>
</ul> </tbody>
<ul class="flex"> <tbody v-else>
<li class="fenyong-sub-li flex"> <tr>
<div>分佣比例：</div> <td colspan="13">暂无数据</td>
<div class="flex-center"> </tr>
<input type="number" class="fenyong-rate" placeholder="请填写" /> </tbody>
<tfoot>
<tr>
<td>合计</td>
<td></td>
<td></td>
<td></td>
<td id="maid_count_total_rate"></td>
<td id="maid_count_total_yingfen"></td>
<td id="maid_count_total_yufen"></td>
<td id="maid_count_total_shouxu"></td>
<td id="maid_count_total_cishan"></td>
<td id="maid_count_total_xianjin"></td>
<td id="maid_count_total_shishou"></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</section>
<section v-show="mainInit == 2">
<div v-if="Array.isArray(shuifeiData) && shuifeiData.length>0">
<table v-for="(item, index) in shuifeiData" class="shuifei-list-table">
<tbody>
<tr>
<td>开票金额</td>
<td>{{item.total_fee}}</td>
<td>开票日期</td>
<td>{{item.operation_date}}</td>
</tr>
<tr>
<td>分佣方</td>
<td>业务员</td>
<td>分佣比例</td>
<td>税费</td>
</tr>
<tr v-for="(item2, index2) in item.fee_list" :data-feeid="item2.fee_id">
<td>{{getInfoType(item2.role)}}</td>
<td>{{item2.name+'-'+item2.phone}}</td>
<td>{{item2.scale}}</td>
<td>{{item2.fee}}</td>
</tr>
</tbody>
</table>
</div> </div>
<div>%</div> <div v-else>暂无数据</div>
</li> </section>
<li class="fenyong-sub-li flex"> </main>
<div>应分佣金：</div>
<div class="flex-center">
<input type="number" class="yingfen-yongjin" placeholder="请填写" />
</div> </div>
<div>元</div>
</li>
</ul>
<mark class="poa"><img src="/app/images/search_gb.png"></mark>
</li>
</script>
<script src="/app/js/libs/require.min.js" data-js="/app/js/bargaininfo_detail_static_pc.js" data-main="/app/js/main" data-norem="yes" defer async="true"></script> <script src="/app/js/libs/require.min.js" data-js="/app/js/bargaininfo_detail_static_pc.js" data-main="/app/js/main" data-norem="yes" defer async="true"></script>
</body> </body>
......
public/app/css/bargaininfo_detail_static_pc.css
View file @ 4dbaef36
@charset "utf-8"; @charset "utf-8";
body{ body{
max-width: 1454px; /*max-width: 1454px;*/
max-width: 1240px;
} }
.list-area1{}
.list-area1>ul{ /****成交信息相关样式*****/
.sec1-area1{}
.sec1-area1>ul{
width: 50%; width: 50%;
float: left; float: left;
} }
.list-area1>ul>li{ .sec1-area1>ul>li{
overflow: hidden; overflow: hidden;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.list-area1>ul>li>div{ .sec1-area1>ul>li>div{
float: left; float: left;
height: 100%; height: 100%;
} }
.list-area1>ul>li>div:nth-of-type(1){ .sec1-area1>ul>li>div:nth-of-type(1){
width: 100px; width: 100px;
} }
.list-area1>ul>li>div:nth-of-type(2){ .sec1-area1>ul>li>div:nth-of-type(2){
width: 140px; width: 140px;
} }
.list-area1>ul>li>div:nth-of-type(2)>input, .sec1-area1>ul>li>div:nth-of-type(3){
.list-area1>ul>li>div:nth-of-type(2)>select{
display: block;
width: 100%;
height: 28px;
border: 1px solid #e0e0e0;
}
.list-area1>ul>li>div:nth-of-type(3){
padding-left: 10px; padding-left: 10px;
} }
.sec1-area2{
.list-area2{
padding-top: 20px; padding-top: 20px;
} }
.list-area2>p{
font-weight: bold;
}
.fenyong-li{
padding-bottom: 7px;
}
.fenyong-li>mark{ .sec1-area2>ul>li{
right: 30px; height: 40px;
top: 25px; line-height: 40px;
background-color: transparent;
cursor: pointer;
} }
.sec1-area2>ul>li>div{
.fenyong-li:nth-of-type(1)>mark{ flex: 50% 0 0;
display: none;
} }
.sec1-area2>ul>li>div>span:nth-of-type(1){
.fenyong-li>mark>img{ font-weight: bolder;
width: 20px;
} }
.fenyong-sub-li{ .sec1-area3>ul>li{
flex: 50% 0 0;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.fenyong-sub-li>div:nth-of-type(1){
flex: 100px 0 0;
}
.fenyong-sub-li>div:nth-of-type(2){
flex: 140px 0 0;
}
.fenyong-sub-li>div:nth-of-type(2)>input,
.fenyong-sub-li>div:nth-of-type(2)>select{
display: block;
width: 100%;
height: 28px;
border: 1px solid #e0e0e0;
}
.fenyong-sub-li>div:nth-of-type(2)>ul{
position: absolute;
top: 34px;
left: 0;
width: 140%;
background: white;
border: 1px solid #ccc;
display: none;
/*border-top: none;*/
}
.fenyong-sub-li>div:nth-of-type(2)>ul>li{
height: 30px;
line-height: 30px;
font-size: 12px;
text-align: left;
}
.fenyong-sub-li>div:nth-of-type(3){
padding-left: 10px;
flex: 40px 0 0;
}
.fenyong-add-area>img{
width: 24px;
cursor: pointer;
}
/********/ /****头部tab切换区域样式****/
nav{ nav{
padding: 15px; padding: 15px;
} }
...@@ -123,3 +67,83 @@ main>section:nth-of-type(1){ ...@@ -123,3 +67,83 @@ main>section:nth-of-type(1){
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
} }
/***分佣提成部分相关样式****/
.fenyong-ticheng-main-table{
border-collapse: collapse;
border-spacing: 0;
border-color: grey;
}
.fenyong-ticheng-main-table th,
.fenyong-ticheng-main-table td{
border: 1px solid #ddd;
padding: 5px 0;
text-align: center;
}
.fenyong-ticheng-main-table th{
font-weight: bolder;
}
.fenyong-ticheng-main-table>thead th:nth-last-of-type(-n+7){
width: 76px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(1){
width: 50px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(2){
width: 60px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(3){
width: 80px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(4){
width: 120px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(5){
width: 60px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(12){
width: 104px;
}
.fenyong-ticheng-main-table>thead th:nth-of-type(13){
width: 104px;
}
.fenyong-ticheng-mix-td{
padding: 0!important;
}
.fenyong-ticheng-mix-td>div>span{
float: left;
width: 76px;
height: 30px;
line-height: 30px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.fenyong-ticheng-mix-td>div:nth-last-of-type(1)>span{
border-bottom: none;
}
.fenyong-ticheng-mix-td>div>span:nth-last-of-type(2){
width: 104px;
}
.fenyong-ticheng-mix-td>div>span:nth-last-of-type(1){
width: 100px;
border-right: none;
}
/*开票税费相关样式*/
.shuifei-list-table{
border-collapse: collapse;
border-spacing: 0;
border-color: grey;
width: 680px;
margin: 0 auto;
}
.shuifei-list-table td{
border: 1px solid #ddd;
padding: 5px 0;
text-align: center;
}
.shuifei-list-table+.shuifei-list-table{
margin-top: 40px;
}
public/appnew/src/components/publicEg/entrance.vue
View file @ 4dbaef36
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</template> </template>
<script> <script>
let _token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImlkIjo1NzQwLCJuYW1lIjoiXHU1ZTk3XHU2ZDRiXHU4YmQ1MiIsInBob25lIjoiMTU2MDE2NTIzNTIiLCJsZXZlbCI6MjB9LCJ0aW1lU3RhbXBfIjoxNTQwMjY1ODYxfQ.kEW46TMxEdBrWJ82CO6sxAxkeZOIZlWJZzHU378IXD4'; let _token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImlkIjo1NzM5LCJuYW1lIjoiXHU2MDNiXHU2ZDRiXHU4YmQ1MSIsInBob25lIjoiMTU2MDE2NTIzNTMiLCJsZXZlbCI6MzB9LCJ0aW1lU3RhbXBfIjoxNTQwOTcxNTExfQ.5zIOqWWpwGfenHdRRcwyVJ39XgZozx8xmlbWHvri5sw';
let _token2 = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImlkIjo1NzM5LCJuYW1lIjoiXHU2MDNiXHU2ZDRiXHU4YmQ1MSIsInBob25lIjoiMTU2MDE2NTIzNTMiLCJsZXZlbCI6MzB9LCJ0aW1lU3RhbXBfIjoxNTMwNjA2ODU4fQ.8jL49CjtBMV6BqmaKdJfd4pkGBazrAgQQrutb53Z3mY'; let _token2 = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImlkIjo1NzM5LCJuYW1lIjoiXHU2MDNiXHU2ZDRiXHU4YmQ1MSIsInBob25lIjoiMTU2MDE2NTIzNTMiLCJsZXZlbCI6MzB9LCJ0aW1lU3RhbXBfIjoxNTMwNjA2ODU4fQ.8jL49CjtBMV6BqmaKdJfd4pkGBazrAgQQrutb53Z3mY';
export default { export default {
name: '', name: '',
......
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