b2894lxlx/sifa-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260325稳定版

Browse Source
This commit is contained in:
b2894lxlx
2026-03-25 15:54:56 +08:00
parent f2ef63d910
commit 7b30030d9b
22 changed files with 1391 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
onlineSheetPages/pages/economicDifficulty.vue
+435
View File
@@ -0,0 +1,435 @@
<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>