新增助养
This commit is contained in:
@@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-btn">
|
<div class="footer-btn">
|
||||||
<div class="btn primary" @click="toList()">查看儿童详细信息</div>
|
<div class="btn primary" @click="toView()">查看儿童详细信息</div>
|
||||||
<div class="btn">返回</div>
|
<div class="btn">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -71,6 +71,9 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
view(index) {
|
view(index) {
|
||||||
this.list[index].isView = !this.list[index].isView
|
this.list[index].isView = !this.list[index].isView
|
||||||
|
},
|
||||||
|
toView() {
|
||||||
|
uni.navigateTo({url: `./AppChildrenDetailView`})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<span class="requier">*</span>
|
<span class="requier">*</span>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="label">儿童类型</div>
|
<div class="label">儿童类型</div>
|
||||||
<div class="value">请选择</div>
|
<div class="value placeholder">请选择</div>
|
||||||
<img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" class="right-icon">
|
<img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" class="right-icon">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,6 +97,9 @@ uni-page-body {
|
|||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
.right-icon {
|
.right-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<section class="AppRecognize">
|
<section class="AppRecognize">
|
||||||
<u-navbar title="认亲助养" title-color="#fff" title-width="300" title-size="34"
|
<u-navbar title="认亲助养" title-color="#fff" title-width="300" title-size="34"
|
||||||
:title-bold="true" :background="backgroundNavbar" :height="44" back-icon-color="#fff">
|
:title-bold="true" :background="backgroundNavbar" :height="44" back-icon-color="#fff">
|
||||||
<div slot="right" class="btn-right">查询/新增</div>
|
<div slot="right" class="btn-right" @click="showAdd=true">查询/新增</div>
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
<div class="select-content">
|
<div class="select-content" v-if="showAdd">
|
||||||
<span class="triangle-up"></span>
|
<span class="triangle-up"></span>
|
||||||
<div class="item" @click="linkTo('./AppRecognizeSearchTab')">查询</div>
|
<div class="item" @click="linkTo('./AppRecognizeSearchTab')">查询</div>
|
||||||
<div class="item" @click="linkTo('./AppRecognizeAdd')">新增认清助养</div>
|
<div class="item" @click="linkTo('./AppRecognizeAdd')">新增认清助养</div>
|
||||||
@@ -58,6 +58,7 @@ export default {
|
|||||||
'font-weight' : '400',
|
'font-weight' : '400',
|
||||||
'color': '#222'
|
'color': '#222'
|
||||||
},
|
},
|
||||||
|
showAdd: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@@ -65,10 +66,14 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
linkTo(url) {
|
linkTo(url) {
|
||||||
|
this.showAdd = false
|
||||||
uni.navigateTo({url})
|
uni.navigateTo({url})
|
||||||
},
|
},
|
||||||
toDetail() {
|
toDetail() {
|
||||||
uni.navigateTo({url: `./AppRecognizeDetail`})
|
uni.navigateTo({url: `./AppRecognizeDetail`})
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.tabIndex = e
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,159 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="AppRecognizeAdd">
|
<section class="AppRecognizeAdd">
|
||||||
<div class="step-info">
|
<div class="step-info">
|
||||||
<u-steps :list="stepTitleList" :current="stepIndex" active-color="#2183FF" un-active-color="#D0D1D6" mode="number"></u-steps>
|
<div class="step-list">
|
||||||
|
<div :class="index <= stepIndex ? 'step-item step-active' : 'step-item'" v-for="(item, index) in stepTitleList" :key="index">
|
||||||
|
<div class="index">{{index+1}}</div>
|
||||||
|
<div class="line" v-if="index!=3"></div>
|
||||||
|
<p class="text">{{item.name}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form" v-if="stepIndex == 0">
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养人姓名</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">与助养对象关系</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养方式</div>
|
||||||
|
<div class="value">请选择</div>
|
||||||
|
<img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" class="right-icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">详细描述</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">与助养对象关系</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">办理日期</div>
|
||||||
|
<div class="value">请选择</div>
|
||||||
|
<img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" class="right-icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-list" v-if="stepIndex == 1">
|
||||||
|
<div class="item">
|
||||||
|
<div class="item-top">
|
||||||
|
<div class="title">儿童姓名:王微微</div>
|
||||||
|
<div class="info">身份证号:123************456人</div>
|
||||||
|
<div class="info">儿童类别:社会散居孤儿</div>
|
||||||
|
<div class="info">出生年月:2000-09-15</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form" v-if="stepIndex == 2">
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养者身份证信息(身份证正面)</div>
|
||||||
|
<div class="value">
|
||||||
|
<AiUploader style="margin-top: 12px;" :def.sync="files" :limit="1" action="/admin/file/add2"></AiUploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养者身份证信息(身份证反面)</div>
|
||||||
|
<div class="value">
|
||||||
|
<AiUploader style="margin-top: 12px;" :def.sync="files" :limit="1" action="/admin/file/add2"></AiUploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养者经济状况证明</div>
|
||||||
|
<div class="value">
|
||||||
|
<AiUploader style="margin-top: 12px;" :def.sync="files" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier"></span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">助养者健康状况</div>
|
||||||
|
<div class="value">
|
||||||
|
<AiUploader style="margin-top: 12px;" :def.sync="files" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier"></span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">其他材料</div>
|
||||||
|
<div class="value">
|
||||||
|
<AiUploader style="margin-top: 12px;" :def.sync="files" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form" v-if="stepIndex == 3">
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">办理人</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">办理人联系电话</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="requier">*</span>
|
||||||
|
<div class="item-content">
|
||||||
|
<div class="label">办理机构</div>
|
||||||
|
<div class="value">
|
||||||
|
<u-input type="text" placeholder="请输入" placeholder-style="color:#999;font-size:14px;" height="40" v-model="value" maxlength="10"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-btn">
|
<div class="footer-btn">
|
||||||
<div class="btn primary">扫描身份证</div>
|
<div class="btn primary" v-if="!stepIndex">扫描身份证</div>
|
||||||
<div class="btn primary">查询</div>
|
<div class="btn primary" @click="next" v-if="stepIndex < 3">下一步</div>
|
||||||
<div class="btn">返回</div>
|
<div class="btn primary" @click="confirm" v-if="stepIndex == 3">确认</div>
|
||||||
|
<div class="btn" @click="pre" v-if="stepIndex != 0">返回</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -18,7 +165,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
stepTitleList: [{name: '助养信息'}, {name: '助养对象'}, {name: '相关文件'}, {name: '经办人'}],
|
stepTitleList: [{name: '助养信息'}, {name: '助养对象'}, {name: '相关文件'}, {name: '经办人'}],
|
||||||
stepIndex: 0
|
stepIndex: 0,
|
||||||
|
files: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@@ -33,6 +181,12 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
linkTo(url) {
|
linkTo(url) {
|
||||||
uni.navigateTo({url})
|
uni.navigateTo({url})
|
||||||
|
},
|
||||||
|
next() {
|
||||||
|
this.stepIndex ++
|
||||||
|
},
|
||||||
|
pre() {
|
||||||
|
this.stepIndex --
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -40,9 +194,153 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
uni-page-body {
|
uni-page-body {
|
||||||
background-color: #fff;
|
background-color: #F5F6F7;
|
||||||
}
|
}
|
||||||
.AppRecognizeAdd {
|
.AppRecognizeAdd {
|
||||||
|
.step-info {
|
||||||
|
width: 100%;
|
||||||
|
padding: 40px 32px 44px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.step-list {
|
||||||
|
display: flex;
|
||||||
|
.step-item {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 26px;
|
||||||
|
position: relative;
|
||||||
|
.index {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #D0D1D6;
|
||||||
|
color: #FFF;
|
||||||
|
margin: 0 140px 0 16px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 140px;
|
||||||
|
height: 1px;
|
||||||
|
background: #D0D1D6;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 62px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step-item:nth-child(1) {
|
||||||
|
.index {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
left: 78px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step-item:nth-child(2),
|
||||||
|
.step-item:nth-child(3) {
|
||||||
|
.text {
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.step-active {
|
||||||
|
.index, .line {
|
||||||
|
background: #2183FF;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #2183FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form {
|
||||||
|
background-color: #fff;
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 16px;
|
||||||
|
.requier {
|
||||||
|
line-height: 44px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #F46;
|
||||||
|
padding: 0 4px 0 12px;
|
||||||
|
}
|
||||||
|
.item-content {
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #F4F4F5;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
position: relative;
|
||||||
|
.label {
|
||||||
|
line-height: 44px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.right-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-list {
|
||||||
|
padding: 24px 32px 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
background: #FFF;
|
||||||
|
border-radius: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.item-top {
|
||||||
|
padding: 24px;
|
||||||
|
.title {
|
||||||
|
line-height: 48px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 34px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
line-height: 48px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-bottom {
|
||||||
|
padding: 14px 0 10px 24px;
|
||||||
|
border-top: 1px solid #E4E5E6;
|
||||||
|
.time {
|
||||||
|
line-height: 48px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.footer-btn {
|
.footer-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -55,6 +55,9 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
linkTo(url) {
|
linkTo(url) {
|
||||||
uni.navigateTo({url})
|
uni.navigateTo({url})
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.tabIndex = e
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user