waterpay_h5/pages/bill/bill.vue

<template>
	<view class="container">
		<view class="body">
			<!-- 顶部tab标签区域 -->
			<view class="tab">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#fff">
				</uni-segmented-control>
				<view class="select" v-if="list.length">
					<uni-data-picker class="picker" placeholder="点击根据时间筛选" popup-title="请选择筛选条件" :localdata="dataTree"
						v-model="classes" @change="onchange">
					</uni-data-picker>
				</view>
				<view class="content" v-if="list.length">
					<!-- 缴费失败区域 -->
					<view v-show="current === 0">
						<view class="detail" v-for="item in list" :key="item.id">
							<view class="detail_title">
								<view class="title1">
									{{ item.title }}
								</view>
								<text>缴费失败</text>
							</view>

							<view class="info">
								<view class="place">
									<view class="name">宿舍</view>
									<view class="rooms">{{ item.room }}</view>
								</view>

								<view class="place">
									<view class="name">上月表数</view>
									<view class="rooms">{{ item.last }}</view>
								</view>

								<view class="place">
									<view class="name">本月表数</view>
									<view class="rooms">{{ item.current }}</view>
								</view>

								<view class="place">
									<view class="name">用量</view>
									<view class="rooms">{{ item.use }}</view>
								</view>

								<view class="place">
									<view class="name">补助吨数</view>
									<view class="rooms">{{ item.sub }}</view>
								</view>

								<view class="place">
									<view class="time">备注：{{item.notes}}</view>
								</view>

								<view class="timeAndNumber">
									<view class="time">{{ item.time }}</view>
									<view class="number">待付款￥{{ item.money }}</view>
								</view>

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

									<button type="primary" plain size="mini" :disabled="isAccredit" class="button_item"
										@click="goPayPage(item)">
										继续支付
									</button>
								</view>
							</view>
						</view>
					</view>
					<!-- 缴费成功区域 -->
					<view v-show="current === 1">
						<view class="detail" v-for="item in list" :key="item.id">
							<view class="detail_title">
								<view class="title1">
									{{ item.title }}
								</view>
								<text class="title3">缴费成功</text>
							</view>

							<view class="info">
								<view class="place">
									<view class="name">宿舍</view>
									<view class="rooms">{{ item.room }}</view>
								</view>
								<view class="place">
									<view class="name">上月表数</view>
									<view class="rooms">{{ item.last }}</view>
								</view>

								<view class="place">
									<view class="name">本月表数</view>
									<view class="rooms">{{ item.current }}</view>
								</view>

								<view class="place">
									<view class="name">用量</view>
									<view class="rooms">{{ item.use }}</view>
								</view>

								<view class="place">
									<view class="name">补助吨数</view>
									<view class="rooms">{{ item.sub }}</view>
								</view>

								<view class="timeAndNumber">
									<view class="time">{{ item.time }}</view>
									<view class="number">实付款￥{{ item.money }}</view>
								</view>

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

				<!-- 图片区域 -->
				<view class="image" v-if="!list.length"></view>

				<!-- 提示信息区域 -->
				<view class="infoNo" v-if="!list.length"> 暂无缴费订单信息 </view>

				<view style="height: 15px"></view>
			</view>

			<!-- 悬浮按钮返回主页区域 -->
			<view id="item_box" class="suspension" @click="goHome" @touchstart="down" @touchmove.prevent="move"
				@touchend="end">
				<view class="icon">
					<img src="../../static/home.png" />
				</view>
				<view class="info">返回主页</view>
			</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="submit('valiForm')">
								提交
							</button>
							<button type="primary" plain size="mini" @click="close">
								取消
							</button>
						</view>
					</view>
				</view>
			</uni-popup>

		</view>
	</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'
					}
				},
				classes: "",
				dataTree: [{
						text: "2022",
						value: "2022"
					},
					{
						text: "2023",
						value: "2023"
					},
					{
						text: "2024",
						value: "2024"
					},
				],
				items: ["缴费失败", "缴费成功"],
				current: 1,
				status: 2,
				itemName: "",
				payYear: "",
				list: [{
					title: "2022年9月水费账单",
					room: "1栋210",
					last: 0,
					current: 22,
					use: 22,
					sub: 15,
					notes: "水费为3.2元/吨",
					time: "2022-08-20 14：23：12",
					money: "14.70"
				}],
				// 订单反馈弹窗 表格的验证规则
				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: []
				},
				range: [],
				detailInfo: {},
				single: "2021-04-3",
				orderNo: "",
				form: {
					appId: "",
					timeStamp: "",
					nonceStr: "",
					signType: "",
					paySign: "",
					package: "",
				},
				amount: "",
				notifyUrl: "https://chtech.ncjti.edu.cn/jiaofei/jiaofei-api/tuitionpayment/pay/jxnxs/notify/", //农商行地址
				flags: false,
				position: {
					x: 0,
					y: 0,
				},
				nx: "",
				ny: "",
				xPum: "",
				yPum: "",
				maxW: "",
				maxH: "",
				isAccredit: false,
				popTitle: ""
			};
		},
		onLoad() {

		},
		methods: {
			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);
			},
			// 筛选框数据改变回调
			onchange(e) {
				// console.log(e);
				if (e.detail.value.length == 0) {
					this.itemName = "";
					this.payYear = "";
				} else {
					this.itemName = e.detail.value[0].text;
					this.payYear = e.detail.value[0].text;
				}
			},

			// 顶部tab标签切换回调
			onClickItem(e) {
				this.current = e.currentIndex;
				if (this.current == 0) {
					this.status = 1;
				} else {
					this.status = 2;
				}
			},

			// 订单反馈按钮回调
			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();
			},

			// 订单反馈弹窗提交按钮回调
			submit(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();
			},

			// 继续支付按钮回调
			goPayPage(item) {
				// console.log(item);
				console.log("支付");
				// this.orderNo = item.orderNo;
				// this.amount = item.nowPayAmount;
				// this.createPayorder(item);
			},

			async createPayorder(item) {
				let allListString = item.payDetail.join("/");
				let res = await this.$myRequest({
					url: `/payorder/${item.payForIdentify}/create`,
					method: "post",
					data: {
						id: item.payinfoId,
						studentNo: item.payForIdentify,
						itemName: item.payItem,
						payYear: item.payYear,
						payDetail: allListString,
						dorm: item.dorm,
						payOrderLoan: item.payOrderLoan,
						orderNotice: item.orderNotice,
						payCount: item.payDetail ? "2" : "1",
						notPaySize: item.notPaySize,
						nowRealPayAmount: item.nowPayAmount,
						payerCardNumber: localStorage.getItem("card_number"),
						payerName: localStorage.getItem("studentName"),
					},
				});
				// console.log(res);
				if (res.success) {
					this.orderNo = res.data[0].orderNo;
					// if (res.data.length > 1) {
					// 	this.secondOrderNo = res.data[1].orderNo
					// }
					if (res.data[0].payMethod == "1") {
						// console.log("建行");
						this.getjhPay();
					} else {
						// console.log("农商");
						this.getnsPay();
					}
				} else {
					if (res.code == 10028 || res.code == 10029) {
						uni.showModal({
							title: "提示",
							content: res.message,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: "/pages/home/home",
									});
								}
							},
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "error",
							mask: true,
						});
					}
				}
			},

			// 建行支付请求
			async getjhPay() {
				let res = await this.$myRequest({
					url: "/pay/ccb/getJsApiParam",
					data: {
						orderNo: this.orderNo,
						openId: uni.getStorageSync("openId"),
						secondOrderNo: "",
					},
				});
				// console.log(res);
				if (res.success) {
					this.form = {
						...res.data,
					};
					//调起微信支付
					this.wxPay();
				} else {
					uni.showToast({
						title: res.message,
						icon: "error",
						mask: true,
					});
				}
			},

			wxPay() {
				let that = this;

				function onBridgeReady() {
					WeixinJSBridge.invoke(
						"getBrandWCPayRequest",
						that.form,
						function(res) {
							if (res.errMsg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							}
						}
					);
				}
				// 兼容处理
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							onBridgeReady,
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
						document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			},

			// 农商支付请求
			getnsPay() {
				let O = "6fc31630a4d3de99f5e41debbd35b9f0";

				let out_no = this.orderNo;

				let amount = this.amount;

				let appoint_notify = this.notifyUrl;

				let mainUrl =
					`https://q.jxnxs.com/newpay?O=${O}&out_no=${out_no}&amount=${amount}&appoint_notify=${appoint_notify}`;

				window.location.href = mainUrl;
			},

			// 返回主页按钮回调
			goHome() {
				uni.navigateTo({
					url: "/pages/home/home",
				});
			},

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

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

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

			move(event) {
				let item_box = document.querySelector("#item_box");
				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;
					}

					item_box.style.left = this.nx + "px";
					item_box.style.top = this.ny + "px";
				}
			},

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

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

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

		.body {
			margin: 0 30rpx;

			.tab {
				padding-top: 20rpx;

				.select {
					display: flex;
					margin-top: 20rpx;
					padding: 0 6rpx;
					height: 100rpx;
					border-radius: 10rpx;

					.picker {
						width: 100%;
						padding-top: 8rpx;
					}
				}

				.content {
					height: 80vh;
					overflow: auto;

					.detail {
						margin-bottom: 30rpx;
						background-color: #fff;
						border-radius: 5px;

						.detail_title {
							position: relative;
							height: 96rpx;
							line-height: 96rpx;
							text-align: center;
							border-radius: 5px 5px 0 0;
							background-color: #e7eef5;

							.title1 {
								font-size: 32rpx;
							}

							text {
								position: absolute;
								top: 0;
								right: 30rpx;
								font-size: 24rpx;
								color: red;
							}

							.title3 {
								color: #ff8b02;
							}
						}

						.info {
							.place {
								display: flex;
								margin-left: 34rpx;
								margin-top: 30rpx;

								.name {
									width: 200rpx;
									text-align-last: justify;
									color: #808080;
								}

								.rooms {
									padding-left: 130rpx;
									width: 440rpx;
									font-size: 32rpx;
								}

								.time {
									flex: 5;
									font-size: 24rpx;
									color: #999;
								}
							}

							.timeAndNumber {
								display: flex;
								margin-left: 34rpx;
								margin-top: 20rpx;

								.time {
									flex: 5;
									font-size: 24rpx;
									color: #999;
								}

								.number {
									flex: 5;
									font-size: 32rpx;
								}
							}

							.button {
								display: flex;
								justify-content: flex-end;
								margin-top: 20rpx;
								padding-bottom: 30rpx;

								.button_item {
									margin: 0 20rpx;
									padding: 0;
									width: 90px;
								}
							}

							.button2 {
								display: flex;
								margin-top: 20rpx;
								padding-bottom: 20rpx;

								.button_item {
									padding: 0;
									margin-left: auto;
									margin-right: 60rpx;
									width: 90px;
								}
							}
						}
					}
				}

				.image {
					margin: 260rpx auto;
					width: 438rpx;
					height: 360rpx;
					background: url(../../static/null.png);
					background-size: 100%;
				}

				.infoNo {
					margin-top: 100rpx;
					text-align: center;
					font-size: 36rpx;
				}
			}

			.suspension {
				position: absolute;
				left: 36rpx;
				bottom: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 140rpx;
				height: 140rpx;
				border-radius: 70rpx;
				background-color: rgba(0, 0, 0, 0.4);
				overflow: auto;

				.icon {
					flex: 1;

					img {
						margin-top: 20rpx;
						width: 40rpx;
					}
				}

				.info {
					flex: 2;
					font-size: 24rpx;
					color: #fff;
				}
			}

			.popup_view {
				width: 650rpx;

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

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

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

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

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

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

	::v-deep .input-arrow {
		border-color: #fff;
	}
</style>