From 789b4d8166075f1897fdebcb2dbae428c194265f Mon Sep 17 00:00:00 2001
From: zhangmingzhu <zhangmingzhu123>
Date: Wed, 10 Dec 2025 09:58:39 +0800
Subject: [PATCH] 配置信息JSON信息头

---
 components/customerHeader/customerHeader.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 components/customerHeader/customerHeader.js  | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html                                   | 22 ++++++++++++++++------
 3 files changed, 132 insertions(+), 6 deletions(-)
 create mode 100644 components/customerHeader/customerHeader.css
 create mode 100644 components/customerHeader/customerHeader.js

diff --git a/components/customerHeader/customerHeader.css b/components/customerHeader/customerHeader.css
new file mode 100644
index 0000000..715bf68
--- /dev/null
+++ b/components/customerHeader/customerHeader.css
@@ -0,0 +1,61 @@
+.approve--container {
+	margin-bottom: 160px;
+}
+.approve-info-container {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 3;
+	background-color: #fff;
+	height: 155px;
+}
+
+.approve-info-container .info-header {
+  padding: 10px 0;
+}
+
+.approve-info-container .title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #333333;
+  margin-bottom: 10px;
+  margin-left: 24px;
+}
+
+.approve-info-container .contact-info,
+.approve-info-container .id-info,
+.approve-info-container .id-number {
+  font-size: 14px;
+  color: #666666;
+  margin-bottom: 10px;
+  margin-left: 24px;
+}
+.warp-tags {
+	margin-top: 26px;
+	overflow: auto;
+}
+.approve-info-container .tags {
+	width: 1000px;
+}
+
+.approve-info-container .tag-item {
+	padding: 4px 10px;
+	background-color: #e6f3ff;
+	color: #0066cc;
+	border-radius: 4px;
+	font-size: 14px;
+	display: inline-block;
+	margin-left: 10px;
+}
+.approve-info-container .status-seal {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 4;
+	width: 80px;
+	height: 80px;
+	padding: 16px 16px 0 0;
+}
+.approve-info-container .status-seal img {
+	width: 100%;
+}
\ No newline at end of file
diff --git a/components/customerHeader/customerHeader.js b/components/customerHeader/customerHeader.js
new file mode 100644
index 0000000..bed88c5
--- /dev/null
+++ b/components/customerHeader/customerHeader.js
@@ -0,0 +1,55 @@
+Vue.component('customer-header', {
+    template: `
+    <div class="approve--container">
+		<div class="approve-info-container">
+        <!-- 信息头 -->
+        <div class="info-header">
+          <div class="title">{{ this.cusinfo.partyName }}</div>
+          <div class="contact-info">
+            <span>联系电话：</span>
+            <span>{{ this.cusinfo.mobileNo }}</span>
+          </div>
+          <div class="id-number">
+            <span>证件号码：</span>
+            <span>{{ this.cusinfo.certNo }}</span>
+          </div>
+          <!-- 标签 -->
+					<div class="warp-tags">
+						<div class="tags">
+							<div v-for="(tag, index) in this.tags" v-if="tag" :key="index" class="tag-item">
+								{{ tag }}
+							</div>
+						</div>
+					</div>
+          <!-- 状态印章 -->
+					<div class="status-seal">
+			<img v-if="this.statusText === '待审批'" src="/static/img/customer/daishenpi.png" class="seal-img" />
+			<img v-if="this.statusText === '已撤销'" src="/static/img/customer/yichexiao.png" class="seal-img" />
+			<img v-if="this.statusText === '已完成'" src="/static/img/customer/yiwancheng.png" class="seal-img" />
+			<img v-if="this.statusText === '已终结'" src="/static/img/customer/yizhongjie.png" class="seal-img" />
+			<img v-if="this.statusText === '运行中'" src="/static/img/customer/yunxingzhong.png" class="seal-img" />
+          </div>
+        </div>
+		</div>
+      </div>
+    `,
+    props: ['cusinfo', 'tags', 'statusText'], // html接收字段名都是小写，单向传递
+    data() {
+        return {
+          imgUrl: '',
+					formRenderData: null,
+					// applicantName: '李壮壮',
+					// contactPhone: '15021216363',
+					// idType: '身份证',
+					// idNumber: '130123199212301123',
+					// tags: ['未婚男性', '农户', '国家公务员', '文盲或半文盲', '免税', '稻谷种植', '其他'],
+					activeTab: 'acceptance'
+        }
+    },
+	created(){
+		console.log('---cusinfo-', this.statusText)
+	},
+    methods: { // 组件内方法
+		
+    }
+})
diff --git a/index.html b/index.html
index 2bed8c3..22741a5 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <title id="title">Document</title>
   <link rel="stylesheet" href="element-ui.min.css">
   <link rel="stylesheet" href="VFormRender.css">
+	<link rel="stylesheet" href="./components/customerHeader/customerHeader.css">
   <style type="text/css">
     * {
       margin: 0;
@@ -29,7 +30,8 @@
 </head>
 
 <body>
-  <div id="app" v-loading="loading" style="width: 93vw;height: 100vh;z-index:-1">
+  <div id="app" v-loading="loading" style="height: 100vh;z-index:-1">
+		<customer-header :cusinfo="cusinfo" :tags="tags" :status-text="statusText"></customer-header>
     <v-form-render :preview-state="true" identi-fication='XCX' :form-json="formJson" :form-data="formData"
       :option-data="optionData" ref="vFormRef">
     </v-form-render>
@@ -45,10 +47,11 @@
   <script src="common.js"></script>
   <script src="uni-webview.js"></script>
   <script src="jweixin.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
-  <script type="text/javascript"
-    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3YILlt9BGfidJTSR3VOIi0QhTyWngyEX"></script>
-  <script>
+<!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script> -->
+<!--  <script type="text/javascript"
+    src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3YILlt9BGfidJTSR3VOIi0QhTyWngyEX"></script> -->
+	<script src="./components/customerHeader/customerHeader.js"></script>	
+	<script>
     var vm
     let params = getUrlPatams()
     let urlParams = JSON.parse(params)
@@ -86,9 +89,16 @@
           formJson: {},
           formData: {},
           optionData: {},
-          loading: false
+          loading: false,
+		  cusinfo: {},
+		  tags: [],
+		  statusText: ''
         },
         async created() {
+			console.log('---------userInfo----', urlParams.sessionData.cusinfo)
+		  this.cusinfo = urlParams.sessionData.cusinfo
+		  this.tags = urlParams.sessionData.tags
+		  this.statusText = urlParams.sessionData.statusText
           this.loading = true
           // 获取字典
           await this.getDic()
--
libgit2 0.27.0