设备验证页面

src/pages.json

@@ -311,6 +311,13 @@
 						"navigationBarTitleText": "用户身份",
 						"disableScroll": true
 					}
+				},
+				{
+					"path": "deviceVerify",
+					"style": {
+						"navigationBarTitleText": "设备验证",
+						"disableScroll": true
+					}
 				}
 			]
 		},

src/pages/user/deviceVerify.vue

@@ -0,0 +1,120 @@
+<template>
+	<crud-layout title="设备验证" bg="/static/page/blue-bg.png">
+		<view class="h-30rpx" />
+		<view class="card p-x-30rpx p-y-40rpx">
+			<tm-form ref="formRef" v-model="form" :rules="formRules" direction="vertical">
+				<tm-form-item name="mobilePhone" label="手机号">
+					<tm-input v-model.trim="form.mobilePhone" :maxlength="11" placeholder="请输入手机号" />
+				</tm-form-item>
+				<view class="h-10rpx" />
+				<tm-form-item name="code" label="验证码">
+					<tm-input v-model.trim="form.code" :maxlength="6" placeholder="请输入验证码" :disabled="form.mobilePhone.length != 11">
+						<template v-slot:right>
+							<tm-button class="ml-1 px-2" color="primary" size="m" @click="getCode" :disabled="state.codeBtnDisabled">
+								<text>获取验证码</text><text v-if="state.isTiming">{{ state.countDown }} s</text>
+							</tm-button>
+						</template>
+					</tm-input>
+				</tm-form-item>
+			</tm-form>
+		</view>
+
+		<view class="h-60rpx" />
+
+		<tm-button block color="primary" @tap="doSubmit" :disabled="state.verifyBtnDisabled">验 证</tm-button>
+	</crud-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onUnmounted } from "vue"
+import { router } from "@@/index"
+import { userApi } from "@@/api"
+import { onLoad } from "@dcloudio/uni-app"
+import { isEmpty } from "radash"
+
+const formRef = ref()
+const form = reactive<any>({
+	mobilePhone: "",
+	code: "",
+})
+const state = reactive({
+	countDown: 60,
+	codeBtnDisabled: true,
+	verifyBtnDisabled: false,
+	isTiming: false,
+	redirect: "",
+})
+const formRules = reactive<any>({
+	mobilePhone: [{ required: true, message: "请输入手机号" }],
+	code: [{ required: true, message: "请输入验证码" }],
+})
+let timer: any = null
+
+onLoad((options: any) => {
+	if (!isEmpty(options.redirect)) {
+		state.redirect = options.redirect
+	}
+})
+
+// 获取验证码
+const getCode = async () => {
+	if (state.codeBtnDisabled) return
+
+	try {
+		uni.showLoading({ title: "发送中...", mask: true })
+		const res: any = await userApi.getMobilePhoneCode(form.mobilePhone)
+		if (res.code == 0) {
+			state.codeBtnDisabled = true
+			state.isTiming = true
+			timer = setInterval(() => {
+				state.countDown--
+				if (state.countDown === 0) {
+					state.isTiming = false
+					state.codeBtnDisabled = false
+					state.countDown = 60
+					clearInterval(timer)
+				}
+			}, 1000)
+		} else {
+			uni.showToast({ title: res.msg || "验证码发送失败", icon: "none" })
+		}
+	} catch (error: any) {
+		uni.showToast({ title: error.message, icon: "none" })
+	} finally {
+		uni.hideLoading()
+	}
+}
+
+watch(
+	() => form.mobilePhone,
+	(val) => {
+		if (val.length == 11) {
+			state.codeBtnDisabled = false
+		} else {
+			state.codeBtnDisabled = true
+		}
+	},
+)
+
+// 提交设备验证
+const doSubmit = async () => {
+	formRef.value.submit()
+	const { isPass } = formRef.value.validate()
+	if (!isPass) return
+
+	uni.showLoading({ title: "验证中...", mask: true })
+	const res: any = await userApi.verifyDevice({ mobilePhone: form.mobilePhone, code: form.code })
+	if (res.code != 0) {
+		uni.showToast({ title: "验证失败" + res.msg, icon: "error" })
+		return
+	}
+	uni.hideLoading()
+	uni.showToast({ title: "设备验证成功", icon: "none" })
+	if (state.redirect) return router.jump("/" + state.redirect, {}, 2)
+	router.back()
+}
+
+onUnmounted(() => {
+	clearInterval(timer)
+})
+</script>

src/sheep/api/user.ts

@@ -106,4 +106,23 @@ export default {
 				showLoading: false,
 			},
 		}),
+	// 根据手机号发送验证码
+	getMobilePhoneCode: (mobilePhone: string) =>
+		request({
+			url: `/thirdparty/thirdPartyOAth2/loginSms?mobilePhone=${mobilePhone}`,
+			method: "POST",
+			custom: {
+				showLoading: false,
+			},
+		}),
+	// 设备认证
+	verifyDevice: (data: { mobilePhone: string; code: string }) =>
+		request({
+			url: "/thirdparty/thirdPartyOAth2/verify-device",
+			method: "POST",
+			data,
+			custom: {
+				showLoading: false,
+			},
+		}),
 }