waterpay_h5/pages/home/home.vue

<template>
	<view class="container">
		<!-- 头部选择房间区域 -->
		<view class="select-item" @click="navigateToSelect">
			<view class="picker-item-logol">
				<image class="picker-item-logo-left" src="../../static/room.png"></image>
			</view>
			<view class="picker-item-label">已选房间</view>
			<view class="picker-item-content">{{roomSelect}}</view>
			<view class="picker-item-logor">
				<image class="picker-item-logo-right" src="../../static/right.png"></image>
			</view>
		</view>
		<!-- 账单显示区域 -->
		<view class="bill">
			<!-- 没有账单时展示的内容 -->
			<view class="null" v-if="!list.length">
				<img src="../../static/null.png">
				<span>暂无账单,请选择宿舍查询</span>
			</view>

			<!-- 有账单时展示的内容 -->
			<view class="has" v-else>
				<!-- 筛选框区域 -->
				<view class="choose">
					<view class="time">
						<uni-data-select placeholder="请选择时间" v-model="time_value" :localdata="time_range"
							@change="changeTime">
						</uni-data-select>
					</view>
					<view class="type">
						<uni-data-select placeholder="请选择支付状态" v-model="type_value" :localdata="type_range"
							@change="changeType">
						</uni-data-select>
					</view>
				</view>

				<!-- 账单列表区域 -->
				<view class="has_bill">
					<view class="item" v-for="item in list" :key="item.id">
						<view class="item_header">
							{{item.title}}
						</view>
						<view class="item_box">
							<view class="item_box_1">
								上月表数：{{item.last}}
							</view>
							<view class="item_box_2">
								本月表数：{{item.current}}
							</view>
						</view>
						<view class="item_box">
							<view class="item_box_1">
								用量：{{item.use}}吨
							</view>
							<view class="item_box_2">
								补助吨数：{{item.sub}}吨
							</view>
						</view>
						<view class="item_box" v-if="item.payPeople">
							<view class="item_box_1">
								支付人：{{item.payPeople}}
							</view>
						</view>
						<view class="item_notes">
							备注：{{item.notes}}
						</view>

						<view class="item_box">
							<view class="item_box_1 font">
								{{item.time}}
							</view>
							<view class="item_box_2">
								实付款：{{item.money}}
							</view>
						</view>

						<view class="item_button">

							<button class="feedback right" type="primary" plain size="mini"
								@click="handleFeedback(item)">
								订单反馈
							</button>

							<button class="feedback" type="warn" size="mini" disabled v-if="item.payPeople">
								已支付
							</button>

							<button class="feedback" type="primary" size="mini" @click="navigateToPay(item)" v-else>
								去支付
							</button>
						</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 悬浮按钮区域 -->
		<view class="suspend_button" @click="goBill" @touchstart="down" @touchmove.prevent="move" @touchend="end">
			订单查询
		</view>

		<!-- 订单反馈弹窗区域 -->
		<uni-popup ref="popup_feedback" background-color="#fff" :is-mask-click="false">
			<view class="popup_view">
				<view class="title">{{popTitle}}</view>

				<view class="forms">
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">

						<uni-forms-item label="姓名:" required name="feedbackPersonName">
							<uni-easyinput v-model="valiFormData.feedbackPersonName" placeholder="请输入姓名" />
						</uni-forms-item>

						<uni-forms-item label="联系电话:" required name="feedbackPersonPhone">
							<uni-easyinput maxlength="11" v-model="valiFormData.feedbackPersonPhone" type="number"
								placeholder="请输入联系人手机号码" />
						</uni-forms-item>

						<uni-forms-item label="宿舍号:" required name="feedbackRoom">
							<uni-easyinput v-model="valiFormData.feedbackRoom" placeholder="请输入宿舍号" />
						</uni-forms-item>

						<uni-forms-item label="反馈信息:" required name="feedbackInfo">
							<uni-easyinput type="textarea" v-model="valiFormData.feedbackInfo" placeholder="请输入反馈信息" />
						</uni-forms-item>

						<uni-forms-item label="上传图片:" name="feedbackImg">
							<uni-file-picker limit="3" title="最多上传3张图片" v-model="valiFormData.feedbackImg"
								fileMediatype="image" :image-styles="imageStyles" mode="grid" @select="select"
								@delete="handleDelete">
							</uni-file-picker>
						</uni-forms-item>
					</uni-forms>

					<view class="form_button">
						<button type="primary" size="mini" @click="popSubmit('valiForm')">
							提交
						</button>
						<button type="primary" plain size="mini" @click="close">
							取消
						</button>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	// 引入照片压缩js文件
	import * as TranslateImage from '../../util/imageZip.js'

	export default {
		data() {
			return {
				// 图片上传组件的样式
				imageStyles: {
					width: 75,
					height: 75,
					border: {
						color: "#ccc",
						width: 1,
						style: 'dashed',
						radius: '5px'
					}
				},
				// 选择的宿舍绑定数据
				roomSelect: "请选择宿舍",
				// 悬浮按钮移动标识
				flags: false,
				maxW: 0,
				maxH: 0,
				position: {
					x: 0,
					y: 0
				},
				nx: 0,
				ny: 0,
				// 账单数据
				list: [{
						id: 1,
						title: "2022年9月水费账单",
						last: 0,
						current: 22,
						use: 22,
						sub: 15,
						notes: "水费为3.2元/吨",
						time: "2022-09-20 15：25：28",
						money: 14.66,
						payPeople: ""
					},
					{
						id: 2,
						title: "2022年6月水费账单",
						last: 66,
						current: 100,
						use: 34,
						sub: 14,
						notes: "水费为3.2元/吨",
						time: "2022-06-20 15：25：28",
						money: 64,
						payPeople: ""
					},
					{
						id: 3,
						title: "2022年5月水费账单",
						last: 100,
						current: 120,
						use: 20,
						sub: 10,
						notes: "水费为3.2元/吨",
						time: "2022-05-20 15：25：28",
						money: 32,
						payPeople: "测试"
					},
				],
				// 时间筛选框选中值绑定数据
				time_value: "",
				// 时间筛选框列表绑定数据
				time_range: [{
						value: 0,
						text: "2022"
					},
					{
						value: 1,
						text: "2023"
					},
					{
						value: 2,
						text: "2024"
					},
				],
				// 支付状态筛选框选中值绑定数据
				type_value: "",
				// 支付状态筛选框列表绑定数据
				type_range: [{
						value: 0,
						text: "已支付"
					},
					{
						value: 1,
						text: "未支付"
					},
				],
				// 订单反馈弹窗 表格的验证规则
				rules: {
					feedbackPersonName: {
						rules: [{
								required: true,
								errorMessage: "请输入姓名",
							},
							{
								minLength: 2,
								maxLength: 8,
								errorMessage: "请输入正确的姓名",
							}
						],
					},
					feedbackPersonPhone: {
						rules: [{
								required: true,
								errorMessage: "请输入联系人手机号码",
							},
							{
								pattern: /^[1]([3-9])[0-9]{9}$/,
								errorMessage: '请输入正确的手机号码'
							}
						],
					},
					feedbackRoom: {
						rules: [{
							required: true,
							errorMessage: "请输入宿舍号",
						}, ],
					},
					// feedbackImg: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: "请上传图片",
					// 	}, ],
					// },
					feedbackInfo: {
						rules: [{
							required: true,
							errorMessage: "请输入反馈信息",
						}, ],
					},
				},
				// 订单反馈弹窗 表格绑定数据
				valiFormData: {
					feedbackPersonName: "",
					feedbackPersonPhone: "",
					feedbackRoom: "",
					feedbackInfo: "",
					feedbackImg: []
				},
				popTitle: ""
			};
		},
		onLoad() {
			// 如果之前已经选择过宿舍,则从缓存中读取
			if (localStorage.room) {
				this.roomSelect = localStorage.room
				this.getData()
			}
		},
		methods: {
			// 获取账单列表数据
			// async
			getData() {
				console.log("获取数据");
				// let res = await this.$myRequest({
				// 	url: "/payableinfo/payableInfo",
				// 	data: {
				// 		pageSize: "999",
				// 	},
				// });
				// console.log(res);
			},
			// 选择图片回调
			select(e) {
				e.tempFiles.forEach((item) => {
					TranslateImage.translate(item.path, ((res) => {
						if (Number(res.size) > 1000000) {
							this.valiFormData.feedbackImg = []
							uni.showModal({
								content: `图片过大,请重新上传`,
								showCancel: false,
								success() {}
							})
							return
						}

						this.valiFormData.feedbackImg.push({
							url: item.path
						})
						console.log(this.valiFormData.feedbackImg);
						// uni.showLoading({
						// 	title: '上传中'
						// });
						// uni.uploadFile({
						// 	url: `/baoxiu/repairApi/order/uploadImage`,
						// 	filePath: res.url,
						// 	name: 'orderImages',
						// 	success: (uploadFileRes) => {
						// 		this.ceshiData1.push((JSON.parse(uploadFileRes.data).data))
						// 		const path = item.path;
						// 		this.imageValue.push({
						// 			url: path,
						// 			name: ""
						// 		})
						// 		uni.hideLoading();
						// 	},
						// 	fail: () => {
						// 		uni.hideLoading();
						// 	}
						// });
					}))
				})
			},
			// 删除图片回调
			handleDelete(e) {
				const num = this.valiFormData.feedbackImg.findIndex(v => v.path === e.tempFilePath);
				this.valiFormData.feedbackImg.splice(num, 1);
				console.log(this.valiFormData.feedbackImg);
			},
			// 订单反馈按钮弹窗
			handleFeedback(item) {
				this.popTitle = item.title
				this.valiFormData.feedbackPersonName = "";
				this.valiFormData.feedbackPersonPhone = "";
				this.valiFormData.feedbackRoom = "";
				this.valiFormData.feedbackInfo = "";
				this.valiFormData.feedbackImg = [];

				this.$refs.popup_feedback.open();
			},
			// 订单反馈弹窗提交按钮回调
			popSubmit(ref) {
				this.$refs[ref]
					.validate()
					.then((res) => {
						console.log(res);
						this.$refs.popup_feedback.close();
						uni.showToast({
							title: '提交成功',
						});
					})
					.catch((err) => {
						console.log("err", err);
					});
			},
			// 订单反馈弹窗取消按钮回调
			close() {
				this.$refs.popup_feedback.close();
			},
			// 时间筛选框数据改变回调
			changeTime(e) {
				console.log(e);
			},
			// 支付状态筛选框数据改变回调
			changeType(e) {
				console.log(e);
			},
			// 跳转到选择宿舍页面
			navigateToSelect() {
				uni.navigateTo({
					url: '/pages/select/select',
				});
			},
			// 跳转到支付页面
			navigateToPay(item) {
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/pay/pay?info=${info}`,
				});
			},
			// 订单查询悬浮按钮回调
			goBill() {
				uni.navigateTo({
					url: "/pages/bill/bill"
				})
			},

			// 实现移动端拖拽
			down(event) {
				let suspend_button = document.querySelector(".suspend_button");
				this.flags = true;
				let touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}

				this.maxW = document.body.clientWidth - suspend_button.offsetWidth;
				this.maxH = document.body.clientHeight - suspend_button.offsetHeight;

				this.position.x = touch.clientX - suspend_button.offsetLeft;
				this.position.y = touch.clientY - suspend_button.offsetTop;
			},

			move(event) {
				let suspend_button = document.querySelector(".suspend_button");
				if (this.flags) {
					let touch;
					if (event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					this.nx = touch.clientX - this.position.x;
					this.ny = touch.clientY - this.position.y;

					if (this.nx < 0) {
						this.nx = 0;
					} else if (this.nx > this.maxW) {
						this.nx = this.maxW;
					}

					if (this.ny < 0) {
						this.ny = 0;
					} else if (this.ny >= this.maxH) {
						this.ny = this.maxH;
					}
					suspend_button.style.left = this.nx + "px";
					suspend_button.style.top = this.ny + "px";
				}
			},

			end() {
				this.flags = false;
			},

			// 下拉刷新回调
			onPullDownRefresh() {
				console.log('刷新');
				// this.getData();
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: auto;
		height: 100vh;
		background-image: url(../../static/bg.png);
		background-size: 100% 100%;

		.select-item {
			margin: 19rpx 0;
			display: flex;
			background-color: #ffffff;
			height: 139rpx;

			.picker-item-logol {
				width: 88rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.picker-item-logo-left {
					width: 58rpx;
					height: 58rpx;
				}
			}

			.picker-item-label {
				font-size: 30rpx;
				width: 161rpx;
				height: 139rpx;
				line-height: 139rpx;
				text-align: center;
			}

			.picker-item-content {
				width: 360rpx;
				height: 139rpx;
				line-height: 139rpx;
				font-size: 36rpx;
				text-align: center;
				color: #999999;
			}

			.picker-item-logor {
				width: 91rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.picker-item-logo-right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.bill {
			margin: 20rpx 0;
			min-height: 982rpx;

			.null {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 auto;
				padding-top: 300rpx;
				width: 50%;
				height: 400rpx;

				img {
					height: 90%;
				}

				span {
					margin-top: 30rpx;
				}
			}

			.has {
				margin: 0 20rpx;

				.choose {
					display: flex;

					.time {
						flex: 1;
						padding-right: 40rpx;
					}

					.type {
						flex: 1;
						padding-right: 40rpx;
					}
				}

				.has_bill {
					margin-top: 20rpx;

					.item {
						margin-bottom: 20rpx;
						border-radius: 10rpx;
						background-color: #fff;

						.item_header {
							height: 96rpx;
							line-height: 96rpx;
							text-align: center;
							font-weight: bold;
							border-radius: 10rpx 10rpx 0 0;
							background-color: #e7eef5;
						}

						.item_box {
							display: flex;
							margin: 0 30rpx;
							height: 70rpx;
							line-height: 70rpx;
							font-weight: bold;

							.item_box_1 {
								flex: 1.5;
							}

							.item_box_2 {
								flex: 1;
							}

							.font {
								font-weight: normal;
								color: #999;
							}
						}

						.item_notes {
							margin: 0 30rpx;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 26rpx;
							color: #999;
						}

						.item_button {
							display: flex;
							justify-content: flex-end;
							margin: 10rpx 50rpx;
							height: 74rpx;
							line-height: 74rpx;

							.feedback {
								margin: 0;
								padding: 0;
								width: 140rpx;
								height: 65rpx;
								line-height: 65rpx;
								font-size: 26rpx;
							}

							.right {
								margin-right: 50rpx;
							}
						}
					}
				}
			}
		}

		.suspend_button {
			position: fixed;
			left: 80rpx;
			bottom: 120rpx;
			width: 140rpx;
			height: 140rpx;
			line-height: 140rpx;
			text-align: center;
			border-radius: 70rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.popup_view {
			width: 650rpx;

			.title {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				background-color: #e7eef5;
			}

			.forms {
				margin: 40rpx;
				width: 550rpx;

				.form_button {
					display: flex;
					text-align: center;

					button {
						width: 200rpx;
					}
				}
			}
		}
	}

	::v-deep .uni-select__input-placeholder {
		color: #fff;
	}

	::v-deep .uni-forms-item__label {
		width: 160rpx !important;
	}
</style>