sodalive-vuejs-admin/src/views/Promotion/Push.vue

225 lines
4.9 KiB
Vue

<template>
<div>
<v-toolbar dark>
<v-spacer />
<v-toolbar-title>푸시메시지 발송</v-toolbar-title>
<v-spacer />
</v-toolbar>
<br>
<v-container>
<v-row class="is-auth">
<v-col cols="6" />
<v-col cols="6">
<v-row>
<v-col>
<input
id="no-auth"
v-model="isAuth"
type="radio"
value="false"
>
<label for="no-auth">
본인인증을 하지 않은 유저만
</label>
</v-col>
<v-col>
<input
id="auth"
v-model="isAuth"
type="radio"
value="true"
>
<label for="auth">
본인인증을 한 유저만
</label>
</v-col>
<v-col>
<input
id="both"
v-model="isAuth"
type="radio"
value=""
>
<label for="both">
모두
</label>
</v-col>
</v-row>
</v-col>
</v-row>
<v-text-field
v-model="member_id"
label="회원번호(입력하지 않으면 전체회원에게 발송)"
outlined
required
/>
<v-text-field
v-model="title"
label="제목"
outlined
required
/>
<v-textarea
v-model="message"
label="내용"
outlined
required
/>
<v-row>
<v-col cols="10" />
<v-col>
<v-btn
block
color="#9970ff"
dark
depressed
@click="confirm"
>
메시지 발송
</v-btn>
</v-col>
</v-row>
<v-row>
<v-dialog
v-model="show_confirm"
max-width="400px"
persistent
>
<v-card>
<v-card-title>푸시메시지 발송 확인</v-card-title>
<v-card-text v-if="member_id.length > 0">
발송대상(회원번호): {{ send_member_id }}
</v-card-text>
<v-card-text v-else>
발송대상(회원번호): 전체
</v-card-text>
<v-card-text>
제목: {{ title }}
</v-card-text>
<v-card-text>
내용: {{ message }}
</v-card-text>
<v-card-text>
본인인증 여부: {{ isAuth === 'true' ? 'O' : isAuth === 'false' ? 'X' : '모두' }}
</v-card-text>
<v-card-actions v-show="!isLoading">
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="send"
>
발송
</v-btn>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="cancel"
>
취소
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</v-container>
</div>
</template>
<script>
import * as api from '@/api/push'
export default {
name: "Push",
data() {
return {
show_confirm: false,
isLoading: false,
member_id: '',
send_member_id: [],
title: '',
message: '',
isAuth: ''
}
},
methods: {
notifyError(message) {
this.$dialog.notify.error(message)
},
notifySuccess(message) {
this.$dialog.notify.success(message)
},
confirm() {
if (this.title.trim() === '') {
return this.notifyError('제목을 입력하세요')
}
if (this.message.trim() === '') {
return this.notifyError('내용을 입력하세요')
}
if (!this.isLoading) {
if (this.member_id.length > 0) {
this.send_member_id = Array.from(
new Set(
this.member_id.split(",")
.map(memberId => memberId.trim())
.filter(memberId => Number(memberId))
)
)
}
this.show_confirm = true
}
},
cancel() {
this.show_confirm = false
},
async send() {
if (!this.isLoading) {
this.isLoading = true
try {
await api.sendPush(
this.send_member_id,
this.title,
this.message,
this.isAuth
)
} finally {
this.isLoading = false
this.show_confirm = false
this.member_id = ''
this.send_member_id = []
this.title = ''
this.message = ''
this.isAuth = ''
}
}
}
}
}
</script>
<style scoped>
.is-auth {
margin-top: 10px;
margin-bottom: 10px;
}
</style>