物业缴费添加组合缴费功能

packages/community/propertyPayment/index.css

@@ -212,6 +212,10 @@ image {
   font-size: 24rpx;
 }
 
+.payItem_money{
+  width: 150rpx;
+}
+
 .bottom {
   width: 750rpx;
   background: #FFFFFF;
@@ -409,6 +413,17 @@ image {
   font-size: 28rpx;
   color: #000000;
   margin-top: 10rpx;
+  display: flex;
+}
+
+.PayTypeItem_con_msg2{
+  font-size: 26rpx;
+  margin-left: 20rpx;
+  border: 1rpx solid #f23f17;
+  padding: 0 10rpx;
+  background-color: #fde0dc;
+  color: #f23f17;
+  border-radius: 20rpx;
 }
 
 .line3 {
@@ -421,8 +436,9 @@ image {
   font-weight: bold;
   font-size: 50rpx;
   color: #FF370B;
-  text-align: center;
+  /* text-align: center; */
   padding-bottom: 30rpx;
+  margin: 0 auto;
 }
 
 .boxshadowCon_subTit span {

packages/community/propertyPayment/index.vue

@@ -89,7 +89,7 @@
           </div>
           <div class="payItem_right">
             <span>￥</span>
-            {{ item.unpaid_amount }}
+            <view class="payItem_money">{{ item.unpaid_amount }}</view>
             <p>未缴</p>
 
             <div style="margin-left: 40rpx" @click="changeCheck(item, index)">
@@ -172,7 +172,12 @@
           </div>
           <div class="PayTypeItem_con">
             <div class="PayTypeItem_con_tit">物业公积金支付</div>
-            <div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
+            <div class="PayTypeItem_con_msg">
+              可用公积金：<span>￥</span>{{ balanceMoney }}
+              <div class="PayTypeItem_con_msg2" @click="changeShow2">
+                可组合支付
+              </div>
+            </div>
           </div>
         </div>
 
@@ -235,7 +240,7 @@
       <div class="boxshadowCon">
         <div class="boxshadowCon_Tit">
           选择房源
-          <div class="cancel">取消</div>
+          <div class="cancel" @click.stop="show = false">取消</div>
         </div>
         <div class="lines"></div>
         <div class="communityList" v-if="roomList.length > 0">
@@ -265,9 +270,12 @@
       <div class="boxshadowCon">
         <div class="boxshadowCon_Tit">
           付款总金额
-          <div class="cancel">取消</div>
+          <div class="cancel" @click.stop="show2 = false">取消</div>
+        </div>
+        <div class="boxshadowCon_subTit">
+          <p>￥</p>
+          {{ currentMoney }}
         </div>
-        <div class="boxshadowCon_subTit"><span>￥</span>4900.00</div>
         <div class="lines"></div>
 
         <div class="BanlenceList">
@@ -280,7 +288,9 @@
               />
               微信支付
             </div>
-            <div class="banlenceItem_right"><span>￥</span>4900.00</div>
+            <div class="banlenceItem_right">
+              <span>￥</span>{{ (currentMoney - balanceMoney).toFixed(2) }}
+            </div>
           </div>
           <div class="line3"></div>
           <div class="banlenceItem">
@@ -292,11 +302,15 @@
               />
               物业公积金支付
             </div>
-            <div class="banlenceItem_right"><span>￥</span>4900.00</div>
+            <div class="banlenceItem_right">
+              <span>￥</span>{{ balanceMoney }}
+            </div>
           </div>
         </div>
 
-        <div class="btn">物业公积金+微信支付 <span>￥</span>4900.00</div>
+        <div class="btn" @click="OrderPay">
+          物业公积金+微信支付 <span>￥</span>{{ currentMoney }}
+        </div>
       </div>
     </div>
   </div>
@@ -304,265 +318,267 @@
 
 <script>
 import {
-	request,
+  request,
-	picUrl,
+  picUrl,
-	uniqueByField,
+  uniqueByField,
-	menuButtonInfo,
+  menuButtonInfo,
-	formatDate,
+  formatDate,
-	NavgateTo
+  NavgateTo,
-} from '../../../utils';
+} from "../../../utils";
-import {
+import { apiArr } from "../../../api/community";
-	apiArr
-} from '../../../api/community';
-
 
 export default {
-	data() {
+  data() {
-		return {
+    return {
-			top: "",
+      top: "",
-			localHeight: "",
+      localHeight: "",
-			active: 0,
+      active: 0,
-			show: false,
+      show: false,
-			show2: false,
+      show2: false,
-			roomList: [],
+      roomList: [],
-			currentRoom: {},
+      currentRoom: {},
-			selectedRoomId: '', // 选中的房源ID
+      selectedRoomId: "", // 选中的房源ID
-			currentCommunity: "", //当前房源
+      currentCommunity: "", //当前房源
-			currentCommunityAddr: "", //当前房源地址
+      currentCommunityAddr: "", //当前房源地址
-			Bill: "", //账单
+      Bill: "", //账单
-			balanceMoney: "",//公积金
+      balanceMoney: 0, //公积金
 
-			currentMoney: 0, //所选金额
+      currentMoney: 0, //所选金额
 
-			payType: '1',
+      payType: "1",
-			payInfoId: "",//支付信息id
+      payInfoId: "", //支付信息id
-			page_size: 10,
+      page_size: 10,
-			page_num: 1,
+      page_num: 1,
-			payOrderList: [],
+      payOrderList: [],
-			flag: false,
+      flag: false,
-		}
+    };
-	},
+  },
-	onLoad(options) {
+  onLoad(options) {
-		const meun = menuButtonInfo();
+    const meun = menuButtonInfo();
-		this.top = meun.top;
+    this.top = meun.top;
-		// this.top = meun.height + meun.top;
+    // this.top = meun.height + meun.top;
-		this.localHeight = meun.height;
+    this.localHeight = meun.height;
-		this.currentCommunity = uni.getStorageSync('changeCommData')
+    this.currentCommunity = uni.getStorageSync("changeCommData");
-		this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr")
+    this.currentCommunityAddr = uni.getStorageSync("currentCommunityAddr");
-		this.getRoomSelect()
+    this.getRoomSelect();
-		this.getUserGovenmentMoney()
+    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();
+      });
+    },
 
-	methods: {
+    // 选择房源
-		changeTab(index) {
+    selectRoom(item) {
-			this.active = index;
+      // 更新选中的房源ID
-			if (index == 1) {
+      this.selectedRoomId = item.room_id;
-				this.page_num = 1
+      // 在控制台输出选中的数据
-				this.getPayList()
+      console.log("选中的房源数据:", item);
-			}
-		},
-		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.selectedRoomId = this.currentRoom.room_id
-				this.getOrderList()
 
-			})
+      this.currentRoom = item;
-		},
+      this.getOrderList();
+    },
 
-		
+    //获取用户公积金
-		// 选择房源
+    async getUserGovenmentMoney() {
-		selectRoom(item){
+      request(apiArr.getUserGovenmentMoney, "POST", {}).then((res) => {
-			// 更新选中的房源ID
+        console.log(res, "公积金");
-			this.selectedRoomId = item.room_id;
+        this.balanceMoney = res.balance_after;
-			// 在控制台输出选中的数据
+      });
-			console.log('选中的房源数据:', item);
+    },
 
-			this.currentRoom = item;
+    //获取账单
-			this.getOrderList()
+    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;
+        }
+      });
 
-		//获取用户公积金
+      // 重新计算选中金额
-		async getUserGovenmentMoney() {
+      let money = 0;
-			request(apiArr.getUserGovenmentMoney, "POST", {}).then(res => {
+      this.Bill.forEach((item) => {
-				console.log(res, '公积金');
+        item.community_order_rows.forEach((ite) => {
-				this.balanceMoney = res.balance_after
+          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);
+        }
+      );
+    },
 
-		//获取账单
+    //支付记录
-		async getOrderList() {
+    getPayList() {
-			await request(apiArr.getOrderList, 'POST', {
+      request(apiArr.getPayOrderList, "POST", {
-				room_id: this.currentRoom.room_id,
+        room_id: this.currentRoom.room_id,
-				page_num: 1,
+        page_num: this.page_num,
-				page_size: 50
+        page_size: this.page_size,
-			}).then(res => {
+      }).then((res) => {
-				console.log(res, '账单');
+        console.log(res);
-				res.rows.forEach(item => {
+        let flag = false;
-					item.check = false
+        if (res.rows && res.rows.length == this.page_size) {
-					item.more = false
+          flag = true;
-					item.community_order_rows.forEach(ite => {
+        } else {
-						ite.check = false
+          flag = false;
-					})
+        }
-				});
+        this.flag = flag;
-				this.Bill = res.rows
+        this.payOrderList = this.payOrderList.concat(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
+    more() {
-			this.Bill.forEach(item => {
+      NavgateTo("../providentFund/index");
-				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>