Browse Source

客户动态页面

xhj 2 năm trước cách đây
mục cha
commit
465826d1ac

+ 60 - 0
mine/clientDetail/clientDetail.css

@@ -92,4 +92,64 @@ page{
 	font-weight: 400;
 	color: #3D90E5;
 	text-align: center;
+}
+
+
+/* 客户动态 */
+.dt-box{
+	padding: 30rpx;
+	justify-content: space-between;
+}
+.dt-title{
+	line-height: 45rpx;
+	font-size: 32rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	font-weight: bold;
+	color: #263343;
+}
+.more{
+	line-height: 33rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC Regular-, PingFang SC Regular;
+	font-weight: normal;
+	color: #9C9392;
+}
+
+
+.log{margin: 20rpx 0 0;background: #fff;padding: 0rpx 40rpx 55rpx;}
+.log .tit{margin-bottom: 45rpx;}
+.log .li{padding-left: 60rpx;padding-bottom: 40rpx;position: relative;}
+.log-tit{font-size: 26rpx;color: #1A83FF;}
+.log .li text{display: block;color: #999;font-size: 26rpx;margin-top: 25rpx;}
+.log .li::before{content: '';display: block;width: 2rpx;background: #E2E7F1;position: absolute;top: 8rpx;left: 23rpx;bottom: -5rpx;z-index: 1;}
+.jcico{width: 26rpx;height: 26rpx;position: absolute;top: 5rpx;left: 12rpx;z-index: 2;}
+.time{font-size: 24rpx;color: #999;margin-bottom: 23rpx;}
+.des{
+	font-size: 30rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	/* font-weight: bold; */
+	color: #333333;
+	line-height: 42rpx;
+}
+.time-sort{
+	width: 120rpx;
+	height: 50rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	color: #333333;
+	margin-top: -10rpx;
+}
+.time-sort text{
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-right: 10rpx;
+}
+.time-year{
+	width: 122rpx;
+	height: 50rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	margin: 50rpx 0;
 }

+ 144 - 18
mine/clientDetail/clientDetail.vue

@@ -11,7 +11,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<view class="form">
 			<view class="form-title">客户资料</view>
 			<view class="ddflex form-item">
@@ -31,10 +31,12 @@
 				<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>
+						<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>
+						<image style="width: 22rpx;height: 22rpx;margin-right: 10rpx;"
+							src="../../static/pages/images/phone1.png"></image>
 						联系
 					</view>
 				</view>
@@ -42,7 +44,8 @@
 			<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 v-if="info.customTypeName&&info.customTypeName.length>0">{{info.customTypeName.join(',')}}
+					</block>
 				</view>
 			</view>
 			<view class="ddflex form-item">
@@ -64,7 +67,8 @@
 			<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 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>
@@ -72,6 +76,39 @@
 				刺激消费频率
 			</view> -->
 		</view>
+		<view class="dt-box ddflex">
+			<view class="dt-title">客户动态</view>
+			<view class="more ddflex" @click="jumpUrl('/mine/clientDynamic/clientDynamic')">
+				查看更多
+				<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.brief"></rich-text>
+					</view>
+				</view>
+			</view>
+			<view v-if="!logsList || logsList.length == 0" class="nodata">
+				<image src="/mine/static/images/empty.png"></image>
+				<view>暂无记录~</view>
+			</view>
+		</view>
+		
 
 	</view>
 </template>
@@ -85,28 +122,100 @@
 		props: {},
 		data() {
 			return {
-				id:'',
-				info:{}
+				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() {
-			
+
 		},
 		methods: {
-			getDetail(){
-				req.getRequest('/api/user/getUserInfoBySaleNo',{userId:this.id},res=>{
+			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){
+			styTelTextFn(data) {
 				return utils.styTelText(data)
 			},
 			// 复制
-			copy(val){
+			copy(val) {
 				uni.setClipboardData({
 					data: val,
 					complete() {
@@ -116,14 +225,31 @@
 			},
 			// 拨打电话
 			callPhone(val) {
-				if(!val) return false
-			    uni.makePhoneCall({
-			        phoneNumber: 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,
+				}
+			}
 		},
-		mounted() {
-		},
+		mounted() {},
 	}
 </script>
 

+ 61 - 0
mine/clientDynamic/clientDynamic.css

@@ -0,0 +1,61 @@
+page{
+	background-color: #fff;
+}
+.tab{
+	position: fixed;
+	font-size: 32rpx;
+	height: 80rpx;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-bottom: 2rpx solid #ededed;
+	z-index: 99;
+	background-color: #fff;
+}
+.tab-item{
+	text-align: center;
+	line-height: 80rpx;
+}
+.tab-item-active{
+	color: var(--main);
+	border-bottom: 2rpx solid var(--main);
+}
+
+.log{margin: 20rpx 0 0;background: #fff;padding: 0rpx 40rpx 55rpx;}
+.log .tit{margin-bottom: 45rpx;}
+.log .li{padding-left: 60rpx;padding-bottom: 40rpx;position: relative;}
+.log-tit{font-size: 26rpx;color: #1A83FF;}
+.log .li text{display: block;color: #999;font-size: 26rpx;margin-top: 25rpx;}
+.log .li::before{content: '';display: block;width: 2rpx;background: #E2E7F1;position: absolute;top: 8rpx;left: 23rpx;bottom: -5rpx;z-index: 1;}
+.jcico{width: 26rpx;height: 26rpx;position: absolute;top: 5rpx;left: 12rpx;z-index: 2;}
+.time{font-size: 24rpx;color: #999;margin-bottom: 23rpx;}
+.des{
+	font-size: 30rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	/* font-weight: bold; */
+	color: #333333;
+	line-height: 42rpx;
+}
+.time-sort{
+	width: 120rpx;
+	height: 50rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	color: #333333;
+	margin-top: -10rpx;
+}
+.time-sort text{
+	font-size: 36rpx;
+	font-weight: bold;
+	margin-right: 10rpx;
+}
+.time-year{
+	width: 122rpx;
+	height: 50rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC-Bold, PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	margin: 50rpx 0;
+}

+ 203 - 0
mine/clientDynamic/clientDynamic.vue

@@ -0,0 +1,203 @@
+<template>
+	<view>
+		<view class="tab ddflex">
+			<view class="tab-item fflex" :class="tabIndex==1?'tab-item-active':''" @click="tabChange(1)">今日动态</view>
+			<view class="tab-item fflex" :class="tabIndex==2?'tab-item-active':''" @click="tabChange(2)">历史动态</view>
+		</view>
+		<view style="height: 120rpx;"></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.brief"></rich-text>
+					</view>
+				</view>
+			</view>
+			<view v-if="!logsList || logsList.length == 0" class="nodata">
+				<image src="/mine/static/images/empty.png" mode="aspectFill"></image>
+				<view>暂无记录~</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	const app = getApp();
+	const req = require("../../utils/request.js");
+
+	export default {
+		components: {},
+		props: {},
+		data() {
+			return {
+				tabIndex:1,
+				pageList: [],
+				isLoad: true,
+				form: {
+					page: 1,
+					limit: 10
+				},
+				
+				logsList:[{
+					createDate:'2023-03-04',
+					brief:'阅读了《3·15|手把手教你读懂“食品标签”,拒绝被“坑”》',
+					logsContent:'sss',
+					year:"2022",
+					month:"10",
+					day:'30',
+					time:'12:00'
+					
+				},{
+					createDate:'2023-03-04',
+					brief:'阅读了《3·15|手把手教你读懂“食品标签”,拒绝被“坑”》',
+					logsContent:'sss',
+					year:"2023",
+					month:"4",
+					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.todayYear = new Date().getFullYear()
+			this.todayMonth = new Date().getMonth() + 1
+			this.todayDay = new Date().getDate()
+			this.getPageList()
+		},
+		onShow() {
+			
+		},
+		onReachBottom: function() {
+			this.form.page++;
+			this.getPageList(false);
+		},
+		methods: {
+			tabChange(index){
+				if(this.tabIndex==index) return false
+				this.tabIndex = index
+				this.form.page = 1
+				this.isLoad = true;
+				this.getPageList(true)
+			},
+			getPageList(isShow) {
+				if (!this.isLoad) return false;
+				this.isLoad = false;
+				let form = this.form;
+				if(this.searchVal){
+					form.search = this.searchVal
+				}else{
+					form.search = ''
+				}
+				uni.showLoading();
+				req.getRequest(
+					'/api/match/page',
+					form,
+					res => {
+						this.total = res.total
+						res  = res?res.list:[]
+						this.isShow = true;
+						if (res && res.length == 10) {
+							this.isLoad = true;
+						}
+						if (this.form.page > 1) {
+							res = this.pageList.concat(res);
+						}
+						this.pageList = res;
+						uni.hideLoading();
+					},
+					isShow
+				);
+			},
+			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,
+				}
+			}
+		},
+		mounted() {
+		},
+	}
+</script>
+
+<style>
+	@import "./clientDynamic.css";
+</style>

BIN
mine/static/images/empty.png


BIN
mine/static/images/jcico.png


+ 5 - 0
pages.json

@@ -111,6 +111,11 @@
 				"style": {
 					"navigationBarTitleText": "客户详情"
 				}
+			},{
+				"path": "clientDynamic/clientDynamic",
+				"style": {
+					"navigationBarTitleText": "客户动态"
+				}
 			}]
 		}
 	],