|
@@ -1,210 +1,296 @@
|
|
|
<template>
|
|
|
-<div class="conatiner">
|
|
|
- <!-- <p class="introduce">楚楚E-订单系统 <small>是一个便捷、高效的供应链管理软件。我们的系统为您提供基于云端的物流和供应链、库存管理、产品管理等功能,让订货变得无比简单。通过本系统,您可以随时下单或查看订单状态,轻松跟踪进度并且及时调整采购计划。</small></p> -->
|
|
|
- <div class="login-form">
|
|
|
- <p class="color-info">欢迎登录</p>
|
|
|
- <div>
|
|
|
- <p class="title">班尼戈水务-总控端</p>
|
|
|
- </div>
|
|
|
- <a-form
|
|
|
- :model="formState"
|
|
|
- name="basic"
|
|
|
- layout="vertical"
|
|
|
- autocomplete="off"
|
|
|
- @finish="onFinish"
|
|
|
- @finishFailed="onFinishFailed"
|
|
|
- >
|
|
|
- <a-form-item
|
|
|
- label="账号"
|
|
|
- name="phonenumber"
|
|
|
- :rules="[{ required: true, message: '请输入账号' }]"
|
|
|
- >
|
|
|
- <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号"/>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item
|
|
|
- label="密码"
|
|
|
- name="password"
|
|
|
- :rules="[{ required: true, message: '请输入密码!' }]"
|
|
|
+ <div class="conatiner">
|
|
|
+ <!-- <p class="introduce">楚楚E-订单系统 <small>是一个便捷、高效的供应链管理软件。我们的系统为您提供基于云端的物流和供应链、库存管理、产品管理等功能,让订货变得无比简单。通过本系统,您可以随时下单或查看订单状态,轻松跟踪进度并且及时调整采购计划。</small></p> -->
|
|
|
+ <div class="login-form">
|
|
|
+ <!-- <p class="color-info">欢迎登录</p> -->
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <div style="display: inline-block;">
|
|
|
+ <p class="title">
|
|
|
+ <img height="30" src="@/assets/LOGO.svg" alt="">
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-form
|
|
|
+ :model="formState"
|
|
|
+ name="basic"
|
|
|
+ layout="vertical"
|
|
|
+ autocomplete="off"
|
|
|
+ @finish="onFinish"
|
|
|
+ @finishFailed="onFinishFailed"
|
|
|
>
|
|
|
- <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码"/>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item name="remember">
|
|
|
- <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item>
|
|
|
- <a-button :loading="loading" type="primary" html-type="submit" size="large" block>登录</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
|
|
|
- <span>敬请期待</span> -->
|
|
|
- </div>
|
|
|
- <div class="login-wrap">
|
|
|
- <div class="top">
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
|
|
|
+ <!--账号登录-->
|
|
|
+ <div :style="{display: loginWrp == 'account' ? 'block' : 'none'}">
|
|
|
+ <a-form-item
|
|
|
+ name="phonenumber"
|
|
|
+ :rules="[{ required: true, message: '请输入账号' }]"
|
|
|
+ style="margin-bottom: 32px;"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入账号">
|
|
|
+ <template #prefix>
|
|
|
+ <i class="iconfont" style="margin-right: 4px;"></i>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ name="password"
|
|
|
+ :rules="[{ required: true, message: '请输入密码!' }]"
|
|
|
+ >
|
|
|
+ <a-input-password v-model:value="formState.password" size="large" placeholder="请输入密码">
|
|
|
+ <template #prefix>
|
|
|
+ <i class="iconfont" style="margin-right: 4px;"></i>
|
|
|
+ </template>
|
|
|
+ </a-input-password>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item name="remember">
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <a-checkbox v-model:checked="formState.remember"><span style="color:#ffffff">记住密码</span></a-checkbox>
|
|
|
+ <a-button type="link" style="color: #ffffff !important;">忘记密码?</a-button>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item>
|
|
|
+ <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <!--手机号登录-->
|
|
|
+ <div :style="{display: loginWrp == 'phone' ? 'block' : 'none'}">
|
|
|
+ <a-form-item
|
|
|
+ name="phonenumber"
|
|
|
+ :rules="[{ required: true, message: '请输入手机号' }]"
|
|
|
+ style="margin-bottom: 32px;"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formState.phonenumber" size="large" placeholder="请输入手机号">
|
|
|
+ <template #prefix>
|
|
|
+ <i class="iconfont" style="margin-right: 4px;"></i>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ name="password"
|
|
|
+ :rules="[{ required: true, message: '请输入验证码!' }]"
|
|
|
+ >
|
|
|
+ <div style="display:flex">
|
|
|
+ <a-input v-model:value="formState.password" size="large" placeholder="请输入验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <i class="iconfont" style="margin-right: 4px;"></i>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ <a-button type="primary" style="background: #143B88 !important;border: none;width: 120px;margin-left: 10px;" size="large" block>获取验证码</a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item>
|
|
|
+ <a-button :loading="loading" type="primary" style="background: #143B88 !important;border: none;" html-type="submit" size="large" block>登录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ <a-divider style="color: #ffffff;border-color: #ffffff;">其他登录方式</a-divider>
|
|
|
+ <div class="login-item">
|
|
|
+ <img src="@/assets/loginIcon.png" alt="" style="margin-right: 32px;cursor: pointer;" v-if="loginWrp == 'phone'" @click="loginWrp = 'account'">
|
|
|
+ <img src="@/assets/phone.png" alt="" style="margin-right: 32px;cursor: pointer;" v-else @click="loginWrp = 'phone'">
|
|
|
+ <img src="@/assets/wechat.png" alt="" style="cursor: pointer;">
|
|
|
+ </div>
|
|
|
+ <!-- <a-divider><span style="color:#999;font-weight:300">其他登录方式</span></a-divider>
|
|
|
+ <span>敬请期待</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="login-wrap">
|
|
|
+ <div class="top">
|
|
|
+ <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1890ff" fill-opacity="1" d="M0,288L48,266.7C96,245,192,203,288,202.7C384,203,480,245,576,245.3C672,245,768,203,864,202.7C960,203,1056,245,1152,272C1248,299,1344,309,1392,314.7L1440,320L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <a-layout-footer class="footer" style="background: #143B88 !important;">
|
|
|
+ 浙CP备2023011622号-1
|
|
|
+ </a-layout-footer>
|
|
|
</div>
|
|
|
- <a-layout-footer class="footer">
|
|
|
- Copyright © 2023 嘉兴市云链信息技术有限公司
|
|
|
- </a-layout-footer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { defineComponent, reactive,ref } from 'vue';
|
|
|
-import { useRouter } from "vue-router";
|
|
|
-import Api from '@/api/api'
|
|
|
-import md5 from 'js-md5'
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-import { useAuthStore } from '@/stores/modules/auth'
|
|
|
-import { useRouteTabsStore } from '@/stores/modules/Htabs'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-const rotTabs = useRouteTabsStore()
|
|
|
-const store = useAuthStore()
|
|
|
-let { accountList } = storeToRefs(store)
|
|
|
-let { historyRoutes } = storeToRefs(rotTabs)
|
|
|
-export default defineComponent({
|
|
|
- setup() {
|
|
|
- const router = useRouter()
|
|
|
- const formState = reactive({
|
|
|
- phonenumber: 'admin',
|
|
|
- password: '123456',
|
|
|
- remember: true,
|
|
|
- });
|
|
|
- let loading = ref(false)
|
|
|
- const onFinish = (values) => {
|
|
|
- login()
|
|
|
- };
|
|
|
-
|
|
|
- const onFinishFailed = (errorInfo) => {
|
|
|
- console.log('Failed:', errorInfo);
|
|
|
- };
|
|
|
-
|
|
|
- const login = async ()=>{
|
|
|
- loading.value = true
|
|
|
- const res = await Api.loginbyaccount({
|
|
|
- "accountno":formState.phonenumber,
|
|
|
- "password":md5(formState.password),
|
|
|
- "systemclient": "cweb"
|
|
|
- })
|
|
|
- if (res.code === 1) {
|
|
|
- if (res.account_list[0].status == 'INACTIVE')
|
|
|
- return message.error('当前账号已停用!')
|
|
|
- loading.value = false
|
|
|
- accountList.value = res.account_list
|
|
|
- store.defaultAccount(res.account_list[0],()=>{
|
|
|
- router.replace({path:'/home'})
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ import { defineComponent, reactive,ref } from 'vue'
|
|
|
+ import { useRouter } from "vue-router"
|
|
|
+ import Api from '@/api/api'
|
|
|
+ import md5 from 'js-md5'
|
|
|
+ import { message } from 'ant-design-vue'
|
|
|
+ import { useAuthStore } from '@/stores/modules/auth'
|
|
|
+ import { useRouteTabsStore } from '@/stores/modules/Htabs'
|
|
|
+ import { storeToRefs } from 'pinia'
|
|
|
+ const rotTabs = useRouteTabsStore()
|
|
|
+ const store = useAuthStore()
|
|
|
+ let { accountList } = storeToRefs(store)
|
|
|
+ let { historyRoutes } = storeToRefs(rotTabs)
|
|
|
+ export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ let loginWrp = ref('account')
|
|
|
+ const router = useRouter()
|
|
|
+ const formState = reactive({
|
|
|
+ phonenumber: 'admin',
|
|
|
+ password: '123456',
|
|
|
+ remember: true,
|
|
|
+ });
|
|
|
+ let loading = ref(false)
|
|
|
+ const onFinish = (values) => {
|
|
|
+ login()
|
|
|
+ };
|
|
|
+
|
|
|
+ const onFinishFailed = (errorInfo) => {
|
|
|
+ console.log('Failed:', errorInfo);
|
|
|
+ };
|
|
|
+
|
|
|
+ const login = async ()=>{
|
|
|
+ loading.value = true
|
|
|
+ const res = await Api.loginbyaccount({
|
|
|
+ "accountno":formState.phonenumber,
|
|
|
+ "password":md5(formState.password),
|
|
|
+ "systemclient": "cweb"
|
|
|
})
|
|
|
- } else {
|
|
|
- loading.value = false
|
|
|
- message.error(res.msg)
|
|
|
+ if (res.code === 1) {
|
|
|
+ if (res.account_list[0].status == 'INACTIVE')
|
|
|
+ return message.error('当前账号已停用!')
|
|
|
+ loading.value = false
|
|
|
+ accountList.value = res.account_list
|
|
|
+ store.defaultAccount(res.account_list[0])
|
|
|
+ router.replace({path:'/home'})
|
|
|
+
|
|
|
+ } else {
|
|
|
+ loading.value = false
|
|
|
+ message.error(res.msg)
|
|
|
+ }
|
|
|
}
|
|
|
+ return {
|
|
|
+ formState,
|
|
|
+ onFinish,
|
|
|
+ onFinishFailed,
|
|
|
+ loading,
|
|
|
+ loginWrp
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ sessionStorage.clear()
|
|
|
+ localStorage.clear();
|
|
|
+ historyRoutes.value = []
|
|
|
}
|
|
|
- return {
|
|
|
- formState,
|
|
|
- onFinish,
|
|
|
- onFinishFailed,
|
|
|
- loading
|
|
|
- };
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- sessionStorage.clear()
|
|
|
- localStorage.clear();
|
|
|
- historyRoutes.value = []
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.conatiner{
|
|
|
- background: url('@/assets/bg.png');
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.title{
|
|
|
- height: 33px;
|
|
|
- margin: 0 0 30px;
|
|
|
- color: #202d40;
|
|
|
- font-size: 1.25rem;
|
|
|
- font-weight: 600;
|
|
|
- animation: showup 3s forwards ;
|
|
|
-}
|
|
|
-.login-wrap{
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.login-wrap .top{
|
|
|
- width:100%;
|
|
|
- background:#f3f4f591
|
|
|
-}
|
|
|
-.login-wrap .top{
|
|
|
- height:calc(100vh - 70px);
|
|
|
- width:100%;
|
|
|
-}
|
|
|
-.login-wrap svg{
|
|
|
- height: 70%;
|
|
|
-}
|
|
|
-.login-form{
|
|
|
- position: absolute;
|
|
|
- right: 50%;
|
|
|
- top:50vh;
|
|
|
- width: 500px;
|
|
|
- margin-right: -250px;
|
|
|
- margin-top: -244px;
|
|
|
- padding: 30px;
|
|
|
- background-color: rgba(255,255,255,1);
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0 0 12px rgb(0 0 0 / 10%);
|
|
|
- z-index: 9999;
|
|
|
-}
|
|
|
-.input-wrap{
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.color-info{
|
|
|
- color:#999;
|
|
|
- font-weight:300
|
|
|
-}
|
|
|
-.introduce{
|
|
|
- position: absolute;
|
|
|
- left: 10%;
|
|
|
- top:10vh;
|
|
|
- font-size: 20px;
|
|
|
- color:#fff;
|
|
|
- text-indent: 3rem;
|
|
|
- line-height: 3rem;
|
|
|
- text-shadow: 0 0px 5px #666;
|
|
|
-}
|
|
|
-.introduce {
|
|
|
- white-space: pre-wrap; /* 允许换行 */
|
|
|
- overflow: hidden; /* 隐藏超出部分 */
|
|
|
- max-width: 700px; /* 固定宽度为 200 像素 */
|
|
|
- animation: typingH 5s forwards;
|
|
|
-
|
|
|
- display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
|
|
|
-}
|
|
|
-
|
|
|
-/* 伪元素来实现光标 */
|
|
|
-.introduce::after {
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- width: 5px;
|
|
|
- height: 1.2em;
|
|
|
- margin-left: 5px; /* 调整光标与文本的距离 */
|
|
|
-}
|
|
|
-@keyframes typingH {
|
|
|
- 0% {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media(max-width: 1600px) {
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+
|
|
|
+
|
|
|
+ .conatiner{
|
|
|
+ background: url('@/assets/wallhaven-0pq8gm.jpeg');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ height: 33px;
|
|
|
+ margin: 0 0 48px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 2rem;
|
|
|
+ font-weight: 500;
|
|
|
+ animation: showup 3s forwards ;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .login-wrap{
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .login-wrap .top{
|
|
|
+ width:100%;
|
|
|
+ /* background:#f3f4f591 */
|
|
|
+ }
|
|
|
+ .login-wrap .top{
|
|
|
+ height:calc(100vh - 70px);
|
|
|
+ width:100%;
|
|
|
+ }
|
|
|
+ .login-wrap svg{
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
.login-form{
|
|
|
- transform: scale(.8);
|
|
|
+ position: absolute;
|
|
|
+ right: 50%;
|
|
|
+ top:50vh;
|
|
|
+ width: 500px;
|
|
|
+ margin-right: -250px;
|
|
|
+ margin-top: -244px;
|
|
|
+ padding: 50px 80px;
|
|
|
+ background-color: rgba(255,255,255,.2);
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0 0 12px rgb(0 0 0 / 10%);
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-item {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-wrap{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .color-info{
|
|
|
+ color:#999;
|
|
|
+ font-weight:300
|
|
|
}
|
|
|
.introduce{
|
|
|
- font-size: 15px;
|
|
|
+ position: absolute;
|
|
|
+ left: 10%;
|
|
|
+ top:10vh;
|
|
|
+ font-size: 20px;
|
|
|
+ color:#fff;
|
|
|
+ text-indent: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ text-shadow: 0 0px 5px #666;
|
|
|
+ }
|
|
|
+ .introduce {
|
|
|
+ white-space: pre-wrap; /* 允许换行 */
|
|
|
+ overflow: hidden; /* 隐藏超出部分 */
|
|
|
+ max-width: 700px; /* 固定宽度为 200 像素 */
|
|
|
+ animation: typingH 5s forwards;
|
|
|
+
|
|
|
+ display: inline-block; /* 让行内元素可以自适应宽度、允许换行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ant-input {
|
|
|
+ color: #ffffff;
|
|
|
+ background: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ant-input-affix-wrapper {
|
|
|
+ background: rgba(43, 141, 195, 1) !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ant-input-affix-wrapper input {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.anticon {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 伪元素来实现光标 */
|
|
|
+ .introduce::after {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 1.2em;
|
|
|
+ margin-left: 5px; /* 调整光标与文本的距离 */
|
|
|
+ }
|
|
|
+ @keyframes typingH {
|
|
|
+ 0% {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media(max-width: 1600px) {
|
|
|
+ .login-form{
|
|
|
+ transform: scale(.8);
|
|
|
+ }
|
|
|
+ .introduce{
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+ </style>
|
|
|
+
|