添加滑块功能
This commit is contained in:
parent
1285cd2984
commit
022f1c1a15
|
|
@ -23,6 +23,7 @@ enum Api {
|
|||
GetPermCode = '/sys/permission/getPermCode',
|
||||
//新加的获取图形验证码的接口
|
||||
getInputCode = '/sys/randomImage',
|
||||
randomCode = '/sys/randomInputCode',
|
||||
//获取短信验证码的接口
|
||||
getCaptcha = '/sys/sms',
|
||||
//注册接口
|
||||
|
|
@ -114,6 +115,10 @@ export function getCodeInfo(currdatetime) {
|
|||
let url = Api.getInputCode + `/${currdatetime}`;
|
||||
return defHttp.get({ url: url });
|
||||
}
|
||||
export function randomCode(currdatetime) {
|
||||
let url = Api.randomCode + `/${currdatetime}`;
|
||||
return defHttp.get({ url: url });
|
||||
}
|
||||
/**
|
||||
* @description: 获取短信验证码
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -14,41 +14,49 @@ export const columns: BasicColumn[] = [
|
|||
title: '机构负责人',
|
||||
align: 'center',
|
||||
dataIndex: 'orgLeader',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '机构负责人电话',
|
||||
align: 'center',
|
||||
dataIndex: 'orgLeaderPhone',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '申请日期',
|
||||
align: 'center',
|
||||
dataIndex: 'createTime',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '房屋性质',
|
||||
align: 'center',
|
||||
dataIndex: 'orgPropertyType',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '面积',
|
||||
align: 'center',
|
||||
dataIndex: 'orgBuildingArea',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '审核意见',
|
||||
align: 'center',
|
||||
dataIndex: 'status_dictText',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '当前阶段',
|
||||
align: 'center',
|
||||
dataIndex: 'buildStatus_dictText',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '工单状态',
|
||||
align: 'center',
|
||||
dataIndex: 'workOrderStatus_dictText',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<a-col :span="24">
|
||||
<a-form-item label="机构所在地" v-bind="validateInfos.cityViewValue" id="OrgApplyInfoForm-cityViewValue"
|
||||
name="cityViewValue">
|
||||
{{formData.orgProvince_dictText}}
|
||||
{{cityViewValue}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
|
|
@ -179,9 +179,9 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-show="formData.status == '3'">
|
||||
<a-col :span="12" v-show="formData.status == '3' || formData.content">
|
||||
<a-form-item label="驳回原因" v-bind="validateInfos.content" id="OrgApplyInfoForm-content" name="content">
|
||||
<a-textarea :autosize="{ minRows: 3 }" maxlength="50" show-count v-model:value="formData.content"
|
||||
<a-textarea :autosize="{ minRows: 3 }" maxlength="50" show-count v-model:value="formData.content" :disabled="formData.status != '3'"
|
||||
allow-clear placeholder="请输入驳回原因"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
|
@ -195,16 +195,11 @@
|
|||
{{formData.auditTime}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="formData.auditBy">
|
||||
<a-form-item label="审核时间" v-bind="validateInfos.auditTime" id="OrgApplyInfoForm-auditTime">
|
||||
{{formData.auditTime}}
|
||||
<!-- <a-col :span="12" v-if="formData.auditBy">
|
||||
<a-form-item label="驳回原因" v-bind="validateInfos.content" id="OrgApplyInfoForm-content">
|
||||
{{formData.content}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12" v-if="formData.contractNote">
|
||||
<a-form-item label="审核内容" v-bind="validateInfos.contractNote" id="OrgApplyInfoForm-contractNote">
|
||||
{{formData.contractNote}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-col> -->
|
||||
<a-col :span="12" v-show="formData.contract">
|
||||
<a-form-item label="加盟合同" v-bind="validateInfos.contract" id="OrgApplyInfoForm-contract">
|
||||
<JUpload v-model:value="formData.contract" :maxCount="1" :buttonVisible="false" disabled="true" fileType="pdf"></JUpload>
|
||||
|
|
@ -226,17 +221,17 @@
|
|||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="回复附件" >
|
||||
<a-form-item label="反馈附件" >
|
||||
<JUpload v-model:value="formData.replyFile" :maxCount="1" :buttonVisible="false" disabled></JUpload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="回复时间" >
|
||||
<a-form-item label="反馈时间" >
|
||||
{{formData.replyTime?formData.replyTime.substring(0,10):""}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="回复内容" >
|
||||
<a-form-item label="反馈内容" >
|
||||
{{formData.replyContent}}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
|
@ -396,6 +391,7 @@ function edit(record) {
|
|||
}
|
||||
})
|
||||
var lsbl = tmpData.status;
|
||||
console.log("🚀 ~ edit ~ lsbl:", lsbl)
|
||||
if (tmpData.status != '2' && tmpData.status != '3') {
|
||||
tmpData.status = null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="container2">
|
||||
<a-form ref="formRef" layout="horizontal" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="审核意见" name="status" v-bind="validateInfos.status">
|
||||
<a-select v-model:value="formData.status" style="width: 200px" placeholder="请选择审核意见">
|
||||
<a-form-item label="审核结果" name="status" v-bind="validateInfos.status">
|
||||
<a-select v-model:value="formData.status" style="width: 200px" placeholder="请选择审核结果">
|
||||
<a-select-option value="modifyPass">审核通过</a-select-option>
|
||||
<a-select-option value="modifyFail">审核驳回</a-select-option>
|
||||
</a-select>
|
||||
|
|
@ -121,6 +121,7 @@ const filteredTableData = computed(() => {
|
|||
&& item.d1 !== 'handleBy'
|
||||
&& item.d1 !== 'workOrderStatus'
|
||||
&& item.d1 !== 'workOrderId'
|
||||
&& item.d1 !== 'auditBy'
|
||||
|
||||
);
|
||||
});
|
||||
|
|
@ -221,7 +222,7 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.container2 {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,10 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="aui-inputClear">
|
||||
<div >
|
||||
<huakuai @verifySuccess="checkInputCode"/>
|
||||
</div>
|
||||
<!-- <div class="aui-inputClear">
|
||||
<a-row>
|
||||
<a-col :span="2">
|
||||
<span style="margin-top: 10px;display: block;"><img :src="icon3Img" alt="验证码" style="width: 20px;" /></span>
|
||||
|
|
@ -70,7 +73,7 @@
|
|||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
|
@ -92,7 +95,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="login-mini">
|
||||
import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
|
||||
import { getCaptcha, randomCode } from '/@/api/sys/user';
|
||||
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
|
||||
import codeImg from '/@/assets/images/checkcode.png';
|
||||
import { Rule } from '/@/components/Form';
|
||||
|
|
@ -115,6 +118,7 @@
|
|||
import { useAppInject } from "/@/hooks/web/useAppInject";
|
||||
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
|
||||
import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
|
||||
import huakuai from './huakuai.vue';
|
||||
import { useModal } from "@/components/Modal";
|
||||
import { ExceptionEnum } from "@/enums/exceptionEnum";
|
||||
|
||||
|
|
@ -133,6 +137,7 @@
|
|||
checkKey: null,
|
||||
});
|
||||
const rememberMe = ref<string>('0');
|
||||
const huakuaiOpen = ref<boolean>(false);
|
||||
//手机号登录还是账号登录
|
||||
const activeIndex = ref<string>('accountLogin');
|
||||
const type = ref<string>('login');
|
||||
|
|
@ -178,12 +183,19 @@
|
|||
formData.inputCode = '';
|
||||
|
||||
randCodeData.checkKey = 1629428467008;
|
||||
getCodeInfo(randCodeData.checkKey).then((res) => {
|
||||
randomCode(randCodeData.checkKey).then((res) => {
|
||||
console.log("🚀 ~ handleChangeCheckCode ~ res:", res)
|
||||
randCodeData.randCodeImage = res;
|
||||
randCodeData.requestCodeSuccess = true;
|
||||
formData.inputCode = res;
|
||||
});
|
||||
}
|
||||
|
||||
function checkInputCode(type){
|
||||
console.log("🚀 ~ checkCode ~ checkCode:",type)
|
||||
handleChangeCheckCode();
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换登录方式
|
||||
*/
|
||||
|
|
@ -372,7 +384,7 @@
|
|||
|
||||
onMounted(() => {
|
||||
//加载验证码
|
||||
handleChangeCheckCode();
|
||||
// handleChangeCheckCode();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<!-- 滑动验证码容器 -->
|
||||
<div class="slider-container" ref="containerRef">
|
||||
<!-- 滑动遮罩层，显示滑动进度 -->
|
||||
<div class="slider-mask" :style="{ width: sliderMaskWidth }" />
|
||||
<!-- 滑块按钮 -->
|
||||
<div
|
||||
class="slider"
|
||||
ref="sliderRef"
|
||||
@mousedown="handleDragStart"
|
||||
:class="{ 'slider-success': verified }"
|
||||
:style="{ left: sliderLeft }"
|
||||
>
|
||||
<!-- 滑块图标 -->
|
||||
<Icon icon="ant-design:double-right-outlined" :size="20" />
|
||||
</div>
|
||||
<!-- 提示文本 -->
|
||||
<div class="slider-text" :class="{ 'slider-text-success': verified }">
|
||||
{{ verified ? "验证通过" : "将滑块拖动至右侧完成验证" }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineEmits, onUnmounted } from "vue"
|
||||
|
||||
const emit = defineEmits(["verifySuccess"])
|
||||
|
||||
// DOM 引用
|
||||
const containerRef = ref<HTMLElement | null>(null) // 容器元素引用
|
||||
const sliderRef = ref<HTMLElement | null>(null) // 滑块元素引用
|
||||
|
||||
// 状态变量
|
||||
const sliderLeft = ref("0px") // 滑块左侧位置
|
||||
const sliderMaskWidth = ref("0px") // 遮罩层宽度
|
||||
const verified = ref(false) // 验证状态
|
||||
|
||||
// 拖动相关变量
|
||||
let startX = 0 // 开始拖动时的 X 坐标
|
||||
let sliderLeft_temp = 0 // 临时存储滑块位置
|
||||
|
||||
/**
|
||||
* 开始拖动处理
|
||||
* @param e 鼠标事件对象
|
||||
*/
|
||||
const handleDragStart = (e: MouseEvent) => {
|
||||
if (verified.value) return // 如果已验证通过，不再处理
|
||||
startX = e.clientX
|
||||
sliderLeft_temp = parseInt(sliderLeft.value)
|
||||
// 添加鼠标移动和松开事件监听
|
||||
document.addEventListener("mousemove", handleDragMove)
|
||||
document.addEventListener("mouseup", handleDragEnd)
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖动过程处理
|
||||
* @param e 鼠标事件对象
|
||||
*/
|
||||
const handleDragMove = (e: MouseEvent) => {
|
||||
if (verified.value) return
|
||||
const container = containerRef.value
|
||||
if (!container) return
|
||||
|
||||
// 计算拖动距离
|
||||
const diff = e.clientX - startX
|
||||
const containerWidth = container.offsetWidth
|
||||
const sliderWidth = sliderRef.value?.offsetWidth || 0
|
||||
const maxLeft = containerWidth - sliderWidth
|
||||
|
||||
// 计算新位置并限制范围
|
||||
let newLeft = sliderLeft_temp + diff
|
||||
if (newLeft < 0) newLeft = 0
|
||||
if (newLeft > maxLeft) newLeft = maxLeft
|
||||
|
||||
// 更新滑块和遮罩层位置
|
||||
sliderLeft.value = newLeft + "px"
|
||||
sliderMaskWidth.value = newLeft + sliderWidth / 2 + "px"
|
||||
|
||||
// 检查是否验证成功
|
||||
if (newLeft === maxLeft) {
|
||||
verified.value = true
|
||||
emit("verifySuccess", true) // 触发验证成功
|
||||
handleDragEnd()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束拖动处理
|
||||
*/
|
||||
const handleDragEnd = () => {
|
||||
if (!verified.value) {
|
||||
// 如果未验证成功，重置位置
|
||||
sliderLeft.value = "0px"
|
||||
sliderMaskWidth.value = "0px"
|
||||
}
|
||||
// 移除事件监听
|
||||
document.removeEventListener("mousemove", handleDragMove)
|
||||
document.removeEventListener("mouseup", handleDragEnd)
|
||||
}
|
||||
|
||||
// 组件卸载时清理事件监听
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("mousemove", handleDragMove)
|
||||
document.removeEventListener("mouseup", handleDragEnd)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 滑动验证码容器样式 */
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 滑动遮罩层样式 */
|
||||
.slider-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #d1e9fc;
|
||||
border-radius: 8px;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
/* 滑块按钮样式 */
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 42px;
|
||||
background: #e1dede;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 验证成功时滑块样式 */
|
||||
.slider-success {
|
||||
background-color: #1ea0fa;
|
||||
}
|
||||
|
||||
/* 提示文本样式 */
|
||||
.slider-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #9cb3c5;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 验证成功时文本样式 */
|
||||
.slider-text-success {
|
||||
color: #1ea0fa;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue