436 lines
14 KiB
Vue
436 lines
14 KiB
Vue
<template>
|
|
<view class="min-height bg-main-light p-30">
|
|
<HeaderItem title="经济困难状况说明表"/>
|
|
<u-steps current="1">
|
|
<u-steps-item title="法律援助申请"/>
|
|
<u-steps-item title="经济困难状况说明"/>
|
|
</u-steps>
|
|
<!-- 家庭成员月收入状况 -->
|
|
<TitleItem title="申请人及共同生活的家庭成员月收入状况"/>
|
|
<view class="card mt-25 p-30">
|
|
<view v-for="(member, index) in peopleList" :key="index" class="member-item">
|
|
<view class="member-header">
|
|
<text class="member-title">成员 {{ index + 1 }}</text>
|
|
<u-icon v-if="peopleList.length > 1" name="close-circle" color="#f56c6c" size="20"
|
|
@click="removeMember(index)"></u-icon>
|
|
</view>
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="姓名" border-bottom>
|
|
<u-input v-model="member.name" border="none" placeholder="请输入姓名"/>
|
|
</u-form-item>
|
|
<u-form-item label="与申请人关系" border-bottom>
|
|
<u-input v-model="member.relation" border="none" placeholder="请输入关系"/>
|
|
</u-form-item>
|
|
<u-form-item label="职业及所在单位" border-bottom>
|
|
<u-input v-model="member.occupation" border="none" placeholder="请输入职业及所在单位"/>
|
|
</u-form-item>
|
|
<u-form-item label="工资性收入(元)" border-bottom>
|
|
<u-input v-model="member.salaryIncome" type="number" border="none" placeholder="请输入工资性收入"
|
|
@input="calculateMemberTotal(index)"/>
|
|
</u-form-item>
|
|
<u-form-item label="生产经营性收入(元)" border-bottom>
|
|
<u-input v-model="member.businessIncome" type="number" border="none" placeholder="请输入生产经营性收入"
|
|
@input="calculateMemberTotal(index)"/>
|
|
</u-form-item>
|
|
<u-form-item label="其他收入(元)" border-bottom>
|
|
<u-input v-model="member.otherIncome" type="number" border="none" placeholder="请输入其他收入"
|
|
@input="calculateMemberTotal(index)"/>
|
|
</u-form-item>
|
|
<u-form-item label="合计(元)" border-bottom>
|
|
<u-input :value="getMemberTotal(index)" border="none" readonly disabled/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="add-btn" @click="addMember">
|
|
<u-icon name="plus-circle" color="#3c9cff" size="20"></u-icon>
|
|
<text class="add-text">添加家庭成员</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收入汇总 -->
|
|
<TitleItem title="收入汇总"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="总计(元)" border-bottom>
|
|
<u-input :value="totalIncome" border="none" readonly disabled/>
|
|
</u-form-item>
|
|
<u-form-item label="家庭人均月收入(元)" border-bottom>
|
|
<u-input :value="averageIncome" border="none" readonly disabled/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 房产情况 -->
|
|
<TitleItem title="房产情况"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="是否有房产" border-bottom>
|
|
<view class="flex justify-start items-center">
|
|
<view class="tag" @click="formData.hasHouse = true"
|
|
:class="[formData.hasHouse === true ? 'tag-active' : '']">有
|
|
</view>
|
|
<view class="tag ml-20" @click="formData.hasHouse = false"
|
|
:class="[formData.hasHouse === false ? 'tag-active' : '']">无
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<template v-if="formData.hasHouse">
|
|
<u-form-item label="房产套数" border-bottom>
|
|
<u-input v-model="formData.houseNum" type="number" border="none" placeholder="请输入房产套数"/>
|
|
</u-form-item>
|
|
<u-form-item label="总面积(㎡)" border-bottom>
|
|
<u-input v-model="formData.houseArea" type="number" border="none" placeholder="请输入总面积"/>
|
|
</u-form-item>
|
|
<u-form-item label="位置" border-bottom>
|
|
<u-textarea v-model="formData.houseAddress" border="none" placeholder="请输入房产位置"/>
|
|
</u-form-item>
|
|
</template>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 汽车情况 -->
|
|
<TitleItem title="汽车情况"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="是否有汽车" border-bottom>
|
|
<view class="flex justify-start items-center">
|
|
<view class="tag" @click="formData.hasCar = true" :class="[formData.hasCar === true ? 'tag-active' : '']">
|
|
有
|
|
</view>
|
|
<view class="tag ml-20" @click="formData.hasCar = false"
|
|
:class="[formData.hasCar === false ? 'tag-active' : '']">无
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<template v-if="formData.hasCar">
|
|
<u-form-item label="品牌型号" border-bottom>
|
|
<u-textarea v-model="formData.car" border="none" placeholder="请输入汽车品牌型号"/>
|
|
</u-form-item>
|
|
</template>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 资产情况 -->
|
|
<TitleItem title="资产情况"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="现金、存款、有价证券等资产(元)" border-bottom>
|
|
<u-input v-model="formData.cash" type="number" border="none" placeholder="请输入资产金额"/>
|
|
</u-form-item>
|
|
<u-form-item label="其他需要说明的资产" border-bottom>
|
|
<u-textarea v-model="formData.otherProperty" border="none" placeholder="请输入其他资产说明"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 重大支出 -->
|
|
<TitleItem title="重大支出"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="重大支出说明" border-bottom>
|
|
<u-textarea v-model="formData.outcome" border="none" placeholder="请输入重大支出说明"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 申请人信息 -->
|
|
<TitleItem title="申请人信息"/>
|
|
<view class="card mt-25 p-30">
|
|
<u-form label-width="200rpx">
|
|
<u-form-item label="姓名" border-bottom>
|
|
<u-input v-model="formData.name" border="none" placeholder="请输入姓名"/>
|
|
</u-form-item>
|
|
<u-form-item label="手机号" border-bottom>
|
|
<u-input v-model="formData.phone" type="number" border="none" placeholder="请输入手机号"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="mt-30">
|
|
<u-button type="primary" shape="circle" @click="save"
|
|
:hairline="false"
|
|
:custom-style="{border: 0, background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%);'}">
|
|
提交
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderItem from "@/components/HeaderItem.vue";
|
|
import TitleItem from "@/components/TitleItem.vue";
|
|
import {submitEconomicDifficulty} from "@/api/economicDifficulty";
|
|
|
|
export default {
|
|
name: "economicDifficulty",
|
|
components: {TitleItem, HeaderItem},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
aidId: 0,
|
|
// 家庭成员月收入状况
|
|
peopleList: '',
|
|
// 房产情况
|
|
hasHouse: false,
|
|
houseNum: '',
|
|
houseArea: '',
|
|
houseAddress: '',
|
|
// 汽车情况
|
|
hasCar: false,
|
|
car: '',
|
|
// 资产情况
|
|
cash: '',
|
|
otherProperty: '',
|
|
// 重大支出
|
|
outcome: '',
|
|
// 申请人信息
|
|
name: '',
|
|
phone: ''
|
|
},
|
|
peopleList: [
|
|
{
|
|
name: '',
|
|
relation: '',
|
|
occupation: '',
|
|
salaryIncome: '',
|
|
businessIncome: '',
|
|
otherIncome: '',
|
|
totalIncome: ''
|
|
}
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算总收入
|
|
totalIncome() {
|
|
const total = this.peopleList.reduce((sum, member) => {
|
|
const salary = parseFloat(member.salaryIncome) || 0;
|
|
const business = parseFloat(member.businessIncome) || 0;
|
|
const other = parseFloat(member.otherIncome) || 0;
|
|
return sum + salary + business + other;
|
|
}, 0);
|
|
return total.toFixed(2);
|
|
},
|
|
// 计算人均月收入
|
|
averageIncome() {
|
|
const memberCount = this.peopleList.length;
|
|
if (memberCount === 0) return '0.00';
|
|
const avg = parseFloat(this.totalIncome) / memberCount;
|
|
return avg.toFixed(2);
|
|
}
|
|
},
|
|
methods: {
|
|
// 计算单个成员的收入合计
|
|
getMemberTotal(index) {
|
|
const member = this.peopleList[index];
|
|
if (!member) return '0.00';
|
|
const salary = parseFloat(member.salaryIncome) || 0;
|
|
const business = parseFloat(member.businessIncome) || 0;
|
|
const other = parseFloat(member.otherIncome) || 0;
|
|
const total = salary + business + other;
|
|
return total.toFixed(2);
|
|
},
|
|
// 计算成员收入合计（用于输入时触发）
|
|
calculateMemberTotal(index) {
|
|
const member = this.peopleList[index];
|
|
if (!member) return;
|
|
const salary = parseFloat(member.salaryIncome) || 0;
|
|
const business = parseFloat(member.businessIncome) || 0;
|
|
const other = parseFloat(member.otherIncome) || 0;
|
|
member.totalIncome = (salary + business + other).toFixed(2);
|
|
},
|
|
// 添加家庭成员
|
|
addMember() {
|
|
this.peopleList.push({
|
|
name: '',
|
|
relation: '',
|
|
occupation: '',
|
|
salaryIncome: '',
|
|
businessIncome: '',
|
|
otherIncome: '',
|
|
totalIncome: ''
|
|
});
|
|
},
|
|
// 删除家庭成员
|
|
removeMember(index) {
|
|
if (this.peopleList.length > 1) {
|
|
this.peopleList.splice(index, 1);
|
|
}
|
|
},
|
|
// 表单验证
|
|
validate() {
|
|
if (this.peopleList.length === 0) {
|
|
this.$toast('请至少添加一个家庭成员');
|
|
return false;
|
|
}
|
|
|
|
for (let i = 0; i < this.peopleList.length; i++) {
|
|
const member = this.peopleList[i];
|
|
if (!member.name) {
|
|
this.$toast(`请输入成员${i + 1}的姓名`);
|
|
return false;
|
|
}
|
|
if (!member.relation) {
|
|
this.$toast(`请输入成员${i + 1}与申请人的关系`);
|
|
return false;
|
|
}
|
|
if (!member.occupation) {
|
|
this.$toast(`请输入成员${i + 1}的职业及所在单位`);
|
|
return false;
|
|
}
|
|
// 至少需要填写一项收入
|
|
if (!member.salaryIncome && !member.businessIncome && !member.otherIncome) {
|
|
this.$toast(`请至少填写成员${i + 1}的一项收入`);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (this.formData.hasHouse === null) {
|
|
this.$toast('请选择是否有房产');
|
|
return false;
|
|
}
|
|
|
|
if (this.formData.hasHouse) {
|
|
if (!this.formData.houseNum) {
|
|
this.$toast('请输入房产套数');
|
|
return false;
|
|
}
|
|
if (!this.formData.houseArea) {
|
|
this.$toast('请输入房产总面积');
|
|
return false;
|
|
}
|
|
if (!this.formData.houseAddress) {
|
|
this.$toast('请输入房产位置');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (this.formData.hasCar === null) {
|
|
this.$toast('请选择是否有汽车');
|
|
return false;
|
|
}
|
|
|
|
if (this.formData.hasCar && !this.formData.car) {
|
|
this.$toast('请输入汽车品牌型号');
|
|
return false;
|
|
}
|
|
|
|
if (!this.formData.name) {
|
|
this.$toast('请输入申请人姓名');
|
|
return false;
|
|
}
|
|
|
|
if (!this.formData.phone) {
|
|
this.$toast('请输入申请人手机号');
|
|
return false;
|
|
}
|
|
|
|
// 验证手机号格式
|
|
const phoneReg = /^1[3-9]\d{9}$/;
|
|
if (!phoneReg.test(this.formData.phone)) {
|
|
this.$toast('请输入正确的手机号');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
// 提交表单
|
|
async save() {
|
|
if (!this.validate()) {
|
|
return;
|
|
}
|
|
|
|
// 准备提交的数据
|
|
const submitData = {
|
|
...this.formData,
|
|
peopleList: JSON.stringify(this.peopleList),
|
|
totalIncome: this.totalIncome,
|
|
avgIncome: this.averageIncome
|
|
};
|
|
|
|
try {
|
|
const res = await submitEconomicDifficulty(submitData);
|
|
if (res) {
|
|
this.$toast('提交成功');
|
|
setTimeout(() => {
|
|
uni.switchTab({url: '/pages/index/index'})
|
|
}, 500);
|
|
}
|
|
} catch (error) {
|
|
console.error('提交失败：', error);
|
|
this.$toast('提交失败，请重试');
|
|
}
|
|
}
|
|
},
|
|
onLoad({aidId}) {
|
|
this.formData.aidId = aidId
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.member-item {
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.member-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.member-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.add-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx;
|
|
border: 1px dashed #3c9cff;
|
|
border-radius: 10rpx;
|
|
margin-top: 20rpx;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-text {
|
|
margin-left: 10rpx;
|
|
color: #3c9cff;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tag {
|
|
border: 1px dashed #999;
|
|
padding: 10rpx;
|
|
border-radius: 15rpx;
|
|
color: #999;
|
|
font-size: 25rpx;
|
|
width: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tag-active {
|
|
color: #3c9cff !important;
|
|
border-color: #3c9cff !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.u-steps-item__wrapper {
|
|
background-color: #E0F2FE !important;
|
|
}
|
|
</style>
|