物业缴费 - 修复切换房源失败

This commit is contained in:
赵毅 2025-07-31 17:40:29 +08:00
parent 631276afa3
commit 3db2ddb1ff

View File

@ -1,245 +1,305 @@
<template> <template>
<div class="container"> <div class="container">
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"> <div
<div class="searchBox_add"> class="searchBox"
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon> :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
</div> >
</div> <div class="searchBox_add">
<u-icon
bold
color="#000"
size="40"
name="arrow-left"
@click="back"
></u-icon>
</div>
</div>
<div class="community"> <div class="community">
<div class="community_left"> <div class="community_left">
<image mode="aspectFill" <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" /> mode="aspectFill"
</div> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
<div class="community_right" @click="changeShow"> alt=""
<div class="community_right_text"> />
<div class="community_right_text1">{{ currentRoom.name }}</div> </div>
<div class="community_right_text2">{{ currentCommunityAddr }}</div> <div class="community_right" @click="changeShow">
</div> <div class="community_right_text">
<div class="community_right_more"> <div class="community_right_text1">{{ currentRoom.name }}</div>
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon> <div class="community_right_text2">{{ currentCommunityAddr }}</div>
</div> </div>
</div> <div class="community_right_more">
</div> <u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
</div>
</div>
</div>
<div class="tabList"> <div class="tabList">
<div class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">账单</div> <div
<div class="line"></div> class="tabItem"
<div class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">缴费记录</div> :class="active == 0 ? 'active' : ''"
</div> @click="changeTab(0)"
>
账单
</div>
<div class="line"></div>
<div
class="tabItem"
:class="active == 1 ? 'active' : ''"
@click="changeTab(1)"
>
缴费记录
</div>
</div>
<div class="homeMoney" v-if="active == 0"> <div class="homeMoney" v-if="active == 0">
<div class="homeMoney_box"> <div class="homeMoney_box">
<div class="homeMoney_box_left"> <div class="homeMoney_box_left">
<div class="homeMoney_box_left1">物业公积金</div> <div class="homeMoney_box_left1">物业公积金</div>
<div class="homeMoney_box_left2">可抵扣账户金额</div> <div class="homeMoney_box_left2">可抵扣账户金额</div>
</div> </div>
<div class="homeMoney_box_right"> <div class="homeMoney_box_right">
<div class="homeMoney_box_right1"><span></span>{{ balanceMoney }}</div> <div class="homeMoney_box_right1">
<div class="homeMoney_box_right2" @click="more"> <span></span>{{ balanceMoney }}
查看详情 </div>
<div style="margin-left: 12rpx;"> <div class="homeMoney_box_right2" @click="more">
<u-icon bold color="#894B11" size="30" name="arrow-right" ></u-icon> 查看详情
</div> <div style="margin-left: 12rpx">
</div> <u-icon
</div> bold
</div> color="#894B11"
</div> size="30"
name="arrow-right"
></u-icon>
</div>
</div>
</div>
</div>
</div>
<div class="payList" v-if="active == 0"> <div class="payList" v-if="active == 0">
<div class="payItem" v-for="(item, index) in Bill" :key="index"> <div class="payItem" v-for="(item, index) in Bill" :key="index">
<div class="payItem_tit"> <div class="payItem_tit">
<div class="payItem_left"> <div class="payItem_left">
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox> <checkbox
<div style="margin-left: 24rpx;">{{ item.order_date }}</div> :checked="item.check"
</div> @click="checkChange(item, index)"
<div class="payItem_right"> ></checkbox>
<span></span> <div style="margin-left: 24rpx">{{ item.order_date }}</div>
{{ item.unpaid_amount }} </div>
<p>未缴</p> <div class="payItem_right">
<span></span>
{{ item.unpaid_amount }}
<p>未缴</p>
<div style="margin-left: 40rpx;" @click="changeCheck(item, index)"> <div style="margin-left: 40rpx" @click="changeCheck(item, index)">
<u-icon bold color="#894B11" size="30" name="arrow-down" v-if="!item.more"></u-icon> <u-icon
<u-icon bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon> bold
</div> color="#894B11"
</div> size="30"
</div> name="arrow-down"
<div v-if="item.more"> v-if="!item.more"
<div class="payItem_List" v-for="(items, indes) in item.community_order_rows" ></u-icon>
:key="items.order_id"> <u-icon
<checkbox :checked="items.check" @click="itemsCheckChange(items, indes, index)"></checkbox> bold
<div class="Item_time" v-if="items.billing_cycle == 1">{{ items.order_date }}</div> color="#894B11"
<div class="Item_time" v-if="items.billing_cycle == 2">{{ items.order_datetime }}</div> size="30"
<div class="Item_type">{{ items.community_fee_type.type_name }}</div> name="arrow-up"
<div class="Item_money">{{ items.money }}</div> v-if="item.more"
<div class="Item_status" v-if="items.status == 0">未付款</div> ></u-icon>
<div class="Item_status sucess" v-if="items.status == 1">已付款</div> </div>
</div> </div>
</div> </div>
</div> <div v-if="item.more">
</div> <div
class="payItem_List"
v-for="(items, indes) in item.community_order_rows"
:key="items.order_id"
>
<checkbox
:checked="items.check"
@click="itemsCheckChange(items, indes, index)"
></checkbox>
<div class="Item_time" v-if="items.billing_cycle == 1">
{{ items.order_date }}
</div>
<div class="Item_time" v-if="items.billing_cycle == 2">
{{ items.order_datetime }}
</div>
<div class="Item_type">
{{ items.community_fee_type.type_name }}
</div>
<div class="Item_money">{{ items.money }}</div>
<div class="Item_status" v-if="items.status == 0">未付款</div>
<div class="Item_status sucess" v-if="items.status == 1">
已付款
</div>
</div>
</div>
</div>
</div>
<!-- 选择支付类型 --> <!-- 选择支付类型 -->
<div class="payTypeList" v-if="active == 0"> <div class="payTypeList" v-if="active == 0">
<div class="PayTypeItem"> <div class="PayTypeItem">
<div class="PayTypeItem_left"> <div class="PayTypeItem_left">
<div class="PayTypeItem_img"> <div class="PayTypeItem_img">
<image mode="aspectFill" <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" mode="aspectFill"
alt="" /> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
</div> alt=""
<div class="PayTypeItem_con"> />
<div class="PayTypeItem_con_tit">微信支付</div> </div>
<div class="PayTypeItem_con_msg">单笔支付限额10000.00</div> <div class="PayTypeItem_con">
</div> <div class="PayTypeItem_con_tit">微信支付</div>
</div> <div class="PayTypeItem_con_msg">单笔支付限额10000.00</div>
</div>
</div>
<div class="PayTypeItem_right"> <div class="PayTypeItem_right">
<radio :checked="payType == 1" @click="changePayType(1)"></radio> <radio :checked="payType == 1" @click="changePayType(1)"></radio>
</div> </div>
</div> </div>
<div class="line3"></div> <div class="line3"></div>
<div class="PayTypeItem"> <div class="PayTypeItem">
<div class="PayTypeItem_left"> <div class="PayTypeItem_left">
<div class="PayTypeItem_img"> <div class="PayTypeItem_img">
<image mode="aspectFill" <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" mode="aspectFill"
alt="" /> src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
</div> alt=""
<div class="PayTypeItem_con"> />
<div class="PayTypeItem_con_tit">物业公积金支付</div> </div>
<div class="PayTypeItem_con_msg">单笔支付限额10000.00</div> <div class="PayTypeItem_con">
</div> <div class="PayTypeItem_con_tit">物业公积金支付</div>
</div> <div class="PayTypeItem_con_msg">单笔支付限额10000.00</div>
</div>
</div>
<div class="PayTypeItem_right"> <div class="PayTypeItem_right">
<radio :checked="payType == 2" @click="changePayType(2)"></radio> <radio :checked="payType == 2" @click="changePayType(2)"></radio>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom" v-if="active == 0"> <div class="bottom" v-if="active == 0">
<div class="bottom_left"> <div class="bottom_left">
<span>合计</span> <span>合计</span>
<p></p> <p></p>
{{ currentMoney }} {{ currentMoney }}
</div> </div>
<div class="bottom_right" @click="OrderPay"> <div class="bottom_right" @click="OrderPay">立即支付</div>
立即支付 </div>
</div>
</div>
<div class="payHisList" v-if="active == 1">
<div class="payHisItem" v-for="item in payOrderList" :key="item.id">
<div class="row">
<div class="row_label">缴费金额</div>
<div class="row_con1">{{ item.money }}</div>
</div>
<div class="row">
<div class="row_label2"></div>
<div class="row_con2">{{ item.pay_time }}支付</div>
</div>
<div class="line4"></div>
<div class="row">
<div class="row_label">绑定房源</div>
<div class="row_con3">
<div class="row_con3_1">
{{ item.community_order.length }}个账单
</div>
<div class="row_con3_2">明细可从收据查看</div>
</div>
</div>
<div class="payHisList" v-if="active == 1"> <div class="row">
<div class="payHisItem" v-for="item in payOrderList" :key="item.id"> <div class="row_label">应缴费金额</div>
<div class="row"> <div class="row_con4">{{ item.money }}</div>
<div class="row_label">缴费金额</div> </div>
<div class="row_con1">{{ item.money }}</div>
</div>
<div class="row">
<div class="row_label2"></div>
<div class="row_con2">{{ item.pay_time }}支付</div>
</div>
<div class="line4"></div>
<div class="row">
<div class="row_label">绑定房源</div>
<div class="row_con3">
<div class="row_con3_1">{{ item.community_order.length }}个账单</div>
<div class="row_con3_2">明细可从收据查看</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="row_label">应缴费金额</div> <div class="row_label">物业费公积金抵扣金额</div>
<div class="row_con4">{{ item.money }}</div> <div class="row_con4">-{{ item.reduction_money }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="row_label">物业费公积金抵扣金额</div> <div class="row_label">缴费单号</div>
<div class="row_con4">-{{ item.reduction_money }}</div> <div class="row_con4">{{ item.order_pay_no }}</div>
</div> </div>
<div class="line4"></div>
<div class="Receipt">收据</div>
</div>
</div>
<div class="row"> <div class="boxshadow" v-if="show" @click="changeShow">
<div class="row_label">缴费单号</div> <div class="boxshadowCon">
<div class="row_con4">{{ item.order_pay_no }} </div> <div class="boxshadowCon_Tit">
</div> 选择房源
<div class="line4"></div> <div class="cancel">取消</div>
<div class="Receipt">收据</div> </div>
<div class="lines"></div>
<div class="communityList" v-if="roomList.length > 0">
<div
class="communityItem"
v-for="item in roomList"
:key="item.room_id"
@click="selectRoom(item)"
>
<div class="communityItem_text">
{{ item.facility_name }}{{ item.floor }} {{ item.number }}
</div>
<div class="communityItem_radio">
<radio :checked="selectedRoomId === item.room_id"></radio>
</div>
</div>
</div>
<div class="communityList" v-else>
<div class="communityItem">
<div class="communityItem_text">暂无房源</div>
</div>
</div>
</div>
</div>
</div> <div class="boxshadow" v-if="show2" @click="changeShow2">
</div> <div class="boxshadowCon">
<div class="boxshadowCon_Tit">
付款总金额
<div class="cancel">取消</div>
</div>
<div class="boxshadowCon_subTit"><span></span>4900.00</div>
<div class="lines"></div>
<div class="BanlenceList">
<div class="banlenceItem">
<div class="banlenceItem_left">
<image
mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
alt=""
/>
微信支付
</div>
<div class="banlenceItem_right"><span></span>4900.00</div>
</div>
<div class="line3"></div>
<div class="banlenceItem">
<div class="banlenceItem_left">
<image
mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
alt=""
/>
物业公积金支付
</div>
<div class="banlenceItem_right"><span></span>4900.00</div>
</div>
</div>
<div class="boxshadow" v-if="show" @click="changeShow"> <div class="btn">物业公积金+微信支付 <span></span>4900.00</div>
<div class="boxshadowCon"> </div>
<div class="boxshadowCon_Tit"> </div>
选择房源 </div>
<div class="cancel">取消</div>
</div>
<div class="lines"></div>
<div class="communityList" v-if="roomList.length > 0">
<div class="communityItem" v-for="item in roomList" :key="item.room_id">
<div class="communityItem_text">{{ item.facility_name }}{{ item.floor }} {{ item.number }}</div>
<div class="communityItem_radio">
<radio></radio>
</div>
</div>
</div>
<div class="communityList" v-else>
<div class="communityItem">
<div class="communityItem_text">暂无房源</div>
</div>
</div>
</div>
</div>
<div class="boxshadow" v-if="show2" @click="changeShow2">
<div class="boxshadowCon">
<div class="boxshadowCon_Tit">
付款总金额
<div class="cancel">取消</div>
</div>
<div class="boxshadowCon_subTit">
<span></span>4900.00
</div>
<div class="lines"></div>
<div class="BanlenceList">
<div class="banlenceItem">
<div class="banlenceItem_left">
<image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
alt="" />
微信支付
</div>
<div class="banlenceItem_right">
<span></span>4900.00
</div>
</div>
<div class="line3"></div>
<div class="banlenceItem">
<div class="banlenceItem_left">
<image mode="aspectFill"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
alt="" />
物业公积金支付
</div>
<div class="banlenceItem_right">
<span></span>4900.00
</div>
</div>
</div>
<div class="btn">
物业公积金+微信支付 <span></span>4900.00
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -266,6 +326,7 @@ export default {
show2: false, show2: false,
roomList: [], roomList: [],
currentRoom: {}, currentRoom: {},
selectedRoomId: '', // ID
currentCommunity: "", // currentCommunity: "", //
currentCommunityAddr: "", // currentCommunityAddr: "", //
Bill: "", // Bill: "", //
@ -321,11 +382,24 @@ export default {
}).then(res => { }).then(res => {
this.roomList = res.rows this.roomList = res.rows
this.currentRoom = this.roomList[0] this.currentRoom = this.roomList[0]
this.selectedRoomId = this.currentRoom.room_id
this.getOrderList() this.getOrderList()
}) })
}, },
//
selectRoom(item){
// ID
this.selectedRoomId = item.room_id;
//
console.log('选中的房源数据:', item);
this.currentRoom = item;
this.getOrderList()
},
// //
async getUserGovenmentMoney() { async getUserGovenmentMoney() {
request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => { request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {