zhxg_xsbdV1.0/pages/pay/index.vue

<template>
	<view>
		<view>
			<view class="tab">
				<i></i>
				<text style="color: #409EFF;">长按二维码保存后是用微信扫一扫即可进行缴费</text>
			</view>
			<uni-card>
				<view style="text-align: center;">
					<view>
						<image style="width:600rpx;height:600rpx" show-menu-by-longpress="true" @click="previewImage"
							:src="qr_src"></image> 
					</view>
					<view>
						<text>缴费状态:{{order_status}}</text>
					</view> 
					<button style="margin-top: 10rpx;background-color: rgb(56,184,101);color: white;"
						@click="toOutPay">点我也可跳转哦~</button>
					<button @tap="studentLoan" style="margin-top: 10rpx;background-color: rgb(85, 170, 255);color: white;">助学贷款~</button>
					<button style="margin-top: 10rpx;" @click="getOrder">刷新缴费状态</button>
				</view>
			</uni-card>
		</view>
		<FloatBall />

		<zero-loading v-if="loading"></zero-loading>
	</view>
</template>

<script>
	import middleware from "@/middleware/index.js";
	import {
		toPay,
		getOrder
	} from "@/api/orderApi.js";
	import {
		listOwnTodo,
		confirmZxdk
	} from "@/api/toApi.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";

	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				loading: false,
				pageUrl: "",
				order_list: [],
				total: 0,
				has: 0,
				order_status: "未完成",
				qr_src: "",
				isAllBool: true,
				timer: null,
			}
		},
		async created() {
			await middleware();
			this.getOrder();
			await this.getUrl();
			this.timer = setInterval(() => {
				console.log("qrrefresh")
				this.getOrder();
				this.getUrl();
			}, 20000);
		},
		beforeDestroy() {
			if (this.timer != null) {
				clearInterval(this.timer);
			}
		},
		methods: {
			toOutPay() {
				window.location.href = this.pageUrl;
			},
			studentLoan(){
				uni.showModal({
					title:"请输入贷款回执编号：",
					content:"",
					editable:true,
					success: (res) => {
						//console.log(res);
						if(res.content==""){
							return;
						}
						if(res.confirm){
							let data={
								isLoan:1,
								regStatus:1,
								loanNo:res.content,
							}
							confirmZxdk(data).then(res=>{
								//console.log(res);
							})
						}
					}
				})
			},
			async getOrder() {
				let res = await getOrder();
				this.order_status = res.msg;
			},

			//长按识别二维码
			previewImage(e) {
				uni.previewImage({
					urls: [this.qr_src],
					longPressActions: {
						itemList: ["保存到相册", "识别二维码"],
						itemColor: "#007AFF",
						success: function(data) {}
					}
				})
			},
			async getUrl() {
				this.loading = true;
				let res = await toPay();
				this.loading = false;
				if (res.code == 200) {
					let url = res.data.url;
					let src = res.data.src;
					this.qr_src = src;
					this.pageUrl = url;
					//window.location.href = url;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.noBool {
		text-align: center;

		.noBool-text {
			margin-top: 20vh;
			font-size: 1.75rem;
			line-height: 5rem;
		}

		.noBool-link {
			font-size: 1.5rem;
			color: #409EFF;
			text-decoration: underline #409EFF;
			line-height: 5rem;
		}
	}

	.tab {
		margin: 25rpx;
		display: flex;
		align-items: center;

		i {
			background-color: #409EFF;
			width: 8rpx;
			height: 36rpx;
			border-radius: 4rpx;
		}

		text {
			font-size: 28rpx;
			margin-left: 5rpx;
		}
	}

	.uni-link.link {
		color: #409EFF;
	}
</style>