localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

컬러,전화번호 중복체크

Browse Source
This commit is contained in:
dyhj625 2025-04-04 11:36:04 +09:00
parent c60bed282f
commit 5a60012ce6
1 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/mypage/MyPage.vue
View File

@ -15,13 +15,34 @@
</div> </div>
<div class="col-xl-12"> <div class="col-xl-12">
<div class="d-flex"> <div class="d-flex">
<UserFormInput title="입사일" name="entryDate" type="date" <div class="w-50 me-2">
:value="form.entryDate" @update:data="form.entryDate = $event" class="me-2 w-50" /> <UserFormInput
<FormSelect title="컬러" name="color" :is-row="false" :is-label="true" title="입사일"
:is-common="true" :is-color="true" :data="colorList" name="entryDate"
:value="form.color" @update:data="handleColorUpdate" class="w-50" /> type="date"
</div> :value="form.entryDate"
@update:data="form.entryDate = $event"
/>
</div>
<div class="d-flex flex-column w-50">
<FormSelect
title="컬러"
name="color"
:is-row="false"
:is-label="true"
:is-common="true"
:is-color="true"
:data="colorList"
:value="form.color"
@update:data="handleColorUpdate"
/>
<span v-if="colorDuplicated" class="text-red-500 invalid-feedback mt-1 d-block">
이미 사용 중인 컬러입니다.
</span>
</div>
</div>
<div class="d-flex"> <div class="d-flex">
<UserFormInput title="생년월일" name="birth" type="date" <UserFormInput title="생년월일" name="birth" type="date"
@ -36,9 +57,12 @@
<UserFormInput title="전화번호" name="phone" :value="form.phone" <UserFormInput title="전화번호" name="phone" :value="form.phone"
@update:data="form.phone = $event" @blur="checkPhoneDuplicate" @update:data="form.phone = $event" @blur="checkPhoneDuplicate"
:maxlength="11" @keypress="onlyNumber" /> :maxlength="11" @keypress="onlyNumber" />
<span v-if="phoneDuplicated" class="text-danger invalid-feedback mt-1 d-block">
이미 사용 중인 전화번호입니다.
</span>
<div class="d-flex mt-5"> <div class="d-flex mt-5">
<button type="submit" class="btn btn-primary w-100" :disabled="!isChanged"> <button type="submit" class="btn btn-primary w-100" :disabled="!isChanged || phoneDuplicated || colorDuplicated">
정보 수정 정보 수정
</button> </button>
</div> </div>
@ -133,19 +157,20 @@ const onlyNumber = (e) => {
const checkPhoneDuplicate = async () => { const checkPhoneDuplicate = async () => {
const res = await $api.get('/user/checkPhone', { params: { memberTel: form.value.phone } }); const res = await $api.get('/user/checkPhone', { params: { memberTel: form.value.phone } });
console.log(res.data)
phoneDuplicated.value = !res.data.data; phoneDuplicated.value = !res.data.data;
}; };
const handleColorUpdate = async (colorVal) => { const handleColorUpdate = async (colorVal) => {
if (colorVal !== originalData.value.color) {
const res = await $api.get('/user/checkColor', { params: { memberCol: colorVal } });
if (res.data.data) {
toastStore.onToast('이미 사용 중인 컬러입니다.', 'e');
form.value.color = originalData.value.color;
return;
}
}
form.value.color = colorVal; form.value.color = colorVal;
if (colorVal !== originalData.value.color) {
const res = await $api.get('/user/checkColor', {
params: { memberCol: colorVal }
});
colorDuplicated.value = res.data.data; // true면 중복
} else {
colorDuplicated.value = false;
}
}; };
const formatDate = (isoDate) => (isoDate ? isoDate.split('T')[0] : ''); const formatDate = (isoDate) => (isoDate ? isoDate.split('T')[0] : '');