feat: input、textare组件替换
This commit is contained in:
rd
@ -19,28 +19,25 @@
|
||||
<span class="text-4 color-#737478">AI营销工具</span>
|
||||
<Form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
|
||||
<FormItem name="mobile">
|
||||
<a-input
|
||||
v-model="loginForm.mobile"
|
||||
<Input
|
||||
v-model:value="loginForm.mobile"
|
||||
placeholder="输入手机号"
|
||||
class="form-input border border-solid border-#d7d7d9 x w-100% h-48px text-14 rounded-4px color-#333 bg-#fff"
|
||||
class="form-input border border-solid !border-#d7d7d9 w-100% h-48px !text-14px rounded-4px color-#333 bg-#fff"
|
||||
clearable
|
||||
allow-clear
|
||||
@blur="validateField('mobile')"
|
||||
@input="clearError('mobile')"
|
||||
allowClear
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="captcha">
|
||||
<div
|
||||
class="form-input border border-solid border-#d7d7d9 w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center"
|
||||
class="form-input border border-solid !border-#d7d7d9 w-100% h-48px !text-14px rounded-4px color-#333 bg-#fff flex justify-between items-center"
|
||||
>
|
||||
<a-input
|
||||
v-model="loginForm.captcha"
|
||||
<Input
|
||||
v-model:value="loginForm.captcha"
|
||||
placeholder="验证码"
|
||||
style="background-color: #fff; border: none"
|
||||
allow-clear
|
||||
style="background-color: #fff; border: none !important;"
|
||||
allowClear
|
||||
class="form-input"
|
||||
maxlength="6"
|
||||
@blur="validateField('captcha')"
|
||||
@input="clearError('captcha')"
|
||||
/>
|
||||
<span
|
||||
class="w-120 font-400 text-right mr-4 text-16px"
|
||||
@ -128,7 +125,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Checkbox, Modal, Button, Form, FormItem } from 'ant-design-vue';
|
||||
import { Checkbox, Modal, Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import PuzzleVerification from './components/PuzzleVerification.vue';
|
||||
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
|
||||
import { joinEnterpriseByInviteCode } from '@/api/all';
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
.login-wrap {
|
||||
.arco-input-wrapper,
|
||||
.arco-select-view-single,
|
||||
.arco-textarea-wrapper,
|
||||
.arco-picker,
|
||||
.arco-select-view-multiple {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9 !important;
|
||||
background-color: #fff !important;
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
// border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
// :deep(.ant-input),
|
||||
// .arco-select-view-single,
|
||||
// .arco-textarea-wrapper,
|
||||
// .arco-picker,
|
||||
// .arco-select-view-multiple {
|
||||
// border-color: #d7d7d9 !important;
|
||||
// background-color: #fff !important;
|
||||
// &:focus-within,
|
||||
// &.arco-input-focus {
|
||||
// background-color: var(--color-bg-2);
|
||||
// // border-color: rgb(var(--primary-6));
|
||||
// box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
// }
|
||||
// }
|
||||
:deep(.ant-form) {
|
||||
color: red !important;
|
||||
.ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.login-bg {
|
||||
|
||||
@ -30,13 +30,14 @@
|
||||
</p>
|
||||
<Form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="form"
|
||||
:label-col-props="{ span: 6, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 18, offset: 0 }"
|
||||
label-align="left"
|
||||
>
|
||||
<FormItem required name="name" label="新企业名称">
|
||||
<a-input v-model.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
|
||||
<Input v-model:value.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
@ -44,7 +45,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Form, FormItem } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import Container from '@/components/container.vue';
|
||||
import Modal from '@/components/modal.vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
@ -57,6 +58,16 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入新企业名称',
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const enterpriseInfo = computed(() => {
|
||||
return store.enterpriseInfo ?? {};
|
||||
});
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
<Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
|
||||
<Form
|
||||
class="form"
|
||||
:rules="rules"
|
||||
:model="userInfoForm"
|
||||
:label-col-props="{ span: 3, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 21, offset: 0 }"
|
||||
@ -42,7 +43,7 @@
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem name="name" label="昵称">
|
||||
<a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
|
||||
<Input v-model:value="userInfoForm.name" placeholder="请输入昵称" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
@ -55,20 +56,20 @@
|
||||
:model="form"
|
||||
class="form"
|
||||
:rules="formRules"
|
||||
:label-col-props="{ span: 5, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 19, offset: 0 }"
|
||||
label-align="left"
|
||||
labelAlign="right"
|
||||
:labelCol="{ span: 4 }"
|
||||
:wrapperCol="{ span: 20 }"
|
||||
>
|
||||
<FormItem required name="mobile" label="新手机号">
|
||||
<a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
|
||||
<Input v-model:value="form.mobile" size="small" placeholder="请输入新的手机号" />
|
||||
</FormItem>
|
||||
<FormItem required name="captcha" label="获取验证码">
|
||||
<a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
|
||||
<Input v-model:value="form.captcha" size="small" placeholder="请输入验证码">
|
||||
<template #suffix>
|
||||
<span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
|
||||
<span v-else>{{ countdown }}s</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<PuzzleVerification
|
||||
@ -80,7 +81,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Form, FormItem } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import Container from '@/components/container.vue';
|
||||
import Modal from '@/components/modal.vue';
|
||||
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';
|
||||
@ -125,35 +126,32 @@ const dataSource = computed(() => {
|
||||
const formRules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value: string, callback: (error?: string) => void) => {
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请填写手机号');
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
return Promise.reject('手机号格式不正确');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写验证码',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value: string, callback: (error?: string) => void) => {
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
callback('验证码必须是6位数字');
|
||||
} else {
|
||||
callback();
|
||||
validator: (rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请填写验证码');
|
||||
}
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
return Promise.reject('验证码必须是6位数字');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user