first commit

src/views/Promotion/Push.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>푸시메시지 발송</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-text-field
+        v-model="account_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="account_id.length > 0">
+              발송대상(회원번호): {{ send_account_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-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,
+      account_id: '',
+      send_account_id: [],
+      title: '',
+      message: ''
+    }
+  },
+
+  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.account_id.length > 0) {
+          this.send_account_id = Array.from(
+            new Set(
+              this.account_id.split(",")
+                .map(accountId => accountId.trim())
+                .filter(accountId => Number(accountId))
+            )
+          )
+        }
+        this.show_confirm = true
+      }
+    },
+
+    cancel() {
+      this.show_confirm = false
+    },
+
+    async send() {
+      if (!this.isLoading) {
+        this.isLoading = true
+
+        try {
+          await api.sendPush(
+            this.send_account_id,
+            this.title,
+            this.message
+          )
+        } finally {
+          this.isLoading = false
+          this.show_confirm = false
+          this.account_id = ''
+          this.send_account_id = []
+          this.title = ''
+          this.message = ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>