559 lines
18 KiB
Vue
559 lines
18 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||
<view class="searchBox_add">
|
||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="community">
|
||
<view class="community_left">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"
|
||
alt="" />
|
||
</view>
|
||
<view class="community_right" @click="changeShow">
|
||
<view class="community_right_text">
|
||
<view class="community_right_text1">{{ currentRoom.name }}</view>
|
||
<view class="community_right_text2">{{ currentCommunityAddr }}</view>
|
||
</view>
|
||
<view class="community_right_more">
|
||
<u-icon bold color="#999999" size="30" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tabList">
|
||
<view class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">
|
||
账单
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">
|
||
缴费记录
|
||
</view>
|
||
</view>
|
||
|
||
<view class="homeMoney" v-if="active == 0">
|
||
<view class="homeMoney_box">
|
||
<view class="homeMoney_box_left">
|
||
<view class="homeMoney_box_left1">物业公积金</view>
|
||
<view class="homeMoney_box_left2">可抵扣账户金额</view>
|
||
</view>
|
||
<view class="homeMoney_box_right">
|
||
<view class="homeMoney_box_right1">
|
||
<span>￥</span>{{ balanceMoney }}
|
||
</view>
|
||
<view class="homeMoney_box_right2" @click="more(currentRoom)">
|
||
查看详情
|
||
<view style="margin-left: 12rpx">
|
||
<u-icon bold color="#894B11" size="30" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="payList" v-if="active == 0">
|
||
<view class="payItem" v-for="(item, index) in Bill" :key="index">
|
||
<view class="payItem_tit">
|
||
<view class="payItem_left">
|
||
<checkbox :checked="item.check" @click="checkChange(item, index)"></checkbox>
|
||
<view style="margin-left: 24rpx">{{ item.order_date }}年</view>
|
||
</view>
|
||
<view class="payItem_right">
|
||
<span>￥</span>
|
||
<view class="payItem_money">{{ item.unpaid_amount }}</view>
|
||
<p>未缴</p>
|
||
|
||
<view 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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.more">
|
||
<view 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>
|
||
<view class="Item_time" v-if="items.billing_cycle == 1">
|
||
{{ items.order_date }}年
|
||
</view>
|
||
<view class="Item_time" v-if="items.billing_cycle == 2">
|
||
{{ items.order_datetime }}月
|
||
</view>
|
||
<view class="Item_type">
|
||
{{ items.community_fee_type ? items.community_fee_type.type_name : '' }}
|
||
</view>
|
||
<view class="Item_money">￥{{ items.money }}</view>
|
||
<view class="Item_status" v-if="items.status == 0">未付款</view>
|
||
<view class="Item_status sucess" v-if="items.status == 1">
|
||
已付款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择支付类型 -->
|
||
<view class="payTypeList" v-if="active == 0">
|
||
<view class="PayTypeItem">
|
||
<view class="PayTypeItem_left">
|
||
<view class="PayTypeItem_img">
|
||
<image mode="aspectFill"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||
</view>
|
||
<view class="PayTypeItem_con">
|
||
<view class="PayTypeItem_con_tit">微信支付</view>
|
||
<view class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="PayTypeItem_right">
|
||
<radio :checked="payType == 1" @click="changePayType(1)"></radio>
|
||
</view>
|
||
</view>
|
||
<view class="line3"></view>
|
||
<view class="PayTypeItem">
|
||
<view class="PayTypeItem_left">
|
||
<view class="PayTypeItem_img">
|
||
<image mode="aspectFill"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||
</view>
|
||
<view class="PayTypeItem_con">
|
||
<view class="PayTypeItem_con_tit">物业公积金支付</view>
|
||
<view class="PayTypeItem_con_msg">
|
||
可用公积金：<span>￥</span>{{ balanceMoney }}
|
||
<view class="PayTypeItem_con_msg2" @click="changeShow2">
|
||
可组合支付
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="PayTypeItem_right">
|
||
<radio :checked="payType == 2" @click="changePayType(2)"></radio>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom" v-if="active == 0">
|
||
<view class="bottom_left">
|
||
<span>合计</span>
|
||
<p>￥</p>
|
||
{{ currentMoney }}
|
||
</view>
|
||
<view class="bottom_right" @click="createPay">立即支付</view>
|
||
</view>
|
||
|
||
<view class="payHisList" v-if="active == 1">
|
||
<view class="payHisItem" v-for="item in payOrderList" :key="item.id">
|
||
<view class="row">
|
||
<view class="row_label">缴费金额</view>
|
||
<view class="row_con1">￥{{ item.money }}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label2"></view>
|
||
<view class="row_con2">{{ item.pay_time }}支付</view>
|
||
</view>
|
||
<view class="line4"></view>
|
||
<view class="row">
|
||
<view class="row_label">绑定房源</view>
|
||
<view class="row_con3">
|
||
<view class="row_con3_1">
|
||
{{ item.community_order.length }}个账单
|
||
</view>
|
||
<view class="row_con3_2">明细可从收据查看</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="row_label">应缴费金额</view>
|
||
<view class="row_con4">￥{{ item.money }}</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="row_label">物业费公积金抵扣金额</view>
|
||
<view class="row_con4">-￥{{ item.reduction_money }}</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="row_label">缴费单号</view>
|
||
<view class="row_con4">{{ item.order_pay_no }}</view>
|
||
</view>
|
||
<view class="line4"></view>
|
||
<view class="Receipt">收据</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="boxshadow" v-if="show" @click="changeShow">
|
||
<view class="boxshadowCon">
|
||
<view class="boxshadowCon_Tit">
|
||
选择房源
|
||
<view class="cancel" @click.stop="show = false">取消</view>
|
||
</view>
|
||
<view class="lines"></view>
|
||
<view class="communityList" v-if="roomList.length > 0">
|
||
<view class="communityItem" v-for="item in roomList" :key="item.room_id" @click="selectRoom(item)">
|
||
<view class="communityItem_text">
|
||
{{ item.facility_name }}{{ item.floor }} {{ item.number }}
|
||
</view>
|
||
<view class="communityItem_radio">
|
||
<radio :checked="selectedRoomId === item.room_id"></radio>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="communityList" v-else>
|
||
<view class="communityItem">
|
||
<view class="communityItem_text">暂无房源</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="boxshadow" v-if="show2" @click="changeShow2">
|
||
<view class="boxshadowCon">
|
||
<view class="boxshadowCon_Tit">
|
||
付款总金额
|
||
<view class="cancel" @click.stop="show2 = false">取消</view>
|
||
</view>
|
||
<view class="boxshadowCon_subTit">
|
||
<p>￥</p>
|
||
{{ currentMoney }}
|
||
</view>
|
||
<view class="lines"></view>
|
||
|
||
<view class="BanlenceList">
|
||
<view class="banlenceItem">
|
||
<view class="banlenceItem_left">
|
||
<image mode="aspectFill"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||
微信支付
|
||
</view>
|
||
<view class="banlenceItem_right">
|
||
<span>￥</span>{{ (currentMoney - balanceMoney).toFixed(2) }}
|
||
</view>
|
||
</view>
|
||
<view class="line3"></view>
|
||
<view class="banlenceItem">
|
||
<view class="banlenceItem_left">
|
||
<image mode="aspectFill"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||
物业公积金支付
|
||
</view>
|
||
<view class="banlenceItem_right">
|
||
<span>￥</span>{{ balanceMoney }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn" @click="createPay">
|
||
物业公积金+微信支付 <span>￥</span>{{ currentMoney }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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 ? money.toFixed(2) : 0.00;
|
||
},
|
||
//具体选择
|
||
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 ? money.toFixed(2) : 0.00;
|
||
},
|
||
//切换支付方式
|
||
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.OrderPay();
|
||
});
|
||
},
|
||
//根据支付订单查询交易信息
|
||
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: this.payInfoId }).then(
|
||
async (res) => {
|
||
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||
// 调用微信支付
|
||
uni.requestPayment({
|
||
timeStamp: res.timeStamp,
|
||
nonceStr: res.nonceStr,
|
||
package: res.package,
|
||
signType: res.signType,
|
||
paySign: res.paySign,
|
||
success: (payRes) => {
|
||
const params = {
|
||
order_pay_id: this.payInfoId,
|
||
}
|
||
request(apiArr.tradeQuery, "POST", params).then(res => {
|
||
})
|
||
},
|
||
fail: (payErr) => {
|
||
uni.showToast({
|
||
title: payErr.errMsg == 'requestPayment:fail cancel' ? '已取消支付' : '支付失败',
|
||
icon: 'none'
|
||
})
|
||
const params = {
|
||
order_pay_id: this.payInfoId,
|
||
}
|
||
request(apiArr.delPay, "POST", params).then(res => {
|
||
})
|
||
},
|
||
complete: () => {
|
||
// 支付完成后的回调，无论成功失败都会执行
|
||
}
|
||
})
|
||
} else {
|
||
console.error("获取支付参数失败，缺少必要参数")
|
||
uni.showToast({
|
||
title: '获取支付信息失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
);
|
||
},
|
||
|
||
//支付记录
|
||
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 = res.rows;
|
||
});
|
||
},
|
||
|
||
//物业公积金详情
|
||
more(item) {
|
||
NavgateTo(`../providentFund/index?item=${JSON.stringify(item)}`);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |