feat:访客邀约和详情

src/sheep/components/verifyDeviceImpModel/verify-device-imp-model.vue

@@ -0,0 +1,133 @@
+<template>
+	<tm-modal
+		:show="show"
+		:overlayClick="false"
+		position="bottom"
+		:showCancel="showCancel"
+		title="您的设备需要验证"
+		height="650rpx"
+		zIndex="999"
+		cancelText="取消"
+		confirmText="确认"
+		@confirm=""
+		@cancel=""
+		@close="close"
+	>
+		<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>
+
+		<template #footer>
+			<tm-button block color="primary" @tap="doSubmit" :disabled="state.verifyBtnDisabled">验 证</tm-button>
+		</template>
+	</tm-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onUnmounted } from "vue"
+import { userApi } from "@@/api"
+
+const props = withDefaults(
+	defineProps<{
+		show: boolean
+		showCancel?: boolean
+		close?: () => void
+	}>(),
+	{
+		showCancel: true,
+		close: () => void 0,
+	},
+)
+
+const show = ref(props.show)
+
+const formRef = ref()
+const form = reactive<any>({
+	mobilePhone: "",
+	code: "",
+})
+const state = reactive({
+	countDown: 60,
+	codeBtnDisabled: true,
+	verifyBtnDisabled: false,
+	isTiming: false,
+})
+const formRules = reactive<any>({
+	mobilePhone: [{ required: true, message: "请输入手机号" }],
+	code: [{ required: true, message: "请输入验证码" }],
+})
+let timer: any = null
+
+// 获取验证码
+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: "none" })
+		return
+	}
+	uni.hideLoading()
+	uni.showToast({ title: "设备验证成功", icon: "none" })
+	show.value = false
+}
+
+onUnmounted(() => {
+	clearInterval(timer)
+})
+</script>