短信接口接入

This commit is contained in:
tiantang 2023-06-13 22:11:38 +08:00
parent d31b2388aa
commit 77abfd14e0
4 changed files with 92 additions and 20 deletions

View File

@ -1,11 +1,25 @@
import request from "@/utils/system/request"; import request from "@/utils/system/request";
import request2 from "@/utils/system/request2";
// 获取数据api // 获取数据api
export function getData(data: object) { export function getData(data: object) {
return request({ return request({
url: "/work/list", url: "/work/list",
method: "post", method: "post",
baseURL: "/mock", data,
});
}
export function sendCode(data: object) {
return request2({
url: "/sms/send",
method: "post",
data,
});
}
export function register(data: object) {
return request2({
url: "/register",
method: "post",
data, data,
}); });
} }

View File

@ -45,7 +45,8 @@ service.interceptors.response.use(
}, },
(error: AxiosError) => { (error: AxiosError) => {
console.log(error); // for debug console.log(error); // for debug
const badMessage: any = error.message || error; // @ts-ignore
const badMessage: any = error.response.data.message || error;
const code = parseInt( const code = parseInt(
badMessage badMessage
.toString() .toString()
@ -58,6 +59,7 @@ service.interceptors.response.use(
// 错误处理 // 错误处理
function showError(error: any) { function showError(error: any) {
console.log(error)
// token过期清除本地数据并跳转至登录页面 // token过期清除本地数据并跳转至登录页面
if (error.code === 403) { if (error.code === 403) {
// to re-login // to re-login

View File

@ -1,5 +1,5 @@
<template> <template>
<el-form ref="forms" :model="form" label-width="0px"> <el-form ref="forms" :rules="registerRules" :model="form" label-width="0px">
<el-form-item style="margin-bottom: 0px" class="app-form-center"> <el-form-item style="margin-bottom: 0px" class="app-form-center">
<div class="form-left"> <div class="form-left">
手机号码 手机号码
@ -17,7 +17,7 @@
</div> </div>
<div class="verify"> <div class="verify">
<div> <div>
<el-input v-model="form.verifyInt" placeholder="" size="large" /> <el-input v-model="form.code" placeholder="" size="large" />
</div> </div>
<div> <div>
<p class="sendCode" v-if="!isSend.state" @click="sendRequest">获取验证码</p> <p class="sendCode" v-if="!isSend.state" @click="sendRequest">获取验证码</p>
@ -50,23 +50,64 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted} from 'vue' import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref} from 'vue'
import verify from './verify.png' import verify from './verify.png'
import {types} from "sass"; import {types} from "sass";
import {sendCode} from "@/api/user"; import {register, sendCode} from "@/api/work";
import {ElMessage} from "element-plus"; import {ElForm, ElMessage} from "element-plus";
import {registerUserApi} from "@/api/user";
let time:number = -9999 let time:number = -9999
export default defineComponent({ export default defineComponent({
setup() { setup() {
const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
const lastSend = ref<number>() const lastSend = ref<number>()
const formSubmit: any = reactive({ const formSubmit: any = reactive({
form: { form: {
phone: 'phone', phone: '',
verify: verify, verify: verify,
verifyInt: '', code: '',
agreement: false agreement: false
} }
}) })
//
const registerRules = reactive({
phone: [
{
required: true,
validator: (rule: any, value: any, callback: any) => {
if (!value) {
return callback(new Error('手机号不能为空'))
}
callback()
},
trigger: 'blur'
}
],
code: [
{
// required: true,
validator: (rule: any, value: any, callback: any) => {
if (!value||value.length<4) {
return callback(new Error('验证码不能为空'))
}
callback()
},
trigger: 'blur'
}
],
agreement: [
{
// required: true,
validator: (rule: any, value: any, callback: any) => {
if (value !== true) {
return callback(new Error('请先勾选协议'))
}
callback()
},
trigger: 'blur'
}
]
})
const isSend: any = reactive({ const isSend: any = reactive({
isSend: { isSend: {
state: false, state: false,
@ -74,8 +115,19 @@ export default defineComponent({
} }
}) })
const onSubmit = () => { const onSubmit = () => {
const formWrap = unref<any>(registerRuleFormRef)
if (!formWrap) return
formWrap.validate((valid: boolean) => {
console.log(valid)
if (valid) {
// register({}).then(res=>{
//
// }))
console.log(11111111) console.log(11111111)
} }
})
}
onBeforeMount(()=>{ onBeforeMount(()=>{
const date:number = new Date().getTime()/1000 const date:number = new Date().getTime()/1000
const storage:string = localStorage.getItem("lastSend")||"" const storage:string = localStorage.getItem("lastSend")||""
@ -97,8 +149,18 @@ export default defineComponent({
}) })
// //
const sendRequest = () => { const sendRequest = () => {
//
if(formSubmit.form.phone.length<13){
ElMessage({
showClose: true,
message: '手机号不能为空',
type: 'error',
duration:3000
})
return;
}
sendCode({ sendCode({
phone:formSubmit.phone phone:formSubmit.form.phone
}).then(res=>{ }).then(res=>{
isSend.isSend.state = true isSend.isSend.state = true
const date:number = new Date().getTime()/1000 const date:number = new Date().getTime()/1000
@ -118,18 +180,12 @@ export default defineComponent({
type: 'success', type: 'success',
duration:3000 duration:3000
}) })
}).catch(error=>{
ElMessage({
showClose: true,
message: '短信成功失败:失败原因'+error,
type: 'error',
duration:3000
})
}) })
} }
return { return {
...toRefs(formSubmit), ...toRefs(formSubmit),
...toRefs(isSend), ...toRefs(isSend),
registerRules,
onSubmit, onSubmit,
sendRequest sendRequest
} }

View File

@ -109,7 +109,7 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<MessageLogin v-if="isMssages" @account="setMssages(false)" /> <MessageLogin v-show="isMssages" @account="setMssages(false)" />
</div> </div>
<div <div
class="Propaganda forms-sumit" class="Propaganda forms-sumit"
@ -206,7 +206,7 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<MessageLogin v-if="isMssages" @account="setMssages(false)" /> <MessageLogin v-show="isMssages" @account="setMssages(false)" />
</div> </div>
</div> </div>
</div> </div>