489 lines
13 KiB
Vue
489 lines
13 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" @click="back"></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>
|
||
{{ 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 class="payItem_List" v-for="(items, indes) in item.community_order_rows" v-if="item.more"
|
||
: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 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 == 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">取消</div>
|
||
</div>
|
||
<div class="lines"></div>
|
||
<div class="communityList">
|
||
<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>
|
||
</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>
|
||
|
||
<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: {},
|
||
currentCommunity: "", //当前房源
|
||
currentCommunityAddr: "", //当前房源地址
|
||
Bill: "", //账单
|
||
balanceMoney: "",//公积金
|
||
|
||
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() {
|
||
this.show2 = !this.show
|
||
},
|
||
//获取房源
|
||
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.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{
|
||
name_mini = '物业公积金'
|
||
}
|
||
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> |