zhywpt-sp/subpackage/personal-center/get-code.vue

<!-- 密码登录 -->
<template>
	<view class="login-main as-gravity-center as-layout-vertical">
		<view class="form">
			<view class="form-input">
				<view> +86</view>
				<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" mode="aspectFill" />
				<input class="input" v-model="state.mobile" focus placeholder="请输入手机号"
					placeholder-class="form-placeholder" type="number" maxlength="11" disabled />
			</view>
			<view class="form-input" v-if="state.loginType === 'code'">
				<input class="input" v-model="state.code" placeholder="请输入验证码" placeholder-class="form-placeholder"
					maxlength="6" type="number" />
				<verification-code :bg="false" :mobile="state.mobile"></verification-code>
			</view>
		</view>

		<view class="btn">
			<submit-button title="下一步" @submit="toNext"></submit-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { checkStr, msg, navTo } from "@/utils/utils";
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	import { checkCode } from "@/utils/network/api.js";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption";
	import { useUserStore } from "@/stores/user";
	import { getItem, setItem } from "@/utils/storage";
	const userStore = useUserStore();
	const { fetchToken } = userStore;

	const state = reactive({
		loginType: "code", //pwd-密码登录 code-验证码登录
		mobile: "", //用户名
		password: "", //密码
		code: "", //验证码
		json: {}
	});

	onLoad((option) => {
		// https://qtzl.etcjz.cn/default-bucket/20231204/scanPay.html?orderId=20231016180507480853307&phone=18786896573&type=1
		// https://qtzl.etcjz.cn/default-bucket/20231204/protocol.html?orderId=20231012114651162505354&phone=18786896573&type=2&url=default-bucket/20231024/fcae5e580ecc4cacaaa75138_ETC用户协议20230805（法审终版）.docx
		console.log("option", option)
		if (option.q) {
			const q = decodeURIComponent(option.q); // 获取到二维码原始链接内容
			console.log(q);
			state.json = getRequest(q)
			console.log("state.json", state.json, getItem("mobile"), getItem("mobile") == state.json.phone)
			setItem('scanCode', state.json)
			if (!getItem("mobile")) {
				uni.showModal({
					title: '提示',
					content: '您还未登录小程序,请先登录小程序',
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							navTo('/login/login')
						}
					}
				});
			}
			// 直接用传过来的手机号（不让他修改）
			state.mobile = state.json.phone
		} else {
			state.json = getItem("scanCode")
			state.mobile = state.json.phone
		}
	});

	onUnload(() => {

	});
	const toNext = () => {
		if (!state.mobile) {
			msg("请输入手机号！");
			return;
		}
		if (state.loginType === "code" && !state.code) {
			msg("请输入验证码！");
			return;
		}
		if (!checkStr(state.mobile, "mobile")) {
			msg("请输入正确的手机号！");
			return;
		}

		const options = {
			type: 2,
			data: {
				mobile: state.mobile,
				code: state.code
			},
			method: "POST",
			showLoading: true,
		};
		request(checkCode, options).then((res) => {
			console.log("过来了", res)
			if (state.json.type == 1) {
				uni.navigateTo({
					url: `/subpackage/orders/order_payment?orderId=${state.json.orderId}`,
				});
			} else if (state.json.type == 2) {
				uni.navigateTo({
					url: `/subpackage/orders/product-detail?orderId=${state.json.orderId}&url=${state.json.url}&typeScanCode=${state.json.type}`,
				});
			}
		})
			.catch((err) => {
				// msg("验证码错误");
			});
	};
	//解析URL获取参数
	const getRequest = (urlStr) => {
		if (typeof urlStr == "undefined") {
			// 获取url中"?"符后的字符串
			var url = decodeURI(location.search);
		} else {
			var url = "?" + urlStr.split("?")[1];
		}
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			var strs = str.split("&");
			for (var i = 0; i < strs.length; i++) {
				theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
			}
		}
		return theRequest;
	};
</script>

<style lang="scss" scoped>
	.login-main {
		border-top: 1rpx solid #dcdcdc;
		padding: 22rpx 30rpx 140rpx;

		.title {
			font-size: 46rpx;
			color: #333333;
			margin-top: 30rpx;
			font-weight: 600;
		}

		.form {
			width: 100%;
			margin-top: 100rpx;

			.form-input {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 90rpx;
				border-bottom: 1rpx solid #dcdcdc;
				padding: 0rpx 12rpx;
				color: #333333;

				&:last-child {
					margin-top: 50rpx;
				}

				.input {
					flex: 1;
					padding-right: 48rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					background-color: transparent;
				}

				.arror {
					width: 28rpx;
					height: 25rpx;
					margin-left: 16rpx;
					margin-right: 40rpx;
				}

				.eye {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.form-placeholder {
				color: #999999;
			}
		}

		.btn {
			width: 100%;
			margin: 120rpx 40rpx 50rpx;
		}




	}
</style>