完成订单模块
This commit is contained in:
gxwebsoft
@@ -4,6 +4,9 @@
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + loginImg + ')'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config.shortName">
|
||||
<img :src="config.companyLogo" class="logo" />
|
||||
@@ -22,7 +25,7 @@
|
||||
class="title-btn"
|
||||
:class="loginType === 'scan' ? 'active' : ''"
|
||||
@click="onLoginType('scan')"
|
||||
>扫码登录</h4
|
||||
>短信登录</h4
|
||||
>
|
||||
</a-space>
|
||||
<template v-if="loginType === 'account'">
|
||||
@@ -86,13 +89,6 @@
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
{{ t('login.remember') }}
|
||||
</a-checkbox>
|
||||
<!-- <router-link-->
|
||||
<!-- to="/register"-->
|
||||
<!-- class="ele-pull-right"-->
|
||||
<!-- style="line-height: 22px"-->
|
||||
<!-- >-->
|
||||
<!-- 免费注册-->
|
||||
<!-- </router-link>-->
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
@@ -107,7 +103,58 @@
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'scan'">
|
||||
<Register />
|
||||
<a-form-item v-bind="validateInfos.phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`手机号码`"
|
||||
>
|
||||
<template #prefix>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
{{ t('login.remember') }}
|
||||
</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
@@ -118,6 +165,34 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
size="large"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -126,23 +201,14 @@
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
// import WxWork from './components/wx-work.vue';
|
||||
import Register from './components/register/step/index.vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
BankOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
WeiboOutlined
|
||||
BankOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
// import I18nIcon from '@/layout/components/i18n-icon.vue';
|
||||
// import { getToken } from '@/utils/token-util';
|
||||
// import { TENANT_ID } from '@/config/setting';
|
||||
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
||||
import { login, getCaptcha, registerUser } from '@/api/passport/login';
|
||||
// import { navTo } from '@/utils/common';
|
||||
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { THEME_STORE_NAME } from '@/config/setting';
|
||||
@@ -150,8 +216,8 @@
|
||||
import { useTenantStore } from '@/store/modules/tenant';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { getDomain } from '@/utils/domain';
|
||||
import { listWebsiteField } from '@/api/cms/website/field';
|
||||
import { checkExistence } from '@/api/system/user';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const { currentRoute } = useRouter();
|
||||
@@ -180,6 +246,7 @@
|
||||
companyLogo: '',
|
||||
tenantId: undefined
|
||||
});
|
||||
const loginImg = ref('');
|
||||
// 验证码 base64 数据
|
||||
const captcha = ref('');
|
||||
// 验证码内容, 实际项目去掉
|
||||
@@ -205,6 +272,13 @@
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号码',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
@@ -222,15 +296,33 @@
|
||||
};
|
||||
});
|
||||
|
||||
listWebsiteField({ name: 'LOGIN_IMG' }).then((list) => {
|
||||
// if (list.length == 0) {
|
||||
// loginImg.value = String('@/assets/bg-2.jpeg');
|
||||
// return;
|
||||
// }
|
||||
list.map((d) => {
|
||||
loginImg.value = String(d.value);
|
||||
});
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
checkExistence('phone', form.phone)
|
||||
.then(() => {
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
message.error('该手机号码不存在');
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
@@ -239,22 +331,30 @@
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then((res) => {
|
||||
console.log(res);
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
|
||||
.then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
codeLoading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
||||
@@ -304,11 +404,6 @@
|
||||
loginType.value = text;
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
openUrl(getDomain());
|
||||
return;
|
||||
};
|
||||
|
||||
const loginConnect = () => {
|
||||
// getWxWorkQrConnect().then((result) => {
|
||||
// console.log(result);
|
||||
@@ -366,9 +461,10 @@
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--grey-5);
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: #333333;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -379,7 +475,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/* 卡片 */
|
||||
|
||||
Reference in New Issue
Block a user