feat: 登录组件文件位置调整
This commit is contained in:
rd
767
src/views/login/components/PuzzleVerification.vue
Normal file
767
src/views/login/components/PuzzleVerification.vue
Normal file
@ -0,0 +1,767 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-show="show" :class="['vue-puzzle-vcode', { show_: show }]" @click.stop="onMaskClick">
|
||||
<div class="vue-auth-box_" @mousedown.stop @touchstart.stop @click.stop>
|
||||
<div style="margin-bottom: 10px; fonst-size: 16px; color: #211f24">输入图形验证码</div>
|
||||
<div class="auth-body_" :style="`height: ${canvasHeight}px`">
|
||||
<!-- 主图，有缺口 -->
|
||||
<canvas
|
||||
style="border-radius: 10px"
|
||||
ref="canvas1"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:style="`width:${canvasWidth}px;height:${canvasHeight}px`"
|
||||
/>
|
||||
<!-- 成功后显示的完整图 -->
|
||||
<canvas
|
||||
ref="canvas3"
|
||||
:class="['auth-canvas3_', { show: isSuccess }]"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:style="`width:${canvasWidth}px;height:${canvasHeight}px`"
|
||||
/>
|
||||
<!-- 小图 -->
|
||||
<canvas
|
||||
:width="puzzleBaseSize"
|
||||
class="auth-canvas2_"
|
||||
:height="canvasHeight"
|
||||
ref="canvas2"
|
||||
:style="`width:${puzzleBaseSize}px;height:${canvasHeight}px;transform:translateX(${
|
||||
styleWidth -
|
||||
sliderBaseSize -
|
||||
(puzzleBaseSize - sliderBaseSize) * ((styleWidth - sliderBaseSize) / (canvasWidth - sliderBaseSize))
|
||||
}px)`"
|
||||
/>
|
||||
|
||||
<div :class="['info-box_', { show: infoBoxShow }, { fail: infoBoxFail }]">
|
||||
{{ infoText }}
|
||||
</div>
|
||||
<div
|
||||
:class="['flash_', { show: !isSuccess }]"
|
||||
:style="`transform: translateX(${
|
||||
isSuccess ? `${canvasWidth + canvasHeight * 0.578}px` : `-${canvasHeight * 0.578}px`
|
||||
}) skew(-30deg, 0);`"
|
||||
></div>
|
||||
<img
|
||||
class="reset_"
|
||||
@click="reset"
|
||||
src="https://zahour-sensor.oss-cn-beijing.aliyuncs.com/applet/zayn/%E5%88%B7%E6%96%B0.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-control_">
|
||||
<div class="range-box" :style="`height:${sliderBaseSize}px`">
|
||||
<div class="range-text">{{ sliderText }}</div>
|
||||
<div class="range-slider" ref="rangeSlider" :style="`width:${styleWidth}px`">
|
||||
<div
|
||||
:class="['range-btn', { isDown: mouseDown }]"
|
||||
:style="`width:${sliderBaseSize}px`"
|
||||
@mousedown="onRangeMouseDown($event)"
|
||||
@touchstart="onRangeMouseDown($event)"
|
||||
>
|
||||
<!-- 按钮内部样式 -->
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
canvasWidth: { type: Number, default: 350 }, // 主canvas的宽
|
||||
canvasHeight: { type: Number, default: 200 }, // 主canvas的高
|
||||
// 是否出现，由父级控制
|
||||
show: { type: Boolean, default: true },
|
||||
puzzleScale: { type: Number, default: 1 }, // 拼图块的大小缩放比例
|
||||
sliderSize: { type: Number, default: 50 }, // 滑块的大小
|
||||
range: { type: Number, default: 10 }, // 允许的偏差值
|
||||
// 所有的背景图片
|
||||
imgs: {
|
||||
type: Array,
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: '验证通过！',
|
||||
},
|
||||
failText: {
|
||||
type: String,
|
||||
default: '验证失败，请重试',
|
||||
},
|
||||
sliderText: {
|
||||
type: String,
|
||||
default: '向右滑动填充拼图',
|
||||
},
|
||||
});
|
||||
|
||||
const verSuccess = ref(false);
|
||||
const mouseDown = ref(false); // 鼠标是否在按钮上按下
|
||||
const startWidth = ref(50); // 鼠标点下去时父级的width
|
||||
const startX = ref(0); // 鼠标按下时的X
|
||||
const newX = ref(0); // 鼠标当前的偏移X
|
||||
const pinX = ref(0); // 拼图的起始X
|
||||
const pinY = ref(0); // 拼图的起始Y
|
||||
const loading = ref(false); // 是否正在加在中，主要是等图片onload
|
||||
const isCanSlide = ref(false); // 是否可以拉动滑动条
|
||||
const error = ref(false); // 图片加在失败会出现这个，提示用户手动刷新
|
||||
const infoBoxShow = ref(false); // 提示信息是否出现
|
||||
const infoText = ref(''); // 提示等信息
|
||||
const infoBoxFail = ref(false); // 是否验证失败
|
||||
const timer1 = ref(null); // setTimout1
|
||||
const closeDown = ref(false); // 为了解决Mac上的click BUG
|
||||
const isSuccess = ref(false); // 验证成功
|
||||
const imgIndex = ref(-1); // 用于自定义图片时不会随机到重复的图片
|
||||
const isSubmting = ref(false); // 是否正在判定，主要用于判定中不能点击重置按钮
|
||||
|
||||
const canvas1 = ref(null);
|
||||
const canvas2 = ref(null);
|
||||
const canvas3 = ref(null);
|
||||
const rangeSlider = ref(null);
|
||||
|
||||
// 计算属性
|
||||
const styleWidth = computed(() => {
|
||||
const w = startWidth.value + newX.value - startX.value;
|
||||
return w < sliderBaseSize.value ? sliderBaseSize.value : w > props.canvasWidth ? props.canvasWidth : w;
|
||||
});
|
||||
|
||||
const puzzleBaseSize = computed(() => {
|
||||
return Math.round(Math.max(Math.min(props.puzzleScale, 2), 0.2) * 52.5 + 6);
|
||||
});
|
||||
|
||||
const sliderBaseSize = computed(() => {
|
||||
return Math.max(Math.min(Math.round(props.sliderSize), Math.round(props.canvasWidth * 0.5)), 10);
|
||||
});
|
||||
const onMaskClick = () => {};
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', onRangeMouseMove, { passive: false });
|
||||
document.addEventListener('mouseup', onRangeMouseUp, { passive: false });
|
||||
document.addEventListener('touchmove', onRangeMouseMove, { passive: false });
|
||||
document.addEventListener('touchend', onRangeMouseUp, { passive: false });
|
||||
if (props.show) {
|
||||
document.body.classList.add('vue-puzzle-overflow');
|
||||
reset();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(timer1.value);
|
||||
document.removeEventListener('mousemove', onRangeMouseMove, { passive: false });
|
||||
document.removeEventListener('mouseup', onRangeMouseUp, { passive: false });
|
||||
document.removeEventListener('touchmove', onRangeMouseMove, { passive: false });
|
||||
document.removeEventListener('touchend', onRangeMouseUp, { passive: false });
|
||||
});
|
||||
|
||||
// 监听
|
||||
watch(
|
||||
() => props.show,
|
||||
(newV) => {
|
||||
if (newV) {
|
||||
document.body.classList.add('vue-puzzle-overflow');
|
||||
reset();
|
||||
} else {
|
||||
isSubmting.value = false;
|
||||
isSuccess.value = false;
|
||||
infoBoxShow.value = false;
|
||||
document.body.classList.remove('vue-puzzle-overflow');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 方法
|
||||
function onClose() {
|
||||
if (!mouseDown.value && !isSubmting.value) {
|
||||
clearTimeout(timer1.value);
|
||||
}
|
||||
}
|
||||
|
||||
// function onCloseMouseDown() {
|
||||
// closeDown.value = true;
|
||||
// init(true);
|
||||
// //给父组件传一个状态
|
||||
// emit('submit', 'F');
|
||||
// }
|
||||
|
||||
// function onCloseMouseUp() {
|
||||
// if (closeDown.value) {
|
||||
// onClose();
|
||||
// }
|
||||
// closeDown.value = false;
|
||||
// }
|
||||
|
||||
function onRangeMouseDown(e) {
|
||||
if (isCanSlide.value) {
|
||||
mouseDown.value = true;
|
||||
startWidth.value = rangeSlider.value.clientWidth;
|
||||
newX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
startX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function onRangeMouseMove(e) {
|
||||
if (mouseDown.value) {
|
||||
newX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function onRangeMouseUp() {
|
||||
if (mouseDown.value) {
|
||||
mouseDown.value = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
|
||||
function init(withCanvas) {
|
||||
if (loading.value && !withCanvas) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
isCanSlide.value = false;
|
||||
const c = canvas1.value;
|
||||
const c2 = canvas2.value;
|
||||
const c3 = canvas3.value;
|
||||
const ctx = c.getContext('2d', { willReadFrequently: true });
|
||||
const ctx2 = c2.getContext('2d', { willReadFrequently: true });
|
||||
const ctx3 = c3.getContext('2d', { willReadFrequently: true });
|
||||
const isFirefox = navigator.userAgent.indexOf('Firefox') >= 0 && navigator.userAgent.indexOf('Windows') >= 0; // 是windows版火狐
|
||||
const img = document.createElement('img');
|
||||
ctx.fillStyle = 'rgba(255,255,255,1)';
|
||||
ctx3.fillStyle = 'rgba(255,255,255,1)';
|
||||
ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
ctx2.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
|
||||
pinX.value = getRandom(puzzleBaseSize.value, props.canvasWidth - puzzleBaseSize.value - 20); // 留20的边距
|
||||
pinY.value = getRandom(20, props.canvasHeight - puzzleBaseSize.value - 20); // 主图高度 - 拼图块自身高度 - 20边距
|
||||
img.crossOrigin = 'anonymous'; // 匿名，想要获取跨域的图片
|
||||
img.onload = () => {
|
||||
const [x, y, w, h] = makeImgSize(img);
|
||||
ctx.save();
|
||||
paintBrick(ctx);
|
||||
ctx.closePath();
|
||||
if (!isFirefox) {
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowColor = '#000';
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.fill();
|
||||
ctx.clip();
|
||||
} else {
|
||||
ctx.clip();
|
||||
ctx.save();
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowColor = '#000';
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
ctx.drawImage(img, x, y, w, h);
|
||||
ctx3.fillRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
ctx3.drawImage(img, x, y, w, h);
|
||||
|
||||
ctx.globalCompositeOperation = 'source-atop';
|
||||
paintBrick(ctx);
|
||||
|
||||
ctx.arc(
|
||||
pinX.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
pinY.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
puzzleBaseSize.value * 1.2,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
true,
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, .8)';
|
||||
ctx.shadowOffsetX = -1;
|
||||
ctx.shadowOffsetY = -1;
|
||||
ctx.shadowBlur = Math.min(Math.ceil(8 * props.puzzleScale), 12);
|
||||
ctx.fillStyle = '#ffffaa';
|
||||
ctx.fill();
|
||||
|
||||
const imgData = ctx.getImageData(
|
||||
pinX.value - 3, // 为了阴影 是从-3px开始截取，判定的时候要+3px
|
||||
pinY.value - 20,
|
||||
pinX.value + puzzleBaseSize.value + 5,
|
||||
pinY.value + puzzleBaseSize.value + 5,
|
||||
);
|
||||
ctx2.putImageData(imgData, 0, pinY.value - 20);
|
||||
|
||||
ctx.restore();
|
||||
ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
|
||||
ctx.save();
|
||||
paintBrick(ctx);
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'source-atop';
|
||||
paintBrick(ctx);
|
||||
ctx.arc(
|
||||
pinX.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
pinY.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
puzzleBaseSize.value * 1.2,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
true,
|
||||
);
|
||||
ctx.shadowColor = '#ffffff';
|
||||
ctx.shadowOffsetX = 2;
|
||||
ctx.shadowOffsetY = 2;
|
||||
ctx.shadowBlur = 16;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.drawImage(img, x, y, w, h);
|
||||
ctx.restore();
|
||||
|
||||
loading.value = false;
|
||||
isCanSlide.value = true;
|
||||
};
|
||||
img.onerror = () => {
|
||||
init(true); // 如果图片加载错误就重新来，并强制用canvas随机作图
|
||||
};
|
||||
|
||||
if (!withCanvas && props.imgs && props.imgs.length) {
|
||||
let randomNum = getRandom(0, props.imgs.length - 1);
|
||||
if (randomNum === imgIndex.value) {
|
||||
if (randomNum === props.imgs.length - 1) {
|
||||
randomNum = 0;
|
||||
} else {
|
||||
randomNum++;
|
||||
}
|
||||
}
|
||||
imgIndex.value = randomNum;
|
||||
img.src = props.imgs[randomNum];
|
||||
} else {
|
||||
img.src = makeImgWithCanvas();
|
||||
}
|
||||
}
|
||||
|
||||
function getRandom(min, max) {
|
||||
return Math.ceil(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
function makeImgSize(img) {
|
||||
const imgScale = img.width / img.height;
|
||||
const canvasScale = props.canvasWidth / props.canvasHeight;
|
||||
let x = 0,
|
||||
y = 0,
|
||||
w = 0,
|
||||
h = 0;
|
||||
if (imgScale > canvasScale) {
|
||||
h = props.canvasHeight;
|
||||
w = imgScale * h;
|
||||
y = 0;
|
||||
x = (props.canvasWidth - w) / 2;
|
||||
} else {
|
||||
w = props.canvasWidth;
|
||||
h = w / imgScale;
|
||||
x = 0;
|
||||
y = (props.canvasHeight - h) / 2;
|
||||
}
|
||||
return [x, y, w, h];
|
||||
}
|
||||
|
||||
function paintBrick(ctx) {
|
||||
const moveL = Math.ceil(15 * props.puzzleScale); // 直线移动的基础距离
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pinX.value, pinY.value);
|
||||
ctx.lineTo(pinX.value + moveL, pinY.value);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL,
|
||||
pinY.value - moveL / 2,
|
||||
pinX.value + moveL + moveL / 2,
|
||||
pinY.value - moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(pinX.value + moveL + moveL, pinY.value - moveL / 2, pinX.value + moveL + moveL, pinY.value, moveL / 2);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value + moveL);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL,
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL + moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL + moveL,
|
||||
pinX.value + moveL + moveL + moveL,
|
||||
pinY.value + moveL + moveL,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value + moveL + moveL + moveL);
|
||||
ctx.lineTo(pinX.value, pinY.value + moveL + moveL + moveL);
|
||||
ctx.lineTo(pinX.value, pinY.value + moveL + moveL);
|
||||
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL / 2,
|
||||
pinY.value + moveL + moveL,
|
||||
pinX.value + moveL / 2,
|
||||
pinY.value + moveL + moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(pinX.value + moveL / 2, pinY.value + moveL, pinX.value, pinY.value + moveL, moveL / 2);
|
||||
ctx.lineTo(pinX.value, pinY.value);
|
||||
}
|
||||
|
||||
function makeImgWithCanvas() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||
canvas.width = props.canvasWidth;
|
||||
canvas.height = props.canvasHeight;
|
||||
ctx.fillStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
for (let i = 0; i < 12; i++) {
|
||||
ctx.fillStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
ctx.strokeStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
|
||||
if (getRandom(0, 2) > 1) {
|
||||
ctx.save();
|
||||
ctx.rotate((getRandom(-90, 90) * Math.PI) / 180);
|
||||
ctx.fillRect(
|
||||
getRandom(-20, canvas.width - 20),
|
||||
getRandom(-20, canvas.height - 20),
|
||||
getRandom(10, canvas.width / 2 + 10),
|
||||
getRandom(10, canvas.height / 2 + 10),
|
||||
);
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
const ran = getRandom(-Math.PI, Math.PI);
|
||||
ctx.arc(
|
||||
getRandom(0, canvas.width),
|
||||
getRandom(0, canvas.height),
|
||||
getRandom(10, canvas.height / 2 + 10),
|
||||
ran,
|
||||
ran + Math.PI * 1.5,
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
return canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
function submit() {
|
||||
isSubmting.value = true;
|
||||
|
||||
console.log('pinX.value:', pinX.value);
|
||||
console.log('styleWidth.value:', styleWidth.value);
|
||||
console.log('sliderBaseSize.value:', sliderBaseSize.value);
|
||||
console.log('puzzleBaseSize.value:', puzzleBaseSize.value);
|
||||
console.log('props.canvasWidth:', props.canvasWidth);
|
||||
|
||||
const x = Math.abs(
|
||||
pinX.value -
|
||||
(styleWidth.value - sliderBaseSize.value) +
|
||||
(puzzleBaseSize.value - sliderBaseSize.value) *
|
||||
((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)) -
|
||||
3,
|
||||
);
|
||||
|
||||
console.log('x:', x);
|
||||
|
||||
if (x < props.range) {
|
||||
infoText.value = props.successText;
|
||||
infoBoxFail.value = false;
|
||||
infoBoxShow.value = true;
|
||||
isCanSlide.value = false;
|
||||
isSuccess.value = false;
|
||||
clearTimeout(timer1.value);
|
||||
timer1.value = setTimeout(() => {
|
||||
isSubmting.value = false;
|
||||
verSuccess.value = true;
|
||||
emit('submit', 'F', verSuccess.value);
|
||||
reset();
|
||||
}, 800);
|
||||
} else {
|
||||
infoText.value = props.failText;
|
||||
infoBoxFail.value = true;
|
||||
infoBoxShow.value = true;
|
||||
isCanSlide.value = false;
|
||||
clearTimeout(timer1.value);
|
||||
timer1.value = setTimeout(() => {
|
||||
isSubmting.value = false;
|
||||
reset();
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
infoBoxFail.value = false;
|
||||
infoBoxShow.value = false;
|
||||
isCanSlide.value = false;
|
||||
isSuccess.value = false;
|
||||
startWidth.value = sliderBaseSize.value; // 鼠标点下去时父级的width
|
||||
startX.value = 0; // 鼠标按下时的X
|
||||
newX.value = 0; // 鼠标当前的偏移X
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (isSubmting.value) {
|
||||
return;
|
||||
}
|
||||
resetState();
|
||||
init();
|
||||
}
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PuzzleVerification',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vue-puzzle-vcode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 999;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transition: opacity 200ms;
|
||||
|
||||
&.show_ {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-auth-box_ {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
user-select: none;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.auth-body_ {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
|
||||
.info-box_ {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
background-color: #83ce3f;
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: all 200ms;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
|
||||
&.show {
|
||||
opacity: 0.95;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.fail {
|
||||
background-color: #ce594b;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-canvas2_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.auth-canvas3_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 600ms;
|
||||
z-index: 3;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flash_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
z-index: 3;
|
||||
|
||||
&.show {
|
||||
transition: transform 600ms;
|
||||
}
|
||||
}
|
||||
|
||||
.reset_ {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
transition: transform 200ms;
|
||||
transform: rotate(0deg);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-control_ {
|
||||
.range-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #f7f8fa;
|
||||
margin-top: 20px;
|
||||
border-radius: 3px;
|
||||
height: 48px;
|
||||
// box-shadow: inset -2px -2px 4px rgba(50, 130, 251, 0.1), inset 2px 2px 4px rgba(34, 73, 132, 0.2);
|
||||
border-radius: 4px;
|
||||
|
||||
.range-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
color: #b7bcd1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, #4d4d4d),
|
||||
color-stop(0.4, #4d4d4d),
|
||||
color-stop(0.5, white),
|
||||
color-stop(0.6, #4d4d4d),
|
||||
color-stop(1, #4d4d4d)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-animation: animate 1.5s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate {
|
||||
from {
|
||||
background-position: -100px;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
from {
|
||||
background-position: -100px;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
|
||||
.range-btn {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0px -2px 4px rgba(0, 36, 90, 0.2), inset 0px 2px 4px rgba(194, 219, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
|
||||
& > div {
|
||||
width: 0;
|
||||
height: 40%;
|
||||
transition: all 200ms;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
border: solid 1px #6aa0ff;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.isDown {
|
||||
& > div:first-child {
|
||||
border: solid 4px transparent;
|
||||
height: 0;
|
||||
border-right-color: #6aa0ff;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
border-width: 3px;
|
||||
height: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 6px;
|
||||
border-right-color: #6aa0ff;
|
||||
}
|
||||
|
||||
& > div:nth-child(3) {
|
||||
border: solid 4px transparent;
|
||||
height: 0;
|
||||
border-left-color: #6aa0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vue-puzzle-overflow {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
337
src/views/login/components/login-form/index.vue
Normal file
337
src/views/login/components/login-form/index.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<!-- eslint-disable vue/no-duplicate-attributes -->
|
||||
<template>
|
||||
<div class="flex items-center w-400 h-100%">
|
||||
<div class="w-full bg-#fff rounded-16px px-40px py-32px flex flex-col items-center">
|
||||
<img src="@/assets/img/icon-logo.png" alt="" width="144" height="36" class="mb-24px" />
|
||||
<Tabs v-model:activeKey="activeKey" class="mb-24px">
|
||||
<TabPane tab="密码登录" key="1" />
|
||||
<TabPane tab="短信登录" key="2" />
|
||||
</Tabs>
|
||||
<Form ref="formRef" :model="loginForm" :rules="formRules" class="w-320 form-wrap">
|
||||
<FormItem name="mobile">
|
||||
<Input v-model:value="loginForm.mobile" placeholder="请输入手机号" allowClear :maxlength="11" />
|
||||
</FormItem>
|
||||
<FormItem v-if="isCaptchaLogin" name="captcha" class="captcha-form-item">
|
||||
<Input v-model:value="loginForm.captcha" placeholder="请输入验证码" :maxlength="6">
|
||||
<template #suffix>
|
||||
<div class="w-79px flex justify-center whitespace-nowrap">
|
||||
<span
|
||||
class="color-#939499 font-family-regular text-16px font-400 lh-24px cursor-not-allowed"
|
||||
:class="{
|
||||
'!color-#6D4CFE': isLegalMobile || countdown > 0,
|
||||
'!cursor-pointer': canGetCaptcha,
|
||||
}"
|
||||
@click="getCode"
|
||||
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem v-else name="password" class="password-form-item">
|
||||
<Input.Password v-model:value="loginForm.password" placeholder="请输入密码">
|
||||
<template #iconRender="visible">
|
||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||
</template>
|
||||
</Input.Password>
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="mt-52px">
|
||||
<div class="text-12px flex justify-center items-center mb-16px">
|
||||
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
|
||||
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
|
||||
>登录即代表同意<span class="color-#6D4CFE"> 用户协议 </span>和<span class="color-#6D4CFE">
|
||||
隐私政策</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
class="w-full h-48 mb-8px !text-16px !font-500 !rounded-8px btn-login"
|
||||
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
|
||||
:disabled="disabledSubmitBtn"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
<div class="flex justify-between btn-row">
|
||||
<Button
|
||||
type="text"
|
||||
class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE"
|
||||
size="small"
|
||||
@click="onForgetPassword"
|
||||
>
|
||||
忘记密码？
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE"
|
||||
size="small"
|
||||
@click="onRegister"
|
||||
>
|
||||
注册
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PuzzleVerification
|
||||
:show="isVerificationVisible"
|
||||
@submit="handleVerificationSubmit"
|
||||
@cancel="isVerificationVisible = false"
|
||||
/>
|
||||
<SelectAccountModal ref="selectAccountModalRef" :mobileNumber="mobileNumber" :accounts="accounts" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Checkbox,
|
||||
Modal,
|
||||
Button,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Space,
|
||||
message,
|
||||
Typography,
|
||||
Card,
|
||||
List,
|
||||
Tabs,
|
||||
} from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
import PuzzleVerification from '../PuzzleVerification.vue';
|
||||
import SelectAccountModal from '../select-account-modal/index.vue';
|
||||
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo, postLoginPassword } from '@/api/all/login';
|
||||
import { joinEnterpriseByInviteCode } from '@/api/all';
|
||||
import { ref, reactive, onUnmounted, computed } from 'vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { handleUserLogin, goUserLogin } from '@/utils/user';
|
||||
import router from '@/router';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import icon1 from '@/assets/img/login/icon-close.png';
|
||||
import icon2 from '@/assets/img/login/icon-open.png';
|
||||
|
||||
const setPageType = inject('setPageType');
|
||||
|
||||
const formRef = ref();
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const countdown = ref(0);
|
||||
let timer = ref();
|
||||
const isLogin = ref(true);
|
||||
const isVerificationVisible = ref(false);
|
||||
const hasGetCode = ref(false);
|
||||
const submitting = ref(false);
|
||||
const hasCheck = ref(false);
|
||||
const mobileNumber = ref('');
|
||||
const selectAccountModalRef = ref(null);
|
||||
const accounts = ref([]);
|
||||
const activeKey = ref('1');
|
||||
const isLegalMobile = ref(false);
|
||||
|
||||
const loginForm = reactive({
|
||||
mobile: '',
|
||||
captcha: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const formRules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) {
|
||||
isLegalMobile.value = false;
|
||||
return Promise.reject('手机号不能为空');
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
isLegalMobile.value = false;
|
||||
return Promise.reject('手机号格式不正确');
|
||||
} else {
|
||||
isLegalMobile.value = true;
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入密码');
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return Promise.reject('密码长度不能小于6位');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入验证码');
|
||||
}
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
return Promise.reject('验证码必须是6位数字');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const isCaptchaLogin = computed(() => {
|
||||
return activeKey.value === '2';
|
||||
});
|
||||
const canGetCaptcha = computed(() => {
|
||||
return isLegalMobile.value && countdown.value === 0;
|
||||
});
|
||||
|
||||
const disabledSubmitBtn = computed(() => {
|
||||
if (isCaptchaLogin.value) {
|
||||
return !hasCheck.value || !isLegalMobile.value || !loginForm.captcha.trim() || !/^\d{6}$/.test(loginForm.captcha);
|
||||
}
|
||||
// 密码登录时的验证逻辑
|
||||
return !hasCheck.value || !isLegalMobile.value || !loginForm.password.trim();
|
||||
});
|
||||
|
||||
const validateField = (field: string) => {
|
||||
formRef.value.validateFields(field);
|
||||
};
|
||||
|
||||
const clearError = (field: string) => {
|
||||
formRef.value.clearValidate(field);
|
||||
};
|
||||
|
||||
const getCode = async () => {
|
||||
if (!canGetCaptcha.value) return;
|
||||
|
||||
formRef.value.validateFields('mobile').then(() => {
|
||||
isVerificationVisible.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
// 验证码验证通过后
|
||||
const handleVerificationSubmit = async () => {
|
||||
isVerificationVisible.value = false;
|
||||
startCountdown();
|
||||
|
||||
try {
|
||||
const { code, message: msg } = await fetchLoginCaptCha({ mobile: loginForm.mobile });
|
||||
if (code === 200) {
|
||||
message.success(msg);
|
||||
}
|
||||
} catch (error) {
|
||||
// 重置倒计时
|
||||
countdown.value = 0;
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取用户信息
|
||||
const getProfileInfo = async () => {
|
||||
const { code, data } = await fetchProfileInfo();
|
||||
if (code === 200) {
|
||||
let enterprises = data['enterprises'];
|
||||
mobileNumber.value = data['mobile'];
|
||||
accounts.value = enterprises;
|
||||
|
||||
if (enterprises.length > 0) {
|
||||
enterpriseStore.setEnterpriseInfo(data.enterprises[0]);
|
||||
if (enterprises.length === 1) {
|
||||
handleUserLogin();
|
||||
} else {
|
||||
// 多个企业时候需要弹窗让用户选择企业
|
||||
selectAccountModalRef.value.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
console.log('handleSubmit', disabledSubmitBtn.value);
|
||||
if (disabledSubmitBtn.value) return;
|
||||
|
||||
try {
|
||||
// 校验所有字段
|
||||
await formRef.value.validate();
|
||||
|
||||
if (!hasCheck.value) {
|
||||
message.error('请先勾选同意用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
const _fn = isCaptchaLogin.value ? fetchAuthorizationsCaptcha : postLoginPassword;
|
||||
const { code, data } = await _fn(loginForm);
|
||||
|
||||
if (code === 200) {
|
||||
// 处理登录成功逻辑
|
||||
message.success('登录成功');
|
||||
userStore.setToken(data.access_token);
|
||||
|
||||
const { invite_code } = route.query;
|
||||
if (invite_code) {
|
||||
const { code } = await joinEnterpriseByInviteCode(invite_code as string);
|
||||
if (code === 200) {
|
||||
message.success('加入企业成功');
|
||||
}
|
||||
}
|
||||
|
||||
getProfileInfo();
|
||||
}
|
||||
} catch (error) {
|
||||
// 错误信息会显示在输入框下方
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
countdown.value = 60;
|
||||
hasGetCode.value = true;
|
||||
timer.value = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer.value as number);
|
||||
timer.value = null;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const onForgetPassword = () => {
|
||||
setPageType('resetPasswordForm');
|
||||
};
|
||||
const onRegister = () => {
|
||||
console.log('onRegister');
|
||||
setPageType('registerForm');
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
34
src/views/login/components/login-form/style.scss
Normal file
34
src/views/login/components/login-form/style.scss
Normal file
@ -0,0 +1,34 @@
|
||||
:deep(.ant-tabs) {
|
||||
.ant-tabs-nav {
|
||||
padding: 0;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.ant-tabs-nav-list {
|
||||
.ant-tabs-tab {
|
||||
padding: 0 0 4px;
|
||||
.ant-tabs-tab-btn {
|
||||
color: #939499;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 26px;
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
.ant-tabs-tab-btn {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-ink-bar {
|
||||
border-radius: 4px;
|
||||
background: var(--Brand-6, #6d4cfe);
|
||||
width: 24px !important;
|
||||
height: 4px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
364
src/views/login/components/register-form/index.vue
Normal file
364
src/views/login/components/register-form/index.vue
Normal file
@ -0,0 +1,364 @@
|
||||
<!-- eslint-disable vue/no-duplicate-attributes -->
|
||||
<template>
|
||||
<div class="flex items-center w-400 h-100%">
|
||||
<div class="w-full bg-#fff rounded-16px px-40px py-32px flex flex-col items-center">
|
||||
<div class="flex items-center mb-24px w-full cursor-pointer" @click="onBack">
|
||||
<icon-left size="24" class="mr-4px color-#000" />
|
||||
<span class="color-#000 text-20px font-500 lh-28px font-family-medium">{{
|
||||
isResetPassword ? '重置密码' : '手机注册'
|
||||
}}</span>
|
||||
</div>
|
||||
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-320 form-wrap">
|
||||
<FormItem name="mobile">
|
||||
<Input v-model:value="formData.mobile" placeholder="请输入手机号" allowClear :maxlength="11" />
|
||||
</FormItem>
|
||||
<FormItem name="password" class="password-form-item">
|
||||
<Input.Password v-model:value="formData.password" placeholder="新密码">
|
||||
<template #iconRender="visible">
|
||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||
</template>
|
||||
</Input.Password>
|
||||
</FormItem>
|
||||
<FormItem name="confirm_password" class="password-form-item">
|
||||
<Input.Password v-model:value="formData.confirm_password" placeholder="密码确认">
|
||||
<template #iconRender="visible">
|
||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||
</template>
|
||||
</Input.Password>
|
||||
</FormItem>
|
||||
<FormItem name="captcha" class="captcha-form-item">
|
||||
<Input v-model:value="formData.captcha" placeholder="请输入验证码" :maxlength="6">
|
||||
<template #suffix>
|
||||
<div class="w-79px flex justify-center whitespace-nowrap">
|
||||
<span
|
||||
class="color-#939499 font-family-regular text-16px font-400 lh-24px cursor-not-allowed"
|
||||
:class="{
|
||||
'!color-#6D4CFE': (isPassPassword && isLegalMobile) || countdown > 0,
|
||||
'!cursor-pointer': canGetCaptcha,
|
||||
}"
|
||||
@click="getCode"
|
||||
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="mt-52px">
|
||||
<div class="text-12px flex justify-center items-center mb-16px">
|
||||
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
|
||||
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
|
||||
>登录即代表同意<span class="color-#6D4CFE"> 用户协议 </span>和<span class="color-#6D4CFE">
|
||||
隐私政策</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
class="w-full h-48 mb-8px !text-16px !font-500 !rounded-8px btn-login"
|
||||
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
|
||||
:disabled="disabledSubmitBtn"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ isResetPassword ? '重置' : '注册' }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PuzzleVerification
|
||||
:show="isVerificationVisible"
|
||||
@submit="handleVerificationSubmit"
|
||||
@cancel="isVerificationVisible = false"
|
||||
/>
|
||||
<SelectAccountModal ref="selectAccountModalRef" :mobileNumber="mobileNumber" :accounts="accounts" />
|
||||
</template>
|
||||
|
||||
<script setup lang="js">
|
||||
import {
|
||||
Checkbox,
|
||||
Modal,
|
||||
Button,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Space,
|
||||
message,
|
||||
Typography,
|
||||
Card,
|
||||
List,
|
||||
Tabs,
|
||||
} from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
import PuzzleVerification from '../PuzzleVerification.vue';
|
||||
import SelectAccountModal from '../select-account-modal/index.vue';
|
||||
import { postRegisterCaptcha,postForgetPasswordCaptcha, fetchProfileInfo, postRegister, postForgetPassword } from '@/api/all/login';
|
||||
import { joinEnterpriseByInviteCode } from '@/api/all';
|
||||
import { ref, reactive, onUnmounted, computed } from 'vue';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { handleUserLogin, goUserLogin } from '@/utils/user';
|
||||
import router from '@/router';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import icon1 from '@/assets/img/login/icon-close.png';
|
||||
import icon2 from '@/assets/img/login/icon-open.png';
|
||||
|
||||
const setPageType = inject('setPageType');
|
||||
const pageType = inject('pageType');
|
||||
|
||||
const formRef = ref();
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const countdown = ref(0);
|
||||
let timer = ref();
|
||||
const isLogin = ref(true);
|
||||
const isVerificationVisible = ref(false);
|
||||
const hasGetCode = ref(false);
|
||||
const submitting = ref(false);
|
||||
const hasCheck = ref(false);
|
||||
const mobileNumber = ref('');
|
||||
const selectAccountModalRef = ref(null);
|
||||
const accounts = ref([]);
|
||||
const isLegalMobile = ref(false);
|
||||
|
||||
const formData = ref({
|
||||
mobile: '',
|
||||
captcha: '',
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const formRules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
isLegalMobile.value = false;
|
||||
return Promise.reject('手机号不能为空');
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
isLegalMobile.value = false;
|
||||
return Promise.reject('手机号格式不正确');
|
||||
} else {
|
||||
isLegalMobile.value = true;
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入新密码');
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return Promise.reject('密码长度不能小于6位');
|
||||
}
|
||||
if(formData.value.confirm_password) {
|
||||
formRef.value.validateFields('confirm_password');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
confirm_password: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入密码确认');
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return Promise.reject('密码长度不能小于6位');
|
||||
}
|
||||
if (value !== formData.value.password) {
|
||||
return Promise.reject('确认密码与设置的密码不同');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入验证码');
|
||||
}
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
return Promise.reject('验证码必须是6位数字');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 重置密码
|
||||
const isResetPassword = computed(() => {
|
||||
return pageType.value === 'resetPasswordForm';
|
||||
});
|
||||
|
||||
const isPassPassword = computed(() => {
|
||||
return (
|
||||
formData.value.confirm_password &&
|
||||
formData.value.password &&
|
||||
formData.value.confirm_password === formData.value.password
|
||||
);
|
||||
});
|
||||
const canGetCaptcha = computed(() => {
|
||||
return isLegalMobile.value && countdown.value === 0 && isPassPassword.value;
|
||||
});
|
||||
|
||||
const disabledSubmitBtn = computed(() => {
|
||||
return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim();
|
||||
});
|
||||
|
||||
const validateField = (field) => {
|
||||
formRef.value.validateFields(field);
|
||||
};
|
||||
|
||||
const clearError = (field) => {
|
||||
formRef.value.clearValidate(field);
|
||||
};
|
||||
|
||||
const getCode = async () => {
|
||||
if (!canGetCaptcha.value) {
|
||||
if (!formData.value.mobile.trim()) {
|
||||
formRef.value.validateFields('mobile');
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
formRef.value.validateFields('mobile').then(() => {
|
||||
isVerificationVisible.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
// 验证码验证通过后
|
||||
const handleVerificationSubmit = async () => {
|
||||
isVerificationVisible.value = false;
|
||||
startCountdown();
|
||||
|
||||
try {
|
||||
const fn = isResetPassword.value ? postForgetPasswordCaptcha : postRegisterCaptcha;
|
||||
const { code, message: msg } = await fn({ mobile: formData.value.mobile });
|
||||
if (code === 200) {
|
||||
message.success(msg);
|
||||
}
|
||||
} catch (error) {
|
||||
// 重置倒计时
|
||||
countdown.value = 0;
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取用户信息
|
||||
const getProfileInfo = async () => {
|
||||
const { code, data } = await fetchProfileInfo();
|
||||
if (code === 200) {
|
||||
let enterprises = data['enterprises'];
|
||||
mobileNumber.value = data['mobile'];
|
||||
accounts.value = enterprises;
|
||||
|
||||
if (enterprises.length > 0) {
|
||||
enterpriseStore.setEnterpriseInfo(data.enterprises[0]);
|
||||
if (enterprises.length === 1) {
|
||||
setTimeout(() => {
|
||||
handleUserLogin();
|
||||
}, 1500);
|
||||
} else {
|
||||
selectAccountModalRef.value.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (disabledSubmitBtn.value) return;
|
||||
|
||||
try {
|
||||
// 校验所有字段
|
||||
await formRef.value.validate();
|
||||
|
||||
if (!hasCheck.value) {
|
||||
message.error('请先勾选同意用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
const _fn = isResetPassword.value ? postForgetPassword : postRegister;
|
||||
const { code, data } = await _fn(formData.value);
|
||||
|
||||
if (code === 200) {
|
||||
message.success(isResetPassword.value ? '重置成功' : '注册成功');
|
||||
// 注册成功后跳转登录页
|
||||
if(!isResetPassword.value) {
|
||||
setTimeout(() => {
|
||||
setPageType('loginForm');
|
||||
}, 1500);
|
||||
return;
|
||||
};
|
||||
|
||||
userStore.setToken(data.access_token);
|
||||
|
||||
const { invite_code } = route.query;
|
||||
if (invite_code) {
|
||||
const { code } = await joinEnterpriseByInviteCode(invite_code);
|
||||
if (code === 200) {
|
||||
message.success('加入企业成功');
|
||||
}
|
||||
}
|
||||
|
||||
getProfileInfo();
|
||||
}
|
||||
} catch (error) {
|
||||
// 错误信息会显示在输入框下方
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
setPageType('loginForm');
|
||||
};
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
countdown.value = 60;
|
||||
hasGetCode.value = true;
|
||||
timer.value = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer.value );
|
||||
timer.value = null;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
0
src/views/login/components/register-form/style.scss
Normal file
0
src/views/login/components/register-form/style.scss
Normal file
171
src/views/login/components/select-account-modal/index.vue
Normal file
171
src/views/login/components/select-account-modal/index.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<Modal v-model:open="visible" centered unmountOnClose @cancel="handleCancel">
|
||||
<template #title>
|
||||
<span style="text-align: left; width: 100%">选择账号</span>
|
||||
</template>
|
||||
<div class="account-bind-container">
|
||||
<Card :bordered="false" class="bind-card">
|
||||
<div class="bind-header">
|
||||
<Typography.Text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</Typography.Text>
|
||||
</div>
|
||||
|
||||
<List :bordered="false" :split="false" class="account-list">
|
||||
<List.Item
|
||||
v-for="(account, index) in accounts"
|
||||
:key="index"
|
||||
class="account-item"
|
||||
:class="{
|
||||
selected: selectedAccountIndex === index,
|
||||
'cursor-no-drop': account.status === 0,
|
||||
'cursor-pointer': account.status !== 0,
|
||||
}"
|
||||
@click="selectAccount(account, index)"
|
||||
>
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<Checkbox :checked="selectedAccountIndex === index" />
|
||||
<Typography.Text>{{ account.name || '-' }}</Typography.Text>
|
||||
</div>
|
||||
</template>
|
||||
</List.Item.Meta>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Card>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex">
|
||||
<Button type="primary" @click="handleOk">确定</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Checkbox, Modal, Button, message, Card, List, Typography } from 'ant-design-vue';
|
||||
|
||||
import { handleUserLogin } from '@/utils/user';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
|
||||
const props = defineProps({
|
||||
mobileNumber: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
accounts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
|
||||
const visible = ref(false);
|
||||
const selectedAccountIndex = ref(0);
|
||||
|
||||
const open = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const handleOk = async () => {
|
||||
visible.value = false;
|
||||
|
||||
handleUserLogin();
|
||||
};
|
||||
|
||||
const selectAccount = (account, index) => {
|
||||
if (account.status === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
enterpriseStore.setEnterpriseInfo(account);
|
||||
selectedAccountIndex.value = index;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.account-bind-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
||||
.bind-card {
|
||||
background-color: var(--color-bg-2);
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bind-header {
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.account-list {
|
||||
margin-top: 16px;
|
||||
|
||||
.account-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--color-border-2);
|
||||
box-shadow: 0 2px 4px 0 #b1b2b5;
|
||||
|
||||
&.selected {
|
||||
border-color: #6d4cfe;
|
||||
background-color: rgba(109, 76, 254, 0.1);
|
||||
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-item:deep(.arco-list-item-main) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.arco-list-item-actions) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox-checked .arco-checkbox-mask) {
|
||||
background-color: #6d4cfe;
|
||||
border-color: #6d4cfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user