From 2d578ec159684c5280a02c4458da5b773dfc690d Mon Sep 17 00:00:00 2001
From: buffeyu <yeqingyu@dimine.net>
Date: Thu, 6 Jan 2022 17:34:04 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90up=E3=80=91=E5=AE=A2=E6=88=B7=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/clientDetailApi.js                       |  12 +
 common/css/reset.scss                         |   9 +
 pages.json                                    |  45 --
 pages/client-detail/basic-information.vue     | 658 +++++++++++++-----
 pages/client-detail/custom-header.vue         |  61 +-
 pages/client-detail/index.vue                 | 128 ++--
 static/imgs/client-detail/address-icon.png    | Bin 0 -> 1537 bytes
 static/imgs/client-detail/arrow-down-icon.png | Bin 0 -> 446 bytes
 static/imgs/client-detail/arrow-up-icon.png   | Bin 0 -> 421 bytes
 9 files changed, 595 insertions(+), 318 deletions(-)
 create mode 100644 apis/clientDetailApi.js
 create mode 100644 static/imgs/client-detail/address-icon.png
 create mode 100644 static/imgs/client-detail/arrow-down-icon.png
 create mode 100644 static/imgs/client-detail/arrow-up-icon.png

diff --git a/apis/clientDetailApi.js b/apis/clientDetailApi.js
new file mode 100644
index 0000000..7969932
--- /dev/null
+++ b/apis/clientDetailApi.js
@@ -0,0 +1,12 @@
+import http from '../utils/http/index.js'
+
+// 纸掌柜--客户详情--基础信息
+export function getBaseInfo(data) {
+  return http.get(
+    {
+      url: '/yyt-uec/get/customer/detail/base-info',
+      data
+    }
+  )
+}
+
diff --git a/common/css/reset.scss b/common/css/reset.scss
index 67d551f..5a8a843 100644
--- a/common/css/reset.scss
+++ b/common/css/reset.scss
@@ -44,4 +44,13 @@ button::after {
 	height: 0;
 	clear: both;
 	visibility: hidden;
+}
+// 两行省略号
+.u-line-2 {
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	word-break: break-all;
+	text-overflow: ellipsis; 
+	display: -webkit-box; // 弹性伸缩盒
+	-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
 }
\ No newline at end of file
diff --git a/pages.json b/pages.json
index d89f894..70c1559 100644
--- a/pages.json
+++ b/pages.json
@@ -69,51 +69,6 @@
 				"navigationStyle": "custom"
 			}
 		}
-	    ,{
-            "path" : "pages/client-detail/basic-information",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/client-detail/equipment-information",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/client-detail/base-paper-deals",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/client-detail/waste-paper-trading",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "components/u-gap/u-gap",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/client-detail/basic-information.vue b/pages/client-detail/basic-information.vue
index f066cba..db9e96e 100644
--- a/pages/client-detail/basic-information.vue
+++ b/pages/client-detail/basic-information.vue
@@ -1,238 +1,540 @@
 <template>
 	<view class="warpper">
-		<view class="card-box">
-			<view class="card-header">
-				<view class="left-text">基本信息</view>
-				<view class="right-text">跟进记录</view>
-			</view>
-			<view class="card-content">
-				<view class="info">
-					<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif"
-						mode=""></image>
-					<view class="content">
-						<view class="title">
-							<text class="text">广州市金骏彩色印务有限公司</text>
-							<image class="icon"
-								:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'">
-							</image>
-						</view>
-						<view class="desc">
-							<text>主营：生产画册、书刊、包装盒、手提袋子、手机钢化膜盒子、蛋糕盒等。</text>
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="card-box">
+				<view class="card-header">
+					<view class="left-text">基本信息</view>
+					<view class="right-text">跟进记录</view>
+				</view>
+				<view class="card-content">
+					<view class="info">
+						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+						<view class="content">
+							<view class="title">
+								<text class="text">{{info.name}}</text>
+								<image
+									class="icon"
+									:src="info.registrationStatus ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"
+								></image>
+							</view>
+							<view class="desc u-line-2">
+								<text>主营：{{ info.mainBusiness }}</text>
+							</view>
 						</view>
 					</view>
-				</view>
-				<view class="company-box">
-					<view>
+					<view class="company-box">
 						<view>
-							<text class="title">法定代表人</text>
+							<view><text class="title">法定代表人</text></view>
+							<view class="value">{{ info.legalPersonName }}</view>
+						</view>
+						<view class="">
+							<view><text class="title">注册资本</text></view>
+							<view class="value">{{ info.registeredCapital }}万</view>
 						</view>
-						<view class="value">
-							曹孟德
+						<view class="">
+							<view><text class="title">成立时间</text></view>
+							<view class="value">{{ transformDate(info.foundDate) }}</view>
 						</view>
 					</view>
-					<view class="">
-						<view>
-							<text class="title">注册资本</text>
+					<view class="site">
+						<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+						<text class="text">{{ info.locProvinceName }}{{ info.locCityName }} {{ info.locDetail }}</text>
+					</view>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view class="card-box">
+				<view class="card-header"><view class="left-text">工商信息</view></view>
+				<view class="card-content">
+					<view class="gs-info">
+						<view class="row">
+							<view class="info-title">
+								<text>
+									社会统一
+									<br />
+									信用代码：
+								</text>
+							</view>
+							<view class="info-value"><text>{{info.uniformSocialCreditCode}}</text></view>
+						</view>
+						<view class="row">
+							<view class="info-title"><text>营业执照：</text></view>
+							<view class="look-over" @tap="previewImg(info.businessLicenseImg, [info.businessLicenseImg])"><text>点击查看</text></view>
 						</view>
-						<view class="value">
-							1727.2万
+						<view class="row">
+							<view class="info-title"><text>所属行业：</text></view>
+							<view class="info-value"><text>{{info.belongIndustry}}</text></view>
+						</view>
+						<view class="row">
+							<view class="info-title"><text>登记状态：</text></view>
+							<view class="info-value"><text>{{info.registrationStatus}}</text></view>
 						</view>
 					</view>
-					<view class="">
-						<view>
-							<text class="title">成立时间</text>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view class="card-box">
+				<view class="card-header"><view class="left-text">厂房信息</view></view>
+				<view class="card-content">
+					<view class="cf-info">
+						<view class="row">
+							<view class="left">
+								<view class="info-title"><text>产房面积：</text></view>
+								<view class="info-value"><text>{{info.plantArea}}m²</text></view>
+							</view>
+							<view class="right">
+								<view class="info-title"><text>年营业额：</text></view>
+								<view class="info-value"><text>{{info.annualTurnover}}万</text></view>
+							</view>
 						</view>
-						<view class="value">
-							2021/12/22
+						<view class="row">
+							<view class="left">
+								<view class="info-title"><text>产房照片：</text></view>
+								<view class="look-over" @tap="previewImg(info.factoryImgList[0], info.factoryImgList)"><text>点击查看</text></view>
+							</view>
+							<view class="right">
+								<view class="info-title"><text>租赁合同：</text></view>
+								<view class="look-over" @tap="previewImg(info.leaseContract, [info.leaseContract])"><text>点击查看</text></view>
+							</view>
 						</view>
 					</view>
+					<view class="site">
+						<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
+						<text class="text">{{info.factoryAddress}}</text>
+					</view>
 				</view>
-				<view class="site">
-					<image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
-					<text class="text">广东省广州市天河区车陂街道联合社区西区8栋8408</text>
+			</view>
+			<uGap></uGap>
+			<view class="card-box">
+				<view class="card-header"><view class="left-text">法律诉讼</view></view>
+				<view class="card-content" style="margin: 20rpx 0rpx;">
+					<view class="fl-info" v-for="(item, index) in 2" :key="index">
+						<view class="row">
+							<view class="title">
+								<view class="left">
+									<view class="dot"></view>
+									<view><text>买卖合同纠纷案件执行首次执行裁定书</text></view>
+								</view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>案件：</text></view>
+								<view><text>金融借款合同纠纷</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>案号：</text></view>
+								<view><text>(2019)鲁0911执1608号</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>裁判日期：</text></view>
+								<view><text>2019/12/09</text></view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="see-more">
+					<view class="" @tap="seemoreTap">
+						<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>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view class="card-box">
+				<view class="card-header"><view class="left-text">经营异常</view></view>
+				<view class="card-content" style="margin: 20rpx 0rpx;">
+					<view class="fl-info" v-for="(item, index) in 2" :key="index">
+						<view class="row">
+							<view class="title">
+								<view class="left">
+									<view class="dot"></view>
+									<view><text>编号 44012020013906</text></view>
+								</view>
+								<view class="valid"><text>有效</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>抵押人：</text></view>
+								<view><text>金融借款合同纠纷</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>抵押权人：</text></view>
+								<view><text>(2019)鲁0911执1608号</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>债务期限：</text></view>
+								<view><text>2020/01/24～2023/01/24</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>债务数额：</text></view>
+								<view><text>243.95万人民币</text></view>
+							</view>
+						</view>
+					</view>
 				</view>
 			</view>
 			<uGap></uGap>
-		</view>
+			<view class="card-box">
+				<view class="card-header"><view class="left-text">征信信息</view></view>
+				<view class="card-content" style="margin: 20rpx 0rpx;">
+					<view class="fl-info" v-for="(item, index) in 2" :key="index">
+						<view class="row">
+							<view class="other">
+								<view class="left-text"><text>立案日期：</text></view>
+								<view><text>2021/07/21</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>案号：</text></view>
+								<view><text>(2019)鲁0911执1608号</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>执行标准：</text></view>
+								<view><text>24563345元</text></view>
+							</view>
+							<view class="other">
+								<view class="left-text"><text>执行法院：</text></view>
+								<view><text>太原市杏花岭区人民法院</text></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-	import uGap from '@/components/u-gap/u-gap.vue'
-	export default {
-		components: {
-			uGap
+import uGap from '@/components/u-gap/u-gap.vue'
+import { getBaseInfo } from '@/apis/clientDetailApi'
+export default {
+	components: {
+		uGap
+	},
+	props: {
+		customerId: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			option: {
+				size: 10,
+				auto: true,
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: true
+			},
+			info: {
+				annualTurnover: 0,
+				belongIndustry: 'string',
+				businessLicenseImg: 'string',
+				factoryAddress: 'string',
+				factoryImgList: ['string'],
+				foundDate: '2022-01-05T02:20:30.776Z',
+				id: 0,
+				leaseContract: 'string',
+				legalPersonName: 'string',
+				locCityId: 0,
+				locCityName: 'string',
+				locDetail: 'string',
+				locDistriceName: 'string',
+				locDistrictId: 0,
+				locProvinceId: 0,
+				locProvinceName: 'string',
+				locStreetId: 0,
+				locStreetName: 'string',
+				mainBusiness: 'string',
+				name: 'string',
+				plantArea: 0,
+				registeredCapital: 0,
+				registrationStatus: 'string',
+				shortName: 'string',
+				uniformSocialCreditCode: 'string'
+			},
+			seemoreFlag: true
+		}
+	},
+	methods: {
+		getBaseInfo() {
+			getBaseInfo({customerId: this.customerId }).then(res => {
+				console.log('基础信息', res)
+				this.info = res
+			})
 		},
-		data() {
-			return {
-				info: {
-					"annualTurnover": 0,
-					"belongIndustry": "string",
-					"businessLicenseImg": "string",
-					"factoryAddress": "string",
-					"factoryImgList": [
-						"string"
-					],
-					"foundDate": "2022-01-05T02:20:30.776Z",
-					"id": 0,
-					"leaseContract": "string",
-					"legalPersonName": "string",
-					"locCityId": 0,
-					"locCityName": "string",
-					"locDetail": "string",
-					"locDistriceName": "string",
-					"locDistrictId": 0,
-					"locProvinceId": 0,
-					"locProvinceName": "string",
-					"locStreetId": 0,
-					"locStreetName": "string",
-					"mainBusiness": "string",
-					"name": "string",
-					"plantArea": 0,
-					"registeredCapital": 0,
-					"registrationStatus": "string",
-					"shortName": "string",
-					"uniformSocialCreditCode": "string"
-				}
-			}
+		seemoreTap() {
+			this.seemoreFlag = !this.seemoreFlag
 		},
-		methods: {
-
-		}
+		transformDate(date) {
+		  if (date) {
+		    return `${date[0]}/${date[1]}/${date[2]}`
+		  }
+		  return ''
+		},
+		previewImg(index, list) {
+			uni.previewImage({
+				urls: list,
+				current: index
+			});
+		},
+		downCallback() {},
+		upCallback() {}
 	}
+}
 </script>
 
 <style lang="scss">
-	.warpper {
-		width: 750rpx;
-		height: 100%;
+.warpper {
+	width: 750rpx;
+	height: 100%;
 
-		.card-box {
-			.card-header {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				height: 88rpx;
-				line-height: 88rpx;
-				border-bottom: 2rpx solid #DDDDDD;
-				padding: 0rpx 32rpx;
+	.card-box {
+		.card-header {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			height: 88rpx;
+			line-height: 88rpx;
+			border-bottom: 2rpx solid #dddddd;
+			padding: 0rpx 32rpx;
 
-				.left-text {
-					font-size: 30rpx;
-					color: #000000;
-					letter-spacing: 0;
-					font-weight: 600;
-				}
+			.left-text {
+				font-size: 30rpx;
+				color: #000000;
+				letter-spacing: 0;
+				font-weight: 600;
+			}
 
-				.right-text {
-					font-size: 28rpx;
-					color: #007AFF;
-					letter-spacing: 0;
-					text-align: right;
-					font-weight: 400;
-				}
+			.right-text {
+				font-size: 28rpx;
+				color: #007aff;
+				letter-spacing: 0;
+				text-align: right;
+				font-weight: 400;
 			}
 		}
+	}
 
-		.card-content {
-			.info {
-				width: 750rpx;
-				display: flex;
-				flex-direction: row;
-				padding: 20rpx 32rpx;
+	.card-content {
+		.info {
+			width: 750rpx;
+			display: flex;
+			flex-direction: row;
+			padding: 20rpx 32rpx;
 
-				.image {
-					width: 140rpx;
-					height: 140rpx;
-					flex: 0 0 140rpx;
-					margin-right: 20rpx;
-				}
+			.image {
+				width: 140rpx;
+				height: 140rpx;
+				flex: 0 0 140rpx;
+				margin-right: 20rpx;
+			}
+
+			.content {
+				.title {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-start;
 
-				.content {
-					.title {
-						display: flex;
-						flex-direction: row;
-						align-items: center;
-						justify-content: flex-start;
-
-						.text {
-							font-size: 32rpx;
-							color: #000000;
-							font-weight: 600;
-						}
-
-						.icon {
-							width: 100rpx;
-							height: 32rpx;
-							flex-grow: 0;
-							flex-shrink: 0;
-							margin-left: 8rpx;
-						}
+					.text {
+						font-size: 32rpx;
+						color: #000000;
+						font-weight: 600;
 					}
 
-					.desc {
-						margin-top: 14rpx;
-						font-size: 26rpx;
-						color: #333333;
-						line-height: 1.6;
+					.icon {
+						width: 100rpx;
+						height: 32rpx;
+						flex-grow: 0;
+						flex-shrink: 0;
+						margin-left: 8rpx;
 					}
 				}
+
+				.desc {
+					margin-top: 14rpx;
+					font-size: 26rpx;
+					color: #333333;
+					line-height: 1.6;
+				}
 			}
 		}
+	}
 
-		.company-box {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-around;
-			align-items: center;
+	.company-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+		text-align: center;
+		padding: 34rpx 0rpx;
+
+		.title {
+			font-size: 24rpx;
+			color: #888888;
+			letter-spacing: 0;
 			text-align: center;
-			padding: 34rpx 0rpx;
+			font-weight: 400;
+		}
 
-			.title {
-				font-size: 24rpx;
-				color: #888888;
-				letter-spacing: 0;
-				text-align: center;
-				font-weight: 400;
-			}
+		.value {
+			font-size: 28rpx;
+			color: #333333;
+			letter-spacing: 0;
+			text-align: center;
+			padding-top: 16rpx;
+			font-weight: 500;
+		}
+	}
 
-			.value {
-				font-size: 28rpx;
-				color: #333333;
-				letter-spacing: 0;
-				text-align: center;
-				padding-top: 16rpx;
-				font-weight: 500;
-			}
+	.site {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		height: 80rpx;
+		line-height: 80rpx;
+		background: #ffffff;
+		border-top: 2rpx solid #dddddd;
+		padding: 0rpx 32rpx;
+
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+			flex-grow: 0;
+			flex-shrink: 0;
+			margin-right: 10rpx;
 		}
 
-		.site {
+		.text {
+			font-size: 26rpx;
+			color: #333333;
+			letter-spacing: 0;
+			text-align: left;
+			line-height: 32rpx;
+			font-weight: 400;
+		}
+	}
+	.see-more {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		line-height: 80rpx;
+		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;
+		}
+	}
+	.gs-info {
+		padding: 20rpx 32rpx;
+		.row {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
-			height: 80rpx;
-			line-height: 80rpx;
-			background: #FFFFFF;
-			border-top: 2rpx solid #DDDDDD;
-			padding: 0rpx 32rpx;
+			margin-bottom: 16rpx;
+		}
+	}
+	.cf-info {
+		padding: 20rpx 32rpx;
 
-			.icon {
-				width: 32rpx;
-				height: 32rpx;
-				flex-grow: 0;
-				flex-shrink: 0;
-				margin-right: 10rpx;
-			}
+		.row {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 16rpx;
+		}
+		.left {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+		}
+		.right {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+		}
+	}
 
-			.text {
-				font-size: 26rpx;
+	.fl-info {
+		padding-bottom: 20rpx;
+		padding-left: 32rpx;
+		padding-right: 32rpx;
+		.row {
+			background: #f7f8fa;
+			border-radius: 8px;
+			padding: 24rpx;
+			.title {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				font-size: 28rpx;
 				color: #333333;
 				letter-spacing: 0;
-				text-align: left;
-				line-height: 32rpx;
+				font-weight: 500;
+				margin-bottom: 20rpx;
+				.left {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+				}
+				.dot {
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+					background: #adbac9;
+					margin-right: 8rpx;
+				}
+				.valid {
+					font-size: 28rpx;
+					color: #36cfc9;
+					letter-spacing: 0;
+					font-weight: 500;
+				}
+			}
+			.other {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				font-size: 28rpx;
+				color: #888888;
+				letter-spacing: 0;
 				font-weight: 400;
+				margin-bottom: 16rpx;
+				.left-text {
+					width: 140rpx;
+					margin-right: 8rpx;
+				}
 			}
 		}
-
 	}
+	.info-title {
+		font-size: 28rpx;
+		color: #888888;
+		letter-spacing: 0;
+		font-weight: 400;
+		margin-right: 8rpx;
+		width: 140rpx;
+	}
+	.info-value {
+		font-size: 28rpx;
+		color: #333333;
+		letter-spacing: 0;
+		font-weight: 400;
+	}
+	.look-over {
+		font-size: 28rpx;
+		color: #007aff;
+		letter-spacing: 0;
+		font-weight: 400;
+	}
+}
 </style>
diff --git a/pages/client-detail/custom-header.vue b/pages/client-detail/custom-header.vue
index e91175a..687c3c9 100644
--- a/pages/client-detail/custom-header.vue
+++ b/pages/client-detail/custom-header.vue
@@ -1,45 +1,42 @@
 <template>
-  <view
-    class="header"
-    :style="{
-      height: `${statusBarHeight + 44}px`,
-      paddingTop: `${statusBarHeight}px`
-    }"
-  >
-    <slot name="icon">
-      <uni-icons type="back" size="28" @click="back" />
-    </slot>
-    <slot>
-	</slot>
-  </view>
+	<view
+		class="header"
+		:style="{
+			height: `${statusBarHeight + 44}px`,
+			paddingTop: `${statusBarHeight}px`
+		}"
+	>
+		<slot name="icon"><uni-icons type="back" size="28" @click="back" /></slot>
+		<slot></slot>
+	</view>
 </template>
 
 <script>
 import { back } from '@/utils/hook.js'
 export default {
-  data() {
-    return {
-      statusBarHeight: 20
-    }
-  },
-  mounted() {
-    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0
-  },
-  methods: {
-    back
-  }
+	data() {
+		return {
+			statusBarHeight: 20
+		}
+	},
+	mounted() {
+		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 0
+	},
+	methods: {
+		back
+	}
 }
 </script>
 
 <style lang="scss">
 .header {
-  width: 750rpx;
-  padding: 0 32rpx 10rpx 20rpx;
-  background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 2rpx solid #d8d8d8;
+	width: 750rpx;
+	padding: 0 32rpx 10rpx 20rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 2rpx solid #d8d8d8;
 }
 </style>
diff --git a/pages/client-detail/index.vue b/pages/client-detail/index.vue
index 7484083..ecb4a44 100644
--- a/pages/client-detail/index.vue
+++ b/pages/client-detail/index.vue
@@ -1,80 +1,82 @@
 <template>
 	<view class="warpper">
-		<customHeader>
-			<view class="header-title">
-				客户详情
-			</view>
-			<view class="right-title">
-				客户授信
-			</view>
-		</customHeader>
+		<qnHeader class="header">
+			<!-- <view class="header"> -->
+			<view class="header-title">客户详情</view>
+			<view class="right-title">客户授信</view>
+			<!-- </view> -->
+		</qnHeader>
 		<view>
-			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
-				activeColor="#007AFF"></uni-segmented-control>
-			<view class="content">
-				<view v-show="current === 0">
-					<basicInformation></basicInformation>
+			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control>
+			
+				<view class="content">
+					<view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view>
+					<view v-show="current === 1"><equipmentInformation></equipmentInformation></view>
+					<view v-show="current === 2"><basePaperDeals></basePaperDeals></view>
+					<view v-show="current === 3"><wastePaperTrading></wastePaperTrading></view>
 				</view>
-				<view v-show="current === 1">
-					<equipmentInformation></equipmentInformation>
-				</view>
-				<view v-show="current === 2">
-					<basePaperDeals></basePaperDeals>
-				</view>
-				<view v-show="current === 3">
-					<wastePaperTrading></wastePaperTrading>
-				</view>
-			</view>
+			
 		</view>
 	</view>
 </template>
 
 <script>
-	import customHeader from './custom-header.vue'
-	import basicInformation from './basic-information.vue'
-	import equipmentInformation from './equipment-information.vue'
-	import basePaperDeals from './base-paper-deals.vue'
-	import wastePaperTrading from './waste-paper-trading.vue'
-	
-	export default {
-		components: {
-			customHeader,
-			basicInformation,
-			equipmentInformation,
-			basePaperDeals,
-			wastePaperTrading
-		},
-		data() {
-			return {
-				current: 0,
-				items: ['基础信息', '设备信息', '原纸交易', '废纸交易']
-			}
-		},
-		methods: {
-			onClickItem(e) {
-				console.log('e', e)
-				this.current = e.currentIndex
-			}
+import qnHeader from '@/components/qn-header/qn-header.vue'
+import basicInformation from './basic-information.vue'
+import equipmentInformation from './equipment-information.vue'
+import basePaperDeals from './base-paper-deals.vue'
+import wastePaperTrading from './waste-paper-trading.vue'
+
+export default {
+	components: {
+		qnHeader,
+		basicInformation,
+		equipmentInformation,
+		basePaperDeals,
+		wastePaperTrading
+	},
+	data() {
+		return {
+			current: 0,
+			items: ['基础信息', '设备信息', '原纸交易', '废纸交易'],
+			customerId: null,
+			
 		}
+	},
+	onLoad(option) {
+		this.customerId = option.id || '800890'
+		this.$nextTick(() => {
+			this.$refs.basicInformationRef.getBaseInfo()
+		})
+	},
+	methods: {
+		onClickItem(e) {
+			console.log('e', e)
+			this.current = e.currentIndex
+		},
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.warpper {
-		.header-title {
-			font-size: 36rpx;
-			color: #000000;
-			letter-spacing: 0;
-			text-align: center;
-			font-weight: 500;
-		}
+.warpper {
+	.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;
-		}
+	.right-title {
+		font-size: 28rpx;
+		color: #007aff;
+		text-align: center;
+		line-height: 40rpx;
+		font-weight: 500;
 	}
+}
 </style>
diff --git a/static/imgs/client-detail/address-icon.png b/static/imgs/client-detail/address-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5184a40173c679a06ed94c5eaac86cb9f9579884
GIT binary patch
literal 1537
zcmV+c2LAbpP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91AfN*P1ONa40RR91AOHXW0IY^$^8f$^Ye_^wR9FecS8Hq(RTMtwZXdf-
zc~lfkeWb)_#2;cbqLGkbNJJ14XuCWl5Hyij2nMAOG5Q0<bPH;E_<&z36eHV35l}P+
z(L^IYF(zsxib13JtRg$p*Ua&|)4kK#?X<2);w0VkopZl)?wNDXy>m<SKR<jn^Cvet
zW5uJJg`|o|MiBAOkSB+gSx25(&42uxm_;X$+#@mXo6ft4y_F(#P4pz(ODu23SZzo*
zB;JbV<XekMAlcG=tt&mdNoZWY``{WA?<*gkxO4Xk?iief+6^_R$7)mASt8tq5?cY6
z`3ELBAjDrO=09N{Eh5)LPKB&6JZ3&ltZvUV#E%<Wp&T-SnihK^dvq9UUFJJ7f2WA=
zPdCJOBe)a>OFkjzd4JjUc&`Td#B)Ah$4V0u()aT3g?z0Kn!uuMGU`m${v2f=?Gu^b
zQHjLt^eX-(Dp1&#OxY7$k(Xf`)8|XCW*RG|hdBl-0}5sKjPrn*9BF<LPb8)nGr5kF
zZnWNKrWvS`qjfaxv}8-?Z5kIokqPLx7p4_H8KsWJXkptbK3(WMl#Vz4kc8J6jw{|n
z28U&20@-Zm45VGIiCCk3=`|G}g`G5()s&E>v`CiFT3Jq$@RkFXQ<cRx!}@E^_on1y
z_Qi#9A`?LPX@-bad%<8MWf}S+OUJN8&%(BWTzZ?9(e}b5(0F<Y_WOR=N?tEdH8G5g
zPC%&I5K7AVJ%a-&^a${kfv$nj-B`4lc{V8Mg}`6Lt1cXmPJrnmLv$tnlfi)$niSwL
zaA|T_)mRCgGB&JH5ZBlu6Tlv}4S{;PE(>r!_^}^`5Yvf}=0hPhEU*dp$ITfd6F}jD
zlglNU5CrH4t^F{E7;joeFBaN84pmD@5ZCY`6Hp|t83K00k^tub@1U1R(R`?%q02k)
zw;w%l3vZ?G!`x&uzLet4HMSCp9WvO+0b558EPh-@p6+%|VsgKHG3F!=mv-Y+tgKDh
z&G<Gn_VM}f-X?2Gp>Jdb^fw(<*k;JC(8fESluDx)BlU5NZF!&Jsu-^~I4mO*(1i0x
zS`VWazU?DRb=PTU?~?6O+NTfwJHJ)NxI`K3%@WPTk-W3LK5-<<YtRICEM*&m3*g+N
z9kDYe|JGsehzb(6E!ZN%yF2ZJSiVcN9sVcEhb8U_bHaGg1T?9=$$A$zoYlqw-`~Y`
zDSMOA3#FdC({Ww_Pu~sjuw7D8GJB{?Nn{iDIrsn8G-o$JTWc)L>S;ALzA`<BQR%)X
zxkWB?9s3YUb)B~0M%2wp&1`Rozn-H+ilP$Gp0&+(E0!TBC63qwma^vUtmka)rmm~R
zbq}EImus$`T*YW!y51UaF6i;_Q*;8_sV0?Ohc|pM6yQ@*s+Bzt$<YXH$C_tRp_+es
za}#4g0{Zaq*vTN^IF7}pWY&~_X~<gEHfNXP%e%#Ncz6s|IYo+RW$LY?#*TA<>sp-W
zu_bR*N-Zr+Y(Nvb<gAC&6qK_{Jg?3KGBVRt@f63@G-TdkY+6G9Bu;!ocyeu@lj^(_
z@o*YSwI^<y?iFn}PhJ9ZQ(faQu-qTiHzAS82FldO-zY8R@tAfixCe1FZc=5|#I{B&
z?<m%B(oKnz$nIl5rqBhR<81bE?k8^v^cM3({L>4Kv@6qOEew;-7SDaOdwg$i?+2(v
zDSE`URH6#ai~pvG{FBNA#yW*A88RAY`EzFMzer4u-X(pTu0j&AtT<Ny4@>~YBlz=g
zHE_5UeE{{`KB(*&ixbC8)Vv-TRhig|674aA=UQUD@n4jx(`Sc?o!0}#=-*y@)YV2m
nCsM?ztc)MUH^%?An3#V9^TXeh{9a+}00000NkvXXu0mjf%aXiO

literal 0
HcmV?d00001

diff --git a/static/imgs/client-detail/arrow-down-icon.png b/static/imgs/client-detail/arrow-down-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc82fe419ea1ead32043a55013d5db1582b0a3cc
GIT binary patch
literal 446
zcmV;v0YUzWP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj6Xh}ptR9Hu27zLwX6pR950V4}XAg_|wN+6RJB7z$*
zvGFBvN!!c?F(D!p0!C(bU(LJ^zqCvK|L0Q+Tn7}w=?IYJ+C@MAg49ACffo?v!vBAN
zUH|s<*eeiQ)^A-P&=FWe0%W;n&g;2A1{1@-U;lo*zH}HWMGe5HA|Jf%3CL&ILIT<6
zAR5GnN>LMFcLXJtGeT(+0LT$r5AY~@N`rW>k2RbYwWu<N1^e|WqRIb$eOdrkN(3Oo
z0U&_t2rwYSatZ-bbkHu&5deERz^Eb@u;C%P<sd$%gvm50mvTU$9N>b|V1S$;*@V<P
zpu#u-HOhf+P#SDGyc__6|9`%J1xru|kWdZ)F)NQ$1yqWffQWJch*`KLN+9Y91L~Fo
zKyYK4Si#?KuP1`o!~p7*0}Oxv-<T?%`}h0XsZar01LWxV^N*QBFdZsEPXH+gnA!Q0
op#lQ}P|AT(FbYNiX@G$N0ER-(gSDLy0000007*qoM6N<$g5v0`jsO4v

literal 0
HcmV?d00001

diff --git a/static/imgs/client-detail/arrow-up-icon.png b/static/imgs/client-detail/arrow-up-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe9a53c01dcdfc01954f7eaff310b9f2dd4a5e47
GIT binary patch
literal 421
zcmV;W0b2fvP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj6Pf0{UR9Hu27zLwX6i^7bpfvpfyO3J4QuOhMj7+R5
zP$BvOc44h_?UKL$v`hZ~SB^dNgc3(EL204^hp2A0O5)||K&^~mzPPb8FeDC;>j;t@
zz#(RkuN;4A3fS`hfBt>Ey6`kuoI*zs1vn*4OF%&m#>Kz?vI(jr0EJma%*)ro#3_vq
zoPbNpq5_NMFhE;JaLd@%;;|eC$aVz5G{DHp!wqHt<NWqK&E#M2?<@fGAplkm{C;z?
zGyLV@iuE84yRfDhGpCRyScV#aUo&DFy3av;Ead>JuyMgk79OcUD4#X}WH~50s1fJj
zyi5uJS+1INeJ%qd3q1OMygd8#-cn14|Nnm9feH}~NGb<VET?xlfE?^}F9&c~4g<7x
z1OdxofOh2ox3sM-EY7i%1290-a)3!tCvh$gpQ8i%lmnw+6pVsl1Q-|q&XLk)o7GIU
P00000NkvXXu0mjf3T&+2

literal 0
HcmV?d00001