新增助养

This commit is contained in:
liuye
2024-09-14 09:07:09 +08:00
parent ac2976f365
commit a312d3e34b
5 changed files with 322 additions and 10 deletions

View File

@@ -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`})
} }
}, },
} }

View File

@@ -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;

View File

@@ -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
} }
}, },
} }

View File

@@ -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;

View File

@@ -55,6 +55,9 @@ export default {
methods: { methods: {
linkTo(url) { linkTo(url) {
uni.navigateTo({url}) uni.navigateTo({url})
},
change(e) {
this.tabIndex = e
} }
}, },
} }