586 lines
17 KiB
Vue
586 lines
17 KiB
Vue
<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="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="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>
|
||
<view class="payItem_money">{{ item.unpaid_amount }}</view>
|
||
<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 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">
|
||
可用公积金：<span>￥</span>{{ balanceMoney }}
|
||
<div class="PayTypeItem_con_msg2" @click="changeShow2">
|
||
可组合支付
|
||
</div>
|
||
</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="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.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="boxshadow" v-if="show" @click="changeShow">
|
||
<div class="boxshadowCon">
|
||
<div class="boxshadowCon_Tit">
|
||
选择房源
|
||
<div class="cancel" @click.stop="show = false">取消</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 class="boxshadow" v-if="show2" @click="changeShow2">
|
||
<div class="boxshadowCon">
|
||
<div class="boxshadowCon_Tit">
|
||
付款总金额
|
||
<div class="cancel" @click.stop="show2 = false">取消</div>
|
||
</div>
|
||
<div class="boxshadowCon_subTit">
|
||
<p>￥</p>
|
||
{{ currentMoney }}
|
||
</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>{{ (currentMoney - balanceMoney).toFixed(2) }}
|
||
</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>{{ balanceMoney }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn" @click="OrderPay">
|
||
物业公积金+微信支付 <span>￥</span>{{ currentMoney }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
formatDate,
|
||
NavgateTo,
|
||
} from "../../../utils";
|
||
import { apiArr } from "../../../api/community";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
active: 0,
|
||
show: false,
|
||
show2: false,
|
||
roomList: [],
|
||
currentRoom: {},
|
||
selectedRoomId: "", // 选中的房源ID
|
||
currentCommunity: "", //当前房源
|
||
currentCommunityAddr: "", //当前房源地址
|
||
Bill: "", //账单
|
||
balanceMoney: 0, //公积金
|
||
|
||
currentMoney: 0, //所选金额
|
||
|
||
payType: "1",
|
||
payInfoId: "", //支付信息id
|
||
page_size: 10,
|
||
page_num: 1,
|
||
payOrderList: [],
|
||
flag: false,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
this.currentCommunity = uni.getStorageSync("changeCommData");
|
||
this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr");
|
||
this.getRoomSelect();
|
||
this.getUserGovenmentMoney();
|
||
},
|
||
|
||
methods: {
|
||
changeTab(index) {
|
||
this.active = index;
|
||
if (index == 1) {
|
||
this.page_num = 1;
|
||
this.getPayList();
|
||
}
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
changeShow() {
|
||
this.show = !this.show;
|
||
},
|
||
changeShow2() {
|
||
if (this.currentMoney == 0) {
|
||
uni.showToast({
|
||
title: "请选择账单",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
this.show2 = !this.show2;
|
||
},
|
||
//获取房源
|
||
getRoomSelect() {
|
||
request(apiArr.getCommunityRoomList, "POST", {
|
||
community_id: this.currentCommunity.id,
|
||
page_num: 1,
|
||
page_size: 50,
|
||
}).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) => {
|
||
console.log(res, "公积金");
|
||
this.balanceMoney = res.balance_after;
|
||
});
|
||
},
|
||
|
||
//获取账单
|
||
async getOrderList() {
|
||
await request(apiArr.getOrderList, "POST", {
|
||
room_id: this.currentRoom.room_id,
|
||
page_num: 1,
|
||
page_size: 50,
|
||
}).then((res) => {
|
||
console.log(res, "账单");
|
||
res.rows.forEach((item) => {
|
||
item.check = false;
|
||
item.more = false;
|
||
item.community_order_rows.forEach((ite) => {
|
||
ite.check = false;
|
||
});
|
||
});
|
||
this.Bill = res.rows;
|
||
});
|
||
},
|
||
//账单详情切换展示显示
|
||
changeCheck(e, index) {
|
||
this.Bill[index].more = !this.Bill[index].more;
|
||
},
|
||
//整体选择
|
||
checkChange(e, index) {
|
||
this.Bill[index].check = !this.Bill[index].check;
|
||
this.Bill[index].community_order_rows.forEach((item) => {
|
||
if (this.Bill[index].check) {
|
||
item.check = true;
|
||
} else {
|
||
item.check = false;
|
||
}
|
||
});
|
||
|
||
// 重新计算选中金额
|
||
let money = 0;
|
||
this.Bill.forEach((item) => {
|
||
item.community_order_rows.forEach((ite) => {
|
||
if (ite.check) {
|
||
money += ite.money;
|
||
}
|
||
});
|
||
});
|
||
this.currentMoney = money;
|
||
},
|
||
//具体选择
|
||
itemsCheckChange(e, indes, index) {
|
||
this.Bill[index].community_order_rows[indes].check =
|
||
!this.Bill[index].community_order_rows[indes].check;
|
||
//判断是否全部选中
|
||
let isAll = this.Bill[index].community_order_rows.every((item) => {
|
||
return item.check;
|
||
});
|
||
if (isAll) {
|
||
this.Bill[index].check = true;
|
||
} else {
|
||
this.Bill[index].check = false;
|
||
}
|
||
//帮我计算所有Bill的的community_order_rows 所选中的金额 现在取消选择金额没有减
|
||
let money = 0;
|
||
this.Bill.forEach((item) => {
|
||
item.community_order_rows.forEach((ite) => {
|
||
if (ite.check) {
|
||
money += ite.money;
|
||
}
|
||
});
|
||
});
|
||
this.currentMoney = money;
|
||
},
|
||
//切换支付方式
|
||
changePayType(e) {
|
||
this.payType = e;
|
||
},
|
||
//创建支付订单
|
||
async createPay() {
|
||
let order_ids = [];
|
||
this.Bill.forEach((item) => {
|
||
item.community_order_rows.forEach((items) => {
|
||
if (items.check) {
|
||
order_ids.push(items.order_id);
|
||
}
|
||
});
|
||
});
|
||
let name_mini = "";
|
||
if (this.payType == 1) {
|
||
name_mini = "微信";
|
||
} else if (this.payType == 2) {
|
||
name_mini = "物业公积金";
|
||
} else {
|
||
name_mimi = "微信 + 物业公积金";
|
||
}
|
||
if (!this.currentMoney) {
|
||
return uni.showToast({
|
||
title: "请选择账单",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
await request(apiArr.createPayOrder, "POST", {
|
||
order_ids: order_ids,
|
||
community_id: this.currentCommunity.id,
|
||
room_id: this.currentRoom.room_id,
|
||
pay_user_id: uni.getStorageSync("userId"),
|
||
user_name: uni.getStorageSync("nickName"),
|
||
pay_user_name: uni.getStorageSync("nickName"),
|
||
//格式化年月日 时分秒
|
||
pay_time: formatDate(new Date()),
|
||
money: this.currentMoney,
|
||
name_mini,
|
||
}).then((res) => {
|
||
console.log(res);
|
||
this.payInfoId = res.id;
|
||
this.getPayInfo();
|
||
});
|
||
},
|
||
//根据支付订单查询交易信息
|
||
async getPayInfo() {
|
||
await request(apiArr.getPayOrderInfo, "POST", { order_pay_id: 6 }).then(
|
||
(res) => {
|
||
this.OrderPay();
|
||
}
|
||
);
|
||
},
|
||
//预下单
|
||
async OrderPay() {
|
||
// this.payInfoId
|
||
await request(apiArr.OrderPay, "POST", { order_pay_id: 6 }).then(
|
||
(res) => {
|
||
console.log(res);
|
||
}
|
||
);
|
||
},
|
||
|
||
//支付记录
|
||
getPayList() {
|
||
request(apiArr.getPayOrderList, "POST", {
|
||
room_id: this.currentRoom.room_id,
|
||
page_num: this.page_num,
|
||
page_size: this.page_size,
|
||
}).then((res) => {
|
||
console.log(res);
|
||
let flag = false;
|
||
if (res.rows && res.rows.length == this.page_size) {
|
||
flag = true;
|
||
} else {
|
||
flag = false;
|
||
}
|
||
this.flag = flag;
|
||
this.payOrderList = this.payOrderList.concat(res.rows);
|
||
});
|
||
},
|
||
|
||
//物业公积金详情
|
||
more() {
|
||
NavgateTo("../providentFund/index");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |