物业缴费 - 修复切换房源失败
This commit is contained in:
赵毅
parent
631276afa3
commit
3db2ddb1ff
@ -1,245 +1,305 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||
<div class="searchBox_add">
|
||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div
|
||||
class="searchBox"
|
||||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||
>
|
||||
<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_left">
|
||||
<image mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" />
|
||||
</div>
|
||||
<div class="community_right" @click="changeShow">
|
||||
<div class="community_right_text">
|
||||
<div class="community_right_text1">{{ currentRoom.name }}</div>
|
||||
<div class="community_right_text2">{{ currentCommunityAddr }}</div>
|
||||
</div>
|
||||
<div class="community_right_more">
|
||||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="community">
|
||||
<div class="community_left">
|
||||
<image
|
||||
mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="community_right" @click="changeShow">
|
||||
<div class="community_right_text">
|
||||
<div class="community_right_text1">{{ currentRoom.name }}</div>
|
||||
<div class="community_right_text2">{{ currentCommunityAddr }}</div>
|
||||
</div>
|
||||
<div class="community_right_more">
|
||||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabList">
|
||||
<div class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">账单</div>
|
||||
<div class="line"></div>
|
||||
<div class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">缴费记录</div>
|
||||
</div>
|
||||
<div class="tabList">
|
||||
<div
|
||||
class="tabItem"
|
||||
:class="active == 0 ? 'active' : ''"
|
||||
@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_box">
|
||||
<div class="homeMoney_box_left">
|
||||
<div class="homeMoney_box_left1">物业公积金</div>
|
||||
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
||||
</div>
|
||||
<div class="homeMoney_box_right">
|
||||
<div class="homeMoney_box_right1"><span>￥</span>{{ balanceMoney }}</div>
|
||||
<div class="homeMoney_box_right2" @click="more">
|
||||
查看详情
|
||||
<div style="margin-left: 12rpx;">
|
||||
<u-icon bold color="#894B11" size="30" name="arrow-right" ></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeMoney" v-if="active == 0">
|
||||
<div class="homeMoney_box">
|
||||
<div class="homeMoney_box_left">
|
||||
<div class="homeMoney_box_left1">物业公积金</div>
|
||||
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
||||
</div>
|
||||
<div class="homeMoney_box_right">
|
||||
<div class="homeMoney_box_right1">
|
||||
<span>￥</span>{{ balanceMoney }}
|
||||
</div>
|
||||
<div class="homeMoney_box_right2" @click="more">
|
||||
查看详情
|
||||
<div style="margin-left: 12rpx">
|
||||
<u-icon
|
||||
bold
|
||||
color="#894B11"
|
||||
size="30"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payList" v-if="active == 0">
|
||||
<div class="payItem" v-for="(item, index) in Bill" :key="index">
|
||||
<div class="payItem_tit">
|
||||
<div class="payItem_left">
|
||||
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
|
||||
<div style="margin-left: 24rpx;">{{ item.order_date }}年</div>
|
||||
</div>
|
||||
<div class="payItem_right">
|
||||
<span>￥</span>
|
||||
{{ item.unpaid_amount }}
|
||||
<p>未缴</p>
|
||||
<div class="payList" v-if="active == 0">
|
||||
<div class="payItem" v-for="(item, index) in Bill" :key="index">
|
||||
<div class="payItem_tit">
|
||||
<div class="payItem_left">
|
||||
<checkbox
|
||||
:checked="item.check"
|
||||
@click="checkChange(item, index)"
|
||||
></checkbox>
|
||||
<div style="margin-left: 24rpx">{{ item.order_date }}年</div>
|
||||
</div>
|
||||
<div class="payItem_right">
|
||||
<span>￥</span>
|
||||
{{ item.unpaid_amount }}
|
||||
<p>未缴</p>
|
||||
|
||||
<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 bold color="#894B11" size="30" name="arrow-up" v-if="item.more"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.more">
|
||||
<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 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
|
||||
bold
|
||||
color="#894B11"
|
||||
size="30"
|
||||
name="arrow-up"
|
||||
v-if="item.more"
|
||||
></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.more">
|
||||
<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="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<div class="PayTypeItem_img">
|
||||
<image mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">微信支付</div>
|
||||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择支付类型 -->
|
||||
<div class="payTypeList" v-if="active == 0">
|
||||
<div class="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<div class="PayTypeItem_img">
|
||||
<image
|
||||
mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">微信支付</div>
|
||||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="PayTypeItem_right">
|
||||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line3"></div>
|
||||
<div class="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<div class="PayTypeItem_img">
|
||||
<image mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
||||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="PayTypeItem_right">
|
||||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line3"></div>
|
||||
<div class="PayTypeItem">
|
||||
<div class="PayTypeItem_left">
|
||||
<div class="PayTypeItem_img">
|
||||
<image
|
||||
mode="aspectFill"
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="PayTypeItem_con">
|
||||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
||||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="PayTypeItem_right">
|
||||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="PayTypeItem_right">
|
||||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom" v-if="active == 0">
|
||||
<div class="bottom_left">
|
||||
<span>合计</span>
|
||||
<p>￥</p>
|
||||
{{ currentMoney }}
|
||||
</div>
|
||||
<div class="bottom_right" @click="OrderPay">
|
||||
立即支付
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="active == 0">
|
||||
<div class="bottom_left">
|
||||
<span>合计</span>
|
||||
<p>￥</p>
|
||||
{{ currentMoney }}
|
||||
</div>
|
||||
<div class="bottom_right" @click="OrderPay">立即支付</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="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="row">
|
||||
<div class="row_label">应缴费金额</div>
|
||||
<div class="row_con4">￥{{ item.money }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">应缴费金额</div>
|
||||
<div class="row_con4">￥{{ item.money }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row_label">物业费公积金抵扣金额</div>
|
||||
<div class="row_con4">-￥{{ item.reduction_money }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">物业费公积金抵扣金额</div>
|
||||
<div class="row_con4">-￥{{ item.reduction_money }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row_label">缴费单号</div>
|
||||
<div class="row_con4">{{ item.order_pay_no }}</div>
|
||||
</div>
|
||||
<div class="line4"></div>
|
||||
<div class="Receipt">收据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">缴费单号</div>
|
||||
<div class="row_con4">{{ item.order_pay_no }} </div>
|
||||
</div>
|
||||
<div class="line4"></div>
|
||||
<div class="Receipt">收据</div>
|
||||
<div class="boxshadow" v-if="show" @click="changeShow">
|
||||
<div class="boxshadowCon">
|
||||
<div class="boxshadowCon_Tit">
|
||||
选择房源
|
||||
<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"
|
||||
@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>
|
||||
<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="boxshadow" v-if="show" @click="changeShow">
|
||||
<div class="boxshadowCon">
|
||||
<div class="boxshadowCon_Tit">
|
||||
选择房源
|
||||
<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>
|
||||
|
||||
<div class="btn">物业公积金+微信支付 <span>￥</span>4900.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -266,6 +326,7 @@ export default {
|
||||
show2: false,
|
||||
roomList: [],
|
||||
currentRoom: {},
|
||||
selectedRoomId: '', // 选中的房源ID
|
||||
currentCommunity: "", //当前房源
|
||||
currentCommunityAddr: "", //当前房源地址
|
||||
Bill: "", //账单
|
||||
@ -321,11 +382,24 @@ export default {
|
||||
}).then(res => {
|
||||
this.roomList = res.rows
|
||||
this.currentRoom = this.roomList[0]
|
||||
this.selectedRoomId = this.currentRoom.room_id
|
||||
this.getOrderList()
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 选择房源
|
||||
selectRoom(item){
|
||||
// 更新选中的房源ID
|
||||
this.selectedRoomId = item.room_id;
|
||||
// 在控制台输出选中的数据
|
||||
console.log('选中的房源数据:', item);
|
||||
|
||||
this.currentRoom = item;
|
||||
this.getOrderList()
|
||||
},
|
||||
|
||||
//获取用户公积金
|
||||
async getUserGovenmentMoney() {
|
||||
request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user