Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] 동의서 직접 등록 및 수정 #22

Merged
merged 2 commits into from
Jul 31, 2024
Merged

[feat] 동의서 직접 등록 및 수정 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac6766a
[K5P-70] [feat] 동의서 등록 및 수정 기능 추가
Koneweekk Jul 31, 2024
18f40de
Merge branch 'dev' into K5P-70/feat/자동결제
Koneweekk Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/assets/scss/contract/choose-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
position: relative;
width: 100%;
min-width: 800px;
height: 100%;
}

.right-side-header {
Expand Down
127 changes: 127 additions & 0 deletions src/components/consent/modal/ConsentCreateModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<template>
<transition name="fade">
<div v-if="isVisible" class="modal-overlay">
<div class="modal-content">
<ModalHeaderVue :title="title" :closeModal="closeModal" />
<div class="modal-main">
<div class="img-box" @click="triggerFileInput">
<span v-if="!imgSrc">이미지 업로드</span>
<img v-else :src="imgSrc" alt="Uploaded Image" />
</div>
<input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
<span class="file-guide">※ 동의 서명 이미지 파일을 등록해주세요</span>
<InfoInputVue title="계좌 소유주" v-model="owner" />
<InfoInputVue title="은행" v-model="bank" />
<InfoInputVue title="계좌 번호" v-model="number" />
</div>
<ModalFooterVue :title="title" :errorMsg="errorMsg" :func="createConsent" />
</div>
</div>
</transition>
</template>

<script>
import ModalHeaderVue from '@/components/common/modal/ModalHeader.vue';
import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
import InfoInputVue from '@/components/common/input/InfoInput.vue';
import { createConsent } from '@/utils/consent';
import { mapStores } from 'pinia';
import { useContractDetailStore } from '@/stores/contract/contractDetail';

export default {
name: 'ConsentCreateModalVue',
components: {
ModalHeaderVue,
ModalFooterVue,
InfoInputVue,
},
props: {
'isVisible': Boolean,
'closeModal': Function,
},
data() {
return {
title: '동의서 등록',
errorMsg: '',
owner: '',
bank: '',
number: '',
imgFile: null,
imgSrc: null
}
},
computed: {
...mapStores(useContractDetailStore)
},
methods: {
// 이미지 업로드
triggerFileInput() {
this.$refs.fileInput.click();
},
// 이미지 등록
onImageChange(event) {
const file = event.target.files[0];
if (file) {
this.imgFile = file;
const reader = new FileReader();
reader.onload = (e) => {
this.imgSrc = e.target.result;
};
reader.readAsDataURL(file);
}

},
// 동의서 등록
async createConsent() {
if (this.imgFile === null) {
this.errorMsg = '동의서 서명 파일을 등록해주세요';
return;
}

const data = {
owner: this.owner,
bank: this.bank,
number: this.number,
};

const result = await createConsent(
this.contractDetailStore.data.member.id,
data,
this.imgFile);

if (result.code === 200) {
this.closeModal();
} else {
this.errorMsg = result.message;
}
},
},
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/component/modal.scss';

.file-guide {
color: $input-color;
font-weight: bold;
}

.img-box {
@include flex-box(row, center, 0px);
@include base-icon;
width: 250px;
height: 250px;
border: $theme-color solid 3px;
border-radius: 10px;
overflow: hidden;
font-size: 20px;
font-weight: bold;

img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
</style>
145 changes: 145 additions & 0 deletions src/components/consent/modal/ConsentUpdateModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<template>
<transition name="fade">
<div v-if="isVisible" class="modal-overlay">
<div class="modal-content">
<ModalHeaderVue :title="title" :closeModal="closeModal" />
<div class="modal-main">
<div class="img-box" @click="triggerFileInput">
<span v-if="!imgSrc">이미지 업로드</span>
<img v-else :src="imgSrc" alt="Uploaded Image" />
</div>
<input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
<span class="file-guide">※ 동의 서명 이미지 파일을 등록해주세요</span>
<InfoInputVue title="계좌 소유주" v-model="owner" />
<InfoInputVue title="은행" v-model="bank" />
<InfoInputVue title="계좌 번호" v-model="number" />
</div>
<ModalFooterVue :title="title" :errorMsg="errorMsg" :func="createConsent" />
</div>
</div>
</transition>
</template>

<script>
import ModalHeaderVue from '@/components/common/modal/ModalHeader.vue';
import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
import InfoInputVue from '@/components/common/input/InfoInput.vue';
import { editConsent, editConsentImage } from '@/utils/consent';
import { mapStores } from 'pinia';
import { useContractDetailStore } from '@/stores/contract/contractDetail';
import { useConsentDetailStore } from '@/stores/contract/consentDetail';

export default {
name: 'ConsentUpdateModalVue',
components: {
ModalHeaderVue,
ModalFooterVue,
InfoInputVue,
},
props: {
'isVisible': Boolean,
'closeModal': Function,
},
data() {
return {
title: '동의서 수정',
errorMsg: '',
owner: '',
bank: '',
number: '',
imgFile: null,
imgSrc: null
}
},
computed: {
...mapStores(useContractDetailStore),
...mapStores(useConsentDetailStore)
},
watch: {
isVisible(newVal) {
if (newVal) this.showData();
},
},
methods: {
// 현재 데이터 표시
async showData() {
this.owner = this.consentDetailStore.data.owner;
this.bank = this.consentDetailStore.data.bank;
this.number = this.consentDetailStore.data.number;
this.imgSrc = this.consentDetailStore.data.signUrl;
},
// 이미지 업로드
triggerFileInput() {
this.$refs.fileInput.click();
},
// 이미지 등록
onImageChange(event) {
const file = event.target.files[0];
if (file) {
this.imgFile = file;
const reader = new FileReader();
reader.onload = (e) => {
this.imgSrc = e.target.result;
};
reader.readAsDataURL(file);
}

},
// 동의서 등록
async createConsent() {
let isSuccess = true;

const data = {
owner: this.owner,
bank: this.bank,
number: this.number,
};

let result = await editConsent(this.contractDetailStore.data.member.id, data);
if (result.code !== 200) {
this.errorMsg = result.message;
isSuccess = false;
}

if (this.imgFile !== null) {
result = await editConsentImage(this.contractDetailStore.data.member.id, this.imgFile);
if (result.code !== 200) {
this.errorMsg = result.message;
isSuccess = false;
}
}

if (isSuccess) {
this.closeModal();
}
},
},
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/component/modal.scss';

.file-guide {
color: $input-color;
font-weight: bold;
}

.img-box {
@include flex-box(row, center, 0px);
@include base-icon;
width: 250px;
height: 250px;
border: $theme-color solid 3px;
border-radius: 10px;
overflow: hidden;
font-size: 20px;
font-weight: bold;

img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
</style>
8 changes: 4 additions & 4 deletions src/components/contract/ContractCreateInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
<TitleInfoVue title="납부 기한" :info="`${contractCreateStore.paymentDueCycle} 일`" />
</div>
<div class="double-info">
<TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscription.name" />
<TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceType.name" />
<TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscriptionName" />
<TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceTypeName" />
</div>
<div class="double-info">
<TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentType.name" />
<TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsent.name" />
<TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentTypeName" />
<TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsentName" />
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/contract/ContractEditInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
<TitleInfoVue title="납부 기한" :info="`${contractCreateStore.paymentDueCycle} 일`" />
</div>
<div class="double-info">
<TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscription.name" />
<TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceType.name" />
<TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscriptionName" />
<TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceTypeName" />
</div>
<div class="double-info">
<TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentType.name" />
<TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsent.name" />
<TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentTypeName" />
<TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsentName" />
</div>
</div>
</div>
Expand Down
8 changes: 0 additions & 8 deletions src/components/contract/ContractInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
<script>
import { mapStores } from 'pinia';
import { useContractDetailStore } from '@/stores/contract/contractDetail';
import { getContract } from '@/utils/contract';
import { toDateFromDateTime } from '@/utils/date';
import TitleInfoVue from '../common/info/TitleInfo.vue';

Expand All @@ -73,13 +72,6 @@ export default {
return toDateFromDateTime(this.contractDetailStore.data.updatedAt);
},
},
async created() {
const result = await getContract(this.$route.params.id);
if (result.code !== 200) {
// 예외 처리
}
}

}
</script>

Expand Down
Loading
Loading