Commit b4e35a15 authored by xishifeng's avatar xishifeng

pc提交成交报告

parent 43fe8910
......@@ -15,83 +15,149 @@
<main>
<section class="list-area1 oh">
<ul>
<li>
<li v-if="false">
<div>客户姓名:</div>
<div>QQQQ</div>
</li>
<li>
<li v-if="false">
<div>商铺类型:</div>
<div>商场</div>
</li>
<li>
<div>商铺号:</div>
<div class="flex-center">
<input type="number" />
<input type="number" v-model="house_number" placeholder="请输入" />
</div>
</li>
<li>
<div>业态品牌:</div>
<div class="flex-center">
<input type="text" />
<input type="text" v-model.trim="industry_type" placeholder="请输入" />
</div>
</li>
<li>
<div>成交价:</div>
<div class="flex-center">
<input type="number" />
<input type="number" v-model="price" placeholder="请输入" />
</div>
<div>元/月</div>
</li>
<li>
<div>预计收款时间:</div>
<div class="flex-center">
<input type="date" />
<input type="date" v-model="estimated_receipt_date" placeholder="请输入" />
</div>
</li>
</ul>
<ul>
<li>
<li v-if="false">
<div>客户电话:</div>
<div>QQQQ</div>
</li>
<li>
<li v-if="false">
<div>商铺地址:</div>
<div>bbbb</div>
</li>
<li>
<div>是否开业:</div>
<div class="arrow-select-pc flex-center">
<select>
<select v-model="is_open">
<option value="">请选择</option>
<option value=""></option>
<option value=""></option>
<option value="1"></option>
<option value="0"></option>
</select>
</div>
</li>
<li>
<div>成交类型:</div>
<div class="arrow-select-pc flex-center">
<select>
<select v-model="trade_type">
<option value="">请选择</option>
<option value="">出租</option>
<option value="">增佣</option>
<option value="">代理</option>
<option value="">好处费</option>
<option value="10">出租</option>
<option value="20">增佣</option>
<option value="30">代理</option>
<option value="40">好处费</option>
</select>
</div>
</li>
<li>
<div>应收佣金:</div>
<div class="flex-center">
<input type="number" />
<input type="number" v-model.trim="commission" placeholder="请输入" />
</div>
<div></div>
</li>
</ul>
</section>
<section class="list-area2">
<p>分佣提成</p>
<ul></ul>
<div class="fenyong-add-area flex-center">
<img src="/app/images/jia2@2x.png">
</div>
</section>
<section class="btn-area">
<div></div>
<div class="flex-center">
<a href="javascript:;" @click="save">提交</a>
</div>
</section>
</main>
</div>
<script id="fenyong_li_tpl" type="text/template">
<li class="fenyong-li por">
<ul class="flex">
<li class="fenyong-sub-li flex">
<div>分佣方:</div>
<div class="arrow-select-pc flex-center">
<select class="fenyong-fang">
<option value="">请选择</option>
<option value="1">盘方</option>
<option value="2">客方</option>
<option value="3">反签</option>
<option value="4">独家</option>
<option value="5">合作方</option>
<option value="6">APP盘下载方</option>
<option value="7">APP客下载方</option>
</select>
</div>
<div></div>
</li>
<li class="fenyong-sub-li flex">
<div>业务员:</div>
<div class="flex-center por">
<input type="text" class="add_input_ywy" placeholder="请输入姓名或手机号" />
<ul></ul>
</div>
<div></div>
</li>
</ul>
<ul class="flex">
<li class="fenyong-sub-li flex">
<div>分佣比例:</div>
<div class="flex-center">
<input type="number" class="fenyong-rate" placeholder="请填写" />
</div>
<div>%</div>
</li>
<li class="fenyong-sub-li flex">
<div>应分佣金:</div>
<div class="flex-center">
<input type="number" class="yingfen-yongjin" placeholder="请填写" />
</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/submit_report_pc.js" data-main="/app/js/main" data-norem="yes" defer async="true"></script>
</body>
</html>
\ No newline at end of file
......@@ -4,7 +4,6 @@
.modal-body {
/*height: 600px;*/
overflow-y: auto;
padding-bottom: 60px;
}
.user-ul2 {
......@@ -38,43 +37,6 @@
.clear{
clear: both;
}
/*提交成交报告 样式*/
.modal-body-report{
width: 800px;
}
.margin-top-ld{
height: 38px;
}
.btn2-report{
width: 50%;
float: left;
margin-top: -6px;
}
.btn3-report{
width: 60%;
float: left;
margin-top: -6px;
}
.left-report{
float: left;
display: inline-block;
width: 74px;
}
.report-content{
box-sizing: border-box;
padding: 10px;
}
.table-left{
float: left;
}
.detail-modal-bargaininfo-commission-cancel-pic{
background-color: #fff;
}
.detail-modal-bargaininfo-commission-cancel-pic>img{
width: 20px;
margin-top: 20px;
}
/*提交成交报告 样式*/
</style>
<div id="page-content-wrapper">
......@@ -154,7 +116,7 @@
时间轴
</h4>
</div>
<div class="modal-body" class="iframe-div-parent">
<div class="modal-body">
<iframe class="iframe-time-line"></iframe>
</div>
</div>
......@@ -163,7 +125,7 @@
<!-- /.modal -->
</div>
<!--提交成交 报告-->
<div class="modal fade" id="modal-report" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade modal-iframe-750" id="modal-report" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-body-report">
<div class="modal-content">
<div class="modal-header">
......@@ -175,127 +137,11 @@
</h4>
</div>
<div class="modal-body">
<div class="report-content">
<table width="100%">
<tr class="margin-top-ld">
<td width="50%">客户姓名:<span>张女士</span></td>
<td>客户电话:<span>155****1736</span></td>
</tr>
<tr class="margin-top-ld">
<td>商铺类型:<span>商场</span></td>
<td>商铺地址:<span>上海市黄浦区南京东路666号</span></td>
</tr>
<tr class="margin-top-ld">
<td><span class="left-report">商铺号:</span><input type="text" placeholder="请填写" class="form-control btn2-report"/></td>
<td><span class="left-report">是否开业:</span>
<select name="" id="" class="form-control btn2-report">
<option value=""></option>
<option value=""></option>
</select>
</td>
</tr>
<tr class="margin-top-ld">
<td><span class="left-report">业态/品牌:</span><input type="text" placeholder="请填写" class="form-control btn2-report" /></td>
<td><span class="left-report">成交类型:</span>
<select name="" id="" class="form-control btn2-report">
<option value="">出租</option>
<option value="">增佣</option>
<option value="">代理</option>
<option value="">好处费</option>
</select>
</td>
</tr>
<tr class="margin-top-ld">
<td><span class="left-report">成交价:</span><input type="number" placeholder="请填写" class="form-control btn2-report"/>元/月</td>
<td><span class="left-report">应收佣金:</span><input type="number" placeholder="请填写" class="form-control btn2-report"/></td>
</tr>
<tr class="margin-top-ld">
<td><span style="float: left;">预计收款时间:</span><input type="date" class="form-control btn2-report" /></td>
</tr>
</table>
<div class="">
<h5 style="font-weight: bold;">分佣提成</h5>
<div class="detail-modal-bargaininfo-commission-inputpar">
<div class="detail-modal-bargaininfo-commission-addarea">
<div class="form-group detail-modal-bargaininfo-commission-sec">
<table>
<tr class="margin-top-ld">
<td><span class="left-report">分佣方:</span>
<select name="" id="" class="form-control btn3-report">
<option value="">盘方</option>
<option value="">客方</option>
<option value="">反签</option>
<option value="">独家</option>
<option value="">合作方</option>
<option value="">APP盘下载方</option>
<option value="">APP客下载方</option>
</select>
</td>
<td>
<span class="left-report">业务员:</span><input type="text" placeholder="请输入姓名或手机号" class="form-control btn3-report"/>
</td>
</tr>
<tr class="margin-top-ld">
<td>
<span class="left-report">分用比例:</span><input type="number" placeholder="请填写" class="form-control btn3-report"/>%
</td>
<td>
<span class="left-report">应分佣金:</span><input type="number" placeholder="请填写" class="form-control btn3-report"/>
</td>
</tr>
</table>
</div>
</div>
<div style="clear: both;"></div>
<div id="bargaininfo_commission_add_btn" style="text-align: center;width: 80%;">
<img src="/resource/image/jia2@2x.png" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary submit_add_report">提交</button>
<iframe class="iframe-submit-report"></iframe>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script type="text/template" id='add_report'>
<div class="form-group detail-modal-bargaininfo-commission-sec">
<div class="table-left">
<table style="margin-bottom: 14px;">
<tr class="margin-top-ld">
<td><span class="left-report">分佣方:</span>
<select name="" id="" class="form-control btn3-report">
<option value="">盘方</option>
<option value="">客方</option>
<option value="">反签</option>
<option value="">独家</option>
<option value="">合作方</option>
<option value="">APP盘下载方</option>
<option value="">APP客下载方</option>
</select>
</td>
<td>
<span class="left-report">业务员:</span><input type="text" placeholder="请输入姓名或手机号" class="form-control btn3-report"/>
</td>
</tr>
<tr class="margin-top-ld">
<td>
<span class="left-report">分用比例:</span><input type="number" placeholder="请填写" class="form-control btn3-report"/>%
</td>
<td>
<span class="left-report">应分佣金:</span><input type="number" placeholder="请填写" class="form-control btn3-report"/>
</td>
</tr>
</table>
</div>
<mark href="javascript:;"class="detail-modal-bargaininfo-commission-cancel-pic table-left"><img src="/resource/image/search_gb.png"/></mark>
</div>
</script>
......@@ -32,6 +32,18 @@ textarea {
overflow: hidden;
}
.por {
position: relative;
}
.poa {
position: absolute;
}
.flex{
display: flex;
}
.flex-center{
display: flex;
text-align: center;
......
......@@ -2,7 +2,7 @@
body{
background-color: white;
font-size: 14px;
padding: 20px;
max-width: 800px;
}
.list-area1{}
.list-area1>ul{
......@@ -34,3 +34,100 @@ body{
.list-area1>ul>li>div:nth-of-type(3){
padding-left: 10px;
}
.list-area2{
padding-top: 20px;
}
.list-area2>p{
font-weight: bold;
}
.fenyong-li{
padding-bottom: 7px;
}
.fenyong-li>mark{
right: 30px;
top: 25px;
background-color: transparent;
cursor: pointer;
}
.fenyong-li:nth-of-type(1)>mark{
display: none;
}
.fenyong-li>mark>img{
width: 20px;
}
.fenyong-sub-li{
flex: 50% 0 0;
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;
}
.btn-area{
width: 100%;
height: 50px;
padding-top: 50px;
}
.btn-area>div{
height: 50px;
}
.btn-area>div:nth-of-type(2){
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.btn-area>div:nth-of-type(2)>a{
color: white;
font-size: 14px;
padding: 6px 12px;
border-radius: 4px;
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
border: 1px solid #2d6ca2;
}
'use strict';
require(['vue', 'css!style/submit_report_pc.css', 'jquery0325', 'common'], function(Vue, VConsole) {
var shop_id = getUrlParam('shop_id');
var user_info_obj = JSON.parse(decodeURIComponent(localStorage.getItem('pcUserInfo'))); //读取缓存
var order_info_obj = JSON.parse(decodeURIComponent(getUrlParam('packdata')));//获取订单相关信息
var _doc = $(document);
console.log(user_info_obj);
console.log(order_info_obj);
var vm = new Vue({
el: '#app',
data: {
user_info_obj,
d: {}
order_info_obj,
house_number: '',//商铺编号
is_open: '',//是否开业
industry_type: '',//业态
trade_type: '',//成交类型
price: '',//成交价格
commission: '',//佣金
estimated_receipt_date: ''//预计收款时间
},
created: function() {
var _this = this;
document.body.style.display = 'block';
$('.list-area2>ul').append($('#fenyong_li_tpl').html());
},
mounted: function() {
var _thisV = this;
_thisV.$nextTick(function(){
var _ajaxObjTel = null;
_doc.on('input', '.add_input_ywy', function() {
var _$this = $(this);
//当分佣方的值为5,合作方的时候,才能查询
var _thisVal = $.trim(_$this.val());
_$this.removeAttr('data-id'); //移除之前携带的信息
if(_thisVal != '') {
_ajaxObjTel && _ajaxObjTel.abort();
_ajaxObjTel = $.ajax({
type: 'GET',
url: '/index/getBroker_new',
data: {
'phone': $.trim(_$this.val())
},
timeout: 30000,
dataType: 'json',
beforeSend: function() {},
success: function(data) {
if(typeof data === 'object') {
if(data.code == 200) {
if(data['data'].length > 0) {
var _htmlTemp = '';
$.each(data['data'], function(i, item) {
_htmlTemp += '<li data-id="{3}">{0}-{1}</li>'.stringFormatObj({
'0': item['name'],
'1': item['phone'],
'3': item['id']
});
});
_$this.next().show().html(_htmlTemp);
} else {
_$this.next().html('');
};
} else {
alert(data['msg']);
};
} else {
alert('数据错误');
};
},
error: function() {},
complete: function(xhr, textStatus) {
if(textStatus === 'timeout') {
alert('请求超时');
};
}
});
}else{
_$this.next().hide();
}
});
//业务员选择输入框,输入后的下拉列表项点击
_doc.on('click', '.add_input_ywy+ul>li', function() {
var _$this = $(this);
var _id = _$this.attr('data-id');
_$this.parent().prev().val(_$this.html()).attr('data-id', _id);
_$this.parent().html('').hide();
});
//增加符号点击事件
_doc.on('click', '.fenyong-add-area>img', function(e){
e.preventDefault();
e.stopPropagation();
if($('.fenyong-li').length>=5){
alert('最多添加5条');
return false;
}else{
$('.list-area2>ul').append($('#fenyong_li_tpl').html());
};
});
//删除符号点击事件
_doc.on('click', '.fenyong-li>mark', function(e){
e.preventDefault();
e.stopPropagation();
if(confirm('确认删除吗?')){
$(this).parent().remove();
};
});
});
},
methods: {
hidePhone(t) {
return hideTel(t);
},
refreshHouseDetails(){//是否对客户公开 保存后 刷新商铺详情页面
save() {//是否对客户公开 保存后 刷新商铺详情页面
var _this = this;
if(_this.house_number == ''){
alert('请填写商铺号');
return false;
};
if(_this.is_open == ''){
alert('请填写是否开业');
return false;
};
if(_this.industry_type == ''){
alert('请填写业态');
return false;
};
if(_this.trade_type == ''){
alert('请填写成交类型');
return false;
};
if(_this.commission == ''){
alert('请填写佣金');
return false;
};
if(_this.estimated_receipt_date == ''){
alert('请填写预计收款时间');
return false;
};
var _data = {
'AuthToken': _this.user_info_obj.AuthToken,//当前账号id
'submit_agent_id': _this.user_info_obj.id,//当前账号id
'submit_agent_name': _this.user_info_obj.name,//当前账号昵称
'report_id': _this.order_info_obj.id,//成交报告id
'order_id': _this.order_info_obj.order_id,//订单id
'order_no': _this.order_info_obj.order_no,//订单编号
'house_number': _this.house_number,//商铺编号
'is_open': _this.is_open,//是否开业
'industry_type': _this.industry_type,//业态
'trade_type': _this.trade_type,//成交类型
'price': _this.price,//成交价格
'commission': _this.commission,//佣金
'estimated_receipt_date': _this.estimated_receipt_date//预计收款时间
};
var _subLiObj = $('.fenyong-li');
var _isBreak = false;
var _dataArr = [];
$.each(_subLiObj, function(i, v) {
var _$v = $(v);
var _role = _$v.find('.fenyong-fang').val();
var _agent_id = _$v.find('.add_input_ywy').attr('data-id');
var _scale = _$v.find('.fenyong-rate').val();
var _scale_fee = _$v.find('.yingfen-yongjin').val();
if(_role == ''){
alert('请填写分佣方');
_isBreak = true;
return false;
};
if(!_agent_id){
alert('请填写业务员');
_isBreak = true;
return false;
};
if(_scale == ''){
alert('请填写分佣比例');
_isBreak = true;
return false;
};
if(_scale_fee == ''){
alert('请填写应分佣金');
_isBreak = true;
return false;
};
_dataArr.push({
'role': _role,
'agent_id': _agent_id,
'scale': _scale,
'scale_fee': _scale_fee,
});
});
if(_isBreak){
//未验证通过,跳出函数
return false;
};
_data['commission_arr'] = JSON.stringify(_dataArr);
$.ajax({
type: 'get',
url: '/broker/getShopDetail',
data: {
'id': shop_id,
'site_area': 4, //pc后台固定传4
'AuthToken': _this.user_info_obj.AuthToken
},
type: 'POST',
url: '/broker/bargain', //约带看记录 对接接口
data: _data,
timeout: 30000,
dataType: 'json',
beforeSend: function() {},
success: function(_data) {
if(typeof _data === 'object') {
_this.dataCode = _data['code'];
if(_data['code'] == '200') {
_this.select_public=_data.data.is_show;
_this.select_public_var=_data.data.is_show;
_this.d = _data.data;
success: function(data) {
if(typeof data === 'object') {
if(data.code == 200) {
alert('提交成功');
$('#modal-report', parent.document).find('.close').click();
} else {
layerTipsX(_data['msg']);
}
alert(data['msg']);
};
} else {
layerTipsX('数据错误');
alert('数据错误');
};
},
error: function() {
layerTipsX('enter error');
alert('error');
},
complete: function(xhr, textStatus) {
if(textStatus === 'timeout') {
//处理超时的逻辑
layerTipsX('请求超时,请重试');
alert('请求超时');
};
}
});
},
clickPublicUser(t){//判断有权限的人 才能点击 c端公开
return check_auth(t);
}
},
computed: {
dealPrice: function() {
let _this = this;
if(_this.d.rent_type == '1') {
return '租金均价 :' + _this.d.rent_price + '元/月';
} else if(_this.d.rent_type == '2') {
return '营业额扣点 :' + _this.d.rent_price + '%';
}else if(_this.d.rent_type == '3') {
return '租金均价 :' + _this.d.rent_price + '元/天/m²';
} else {
return '租金均价 :' + _this.d.rent_price + '元/年';
}
}
}
});
});
\ No newline at end of file
......@@ -337,6 +337,18 @@ a:hover{
/*width: 1090px;*/
width: 900px;
}
.modal-iframe-900>div{
width: 900px;
}
.modal-iframe-800>div{
width: 800px;
}
.modal-iframe-750>div{
width: 750px;
}
.modal-iframe-700>div{
width: 700px;
}
.iframe-shop-detail{
border: none;
width: 100%;
......@@ -345,6 +357,13 @@ a:hover{
height: 600px;
}
.iframe-submit-report{
border: none;
width: 100%;
max-width: 900px;
height: 600px;
}
.menu-sub-alink.active-a{
/*background-color: #ff9419!important;*/
background-color: rgba(255, 148, 25,.7)!important;
......
......@@ -20,7 +20,7 @@ define(['doT', 'text!temp/inspectionRecord_list_template_tpl.html', 'css!style/h
event: function() {
var _doc = $(document);
function  getPreMonth(date)  {            
function  getPreMonth(date)  {            
var  arr  =  date.split('-');            
var  year  =  arr[0];             
var  month  =  arr[1];             
......@@ -80,6 +80,13 @@ define(['doT', 'text!temp/inspectionRecord_list_template_tpl.html', 'css!style/h
e.stopPropagation();
$('.iframe-time-line').attr('src', '/app_broker/timeline_pc?order_id=' + record.record_id);
});
_doc.on('click', 'a[href="#modal-report"]', function(e) { //提交成交报告弹出框
var _packdata = $(this).closest('tr').attr('data-data');
e.preventDefault();
e.stopPropagation();
$('.iframe-submit-report').attr('src', '/app_broker/submit_report_pc?packdata=' + _packdata);
});
$("#search").click(function() { //搜索
record.getList(1);
});
......@@ -87,26 +94,7 @@ define(['doT', 'text!temp/inspectionRecord_list_template_tpl.html', 'css!style/h
document.getElementById("form_search").reset();
$('#guest_stores').html('');
});
//增加分佣方
//详情弹出框,成交信息里的实收佣金相关的事件
var _iYJAAObj = $('.detail-modal-bargaininfo-commission-addarea');
_doc.on('click', '#bargaininfo_commission_add_btn>img', function(e){
e.preventDefault();
e.stopPropagation();
if($('.detail-modal-bargaininfo-commission-addarea>div').length>=5){
alert('最多添加5条');
return false;
}else{
_iYJAAObj.append($('#add_report').html());
};
});
//详情弹出框,成交信息里的实收佣金相关的事件,点击x删除这条
_doc.on('click', '.detail-modal-bargaininfo-commission-cancel-pic', function(e){
e.preventDefault();
e.stopPropagation();
$(this).parent().remove();
});
},
getList: function(pageNo) { //获取约带看记录列表
record.pageNo = pageNo;//接收参数
......
......@@ -480,7 +480,7 @@ define(['doT', 'text!temp/reportList_template_tpl.html', 'css!style/home.css', '
if(data['data'].length > 0) {
var _htmlTemp = '';
$.each(data['data'], function(i, item) {
_htmlTemp += '<li data-id="{3}">{0}-{1}<li>'.stringFormatObj({
_htmlTemp += '<li data-id="{3}">{0}-{1}</li>'.stringFormatObj({
'0': item['name'],
'1': item['phone'],
'3': item['id']
......
<script id="inspectionRecord_list_tpl" type="text/template">
[% if(it&&it.length!=0) { %]
[% for(var item in it){ %]
<tr class="text-center">
<tr class="text-center" data-data="[%= encodeURIComponent(JSON.stringify(it[item])) %]">
<!--对接接口-->
<td>[%= it[item]['order_id'] %]</td>
<td>[%= it[item]['user_name'] %]</td>
......@@ -12,8 +12,9 @@
<td>[%= it[item]['predict_see_time'] %]</td>
<td>
<a class="btn1 btn-success timeline" href="#modal-time" data-toggle="modal" data-id='[%= it[item]["order_id"] %]'>时间轴</a>
<a class="btn1 btn-success submit-report" href="#modal-report" data-toggle="modal" data-id='[%= it[item]["order_id"] %]'>提交成交报告</a>
[% if(check_auth('broker/bargain')) { %]
<a class="btn1 btn-success submit-report" href="#modal-report" data-toggle="modal" data-id='[%= it[item]["order_id"] %]'>提交成交报告</a>
[% } %]
</td>
</tr>
[% } %]
......
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