565 lines
15 KiB
Vue
565 lines
15 KiB
Vue
<template>
|
||
<view
|
||
class="login-wrapper u-flex u-row-right"
|
||
style="background-image: url('/static/login/bg.png');background-size: cover;"
|
||
>
|
||
<view class="u-flex u-row-right" style="padding-right: 266rpx">
|
||
<view>
|
||
<view class="u-flex">
|
||
<image
|
||
src="@/static/iconImg/logo.png"
|
||
style="width: 186rpx; height: 88rpx"
|
||
/>
|
||
<text
|
||
class="u-m-l-16"
|
||
style="font-size: 80rpx; font-weight: 900; color: #3d66b0"
|
||
>银收客点餐</text
|
||
>
|
||
</view>
|
||
|
||
<view class="login-bottom jeepay-form u-m-t-46">
|
||
<!-- 不需要label, 需要修改： label-width="0" -->
|
||
<uni-forms
|
||
ref="loginFormRef"
|
||
label-width="0"
|
||
:model="vdata.formData"
|
||
:rules="rules"
|
||
>
|
||
<view class="u-p-b-30" v-if="false">
|
||
<my-tabs
|
||
size="large"
|
||
@change="accountTypeChange"
|
||
v-model="accountType.sel"
|
||
:list="accountType.list"
|
||
textKey="label"
|
||
></my-tabs>
|
||
</view>
|
||
<view v-if="vdata.loginType == 'pwd'">
|
||
<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" @click="showPwd">
|
||
{{ vdata.isShowPwd ? "隐藏" : "显示" }}
|
||
</view>
|
||
</template>
|
||
</uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item name="code">
|
||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||
<view style="display: flex" class="u-flex u-flex-y-center">
|
||
<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>
|
||
|
||
<view v-if="vdata.loginType == 'sms'">
|
||
<uni-forms-item name="loginPhone">
|
||
<uni-easyinput
|
||
class="jeepay-easyinput"
|
||
v-model="vdata.formData.loginPhone"
|
||
type="number"
|
||
:maxlength="11"
|
||
:disabled="!vdata.allowSendMsgFlag"
|
||
placeholder="请输入手机号"
|
||
:clearable="false"
|
||
>
|
||
<template #prefixIcon>
|
||
<image
|
||
src="@/static/login/icon-phone.svg"
|
||
class="input-icon"
|
||
/>
|
||
</template>
|
||
<template #suffixIcon>
|
||
<view class="show-tips" @tap="sendSmscodeFunc">{{
|
||
vdata.sendMsgText
|
||
}}</view>
|
||
</template>
|
||
</uni-easyinput>
|
||
</uni-forms-item>
|
||
<uni-forms-item>
|
||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||
<view style="display: flex">
|
||
<uni-easyinput
|
||
class="jeepay-easyinput"
|
||
:maxlength="6"
|
||
placeholder="请输入验证码"
|
||
v-model="vdata.formData.vercode"
|
||
:clearable="false"
|
||
>
|
||
<template #prefixIcon>
|
||
<image
|
||
src="@/static/login/icon-sms-code.svg"
|
||
class="input-icon"
|
||
/>
|
||
</template>
|
||
</uni-easyinput>
|
||
<image
|
||
:src="vdata.formData.imgCodeUrl"
|
||
style="width: 200rpx; height: 110rpx; margin-left: 10rpx"
|
||
@click="getCode"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item name="smsCode">
|
||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||
<uni-easyinput
|
||
class="jeepay-easyinput"
|
||
:maxlength="6"
|
||
placeholder="请输入手机验证码"
|
||
v-model="vdata.formData.smsCode"
|
||
:clearable="false"
|
||
>
|
||
<template #prefixIcon>
|
||
<image
|
||
src="@/static/login/icon-sms-code.svg"
|
||
class="input-icon"
|
||
/>
|
||
</template>
|
||
</uni-easyinput>
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
|
||
<Button @tap="loginFunc">登录</Button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<JAgree
|
||
service="PAGES_STATIC_AGREEMENT"
|
||
privacy="PAGES_FORGET_PASSWORD"
|
||
ref="refAgr"
|
||
@agree="agreeConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, onMounted, watch } from "vue";
|
||
import {
|
||
$loginByPwd,
|
||
$phoneCodeLogin,
|
||
$userInfo,
|
||
$sendSms,
|
||
$getSiteInfos,
|
||
$getUploadImgSize,
|
||
$isCode,
|
||
} from "@/http/apiManager.js";
|
||
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 Button from "@/components/Button/Button.vue";
|
||
import { getExtStoreId } from "@/commons/utils/versionManage.js";
|
||
import { $login } from "@/http/newApi/login.js";
|
||
import { login, getCodeImg } from "@/http/yskApi/login.js";
|
||
import { useAccountStore } from "@/stores/account";
|
||
const accountStore = useAccountStore();
|
||
|
||
function agreeConfirm() {
|
||
vdata.isSelectedAgreement = true;
|
||
}
|
||
function showPwd() {
|
||
vdata.isShowPwd = !vdata.isShowPwd;
|
||
}
|
||
const accountType = reactive({
|
||
list: [
|
||
{
|
||
label: "商户",
|
||
value: "0",
|
||
},
|
||
{
|
||
label: "员工",
|
||
value: "1",
|
||
},
|
||
],
|
||
sel: 1,
|
||
});
|
||
|
||
const loginFormRef = ref();
|
||
const envChangeTipsRef = ref();
|
||
const refAgr = ref();
|
||
const rules = {
|
||
merchantName: {
|
||
rules: [formUtil.rules.requiredInputShowToast("商户号")],
|
||
},
|
||
username: {
|
||
rules: [formUtil.rules.requiredInputShowToast("用户名")],
|
||
},
|
||
pwd: {
|
||
rules: [formUtil.rules.requiredInputShowToast("密码")],
|
||
},
|
||
safetyCode: {
|
||
rules: [formUtil.rules.requiredInputShowToast("安全码")],
|
||
},
|
||
code: {
|
||
rules: [formUtil.rules.requiredInputShowToast("验证码")],
|
||
},
|
||
loginPhone: {
|
||
rules: [formUtil.rules.requiredInputShowToast("手机号")],
|
||
},
|
||
|
||
smsCode: {
|
||
rules: [formUtil.rules.requiredInputShowToast("短信验证码")],
|
||
},
|
||
};
|
||
|
||
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",
|
||
},
|
||
});
|
||
|
||
|
||
function accountTypeChange(e) {
|
||
// #ifdef H5
|
||
if (e == 1) {
|
||
} else {
|
||
}
|
||
// #endif
|
||
}
|
||
|
||
const getCode = async () => {
|
||
try {
|
||
const res = await getCodeImg();
|
||
vdata.formData.img = res.code;
|
||
vdata.formData.uuid = res.uuid;
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: error.message,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
getCode();
|
||
|
||
onMounted(() => {
|
||
// getExtStoreId()
|
||
|
||
// 查询是否包含网站信息， 否则更新
|
||
|
||
// if(!vdata.siteInfos || Object.keys(vdata.siteInfos) <= 0){
|
||
// $getSiteInfos().then( ( { bizData } ) => {
|
||
// vdata.siteInfos = storageManage.siteInfos(bizData)
|
||
// })
|
||
// }
|
||
// 获取商户信息,有就回显
|
||
let info = uni.getStorageSync("MerchantId");
|
||
if (info.merchantName) {
|
||
vdata.formData.merchantName = info.merchantName;
|
||
vdata.formData.username = info.username;
|
||
}
|
||
});
|
||
|
||
// 切换登录方式
|
||
function changeLoginType() {
|
||
vdata.loginType = vdata.loginType == "pwd" ? "sms" : "pwd";
|
||
}
|
||
|
||
function loginFunc() {
|
||
// 表单验证
|
||
formUtil.validate(loginFormRef.value).then(() => {
|
||
// if (!vdata.isSelectedAgreement) {
|
||
// infoBox.showToast('请勾选同意用户服务协议与隐私政策')
|
||
// return false
|
||
// }
|
||
|
||
const loginType = accountType.list[accountType.sel].value;
|
||
let loginPromise = null;
|
||
let params = {
|
||
username: vdata.formData.username,
|
||
password: vdata.formData.pwd,
|
||
rememberMe: false,
|
||
code: vdata.formData.code,
|
||
uuid: vdata.formData.uuid,
|
||
merchantName: vdata.formData.merchantName,
|
||
loginType,
|
||
};
|
||
if (loginType == 1) {
|
||
params.username = vdata.formData.merchantName;
|
||
params.staffUserName = vdata.formData.username;
|
||
console.log("loginType", params);
|
||
}
|
||
if (vdata.loginType == "pwd") {
|
||
loginPromise = accountStore.login(params);
|
||
} else if (vdata.loginType == "sms") {
|
||
// 短信验证码登录
|
||
loginPromise = $phoneCodeLogin(
|
||
vdata.formData.loginPhone,
|
||
vdata.formData.smsCode
|
||
);
|
||
}
|
||
|
||
if (loginPromise == null) {
|
||
return false;
|
||
}
|
||
|
||
// 请求后的操作
|
||
loginPromise
|
||
.then((res) => {
|
||
if (res) {
|
||
// 登录成功
|
||
loginFinishFunc(res);
|
||
// 保存商户号
|
||
uni.setStorageSync("MerchantId", {
|
||
merchantName: vdata.formData.merchantName,
|
||
username: vdata.formData.username,
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || "登录失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
getCode();
|
||
});
|
||
});
|
||
}
|
||
const toPrivacy = () => {
|
||
// #ifdef APP-PLUS
|
||
go.to("PAGES_STATIC_POLICY");
|
||
// #endif
|
||
// 打开小程序隐私政策
|
||
// #ifdef MP-WEIXIN
|
||
wx.openPrivacyContract({
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: "打开失败请稍后重试", // 打开失败
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
// #endif
|
||
};
|
||
watch(
|
||
() => accountType.sel,
|
||
(newval) => {
|
||
if (newval == 1) {
|
||
} else {
|
||
vdata.formData.username = "";
|
||
}
|
||
}
|
||
);
|
||
// 封装登录成功后的操作
|
||
async function loginFinishFunc(loginBizData) {
|
||
// 保存 token
|
||
uni.setStorageSync("shopInfo", loginBizData.shopInfo);
|
||
uni.setStorageSync("tokenInfo", loginBizData.tokenInfo);
|
||
uni.setStorageSync("shopId", loginBizData.shopInfo.id);
|
||
uni.setStorageSync("loginType", loginBizData.loginType);
|
||
// 跳转到首页
|
||
go.to("PAGES_INDEX_CHOOSE_TABLE");
|
||
}
|
||
|
||
// 点击发送验证码的函数
|
||
function sendSmscodeFunc() {
|
||
// 按钮禁用
|
||
if (!vdata.allowSendMsgFlag) {
|
||
return false;
|
||
}
|
||
|
||
// 验证失败
|
||
if (!formUtil.regexp.mobile.test(vdata.formData.loginPhone)) {
|
||
return infoBox.showToast("请输入正确的手机号");
|
||
}
|
||
|
||
if (!vdata.formData.vercode) {
|
||
return infoBox.showToast("请输入图像验证码");
|
||
}
|
||
|
||
vdata.allowSendMsgFlag = false; // 按钮禁用
|
||
|
||
let data = {
|
||
phone: vdata.formData.loginPhone,
|
||
vercode: vdata.formData.vercode,
|
||
vercodeToken: vdata.formData.vercodeToken,
|
||
};
|
||
|
||
// 发送短信验证码
|
||
$sendSms(data, "auth")
|
||
.then(({ bizData }) => {
|
||
infoBox.showSuccessToast("验证码发送成功");
|
||
timer.startTimeoutTask(1, 60, (subTime) => {
|
||
if (subTime <= 0) {
|
||
// 任务结束
|
||
vdata.sendMsgText = "发送验证码";
|
||
vdata.allowSendMsgFlag = true;
|
||
return false;
|
||
}
|
||
|
||
vdata.sendMsgText = `${subTime}s后可重新发送`;
|
||
});
|
||
})
|
||
.catch(() => {
|
||
vdata.allowSendMsgFlag = true;
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@/commons/style/global.scss";
|
||
.login-wrapper {
|
||
min-height: 100vh;
|
||
|
||
.login-bottom {
|
||
padding: 50rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 28rpx;
|
||
background-color: #fff;
|
||
|
||
.show-tips {
|
||
color: rgba(88, 132, 204, 1);
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.agreement-policy {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 50rpx;
|
||
font-size: 26rpx;
|
||
color: #8c8c8c;
|
||
|
||
.select-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.select-img {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
}
|
||
}
|
||
|
||
.agreement,
|
||
.policy {
|
||
color: #1d79fd;
|
||
}
|
||
}
|
||
|
||
.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>
|