zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的房屋流程对接接口，缴费页面功能修改一版

Browse Source
This commit is contained in:
wangyuxin
2026-04-30 08:24:22 +08:00
parent d569bbc8e1
commit 2c528b7973
19 changed files with 2675 additions and 2553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
property-uniapp-project/pageSubPack/my/houseDetail.vue
View File

@@ -32,21 +32,23 @@
</view>
<view class="info-row">
<text class="info-label">小区</text>
<text class="info-value">{{form.community}}}</text>
<text class="info-value">{{form.villageName}}</text>
</view>
<view class="info-row">
<text class="info-label">房间号</text>
<text class="info-value">{{form.houseNumber}}</text>
<text class="info-value">{{form.houseNo}}</text>
</view>
<view class="info-row">
<text class="info-label">业主</text>
<text class="info-value">{{form.owner}}</text>
<text class="info-value">{{form.ownerName}}</text>
</view>
<view class="info-row">
<text class="info-label">房间状态</text>
<text class="info-value"
:style="{color: form.status === '自住' ? '#00aaff' : form.status === '闲置' ?
'#FF700A' : form.status === '租赁' ? '#00aa00' : form.status === '其他' ? '#00557f' : '#999' }">{{form.status}}</text>
<text class="info-value" :style="{color: form.status === '0' ? '#00aaff' : form.status === '1' ?
'#FF700A' : form.status === '2' ? '#00aa00' : form.status === '3' ? '#00557f' : '#999' }">{{
form.status === '0' ? '自住' : form.status === '1' ?
'闲置' : form.status === '2' ? '租赁' : form.status === '3' ? '其他' : ''
}}</text>
</view>
</view>
@@ -59,35 +61,42 @@
</view>
<view class="info-row">
<text class="info-label">住户</text>
<text class="info-value">{{form.resident}}</text>
<text class="info-value">{{form.name}}</text>
</view>
<view class="info-row">
<text class="info-label">房间号</text>
<text class="info-value">{{form.gender}}</text>
<text class="info-value">{{form.houseNo}}</text>
</view>
<view class="info-row">
<text class="info-label">证件类型</text>
<text class="info-value">{{form.documentType}}</text>
<text
class="info-value">{{form.idCardType=='0'?'居民身份证':form.idCardType=='1'?'护照':form.idCardType=='2'?'其他':''}}</text>
</view>
<view class="info-row">
<text class="info-label">证件号码</text>
<text class="info-value">{{form.documentNumber}}</text>
<text class="info-value">{{form.idCard}}</text>
</view>
<view class="info-row">
<text class="info-label">与业主关系</text>
<text class="info-value">{{form.relationship}}</text>
<text
class="info-value">{{form.ownerRelationship=='0'?'本人':form.ownerRelationship=='1'?'配偶':form.ownerRelationship=='2'?'父母':form.ownerRelationship=='3'?'子女':form.ownerRelationship=='4'?'亲属':form.ownerRelationship=='5'?'租户':form.ownerRelationship=='6'?'其他':''}}</text>
</view>
<view class="info-row">
<text class="info-label">手机号码</text>
<text class="info-value">{{form.phoneNum}}</text>
<text class="info-value">{{form.phone}}</text>
</view>
<!-- 身份证照片区 -->
<view class="photo-row">
<text class="info-label" style="width: 200rpx;">本人身份证照片</text>
<view class="photo-list">
<view class="photo-item"></view>
<view class="photo-item"></view>
<view class="photo-item"
:style="{backgroundImage: `url(${form.cardImageFront||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
</view>
<view class="photo-item"
:style="{backgroundImage: `url(${form.cardImageBack||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
</view>
</view>
</view>
</view>
@@ -103,143 +112,149 @@
</button>
</view>
</view>
</template>
<script>
export default {
onReady: function(e) {},
components: {
<script setup>
import {
ref,
onMounted,
computed
} from 'vue'
import {
onReachBottom,
onPullDownRefresh,
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
getMyHouseDetail,
deleteMyHouse
} from '/pageSubPack/api/apiSub.js'
// 响应式数据
const statusBarHeight = ref(20)
const id = ref()
const currentStatus = ref('')
const stepList = ref(["房屋信息", "住户信息", "物业审核", "认证成功"])
const form = ref([])
const statusMap = ref({
success: {
title: "房屋认证成功",
iconClass: "icon-success",
iconText: "✓",
currentStep: 4,
},
computed: {
// 动态计算当前状态配置
statusConfig() {
return this.statusMap[this.currentStatus];
},
// 动态计算当前步骤
currentStep() {
return this.statusConfig.currentStep;
},
pending: {
title: "房屋审核中，请耐心等待",
iconClass: "icon-pending",
iconText: "⏳",
currentStep: 3,
},
created() {
fail: {
title: "房屋认证失败，请重新提交",
iconClass: "icon-fail",
iconText: "✕",
currentStep: 3,
},
onShow() {
})
},
onLoad(option) {
this.id = option.id;
this.currentStatus = option.statusClass;
// 计算属性
const statusConfig = computed(() => {
return statusMap.value[currentStatus.value]
})
const currentStep = computed(() => {
return statusConfig.value.currentStep
})
// 生命周期
onLoad((option) => {
id.value = option.id
currentStatus.value = option.certificationStatus == '0' ? 'pending' : option.certificationStatus == '1' ?
'success' : option.certificationStatus == '2' ? 'fail' : ''
},
mounted() {},
data() {
return {
/* 设定状态栏默认高度 */
statusBarHeight: 20,
// 可通过页面传参动态修改状态：success / pending / fail
id: undefined,
currentStatus: "",
stepList: ["房屋信息", "住户信息", "物业审核", "认证成功"],
form: {
community: '北境碧桂园小区小区',
houseNumber: '101栋2单元402',
owner: '张三',
status: '租赁',
resident: '蒋依依',
gender: '女',
documentType: '身份证',
documentNumber: '371100200001010888',
relationship: '亲属',
phoneNum: '16599999999',
},
// 状态配置表
statusMap: {
success: {
title: "房屋认证成功",
iconClass: "icon-success",
iconText: "✓",
currentStep: 4,
},
pending: {
title: "房屋审核中，请耐心等待",
iconClass: "icon-pending",
iconText: "⏳",
currentStep: 3,
},
fail: {
title: "房屋认证失败，请重新提交",
iconClass: "icon-fail",
iconText: "✕",
currentStep: 3,
},
},
})
onShow(() => {})
onMounted(() => {
getDetail()
})
}
},
const getDetail = async () => {
// 防重复请求
try {
const res = await getMyHouseDetail({
id: id.value
})
methods: {
// 修改按钮事件（仅认证失败显示）
clickUpdate() {
uni.setStorageSync('operationType', 'update')
uni.redirectTo({
url: '/pageSubPack/my/addHouse?id=' + this.id + '&sourcePage=' + 'addHouse',
success: res => {},
fail: () => {},
complete: () => {}
});
},
const data = res.data
form.value = data
console.log(form.value);
} catch (err) {
uni.showToast({
title: `${err}`,
icon: 'none'
})
console.error('列表接口报错：', err)
} finally {
// 删除按钮事件
onDelete() {
uni.showModal({
title: "确认删除",
content: "确认删除此房屋信息吗?",
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '删除中...',
mask: true
}
}
// 方法（函数名完全不变）
const clickUpdate = () => {
uni.setStorageSync('operationType', 'update')
uni.redirectTo({
url: '/pageSubPack/my/addHouse?id=' + id.value + '&sourcePage=addHouse'
})
}
const onDelete = () => {
uni.showModal({
title: "确认删除",
content: "确认删除此房屋信息吗?",
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '删除中...',
mask: true
})
deleteMyHouse({
id: id.value
}).then(res => {
if (res.code === 200) {
uni.showToast({
title: '删除成功',
icon: 'success'
})
setTimeout(() => {
goBack()
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'error'
});
setTimeout(() => {
uni.showToast({
title: '删除成功',
icon: 'success'
});
}, 1000);
setTimeout(() => {
// 提交成功后跳转列表页
uni.hideLoading();
this.goBack();
}, 2500);
}
},
});
},
goBack() {
uni.redirectTo({
url: '/pageSubPack/my/myHouseIndex',
success: res => {},
fail: () => {},
complete: () => {}
});
},
},
}).catch(err => {
uni.showToast({
title: err,
icon: 'error'
});
})
}
}
})
}
const goBack = () => {
uni.redirectTo({
url: '/pageSubPack/my/myHouseIndex'
})
}
</script>
<style lang="scss">
page {
background: #fff;
@@ -251,7 +266,6 @@
display: flex;
flex-direction: column;
height: 100vh;
/* 关键：占满屏幕高度 */
background-color: #f5f7fa;
}
@@ -262,13 +276,10 @@
box-sizing: border-box;
}
/* 顶部状态区 */
.status-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0px 20rpx;
}
@@ -284,17 +295,14 @@
.icon-success {
background-color: #2F77FD;
/* border: 4rpx solid #00b42a; */
}
.icon-pending {
background-color: #2F77FD;
/* border: 4rpx solid #1677ff; */
}
.icon-fail {
background-color: #E34D59;
/* border: 4rpx solid #f53f3f; */
}
.icon-text {
@@ -322,7 +330,6 @@
margin-bottom: 40rpx;
}
/* 步骤条 */
.step-bar {
display: flex;
align-items: center;
@@ -382,7 +389,6 @@
background-color: #1677ff;
}
/* 信息卡片 */
.info-card {
padding: 20rpx;
border: 1rpx solid #f0f0f0;
@@ -435,7 +441,6 @@
font-weight: 500;
}
/* 身份证照片区 */
.photo-row {
margin-top: 30rpx;
display: flex;
@@ -456,13 +461,10 @@
border-radius: 8rpx;
}
/* 底部按钮区 */
.bottom-btn-wrap {
padding: 20rpx 30rpx 40rpx;
display: flex;
gap: 20rpx;
/* background-color: #fff; */
}
.btn-modify {
@@ -491,7 +493,6 @@
flex: 1;
}
/* 成功提示弹窗 */
.toast-mask {
position: fixed;
top: 0;