c-zhangr1/zhgh_hrbnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Paidax
2024-07-29 11:46:09 +08:00
parent 854e197a5a
commit 05c9673aac
10 changed files with 2064 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/mobile/login.html
+185 -105
View File
@@ -2,12 +2,13 @@
layout("/mobile/platform.html"){
#-->
<style>
html, #app {
background-color: #FFFFFF;
html,
#app {
background-color: #ffffff;
}
[v-cloak] {
display: none
display: none;
}
.van-nav-bar {
@@ -15,7 +16,7 @@ layout("/mobile/platform.html"){
}
.van-nav-bar__title {
color: #FFF;
color: #fff;
}
.anchorBL {
@@ -73,61 +74,91 @@ layout("/mobile/platform.html"){
}
.logo {
height: 320px;
margin-bottom: 20px;
}
.logo img {
width: 300px;
}
.verify-img-panel {
border: none;
margin-bottom: 0 !important;
}
.verify-bar-area {
border: none;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.van-popup {
background-color: transparent;
}
</style>
<div v-cloak id="app">
<div class="logo">
<img style="width: 100%" src="/assets/mobile/img/login.png"/>
<img style="width: 100%" src="/assets/mobile/img/login.png" />
</div>
<div class="content">
<van-row><h1 style="margin: 0px 0;color: #1d1b1b;font-family: 'SourceHanSansCN-Heav">Welcome</h1></van-row>
<van-row><h1 style="margin: 0 0;color: #1d1b1b;font-family: 'SourceHanSansCN-Heav">Welcome</h1></van-row>
<van-row>
<span style="color: rgb(160,160,160)">欢迎登录智慧工会手机平台</span>
<span style="color: rgb(160, 160, 160)">欢迎登录智慧工会手机平台</span>
</van-row>
<div class="parm_v">
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;">
<svg t="1592742719420" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2146" width="16" height="16">
<path d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z"
p-id="2147" fill="#8a8a8a"></path>
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important">
<van-col span="2" style="line-height: 50px; text-align: left">
<svg
t="1592742719420"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2146"
width="16"
height="16"
>
<path
d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z"
p-id="2147"
fill="#8a8a8a"
></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.mobile" type="tel" maxlength="11"
:rules="[{ pattern , message: '请输入正确的手机号' }]"
placeholder="请输入手机号" clearable></van-field>
<van-field
v-model="formData.mobile"
type="tel"
maxlength="11"
:rules="[{ pattern , message: '请输入正确的手机号' }]"
placeholder="请输入手机号"
clearable
></van-field>
</van-col>
</van-row>
<!--<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555" fill="#8a8a8a"></path>
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important">
<van-col span="2" style="line-height: 50px; text-align: left; margin-top: 30px">
<svg
t="1592742837149"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3554"
width="16"
height="16"
>
<path
d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555"
fill="#8a8a8a"
></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.password" type="password" placeholder="输入密码"
style="margin-top: 30px" clearable></van-field>
</van-col>
</van-row>-->
<van-row style="border-bottom: 1px rgb(230,230,230) solid !important;">
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
p-id="3555" fill="#8a8a8a"></path>
</svg>
</van-col>
<van-col span="22">
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码"
style="margin-top: 30px" maxlength="6" clearable>
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码" style="margin-top: 30px" maxlength="6" clearable>
<template #button>
<div class="login-code" style="margin-top: -20px">
<van-button type="info" @click="handleLogin()">{{ codeMsg }}</van-button>
@@ -139,21 +170,20 @@ layout("/mobile/platform.html"){
</div>
<div class="bottom_v">
<van-button :loading="loading" size="large" color="linear-gradient(to right,#2b97d7,#8bc4ff)"
@click="doLogin">登 录
</van-button>
<van-button :loading="loading" size="large" color="linear-gradient(to right,#2b97d7,#8bc4ff)" @click="doLogin">登 录</van-button>
</div>
<van-dialog
title="请拖动滑块完成拼图"
v-model="isShowSliderVerify"
@close="refresh"
append-to-body>
<slider-verify ref="sliderVerify" @success="onSuccess" @fail="onFail" @again="onAgain"></slider-verify>
</van-dialog>
<!--<van-dialog title="请拖动滑块完成拼图" v-model="isShowSliderVerify" @close="refresh" append-to-body>
<div id="mpanel" style="margin-top: 50px"></div>
</van-dialog>-->
<van-popup round v-model="isShowSliderVerify" :style="{margin: '0 auto',width: '80%'}" @close="closePopup" safe-area-inset-bottom>
<div id="parentPanel"></div>
<!-- <div id="mpanel"></div>-->
</van-popup>
</div>
</div>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="/assets/bfwrepo/js/bfwone.js"></script>
<script>
let marker
let vue = new Vue({
@@ -165,59 +195,65 @@ layout("/mobile/platform.html"){
// 倒计时秒数
countdown: 60,
// 按钮上的文字
codeMsg: '获取动态码',
codeMsg: "获取动态码",
// 定时器
timer: null,
isShowSliderVerify: false,
loading: false,
formData: {
mobile: '',
password: '',
platformKey: '',
platformCaptcha: '',
mobile: "",
password: "",
platformKey: "",
platformCaptcha: "",
// 随机字符串
nonceStr: '',
nonceStr: "",
// 验证值
value: '',
value: ""
},
isNull(val) {
return !val;
return !val
},
pattern: /^1[3-9]\d{9}$/
}
},
components: {
'slider-verify': httpVueLoader('/components/captcha/sliderVerify.vue'),
"slider-verify": httpVueLoader("/components/captcha/sliderVerify.vue")
},
methods: {
closePopup() {
// 获取父元素
var panel = document.getElementById("mpanel")
panel.remove()
this.isShowSliderVerify = false
},
async sendCode() {
if (this.codeDisabled) {
return
}
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
const resp = await this.validMobile();
const resp = await this.validMobile()
if (resp.code !== 0) {
vue.$notify({type: 'warning', message: resp.msg});
vue.$notify({ type: "warning", message: resp.msg })
return
}
/*发送验证码功能*/
//若发送验证码成功，则调用倒计时函数
const {code, data} = await $.post('/platform/login/mobileCaptcha', {mobile: this.formData.mobile})
if(code === 0) {
const { code, data } = await $.post("/platform/login/mobileCaptcha", { mobile: this.formData.mobile })
if (code === 0) {
this.formData.platformKey = data.key
vue.$notify({type: 'success', message: data.msg});
await this.getCode();
vue.$notify({ type: "success", message: data.msg })
await this.getCode()
} else {
vue.$notify({type: 'warning', message: '动态码发送失败，请联系管理员'});
vue.$notify({ type: "warning", message: "动态码发送失败，请联系管理员" })
}
},
//验证手机号是否存在
async validMobile() {
return await $.post('${base!}/platform/login/validMobile', {mobile: this.formData.mobile})
return await $.post("${base!}/platform/login/validMobile", { mobile: this.formData.mobile })
},
// 获取验证码
async getCode() {
@@ -225,16 +261,16 @@ layout("/mobile/platform.html"){
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
this.countdown--
if (this.countdown !== 0) {
this.codeDisabled = true;
this.codeMsg = "重新发送(" + this.countdown + ")";
this.codeDisabled = true
this.codeMsg = "重新发送(" + this.countdown + ")"
} else {
clearInterval(this.timer);
this.codeMsg = "获取动态码";
this.countdown = 60;
this.timer = null;
this.codeDisabled = false;
clearInterval(this.timer)
this.codeMsg = "获取动态码"
this.countdown = 60
this.timer = null
this.codeDisabled = false
}
}
}, 1000)
@@ -242,71 +278,115 @@ layout("/mobile/platform.html"){
},
//验证图片滑动
async validVerify() {
return await $.post('${base!}/platform/login/validVerify', {
return await $.post("${base!}/platform/login/validVerify", {
nonceStr: this.formData.nonceStr,
value: this.formData.value,
value: this.formData.value
})
},
/* 滑动验证成功*/
async onSuccess(captcha) {
Object.assign(this.formData, captcha);
Object.assign(this.formData, captcha)
const resp = await this.validVerify()
if(resp.code === 0) {
console.log('success')
this.isShowSliderVerify = false;
await this.sendCode();
if (resp.code === 0) {
console.log("success")
this.isShowSliderVerify = false
await this.sendCode()
} else {
this.$refs.sliderVerify.verifyFailEvent(resp.msg);
this.$refs.sliderVerify.verifyFailEvent(resp.msg)
}
},
/* 滑动验证失败*/
onFail(msg) {
vue.$notify({type: 'warning', message: msg || '验证失败，请控制拼图对齐缺口'});
vue.$notify({ type: "warning", message: msg || "验证失败，请控制拼图对齐缺口" })
},
/* 滑动验证异常*/
onAgain() {
vue.$notify({type: 'warning', message: '滑动操作异常，请重试'});
this.$refs.sliderVerify.refresh();
vue.$notify({ type: "warning", message: "滑动操作异常，请重试" })
this.$refs.sliderVerify.refresh()
},
/* 刷新验证码*/
refresh() {
this.$refs.sliderVerify.refresh();
this.$refs.sliderVerify.refresh()
},
handleLogin() {
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
this.isShowSliderVerify = true;
this.isShowSliderVerify = true
const self = this
this.$nextTick(() => {
// 获取父元素
var parentPanel = document.getElementById("parentPanel")
// 创建新的子元素
var childDiv = document.createElement("div")
// 给子元素设置ID
childDiv.id = "mpanel"
// 将子元素添加到父元素中
parentPanel.appendChild(childDiv)
use(["verify", "verify"], function () {
$("#mpanel").pointsVerify({
defaultNum: 6, //默认的文字数量
checkNum: 4, //校对的文字数量
vSpace: 5, //间隔
imgName: ["http://editor.bfw.wiki/bfwrepo/image/sample1.png", "http://editor.bfw.wiki/bfwrepo/image/sample2.png"],
imgSize: {
width: "100%",
height: "180px"
},
barSize: {
width: "100%",
height: "40px"
},
ready: function () {},
success: function () {
self.sendCode()
self.isShowSliderVerify = false
},
error: function () {
vue.$notify({ type: "warning", message: "验证失败，请重试" })
}
})
})
})
},
doLogin() {
let self = this
if (this.isNull(this.formData.mobile)) {
vue.$notify({type: 'warning', message: '请填写手机号'});
vue.$notify({ type: "warning", message: "请填写手机号" })
return
}
if (this.isNull(this.formData.platformCaptcha)) {
vue.$notify({type: 'warning', message: '请填写手机动态码'});
vue.$notify({ type: "warning", message: "请填写手机动态码" })
return
}
this.loading = true
this.formData.loginType = 'SMS_CODE'
$.post("/mobile/login/doLogin", this.formData, function (d) {
self.loading = false
if (d.code === 0) {
vue.$notify({type: 'success', message: d.msg})
setTimeout(() => {
location.href = '/mobile/index'
},500)
} else {
vue.$notify({type: 'danger', message: d.msg})
self.isShowSliderVerify = false
}
}, "json");
},
},
this.formData.loginType = "SMS_CODE"
$.post(
"/mobile/login/doLogin",
this.formData,
function (d) {
self.loading = false
if (d.code === 0) {
vue.$notify({ type: "success", message: d.msg })
setTimeout(() => {
location.href = "/mobile/index"
}, 500)
} else {
vue.$notify({ type: "danger", message: d.msg })
self.isShowSliderVerify = false
}
},
"json"
)
}
}
})
</script>
<!--#