设备指纹认证命令式弹框

src/App.vue

@@ -151,7 +151,7 @@ export default {
 					uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
 					break
 				case "coopMerchant":
-					// uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
+					uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
 					break
 				case "thirdApp":
 					uni.navigateTo({ url: "/pages/thirdApp/thirdAppList" })
@@ -162,13 +162,14 @@ export default {
 		} else if (appInfo == "sh") {
 			// 诗画环境
 			const userRole = uni.getStorageSync("userRole")
-			if (getLaunchParam()) {
+			const launchParam = getLaunchParam()
+			if (launchParam) {
 				switch (userRole) {
 					case "merchant":
 						return uni.switchTab({ url: "/pages/tabbar/individualOrder" })
 					case "user":
-						if (getLaunchParam() === "selfMerchant") return uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
-						if (getLaunchParam() === "coopMerchant") return uni.reLaunch({ url: "/pages/tabbar/coopMerchant" })
+						if (launchParam === "selfMerchant") return uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
+						if (launchParam === "coopMerchant") return uni.reLaunch({ url: "/pages/tabbar/coopMerchant" })
 						return
 					case "doorAdmin":
 						return uni.switchTab({ url: "/pages/tabbar/cabinet" })

src/pages.json

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

src/pages/user/verifyDeviceImpModel.ts

@@ -0,0 +1,20 @@
+import { h, render } from "vue"
+import ImpModel from "./verifyDeviceImpModel.vue"
+
+const showVerifyDeviceImpModel = (onClose: () => any = () => null) => {
+	return new Promise((resolve, reject) => {
+		const close = () => {
+			render(null, document.body)
+			onClose()
+		}
+
+		const vnode = h(ImpModel, {
+			show: true,
+			showCancel: false,
+			close,
+		})
+		render(vnode, document.body)
+	})
+}
+
+export default showVerifyDeviceImpModel

src/pages/user/verifyDeviceImpModel.vue

@@ -1,36 +1,57 @@
 <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>
+	<tm-modal
+		:show="show"
+		:overlayClick="false"
+		position="bottom"
+		:showCancel="showCancel"
+		title="您的设备需要验证"
+		height="650rpx"
+		zIndex="900"
+		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>
 
-		<view class="h-60rpx" />
-
-		<tm-button block color="primary" @tap="doSubmit" :disabled="state.verifyBtnDisabled">验 证</tm-button>
-	</crud-layout>
+		<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 { router } from "@@/index"
+import { ref, reactive, watch, computed, onUnmounted } from "vue"
 import { userApi } from "@@/api"
-import { onLoad } from "@dcloudio/uni-app"
-import { isEmpty } from "radash"
+
+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>({
@@ -42,7 +63,6 @@ const state = reactive({
 	codeBtnDisabled: true,
 	verifyBtnDisabled: false,
 	isTiming: false,
-	redirect: "",
 })
 const formRules = reactive<any>({
 	mobilePhone: [{ required: true, message: "请输入手机号" }],
@@ -50,12 +70,6 @@ const formRules = reactive<any>({
 })
 let timer: any = null
 
-onLoad((options: any) => {
-	if (!isEmpty(options.redirect)) {
-		state.redirect = options.redirect
-	}
-})
-
 // 获取验证码
 const getCode = async () => {
 	if (state.codeBtnDisabled) return
@@ -105,13 +119,12 @@ const doSubmit = async () => {
 	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" })
+		uni.showToast({ title: res.msg || "验证失败", icon: "none" })
 		return
 	}
 	uni.hideLoading()
 	uni.showToast({ title: "设备验证成功", icon: "none" })
-	if (state.redirect) return router.jump("/" + state.redirect, {}, 2)
-	router.back()
+	show.value = false
 }
 
 onUnmounted(() => {