<style>
.MyCustomerDetail {}
.MyCustomerDetail .saleMate{width: 346px; height: auto; background: #E6E6E6; border-radius: 4px; margin:20px 0; padding: 16px;}
.MyCustomerDetail .approvalNav{height: 52px;width: 100%; margin: 20px 0;}
.MyCustomerDetail .approvalNav>li{float: left; width: 116px; font-size: 14px; height: 52px; color: #666; text-align: center; line-height: 52px; background: #E9E9E9; cursor: pointer;}
.MyCustomerDetail .approvalNav>li.active{background: #fff; color: #333;}
.MyCustomerDetail .approvalNav .divActive{margin: -3px auto; width: 26px; height: 3px; background: #E95252;}
.MyCustomerDetailTable{width: 100%; font-size:14px; color: #333;}
.MyCustomerDetailTable tr{border-bottom: 2px solid #333;}
.MyCustomerDetailTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
.MyCustomerDetailTable tr{background: #fff;text-align: left;}
.MyCustomerDetailTable tr td{height: 60px; padding-left:25px; border-bottom:1px solid #f5f5f5; font-size: 14px; color: #333;}
.MyCustomerDetailbottomLayer{overflow: auto; position:absolute;height:200px;
z-index:50;bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 20px 20px 0;width: 100%;}
.MyCustomerDetailbottomLayer>p{border-left: 3px solid #E95252; text-indent: 15px; height: 14px; font-size: 14px; margin-bottom:20px; line-height: 14px; color: #000;}
.MyCustomerDetailbottomLayer .el-form-item__label{font-size: 12px!important;}
.MyCustomerDetailbottomLayer .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.MyCustomerDetailbottomLayer .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.MyCustomerDetailbottomLayer .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
}
.MyCustomerDetailbottomLayer .avatar {
width: 148px;
height: 148px;
display: block;
}
</style>
<template>
<div class="MyCustomerDetail">
<div class="MyCustomerDetailbottomLayer ownScrollbarStyle" style="height:500px;" v-show="addLayer1">
<p>修改客户信息</p>
<p class="fz12 color333 fbold" style="border: none; padding-left: 3px;">可直接保存</p>
<el-form label-width="80px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="门店名称：">
<el-input class='w200' v-model='updateMsg.CustomerName'></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系人姓名">
<el-input class='w200' v-model='updateMsg.Contact'></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<el-row :gutter="20" style='margin-top:13px;'>
<el-col :span="24">
<p class="fz12 color333 fbold" style="border: none; margin-bottom: 15px; padding-left: 20px;">需审核信息<span class="colorE95252 fz12 fwnormal">
(编辑门店地址后，客户将重新进入审核流程)
</span>
</p>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="区域：">
<el-select class='w200' filterable v-model='updateMsg.Province' @change='getCity'>
<el-option v-for='item in provinceList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
<el-select class='w200' filterable v-model='updateMsg.City' @change='getRegion'>
<el-option v-for='item in cityList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
<el-select class='w200' filterable v-model='updateMsg.District'>
<el-option v-for='item in regionList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="详细地址：">
<el-input v-model='updateMsg.Address' ></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="名片照片：">
<el-upload class="avatar-uploader"
action=""
:http-request="uploadImg"
accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false"
>
<img v-if="BusinessCardPhotos" :src="BusinessCardPhotos" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="门牌照片：">
<el-upload class="avatar-uploader"
action=""
:http-request="uploadImg1"
accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false"
>
<img v-if="HousePhotos" :src="HousePhotos" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="营业执照：">
<el-upload class="avatar-uploader"
action=""
:http-request="uploadImg2"
accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false"
>
<img v-if="Images" :src="Images" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<input type="button" class="normalBtn" value="保存" @click="saveUpdate()"/>
<input type="button" class="hollowFixedBtn" value="取消" @click="addLayer1=false"/>
</el-col>
</el-row>
</el-form>
</div>
<div class="MyCustomerDetailbottomLayer ownScrollbarStyle" v-show="addLayer">
<p>添加联系人</p>
<el-form :model="addMsg" ref="addMsg" label-position="right" :rules="rules" label-width="80px">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="姓名：" prop="contactName">
<el-input v-model='addMsg.contactName'></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职务：" prop="contactDuty">
<el-select v-model='addMsg.contactDuty' filterable placeholder="请选择">
<el-option
v-for="item in dutyList"
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="电话：" prop="contactPhone">
<el-input v-model='addMsg.contactPhone' ></el-input>
</el-form-item>
<el-form-item>
<p style="line-height: 18px; color: #E95252;">电话不可修改</p>
</el-form-item>
</el-col>
<el-col :span="6">
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<input type="button" class="normalBtn" value="保存" @click="submitForm('addMsg')"/>
<input type="button" class="hollowFixedBtn" value="取消" @click="resetForm('addMsg');addLayer=false"/>
</el-col>
</el-row>
</el-form>
</div>
<div class="saleMate">
<p>
<span class="fz16 color333">{{customerInfo.customerName}}</span>
<span class="fr">
<i class="iconfont icon-xiugai color999 fz14 cursorpointer" @click="addLayer1=true,addLayer=false,getMyCustomerInfo()"></i>
</span>
</p>
<p class="mt5">
<span v-for="item in customerInfo.brandNames" style="font-size: 12px; color: #666; background: #ccc; padding: 2px 3px; margin-right: 5px;">{{item}}</span>
</p>
<p class="mt5">
<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
<span class="fz12 color333">{{customerInfo.contactNumber}}</span>
</p>
<p>
<i class="iconfont icon-img_dizhi_small color999 fz14"></i>
<span class="fz12 color333">{{customerInfo.address}}</span>
</p>
</div>
<div class="approvalNav">
<li :class="{active:type==1}" @click="type=1">
通讯录
<div class="divActive" v-show="type==1"></div>
</li>
<li :class="{active:type==2}" @click="type=2">
拜访记录
<div class="divActive" v-show="type==2"></div>
</li>
<li :class="{active:type==3}" @click="type=3">
交易记录
<div class="divActive" v-show="type==3"></div>
</li>
<input type="button" class="fr normalBtn" value="新增通讯录" @click="addLayer=true;addLayer1=false"/>
</div>
<table class="MyCustomerDetailTable" border="0" cellspacing="0" cellpadding="0" v-show="type==1">
<tr>
<th width="20%">姓名</th>
<th width="30%">职务</th>
<th width="50%">电话</th>
</tr>
<tr v-for="item in contact">
<td class="fz16">{{item.contactName}}</td>
<td>{{item.dutyName}}</td>
<td>
<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
{{item.contactPhone}}
</td>
</tr>
<tr v-show="contact.length==0">
<td colspan="5" align="center">暂无</td>
</tr>
</table>
<table class="MyCustomerDetailTable" border="0" cellspacing="0" cellpadding="0" v-show="type==2">
<tr>
<th width="20%">门店</th>
<th width="20%">联系人</th>
<th width="20%">电话</th>
<th width="20%">状态</th>
<th width="20%">时间</th>
</tr>
<tr v-for="item in visitList">
<td class="fz16">{{item.contact}}</td>
<td>{{item.customerName}}</td>
<td>
<i class="iconfont icon-img_dianhua fz14" style="color: #09d49d;"></i>
{{item.contactNumber}}
</td>
<td>
<i class="iconfont icon-yiqueren fz14" style="color: #09d49d;"></i>
{{item.visitState=='1'?'未访问':'已沟通'}}
</td>
<td>
{{item.visitDateTime}}
</td>
</tr>
<tr v-show="visitList.length==0">
<td colspan="5" align="center">暂无</td>
</tr>
</table>
<el-pagination v-show="type==2"
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
<table class="MyCustomerDetailTable" border="0" cellspacing="0" cellpadding="0" v-show="type==3">
<tr>
<th width="25%">团名</th>
<th width="15%">人数</th>
<th width="20%">金额</th>
<th width="20%">状态</th>
<th width="20%">时间</th>
</tr>
<tr>
<td colspan="5" align="center">暂无</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data (){
return{
//辅助
BusinessCardPhotos:'',
HousePhotos:'',
Images:'',
addLayer:false,
addLayer1:false,
HousePhoto:[],
BusinessCardPhoto:[],
Image:[],
type:1,
id:0,
//请求
addMsg:{
infoID:0,
contactName:'',
contactPhone:'',
contactDuty:'',
},
updateMsg:{
CustomerName:'',
CustomerId:0,
Address:'',
Country:2,
Province:0,
Contact:'',
City:0,
District:0,
HousePhotos:[],
BusinessCardPhotos:[],
Images:[],
},
rules:{
contactName:[
{ required: true, message: '请输入门店名称', trigger: 'blur' }
],Contact:[
{ required: true, message: '请输入联系人姓名', trigger: 'blur' }
],
contactDuty:[
{ required: true, message: '请选择职务', trigger: 'change' }
],
contactPhone:[
{ required: true, message: '请输入联系人电话', trigger: 'blur' },
{pattern: /^1[1234567890]\d{9}$/, message: '请输入正确的手机'}
],
},
msg:{
pageIndex:1,
pageSize:10,
customerId:0,
},
currentPage:1,
total:0,
//返回
CustomerBrandList:[],
customerInfo:{},
contact:[],
visitList:[],
dutyList:[],
provinceList:[],
cityList:[],
regionList:[],
}
},
methods:{
uploadImg(file) {
//上传
let newArr = [];
newArr.push(file.file);
let path = "/Upload/Temporary/";
this.UploadSelfFileT(path, newArr, x => {
this.BusinessCardPhotos= this.domainManager().ViittoFileUrl + x.data.FilePath
});
},
uploadImg1(file) {
//上传
let newArr = [];
newArr.push(file.file);
let path = "/Upload/Temporary/";
this.UploadSelfFileT(path, newArr, x => {
this.HousePhotos= this.domainManager().ViittoFileUrl + x.data.FilePath
});
},
uploadImg2(file) {
//上传
let newArr = [];
newArr.push(file.file);
let path = "/Upload/Temporary/";
this.UploadSelfFileT(path, newArr, x => {
this.Images= this.domainManager().ViittoFileUrl + x.data.FilePath
});
},
resetForm(formName) {//弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
},
submitForm(addMsg) {//提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addCustomerInfo()
} else {
return false;
}
});
},
getCustomerBrandList(){ // 获取品牌
this.apipost('app_get_customer_brand',{},res=>{
if(res.data.resultCode==1){
this.CustomerBrandList = res.data.data;
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
addCustomerInfo(){
this.addMsg.infoID=this.id
this.apipost('app_AddCustomerContact',this.addMsg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
this.getMyCustomerInfo()
this.addLayer=false
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getMyCustomerInfo(){
this.apipost('app_GetMyCustomerInfo',{customerId:this.id},res=>{
if(res.data.resultCode==1){
let x=res.data.data
this.customerInfo=res.data.data
if(this.customerInfo.address.indexOf(',')!=-1){
this.customerInfo.address=this.customerInfo.address.split(',')[1]
}else{
this.customerInfo.address=this.customerInfo.address
}
this.contact=res.data.data.contact
this.updateMsg.CustomerName=x.customerName
this.updateMsg.Contact=x.ContactName
this.updateMsg.CustomerId=x.customerId
this.updateMsg.Address=x.address
this.updateMsg.Province=x.province
this.getCity1()
this.updateMsg.City=x.city
this.getRegion1()
this.updateMsg.District=x.district
if(x.businessCardPhotos&&x.businessCardPhotos.length>0)
{
this.BusinessCardPhotos=x.businessCardPhotos[0]
}
if(x.images&&x.images.length>0)
{
this.Images=x.images[0]
}
if(x.housePhotos&&x.housePhotos.length>0)
{
this.HousePhotos=x.housePhotos[0]
}
}else{}
},err=>{})
},
saveUpdate(){
if(this.updateMsg.District=='')
{
this.updateMsg.District=0
}
if(this.BusinessCardPhotos)
{ this.updateMsg.BusinessCardPhotos=[]
this.updateMsg.BusinessCardPhotos.push(this.BusinessCardPhotos)
}
if(this.HousePhotos)
{ this.updateMsg.HousePhotos=[]
this.updateMsg.HousePhotos.push(this.HousePhotos)
}
if(this.Images)
{ this.updateMsg.Images=[]
this.updateMsg.Images.push(this.Images)
}
let sheng=''
let shi=''
let qu=''
if(this.updateMsg.District=='')
{
this.updateMsg.District=0
}
if(this.updateMsg.City=='')
{
this.updateMsg.City=0
}
this.provinceList.forEach(item=>{
if(this.updateMsg.Province==item.ID)
{
sheng=item.Name
}
})
this.cityList.forEach(item=>{
if(this.updateMsg.City==item.ID)
{
shi=item.Name
}
})
this.regionList.forEach(item=>{
if(this.updateMsg.District==item.ID)
{
qu=item.Name
}
})
let AreaName=sheng+shi+qu
this.updateMsg.Address=AreaName+','+this.updateMsg.Address
this.apipost('app_customer_UpdateCustomerAddress',this.updateMsg,res=>{
if(res.data.resultCode==1){
this.$message.success(res.data.message)
this.getMyCustomerInfo()
this.addLayer1=false
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getVisitList(){
this.msg.customerId=this.id
this.apipost('app_customer_GetWebCustomerVisitListPage',this.msg,res=>{
if(res.data.resultCode==1){
this.total=res.data.data.count
this.visitList=res.data.data.pageData
}
else{}
},err=>{})
},
getDuty(){
this.apipost('app_today_visit_GetCustomerDutyEnum',{},res=>{
if(res.data.resultCode==1){
this.dutyList=res.data.data
}else{}
},err=>{})
},
getProvince(){
this.apipost('app_customer_GetChildList',{Id:2,"level":1},res=>{
if(res.data.resultCode==1){
this.provinceList=res.data.data
}
},err=>{})
},
getCity(){
this.apipost('app_customer_GetChildList',{Id:this.updateMsg.Province,"level":2},res=>{
if(res.data.resultCode==1){
this.cityList=res.data.data
this.regionList=[]
this.updateMsg.City=''
this.updateMsg.District=''
}
},err=>{})
},
getRegion(){
this.apipost('app_customer_GetChildList',{Id:this.updateMsg.City,"level":3},res=>{
if(res.data.resultCode==1){
this.regionList=res.data.data
this.updateMsg.District=''
}
},err=>{})
},
getCity1(){
this.apipost('app_customer_GetChildList',{Id:this.updateMsg.Province,"level":2},res=>{
if(res.data.resultCode==1){
this.cityList=res.data.data
}
},err=>{})
},
getRegion1(){
this.apipost('app_customer_GetChildList',{Id:this.updateMsg.City,"level":3},res=>{
if(res.data.resultCode==1){
this.regionList=res.data.data
}
},err=>{})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getVisitList()
},
},
mounted(){
this.id=this.$route.query.id;
if(this.$route.query.num){
this.type=Number(this.$route.query.num);
}
this.getCustomerBrandList()
this.getMyCustomerInfo()
this.getVisitList()
this.getDuty()
this.getProvince()
},
}
</script>