326 lines
8.5 KiB
Vue
326 lines
8.5 KiB
Vue
<template>
|
|
<up-popup :show="show" @close="close" closeOnClickOverlay @open="open" mode="center" :round="16">
|
|
<view class="login-wrapper">
|
|
<view class="login-bottom jeepay-form">
|
|
<view class="u-flex u-flex-row u-row-right u-m-t-10">
|
|
<up-icon name="close-circle-fill" size="20" color="#999" @click="close"></up-icon>
|
|
</view>
|
|
<up-form errorType="toast" :model="vdata.formData" :rules="rules" ref="loginFormRef">
|
|
<view class="">
|
|
<up-tabs :list="accountType.list" keyName="label" @change="accountTypeChange"></up-tabs>
|
|
</view>
|
|
<template v-if="accountType.sel==1">
|
|
<up-form-item prop="merchantName">
|
|
<up--input v-model="vdata.formData.merchantName" placeholder="请输入商户号">
|
|
</up--input>
|
|
</up-form-item>
|
|
</template>
|
|
<up-form-item prop="username">
|
|
<up--input v-model="vdata.formData.username" placeholder="请输入登录名/手机号"></up--input>
|
|
</up-form-item>
|
|
<up-form-item prop="pwd">
|
|
<up--input v-model="vdata.formData.pwd" type="password" placeholder="请输入登录密码"></up--input>
|
|
</up-form-item>
|
|
<up-form-item prop="code">
|
|
<up--input v-model="vdata.formData.code" placeholder="请输入验证码">
|
|
</up--input>
|
|
<image :src="vdata.formData.img" class=" " style="width: 100px; height: 40px;margin-left: 5px;"
|
|
@click="getCode" mode="">
|
|
</image>
|
|
</up-form-item>
|
|
<view class="u-m-t-10">
|
|
<up-button shape="circle" @click="loginFunc" type="primary" text="登录"></up-button>
|
|
</view>
|
|
</up-form>
|
|
<!-- <uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">
|
|
<view class="u-p-b-30">
|
|
<my-tabs size="large" @change="accountTypeChange" v-model="accountType.sel" :list="accountType.list"
|
|
textKey="label"></my-tabs>
|
|
</view>
|
|
<view>
|
|
<template v-if="accountType.sel==1">
|
|
<uni-forms-item name="merchantName">
|
|
<uni-easyinput class='jeepay-easyinput' placeholder="请输入商户号"
|
|
v-model="vdata.formData.merchantName" :clearable="false">
|
|
<template #prefixIcon>
|
|
<image src="@/static/login/icon-user.svg" class="input-icon" />
|
|
</template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
</template>
|
|
|
|
<uni-forms-item name="username">
|
|
<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"
|
|
v-model="vdata.formData.username" :clearable="false">
|
|
<template #prefixIcon>
|
|
<image src="@/static/login/icon-user.svg" class="input-icon" />
|
|
</template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item name="pwd">
|
|
<uni-easyinput class='jeepay-easyinput' :type="vdata.isShowPwd ? 'text' : 'password'"
|
|
v-model="vdata.formData.pwd" :clearable="false" placeholder="请输入登录密码">
|
|
<template #prefixIcon>
|
|
<image src="@/static/login/icon-pw.svg" class="input-icon" />
|
|
</template>
|
|
<template #suffixIcon>
|
|
<view class='show-tips' @tap="vdata.isShowPwd = !vdata.isShowPwd ">
|
|
{{ vdata.isShowPwd ? '隐藏' : '显示' }}
|
|
</view>
|
|
</template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item name="code">
|
|
<view style="display: flex;" class="u-flex u-flex-y-center u-flex-row">
|
|
<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入验证码"
|
|
v-model="vdata.formData.code" :clearable="false">
|
|
<template #prefixIcon>
|
|
<image src="@/static/login/icon-sms-code.svg" class="input-icon" />
|
|
</template>
|
|
</uni-easyinput>
|
|
<image :src="vdata.formData.img" class=" u-m-b-50"
|
|
style="width: 200rpx; height: 80rpx;margin-left: 10rpx;" @click="getCode" mode="">
|
|
</image>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<up-button @click="loginFunc" type="primary" text="登录"></up-button>
|
|
</uni-forms> -->
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
encrypt
|
|
} from '@/commons/utils/rsaEncrypt.js'
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
watch
|
|
} from 'vue';
|
|
import storageManage from '@/commons/utils/storageManage.js'
|
|
import infoBox from '@/commons/utils/infoBox.js';
|
|
import go from '@/commons/utils/go.js'
|
|
import timer from '@/commons/utils/timer.js'
|
|
import formUtil from '@/commons/utils/formUtil.js'
|
|
import {
|
|
login,
|
|
getCodeImg
|
|
} from '@/http/yskApi/login.js';
|
|
let show = ref(false)
|
|
const emits = defineEmits(['update:modelValue', 'loginSuccess'])
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
watch(() => props.modelValue, (newval) => {
|
|
show.value = newval
|
|
})
|
|
watch(() => show.value, (newval) => {
|
|
if(newval){
|
|
getCode()
|
|
}
|
|
emits('update:modelValue', newval)
|
|
})
|
|
|
|
function close() {
|
|
show.value = false
|
|
}
|
|
|
|
function open() {
|
|
show.value = true
|
|
}
|
|
const accountType = reactive({
|
|
list: [{
|
|
label: '商户',
|
|
value: 'merchant'
|
|
},
|
|
{
|
|
label: '员工',
|
|
value: 'staff'
|
|
},
|
|
],
|
|
sel: 0
|
|
})
|
|
|
|
function accountTypeChange(e) {
|
|
console.log(e);
|
|
accountType.sel = e.index
|
|
}
|
|
const loginFormRef = ref()
|
|
const envChangeTipsRef = ref()
|
|
const refAgr = ref()
|
|
const rules = {
|
|
merchantName: [{
|
|
required: true,
|
|
message: '请输入商户号',
|
|
trigger: ['blur', 'change'],
|
|
}],
|
|
username: [{
|
|
required: true,
|
|
message: '请输入员工账号，登录名/手机号',
|
|
trigger: ['blur', 'change'],
|
|
}],
|
|
pwd: [{
|
|
required: true,
|
|
message: '请输入密码',
|
|
trigger: ['blur', 'change'],
|
|
}],
|
|
code: [{
|
|
required: true,
|
|
message: '请输入验证码',
|
|
trigger: ['blur', 'change'],
|
|
}]
|
|
}
|
|
|
|
const vdata = reactive({
|
|
isShowPwd: false, // 是否显示密码
|
|
loginType: 'pwd', // 类型切换： pwd or sms
|
|
isShowSafetyCode: false, // 是否显示安全码输入框
|
|
allowSendMsgFlag: true, // 是否可发送短信验证码
|
|
sendMsgText: '发送验证码',
|
|
isSelectedAgreement: false, // 勾选隐私协议
|
|
siteInfos: storageManage.siteInfos() || {},
|
|
formData: {
|
|
username: '', // 账密登录： 用户名
|
|
pwd: '', // 账密登录： 密码
|
|
rememberMe: false,
|
|
code: '',
|
|
uuid: '',
|
|
merchantName: '',
|
|
loginType: 'merchant'
|
|
},
|
|
|
|
})
|
|
|
|
|
|
const getCode = () => {
|
|
getCodeImg().then(res => {
|
|
vdata.formData.img = res.img
|
|
vdata.formData.uuid = res.uuid
|
|
})
|
|
}
|
|
|
|
getCode()
|
|
|
|
onMounted(() => {})
|
|
|
|
function loginFunc() {
|
|
// 表单验证
|
|
formUtil.validate(loginFormRef.value).then(() => {
|
|
let loginPromise = null;
|
|
loginPromise = login({
|
|
username: vdata.formData.username,
|
|
password: encrypt(vdata.formData.pwd),
|
|
rememberMe: false,
|
|
code: vdata.formData.code,
|
|
uuid: vdata.formData.uuid,
|
|
merchantName: vdata.formData.merchantName,
|
|
loginType: accountType.list[accountType.sel].value
|
|
})
|
|
|
|
if (loginPromise == null) {
|
|
return false;
|
|
}
|
|
// 请求后的操作
|
|
loginPromise.then(res => {
|
|
console.log(res);
|
|
// 登录成功
|
|
loginFinishFunc(res)
|
|
|
|
}).catch(e => {
|
|
getCode()
|
|
})
|
|
})
|
|
|
|
}
|
|
watch(() => accountType.sel, (newval) => {
|
|
if (newval == 1) {
|
|
vdata.formData.merchantName = uni.getStorageSync('merchantName') || ''
|
|
} else {
|
|
vdata.formData.username = ''
|
|
}
|
|
})
|
|
// 封装登录成功后的操作
|
|
async function loginFinishFunc(loginBizData) {
|
|
// 保存 token
|
|
storageManage.setLogin(loginBizData)
|
|
storageManage.token(loginBizData.token)
|
|
storageManage.shopId(loginBizData.shopId)
|
|
storageManage.shopUserId(loginBizData.user.user.id)
|
|
storageManage.userInfo(loginBizData)
|
|
emits('loginSuccess')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.input-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
::v-deep .input-placeholder {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.login-wrapper {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.login-bottom {
|
|
min-height: 368px;
|
|
padding: 0 20px 20px 20px;
|
|
min-width: 400px;
|
|
box-sizing: border-box;
|
|
|
|
.show-tips {
|
|
color: rgba(88, 132, 204, 1);
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.register-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
margin-top: 50rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
|
|
.register {
|
|
text:last-child {
|
|
color: #1D79FD;
|
|
}
|
|
}
|
|
|
|
.forget {
|
|
color: #1D79FD;
|
|
}
|
|
}
|
|
|
|
.swidth-login {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 212rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: rgba(77, 77, 77, 1);
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |