Skip to content

M
miniProgramsFormRender
提交 789b4d81 作者: zhangmingzhu
操作

配置信息JSON信息头

上级 60b24b75
正在显示 包含 133 行增加 和 6 行删除
components/customerHeader/customerHeader.css 0 → 100644
.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
components/customerHeader/customerHeader.js 0 → 100644
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: { // 组件内方法
}
})
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()
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论