weCom/pages/index/custom.vue

<template>
	<view class="content">
		<!-- <view class="contLineBox"  v-if="!customerInfo">
			<view class="contLine" >
				<view class="lineTitle">手机号</view>
				<view class="lineRgiht2" @click="editIphone">请输入手机号，以获取更多信息
				
				</view>
			</view>
		</view> -->
		<view class="contLineBox" >
			<view class="contLine" v-if="customerInfo.mobilePhone">
				<view class="lineTitle" >手机号</view>
				<view class="lineRgiht lineRgihtSjh" @click="editIphone">
					<span>{{customerInfo.mobilePhone}}</span> 
				    <image class="jiantou" src="../../static/img/big_rightArrow.png" mode=""></image>
				</view>
			</view>
			<view class="contLine" v-if="!customerInfo.mobilePhone">
				<view class="lineTitle">手机号</view>
				<view class="lineRgiht2" @click="editIphone">请输入手机号，以获取更多信息
				
				</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">姓名</view>
				<view class="lineRgiht">{{customerInfo.customerName}}</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">客户来源</view>
				<view class="lineRgiht">{{customerInfo.name}}</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">客户等级</view>
				<view class="lineRgiht">{{customerInfo.levelName}}</view>
			</view>
			<view class="contLine" style="padding-bottom: 14rpx;">
				<view class="lineTitle">客户标签</view>
				<view class="titleBox">
					<view class="title" v-for="(item,index) in customerInfo.lables">{{item.name}}</view>
					
				</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">客户类型</view>
				<view class="lineRgiht" v-if="customerInfo.cusromerType==1">个人</view>
				<view class="lineRgiht" v-if="customerInfo.cusromerType==2">单位</view>
			</view>
			<view class="contLine" v-if="customerInfo.cusromerType==2">
				<view class="lineTitle">单位名称</view>
				<view class="lineRgiht">{{customerInfo.unitName}}</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">服务顾问</view>
				<view class="lineRgiht">{{customerInfo.usersName}}</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">所属门店</view>
				<view class="lineRgiht">{{customerInfo.shopName}}</view>
			</view>
			<view class="contLine">
				<view class="lineTitle">创建时间</view>
				<view class="lineRgiht">{{customerInfo.createTime}}</view>
			</view>
		</view>
		<view class="box" >
			<view class="boxTitle">信用额度</view>
			<view class="creditBox">
				<view class="creditLine">
					<view class="creditTitle">剩余记账：</view>
					<view class="creditNum">{{customerInfo.stayInMoney}}</view>
				</view>
				<view class="creditLine">
					<view class="creditTitle">超期账款：</view>
					<view class="creditNum">{{customerInfo.overdueMoney}}</view>
				</view>
				<view class="creditLine">
					<view class="creditTitle">最近到期日：</view>
					<view class="creditNum">{{customerInfo.dueDate}}</view>
				</view>
				<view class="creditLine">
					<view class="creditTitle">可用额度：</view>
					<view class="creditNum" v-if="keyongMoney">{{keyongMoney.toFixed(2)}}</view>
				</view>
				<view class="creditLine">
					<view class="creditTitle">信用额度：</view>
					<view class="creditNum">{{customerInfo.creditMoney}}</view>
				</view>
			</view>
		</view>
		<view class="box" >
			<view class="boxTitle2" @click="moreBtn">更多
			   <image class="boxIcon"  v-if="moreShow" src="../../static/img/icon_arrow_up.png" mode=""></image>
			    <image class="boxIcon"  v-if="!moreShow" src="../../static/img/icon_arrow_down.png" mode=""></image>
			</view>
			<view v-if="moreShow">
				<view class="contLine">
					<view class="lineTitle">证件类型</view>
					<view class="lineRgiht">{{customerInfo.idType}}</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">证件号码</view>
					<view class="lineRgiht">{{customerInfo.idCode}}</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">所在地区</view>
					<view class="lineRgiht">{{customerInfo.provinceName}}{{customerInfo.cityName}}{{customerInfo.areaName}}</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">详细地址</view>
					<view class="lineRgiht">{{customerInfo.address}}</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">推广员工</view>
					<view class="lineRgiht">{{customerInfo.proUserName}}</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">推广客户</view>
					<view class="lineRgiht">{{customerInfo.proCustomerName}}</view>
				</view>
				<view class="contLine"  >
					<view class="lineTitle">生日</view>
					<view class="lineRgiht" v-if="customerInfo">
						<span v-if="customerInfo.birthday">{{customerInfo.birthday.slice(0,10)}}</span>
					
					</view>
				</view>
				<view class="contLine">
					<view class="lineTitle">客户备注</view>
					<view class="lineRgiht">{{customerInfo.comment}}</view>
				</view>
			</view>
			
		</view>
		<view style="height: 40rpx;"></view>

		<uni-popup ref="popup" type="bottom" >
			<view class="popupBox">
			  <view class="popupTitleBox">
				  <view class="popupTitle">修改手机号</view>
				  <image src="../../static/img/cha.png" mode="" @click="pBcancel" class="chaImg"></image>
			  </view>
			  <view class="popupMs">此处修改手机号后，将根据新手机号重新匹配客户信息</view>
			  <view class="inputBox">
				  <!-- <view class="inputMs">手机号</view> -->
				  <input type="text" v-model="extUserMobile" class="iphoneInput" placeholder="请输入手机号" />
			      <image v-show="extUserMobile" src="../../static/img/icon_delete.png" mode="" class="delInput" @click="extUserMobile=''"></image>
			  </view>
			  
			  <view class="pBottom">
				   <view class="pBcancel" @click="pBcancel">取消</view>
				   <view class="pBBtn" @click="extCustomerMobile">确定</view>
			  </view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:['token'],
		data() {
			return {
				extUserMobile:'',
				customerInfo:'',
				customerId:'',
				unionID:'',
				keyongMoney:'',
				moreShow:false,
				userId:'',
				corpID:'',
			}
		},
		onLoad() {
		 
		},
		
		methods: {
			moreBtn(){
				this.moreShow=!this.moreShow
			},
			getdata(){
				this.extCustomerInfo()
			},
			extCustomerInfo(){
				uni.showLoading({
				 	title: '加载中'
				}); 
				var that=this;
				this.userId=uni.getStorageSync('userId')
				this.corpID=uni.getStorageSync('corpID')
			/* 	this.corpID='wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g'
				this.agentId='1000051' */
				this.$http('enterprise/wechat/extCustomerInfo', {
				   corpID:this.corpID,
				   extUserId:this.userId,
				   token:this.token
				}, 'GET').then(res => {
					uni.hideLoading();
					if(res.code!=1){
						this.customerInfo=''
					}else{
						this.customerInfo=res.data.customerInfo
						this.customerId=this.customerInfo.id
						var unionID = this.customerInfo.unionID
						uni.setStorage({
							key: 'customerId',
							data: that.customerId,
							 success: function () {	 }
						});
						uni.setStorage({
							key: 'unionID',
							data:unionID ,
							 success: function () {	 }
						});
						this.keyongMoney= this.customerInfo.creditMoney - this.customerInfo.stayInMoney
						this.keyongMoney.toFixed(2)
					}
				   
				})
			},
		  extCustomerMobile(){
			  var that=this;
			  uni.showLoading({
			   	title: '加载中'
			  }); 
			  this.userId=uni.getStorageSync('userId')
			  this.corpID=uni.getStorageSync('corpID')
			 /* this.corpID='wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g'
			  this.agentId='1000051' */
			  this.$http('enterprise/wechat/extCustomerMobile', {
			     corpID:this.corpID,
			     extUserId: this.userId,
			     extUserMobile:this.extUserMobile
			  }, 'POST').then(res => {
				   uni.hideLoading();
				  if(res.code!=1){
					  	 uni.showToast({
					  	 	title: res.msg,
					  	 	icon: 'none',
					  	 	duration: 3000
					  	 });
				  }else{
					  uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 3000
					  });
					  this.pBcancel()
					  this.extCustomerInfo()
					  this.$emit('getUser')
				  }
			     
				  
			  	
			  }).catch(err=>{
				  
			  })
		  },
		  
          editIphone(){
			  if(this.customerInfo){
				    this.extUserMobile = this.customerInfo.mobilePhone
			  }
			
			 
			   this.$refs.popup.open('bottom')
		  },
		  pBcancel(){
			  this.$refs.popup.close()
		  }
		}
	}
</script>

<style scoped>
	.contLineBox{
		background: #fff;
	}
	.contLine{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6;
		padding: 28rpx 24rpx;
		font-size: 28rpx;
	}
	.lineTitle{
		color: #666666;
		width:200rpx ;
	}
	.lineRgiht{
		color: #3C3C3C;
	}
	.lineRgiht2{
		color: #FF8113;
	}
	.titleBox{
		display: flex;    flex-wrap: wrap;
width: 500rpx;justify-content: flex-end;
		
	}
	.title{
		/* height: 36rpx; */
		border-radius: 4rpx;
		border: 1px solid #FF8113;
	/* 	line-height: 36rpx; */
		font-size: 24rpx;
		color: #FF8113;
		padding: 4rpx 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		
	}
	.box{
		margin-top: 20rpx;background: #fff;
	}
	.boxTitle{
		font-weight: 500;
		font-size: 28rpx;
		color: #3C3C3C;
		padding: 28rpx 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.creditBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}
	.creditLine{
		width: 50%;display: flex;
	
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		font-size: 26rpx;
		color: #666666;
	}
	.creditNum{
		color: #3C3C3C;
	}
	.creditTitle{
			padding-left: 24rpx;
	}
	.boxTitle2{
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		color: #3C3C3C;
		padding: 28rpx 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.boxIcon{
		width: 26rpx;height: 16rpx;
		margin-top: 6rpx;
	}
	.popupBox{
		width: 750rpx;
		height: 809rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: fixed;
		    left: 0;
		    bottom: 0;
	}
	.popupTitleBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.popupTitle{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
		font-weight: 600;
	}
	.chaImg{
		width: 27rpx;height: 27rpx;margin-top: 9rpx;
	}
	.popupMs{
		font-size: 26rpx;
		color: #FF8113;
		padding-left: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.inputBox{
		display: flex;
		padding: 0 24rpx;
		line-height: 98rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.iphoneInput{
		line-height: 1;
		height: 98rpx;
		/* padding-left: 40rpx; */
		 -webkit-text-size-adjust: none;
	}
	.iphoneInput{
		line-height: 98rpx;
	}
	.pBottom{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding: 24rpx 0rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(153,153,153,0.2);
		display: flex;
		justify-content: space-around;
	}
	.pBcancel{
		width: 331rpx;
		
		border-radius: 37rpx;
		border: 2rpx solid #DDDDDD;
	   padding: 16rpx 0;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #3C3C3C;
	}
	.pBBtn{
		width: 331rpx;
		padding: 16rpx 0;
		background: #FF8113;
		border-radius: 37rpx;
	
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FEFFFE;
	}
	.jiantou{
		width: 30rpx;height: 30rpx;
		margin-top: 4rpx;
	}
	.lineRgihtSjh{
		display: flex;
	}
	.delInput{
		width: 30rpx;
		height: 30rpx;
		margin-top: 30rpx;
	}
	.inputBox{
		justify-content: space-between;
	}
</style>