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 class="col-xl-12">
<div class="d-flex">
<UserFormInput title="입사일" name="entryDate" type="date"
:value="form.entryDate" @update:data="form.entryDate = $event" class="me-2 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" class="w-50" />
</div>
<div class="d-flex">
<div class="w-50 me-2">
<UserFormInput
title="입사일"
name="entryDate"
type="date"
: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">
<UserFormInput title="생년월일" name="birth" type="date"
@ -36,9 +57,12 @@
<UserFormInput title="전화번호" name="phone" :value="form.phone"
@update:data="form.phone = $event" @blur="checkPhoneDuplicate"
:maxlength="11" @keypress="onlyNumber" />
<span v-if="phoneDuplicated" class="text-danger invalid-feedback mt-1 d-block">
이미 사용 중인 전화번호입니다.
</span>
<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>
</div>
@ -133,19 +157,20 @@ const onlyNumber = (e) => {
const checkPhoneDuplicate = async () => {
const res = await $api.get('/user/checkPhone', { params: { memberTel: form.value.phone } });
console.log(res.data)
phoneDuplicated.value = !res.data.data;
};
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;
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] : '');