304 lines
8.2 KiB
Vue
304 lines
8.2 KiB
Vue
<template>
|
||
<div class="add">
|
||
<div class="tips">我承认本次申请帮扶情况属实，愿接受有关部门依法核实家庭资产信息，如存在虚报、伪造，造成社会资源浪费。本人资源承担相关惩戒措施。</div>
|
||
<div class="user_info">
|
||
<div class="item">
|
||
<div class="left">
|
||
<span>*</span><span>申请人姓名</span>
|
||
</div>
|
||
<input type="text" class="right__text" v-model="form.name" placeholder="请输入" :clearable="false" maxlength="20"/>
|
||
</div>
|
||
<div class="item">
|
||
<div class="left">
|
||
<span>*</span><span>申请人身份证号</span>
|
||
</div>
|
||
<input type="text" class="right__text" v-model="form.idNumber" placeholder="请输入" maxlength="18"/>
|
||
</div>
|
||
<div class="item">
|
||
<div class="left">
|
||
<span>*</span><span>联系方式</span>
|
||
</div>
|
||
<input type="number" class="right__text" v-model="form.phone" placeholder="请输入" :clearable="false" maxlength="11"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="family_info">
|
||
<div class="item">
|
||
<div class="left">
|
||
<span>*</span><span>家庭人口数</span>
|
||
</div>
|
||
<!-- <u-input type="number" class="right__text" v-model="form.householdNumber" placeholder="请输入" :clearable="false" maxlength="10"/> -->
|
||
<input type="number" class="right__text" v-model="form.householdNumber" @change="householdNumberInput" placeholder="请输入" :clearable="false" maxlength="10"/>
|
||
</div>
|
||
<div class="item">
|
||
<div class="left">
|
||
<span>*</span><span>所在地区</span>
|
||
</div>
|
||
<AiAreaPicker v-model="form.areaId" :areaId="$areaId" class="right__text" :fullName.sync="form.areaName" :selectRoot="false">
|
||
<span :class="form.areaName == '' ? 'color-999' : 'color-333' ">{{ form.areaName || "请选择" }}</span>
|
||
<u-icon name="arrow-right" color="#ddd" style="display: inline-block;"/>
|
||
</AiAreaPicker>
|
||
</div>
|
||
<div class="items">
|
||
<div class="left">
|
||
<span>*</span><span>详细地址</span>
|
||
</div>
|
||
<input type="text" class="textarea" v-model="form.address" placeholder="请输入详细地址" maxlength="100"/>
|
||
</div>
|
||
<div class="items">
|
||
<div class="left">
|
||
<span>*</span><span>申请帮扶原因（最多2项）</span>
|
||
</div>
|
||
<div class="tags">
|
||
<span v-for="(item,index) in list" :key="index" :class="item.checked? 'isCheck':''" @click="helpCheck(item)">{{ item.dictName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="items">
|
||
<div class="left">
|
||
<span>*</span><span>返贫致贫风险说明</span>
|
||
</div>
|
||
<u-input type="textarea" class="text" v-model="form.riskDescription" :clearable="false" placeholder="请简要说明返贫致贫风险"
|
||
placeholder-style="font-size: 15px; color: #999;" maxlength="500" auto-height />
|
||
</div>
|
||
<div class="items">
|
||
<div class="left">
|
||
<span style="margin-right: 8px"></span><span>上传佐证材料（最多9张）</span>
|
||
</div>
|
||
<div style="margin-top: 10px;">
|
||
<AiUploader v-model="form.files" :limit="9" multiple></AiUploader>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="height: 60px;"></div>
|
||
<div class="btn">
|
||
<div @click="comfirm">提交</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
export default {
|
||
name: "add",
|
||
appName: "自主申报",
|
||
data() {
|
||
return {
|
||
form: {
|
||
name: '',
|
||
idNumber: '',
|
||
phone: '',
|
||
householdNumber: '',
|
||
areaId: '',
|
||
areaName: '',
|
||
address: '',
|
||
declareReason: [],
|
||
reason: '',
|
||
riskDescription: '',
|
||
files: []
|
||
},
|
||
list: [],
|
||
flag: false,
|
||
checkList: [],
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.$dict.load('helpDeclarationReason').then(()=>{
|
||
this.list = this.$dict.getDict('helpDeclarationReason').map((item)=>{
|
||
return {
|
||
dictName: item.dictName,
|
||
dictValue: item.dictValue,
|
||
checked: false
|
||
}
|
||
})
|
||
})
|
||
// this.form.areaId = this.user.areaId
|
||
this.form.name = this.user.realName
|
||
this.form.idNumber = this.user.idNumber
|
||
this.form.phone = this.user.phone
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
householdNumberInput() {
|
||
this.form.householdNumber = this.form.householdNumber.replace(/[^\d]/g,'')
|
||
this.$forceUpdate()
|
||
},
|
||
helpCheck(e) {
|
||
e.checked = !e.checked
|
||
this.checkList = this.list.filter(e=>e.checked)
|
||
this.form.declareReason = this.checkList.map(v=> v.dictValue).toString()
|
||
this.form.reason = this.checkList.map(o=>o.dictName).toString()
|
||
},
|
||
|
||
// areaSelect(e) {
|
||
// console.log(e);
|
||
// },
|
||
|
||
comfirm() {
|
||
if(this.flag) return
|
||
|
||
if(!this.form.name) {
|
||
return this.$u.toast('请输入姓名')
|
||
}
|
||
if(!this.form.idNumber) {
|
||
return this.$u.toast('请输入身份证号')
|
||
}
|
||
if(this.form.idNumber) {
|
||
if (!/^[1-9]\d{5}(19\d{2}|20[0-2]\d)(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9xX])$/.test(this.form.idNumber)) {
|
||
return this.$u.toast('请输入正确的身份证号')
|
||
}
|
||
}
|
||
if(!this.form.phone) {
|
||
return this.$u.toast('请输入手机号')
|
||
}
|
||
if(!this.form.householdNumber) {
|
||
return this.$u.toast('请输入家庭人口数')
|
||
}
|
||
if(!this.form.areaId) {
|
||
return this.$u.toast('请选择所在地区')
|
||
}
|
||
if(!this.form.address) {
|
||
return this.$u.toast('请输入详细地址')
|
||
}
|
||
if(!this.form.declareReason) {
|
||
return this.$u.toast('请选择帮扶原因')
|
||
}
|
||
if(this.form.declareReason) {
|
||
if(this.checkList.length > 2) {
|
||
return this.$u.toast('帮扶原因最多选2项')
|
||
}
|
||
}
|
||
if(!this.form.riskDescription) {
|
||
return this.$u.toast('请输入反贫致贫风险说明')
|
||
}
|
||
|
||
this.flag = true
|
||
this.$instance.post('/app/apphelpdeclarationinfo/addByApplet',{...this.form}).then((res) => {
|
||
if(res.code ==0) {
|
||
uni.navigateTo({url: './result'})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add {
|
||
.tips {
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
background: #FFF8F3;
|
||
color: #FF883C;
|
||
font-size: 30px;
|
||
}
|
||
|
||
|
||
|
||
.user_info,
|
||
.family_info {
|
||
background: #FFF;
|
||
.item {
|
||
display: flex;
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #DDDDDD;
|
||
|
||
.left {
|
||
width: 240px;
|
||
span:first-child {
|
||
color: #FF4466;
|
||
}
|
||
}
|
||
|
||
.right__text {
|
||
width: calc(100% - 240px);
|
||
text-align: right;
|
||
::v-deep .u-input .u-input__input {
|
||
float: right;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.color-999 {
|
||
color: #999;
|
||
}
|
||
.color-333 {
|
||
color: #333;
|
||
}
|
||
|
||
}
|
||
|
||
.item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.items {
|
||
padding: 32px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #DDDDDD;
|
||
.left {
|
||
span:first-child {
|
||
color: #FF4466;
|
||
}
|
||
}
|
||
.text {
|
||
margin-top: 20px;
|
||
}
|
||
.textarea {
|
||
margin-top: 32px;
|
||
}
|
||
.tags {
|
||
margin-top: 20px;
|
||
span {
|
||
display: inline-block;
|
||
width: 31%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
border-radius: 16px;
|
||
border: 1px solid #CCCCCC;
|
||
margin-right: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
span:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
.isCheck {
|
||
color: #FFF;
|
||
background: #4181FF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.family_info {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120px;
|
||
text-align: center;
|
||
background: #FFF;
|
||
padding: 16px 32px;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
div {
|
||
width: 100%;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
background: #4181FF;
|
||
border-radius: 16px;
|
||
color: #FFF;
|
||
font-size: 34px;
|
||
}
|
||
}
|
||
}
|
||
</style> |