lcc
482 lines
21 KiB
PHP
482 lines
21 KiB
PHP
<div class="am-form am-form-horizontal" style="width: 98%;padding-top: 10px">
|
|
<div id="vue-edit">
|
|
<div class="am-g">
|
|
<div class="col-sm-12" style="margin-bottom: 20px; padding-left: 0px;">
|
|
<div class="col-sm-2">
|
|
<div class="my-panel">
|
|
<div class="text-center">
|
|
状态
|
|
</div>
|
|
<div class="text-center" style="padding-top: 5px;">
|
|
<select id="status" v-model="info.status">
|
|
<template v-for="(v,i) in statusAry">
|
|
<option :value="i">{{v}}</option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-form-inline" style="padding-right: 10px;padding-top: 12px;">
|
|
<div class="text-right">
|
|
<div class="am-form-group ml10">
|
|
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-default"
|
|
@click="editType(1)" v-if="edit_index==1">取消编辑</a>
|
|
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-default"
|
|
@click="editType(1)" v-else>编辑状态</a>
|
|
</div>
|
|
<div class="am-form-group ml10" v-if="edit_index==1">
|
|
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-success"
|
|
@click="saveEdit()">修改状态</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
客户信息
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd am-g">
|
|
<table width="100%" style="margin-left: 10px;margin-right: 10px;">
|
|
<tr>
|
|
<td class="table-td"><span class="mr5">客户姓名:</span>{{info.name}}</td>
|
|
<td class="table-td"><span class="mr5">客户电话:</span>{{info.mobile}}
|
|
<a href="javascript:void(0);"
|
|
data-modal="/common/bind_mobile?id=<?= $info['id'] ?>&type=customer"
|
|
class="am-btn am-btn-sm am-btn-success ml5" data-title="获取手机号"
|
|
v-if="info.role!=8">
|
|
拨打
|
|
</a>
|
|
</td>
|
|
|
|
<td class="table-td"><span class="mr5">归属门店:</span>{{info.biz}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="table-td"><span class="mr5">客户等级:</span>{{info.level}}</td>
|
|
<td class="table-td"><span class="mr5">客户来源:</span>{{info.of_title}}</td>
|
|
<td class="table-td"><span class="mr5">客户位置:</span>{{info.poi}}</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td class="table-td"><span class="mr5">{{info.time_name}}:</span>{{info.p_time}}</td>
|
|
<td class="table-td"><span class="mr5">微信好友:</span>{{info.wx_name}}</td>
|
|
<td class="table-td"><span class="mr5">重点关注车型:</span>{{info.brand_detail}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="table-td"><span class="mr5">平安推荐:</span>{{info.cf_name}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
到店信息
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd am-g">
|
|
<table width="100%" style="margin-left: 10px;margin-right: 10px;">
|
|
<tr v-for="(tr, i) in toshop">
|
|
<td class="table-td" v-for="(td, j) in tr"><span class="mr5">{{td.title}}:</span>{{td.value}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
客户画像
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd am-g">
|
|
<table width="100%" style="margin-left: 10px;margin-right: 10px;">
|
|
<template v-for="(v,i) in info.tag">
|
|
<tr>
|
|
<td class="table-td" style="width: 80%">
|
|
<table>
|
|
<tr v-if="v.type=='checkbox'">
|
|
<td style="min-width: 80px">{{v.name}}:</td>
|
|
<td>
|
|
<template v-for="(v2,i2) in v.list">
|
|
<input type="checkbox" :value='v2.checked'
|
|
v-model="v2.checked"> {{v2.name}}
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
<tr v-else>
|
|
<td style="min-width: 80px">{{v.name}}:</td>
|
|
<td>
|
|
<template v-for="(v2,i2) in v.list">
|
|
<input type="radio" :value='v2.id'
|
|
v-model="v.value"> {{v2.name}}
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr>
|
|
<td>
|
|
<div class="am-form-inline" style="padding-top: 10px;">
|
|
<div class="text-left pt10">
|
|
<div class="am-form-group">
|
|
<a href="javascript:void(0)"
|
|
class="am-btn am-btn-sm am-btn-success"
|
|
@click="saveEdit(3)">保存信息</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12" v-if="info.tag_intention">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
客户意向
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd am-g">
|
|
<table width="100%" style="margin-left: 10px;margin-right: 10px;">
|
|
<template v-for="(v,i) in info.tag_intention">
|
|
<tr v-if="v.value_str">
|
|
<td class="table-td" style="width: 80%">
|
|
<table>
|
|
<tr>
|
|
<td style="min-width: 80px">{{v.name}}:</td>
|
|
<td>
|
|
{{v.value_str}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12" v-if="info.tag_defeat">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
战败标签
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd am-g">
|
|
<table width="100%" style="margin-left: 10px;margin-right: 10px;">
|
|
<template v-for="(v,i) in info.tag_defeat">
|
|
<tr v-if="v.value_str">
|
|
<td class="table-td" style="width: 80%">
|
|
<table>
|
|
<tr>
|
|
<td style="min-width: 80px">{{v.name}}:</td>
|
|
<td>
|
|
{{v.value_str}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="am-u-lg-12">
|
|
<div class="am-panel am-panel-default">
|
|
<div class="am-panel-hd">
|
|
<span href="javascript:void(0)" style="font-size: 20px">
|
|
操作日志
|
|
</span>
|
|
<span style="float:right;margin-top:5px">
|
|
<a href="javascript:void(0)" @click="logModal()">新增小记</a>
|
|
</span>
|
|
</div>
|
|
<div class="am-panel-bd">
|
|
<div class="am-tabs" data-am-tabs>
|
|
<div class="am-tab-panel am-active">
|
|
<table class="am-table">
|
|
<thead>
|
|
<tr>
|
|
<th width="15%"><span>操作人员</span></th>
|
|
<th width=""><span>内容</span></th>
|
|
<th width="13%"><span>类型</span></th>
|
|
<th width="15%"><span>操作时间</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($logs as $key => $val) { ?>
|
|
<tr>
|
|
<td style="vertical-align:middle;word-wrap:break-word"><?= $val['uname'] ?></td>
|
|
<td style="vertical-align:middle;word-wrap:break-word">
|
|
<? if ($val['rec_url']) { ?>
|
|
<audio controls="controls">
|
|
<source src="<?= $val['rec_url'] ?>"/>
|
|
</audio>
|
|
<? } else if ($val['rec_text']) { ?>
|
|
<?= $val['rec_text'] ?>
|
|
<? } else { ?>
|
|
<?= $val['log'] ?>
|
|
<? } ?>
|
|
<? if ($val['imgs']) { ?>
|
|
<div class="photo-upload" style="padding-top: 10px;">
|
|
<?php foreach ($val['imgs'] as $key1 => $val1) { ?>
|
|
<div class="photo-upload-item">
|
|
<a href="javascript:void (0);">
|
|
<img src="<?= $val1 ?>"
|
|
class="img-thumbnail" data-tips-image
|
|
style="height:auto;max-height:100px;min-width:100px">
|
|
</a>
|
|
</div>
|
|
<? } ?>
|
|
</div>
|
|
<? } ?>
|
|
</td>
|
|
<td style="vertical-align:middle;word-wrap:break-word"><?= $val['type_name'] ?></td>
|
|
<td style="vertical-align:middle;word-wrap:break-word;"><?= $val['c_time'] ?></td>
|
|
</tr>
|
|
<?php } ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="log-modal" style="display: none;">
|
|
<div style="padding-top: 20px;">
|
|
<div class="am-form-group">
|
|
<label class="am-para-label label-width">内容：</label>
|
|
<div class="am-para-input" style="width: 80%">
|
|
<textarea name="log" rows="5" placeholder="请输入内容" v-model="goods.log"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var vue_obj;
|
|
$(document).ready(function () {
|
|
vue_obj = new Vue({
|
|
el: '#vue-edit',
|
|
data: {
|
|
edit_index: 0,
|
|
info: {},
|
|
statusAry: [],
|
|
toshop: [],
|
|
logs: [],
|
|
goods: {"imgs_url": [], "imgs": [], "log": ''}
|
|
},
|
|
mounted: function () {
|
|
var that = this;
|
|
that.info = <?=json_encode($info)?>;
|
|
that.statusAry = <?=json_encode($statusAry)?>;
|
|
that.toshop = <?=json_encode($toshop)?>;
|
|
that.logs = <?=json_encode($logs)?>;
|
|
},
|
|
computed: {},
|
|
created: function () {
|
|
},
|
|
updated: function () {
|
|
},
|
|
methods: {
|
|
editType: function (index) {
|
|
var vm = this;
|
|
if (vm.edit_index == index) {
|
|
vm.edit_index = 0;
|
|
} else {
|
|
vm.edit_index = index;
|
|
}
|
|
},
|
|
logModal: function () {
|
|
var vm = this;
|
|
layer.open({
|
|
type: 1,
|
|
area: ['50%'], //宽高
|
|
content: $('#log-modal'),
|
|
title: '新增小记',
|
|
shade: false,
|
|
btn: ['保存', '取消'],
|
|
yes: function (index) {
|
|
$.ajax({
|
|
url: '/receiver/customer/add_log',
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
act_type: 1, id: <?= $info['id'] ?>, type: 0, log: vm.goods.log, imgs: vm.goods.imgs
|
|
},
|
|
beforeSend: function () {
|
|
layer.load(1, {
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|
});
|
|
},
|
|
success: function (data) {
|
|
if (data['code']) {
|
|
layer.msg(data.msg, {
|
|
icon: 1,
|
|
time: 2000
|
|
}, function () {
|
|
$.form.reload();
|
|
});
|
|
} else {
|
|
layer.msg(data.msg, {icon: 2});
|
|
}
|
|
},
|
|
complete: function () {
|
|
layer.closeAll('loading');
|
|
},
|
|
});
|
|
}
|
|
});
|
|
},
|
|
saveEdit: function (editType) {
|
|
var vm = this;
|
|
vm.info.editType = editType;
|
|
$.ajax({
|
|
url: '/receiver/customer/edit',
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
info: vm.info
|
|
},
|
|
beforeSend: function () {
|
|
layer.load(1, {
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|
});
|
|
},
|
|
success: function (data) {
|
|
loading = false;
|
|
if (data['code']) {
|
|
layer.msg(data.msg, {
|
|
icon: 1,
|
|
time: 2000
|
|
}, function () {
|
|
$.form.reload();
|
|
});
|
|
} else {
|
|
layer.msg(data.msg, {icon: 2});
|
|
}
|
|
},
|
|
complete: function () {
|
|
loading = false;
|
|
layer.closeAll('loading');
|
|
},
|
|
});
|
|
},
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
.input-group {
|
|
width: 100%;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.input-group-addon {
|
|
padding: 0px 10px 0px 0px;
|
|
font-size: 1.6rem;
|
|
font-weight: normal;
|
|
line-height: 0px;
|
|
color: #333;
|
|
text-align: right;
|
|
background-color: #fff;
|
|
border: 0px solid #fff;
|
|
border-radius: 0px;
|
|
width: 120px;
|
|
}
|
|
|
|
.table-td {
|
|
width: 20%;
|
|
padding-top: 15px;
|
|
line-height: 37px;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.my-ul ul li {
|
|
padding: 10px;
|
|
}
|
|
|
|
.my-panel {
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
height: 90px;
|
|
}
|
|
|
|
.auto-content {
|
|
width: min-content;
|
|
min-width: 50%;
|
|
}
|
|
|
|
.btn-group .disabled {
|
|
background-color: #eee;
|
|
opacity: 1;
|
|
}
|
|
|
|
.photo-upload {
|
|
position: relative;
|
|
font-size: 0;
|
|
}
|
|
|
|
.photo-upload:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.photo-upload-item {
|
|
position: relative;
|
|
float: left;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
font-size: 12px; /*display:inline-block;width:120px;*/
|
|
}
|
|
|
|
.photo-upload-item > img {
|
|
}
|
|
|
|
.photo-upload-item-check,
|
|
.photo-upload-item-remove {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
border: 1px solid #fff;
|
|
background-color: #eee;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.photo-upload-item:hover .photo-upload-item-remove {
|
|
opacity: 1;
|
|
transition: all .4s ease
|
|
}
|
|
|
|
.photo-upload-item-check {
|
|
opacity: 1;
|
|
background-color: #36f;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/appitem/font-awesome.min.css?v=1581252500">
|