From a63c75326053e5aba5a2569a21f2cc19a79755af Mon Sep 17 00:00:00 2001
From: buffeyu <271839173@qq.com>
Date: Wed, 12 Jan 2022 23:55:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=9F=E8=BF=9B=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                   |   5 +-
 pages.json                                |  15 +-
 pages/add-record/index.vue                | 231 ++++++++++++++++++++++
 pages/client-detail/basic-information.vue |  11 +-
 pages/follow-up-records/index.vue         | 177 +++++++++++++++++
 pages/follow-up-records/timeLine.vue      |  18 ++
 pages/follow-up-records/timelineItem.vue  |  87 ++++++++
 7 files changed, 539 insertions(+), 5 deletions(-)
 create mode 100644 pages/add-record/index.vue
 create mode 100644 pages/follow-up-records/index.vue
 create mode 100644 pages/follow-up-records/timeLine.vue
 create mode 100644 pages/follow-up-records/timelineItem.vue

diff --git a/App.vue b/App.vue
index 0e6160e..03963a6 100644
--- a/App.vue
+++ b/App.vue
@@ -16,5 +16,8 @@ export default {
 <style>
 /*每个页面公共css */
 @import url('./common/css/reset.scss');
-@import '@/static/icon/iconfont.css';
+@import '@/static/icon/iconfont.css';
+page {
+	height: 100%;
+}
 </style>
diff --git a/pages.json b/pages.json
index 7a623ee..85267b6 100644
--- a/pages.json
+++ b/pages.json
@@ -215,7 +215,20 @@
                 "enablePullDownRefresh": false
             }
             
-        }
+        },
+		{
+		  "path": "pages/follow-up-records/index",
+		  "style": {
+		    "navigationBarTitleText": "跟进记录"
+		  }
+		},
+		{
+		  "path": "pages/add-record/index",
+		  "style": {
+		    "navigationBarTitleText": "新增跟进记录",
+			"navigationStyle": "custom"
+		  }
+		}
     ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
diff --git a/pages/add-record/index.vue b/pages/add-record/index.vue
new file mode 100644
index 0000000..e561d14
--- /dev/null
+++ b/pages/add-record/index.vue
@@ -0,0 +1,231 @@
+<template>
+	<view class="warpper">
+		<qnHeader class="header">
+			<view class="header-title">跟进记录</view>
+			<view class="right-title">保存</view>
+		</qnHeader>
+		<view class="paper-price">
+			<view class="">
+				<view class="paper-price-image-title">
+					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
+					<text class="add-paper-title">拜访对象</text>
+				</view>
+				<view class="paper-price-image">
+					<qn-easyinput
+						class="paper-price-textArea bf-height"
+						:maxlength="200"
+						:styles="{ disableColor: '#F7F8FA' }"
+						v-model="form.remark"
+						:inputBorder="false"
+						type="textarea"
+						placeholder="请输入拜访对象"
+					></qn-easyinput>
+				</view>
+			</view>
+			<view class="">
+				<view class="paper-price-image-title">
+					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
+					<text class="add-paper-title">沟通记录</text>
+				</view>
+				<view class="paper-price-image">
+					<qn-easyinput
+						class="paper-price-textArea gt-height"
+						:maxlength="200"
+						:styles="{ disableColor: '#F7F8FA' }"
+						v-model="form.remark"
+						:inputBorder="false"
+						type="textarea"
+						placeholder="请输入与客户的沟通记录"
+					></qn-easyinput>
+				</view>
+			</view>
+			<view class="">
+				<view class="paper-price-image-title">
+					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
+					<text class="add-paper-title">备注信息</text>
+				</view>
+				<view class="paper-price-image">
+					<qn-easyinput
+						class="paper-price-textArea bf-height"
+						:maxlength="200"
+						:styles="{ disableColor: '#F7F8FA' }"
+						v-model="form.remark"
+						:inputBorder="false"
+						type="textarea"
+						placeholder="请输入备注"
+					></qn-easyinput>
+					<view class="location">
+						<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+						<text class="text">广州市天河区</text>
+						<uni-icons size="16" type="bottom"></uni-icons>
+					</view>
+				</view>
+				
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import qnHeader from '@/components/qn-header/qn-header.vue'
+export default {
+	components: {qnHeader},
+	data() {
+		return {
+			form: {}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.warpper {
+	background-color: #ffffff;
+	height: 100%;
+	.header {
+		justify-content: space-between;
+	}
+	.header-title {
+		font-size: 36rpx;
+		color: #000000;
+		letter-spacing: 0;
+		text-align: center;
+		font-weight: 500;
+	}
+	
+	.right-title {
+		font-size: 28rpx;
+		color: #007aff;
+		text-align: center;
+		line-height: 40rpx;
+		font-weight: 500;
+	}
+	.add-paper-start {
+		font-size: 28rpx;
+		color: #f5222d;
+		letter-spacing: 0;
+		font-weight: 400;
+	}
+	.add-paper-title {
+		font-size: 28rpx;
+		color: #000000;
+		letter-spacing: 0;
+		font-weight: 500;
+	}
+	.paper-price {
+		background-color: #ffffff;
+		padding: 20rpx 0rpx;
+
+		.paper-price-form {
+			background: #f7f8fa;
+			border-radius: 8rpx;
+			margin: 22rpx 32rpx;
+			padding: 22rpx 32rpx;
+			line-height: 60rpx;
+			margin-bottom: 30rpx;
+		}
+		.paper-price-item {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			.flex {
+				display: flex;
+				margin-left: 4px;
+				align-items: center;
+			}
+		}
+		.delete-text {
+			font-size: 28rpx;
+			color: #f5222d;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+		.paper-price-main {
+			padding: 22rpx 32rpx;
+			height: 88rpx;
+			align-items: center;
+			border-bottom: 2rpx solid #dddddd;
+		}
+		.paper-price-image-title {
+			padding: 0rpx 32rpx;
+			align-items: center;
+		}
+		.paper-price-image {
+			padding: 16rpx 32rpx;
+		}
+		.paper-price-textArea {
+			background: #f7f8fa;
+			border-radius: 20rpx;
+			padding: 10rpx;
+		}
+		.paper-price-title {
+			font-size: 28rpx;
+			color: #000000;
+			letter-spacing: 0;
+			font-weight: 600;
+		}
+		.paper-price-subtitle {
+			font-size: 24rpx;
+			color: #888888;
+			font-weight: 400;
+		}
+		.dian {
+			background: #adbac9;
+			width: 10rpx;
+			height: 10rpx;
+			border-radius: 50%;
+			// margin-top: 28rpx;
+			margin-right: 10rpx;
+		}
+		.label_text {
+			font-size: 28rpx;
+			color: #888888;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+		.label_value {
+			padding-bottom: 5rpx;
+			border-bottom: 2rpx solid #d8d8d8;
+			width: 65%;
+			text-align: right;
+		}
+		.label-select {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+		}
+		.text-left {
+			margin-left: 10rpx;
+		}
+		.text-right {
+			margin-right: 10rpx;
+		}
+	}
+	.bf-height{
+		height: 155rpx;
+	}
+	.gt-height {
+		height: 210rpx;
+	}
+	.location{
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding-top: 20rpx;
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+		}
+		.text{
+			font-size: 26rpx;
+			color: #888888;
+			letter-spacing: 0;
+			text-align: left;
+			font-weight: 400;
+			padding-left: 10rpx;
+		}
+	}
+}
+</style>
diff --git a/pages/client-detail/basic-information.vue b/pages/client-detail/basic-information.vue
index cd24f9b..1fbe9a0 100644
--- a/pages/client-detail/basic-information.vue
+++ b/pages/client-detail/basic-information.vue
@@ -4,7 +4,7 @@
 			<view class="card-box">
 				<view class="card-header">
 					<view class="left-text">基本信息</view>
-					<view class="right-text">跟进记录</view>
+					<view class="right-text" @tap="gotoTap">跟进记录</view>
 				</view>
 				<view class="card-content">
 					<view class="info">
@@ -212,7 +212,8 @@
 
 <script>
 import uGap from '@/components/u-gap/u-gap.vue'
-import { getBaseInfo } from '@/apis/clientDetailApi'
+import { getBaseInfo } from '@/apis/clientDetailApi'
+import { go2 } from '@/utils/hook.js'
 export default {
 	components: {
 		uGap
@@ -236,7 +237,11 @@ export default {
 			seemoreFlag: true
 		}
 	},
-	methods: {
+	methods: {
+		gotoTap() {
+			go2('follow-up-records')
+			
+		},
 		getBaseInfo() {
 			getBaseInfo({customerId: this.customerId }).then(res => {
 				// console.log('基础信息', res)
diff --git a/pages/follow-up-records/index.vue b/pages/follow-up-records/index.vue
new file mode 100644
index 0000000..bf8213c
--- /dev/null
+++ b/pages/follow-up-records/index.vue
@@ -0,0 +1,177 @@
+<template>
+	<view class="warpper">
+		<timeline>
+			<timelineItem v-for="(item, index) in 4" :key="index">
+				<view class="time">
+					2021年12月28日 12:30:45
+				</view>
+				<view class="tripItem">
+					<view class="row">
+						<view class="title">跟进人：</view>
+						<view class="value">贾晓堂 18877799220</view>
+					</view>
+					<view class="row">
+						<view class="title">拜访对象：</view>
+						<view class="value">张翼德 18826104989</view>
+					</view>
+					<view class="row">
+						<view class="title">沟通内容：</view>
+						<view class="value">已经对该供应商进行了需求调研，并已经对纸掌柜产品进行推广，盘商表示愿意支付使用该产品</view>
+					</view>
+					<view class="row">
+						<view class="title">备注信息：</view>
+						<view class="value">客户说希望有特色功能。</view>
+					</view>
+					<view class="row">
+						<view class="title"></view>
+						<view class="value">
+							<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+							<text class="location">广州市天河区</text>
+						</view>
+					</view>
+				</view>
+			</timelineItem>
+			<view class="see-more">
+				<text>查看更多</text>
+				<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
+			</view>
+		</timeline>
+		<qn-footer fixed height="120rpx">
+		  <view class="button-area">
+		    <!-- <view class="button button__cancel" @click="back">
+		      <text class="text">取消</text>
+		    </view> -->
+		    <view class="button button__submit" @click="addTap">
+		      <text class="text" style="color: white">新增跟进</text>
+		    </view>
+		  </view>
+		</qn-footer>
+	</view>
+</template>
+
+<script>
+import timeline from './timeLine.vue'
+import timelineItem from './timelineItem.vue'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
+import { go2 } from '@/utils/hook.js'
+export default {
+	components: {
+		timeline,
+		timelineItem,
+		qnFooter
+	},
+	data() {
+		return {}
+	},
+	methods:{
+		addTap() {
+			go2('add-record')
+		},
+	}
+}
+</script>
+
+<style lang="scss">
+.warpper {
+	background-color: #FFFFFF;
+	.time {
+		font-size: 26rpx;
+		color: #000000;
+		letter-spacing: 0;
+		font-weight: 400;
+	}
+	.tripItem {
+		margin-top: 20rpx;
+		// height: 140rpx;
+		padding: 20rpx 30rpx;
+		// height: 376rpx;
+		background: #F7F8FA;
+		border-radius: 8rpx;
+		.row {
+			display: flex;
+			flex-direction: row;
+			padding: 16rpx 0rpx;
+			.title {
+				flex: 0 0 140rpx;
+				font-size: 28rpx;
+				color: #888888;
+				letter-spacing: 0;
+				font-weight: 400;
+			}
+			.value {
+				display: flex;
+				align-items: center;
+				flex: 1;
+				font-size: 28rpx;
+				color: #333333;
+				letter-spacing: 0;
+				font-weight: 400;
+				line-height: 1.3;
+			}
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
+			}
+			.location{
+				font-size: 26rpx;
+				color: #888888;
+				letter-spacing: 0;
+				text-align: left;
+				line-height: 32rpx;
+				font-weight: 400;
+				padding-left: 10rpx;
+			}
+		}
+	}
+	.see-more {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding-top: 20rpx;
+		background: #ffffff;
+		// border-top: 2rpx solid #dddddd;
+		// padding: 0rpx 32rpx;
+		font-size: 28rpx;
+		color: #007aff;
+		letter-spacing: 0;
+		text-align: center;
+		font-weight: 400;
+		.icon {
+			width: 24rpx;
+			height: 24rpx;
+		}
+	}
+	.button-area {
+	  width: 750rpx;
+	  padding: 0 32rpx;
+	  display: flex;
+	  flex-direction: row;
+	  align-items: center;
+	  // justify-content: space-between;
+	  .button {
+	    flex-grow: 0;
+	    flex-shrink: 0;
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    border-radius: 10rpx;
+	    .text {
+	      font-size: 30rpx;
+	      font-weight: 500;
+	      text-align: center;
+	    }
+	  }
+	  .button__cancel {
+	    width: 270rpx;
+	    height: 88rpx;
+	    border: 2rpx solid #979797;
+	  }
+	  .button__submit {
+	    width: 100%;
+	    height: 88rpx;
+	    background: #007aff;
+	  }
+	}
+}
+</style>
diff --git a/pages/follow-up-records/timeLine.vue b/pages/follow-up-records/timeLine.vue
new file mode 100644
index 0000000..3383db7
--- /dev/null
+++ b/pages/follow-up-records/timeLine.vue
@@ -0,0 +1,18 @@
+<template>
+	<view class="timeline">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		components:{
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.timeline {
+		padding: 36rpx 32rpx 0rpx 45rpx;
+	}
+</style>
diff --git a/pages/follow-up-records/timelineItem.vue b/pages/follow-up-records/timelineItem.vue
new file mode 100644
index 0000000..ac6b251
--- /dev/null
+++ b/pages/follow-up-records/timelineItem.vue
@@ -0,0 +1,87 @@
+<template>
+	<view class="timelineItem">
+		<view class="timeItem">
+			<view class="leftTime">
+				{{leftTime}}
+			</view>
+			<view class="line">
+				<view class="out" :style="{background: color == '' ? '' : color}">
+					<view class="inner" :style="{background: color == '' ? '' : color}"></view>
+				</view>
+			</view>
+			<view class="rightContent">
+				<slot></slot>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			leftTime:{
+				type:String,
+				default:''
+			},
+			color:{
+				type:String,
+				default:''
+			}
+		},
+		data(){
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.timelineItem {
+		.timeItem {
+			display: flex;
+			.leftTime {
+				// width: 45rpx;
+				// padding: 0 29rpx 0rpx 0rpx;
+				font-size:22rpx;
+				font-weight:500;
+				color:rgba(51,51,51,1);
+				// margin-right: 10rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.line {
+				width: 4rpx;
+				background: #B2D7FF;
+				position: relative;
+				.out {
+					position: absolute;
+					top: 0;
+					left: 50%;
+					transform: translateX(-50%);
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 28rpx;
+					height: 28rpx;
+					background : #007AFF;
+					border-radius: 50%;
+					.inner {
+						width: 18rpx;
+						height: 18rpx;
+						background : #007AFF;
+						border-radius: 50%;
+					}
+				}
+			}
+			.rightContent {
+				flex: 1;
+				padding: 0rpx 10rpx 16rpx 16rpx;
+				margin-left: 20rpx;
+				min-height: 50rpx;
+			}
+		}
+	}
+</style>