322 lines
8.4 KiB
Vue
322 lines
8.4 KiB
Vue
<template>
|
||
<OutMask :bg="bg">
|
||
<div v-if="!orderSuccess" class="orderContent" :class="bg ? 'mobile' : ''">
|
||
<div class="title" :class="bg ? '' : 'color'">请选择预约方式</div>
|
||
<div class="typeList">
|
||
<div
|
||
v-for="item in typeList"
|
||
:key="item.id"
|
||
class="type_item"
|
||
:class="`${activeType === item.id ? 'activeType' : ''} ${
|
||
bg ? '' : 'color'
|
||
}`"
|
||
@click="checkType(item.id)"
|
||
>
|
||
{{ item.txt }}
|
||
</div>
|
||
</div>
|
||
<div class="formData">
|
||
<div class="formItem">
|
||
<span v-if="!bg" class="label color">手机号码</span>
|
||
<div class="tipsBox">
|
||
<input
|
||
v-model="tel_number"
|
||
type="text"
|
||
class="tel"
|
||
placeholder="输入手机号码"
|
||
@blur="telBlur"
|
||
@focus="telFocus"
|
||
/>
|
||
<div v-if="telError" class="error">{{ telErrorTip }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="formItem">
|
||
<span v-if="!bg" class="label codeLabel color">验证码</span>
|
||
<div class="tipsBox">
|
||
<input
|
||
v-model="code"
|
||
type="text"
|
||
class="code"
|
||
placeholder="输入验证码"
|
||
@focus="codeFocus"
|
||
@blur="codeBlur"
|
||
/>
|
||
<div v-if="codeError" class="error">{{ codeTips }}</div>
|
||
</div>
|
||
<span
|
||
class="codeText"
|
||
:class="`${send ? 'send' : ''} ${bg ? '' : 'color'}`"
|
||
@click="sendCode"
|
||
>{{ codeText }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="orderBtn" @click="orderFn"></div>
|
||
<div
|
||
:class="bg ? 'm_close_btn' : 'close_btn'"
|
||
@click="closeOrder()"
|
||
></div>
|
||
</div>
|
||
<div v-else class="success">
|
||
<div class="successTitle color">恭喜您预约成功！</div>
|
||
<div v-if="!bg" class="successTxt color">
|
||
关注官方微博 @欢迎来到梦乐园 ，获取更多资讯。
|
||
</div>
|
||
<div v-else class="successTxt">
|
||
<p class="color">关注官方微博 @欢迎来到梦乐园 ，</p>
|
||
<p class="color">获取更多资讯。</p>
|
||
</div>
|
||
<div
|
||
:class="bg ? 'm_close_btn' : 'close_btn'"
|
||
@click="closeOrder()"
|
||
></div>
|
||
</div>
|
||
</OutMask>
|
||
</template>
|
||
|
||
<script>
|
||
import { appointment, getCode } from "../api/data.js";
|
||
// import { getCode } from "../api/data.js";
|
||
|
||
export default {
|
||
components: {
|
||
OutMask: () => import("./outMask.vue"),
|
||
},
|
||
props: {
|
||
bg: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
activeType: 1,
|
||
typeList: [
|
||
{
|
||
id: 1,
|
||
txt: "IOS",
|
||
},
|
||
{
|
||
id: 2,
|
||
txt: "安卓",
|
||
},
|
||
],
|
||
tel_number: "",
|
||
code: "",
|
||
telError: false,
|
||
telErrorTip: "请输入正确的手机号",
|
||
codeText: "获取验证码",
|
||
codeTips: "验证码错误",
|
||
codeError: false,
|
||
send: false,
|
||
second: 20,
|
||
orderSuccess: false,
|
||
codeBtnType: 0,
|
||
timerLife: 0,
|
||
blur: false,
|
||
ip: "",
|
||
};
|
||
// 60s后重新发送
|
||
},
|
||
watch: {
|
||
codeBtnType() {
|
||
if (this.codeBtnType === 1) {
|
||
const lstTime = localStorage.getItem("CodeRequestTime")
|
||
? parseInt(localStorage.getItem("CodeRequestTime"))
|
||
: 0;
|
||
const curTime = Date.parse(new Date()) / 1000;
|
||
if (curTime - lstTime < 60 && curTime !== lstTime)
|
||
this.timerLife = 60 - curTime + lstTime;
|
||
else this.timerLife = 60;
|
||
this.codeTip = this.timerLife + "s后可重新发送";
|
||
window.setTimeout(this.codeTick, 1000);
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.ip = this.$store.state.storageData.headers["x-real-ip"];
|
||
},
|
||
methods: {
|
||
checkType(id) {
|
||
this.activeType = id;
|
||
},
|
||
telBlur() {
|
||
document.body.scrollTop = 0;
|
||
const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; // 11位手机号码正则
|
||
if (this.tel_number === "" || !regTel.test(this.tel_number)) {
|
||
this.telError = true;
|
||
// alert("没有手机号");
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 2000);
|
||
}
|
||
return false;
|
||
} else {
|
||
this.telError = false;
|
||
return true;
|
||
}
|
||
},
|
||
telFocus() {
|
||
this.telError = false;
|
||
this.blur = false;
|
||
},
|
||
codeFocus() {
|
||
this.blur = false;
|
||
|
||
// alert('可恶的验证码')
|
||
},
|
||
codeBlur() {
|
||
this.blur = true;
|
||
},
|
||
// 获取验证码
|
||
sendCode() {
|
||
if (this.codeBtnType === 1) return;
|
||
|
||
if (!this.telBlur()) {
|
||
return;
|
||
}
|
||
const source = this.$route.query.source;
|
||
|
||
getCode({
|
||
mobile: this.tel_number,
|
||
source,
|
||
ip: this.ip,
|
||
})
|
||
.then((response) => {
|
||
if (response.code === 200) {
|
||
this.dueCodeSuccessSend();
|
||
}else if(response.code === 10000){
|
||
this.telError = true;
|
||
this.telErrorTip = response.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 3000);
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
if (!err.data.data || !err.data.data.msg) return;
|
||
this.telError = true;
|
||
this.telErrorTip = err.data.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 3000);
|
||
}
|
||
});
|
||
// this.send = true;
|
||
// this.codeText = this.second + "s后重新发送";
|
||
// setTimeout(() => {
|
||
// this.sendTxt();
|
||
// }, 1000);
|
||
},
|
||
codeTick() {
|
||
this.timerLife -= 1;
|
||
const intelVal = this.timerLife;
|
||
if (intelVal === 0) {
|
||
this.codeBtnType = 0;
|
||
this.codeText = "获取验证码";
|
||
} else {
|
||
this.codeText = intelVal + "s后可重新发送";
|
||
window.setTimeout(this.codeTick, 1000);
|
||
}
|
||
},
|
||
dueCodeSuccessSend() {
|
||
localStorage.setItem(
|
||
"CodeRequestTime",
|
||
(Date.parse(new Date()) / 1000).toString()
|
||
);
|
||
this.codeBtnType = 1;
|
||
},
|
||
// 提交预约
|
||
orderFn() {
|
||
if (!this.telBlur()) return;
|
||
// alert("没有手机号2");
|
||
// if (this.mobileType === "") {
|
||
// this.showMtips = true;
|
||
// this.mobileTypeTips = "请选择手机类型";
|
||
// return;
|
||
// }
|
||
if (this.code === "") {
|
||
this.codeError = true;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.codeError = false;
|
||
}, 3000);
|
||
}
|
||
// this.codeTips = "验证码不正确";
|
||
return;
|
||
}
|
||
|
||
// this.showMtips = false;
|
||
this.telError = false;
|
||
this.codeError = false;
|
||
|
||
// this.orderSuccess = true;
|
||
// console.log(appointment);
|
||
const source = this.$route.query.source;
|
||
|
||
appointment({
|
||
mobile: this.tel_number,
|
||
phone_type: this.activeType,
|
||
code: this.code,
|
||
source,
|
||
ip: this.ip,
|
||
})
|
||
.then((res) => {
|
||
// this.orderSuccess = true;
|
||
if (res.code === 200) {
|
||
this.orderSuccess = true;
|
||
}else if (res.code === 1002) {
|
||
this.codeError = true;
|
||
this.codeTips = res.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.codeError = false;
|
||
}, 3000);
|
||
}
|
||
} else if (res.code === 1001 || res.code === 10000) {
|
||
this.telError = true;
|
||
this.telErrorTip = res.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.telError = false;
|
||
}, 3000);
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.codeError = true;
|
||
this.codeTips = err.data.msg;
|
||
if (this.bg) {
|
||
setTimeout(() => {
|
||
this.codeError = false;
|
||
}, 3000);
|
||
}
|
||
});
|
||
},
|
||
// sendTxt() {
|
||
// if (this.second === 0) {
|
||
// this.codeText = "获取验证码";
|
||
// this.send = false;
|
||
// return;
|
||
// }
|
||
// this.second--;
|
||
// this.codeText = this.second + "s后重新发送";
|
||
// setTimeout(() => {
|
||
// this.sendTxt();
|
||
// }, 1000);
|
||
// },
|
||
closeOrder() {
|
||
this.$emit("closeOrder");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../assets/scss/order.scss";
|
||
</style>
|