webapp / GreenwayWeb

<template>
	<view class="page">
		<view class="search-box">
			<view>
				<u-input v-model="value" type="select" @click="show = true" style="background-color: #fff;"
					placeholder="-" :border="false" />
				<u-select v-model="show" :list="list1" @confirm="confirm($event)"></u-select>
			</view>

		</view>
		<view class="search-total">
			<view class="left">
				<view class="price-total"><u-icon name="rmb" style="font-size: 24rpx;" />{{yingPayAll}}</view>
				<view>（当前租金欠费金额)</view>
			</view>
			<div class="right" @click='toDetail'>
				<view>缴费记录 <u-icon name="arrow-right" size="28" /></view>
			</div>

		</view>
		<view style="text-align: center;color:#0EBB5A;padding: 30rpx 0;">{{etTimePeriodDesc(payNum,dayMsg)}}为付款日</view>
		<!-- 记录列表 -->
		<view class="record-list">
			<view class="record-list-box" v-for="(item,index) in recordList" :key="index">
				<u-checkbox-group class="list-group" style="width: 100%;">
					<view class="list">
						<u-checkbox v-model="recordList[index].gouxuan" shape="circle" :label-disabled="false"
							active-color="#0EBB5A" @change="xuanAll(item,$event)" />

						<view class="list-item" @click="changeitemisshowxz(index)">
							<view class="list-info">
								<view class="info-items">
									<view class="info-title">{{formatTime(payNum,item.tenementOrderDate)}}应缴租金：</view>
									<view class="price"><u-icon name="rmb"
											style="font-size: 24rpx;" />{{item.paymentAmount}}</view>
								</view>
							</view>
						</view>
					</view>

				</u-checkbox-group>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="page-footer">
			<view class="footer-buy">
				<u-checkbox-group>
					<u-checkbox shape="circle" @change="quanxuan" v-model="showAll"
						active-color="#0EBB5A">全选</u-checkbox>
				</u-checkbox-group>
				<view class="cart-add">
					合计：<view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{payAll}}</view>
				</view>
				<u-button type="success" class="buttons" @click="joinShow">去支付</u-button>
			</view>
		</view>
		<!-- <u-loading :show="true" size="60" style="position: absolute; top:80%;left: ;" color="red"></u-loading> -->
	</view>

</template>

<script>
		import { toMiniPay } from "@/utils/tool.js"
	export default {
		data() {
			return {
				payNum: 1,
				dayMsg: '',
				show: false,
				payAll: 0.00,
				yingPayAll: 0.00,
				value: '',
				list1: [],
				checked: [],
				recordList: [],
				loadShow: false,
				showAll: false,
				ListIndex: 0,

			};
		},
		watch: {
			recordList: {
				deep: true,
				handler(newVal) {
					const allTrue = this.recordList.every(item => item.gouxuan)
					this.showAll = allTrue
				}
			}
		},
		onShow() {
			const isLogin = uni.getStorageSync('token');
			if (isLogin == '') {
				// 如果未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				
				this.$http.sendRequest('/order/refundToRent', 'POST', {
				orderId:'202502101739156798173156287',type:2
				},3).then(res => {
					
				})
				this.$http.sendRequest('/cerePlatformMerchant/queryByPage', 'POST', {
					pageSize: 10,
					pageNumber: 0,
					phone: uni.getStorageSync('user').phone
				}).then(res => {
					
					if (res.data.code == '20004' || res.data.code == '20003') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						this.relatedMerchants = res.data.data.content[0].id
						this.$http.sendRequest('/cerePropertyOrder/queryByName', 'POST', {
							relatedMerchants: res.data.data.content[0].id,
						}, 1).then(res => {
							if (res.data.data.length > 0) {
								const listNew = []
								res.data.data.map((item, index) => {

									const newObj = {
										label: item.shopName,
										value: index,
										list: []
									}
									newObj.list = item.cerePropertyOrderList

									listNew.push(newObj)

								})

								this.list1 = listNew

								this.value = res.data.data[0].shopName
								this.ListIndex = 0
								const redList = []
								this.payAll = 0
								this.yingPayAll = 0
								res.data.data[0].cerePropertyOrderList.map(item => {
									if (item.payState == 0) {
										this.yingPayAll += item.paymentAmount
										this.yingPayAll  = this.roundUpToTwoDecimals(this.yingPayAll)
										this.payNum = item.payType
										this.dayMsg = item.payDay
										const zujin = {
											...item,
											showItem: false,
											gouxuan: false,

										}
										redList.push(zujin)
									}
								})
								this.recordList = redList
							}
						})
					}
				})
			}

		},
		methods: {
			changeitemisshowxz(index) {
				this.recordList[index].gouxuan = !this.recordList[index].gouxuan
				this.xuanAll(this.recordList[index],{value:this.recordList[index].gouxuan})
				this.$forceUpdate()
			},
			 roundUpToTwoDecimals(num) {
			    return Math.ceil(num * 100) / 100;
			},
			quanxuan(e) {
				this.payAll = 0
				const allTrue = this.recordList.every(item => item.gouxuan)
				if (allTrue) {
					this.showAll = !this.showAll
					this.recordList.forEach(item => {
						item.gouxuan = !allTrue;
					});
				} else {
					this.showAll = true
					this.recordList.forEach(item => {
						item.gouxuan = !allTrue;
						this.payAll += item.paymentAmount
					});
				}


			},
			xuanAll(item, e) {
				if (e.value) {
					this.payAll += item.paymentAmount
					this.payAll  = this.roundUpToTwoDecimals(this.payAll)
				} else {
					this.payAll -= item.paymentAmount
					this.payAll  = this.roundUpToTwoDecimals(this.payAll)
				}
			},
			recordXq(item) {
				const encodedItem = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: `/pages/accepting/accepting?item=${encodedItem}`,
				})
			},
			toDetail() {
				
				const msg = JSON.stringify(this.list1[this.ListIndex])
				uni.navigateTo({
					url: `/pagesA/rentPay/rentPayDetails?msg=${encodeURIComponent(msg)}&merchants=${encodeURIComponent(this.relatedMerchants)}`
				})
			},
			async joinShow() {
				if (this.payAll == 0) {
					uni.showToast({
						icon: 'error',
						title: '请选择支付订单'
					})
				} else {

					let payArr = []
					this.recordList.map(item => {
						if (item.gouxuan) {
							payArr.push(item)
						}
					})
					
					let arr = []
					payArr.map(item => {
						let obj = {
							orderId: item.tenementOrder,
							money: item.paymentAmount,
						}
						arr.push(obj)
					})
					
					// return
					const payId =  await this.$http.sendRequest('/order/rentAggregatePayment', 'POST', arr, 3).then(res => {
						if (res.data.data) {
							let payUrl =  JSON.parse(res.data.data).payUrl
							let c1 = payUrl.split('=')[1]
							return c1
							// uni.redirectTo({
							// 	url: `/pagesA/rentPay/webView?urls=${JSON.parse(res.data.data).data.codeUrl}`
							// })
						}
					})
					if(payId) {
						const payIdbackPath= '/pages/home/home'
						await toMiniPay(payId,payIdbackPath)
					}
					
					
					
					// const msg = JSON.stringify(payArr)
					// uni.navigateTo({
					// 	url: `/pagesA/rentPay/goPay?msg=${msg}`
					// })
				}
			},
			confirm(e) {

				let arr = []
				this.value = e[0].label
				const redList = []
				let index = e[0].value
				this.ListIndex = e[0].value
				this.yingPayAll = 0
				this.payAll = 0
				this.list1[index].list.map(item => {
					if (item.payState == 0) {
						this.yingPayAll += item.paymentAmount
						this.yingPayAll  = this.roundUpToTwoDecimals(this.yingPayAll)
						this.payNum = item.payType
						this.dayMsg = item.payDay
						const zujin = {
							...item,
							showItem: false,
							gouxuan: false,
						}
						redList.push(zujin)
					}
					
				})
				this.recordList = redList

			},
			etTimePeriodDesc(num, day) {
				switch (num) {
					case 1:
						return '每日';
					case 2:
						return `每月${day}`;
					case 3:
						return `每季度${day}`;
					case 4:
						return `每年${day}`;
					default:
						return '';
				}
			},
			formatTime(type, time) {
				// 将传入的时间字符串转换为 Date 对象
				const date = new Date(time);

				const day = date.getDate();
				const month = date.getMonth() + 1;
				const quarter = Math.floor((month - 1) / 3) + 1;
				const year = date.getFullYear();
				switch (type) {
					case 1:
						return `${day}号`;
					case 2:
						return `${month}月${day}号`;
					case 3:
						return `${month}月${day}号`;
					case 4:
						return `${year}年`;
					default:
						return time;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'rentPay.scss';
</style>