renshouH5/mine/clientDetail/clientDetail.vue

<template>
	<view>
		<view class="user-header dflex">
			<image class="header-pic" :src="info.avatar?info.avatar:'../../static/images/userimg.png'"></image>
			<view>
				<view class="user-name">{{info.nickName}}</view>
				<view class="ddflex">
					<block v-if="info.labelName&&info.labelName.length>0">
						<view class="user-tag user-tag-t" v-for="it,idx in info.labelName" :key="idx+'l'">{{it}}</view>
					</block>
				</view>
			</view>
		</view>

		<view class="form">
			<view class="form-title">客户资料</view>
			<view class="ddflex form-item">
				<view class="form-label">销售员工号</view>
				<view class="form-data fflex">{{info.manageSaleNo?info.manageSaleNo:'-'}}</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">姓名</view>
				<view class="form-data fflex">{{info.realName?info.realName:'-'}}</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">性别</view>
				<view class="form-data fflex">{{info.gender==1?'男':info.gender==2?'女':'-'}}</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">联系电话</view>
				<view class="form-data ddflex fflex">
					<view class="fflex ddflex">
						<text>{{info.mobile?styTelTextFn(info.mobile):'-'}}</text>
						<image v-if="info.mobile" style="width: 27rpx;height: 27rpx;margin-left: 10rpx;"
							src="../static/images/copy.png" @click="copy(info.mobile)"></image>
					</view>
					<view v-if="info.mobile" class="ddflex form-btn" @click.stop="callPhone(info.mobile)">
						<image style="width: 22rpx;height: 22rpx;margin-right: 10rpx;"
							src="../../static/pages/images/phone1.png"></image>
						联系
					</view>
				</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">客户类别</view>
				<view class="form-data fflex">
					<block v-if="info.customTypeName&&info.customTypeName.length>0">{{info.customTypeName.join(',')}}
					</block>
					<block>-</block>
				</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">客户来源</view>
				<view class="form-data fflex">小程序</view>
			</view>
			<!-- <view class="ddflex form-item">
				<view class="form-label">网格地址编码</view>
				<view class="form-data fflex">-</view>
			</view> -->
			<view class="ddflex form-item">
				<view class="form-label">保单</view>
				<view class="form-data fflex">{{info.warrantyCount?info.warrantyCount:0}}</view>
			</view>
			<view class="ddflex form-item">
				<view class="form-label">共计保费</view>
				<view class="form-data fflex">{{info.warrantyMoney?info.warrantyMoney:0}}元</view>
			</view>
			<view class="dflex form-item" v-if="info.associationProduct&&info.associationProduct.length>0">
				<view class="form-label">关联产品</view>
				<view class="form-data fflex">
					<view style="margin-bottom: 8rpx;" v-for="it,idx in info.associationProduct" :key="idx">{{it}}
					</view>
				</view>
			</view>
			<!-- <view class="form-title" style="margin-top: 50rpx;">经营服务策略</view>
			<view class="c-info">
				刺激消费频率
			</view> -->
		</view>
		<view class="dt-box ddflex">
			<view class="dt-title">客户动态</view>
			<view class="more ddflex" @click="jumpUrl('/mine/clientDynamic/clientDynamic?id='+id)">
				查看更多
				<image style="width: 9rpx;height: 18rpx;margin-left: 10rpx;" src="/static/images/rico.png"></image>
			</view>
		</view>
		<view class="log">
			<view v-if="logsList && logsList.length > 0" v-for="(it, index) in logsList" :key="index">
				<view class="time-year" v-if="todayYear!=it.year && index==0 || (index!=0 && (it.year!=logsList[index-1].year))">{{ it.year }}年</view>
				<view class="dflex">
					<view class="time-sort">
						<block v-if="index==0 || (index!=0 && (it.day!=logsList[index-1].day||it.month!=logsList[index-1].month||it.year!=logsList[index-1].year))">
							<text v-if="todayYear==it.year&&todayMonth==it.month&&todayDay==it.day">今日</text>
							<block v-else>
								<text>{{it.day}}</text>{{ it.month }}月
							</block>
						</block>
					</view>
					<view class="li fflex">
						<image src="/mine/static/images/jcico.png" class="jcico"></image>
						<view class="time">{{ it.time }}</view>
						<!-- <view class="des" v-if="it.brief">{{ it.brief }}</view> -->
						<rich-text class="des" :nodes="it.content"></rich-text>
					</view>
				</view>
			</view>
			<view v-if="!logsList || logsList.length == 0" class="nodata">
				<image src="/mine/static/images/empty.png" mode="aspectFit"></image>
				<view>暂无记录~</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const utils = require("../../utils/util.js")
	export default {
		components: {},
		props: {},
		data() {
			return {
				id: '',
				info: {},
				logsList:[{
					createDate:'2023-03-04',
					brief:'阅读了《3·15|手把手教你读懂“食品标签”，拒绝被“坑”》',
					logsContent:'sss',
					year:"2023",
					month:"10",
					day:'30',
					time:'12:00'
					
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'03',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'03',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2023",
					month:"2",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2022",
					month:"2",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2022",
					month:"2",
					day:'03',
					time:'12:00'
				}],
				todayYear:'',
				todayMonth:'',
				todayDay:''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
			this.todayYear = new Date().getFullYear()
			this.todayMonth = new Date().getMonth() + 1
			this.todayDay = new Date().getDate()
		},
		onShow() {
			this.getDynamic()
		},
		methods: {
			jumpUrl(url){
				if(!url) return false
				uni.navigateTo({
					url:url
				})
			},
			getDetail() {
				req.getRequest('/api/user/getUserInfoBySaleNo', {
					userId: this.id
				}, res => {
					this.info = res
				})
			},
			styTelTextFn(data) {
				return utils.styTelText(data)
			},
			// 复制
			copy(val) {
				uni.setClipboardData({
					data: val,
					complete() {
						req.msg('复制成功')
					}
				})
			},
			// 拨打电话
			callPhone(val) {
				if (!val) return false
				uni.makePhoneCall({
					phoneNumber: val
				});
			},
			getDate(dateStr){
				if(!dateStr) return false
				let date = new Date(dateStr)
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				return {
					year:year,
					month:month,
					day:day,
					hour:hour,
					minute:minute,
					second:second,
				}
			},
			getDynamic(){
				req.getRequest('/api/user/getUserTrends',{uid:this.id,page:1,limit:5},res=>{
					this.logsList = res&&res.list?res.list:[],
					this.logsList.map(item=>{
						let t = this.getDate(item.createDate)
						item.year = t.year
						item.month = t.month
						item.day = t.day
						item.time = (t.hour<10?('0'+t.hour):t.hour)+':'+(t.minute<10?('0'+t.minute):t.minute)
					})
				})
			}
		},
		mounted() {},
	}
</script>

<style>
	@import "./clientDetail.css";
</style>