289 lines
7.9 KiB
Vue
289 lines
7.9 KiB
Vue
<template>
|
|
<div class="login-box">
|
|
<div class="form">
|
|
<div style="text-align: center;transform: translateY(-1vh);"><img src="/static/login/tit.png" style="width: 29vw;"></div>
|
|
<div class="content">
|
|
|
|
<div style="position: relative;margin-bottom: 3VH;">
|
|
<el-select v-model="role" placeholder="请选择你的身份" @change="test" :teleported="false" class="select_box">
|
|
<el-option label="商户" :value="1" />
|
|
<el-option label="普通用户" :value="2" />
|
|
<el-option label="镇" style="display: none;" :value="3" />
|
|
</el-select>
|
|
<div style="color: red;position: absolute;" v-show="isRole">请选择</div>
|
|
</div>
|
|
|
|
<div style="position: relative;margin-bottom: 3VH;">
|
|
<img src="/static/login/ZH.png" alt="" class="accont-icon">
|
|
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
|
|
<div style="color: red;position: absolute;" v-show="isAccount">请输入账号</div>
|
|
</div>
|
|
|
|
<div style="position: relative;margin-bottom: 3VH;">
|
|
<img src="/static/login/MM.png" alt="" class="accont-icon" style="">
|
|
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password"
|
|
@keyup.enter.native="submit">
|
|
<div style="color: red;position: absolute;" v-show="isPassword">请输入密码</div>
|
|
<img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
|
|
<img src="/static/login/BKH.png" v-else @click="show = true" class="show">
|
|
</div>
|
|
<div style="background-color: red;position: relative;">
|
|
<img src="/static/login/DL.png" class="btn" alt="" @click="submit">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { useRouter } from "vue-router";
|
|
import { loginApi, storeLoginApi } from "@/api.js"
|
|
import { areaObj } from "@/store/index.js"
|
|
const areaStroe = areaObj()
|
|
const router = useRouter()
|
|
const role = ref(null)
|
|
const show = ref(false)
|
|
const account = ref('叙永镇')
|
|
const password = ref('xuyognzheng')
|
|
const isAccount = ref(false)
|
|
const isPassword = ref(false)
|
|
const isRole = ref(false)
|
|
const submit = () => {
|
|
|
|
if (!role.value) {
|
|
isRole.value = true;
|
|
return
|
|
}
|
|
else isRole.value = false;
|
|
if (!account.value) {
|
|
isAccount.value = true;
|
|
return
|
|
}
|
|
else isAccount.value = false;
|
|
if (!password.value) {
|
|
isPassword.value = true;
|
|
|
|
return
|
|
}
|
|
else isPassword.value = false;
|
|
|
|
|
|
if (role.value == 1) {
|
|
|
|
storeLoginApi(
|
|
{
|
|
account: account.value,
|
|
password: password.value
|
|
}
|
|
).then(res => {
|
|
res.data.role = role.value
|
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
|
router.replace('/storeLogin')
|
|
|
|
})
|
|
|
|
}
|
|
if (role.value == 2) {
|
|
|
|
loginApi({
|
|
account: account.value,
|
|
password: password.value
|
|
}).then(res => {
|
|
|
|
if (res.data.user.street_code) {
|
|
|
|
role.value = 3
|
|
|
|
res.data.role = role.value
|
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
|
let { area_code, street_code } = res.data.user
|
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
|
router.replace('/townDetail?code=510524102')
|
|
}
|
|
else {
|
|
res.data.role = role.value
|
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
|
let { area_code, street_code } = res.data.user
|
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
|
router.replace('/')
|
|
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
// if (role.value == 3) {
|
|
|
|
// loginApi({
|
|
// account: account.value,
|
|
// password: password.value
|
|
// }).then(res => {
|
|
// res.data.role = role.value
|
|
// localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
|
// let { area_code, street_code } = res.data.user
|
|
// areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
|
// router.replace('/townDetail?code=510524102')
|
|
// })
|
|
// }
|
|
|
|
}
|
|
|
|
const test = () => {
|
|
|
|
// if (role.value == 1) {
|
|
// submit()
|
|
// }
|
|
// if (role.value == 2) {
|
|
// account.value = '泸县'
|
|
// password.value = 'luxain'
|
|
// submit()
|
|
|
|
// }
|
|
// if (role.value == 3) {
|
|
// account.value = '叙永镇'
|
|
// password.value = 'xuyongzheng'
|
|
// submit()
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.login-box {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-image: url('/static/login/bg.png');
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form {
|
|
width: 35vw;
|
|
height: 45vh;
|
|
position: absolute;
|
|
top: 25vh;
|
|
right: 10vw;
|
|
box-sizing: border-box;
|
|
background: url("/static/login/DLBG.png");
|
|
background-size: 100% 100%;
|
|
|
|
.content {
|
|
position: absolute;
|
|
top: 13vh;
|
|
// background-color: red;
|
|
left: 10vw;
|
|
|
|
.ipt {
|
|
border: 1px solid #2CCCF7;
|
|
padding: 1vh 2vw;
|
|
background-color: #125A7D;
|
|
width: 13VW;
|
|
outline: none;
|
|
-webkit-user-select: auto;
|
|
caret-color: #fff;
|
|
color: white;
|
|
}
|
|
|
|
input[type="password"]::-ms-reveal {
|
|
display: none
|
|
}
|
|
|
|
.btn {
|
|
width: 7vw;
|
|
cursor: pointer;
|
|
// margin: 0 auto;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.accont-icon {
|
|
width: 0.8vw;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: .5vw;
|
|
|
|
}
|
|
|
|
.show {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: .5vw;
|
|
width: 1vw;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.select_box {
|
|
|
|
// 默认placeholder
|
|
:deep .el-input__inner::placeholder {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
|
|
// 默认框状态样式更改
|
|
:deep .el-input__wrapper {
|
|
height: 35px;
|
|
width: 15.9vw;
|
|
background-color: #125A7D !important;
|
|
box-shadow: 0 0 0 1px #2CCCF7 inset !important;
|
|
|
|
}
|
|
|
|
// 修改下拉框样式-点击框focus
|
|
:deep .is-focus .el-input__wrapper {
|
|
box-shadow: #2CCCF7 inset !important;
|
|
--el-select-focus-border-color: #2CCCF7 !important;
|
|
--el-select-hover-border-color: #2CCCF7 !important;
|
|
}
|
|
|
|
:deep .el-select__caret {
|
|
color: #2CCCF7 !important; // 清除按钮
|
|
}
|
|
|
|
:deep .el-input__inner {
|
|
color: white !important; // 选中字体色
|
|
}
|
|
}
|
|
|
|
// 下拉框-展开样式
|
|
.el-select-dropdown__item.selected {
|
|
// background-color: #83e818!important; // 选中
|
|
}
|
|
|
|
.el-select-dropdown__item.hover {
|
|
background-color: #59C5D8 !important; // hover
|
|
}
|
|
|
|
:deep .el-dropdown-menu__item:not(.is-disabled) {
|
|
// color: #182F23!important; // disabled
|
|
}
|
|
|
|
.el-select-dropdown__item {
|
|
color: white !important; // 下拉项颜色
|
|
}
|
|
|
|
:deep .el-popper {
|
|
background-color: #125A7D !important; // 展开下拉背景
|
|
border: 1px solid #125A7D !important; // 展开下拉边框
|
|
}
|
|
|
|
:deep .el-popper .el-popper__arrow::before {
|
|
border-top: 1px solid #409EFE !important; // 箭头按钮边框
|
|
background-color: #409EFE !important; // 箭头按钮背景色
|
|
}
|
|
</style> |