jhsw_xiaochengxu/src/pages/index/pay.vue

<!-- eslint-disable no-prototype-builtins -->
<script setup lang="ts">
	import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
	import { ref, reactive } from "vue";
	import {
		createOrderApi,
		payAppointmentApi,
		queryOrderStatusApi,
		queryParamsApi,
		saveReportApi,
		queryReportListApi
	} from "@/services/home";
	import type { QueryPa } from "@/types/home";
	import HomeList from "./components/HomeList.vue";
	import { loginUser } from "@/hooks/useIsLogin";
	import { useMemberStore } from "@/stores";
	import ShuiWuSH from "@/components/ShuiWuSH.vue";

	const userInfo = useMemberStore();
	//1 未支付   --可查看全部信息
	//2 openId相等  但是状态是支付中  --可查看全部状态
	//3 openId不相等  状态是别人在支付中 --不可查看任何信息
	//4 openId 相等  但是已支付  --不再支付可查看生成的报告
	//5 openId 不相等  别人已支付  --不可查看任何信息

	/**
	 * 总结  当返回状态是
	 * 1或2时--按钮是微信支付---且列表显示--全部信息展示
	 * 3和5时 所有信息不展示
	 * 4时 按钮为查看风险评估
	 *
	 */

	//获取到的传输过来的唯一值
	const params = reactive<any>({
		title: "", //标题
		num: "", //剩余次数
		time: "", //有效截止日期
		flag: "", //当前订单的状态
	});

	let orderParams = reactive<any>({
		userId: '',
		linId: '',
		channelId: '', //渠道id
		title: '', //标题
		amount: '',
		times: '',
		effectiveDate: '', //天数
		createDate: '',
		staffId: '',
		staffName: '',
		backGround: '',
		status: '',
		flag: ''
	})

	// const userId = ref<string>("");
	//调用查询参数需要的入参
	const scene = ref<QueryPa>({ scene: "", userId: "" });
	const orderId = ref<string>("");

	//onLoad方法  --在页面初次加载时触发，仅会在页面初次加载时触发一次
	//应该将二维码获取唯一标识放到缓存中--这样即使从其他页面过来就回调用就能记住这个标识--然后根据标识去查询
	onLoad((options) => {
		//获取的二维码中得到的参数信息
		// console.log(decodeURIComponent(options?.scene));
		// scene.value.scene = decodeURIComponent(options?.scene);
		// userInfo.saveScene(decodeURIComponent(options?.scene));

		//根据页面中的options 获取参数
		//1判断是否含有这个参数

		//2如果没有则是表明是从另一个页面进来的不是扫码进来的
		//3则需要调用接口需要看到访问次数和过期时间
		const option = options as any;
		console.log(option.hasOwnProperty("scene"));
		console.log(option.hasOwnProperty("id"));
		if (option.hasOwnProperty("scene")) {
			//
			userInfo.saveScene(option.scene);
		} else {
			userInfo.saveScene("");
			//获取参数接口
		}
		//将scene存入缓存中

		// loginUser().then((res) => {
		//   //这时已经有返回信息了且用户数据已经
		//   scene.value.userId = res as string;
		//   //获取到userId了
		//   queryParams(scene.value);
		// });
	});
	onShow(() => {
		//从缓存中取出信息
		//  scene.value.scene = decodeURIComponent(options?.scene);
		//将scene存入缓存中
		//需要判断是否有scene
		scene.value.scene = userInfo.scene;
		//不等于空的话就说明是从扫码进来的
		//如果是空的话就是渠道点击进来的
		if (scene.value.scene !== "") {
			loginUser().then((res) => {
				//这时已经有返回信息了且用户数据已经
				scene.value.userId = res as string;
				//获取到userId了
				queryParams(scene.value);
			});
		} else {
			//如果是渠道点击进来的
			//则调用渠道接口//然后返回数据
		}
	});

	//查询 根据唯一键值对
	const queryParams = async (val : QueryPa) => {
		const res = await queryParamsApi(val);

		params.flag = res.data.flag;
		if (params.flag == 3 || params.flag == 5) {
			return;
		}
		params.title = res.data.title;
		params.num = res.data.times;

		params.time = formatterData(res.data.createDate, res.data.effectiveDays);

		orderParams.userId = userInfo.userInfo.id;
		orderParams.linId = res.data.id;
		orderParams.channelId = res.data.channelId;
		orderParams.title = res.data.title;
		orderParams.amount = res.data.amount;
		orderParams.times = res.data.times;
		orderParams.effectiveDate = res.data.effectiveDays;
		orderParams.createDate = res.data.createDate;
		orderParams.staffId = res.data.staffId;
		orderParams.staffName = res.data.staffName;
		orderParams.backGround = res.data.backGround;
		orderParams.status = res.data.status;
		orderParams.flag = res.data.flag;
	};

	// 邀约订单查询报告记录
	const queryReportList = async (val : any) => {
		const res = await queryReportListApi({
			linkId: orderParams.linId,
			pageNum: 1,
			pageSize: 6
		});
	}

	//有效日期
	const formatterData = (date : any, day : any) => {
		//将data日期格式化为初始的毫秒值
		//将day 日期格式化为day

		let dateF = new Date(date).getTime();
		let dayF = day * 24 * 60 * 60 * 1000;
		console.log(dateF);
		console.log(dayF);
		let dataN = dateF + dayF;
		//然后将毫秒值转化为具体时间
		let dataNew = new Date(dataN);
		let y = dataNew.getFullYear();
		let m =
			dataNew.getMonth() + 1 < 10 ? "0" + (dataNew.getMonth() + 1) : dataNew.getMonth() + 1;

		let d = dataNew.getDate() < 10 ? "0" + dataNew.getDate() : dataNew.getDate();
		return y + "-" + m + "-" + d;
	};

	//1先生成订单号
	//2订单号生成后调用后台获取核心参数  核心参数获取到以后
	//3调用位置支付、、 查看成功与否
	//4如果是成功支付和用户取消了订单
	//5否则循环调用查询支付接口
	//支付完成后进行下边的逻辑--开始查询报告

	//点击支付按钮生成的方法
	const payButton = () => {
		//先调用订单生成
		creatOrderFun(orderParams)
	};
	//生成订单号
	const creatOrderFun = async (val : any) => {
		const res = await createOrderApi(val);
		if (res.code == 200) {
			uni.showToast({
				title: '支付成功'
			})
			params.flag = 4;
		}
		//获取到订单号了

		//然后调用预支付接口后去核心数据
		//payFun(val)
	};
	//支付接口调用
	//调用后台接口返回订单号
	//调用后台接口返回  下单核心数据
	const payFun = async (val : any) => {
		const res = await payAppointmentApi(val);
		//核心参数返回后
		//调用微信支付方法
		uni.requestPayment({
			...val,
			success: (res : any) => {
				if (res) {
					console.log(res);
					if (res.errMsg == "requestPayment:ok") {
						//
						console.log("支付成功");
					}
				}
			},
			fail: (res : any) => {
				console.log(res);
				if (res.errMsg == "requestPayment:fail cancel") {
					console.log("用户取消了支付");
				} else {
					queryOrderFor();
					//调用支付失败的具体原因
					//这时是不是就应该定时器调用订单状态
				}
			},
		});
	};

	//点击税务风险检测--弹出输入税务号的信息
	const swGet = ref<any>();
	const openSW = () => {
		queryReportList();
		// swGet.value.openSH();
	};

	const goCheck = () => {
	}

	//查询订单状态
	const queryOrderStatus = async (val : any) => {
		const res = await queryOrderStatusApi(val);
		//判定返回参数
		//如果订单完成了
		//如果是满了返回了
		//需要去掉定时器
		clearInterval(timeMe.value);
	};
	//定时器参数
	const timeMe = ref<any>();
	//创建一个定时器
	const queryOrderFor = () => {
		//进来的时候清除定时器
		clearInterval(timeMe.value);
		timeMe.value = setInterval(() => {
			//嗲用方法
			queryOrderStatus({});
		}, 3000);
	};

	//销毁页面
	onUnload(() => {
		//来清除定时器
		clearInterval(timeMe.value);
	});
</script>
<template>
	<view class="payBg">
		<ShuiWuTop />
		<view class="pay_params">
			<view class="pay_card_title1">
				{{ params.title }}
			</view>
			<view class="pay_card_num"> 剩余生成次数：{{ params.num }} </view>
			<view class="pay_card_time"> 有效日期：{{ params.time }} </view>
		</view>
		<view v-show="params.flag == 1 || params.flag == 2"><button class="pay_button" @click="payButton">立即支付</button>
		</view>
		<view v-show="params.flag == 4"><button class="detection_button" @click="openSW">税务风险检测</button></view>

		<view v-show="params.flag == 4">
			<HomeList class="home_list_com" />
		</view>
		<ShuiWuSH ref="swGet" />
	</view>
</template>
<style lang="scss">
	page {
		height: 100%;
	}

	.payBg {
		width: 750rpx;
		height: 100%;
		padding: 0rpx 20rpx;

		.pay_params {
			width: 703rpx;
			height: 273rpx;
			color: #333333;
			margin-top: 60rpx;
			padding: 20rpx 40rpx;
			background: url(https://test.jue-ming.com:8849/api/show?filePath=./jinhong/index/pay_card.png) no-repeat top;
			background-size: cover;
			display: flex;
			flex-direction: column;

			.pay_card_title1 {
				font-family: 'Alibaba PuHuiTi 2.0';
				font-weight: normal;
				font-size: 32rpx;
				color: #0056FF;
				padding: 20rpx 0 40rpx 20rpx;
			}

			.pay_card_num {
				font-family: 'Alibaba PuHuiTi 2.0';
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
				padding-left: 20rpx;
				margin-top: 20rpx;
			}

			.pay_card_time {
				font-family: 'Alibaba PuHuiTi 2.0';
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
				padding-left: 20rpx;
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}
		}

		.pay_button {
			width: 703rpx;
			line-height: 77rpx;
			background: linear-gradient(90deg, #BC63F4 0%, #4A89FB 100%);
			border-radius: 20rpx;
			border: 1px solid #FFFFFF;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 72rpx 0 60rpx;
		}

		.detection_button {
			width: 703rpx;
			line-height: 77rpx;
			background: linear-gradient(90deg, #BC63F4 0%, #4A89FB 100%);
			border-radius: 20rpx;
			border: 1px solid #FFFFFF;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 72rpx 0 60rpx;
		}
	}
</style>