|
|
@@ -1,232 +1,247 @@
|
|
|
<template>
|
|
|
- <main>
|
|
|
- <section>
|
|
|
- <header>
|
|
|
- <p>牛器，牛逼的 AI 应用开发神器！</p>
|
|
|
- </header>
|
|
|
- <p>手机号登录</p>
|
|
|
- <p>获取验证码登录即注册成功</p>
|
|
|
- <section>
|
|
|
- <div>
|
|
|
- <a-select :style="{width:'80px',borderRight:'1px solid rgba(229, 229, 229, 1) !important'}" default-value="+86" :bordered="false">
|
|
|
- <a-option>+86</a-option>
|
|
|
- <a-option>+81</a-option>
|
|
|
- </a-select>
|
|
|
- <a-input-number placeholder="请输入手机号" :style="{width:'250px',height:'40px',background:'transparent'}" v-model="phone">
|
|
|
- </a-input-number>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section>
|
|
|
- <div>
|
|
|
- <a-input-number placeholder="请输入验证码" :style="{width:'200px',height:'40px',background:'transparent',border:'1px solid rgba(229, 229, 229, 1)'}" v-model="code">
|
|
|
- </a-input-number>
|
|
|
- <p @click="send" v-if="!hasSend">发送验证码</p>
|
|
|
- <p v-else class="disabled">{{count}}s</p>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <div @click="login">登录</div>
|
|
|
- <span>登录即默认已阅读同意《模型服务协议》和《用户隐私协议》</span>
|
|
|
- </section>
|
|
|
- <p>© 2024 北京 XXXXX 科技有限公司 京ICP备2023011302号-3 | 京公网安备11010802043150号 | 用户协议 | 模型服务协议</p>
|
|
|
- </main>
|
|
|
- <!-- <a-modal v-model:visible="visible" :simple="true" :footer="false">
|
|
|
+ <main>
|
|
|
+ <section>
|
|
|
+ <header>
|
|
|
+ <img src="@/assets/login.png" />
|
|
|
+ <p>欢迎使用</p>
|
|
|
+ </header>
|
|
|
+ <p>手机号登录</p>
|
|
|
+ <p>获取验证码登录即注册成功</p>
|
|
|
+ <section>
|
|
|
+ <div>
|
|
|
+ <a-select
|
|
|
+ :style="{ width: '80px', borderRight: '1px solid rgba(229, 229, 229, 1) !important' }"
|
|
|
+ default-value="+86"
|
|
|
+ :bordered="false"
|
|
|
+ >
|
|
|
+ <a-option>+86</a-option>
|
|
|
+ <a-option>+81</a-option>
|
|
|
+ </a-select>
|
|
|
+ <a-input-number
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ :style="{ width: '250px', height: '40px', background: 'transparent' }"
|
|
|
+ v-model="phone"
|
|
|
+ >
|
|
|
+ </a-input-number>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <div>
|
|
|
+ <a-input-number
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ :style="{
|
|
|
+ width: '200px',
|
|
|
+ height: '40px',
|
|
|
+ background: 'transparent',
|
|
|
+ border: '1px solid rgba(229, 229, 229, 1)'
|
|
|
+ }"
|
|
|
+ v-model="code"
|
|
|
+ >
|
|
|
+ </a-input-number>
|
|
|
+ <p @click="send" v-if="!hasSend">发送验证码</p>
|
|
|
+ <p v-else class="disabled">{{ count }}s</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <div @click="login">登录</div>
|
|
|
+ <span>登录即默认已阅读同意《模型服务协议》和《用户隐私协议》</span>
|
|
|
+ </section>
|
|
|
+ <p>
|
|
|
+ © 2024 北京 XXXXX 科技有限公司 京ICP备2023011302号-3 | 京公网安备11010802043150号 | 用户协议 | 模型服务协议
|
|
|
+ </p>
|
|
|
+ </main>
|
|
|
+ <!-- <a-modal v-model:visible="visible" :simple="true" :footer="false">
|
|
|
<mi-captcha ref="captcha" @success="sendSms" />
|
|
|
</a-modal> -->
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { defineComponent, ref, inject } from 'vue';
|
|
|
+import { defineComponent, ref, inject } from "vue";
|
|
|
export default defineComponent({
|
|
|
- components: {
|
|
|
- },
|
|
|
- props: [],
|
|
|
- setup() {
|
|
|
- const { ajax, helper } = inject('$global');
|
|
|
- const phone = ref(NaN);
|
|
|
- const code = ref(NaN);
|
|
|
- const visible = ref(false);
|
|
|
- const hasSend = ref(false);
|
|
|
- const captcha = ref(null);
|
|
|
- const count = ref(60);
|
|
|
- let intervalId = null;
|
|
|
- const sendSms = async () => {
|
|
|
- const result = await ajax.user.sendSms(phone.value);
|
|
|
- // visible.value = false;
|
|
|
- if (result) {
|
|
|
- helper.message('success', `已发送短信验证码`);
|
|
|
- hasSend.value = true;
|
|
|
- intervalId = setInterval(() => {
|
|
|
- if (count.value > 0) {
|
|
|
- count.value--;
|
|
|
- } else {
|
|
|
- clearInterval(intervalId);
|
|
|
- count.value = 60;
|
|
|
- hasSend.value = false;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- };
|
|
|
- const validatePhone= (phone) => {
|
|
|
- const isValidate = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(phone);
|
|
|
- return isValidate ? '' : '请输入正确的手机号';
|
|
|
- };
|
|
|
- const validateCode= (code) => {
|
|
|
- const isValidate = /^\d{6}$/.test(code);
|
|
|
- return isValidate ? '' : '请输入正确的验证码';
|
|
|
- };
|
|
|
- const send = () => {
|
|
|
- const text = validatePhone(phone.value);
|
|
|
- if (!text) {
|
|
|
- // visible.value = true;
|
|
|
- // captcha.value.reset(false);
|
|
|
- sendSms();
|
|
|
- } else {
|
|
|
- helper.message('error', text);
|
|
|
- }
|
|
|
- };
|
|
|
- const login = async () => {
|
|
|
- const text1 = validatePhone(phone.value);
|
|
|
- const text2 = validateCode(code.value);
|
|
|
- if (text1) {
|
|
|
- helper.message('error', text1);
|
|
|
- } else if (text2) {
|
|
|
- helper.message('error', text2);
|
|
|
- } else {
|
|
|
- const result = await ajax.user.smsLogin(phone.value, code.value);
|
|
|
- if (result) {
|
|
|
- window.localStorage.tokenMap = JSON.stringify(result);
|
|
|
- helper.getToken();
|
|
|
- helper.goLink('/');
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- return {
|
|
|
- login,
|
|
|
- visible,
|
|
|
- count,
|
|
|
- hasSend,
|
|
|
- phone,
|
|
|
- code,
|
|
|
- send,
|
|
|
- sendSms,
|
|
|
- captcha
|
|
|
- };
|
|
|
- },
|
|
|
+ components: {},
|
|
|
+ props: [],
|
|
|
+ setup() {
|
|
|
+ const { ajax, helper } = inject("$global");
|
|
|
+ const phone = ref(NaN);
|
|
|
+ const code = ref(NaN);
|
|
|
+ const visible = ref(false);
|
|
|
+ const hasSend = ref(false);
|
|
|
+ const captcha = ref(null);
|
|
|
+ const count = ref(60);
|
|
|
+ let intervalId = null;
|
|
|
+ const sendSms = async () => {
|
|
|
+ // const result = await ajax.user.sendSms(phone.value);
|
|
|
+ // visible.value = false;
|
|
|
+ // if (result) {
|
|
|
+ helper.message("success", `已发送短信验证码`);
|
|
|
+ hasSend.value = true;
|
|
|
+ intervalId = setInterval(() => {
|
|
|
+ if (count.value > 0) {
|
|
|
+ count.value--;
|
|
|
+ } else {
|
|
|
+ clearInterval(intervalId);
|
|
|
+ count.value = 60;
|
|
|
+ hasSend.value = false;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ // }
|
|
|
+ };
|
|
|
+ const validatePhone = (phone) => {
|
|
|
+ const isValidate =
|
|
|
+ /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
|
|
|
+ phone
|
|
|
+ );
|
|
|
+ return isValidate ? "" : "请输入正确的手机号";
|
|
|
+ };
|
|
|
+ const validateCode = (code) => {
|
|
|
+ const isValidate = /^\d{6}$/.test(code);
|
|
|
+ return isValidate ? "" : "请输入正确的验证码";
|
|
|
+ };
|
|
|
+ const send = () => {
|
|
|
+ const text = validatePhone(phone.value);
|
|
|
+ if (!text) {
|
|
|
+ // visible.value = true;
|
|
|
+ // captcha.value.reset(false);
|
|
|
+ sendSms();
|
|
|
+ } else {
|
|
|
+ helper.message("error", text);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const login = async () => {
|
|
|
+ helper.phone = phone.value;
|
|
|
+ helper.code = code.value;
|
|
|
+ if (helper.phone === 18811881188 && helper.code === 123123) {
|
|
|
+ helper.goLink("/");
|
|
|
+ } else {
|
|
|
+ helper.message("error", "登录失败");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ login,
|
|
|
+ visible,
|
|
|
+ count,
|
|
|
+ hasSend,
|
|
|
+ phone,
|
|
|
+ code,
|
|
|
+ send,
|
|
|
+ sendSms,
|
|
|
+ captcha
|
|
|
+ };
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- main {
|
|
|
+main {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
- >p {
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-size: 14px;
|
|
|
+ > p {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
- >section {
|
|
|
- width: 640px;
|
|
|
- border-radius: 12px;
|
|
|
- background-color: rgba(255, 255, 255, 0.52);
|
|
|
- box-shadow: 0px 2px 20px -2px rgba(0, 0, 0, 0.1);
|
|
|
- border: 1px solid rgba(187, 187, 187, 1);
|
|
|
- >header {
|
|
|
- height: 130px;
|
|
|
- background-color: rgba(65, 95, 235, 0.05);
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- height: 130px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- p {
|
|
|
- height: 130px;
|
|
|
- line-height: 130px;
|
|
|
- position: absolute;
|
|
|
- left: 30px;
|
|
|
- z-index: 2;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 36px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- >p {
|
|
|
- text-align: center;
|
|
|
- &:nth-child(2) {
|
|
|
- margin: 60px 0 10px 0;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- font-size: 18px;
|
|
|
+ > section {
|
|
|
+ width: 640px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.52);
|
|
|
+ box-shadow: 0px 2px 20px -2px rgba(0, 0, 0, 0.1);
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ > header {
|
|
|
+ height: 130px;
|
|
|
+ background-color: rgba(65, 95, 235, 0.05);
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ height: 130px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 130px;
|
|
|
+ line-height: 130px;
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ z-index: 2;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- >section {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 20px;
|
|
|
- &:nth-child(4) {
|
|
|
- >div {
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- display: inline-flex;
|
|
|
- }
|
|
|
+ > p {
|
|
|
+ text-align: center;
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin: 60px 0 10px 0;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
- &:nth-child(5) {
|
|
|
- >div {
|
|
|
+ > section {
|
|
|
display: flex;
|
|
|
- >p {
|
|
|
- width: 95px;
|
|
|
- height: 38px;
|
|
|
- line-height: 38px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- text-align: center;
|
|
|
- margin-left: 40px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- opacity: .8;
|
|
|
- }
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- &:hover {
|
|
|
- opacity: 1;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ &:nth-child(4) {
|
|
|
+ > div {
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ > p {
|
|
|
+ width: 95px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- >div {
|
|
|
- width: 332px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(64, 95, 234, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0px 2px 6px -2px rgba(64, 95, 234, 0.53);
|
|
|
- line-height: 40px;
|
|
|
- border: 1px solid rgba(64, 95, 234, 1);
|
|
|
- margin: 30px auto;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background-color: rgba(64, 95, 234, .8);
|
|
|
+ > div {
|
|
|
+ width: 332px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(64, 95, 234, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 2px 6px -2px rgba(64, 95, 234, 0.53);
|
|
|
+ line-height: 40px;
|
|
|
+ border: 1px solid rgba(64, 95, 234, 1);
|
|
|
+ margin: 30px auto;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(64, 95, 234, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ widows: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
}
|
|
|
- }
|
|
|
- >span {
|
|
|
- display: block;
|
|
|
- widows: 100%;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|
zhangnuoyan
