first commit
This commit is contained in:
Yu Sung
commit
c60930a566
|
|
@ -0,0 +1,2 @@
|
||||||
|
VUE_APP_API_URL=https://test-api.sodalive.net
|
||||||
|
NODE_ENV=development
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
VUE_APP_API_URL=https://api.sodalive.net
|
||||||
|
NODE_ENV=production
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
|
||||||
|
# Created by https://www.toptal.com/developers/gitignore/api/webstorm,visualstudiocode,vuejs,macos,windows
|
||||||
|
# Edit at https://www.toptal.com/developers/gitignore?templates=webstorm,visualstudiocode,vuejs,macos,windows
|
||||||
|
|
||||||
|
### macOS ###
|
||||||
|
# General
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
|
|
||||||
|
# Icon must end with two \r
|
||||||
|
Icon
|
||||||
|
|
||||||
|
|
||||||
|
# Thumbnails
|
||||||
|
._*
|
||||||
|
|
||||||
|
# Files that might appear in the root of a volume
|
||||||
|
.DocumentRevisions-V100
|
||||||
|
.fseventsd
|
||||||
|
.Spotlight-V100
|
||||||
|
.TemporaryItems
|
||||||
|
.Trashes
|
||||||
|
.VolumeIcon.icns
|
||||||
|
.com.apple.timemachine.donotpresent
|
||||||
|
|
||||||
|
# Directories potentially created on remote AFP share
|
||||||
|
.AppleDB
|
||||||
|
.AppleDesktop
|
||||||
|
Network Trash Folder
|
||||||
|
Temporary Items
|
||||||
|
.apdisk
|
||||||
|
|
||||||
|
### VisualStudioCode ###
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
!.vscode/*.code-snippets
|
||||||
|
|
||||||
|
# Local History for Visual Studio Code
|
||||||
|
.history/
|
||||||
|
|
||||||
|
# Built Visual Studio Code Extensions
|
||||||
|
*.vsix
|
||||||
|
|
||||||
|
### VisualStudioCode Patch ###
|
||||||
|
# Ignore all local history of files
|
||||||
|
.history
|
||||||
|
.ionide
|
||||||
|
|
||||||
|
# Support for Project snippet scope
|
||||||
|
|
||||||
|
### Vuejs ###
|
||||||
|
# Recommended template: Node.gitignore
|
||||||
|
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
### WebStorm ###
|
||||||
|
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
|
||||||
|
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
|
||||||
|
|
||||||
|
# User-specific stuff
|
||||||
|
.idea/**/workspace.xml
|
||||||
|
.idea/**/tasks.xml
|
||||||
|
.idea/**/usage.statistics.xml
|
||||||
|
.idea/**/dictionaries
|
||||||
|
.idea/**/shelf
|
||||||
|
|
||||||
|
# AWS User-specific
|
||||||
|
.idea/**/aws.xml
|
||||||
|
|
||||||
|
# Generated files
|
||||||
|
.idea/**/contentModel.xml
|
||||||
|
|
||||||
|
# Sensitive or high-churn files
|
||||||
|
.idea/**/dataSources/
|
||||||
|
.idea/**/dataSources.ids
|
||||||
|
.idea/**/dataSources.local.xml
|
||||||
|
.idea/**/sqlDataSources.xml
|
||||||
|
.idea/**/dynamic.xml
|
||||||
|
.idea/**/uiDesigner.xml
|
||||||
|
.idea/**/dbnavigator.xml
|
||||||
|
|
||||||
|
# Gradle
|
||||||
|
.idea/**/gradle.xml
|
||||||
|
.idea/**/libraries
|
||||||
|
|
||||||
|
# Gradle and Maven with auto-import
|
||||||
|
# When using Gradle or Maven with auto-import, you should exclude module files,
|
||||||
|
# since they will be recreated, and may cause churn. Uncomment if using
|
||||||
|
# auto-import.
|
||||||
|
# .idea/artifacts
|
||||||
|
# .idea/compiler.xml
|
||||||
|
# .idea/jarRepositories.xml
|
||||||
|
# .idea/modules.xml
|
||||||
|
# .idea/*.iml
|
||||||
|
# .idea/modules
|
||||||
|
# *.iml
|
||||||
|
# *.ipr
|
||||||
|
|
||||||
|
# CMake
|
||||||
|
cmake-build-*/
|
||||||
|
|
||||||
|
# Mongo Explorer plugin
|
||||||
|
.idea/**/mongoSettings.xml
|
||||||
|
|
||||||
|
# File-based project format
|
||||||
|
*.iws
|
||||||
|
|
||||||
|
# IntelliJ
|
||||||
|
out/
|
||||||
|
|
||||||
|
# mpeltonen/sbt-idea plugin
|
||||||
|
.idea_modules/
|
||||||
|
|
||||||
|
# JIRA plugin
|
||||||
|
atlassian-ide-plugin.xml
|
||||||
|
|
||||||
|
# Cursive Clojure plugin
|
||||||
|
.idea/replstate.xml
|
||||||
|
|
||||||
|
# SonarLint plugin
|
||||||
|
.idea/sonarlint/
|
||||||
|
|
||||||
|
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||||
|
com_crashlytics_export_strings.xml
|
||||||
|
crashlytics.properties
|
||||||
|
crashlytics-build.properties
|
||||||
|
fabric.properties
|
||||||
|
|
||||||
|
# Editor-based Rest Client
|
||||||
|
.idea/httpRequests
|
||||||
|
|
||||||
|
# Android studio 3.1+ serialized cache file
|
||||||
|
.idea/caches/build_file_checksums.ser
|
||||||
|
|
||||||
|
### WebStorm Patch ###
|
||||||
|
# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
|
||||||
|
|
||||||
|
# *.iml
|
||||||
|
# modules.xml
|
||||||
|
# .idea/misc.xml
|
||||||
|
# *.ipr
|
||||||
|
|
||||||
|
# Sonarlint plugin
|
||||||
|
# https://plugins.jetbrains.com/plugin/7973-sonarlint
|
||||||
|
.idea/**/sonarlint/
|
||||||
|
|
||||||
|
# SonarQube Plugin
|
||||||
|
# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
|
||||||
|
.idea/**/sonarIssues.xml
|
||||||
|
|
||||||
|
# Markdown Navigator plugin
|
||||||
|
# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
|
||||||
|
.idea/**/markdown-navigator.xml
|
||||||
|
.idea/**/markdown-navigator-enh.xml
|
||||||
|
.idea/**/markdown-navigator/
|
||||||
|
|
||||||
|
# Cache file creation bug
|
||||||
|
# See https://youtrack.jetbrains.com/issue/JBR-2257
|
||||||
|
.idea/$CACHE_FILE$
|
||||||
|
|
||||||
|
# CodeStream plugin
|
||||||
|
# https://plugins.jetbrains.com/plugin/12206-codestream
|
||||||
|
.idea/codestream.xml
|
||||||
|
|
||||||
|
### Windows ###
|
||||||
|
# Windows thumbnail cache files
|
||||||
|
Thumbs.db
|
||||||
|
Thumbs.db:encryptable
|
||||||
|
ehthumbs.db
|
||||||
|
ehthumbs_vista.db
|
||||||
|
|
||||||
|
# Dump file
|
||||||
|
*.stackdump
|
||||||
|
|
||||||
|
# Folder config file
|
||||||
|
[Dd]esktop.ini
|
||||||
|
|
||||||
|
# Recycle Bin used on file shares
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# Windows Installer files
|
||||||
|
*.cab
|
||||||
|
*.msi
|
||||||
|
*.msix
|
||||||
|
*.msm
|
||||||
|
*.msp
|
||||||
|
|
||||||
|
# Windows shortcuts
|
||||||
|
*.lnk
|
||||||
|
|
||||||
|
# End of https://www.toptal.com/developers/gitignore/api/webstorm,visualstudiocode,vuejs,macos,windows
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# yozm-admin
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,63 @@
|
||||||
|
{
|
||||||
|
"name": "yozm-admin",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve_local": "vue-cli-service serve --mode local --port 8888",
|
||||||
|
"serve": "vue-cli-service serve --port 8888",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"build_development": "vue-cli-service build --mode development",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-excel-xlsx": "^1.2.2",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vue2-editor": "^2.10.3",
|
||||||
|
"vuedraggable": "^2.24.3",
|
||||||
|
"vuejs-datetimepicker": "^1.1.13",
|
||||||
|
"vuetify": "2.6.10",
|
||||||
|
"vuetify-audio": "^0.3.3",
|
||||||
|
"vuetify-dialog": "^2.0.17",
|
||||||
|
"vuex": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"axios": "0.21.2",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"sass": "~1.32.0",
|
||||||
|
"sass-loader": "^10.0.0",
|
||||||
|
"vue-cli-plugin-axios": "~0.0.4",
|
||||||
|
"vue-cli-plugin-vuetify": "~2.4.5",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"vuetify-loader": "^1.7.0"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/recommended",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"no-unused-vars": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-app-bar
|
||||||
|
app
|
||||||
|
clipped-left
|
||||||
|
color="primary"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>요즘 관리자</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-app-bar>
|
||||||
|
|
||||||
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
|
||||||
|
&.router-link-exact-active {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getAudioContentList(page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/audio-content/list?page=" + (page - 1) +
|
||||||
|
"&size=10"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function searchAudioContent(searchWord, page){
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/audio-content/search?search_word=" + searchWord +
|
||||||
|
"&page=" + (page - 1) +
|
||||||
|
"&size=10"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyAudioContent(request) {
|
||||||
|
return Vue.axios.put("/admin/audio-content", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getBannerList() {
|
||||||
|
return Vue.axios.get("/admin/audio-content/banner")
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveBanner(formData) {
|
||||||
|
return Vue.axios.post('/admin/audio-content/banner', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyBanner(formData) {
|
||||||
|
return Vue.axios.put('/admin/audio-content/banner', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateBannerOrders(ids) {
|
||||||
|
return Vue.axios.put('/admin/audio-content/banner/orders', {ids: ids})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCurations() {
|
||||||
|
return Vue.axios.get("/admin/audio-content/curation")
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveCuration(request) {
|
||||||
|
return Vue.axios.post("/admin/audio-content/curation", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyCuration(request) {
|
||||||
|
return Vue.axios.put("/admin/audio-content/curation", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateCurationOrders(ids) {
|
||||||
|
return Vue.axios.put('/admin/audio-content/curation/orders', {ids: ids})
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
getAudioContentList,
|
||||||
|
searchAudioContent,
|
||||||
|
modifyAudioContent,
|
||||||
|
getBannerList,
|
||||||
|
saveBanner,
|
||||||
|
modifyBanner,
|
||||||
|
updateBannerOrders,
|
||||||
|
getCurations,
|
||||||
|
saveCuration,
|
||||||
|
modifyCuration,
|
||||||
|
updateCurationOrders
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function enrollment(formData) {
|
||||||
|
return Vue.axios.post('/admin/audio-content/theme', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getThemes() {
|
||||||
|
return Vue.axios.get('/admin/audio-content/theme');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteTheme(themeId) {
|
||||||
|
return Vue.axios.delete('/admin/audio-content/theme/' + themeId)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateThemeOrders(ids) {
|
||||||
|
return Vue.axios.put('/admin/audio-content/theme/orders', { ids: ids })
|
||||||
|
}
|
||||||
|
|
||||||
|
export { enrollment, getThemes, deleteTheme, updateThemeOrders }
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getCalculateCreator(startDate, endDate) {
|
||||||
|
return Vue.axios.get('/admin/calculate/creator?startDateStr=' + startDate + '&endDateStr=' + endDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getCalculateCreator }
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function save(title, startDateString, endDateString, availableCount, addPercent) {
|
||||||
|
const request = {title, startDateString, endDateString, availableCount, addPercent}
|
||||||
|
return Vue.axios.post("/event/charge", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modify(id, title, startDateString, endDateString, availableCount, addPercent, isActive) {
|
||||||
|
const request = {id, title, startDateString, endDateString, availableCount, addPercent, isActive}
|
||||||
|
return Vue.axios.put("/event/charge", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getChargeEventList() {
|
||||||
|
return Vue.axios.get('/event/charge/list')
|
||||||
|
}
|
||||||
|
|
||||||
|
export {save, modify, getChargeEventList}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getChargeStatus(startDate, endDate) {
|
||||||
|
return Vue.axios.get('/admin/charge/status?startDateStr=' + startDate + '&endDateStr=' + endDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getChargeStatusDetail(startDate, paymentGateway) {
|
||||||
|
return Vue.axios.get('/admin/charge/status/detail?startDateStr=' + startDate + '&paymentGateway=' + paymentGateway);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getChargeStatus, getChargeStatusDetail }
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function deleteCoin(id) {
|
||||||
|
return Vue.axios.delete('/coin/' + id);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyCoin(id, coin, rewardCoin, price) {
|
||||||
|
const request = {id: id, coin: coin, rewardCoin: rewardCoin, price: price}
|
||||||
|
return Vue.axios.put('/coin', request);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function getCoins() {
|
||||||
|
return Vue.axios.get('/coin');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function insertCoin(coin, rewardCoin, price) {
|
||||||
|
const request = {coin: coin, rewardCoin: rewardCoin, price: price}
|
||||||
|
return Vue.axios.post('/coin', request);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function paymentCoin(coin, method, account_id) {
|
||||||
|
const request = {accountId: account_id, method: method, coin: coin}
|
||||||
|
return Vue.axios.post('/admin/coin/charge', request)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {getCoins, insertCoin, modifyCoin, deleteCoin, paymentCoin}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function createSituation(formData) {
|
||||||
|
return Vue.axios.post('/recommend_situation', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getSituationList() {
|
||||||
|
return Vue.axios.get('/recommend_situation/admin')
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifySituation(id, formData) {
|
||||||
|
return Vue.axios.put('/recommend_situation/' + id, formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteSituation(id) {
|
||||||
|
return Vue.axios.delete('/recommend_situation/' + id)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { createSituation, getSituationList, modifySituation, deleteSituation }
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function enrollment(formData) {
|
||||||
|
return Vue.axios.post('/account/counselor/tag', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getTags() {
|
||||||
|
return Vue.axios.get('/account/counselor/tag');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteTag(tagId) {
|
||||||
|
return Vue.axios.delete('/account/counselor/tag/' + tagId)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyTag(tagId, formData) {
|
||||||
|
return Vue.axios.put('/account/counselor/tag/' + tagId, formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateTagOrders(ids) {
|
||||||
|
return Vue.axios.put('/account/counselor/tag/orders', { ids: ids })
|
||||||
|
}
|
||||||
|
|
||||||
|
export { enrollment, getTags, deleteTag, modifyTag, updateTagOrders }
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function save(formData) {
|
||||||
|
return Vue.axios.post('/event', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modify(formData) {
|
||||||
|
return Vue.axios.put('/event', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteEvent(id) {
|
||||||
|
return Vue.axios.delete("/event/" + id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getEvents() {
|
||||||
|
return Vue.axios.get("/event")
|
||||||
|
}
|
||||||
|
|
||||||
|
export {save, modify, deleteEvent, getEvents}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getExplorerSections(page) {
|
||||||
|
return Vue.axios.get("/admin/explorer?page=" + (page - 1) + "&size=20");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateExplorerSectionsOrders(firstOrders, ids) {
|
||||||
|
return Vue.axios.put('/admin/explorer/orders', { firstOrders: firstOrders, ids: ids })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createExplorerSection(item) {
|
||||||
|
return Vue.axios.post("/admin/explorer", item);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateExplorerSection(item) {
|
||||||
|
return Vue.axios.put("/admin/explorer", item)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { createExplorerSection, updateExplorerSection, getExplorerSections, updateExplorerSectionsOrders }
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function save(question, answer, category) {
|
||||||
|
const request = {question: question, answer: answer, category: category}
|
||||||
|
return Vue.axios.post("/faq", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modify(request) {
|
||||||
|
return Vue.axios.put("/faq", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteFaq(id) {
|
||||||
|
return Vue.axios.delete("/faq/" + id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getFaqs(category) {
|
||||||
|
return Vue.axios.get("/faq?category=" + category)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCategories() {
|
||||||
|
return Vue.axios.get("/faq/category")
|
||||||
|
}
|
||||||
|
|
||||||
|
export {save, modify, deleteFaq, getCategories, getFaqs}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const url = "https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=AIzaSyAOY4pgYs2swcllYCWjJF3bZUkNC6LWPqI"
|
||||||
|
|
||||||
|
async function shareCreatorChannel(channelInfo, utmSource, utmMedium, utmCampaign) {
|
||||||
|
const data = {
|
||||||
|
"dynamicLinkInfo": {
|
||||||
|
"domainUriPrefix": "https://yozm.page.link",
|
||||||
|
"link": "https://yozm.day/?channel_id=" + channelInfo.id,
|
||||||
|
"androidInfo": {
|
||||||
|
"androidPackageName": "kr.co.vividnext.sodalive",
|
||||||
|
},
|
||||||
|
"iosInfo": {
|
||||||
|
"iosBundleId": "kr.co.vividnext.yozm",
|
||||||
|
"iosAppStoreId": "1630284226"
|
||||||
|
},
|
||||||
|
"analyticsInfo": {
|
||||||
|
"googlePlayAnalytics": {
|
||||||
|
"utmSource": utmSource,
|
||||||
|
"utmMedium": utmMedium,
|
||||||
|
"utmCampaign": utmCampaign,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"socialMetaTagInfo": {
|
||||||
|
"socialTitle": "요즘라이브",
|
||||||
|
"socialDescription": "요즘라이브 " + channelInfo.nickname + "님의 채널입니다.",
|
||||||
|
"socialImageLink": channelInfo.profileUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return axios.post(url, data, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function shareAudioContent(audioContent, utmSource, utmMedium, utmCampaign) {
|
||||||
|
const data = {
|
||||||
|
"dynamicLinkInfo": {
|
||||||
|
"domainUriPrefix": "https://yozm.page.link",
|
||||||
|
"link": "https://yozm.day/?audio_content_id=" + audioContent.audioContentId,
|
||||||
|
"androidInfo": {
|
||||||
|
"androidPackageName": "kr.co.vividnext.yozm",
|
||||||
|
},
|
||||||
|
"iosInfo": {
|
||||||
|
"iosBundleId": "kr.co.vividnext.yozm",
|
||||||
|
"iosAppStoreId": "1630284226"
|
||||||
|
},
|
||||||
|
"analyticsInfo": {
|
||||||
|
"googlePlayAnalytics": {
|
||||||
|
"utmSource": utmSource,
|
||||||
|
"utmMedium": utmMedium,
|
||||||
|
"utmCampaign": utmCampaign,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"socialMetaTagInfo": {
|
||||||
|
"socialTitle": audioContent.title + " - " + audioContent.creatorNickname,
|
||||||
|
"socialDescription": "지금 요즘라이브에서 이 콘텐츠 감상하기",
|
||||||
|
"socialImageLink": audioContent.coverImageUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return axios.post(url, data, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export { shareCreatorChannel, shareAudioContent }
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getLive() {
|
||||||
|
return Vue.axios.get('/admin/live')
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getLive }
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function enrollment(formData) {
|
||||||
|
return Vue.axios.post('/suda/tag', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getTags() {
|
||||||
|
return Vue.axios.get('/suda/tag');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteTag(tagId) {
|
||||||
|
return Vue.axios.delete('/suda/tag/' + tagId)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modifyTag(tagId, formData) {
|
||||||
|
return Vue.axios.put('/suda/tag/' + tagId, formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateTagOrders(ids) {
|
||||||
|
return Vue.axios.put('/suda/tag/orders', { ids: ids })
|
||||||
|
}
|
||||||
|
|
||||||
|
export { enrollment, getTags, deleteTag, modifyTag, updateTagOrders }
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function login(email, password) {
|
||||||
|
return Vue.axios.post('/member/login', {
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
isAdmin: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getAccountList(page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/account/list?page=" + (page - 1) +
|
||||||
|
"&size=20"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function searchAccount(searchWord, page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/account/search?search_word=" + searchWord +
|
||||||
|
"&page=" + (page - 1) +
|
||||||
|
"&size=20"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCreatorAccountList(page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/account/creator/list?page=" + (page - 1) +
|
||||||
|
"&size=20"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function searchCreatorAccount(searchWord, page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/admin/account/creator/search?search_word=" + searchWord +
|
||||||
|
"&page=" + (page - 1) +
|
||||||
|
"&size=20"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateAccount(id, user_type) {
|
||||||
|
const request = {id, userType: user_type}
|
||||||
|
return Vue.axios.put("/admin/account", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
login,
|
||||||
|
getAccountList,
|
||||||
|
searchAccount,
|
||||||
|
getCreatorAccountList,
|
||||||
|
searchCreatorAccount,
|
||||||
|
updateAccount
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getMenus() {
|
||||||
|
return Vue.axios.get("/menu");
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getMenus }
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function save(title, content) {
|
||||||
|
const request = {title: title, content: content}
|
||||||
|
return Vue.axios.post("/notice", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modify(id, title, content) {
|
||||||
|
const request = {id: id}
|
||||||
|
|
||||||
|
if (title.trim().length > 0) {
|
||||||
|
request.title = title
|
||||||
|
}
|
||||||
|
|
||||||
|
if (content.trim().length > 0) {
|
||||||
|
request.content = content
|
||||||
|
}
|
||||||
|
|
||||||
|
return Vue.axios.put("/notice", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteNotice(id) {
|
||||||
|
return Vue.axios.delete("/notice/" + id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getNotices(page) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
"/notice?page=" + (page - 1) +
|
||||||
|
"&size=20" +
|
||||||
|
"&timezone=" + Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {save, modify, deleteNotice, getNotices}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function sendPush(accountIds, title, message) {
|
||||||
|
return Vue.axios.post('/push', {
|
||||||
|
accountIds,
|
||||||
|
title,
|
||||||
|
message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export { sendPush }
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function addRecommendCounselor(id) {
|
||||||
|
return Vue.axios.post('/recommend_counselor', { id });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRecommendCounselorList() {
|
||||||
|
return Vue.axios.get('/recommend_counselor/admin');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteRecommendCounselor(id) {
|
||||||
|
return Vue.axios.delete('/recommend_counselor/' + id);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { addRecommendCounselor, getRecommendCounselorList, deleteRecommendCounselor }
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function createRecommendSudaCreator(formData) {
|
||||||
|
return Vue.axios.post('/admin/suda/recommend-suda-creator', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateRecommendSudaCreator(formData) {
|
||||||
|
return Vue.axios.put('/admin/suda/recommend-suda-creator', formData, {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateRecommendSudaCreatorOrders(firstOrders, ids) {
|
||||||
|
return Vue.axios.put('/admin/suda/recommend-suda-creator/orders', { firstOrders: firstOrders, ids: ids })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRecommendSudaCreator(page) {
|
||||||
|
return Vue.axios.get("/admin/suda/recommend-suda-creator?page=" + (page - 1) + "&size=20");
|
||||||
|
}
|
||||||
|
|
||||||
|
export { createRecommendSudaCreator, updateRecommendSudaCreator, updateRecommendSudaCreatorOrders, getRecommendSudaCreator };
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
async function getTermsOfService() {
|
||||||
|
return Vue.axios.get("/stplat/terms_of_service")
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPrivacyPolicy() {
|
||||||
|
return Vue.axios.get("/stplat/privacy_policy")
|
||||||
|
}
|
||||||
|
|
||||||
|
async function modify(id, description) {
|
||||||
|
const request = { id, description }
|
||||||
|
return Vue.axios.post("/stplat/modify", request)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getTermsOfService, getPrivacyPolicy, modify }
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,118 @@
|
||||||
|
<template>
|
||||||
|
<v-navigation-drawer
|
||||||
|
app
|
||||||
|
clipped
|
||||||
|
color="black"
|
||||||
|
dark
|
||||||
|
permanent
|
||||||
|
>
|
||||||
|
<v-layout
|
||||||
|
column
|
||||||
|
fill-height
|
||||||
|
>
|
||||||
|
<v-list
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.title"
|
||||||
|
class="py-0"
|
||||||
|
>
|
||||||
|
<div v-if="!item.items">
|
||||||
|
<v-list-item
|
||||||
|
:to="item.route"
|
||||||
|
active-class="blue white--text"
|
||||||
|
>
|
||||||
|
<v-list-item-icon>
|
||||||
|
<v-icon>{{ item.icon }}</v-icon>
|
||||||
|
</v-list-item-icon>
|
||||||
|
|
||||||
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-list-group
|
||||||
|
v-else
|
||||||
|
:prepend-icon="item.icon"
|
||||||
|
no-action
|
||||||
|
>
|
||||||
|
<template v-slot:activator>
|
||||||
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="childItem in item.items"
|
||||||
|
:key="childItem.title"
|
||||||
|
>
|
||||||
|
<v-list-item
|
||||||
|
:to="childItem.route"
|
||||||
|
active-class="blue white--text"
|
||||||
|
>
|
||||||
|
<v-list-item-title>{{ childItem.title }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</div>
|
||||||
|
</v-list-group>
|
||||||
|
</v-list>
|
||||||
|
<v-spacer />
|
||||||
|
<v-list>
|
||||||
|
<v-list-item @click="logout">
|
||||||
|
<v-list-item-icon>
|
||||||
|
<v-icon>mdi-logout</v-icon>
|
||||||
|
</v-list-item-icon>
|
||||||
|
|
||||||
|
<v-list-item-title>로그아웃</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-layout>
|
||||||
|
</v-navigation-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/menu'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "SideMenu",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
items: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getMenus()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getMenus() {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
let res = await api.getMenus();
|
||||||
|
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
||||||
|
this.items = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
||||||
|
this.logout();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
||||||
|
this.logout();
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
this.$store.dispatch('accountStore/LOGOUT')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<SideMenu />
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SideMenu from "@/components/SideMenu";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "DefaultLayout",
|
||||||
|
components: {
|
||||||
|
SideMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import './plugins/axios'
|
||||||
|
import App from './App.vue'
|
||||||
|
import vuetify from './plugins/vuetify'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
|
||||||
|
import VuetifyDialog from 'vuetify-dialog'
|
||||||
|
import 'vuetify-dialog/dist/vuetify-dialog.css'
|
||||||
|
import VueExcelXlsx from "vue-excel-xlsx";
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(VuetifyDialog, {
|
||||||
|
context: {
|
||||||
|
vuetify
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
Vue.use(VueExcelXlsx);
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
vuetify,
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
import Vue from 'vue';
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
// Full config: https://github.com/axios/axios#request-config
|
||||||
|
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
|
||||||
|
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
||||||
|
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||||
|
|
||||||
|
let config = {
|
||||||
|
baseURL: process.env.VUE_APP_API_URL,
|
||||||
|
timeout: 60 * 1000, // Timeout
|
||||||
|
// withCredentials: true, // Check cross-site Access-Control
|
||||||
|
};
|
||||||
|
|
||||||
|
const _axios = axios.create(config);
|
||||||
|
|
||||||
|
_axios.interceptors.request.use(
|
||||||
|
function(config) {
|
||||||
|
// Do something before request is sent
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
function(error) {
|
||||||
|
// Do something with request error
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add a response interceptor
|
||||||
|
_axios.interceptors.response.use(
|
||||||
|
function(response) {
|
||||||
|
// Do something with response data
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
function(error) {
|
||||||
|
// Do something with response error
|
||||||
|
if (error.response.status === 401) {
|
||||||
|
localStorage.clear()
|
||||||
|
if (location.pathname === '/') {
|
||||||
|
location.reload()
|
||||||
|
} else {
|
||||||
|
location.replace("/")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Plugin.install = function(Vue, options) {
|
||||||
|
Vue.axios = _axios;
|
||||||
|
window.axios = _axios;
|
||||||
|
Object.defineProperties(Vue.prototype, {
|
||||||
|
axios: {
|
||||||
|
get() {
|
||||||
|
return _axios;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$axios: {
|
||||||
|
get() {
|
||||||
|
return _axios;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Vue.use(Plugin)
|
||||||
|
|
||||||
|
export default Plugin;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Vuetify from 'vuetify/lib/framework';
|
||||||
|
|
||||||
|
Vue.use(Vuetify);
|
||||||
|
|
||||||
|
export default new Vuetify({
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import store from '@/store';
|
||||||
|
|
||||||
|
import DefaultLayout from '@/layouts/default'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'DefaultLayout',
|
||||||
|
component: DefaultLayout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Dashboard',
|
||||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard/Dashboard.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/explorer',
|
||||||
|
name: 'Explorer',
|
||||||
|
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Explorer/ExplorerSectionView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/member/list',
|
||||||
|
name: 'MemberList',
|
||||||
|
component: () => import(/* webpackChunkName: "member" */ '../views/Account/MemberList.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/creator/tags',
|
||||||
|
name: 'CreatorTags',
|
||||||
|
component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorTags.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/creator/list',
|
||||||
|
name: 'CreatorList',
|
||||||
|
component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorList.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/creator/review',
|
||||||
|
name: 'CreatorReview',
|
||||||
|
component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorReview.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/live/tags',
|
||||||
|
name: 'LiveTags',
|
||||||
|
component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveTags.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/live/list',
|
||||||
|
name: 'LiveList',
|
||||||
|
component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveList.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/live/recommend',
|
||||||
|
name: 'LiveRecommend',
|
||||||
|
component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveRecommend.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/content/theme',
|
||||||
|
name: 'ContentTheme',
|
||||||
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentTheme.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/content/list',
|
||||||
|
name: 'ContentList',
|
||||||
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/content/banner',
|
||||||
|
name: 'ContentMainTopBanner',
|
||||||
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentMainTopBanner.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/content/curation',
|
||||||
|
name: 'ContentCuration',
|
||||||
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/promotion/event',
|
||||||
|
name: 'EventView',
|
||||||
|
component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/EventView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/promotion/push',
|
||||||
|
name: 'Push',
|
||||||
|
component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/Push.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/promotion/charge-event',
|
||||||
|
name: 'ChargeEvent',
|
||||||
|
component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/ChargeEvent.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/can/management',
|
||||||
|
name: 'CoinView',
|
||||||
|
component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CanManagement.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/can/charge',
|
||||||
|
name: 'CoinCharge',
|
||||||
|
component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CanCharge.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/can/status',
|
||||||
|
name: 'CoinStatus',
|
||||||
|
component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CoinStatus.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/calculate/creator',
|
||||||
|
name: 'CalculateCreator',
|
||||||
|
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCreator.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/calculate/content',
|
||||||
|
name: 'CalculateContent',
|
||||||
|
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateContent.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/calculate/copyright',
|
||||||
|
name: 'CalculateCopyright',
|
||||||
|
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCopyright.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/notice',
|
||||||
|
name: 'NoticeView',
|
||||||
|
component: () => import(/* webpackChunkName: "support" */ '../views/Support/NoticeView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/faq',
|
||||||
|
name: 'FaqView',
|
||||||
|
component: () => import(/* webpackChunkName: "support" */ '../views/Support/FaqView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/report',
|
||||||
|
name: 'ReportView',
|
||||||
|
component: () => import(/* webpackChunkName: "support" */ '../views/Support/ReportView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/terms',
|
||||||
|
name: 'TermsOfServiceView',
|
||||||
|
component: () => import(/* webpackChunkName: "support" */ '../views/Support/TermsOfServiceView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/privacy',
|
||||||
|
name: 'PrivacyView',
|
||||||
|
component: () => import(/* webpackChunkName: "support" */ '../views/Support/PrivacyView.vue')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.path !== '/login') {
|
||||||
|
const isAuthenticated = store.getters['accountStore/isAuthenticated']
|
||||||
|
if (isAuthenticated) {
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
next('/login?redirect=' + to.fullPath)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
import * as accountApi from '@/api/member'
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
const enhanceAccessToken = () => {
|
||||||
|
const {accessToken} = localStorage
|
||||||
|
if (!accessToken) return
|
||||||
|
Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
enhanceAccessToken();
|
||||||
|
|
||||||
|
const accountStore = {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
userId: '',
|
||||||
|
nickname: '',
|
||||||
|
accessToken: '',
|
||||||
|
profileImage: '',
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
isAuthenticated(state) {
|
||||||
|
state.userId = state.userId || localStorage.userId
|
||||||
|
state.nickname = state.nickname || localStorage.nickname
|
||||||
|
state.profileImage = state.profileImage || localStorage.profileImage
|
||||||
|
state.accessToken = state.accessToken || localStorage.accessToken
|
||||||
|
|
||||||
|
return state.accessToken !== undefined &&
|
||||||
|
state.accessToken !== null &&
|
||||||
|
state.accessToken !== 'null' &&
|
||||||
|
state.accessToken !== ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
LOGIN(state, {userId, nickname, token, profileImage}) {
|
||||||
|
state.userId = userId
|
||||||
|
localStorage.userId = userId
|
||||||
|
|
||||||
|
state.nickname = nickname
|
||||||
|
localStorage.nickname = nickname
|
||||||
|
|
||||||
|
state.profileImage = profileImage
|
||||||
|
localStorage.profileImage = profileImage
|
||||||
|
|
||||||
|
state.accessToken = token
|
||||||
|
localStorage.accessToken = token
|
||||||
|
|
||||||
|
Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
LOGOUT(state) {
|
||||||
|
state.userId = ''
|
||||||
|
state.nickname = ''
|
||||||
|
state.profileImage = ''
|
||||||
|
state.accessToken = ''
|
||||||
|
|
||||||
|
localStorage.clear()
|
||||||
|
if (location.pathname === '/') {
|
||||||
|
location.reload()
|
||||||
|
} else {
|
||||||
|
location.replace("/")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async LOGIN({commit}, {email, password}) {
|
||||||
|
let result = false
|
||||||
|
let errorMessage = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
let res = await accountApi.login(email, password)
|
||||||
|
if (res.data.success === true) {
|
||||||
|
commit("LOGIN", res.data.data)
|
||||||
|
result = true
|
||||||
|
} else {
|
||||||
|
errorMessage = res.data.message
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
errorMessage = '로그인 정보를 확인해주세요.'
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (result) {
|
||||||
|
resolve();
|
||||||
|
} else {
|
||||||
|
reject(errorMessage)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
LOGOUT({commit}) {
|
||||||
|
Vue.axios.defaults.headers.common['Authorization'] = undefined;
|
||||||
|
commit("LOGOUT")
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default accountStore
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
import accountStore from "@/store/accountStore";
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
accountStore: accountStore
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<v-container>
|
||||||
|
일별 회원현황
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DailyMembershipStatus"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,367 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>회원리스트</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="8" />
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="search_word"
|
||||||
|
label="이메일 혹은 닉네임을 입력하세요"
|
||||||
|
@keyup.enter="search"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
slot="append"
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
@click="search"
|
||||||
|
>
|
||||||
|
검색
|
||||||
|
</v-btn>
|
||||||
|
</v-text-field>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-simple-table class="elevation-10">
|
||||||
|
<template>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center">
|
||||||
|
회원번호
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이메일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
닉네임
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이미지
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
회원타입
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
OS
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
성인인증
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
가입일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이용중지/탈퇴일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
관리
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="item in accounts"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<td>{{ item.id }}</td>
|
||||||
|
<td>{{ item.email }}</td>
|
||||||
|
<td>{{ item.nickname }}</td>
|
||||||
|
<td align="center">
|
||||||
|
<v-img
|
||||||
|
max-width="100"
|
||||||
|
max-height="100"
|
||||||
|
:src="item.profileUrl"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.userType }}</td>
|
||||||
|
<td>
|
||||||
|
<div v-if="item.container === 'aos'">
|
||||||
|
Android
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
iOS
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div v-if="item.auth">
|
||||||
|
O
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
X
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.signUpDate }}</td>
|
||||||
|
<td>{{ item.signOutDate }}</td>
|
||||||
|
<td>
|
||||||
|
<v-btn
|
||||||
|
dark
|
||||||
|
@click="showPopupDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_popup_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>계정 상세</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
이메일 :
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
{{ email }}
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
닉네임 :
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
{{ nickname }}
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
사용 여부
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-radio-group
|
||||||
|
v-model="user_type"
|
||||||
|
row
|
||||||
|
>
|
||||||
|
<v-spacer />
|
||||||
|
<v-radio
|
||||||
|
value="CREATOR"
|
||||||
|
label="크리에이터"
|
||||||
|
/>
|
||||||
|
<v-radio
|
||||||
|
value="USER"
|
||||||
|
label="일반회원"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-radio-group>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/member'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AccountList",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
search_word: '',
|
||||||
|
accounts: [],
|
||||||
|
account: null,
|
||||||
|
email: null,
|
||||||
|
nickname: null,
|
||||||
|
user_type: null,
|
||||||
|
show_popup_dialog: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getAccounts()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async search() {
|
||||||
|
this.page = 1
|
||||||
|
await this.searchAccount()
|
||||||
|
},
|
||||||
|
|
||||||
|
async searchAccount() {
|
||||||
|
if (this.search_word.length === 0) {
|
||||||
|
await this.getAccounts()
|
||||||
|
} else if (this.search_word.length < 2) {
|
||||||
|
this.notifyError('검색어를 2글자 이상 입력하세요.')
|
||||||
|
} else {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.searchAccount(this.search_word, this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 20)
|
||||||
|
this.accounts = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
if (this.search_word.length < 2) {
|
||||||
|
this.search_word = ''
|
||||||
|
await this.getAccounts()
|
||||||
|
} else {
|
||||||
|
await this.searchAccount()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getAccounts() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getAccountList(this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 20)
|
||||||
|
this.accounts = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showPopupDialog(account) {
|
||||||
|
this.account = account
|
||||||
|
|
||||||
|
if (account.userType === '일반회원') {
|
||||||
|
this.user_type = 'USER'
|
||||||
|
} else if (account.userType === '요즘친구') {
|
||||||
|
this.user_type = 'CREATOR'
|
||||||
|
}
|
||||||
|
|
||||||
|
this.email = account.email
|
||||||
|
this.nickname = account.nickname
|
||||||
|
|
||||||
|
this.show_popup_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.account = null
|
||||||
|
this.email = null
|
||||||
|
this.nickname = null
|
||||||
|
this.user_type = null
|
||||||
|
this.show_popup_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
if (
|
||||||
|
(this.user_type === 'CREATOR' && this.account.userType === '요즘친구') ||
|
||||||
|
(this.user_type === 'USER' && this.account.userType === '일반회원')
|
||||||
|
) {
|
||||||
|
this.notifyError("변경사항이 없습니다.")
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const res = await api.updateAccount(this.account.id, this.user_type)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.page = 1
|
||||||
|
this.total_page = 0
|
||||||
|
this.search_word = ''
|
||||||
|
|
||||||
|
this.accounts = []
|
||||||
|
await this.getAccounts()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
this.cancel()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<v-container>
|
||||||
|
회원현황
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MembershipStatus"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<div>콘텐츠 정산</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>저작권 정산</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CalculateCopyright"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,327 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>요즘친구 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="2">
|
||||||
|
<datetime
|
||||||
|
v-model="start_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="1">
|
||||||
|
~
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="2">
|
||||||
|
<datetime
|
||||||
|
v-model="end_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="1" />
|
||||||
|
|
||||||
|
<v-col cols="2">
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="getCalculateCreator"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-spacer />
|
||||||
|
|
||||||
|
<v-col cols="2">
|
||||||
|
<vue-excel-xlsx
|
||||||
|
:data="items"
|
||||||
|
:columns="columns"
|
||||||
|
:file-name="'정산'"
|
||||||
|
:file-type="'xlsx'"
|
||||||
|
:sheet-name="'정산'"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
>
|
||||||
|
엑셀 다운로드
|
||||||
|
</v-btn>
|
||||||
|
</vue-excel-xlsx>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="items"
|
||||||
|
:loading="is_loading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.email="{ item }">
|
||||||
|
{{ item.email }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.nickname="{ item }">
|
||||||
|
{{ item.nickname }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.date="{ item }">
|
||||||
|
{{ item.date }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.title="{ item }">
|
||||||
|
{{ item.title }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.entranceFee="{ item }">
|
||||||
|
{{ item.entranceFee.toLocaleString() }} 코인
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.coinUsageStr="{ item }">
|
||||||
|
{{ item.coinUsageStr }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalAmount="{ item }">
|
||||||
|
{{ item.totalAmount.toLocaleString() }} 코인
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ item.tax.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/calculate";
|
||||||
|
import datetime from 'vuejs-datetimepicker';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CalculateCounselor",
|
||||||
|
components: {datetime},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
items: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: "이메일",
|
||||||
|
field: "email",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "닉네임",
|
||||||
|
field: "nickname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "날짜",
|
||||||
|
field: "date",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "라이브 제목",
|
||||||
|
field: "title",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "유료방 입장 금액(코인)",
|
||||||
|
field: "entranceFee",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "코인사용구분",
|
||||||
|
field: "coinUsageStr",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "합계(코인)",
|
||||||
|
field: "totalAmount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "원화",
|
||||||
|
field: "totalKrw",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "결제수수료(4.4%)",
|
||||||
|
field: "paymentFee",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "정산금액",
|
||||||
|
field: "settlementAmount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "원천세(3.3%)",
|
||||||
|
field: "tax",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "입금액",
|
||||||
|
field: "depositAmount",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '이메일',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'email',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '닉네임',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'nickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '날짜',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '라이브 제목',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '유료방 입장 금액(코인)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'entranceFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '코인사용구분',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'coinUsageStr',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(코인)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '결제수수료(4.4%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
const date = new Date();
|
||||||
|
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||||||
|
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
||||||
|
|
||||||
|
let firstDateMonth = (firstDate.getMonth() + 1).toString()
|
||||||
|
if (firstDateMonth.length < 2) {
|
||||||
|
firstDateMonth = '0' + firstDateMonth
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let lastDateMonth = (lastDate.getMonth() + 1).toString()
|
||||||
|
if (lastDateMonth.length < 2) {
|
||||||
|
lastDateMonth = '0' + lastDateMonth
|
||||||
|
}
|
||||||
|
|
||||||
|
this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-0' + firstDate.getDate()
|
||||||
|
this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDate.getDate()
|
||||||
|
|
||||||
|
await this.getCalculateCreator()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCalculateCreator() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getCalculateCreator(this.start_date, this.end_date)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.items = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
<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="method"
|
||||||
|
label="기록 내용"
|
||||||
|
outlined
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
v-model="coin"
|
||||||
|
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>
|
||||||
|
회원번호: {{ account_id }}
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
기록내용: {{ method }}
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
지급할 코인 수: {{ coin }}코인
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
코인 지급
|
||||||
|
</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/coin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CoinCharge",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show_confirm: false,
|
||||||
|
isLoading: false,
|
||||||
|
account_id: '',
|
||||||
|
method: '',
|
||||||
|
coin: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm() {
|
||||||
|
if (this.account_id.trim() === '' || isNaN(this.account_id)) {
|
||||||
|
return this.notifyError('코인을 지급할 회원의 회원번호를 입력하세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.method.trim() === '') {
|
||||||
|
return this.notifyError('기록할 내용을 입력하세요')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isNaN(this.coin)) {
|
||||||
|
return this.notifyError('코인은 숫자만 넣을 수 있습니다.')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.isLoading) {
|
||||||
|
this.show_confirm = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_confirm = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.isLoading) {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.show_confirm = false
|
||||||
|
|
||||||
|
const res = await api.paymentCoin(Number(this.coin), this.method, this.account_id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess('코인이 지급되었습니다.')
|
||||||
|
this.account_id = ''
|
||||||
|
this.method = ''
|
||||||
|
this.coin = ''
|
||||||
|
this.is_loading = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,282 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>코인 환율관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
코인등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="coins"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.price="{ item }">
|
||||||
|
{{ item.price.toLocaleString('en-US') }}원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.coin="{ item }">
|
||||||
|
{{ item.coin.toLocaleString('en-US') }}코인
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.rewardCoin="{ item }">
|
||||||
|
{{ item.rewardCoin.toLocaleString('en-US') }}코인
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.management="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="showModifyCoinDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="deleteCoin(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>코인 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="price"
|
||||||
|
label="원화"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="coin"
|
||||||
|
label="코인"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="reward_coin"
|
||||||
|
label="리워드 코인"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_coin !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/coin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CoinView",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
show_dialog: false,
|
||||||
|
selected_coin: null,
|
||||||
|
price: null,
|
||||||
|
coin: null,
|
||||||
|
reward_coin: null,
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '원화(VAT포함)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'price',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '충전코인',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'coin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '리워드코인',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'rewardCoin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
coins: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCoins()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.coin = null
|
||||||
|
this.price = null
|
||||||
|
this.reward_coin = null
|
||||||
|
this.selected_coin = null
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyCoinDialog(item) {
|
||||||
|
this.selected_coin = item
|
||||||
|
this.price = item.price
|
||||||
|
this.coin = item.coin
|
||||||
|
this.reward_coin = item.rewardCoin
|
||||||
|
|
||||||
|
this.show_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCoins() {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
let res = await api.getCoins();
|
||||||
|
this.coins = res.data.data
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteCoin(item) {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
let res = await api.deleteCoin(item.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message || '삭제되었습니다.')
|
||||||
|
this.coins = []
|
||||||
|
await this.getCoins()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.modifyCoin(this.selected_coin.id, this.coin, this.reward_coin, this.price)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.coin = null
|
||||||
|
this.price = null
|
||||||
|
this.reward_coin = null
|
||||||
|
this.selected_coin = null
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
|
||||||
|
this.coins = []
|
||||||
|
await this.getCoins()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const res = await api.insertCoin(this.coin, this.reward_coin, this.price)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.coin = null
|
||||||
|
this.price = null
|
||||||
|
this.reward_coin = null
|
||||||
|
this.selected_coin = null
|
||||||
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
|
||||||
|
this.coins = []
|
||||||
|
await this.getCoins()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>회원별 코인관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CoinByUser"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>코인 충전 현황</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-spacer />
|
||||||
|
<v-col cols="2">
|
||||||
|
<datetime
|
||||||
|
v-model="start_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="1">
|
||||||
|
~
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="2">
|
||||||
|
<datetime
|
||||||
|
v-model="end_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="1" />
|
||||||
|
|
||||||
|
<v-col cols="2">
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="getChargeStatus"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="items"
|
||||||
|
:loading="is_loading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
@click:row="getChargeStatusDetail"
|
||||||
|
>
|
||||||
|
<template v-slot:item.date="{ item }">
|
||||||
|
{{ item.date }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.chargeAmount="{ item }">
|
||||||
|
{{ item.chargeAmount.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.chargeCount="{ item }">
|
||||||
|
{{ item.chargeCount }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.pg="{ item }">
|
||||||
|
{{ item.pg }}
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_popup_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-data-table
|
||||||
|
:headers="detail_headers"
|
||||||
|
:items="detail_items"
|
||||||
|
:loading="is_loading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.accountId="{ item }">
|
||||||
|
{{ item.accountId }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.nickname="{ item }">
|
||||||
|
{{ item.nickname }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.method="{ item }">
|
||||||
|
{{ item.method }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.amount="{ item }">
|
||||||
|
{{ item.amount.toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.datetime="{ item }">
|
||||||
|
{{ item.datetime }}
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/charge_status";
|
||||||
|
import datetime from 'vuejs-datetimepicker';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CoinStatus",
|
||||||
|
components: {datetime},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
items: [],
|
||||||
|
detail_items: null,
|
||||||
|
show_popup_dialog: false,
|
||||||
|
detail_headers: [
|
||||||
|
{
|
||||||
|
text: 'no',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'accountId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '닉네임',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'nickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '결제수단',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'method',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '가격',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'amount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '날짜',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'datetime',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '날짜',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '충전금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'chargeAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '충전횟수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'chargeCount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'PG',
|
||||||
|
sortable: false,
|
||||||
|
value: 'pg',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
const date = new Date();
|
||||||
|
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||||||
|
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
||||||
|
|
||||||
|
let firstDateMonth = (firstDate.getMonth() + 1).toString()
|
||||||
|
if (firstDateMonth.length < 2) {
|
||||||
|
firstDateMonth = '0' + firstDateMonth
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let lastDateMonth = (lastDate.getMonth() + 1).toString()
|
||||||
|
if (lastDateMonth.length < 2) {
|
||||||
|
lastDateMonth = '0' + lastDateMonth
|
||||||
|
}
|
||||||
|
|
||||||
|
this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-0' + firstDate.getDate()
|
||||||
|
this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDate.getDate()
|
||||||
|
|
||||||
|
await this.getChargeStatus()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_popup_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async getChargeStatus() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getChargeStatus(this.start_date, this.end_date)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.items = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getChargeStatusDetail(value) {
|
||||||
|
if (value.date !== '합계') {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getChargeStatusDetail(value.date, value.pg)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.detail_items = res.data.data
|
||||||
|
this.show_popup_dialog = true
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,460 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>콘텐츠 큐레이션</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
큐레이션 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="curations"
|
||||||
|
:loading="is_loading"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
disable-pagination
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<draggable
|
||||||
|
v-model="props.items"
|
||||||
|
tag="tbody"
|
||||||
|
@end="onDropCallback(props.items)"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
v-for="(item, index) in props.items"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
{{ item.title }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{ item.description }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<h3 v-if="item.isAdult">
|
||||||
|
O
|
||||||
|
</h3>
|
||||||
|
<h3 v-else>
|
||||||
|
X
|
||||||
|
</h3>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<v-row>
|
||||||
|
<v-col />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="showModifyDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="deleteConfirm(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
<v-col />
|
||||||
|
</v-row>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</draggable>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title v-if="is_modify === true">
|
||||||
|
콘텐츠 큐레이션 수정
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-title v-else>
|
||||||
|
콘텐츠 큐레이션 등록
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
제목
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-text-field
|
||||||
|
v-model="curation.title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
설명
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-text-field
|
||||||
|
v-model="curation.description"
|
||||||
|
label="설명"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
19금
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="curation.is_adult"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="is_modify === true"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_delete_confirm_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
"{{ selected_curation.title }}"을 삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCuration"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Draggable from 'vuedraggable';
|
||||||
|
import * as api from "@/api/audio_content"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AudioContentCuration",
|
||||||
|
components: {Draggable},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
is_modify: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
show_write_dialog: false,
|
||||||
|
selected_curation: {},
|
||||||
|
curation: {is_adult: false},
|
||||||
|
curations: [],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '제목',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '설명',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'description',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '19금',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isAdult',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCurations()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyDialog(item) {
|
||||||
|
this.is_modify = true
|
||||||
|
this.selected_curation = item
|
||||||
|
|
||||||
|
this.curation.id = item.id
|
||||||
|
this.curation.title = item.title
|
||||||
|
this.curation.description = item.description
|
||||||
|
this.curation.is_adult = item.isAdult
|
||||||
|
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.curation = {is_adult: false}
|
||||||
|
this.selected_curation = {}
|
||||||
|
|
||||||
|
this.is_modify = false
|
||||||
|
this.show_write_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (
|
||||||
|
this.curation.title === null ||
|
||||||
|
this.curation.title === undefined ||
|
||||||
|
this.curation.title.trim().length <= 0
|
||||||
|
) {
|
||||||
|
this.notifyError("제목을 입력하세요")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.curation.description === null ||
|
||||||
|
this.curation.description === undefined ||
|
||||||
|
this.curation.description.trim().length <= 0
|
||||||
|
) {
|
||||||
|
this.notifyError("설명을 입력하세요")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteConfirm(curation) {
|
||||||
|
this.selected_curation = curation
|
||||||
|
this.show_delete_confirm_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCancel() {
|
||||||
|
this.selected_curation = {}
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request = {
|
||||||
|
title: this.curation.title,
|
||||||
|
description: this.curation.description,
|
||||||
|
isAdult: this.curation.is_adult
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.saveCuration(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
|
||||||
|
this.curations = []
|
||||||
|
await this.getCurations()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let request = {id: this.curation.id}
|
||||||
|
if (this.selected_curation.title !== this.curation.title && this.curation.title.trim().length > 0) {
|
||||||
|
request.title = this.curation.title
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_curation.description !== this.curation.description &&
|
||||||
|
this.curation.description.trim().length > 0
|
||||||
|
) {
|
||||||
|
request.description = this.curation.description
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_curation.isAdult !== this.curation.is_adult) {
|
||||||
|
request.isAdult = this.curation.is_adult
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.modifyCuration(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
|
||||||
|
this.curations = []
|
||||||
|
await this.getCurations()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteCuration() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let request = {id: this.selected_curation.id, isActive: false}
|
||||||
|
|
||||||
|
const res = await api.modifyCuration(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('삭제되었습니다.')
|
||||||
|
|
||||||
|
this.curations = []
|
||||||
|
await this.getCurations()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async onDropCallback(items) {
|
||||||
|
this.curations = items
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.is_loading = true
|
||||||
|
const res = await api.updateCurationOrders(ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCurations() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getCurations()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.curations = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,623 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>콘텐츠 리스트</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_source"
|
||||||
|
label="예) youtube, google"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_medium"
|
||||||
|
label="예) email, cpc"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_campaign"
|
||||||
|
label="예) 화이트데이"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="2" />
|
||||||
|
<v-col cols="4">
|
||||||
|
<v-text-field
|
||||||
|
v-model="search_word"
|
||||||
|
label="콘텐츠 제목 혹은 크리에이터 닉네임을 입력하세요"
|
||||||
|
@keyup.enter="search"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
slot="append"
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
@click="search"
|
||||||
|
>
|
||||||
|
검색
|
||||||
|
</v-btn>
|
||||||
|
</v-text-field>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-simple-table class="elevation-10">
|
||||||
|
<template>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center">
|
||||||
|
콘텐츠 번호
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
썸네일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
제목
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
내용
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
큐레이션
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
크리에이터
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
테마
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
태그
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
가격
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
19금
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
시간
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
듣기
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
등록일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
관리
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="item in audio_contents"
|
||||||
|
:key="item.audioContentId"
|
||||||
|
>
|
||||||
|
<td>{{ item.audioContentId }}</td>
|
||||||
|
<td align="center">
|
||||||
|
<v-img
|
||||||
|
max-width="100"
|
||||||
|
max-height="100"
|
||||||
|
:src="item.coverImageUrl"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.title }}</td>
|
||||||
|
<td style="max-width: 350px !important; word-break:break-all; height: auto;">
|
||||||
|
{{ item.detail }}
|
||||||
|
</td>
|
||||||
|
<td>{{ item.curationTitle || '없음' }}</td>
|
||||||
|
<td>{{ item.creatorNickname }}</td>
|
||||||
|
<td>{{ item.theme }}</td>
|
||||||
|
<td style="max-width: 200px !important; word-break:break-all; height: auto;">
|
||||||
|
{{ item.tags }}
|
||||||
|
</td>
|
||||||
|
<td v-if="item.price > 0">
|
||||||
|
{{ item.price }} 코인
|
||||||
|
</td>
|
||||||
|
<td v-else>
|
||||||
|
무료
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div v-if="item.isAdult">
|
||||||
|
O
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
X
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.remainingTime }}</td>
|
||||||
|
<td>
|
||||||
|
<vuetify-audio
|
||||||
|
:file="item.contentUrl"
|
||||||
|
:downloadable="true"
|
||||||
|
:auto-play="false"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.date }}</td>
|
||||||
|
<td>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="showModifyDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="deleteConfirm(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="shareAudioContent(item)"
|
||||||
|
>
|
||||||
|
공유
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_modify_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
콘텐츠 수정
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
제목
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-text-field
|
||||||
|
v-model="audio_content.title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
내용
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-text-field
|
||||||
|
v-model="audio_content.detail"
|
||||||
|
label="내용"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
19금
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="audio_content.is_adult"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
댓글 가능
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="audio_content.is_comment_available"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
기본 커버이미지로 변경
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="audio_content.is_default_cover_image"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
큐레이션
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="audio_content.curation_id"
|
||||||
|
:items="curations"
|
||||||
|
item-text="title"
|
||||||
|
item-value="value"
|
||||||
|
label="큐레이션 선택"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_delete_confirm_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
"{{ selected_audio_content.title }}"을 삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteAudioContent"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/audio_content'
|
||||||
|
import * as dynamicLink from "@/api/firebase_dynamic_link";
|
||||||
|
|
||||||
|
import VuetifyAudio from 'vuetify-audio'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AudioContentList",
|
||||||
|
|
||||||
|
components: {VuetifyAudio},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
show_modify_dialog: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
search_word: '',
|
||||||
|
audio_content: {},
|
||||||
|
audio_contents: [],
|
||||||
|
curations: [],
|
||||||
|
selected_audio_content: {},
|
||||||
|
utm_source: '',
|
||||||
|
utm_medium: '',
|
||||||
|
utm_campaign: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCurations()
|
||||||
|
await this.getAudioContent()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteConfirm(item) {
|
||||||
|
this.selected_audio_content = item
|
||||||
|
this.show_delete_confirm_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCancel() {
|
||||||
|
this.selected_audio_content = {}
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyDialog(item) {
|
||||||
|
this.selected_audio_content = item
|
||||||
|
|
||||||
|
this.audio_content.id = item.audioContentId
|
||||||
|
this.audio_content.title = item.title
|
||||||
|
this.audio_content.detail = item.detail
|
||||||
|
this.audio_content.curation_id = item.curationId
|
||||||
|
this.audio_content.is_adult = item.isAdult
|
||||||
|
this.audio_content.is_comment_available = item.isCommentAvailable
|
||||||
|
this.audio_content.is_default_cover_image = false
|
||||||
|
|
||||||
|
console.log(this.audio_content)
|
||||||
|
|
||||||
|
this.show_modify_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.selected_audio_content = {}
|
||||||
|
this.audio_content = {}
|
||||||
|
this.show_modify_dialog = false
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (
|
||||||
|
this.audio_content.title === null ||
|
||||||
|
this.audio_content.title === undefined ||
|
||||||
|
this.audio_content.title.trim().length <= 0
|
||||||
|
) {
|
||||||
|
this.notifyError("제목을 입력하세요")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.audio_content.detail === null ||
|
||||||
|
this.audio_content.detail === undefined ||
|
||||||
|
this.audio_content.detail.trim().length <= 0
|
||||||
|
) {
|
||||||
|
this.notifyError("내용을 입력하세요")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const request = {
|
||||||
|
id: this.audio_content.id,
|
||||||
|
isDefaultCoverImage: this.audio_content.is_default_cover_image
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_audio_content.title !== this.audio_content.title &&
|
||||||
|
this.audio_content.title.trim().length > 0
|
||||||
|
) {
|
||||||
|
request.title = this.audio_content.title
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_audio_content.detail !== this.audio_content.detail &&
|
||||||
|
this.audio_content.detail.trim().length > 0
|
||||||
|
) {
|
||||||
|
request.detail = this.audio_content.detail
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_audio_content.curationId !== this.audio_content.curation_id) {
|
||||||
|
request.curationId = this.audio_content.curation_id
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
|
||||||
|
request.isAdult = this.audio_content.is_adult
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
|
||||||
|
request.isCommentAvailable = this.audio_content.is_comment_available
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(request)
|
||||||
|
const res = await api.modifyAudioContent(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
|
||||||
|
this.audio_contents = []
|
||||||
|
await this.getAudioContent()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteAudioContent() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let request = {id: this.selected_audio_content.audioContentId, isActive: false}
|
||||||
|
|
||||||
|
const res = await api.modifyAudioContent(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('삭제되었습니다.')
|
||||||
|
|
||||||
|
this.audio_contents = []
|
||||||
|
await this.getAudioContent()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
if (this.search_word.length < 2) {
|
||||||
|
this.search_word = ''
|
||||||
|
await this.getAudioContent()
|
||||||
|
} else {
|
||||||
|
await this.searchAudioContent()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCurations() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getCurations()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.curations = res.data.data.map((curation) => {
|
||||||
|
return {title: curation.title, value: curation.id}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.curations.unshift({title: '없음', value: 0})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getAudioContent() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getAudioContentList(this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 10)
|
||||||
|
this.audio_contents = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async search() {
|
||||||
|
this.page = 1
|
||||||
|
await this.searchAudioContent()
|
||||||
|
},
|
||||||
|
|
||||||
|
async searchAudioContent() {
|
||||||
|
if (this.search_word.length === 0) {
|
||||||
|
await this.getAudioContent()
|
||||||
|
} else if (this.search_word.length < 2) {
|
||||||
|
this.notifyError('검색어를 2글자 이상 입력하세요.')
|
||||||
|
} else {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.searchAudioContent(this.search_word, this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 10)
|
||||||
|
this.audio_contents = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async shareAudioContent(item) {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const linkData = await dynamicLink.shareAudioContent(item, this.utm_source, this.utm_medium, this.utm_campaign);
|
||||||
|
if (linkData.status === 200) {
|
||||||
|
await navigator.clipboard.writeText(linkData.data.shortLink)
|
||||||
|
this.notifySuccess("링크가 복사되었습니다.")
|
||||||
|
} else {
|
||||||
|
this.notifyError("링크를 생성하지 못했습니다.")
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,576 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>콘텐츠 배너</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
배너 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<draggable
|
||||||
|
v-model="banners"
|
||||||
|
class="row"
|
||||||
|
@end="onDropCallback(banners)"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="(item, i) in banners"
|
||||||
|
:key="i"
|
||||||
|
cols="3"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
<v-img :src="item.thumbnailImageUrl" />
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="showModifyBannerDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="deleteConfirm(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</draggable>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>배너 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
배너 타입
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-radio-group
|
||||||
|
v-model="banner.type"
|
||||||
|
row
|
||||||
|
>
|
||||||
|
<v-radio
|
||||||
|
value="CREATOR"
|
||||||
|
label="크리에이터 채널"
|
||||||
|
/>
|
||||||
|
<v-radio
|
||||||
|
value="LINK"
|
||||||
|
label="외부링크"
|
||||||
|
/>
|
||||||
|
<v-radio
|
||||||
|
value="EVENT"
|
||||||
|
label="이벤트"
|
||||||
|
/>
|
||||||
|
</v-radio-group>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text v-if="banner.type === 'CREATOR'">
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
크리에이터
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="banner.creator_id"
|
||||||
|
:items="creators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="value"
|
||||||
|
label="크리에이터 선택"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text v-else-if="banner.type === 'LINK'">
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
링크
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-text-field
|
||||||
|
v-model="banner.link"
|
||||||
|
label="링크"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text v-else>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
이벤트
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="banner.event_id"
|
||||||
|
:items="events"
|
||||||
|
item-text="title"
|
||||||
|
item-value="value"
|
||||||
|
label="이벤트 선택"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
19금
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="banner.is_adult"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
배너 이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="banner.thumbnail_image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="banner.thumbnail_image_url"
|
||||||
|
:src="banner.thumbnail_image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="is_modify === true"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_delete_confirm_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteBanner"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
|
||||||
|
import * as accountApi from "@/api/member";
|
||||||
|
import * as eventApi from "@/api/event";
|
||||||
|
import * as api from "@/api/audio_content"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AudioContentMainTopBanner",
|
||||||
|
|
||||||
|
components: {Draggable},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
is_modify: false,
|
||||||
|
show_write_dialog: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
selected_banner: {},
|
||||||
|
banner: {type: 'CREATOR'},
|
||||||
|
banners: [],
|
||||||
|
events: [],
|
||||||
|
creators: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCreatorList()
|
||||||
|
await this.getEvents()
|
||||||
|
await this.getBanners()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.banner.thumbnail_image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.banner.thumbnail_image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.is_modify = false
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.banner = {type: 'CREATOR'}
|
||||||
|
this.selected_banner = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyBannerDialog(banner) {
|
||||||
|
this.is_modify = true
|
||||||
|
this.selected_banner = banner
|
||||||
|
|
||||||
|
this.banner.id = banner.id
|
||||||
|
this.banner.type = banner.type
|
||||||
|
this.banner.thumbnail_image_url = banner.thumbnailImageUrl
|
||||||
|
this.banner.event_id = banner.eventId
|
||||||
|
this.banner.event_thumbnail_image = banner.eventThumbnailImage
|
||||||
|
this.banner.creator_id = banner.creatorId
|
||||||
|
this.banner.creator_nickname = banner.creatorNickname
|
||||||
|
this.banner.link = banner.link
|
||||||
|
this.banner.is_adult = banner.isAdult
|
||||||
|
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.banner.type === 'EVENT' && (this.banner.event_id === null || this.banner.event_id === undefined)) {
|
||||||
|
this.notifyError("이벤트를 선택하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.banner.type === 'CREATOR' &&
|
||||||
|
(this.banner.creator_id === null || this.banner.creator_id === undefined)) {
|
||||||
|
this.notifyError("크리에이터를 선택하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.banner.type === 'LINK' &&
|
||||||
|
(this.banner.link === null || this.banner.link === undefined || this.banner.link.trim().length <= 0)
|
||||||
|
) {
|
||||||
|
this.notifyError("링크를 입력하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.banner.thumbnail_image == null) {
|
||||||
|
this.notifyError("썸네일 이미지를 등록하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteConfirm(banner) {
|
||||||
|
this.selected_banner = banner
|
||||||
|
this.show_delete_confirm_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCancel() {
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading === true) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.banner.thumbnail_image)
|
||||||
|
|
||||||
|
let request = {
|
||||||
|
type: this.banner.type,
|
||||||
|
isAdult: this.banner.is_adult
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.banner.type === 'CREATOR') {
|
||||||
|
request.creatorId = this.banner.creator_id
|
||||||
|
} else if (this.banner.type === 'EVENT') {
|
||||||
|
request.eventId = this.banner.event_id
|
||||||
|
} else if (this.banner.type === 'LINK') {
|
||||||
|
request.link = this.banner.link
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append("request", JSON.stringify(request))
|
||||||
|
|
||||||
|
const res = await api.saveBanner(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
|
||||||
|
this.banners = []
|
||||||
|
await this.getBanners()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
let request = {id: this.banner.id}
|
||||||
|
|
||||||
|
if (this.banner.thumbnail_image !== null) {
|
||||||
|
formData.append("image", this.banner.thumbnail_image)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_banner.eventId !== this.banner.event_id &&
|
||||||
|
this.banner.event_id !== null &&
|
||||||
|
this.banner.event_id !== undefined
|
||||||
|
) {
|
||||||
|
request.type = this.banner.type
|
||||||
|
request.eventId = this.banner.event_id
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_banner.creator_id !== this.banner.creator_id &&
|
||||||
|
this.banner.creator_id !== null &&
|
||||||
|
this.banner.creator_id !== undefined
|
||||||
|
) {
|
||||||
|
request.type = this.banner.type
|
||||||
|
request.creatorId = this.banner.creator_id
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.selected_banner.link !== this.banner.link &&
|
||||||
|
this.banner.link !== null &&
|
||||||
|
this.banner.link !== undefined
|
||||||
|
) {
|
||||||
|
request.type = this.banner.type
|
||||||
|
request.link = this.banner.link
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_banner.isAdult !== this.banner.is_adult) {
|
||||||
|
request.isAdult = this.banner.is_adult
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append("request", JSON.stringify(request))
|
||||||
|
|
||||||
|
const res = await api.modifyBanner(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
|
||||||
|
this.banners = []
|
||||||
|
await this.getBanners()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteBanner() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("request", JSON.stringify({id: this.selected_banner.id, isActive: false}))
|
||||||
|
const res = await api.modifyBanner(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('삭제되었습니다.')
|
||||||
|
|
||||||
|
this.banners = []
|
||||||
|
await this.getBanners()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async onDropCallback(items) {
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = await api.updateBannerOrders(ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCreatorList() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await accountApi.getCounselorList()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.creators = res.data.data.map((item) => {
|
||||||
|
return {name: item.nickname, value: item.id}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getEvents() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await eventApi.getEvents(1)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.events = res.data.data.eventList.map((item) => {
|
||||||
|
return {title: item.title, value: item.id}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getBanners() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getBannerList()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.banners = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,268 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>콘텐츠 테마 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
테마 추가등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<draggable
|
||||||
|
v-model="themes"
|
||||||
|
class="row"
|
||||||
|
@end="onDropCallback(themes)"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="(theme, i) in themes"
|
||||||
|
:key="i"
|
||||||
|
cols="2"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
<v-img
|
||||||
|
:src="theme.image"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
{{ theme.theme }}
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="deleteTheme(theme)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</draggable>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>테마 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="theme_text"
|
||||||
|
label="테마"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="image_url"
|
||||||
|
:src="image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/audio_content_theme'
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AudioContentTheme",
|
||||||
|
|
||||||
|
components: {Draggable},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
themes: [],
|
||||||
|
show_dialog: false,
|
||||||
|
theme_text: null,
|
||||||
|
image: null,
|
||||||
|
image_url: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getThemes()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async onDropCallback(items) {
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = await api.updateThemeOrders(ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.theme = null
|
||||||
|
},
|
||||||
|
|
||||||
|
async getThemes() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let res = await api.getThemes();
|
||||||
|
this.themes = res.data.data
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteTheme(theme) {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
let res = await api.deleteTheme(theme.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
await this.getThemes()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({theme: this.theme_text}))
|
||||||
|
|
||||||
|
const res = await api.enrollment(formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.theme_text = null
|
||||||
|
this.themes = []
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
|
||||||
|
await this.getThemes()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>수다친구별 관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CounselingByCounselor"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>일별 상담관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CounselingDaily"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>상담권 관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CounselingTickets"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>수다친구-정산관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CounselorCalculate"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>요즘친구 리스트</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_source"
|
||||||
|
label="예) youtube, google"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_medium"
|
||||||
|
label="예) email, cpc"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="utm_campaign"
|
||||||
|
label="예) 화이트데이"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="2" />
|
||||||
|
<v-col cols="4">
|
||||||
|
<v-text-field
|
||||||
|
v-model="search_word"
|
||||||
|
label="이메일 혹은 닉네임을 입력하세요"
|
||||||
|
@keyup.enter="search"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
slot="append"
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
@click="search"
|
||||||
|
>
|
||||||
|
검색
|
||||||
|
</v-btn>
|
||||||
|
</v-text-field>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-simple-table class="elevation-10">
|
||||||
|
<template>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center">
|
||||||
|
회원번호
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이메일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
닉네임
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이미지
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
회원타입
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
OS
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
성인인증
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
가입일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
이용중지/탈퇴일
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
공유
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="item in accounts"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<td>{{ item.id }}</td>
|
||||||
|
<td>{{ item.email }}</td>
|
||||||
|
<td>{{ item.nickname }}</td>
|
||||||
|
<td align="center">
|
||||||
|
<v-img
|
||||||
|
max-width="100"
|
||||||
|
max-height="100"
|
||||||
|
:src="item.profileUrl"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.userType }}</td>
|
||||||
|
<td>
|
||||||
|
<div v-if="item.container === 'aos'">
|
||||||
|
Android
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
iOS
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div v-if="item.auth">
|
||||||
|
O
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
X
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.signUpDate }}</td>
|
||||||
|
<td>{{ item.signOutDate }}</td>
|
||||||
|
<td>
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="shareCreatorChannel(item)"
|
||||||
|
>
|
||||||
|
공유
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/member";
|
||||||
|
import * as dynamicLink from "@/api/firebase_dynamic_link";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CounselorList",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
search_word: '',
|
||||||
|
accounts: [],
|
||||||
|
account: {},
|
||||||
|
utm_source: '',
|
||||||
|
utm_medium: '',
|
||||||
|
utm_campaign: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getAccounts()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async search() {
|
||||||
|
this.page = 1
|
||||||
|
await this.searchAccount()
|
||||||
|
},
|
||||||
|
|
||||||
|
async searchAccount() {
|
||||||
|
if (this.search_word.length === 0) {
|
||||||
|
await this.getAccounts()
|
||||||
|
} else if (this.search_word.length < 2) {
|
||||||
|
this.notifyError('검색어를 2글자 이상 입력하세요.')
|
||||||
|
} else {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.searchCreatorAccount(this.search_word, this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 20)
|
||||||
|
this.accounts = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
if (this.search_word.length < 2) {
|
||||||
|
this.search_word = ''
|
||||||
|
await this.getAccounts()
|
||||||
|
} else {
|
||||||
|
await this.searchAccount()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getAccounts() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getCreatorAccountList(this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 20)
|
||||||
|
this.accounts = data.items
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async shareCreatorChannel(item) {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const linkData = await dynamicLink.shareCreatorChannel(item, this.utm_source, this.utm_medium, this.utm_campaign);
|
||||||
|
if (linkData.status === 200) {
|
||||||
|
await navigator.clipboard.writeText(linkData.data.shortLink)
|
||||||
|
this.notifySuccess("링크가 복사되었습니다.")
|
||||||
|
} else {
|
||||||
|
this.notifyError("링크를 생성하지 못했습니다.")
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>후기관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "CounselorReview"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,316 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>수다친구 관심사 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
관심사 추가등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<draggable
|
||||||
|
v-model="tags"
|
||||||
|
class="row"
|
||||||
|
@end="onDropCallback(tags)"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="(tag, i) in tags"
|
||||||
|
:key="i"
|
||||||
|
cols="2"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
<v-img
|
||||||
|
:src="tag.image"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
{{ tag.tag }}
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="showModifyTagDialog(tag)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="deleteTag(tag)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</draggable>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>관심사 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="tag_text"
|
||||||
|
label="관심사"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="image_url"
|
||||||
|
:src="image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_tag !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/counselor_tag";
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CounselorTags",
|
||||||
|
|
||||||
|
components: {Draggable},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
tags: [],
|
||||||
|
show_dialog: false,
|
||||||
|
selected_tag: null,
|
||||||
|
tag_text: null,
|
||||||
|
image: null,
|
||||||
|
image_url: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getTags()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async onDropCallback(items) {
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = await api.updateTagOrders(ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyTagDialog(tag) {
|
||||||
|
this.selected_tag = tag
|
||||||
|
this.image_url = tag.image
|
||||||
|
this.tag_text = tag.tag
|
||||||
|
this.show_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({tag: this.tag_text}))
|
||||||
|
|
||||||
|
const res = await api.enrollment(formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
this.tags = []
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTags() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let res = await api.getTags();
|
||||||
|
this.tags = res.data.data
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteTag(tag) {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
let res = await api.deleteTag(tag.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({tag: this.tag_text}))
|
||||||
|
|
||||||
|
const res = await api.modifyTag(this.selected_tag.id, formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
this.tags = []
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<h1>대시보드</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Dashboard"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>탐색</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
탐색 섹션 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="explorer_sections"
|
||||||
|
:loading="isLoading"
|
||||||
|
:items-per-page="20"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<draggable
|
||||||
|
v-model="props.items"
|
||||||
|
tag="tbody"
|
||||||
|
@end="onDropCallback(props.items)"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
v-for="(item, index) in props.items"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<td>{{ item.title }}</td>
|
||||||
|
<td>{{ item.coloredTitle }}</td>
|
||||||
|
<td>#{{ item.color }}</td>
|
||||||
|
<td>{{ item.tags.map((tag) => '#' + tag).join(' ') }}</td>
|
||||||
|
<td>
|
||||||
|
<span v-if="item.isAdult">
|
||||||
|
O
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span v-if="item.isActive">
|
||||||
|
O
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="showModifyDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</draggable>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>탐색 섹션 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="colored_title"
|
||||||
|
label="제목에 컬러를 변경할 단어(선택)"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="color"
|
||||||
|
label="컬러(ex > 00ff00)(선택)"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
관심사(최소 1개 이상)<br><br>
|
||||||
|
----------------
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col
|
||||||
|
v-for="tag in creator_tags"
|
||||||
|
:key="tag.id"
|
||||||
|
cols="3"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="selected_tags"
|
||||||
|
:value="tag.tag"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
{{ tag.tag }}
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
----------------<br><br>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col>
|
||||||
|
<input
|
||||||
|
v-model="is_adult"
|
||||||
|
type="checkbox"
|
||||||
|
> 19금
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text v-if="selected_explorer_section != null">
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col>
|
||||||
|
<input
|
||||||
|
v-model="is_active"
|
||||||
|
type="checkbox"
|
||||||
|
> 활성화
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_explorer_section != null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="validate"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/explorer"
|
||||||
|
import * as creatorTagApi from "@/api/counselor_tag";
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ExplorerSectionView",
|
||||||
|
|
||||||
|
components: {Draggable},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
show_write_dialog: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
creator_tags: [],
|
||||||
|
selected_tags: [],
|
||||||
|
explorer_sections: [],
|
||||||
|
selected_explorer_section: null,
|
||||||
|
title: null,
|
||||||
|
colored_title: null,
|
||||||
|
color: null,
|
||||||
|
is_adult: false,
|
||||||
|
is_active: true,
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '제목',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '제목에 컬러를 변경할 단어',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'coloredTitle',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '컬러',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'color',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관심사',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tags',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '19금',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isAdult',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '사용여부',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isActive',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCreatorTags()
|
||||||
|
await this.getExplorerSections()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.title === null || this.title.trim().length <= 0) {
|
||||||
|
this.notifyError("제목을 입력하세요.")
|
||||||
|
} else if (
|
||||||
|
this.selected_tags === null ||
|
||||||
|
this.selected_tags.length <= 0
|
||||||
|
) {
|
||||||
|
this.notifyError("관심사를 선택하세요.")
|
||||||
|
} else {
|
||||||
|
this.submit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const res = await api.createExplorerSection({
|
||||||
|
"title": this.title,
|
||||||
|
"isAdult": this.is_adult,
|
||||||
|
"tagList": this.selected_tags,
|
||||||
|
"coloredTitle": this.colored_title,
|
||||||
|
"color": this.color
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getExplorerSections()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const res = await api.updateExplorerSection({
|
||||||
|
"id": this.selected_explorer_section.id,
|
||||||
|
"title": this.title !== this.selected_explorer_section.title ? this.title : null,
|
||||||
|
"isAdult": this.is_adult !== this.selected_explorer_section.isAdult ? this.is_adult : null,
|
||||||
|
"isActive": this.is_active !== this.selected_explorer_section.isActive ? this.is_active : null,
|
||||||
|
"tagList": this.selected_tags !== this.selected_explorer_section.tags ? this.selected_tags : null,
|
||||||
|
"coloredTitle": this.colored_title !== this.selected_explorer_section.coloredTitle ? this.colored_title : null,
|
||||||
|
"color": this.color !== this.selected_explorer_section.color ? this.color : null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getExplorerSections()
|
||||||
|
this.is_loading = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
await this.getExplorerSections()
|
||||||
|
},
|
||||||
|
|
||||||
|
async getExplorerSections() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getExplorerSections(this.page)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const totalPage = Math.ceil(data.totalCount / 20)
|
||||||
|
this.explorer_sections = data.explorerSectionItemList;
|
||||||
|
|
||||||
|
if (totalPage <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = totalPage
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCreatorTags() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await creatorTagApi.getTags()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.creator_tags = res.data.data;
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyDialog(item) {
|
||||||
|
this.selected_explorer_section = item;
|
||||||
|
this.title = item.title;
|
||||||
|
this.colored_title = item.coloredTitle;
|
||||||
|
this.color = item.color;
|
||||||
|
this.selected_tags = item.tags;
|
||||||
|
this.is_adult = item.isAdult;
|
||||||
|
this.is_active = item.isActive;
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.selected_explorer_section = null
|
||||||
|
this.selected_tags = []
|
||||||
|
this.title = null
|
||||||
|
this.colored_title = null
|
||||||
|
this.color = null
|
||||||
|
this.is_adult = false
|
||||||
|
this.is_active = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async onDropCallback(items) {
|
||||||
|
this.explorer_sections = items
|
||||||
|
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const firstOrders = (this.page - 1) * 20 + 1
|
||||||
|
|
||||||
|
const res = await api.updateExplorerSectionsOrders(firstOrders, ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>라이브 관리 (진행예정 / 진행중)</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="liveList"
|
||||||
|
:loading="isLoading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.id="{ item }">
|
||||||
|
{{ item.id }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.title="{ item }">
|
||||||
|
{{ item.title }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.content="{ item }">
|
||||||
|
{{ item.content }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.nickname="{ item }">
|
||||||
|
{{ item.managerNickname }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.cover="{ item }">
|
||||||
|
<img
|
||||||
|
:src="item.coverImageUrl"
|
||||||
|
alt=""
|
||||||
|
height="100"
|
||||||
|
width="100"
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.ing="{ item }">
|
||||||
|
<span v-if="item.channelName.length > 0">진행중</span>
|
||||||
|
<span v-else>진행예정</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.type="{ item }">
|
||||||
|
<span v-if="item.type === 'SECRET'">비밀</span>
|
||||||
|
<span v-else-if="item.type === 'PRIVATE'">비공개</span>
|
||||||
|
<span v-else>공개</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.nickname="{ item }">
|
||||||
|
{{ item.password }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.isAdult="{ item }">
|
||||||
|
<span v-if="item.isAdult">O</span>
|
||||||
|
<span v-else>X</span>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from "@/api/live"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LiveRoom",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
liveList: [],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '방번호',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '타이틀',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '공지',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'content',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '방장',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'managerNickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '커버이미지',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'cover',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '진행여부',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'ing',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '공개여부',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'type',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '비밀번호',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'password',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '19금',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isAdult',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getLive()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getLive() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.isLoading = false
|
||||||
|
|
||||||
|
const res = await api.getLive()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.liveList = res.data.data.liveList
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,537 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>추천 요즘라이브</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
추천 요즘라이브 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="recommendLiveList"
|
||||||
|
:loading="isLoading"
|
||||||
|
:items-per-page="20"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<draggable
|
||||||
|
v-model="props.items"
|
||||||
|
tag="tbody"
|
||||||
|
@end="onDropCallback(props.items)"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
v-for="(item, index) in props.items"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
:src="item.image"
|
||||||
|
alt=""
|
||||||
|
height="100"
|
||||||
|
width="100"
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
<td> <h3>{{ item.creatorNickname }}</h3> </td>
|
||||||
|
<td>
|
||||||
|
<h3>
|
||||||
|
{{ item.startDate }} ~ {{ item.endDate }}
|
||||||
|
</h3>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<h3 v-if="item.isAdult">
|
||||||
|
O
|
||||||
|
</h3>
|
||||||
|
<h3 v-else>
|
||||||
|
X
|
||||||
|
</h3>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="showModifyDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</draggable>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>추천 요즘라이브 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
요즘친구
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="creator_id"
|
||||||
|
:items="creatorList"
|
||||||
|
item-text="name"
|
||||||
|
item-value="value"
|
||||||
|
label="크리에이터 선택"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
기간
|
||||||
|
</v-col>
|
||||||
|
<v-col
|
||||||
|
cols="8"
|
||||||
|
class="datepicker-wrapper"
|
||||||
|
>
|
||||||
|
<datetime
|
||||||
|
v-model="start_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD H:i"
|
||||||
|
/>
|
||||||
|
<div> ~ </div>
|
||||||
|
<datetime
|
||||||
|
v-model="end_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD H:i"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
19금
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="is_adult"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
이미지
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
이미지 불러오기
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="image_url"
|
||||||
|
:src="image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_recommend_live !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="validate"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Draggable from 'vuedraggable';
|
||||||
|
import datetime from 'vuejs-datetimepicker';
|
||||||
|
import * as accountApi from "@/api/member";
|
||||||
|
import * as api from "@/api/recommend_suda_creator"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LiveRecommendView",
|
||||||
|
components: { datetime, Draggable },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
show_write_dialog: false,
|
||||||
|
image: null,
|
||||||
|
image_url: null,
|
||||||
|
creator_id: null,
|
||||||
|
creatorList: [],
|
||||||
|
recommendLiveList: [],
|
||||||
|
selected_recommend_live: null,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
is_adult: false,
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '이미지',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'image',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '요즘친구',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'creatorNickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '기간',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '19금',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isAdult',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getCreatorList()
|
||||||
|
await this.getRecommendSudaCreator()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async onDropCallback(items) {
|
||||||
|
this.recommendLiveList = items
|
||||||
|
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const firstOrders = (this.page - 1) * 20 + 1
|
||||||
|
|
||||||
|
const res = await api.updateRecommendSudaCreatorOrders(firstOrders, ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showModifyDialog(item) {
|
||||||
|
this.selected_recommend_live = item;
|
||||||
|
this.is_adult = item.isAdult;
|
||||||
|
this.creator_id = item.creatorId;
|
||||||
|
this.start_date = item.startDate;
|
||||||
|
this.end_date = item.endDate;
|
||||||
|
this.image_url = item.image;
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("recommend_suda_creator_id", this.selected_recommend_live.id)
|
||||||
|
|
||||||
|
if (this.image !== null) {
|
||||||
|
formData.append("image", this.image)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_recommend_live.creatorId !== this.creator_id) {
|
||||||
|
formData.append("creator_id", this.creator_id)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_recommend_live.startDate !== this.start_date) {
|
||||||
|
formData.append("start_date", this.start_date)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_recommend_live.endDate !== this.end_date) {
|
||||||
|
formData.append("end_date", this.end_date)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.selected_recommend_live.isAdult !== this.is_adult) {
|
||||||
|
formData.append("is_adult", this.is_adult)
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.updateRecommendSudaCreator(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getRecommendSudaCreator()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("creator_id", this.creator_id)
|
||||||
|
formData.append("start_date", this.start_date)
|
||||||
|
formData.append("end_date", this.end_date)
|
||||||
|
formData.append("is_adult", this.is_adult)
|
||||||
|
|
||||||
|
const res = await api.createRecommendSudaCreator(formData);
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getRecommendSudaCreator()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (
|
||||||
|
this.image === null ||
|
||||||
|
this.creator_id === null ||
|
||||||
|
this.start_date === null ||
|
||||||
|
this.end_date === null
|
||||||
|
) {
|
||||||
|
this.notifyError('내용을 입력하세요')
|
||||||
|
} else {
|
||||||
|
this.submit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.creator_id = null
|
||||||
|
this.start_date = null
|
||||||
|
this.end_date = null
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
await this.getRecommendSudaCreator()
|
||||||
|
},
|
||||||
|
|
||||||
|
async getRecommendSudaCreator() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getRecommendSudaCreator(this.page)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const totalPage = Math.ceil(data.totalCount / 20)
|
||||||
|
this.recommendLiveList = data.recommendCreatorList
|
||||||
|
|
||||||
|
if (totalPage <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = totalPage
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCreatorList() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await accountApi.getCounselorList()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.creatorList = res.data.data.map((item) => {
|
||||||
|
return {name: item.nickname, value: item.id}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-wrapper > div {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__text {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__actions {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__actions > .v-btn {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
td img {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,316 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>라이브 관심사 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
관심사 추가등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<draggable
|
||||||
|
v-model="tags"
|
||||||
|
class="row"
|
||||||
|
@end="onDropCallback(tags)"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="(tag, i) in tags"
|
||||||
|
:key="i"
|
||||||
|
cols="2"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
<v-img
|
||||||
|
:src="tag.image"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
{{ tag.tag }}
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="showModifyTagDialog(tag)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="deleteTag(tag)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</draggable>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>관심사 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="tag_text"
|
||||||
|
label="관심사"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="image_url"
|
||||||
|
:src="image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_tag !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/live_tag'
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PromotionSudaTags",
|
||||||
|
|
||||||
|
components: {Draggable},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
tags: [],
|
||||||
|
show_dialog: false,
|
||||||
|
selected_tag: null,
|
||||||
|
tag_text: null,
|
||||||
|
image: null,
|
||||||
|
image_url: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getTags()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async onDropCallback(items) {
|
||||||
|
const ids = items.map((item) => {
|
||||||
|
return item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = await api.updateTagOrders(ids)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyTagDialog(tag) {
|
||||||
|
this.selected_tag = tag
|
||||||
|
this.image_url = tag.image
|
||||||
|
this.tag_text = tag.tag
|
||||||
|
this.show_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({tag: this.tag_text}))
|
||||||
|
|
||||||
|
const res = await api.enrollment(formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
this.tags = []
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTags() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
let res = await api.getTags();
|
||||||
|
this.tags = res.data.data
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteTag(tag) {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
let res = await api.deleteTag(tag.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({tag: this.tag_text}))
|
||||||
|
|
||||||
|
const res = await api.modifyTag(this.selected_tag.id, formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.tag_text = null
|
||||||
|
this.tags = []
|
||||||
|
this.notifySuccess(res.data.message)
|
||||||
|
|
||||||
|
await this.getTags()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>수다친구별 관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SudaByCounselor"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>수다현황</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SudaStatus"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>수다친구별 현황</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PaymentCounselorStatus"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>일별 결제현황</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PaymentDailyStatus"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>배너 관리</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "BannerView"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,415 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>충전 이벤트</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
충전 이벤트 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="charge_event_list"
|
||||||
|
:loading="is_loading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.title="{ item }">
|
||||||
|
{{ item.title }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.period="{ item }">
|
||||||
|
{{ item.startDate }} ~ {{ item.endDate }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.availableCount="{ item }">
|
||||||
|
{{ item.availableCount }} 번 참여가능
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.addPercent="{ item }">
|
||||||
|
{{ item.addPercent }} %
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.isActive="{ item }">
|
||||||
|
<div v-if="item.isActive">
|
||||||
|
O
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
X
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.management="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:disabled="is_loading"
|
||||||
|
@click="showModifyDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>충전 이벤트 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="available_count"
|
||||||
|
label="참여가능 횟수"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="add_percent"
|
||||||
|
label="추가 충전 %"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
기간
|
||||||
|
</v-col>
|
||||||
|
<v-col
|
||||||
|
cols="8"
|
||||||
|
class="datepicker-wrapper"
|
||||||
|
>
|
||||||
|
<datetime
|
||||||
|
v-model="start_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
<div> ~ </div>
|
||||||
|
<datetime
|
||||||
|
v-model="end_date"
|
||||||
|
class="datepicker"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text v-show="selected_charge_event !== null">
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
활성화
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="is_active"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_charge_event !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="validate"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/charge_event'
|
||||||
|
import datetime from 'vuejs-datetimepicker';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ChargeEvent",
|
||||||
|
components: { datetime },
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
show_write_dialog: false,
|
||||||
|
|
||||||
|
selected_charge_event: null,
|
||||||
|
title: null,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
available_count: null,
|
||||||
|
add_percent: null,
|
||||||
|
is_active: null,
|
||||||
|
|
||||||
|
charge_event_list: [],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '제목',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '기간',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'period',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '참여가능 횟수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'availableCount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '추가 충전 %',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'addPercent',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '활성화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isActive',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getChargeEventList();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifyDialog(item) {
|
||||||
|
this.selected_charge_event = item;
|
||||||
|
this.title = item.title;
|
||||||
|
this.add_percent = item.addPercent;
|
||||||
|
this.available_count = item.availableCount;
|
||||||
|
this.start_date = item.startDate;
|
||||||
|
this.end_date = item.endDate;
|
||||||
|
this.is_active = item.isActive;
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.title === null) {
|
||||||
|
this.notifyError('제목을 입력하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.available_count === null) {
|
||||||
|
this.notifyError('참여가능 횟수를 입력하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isNaN(this.available_count)) {
|
||||||
|
this.notifyError('참여가능 횟수는 숫자만 입력 가능합니다.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.add_percent === null) {
|
||||||
|
this.notifyError('추가 충전 비율(%)을 입력하세요')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isNaN(this.add_percent)) {
|
||||||
|
this.notifyError('추가 충전 비율(%)은 숫자만 입력 가능합니다.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.start_date === null || this.end_date === null) {
|
||||||
|
this.notifyError('이벤트 기간을 입력하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.submit()
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.selected_charge_event = null;
|
||||||
|
this.title = null;
|
||||||
|
this.add_percent = null;
|
||||||
|
this.available_count = null;
|
||||||
|
this.start_date = null;
|
||||||
|
this.end_date = null;
|
||||||
|
this.show_write_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.save(
|
||||||
|
this.title,
|
||||||
|
this.start_date,
|
||||||
|
this.end_date,
|
||||||
|
this.available_count,
|
||||||
|
this.add_percent
|
||||||
|
)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
|
||||||
|
this.charge_event_list = [];
|
||||||
|
await this.getChargeEventList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.modify(
|
||||||
|
this.selected_charge_event.id,
|
||||||
|
this.title !== this.selected_charge_event.title ? this.title : null,
|
||||||
|
this.start_date !== this.selected_charge_event.startDate ? this.start_date : null,
|
||||||
|
this.end_date !== this.selected_charge_event.endDate ? this.end_date : null,
|
||||||
|
this.available_count !== this.selected_charge_event.availableCount ? this.available_count : null,
|
||||||
|
this.add_percent !== this.selected_charge_event.addPercent ? this.add_percent : null,
|
||||||
|
this.is_active !== this.selected_charge_event.isActive ? this.is_active : null
|
||||||
|
)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.cancel()
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
|
||||||
|
this.charge_event_list = [];
|
||||||
|
await this.getChargeEventList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getChargeEventList() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getChargeEventList();
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.charge_event_list = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.is_loading = false
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.datepicker {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-wrapper > div {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__text {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__actions {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card__actions > .v-btn {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,495 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>이벤트 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
이벤트 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col
|
||||||
|
v-for="(item, i) in events"
|
||||||
|
:key="i"
|
||||||
|
cols="3"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<v-spacer />
|
||||||
|
<v-img
|
||||||
|
:src="item.thumbnailImageUrl"
|
||||||
|
@click="clickEvent(item)"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-title>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-title v-show="!is_modify">
|
||||||
|
이벤트 등록
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-title v-show="is_modify">
|
||||||
|
이벤트 수정
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="event.title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="thumbnailImage">
|
||||||
|
썸네일 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="thumbnailImage"
|
||||||
|
v-model="event.thumbnailImage"
|
||||||
|
@change="thumbnailImageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="event.thumbnailImageUrl"
|
||||||
|
:src="event.thumbnailImageUrl"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="detailImage">
|
||||||
|
상세 이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="detailImage"
|
||||||
|
v-model="event.detailImage"
|
||||||
|
@change="detailImageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="event.detailImageUrl"
|
||||||
|
:src="event.detailImageUrl"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="popupImage">
|
||||||
|
팝업 이미지 등록
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="popupImage"
|
||||||
|
v-model="event.popupImage"
|
||||||
|
@change="popupImageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="event.popupImageUrl"
|
||||||
|
:src="event.popupImageUrl"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="event.link"
|
||||||
|
label="link"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
팝업
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<input
|
||||||
|
v-model="event.isPopup"
|
||||||
|
type="checkbox"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-btn
|
||||||
|
v-show="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteConfirm"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-show="!is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-show="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_delete_confirm_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteEvent"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/event'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EventView",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
is_modify: false,
|
||||||
|
page: 1,
|
||||||
|
events: [],
|
||||||
|
event: {},
|
||||||
|
show_write_dialog: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getEvents()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
thumbnailImageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.event.thumbnailImageUrl = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.event.thumbnailImageUrl = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
detailImageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.event.detailImageUrl = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.event.detailImageUrl = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
popupImageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.event.popupImageUrl = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.event.popupImageUrl = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getEvents() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getEvents(this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.events = res.data.data.eventList
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
await this.getEvents()
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
clickEvent(item) {
|
||||||
|
this.is_modify = true
|
||||||
|
this.event.id = item.id
|
||||||
|
this.event.thumbnailImageUrl = item.thumbnailImageUrl
|
||||||
|
this.event.detailImageUrl = item.detailImageUrl
|
||||||
|
this.event.link = item.link
|
||||||
|
this.event.title = item.title
|
||||||
|
this.event.isPopup = item.isPopup
|
||||||
|
this.event.popupImageUrl = item.popupImageUrl
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.is_modify = false
|
||||||
|
this.event = {}
|
||||||
|
this.show_write_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.event.title == null) {
|
||||||
|
this.notifyError("제목을 입력하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.thumbnailImage == null) {
|
||||||
|
this.notifyError("썸네일 이미지를 등록하세요")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) {
|
||||||
|
this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("title", this.event.title)
|
||||||
|
formData.append("thumbnail", this.event.thumbnailImage)
|
||||||
|
formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false)
|
||||||
|
|
||||||
|
if (this.event.detailImage != null) {
|
||||||
|
formData.append("detail", this.event.detailImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.popupImage != null) {
|
||||||
|
formData.append("popup", this.event.popupImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.link != null && this.event.link.trim().length > 0) {
|
||||||
|
formData.append("link", this.event.link)
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.save(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getEvents()
|
||||||
|
this.event = {}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("id", this.event.id)
|
||||||
|
|
||||||
|
if (this.event.title != null && this.event.title.trim().length > 0) {
|
||||||
|
formData.append("title", this.event.title)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.thumbnailImage != null) {
|
||||||
|
formData.append("thumbnail", this.event.thumbnailImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.detailImage != null) {
|
||||||
|
formData.append("detail", this.event.detailImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.popupImage != null) {
|
||||||
|
formData.append("popup", this.event.popupImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.isPopup != null) {
|
||||||
|
formData.append("isPopup", this.event.isPopup)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.event.link != null && this.event.link.trim().length > 0) {
|
||||||
|
formData.append("link", this.event.link)
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.modify(formData)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getEvents()
|
||||||
|
this.event = {}
|
||||||
|
this.is_modify = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteConfirm() {
|
||||||
|
this.show_delete_confirm_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCancel() {
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteEvent() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.deleteEvent(this.event.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
this.notifySuccess('삭제되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getEvents()
|
||||||
|
this.event = {}
|
||||||
|
this.is_modify = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,362 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>추천 상담친구 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showAddCounselorDialog"
|
||||||
|
>
|
||||||
|
추천 상담친구 추가
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="recommendCounselorList"
|
||||||
|
:loading="isLoading"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.image="{ item }">
|
||||||
|
<img
|
||||||
|
:src="item.profileImageUrl"
|
||||||
|
alt=""
|
||||||
|
height="100"
|
||||||
|
width="100"
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.introduce="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
text
|
||||||
|
color="blue darken-1"
|
||||||
|
@click="showIntroduceDialog(item)"
|
||||||
|
>
|
||||||
|
[보기]
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.isCounseling="{ item }">
|
||||||
|
<h3 v-if="item.isCounseling">
|
||||||
|
O
|
||||||
|
</h3>
|
||||||
|
<h3 v-else>
|
||||||
|
X
|
||||||
|
</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.youtubeUrl="{ item }">
|
||||||
|
<a :href="item.youtubeUrl">{{ item.youtubeUrl }}</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.instagramUrl="{ item }">
|
||||||
|
<a :href="item.instagramUrl">{{ item.instagramUrl }}</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.management="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
class="white--text"
|
||||||
|
color="blue darken-1"
|
||||||
|
@click="deleteRecommendCounselor(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_add_counselor_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>추천 상담친구 추가</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
추천친구
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="counselor_id"
|
||||||
|
:items="counselorList"
|
||||||
|
item-text="name"
|
||||||
|
item-value="value"
|
||||||
|
label="수다친구 선택"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="validate"
|
||||||
|
>
|
||||||
|
추가
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_introduce_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>{{ counselor_nickname }} 소개</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
{{ counselor_introduce }}
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="closeIntroduceDialog"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as accountApi from "@/api/member";
|
||||||
|
import * as api from '@/api/recommend_counselor'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PromotionRecommendCounselor",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
counselor_id: null,
|
||||||
|
counselorList: [],
|
||||||
|
recommendCounselorList: [],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '회원번호',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '썸네일',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'image',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '닉네임',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'nickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관심사',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tags',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '소개내용',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'introduce',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '상담유무',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isCounseling',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '유튜브',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'youtubeUrl',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '인스타그램',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'instagramUrl',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
show_add_counselor_dialog: false,
|
||||||
|
show_introduce_dialog: false,
|
||||||
|
counselor_introduce: null,
|
||||||
|
counselor_nickname: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getCounselorList()
|
||||||
|
this.getRecommendCounselorList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
closeIntroduceDialog() {
|
||||||
|
this.show_introduce_dialog = false
|
||||||
|
this.counselor_introduce = null
|
||||||
|
this.counselor_nickname = null
|
||||||
|
},
|
||||||
|
|
||||||
|
showIntroduceDialog(item) {
|
||||||
|
this.counselor_introduce = item.introduce
|
||||||
|
this.counselor_nickname = item.nickname
|
||||||
|
this.show_introduce_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
showAddCounselorDialog() {
|
||||||
|
this.show_add_counselor_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.counselor_id = null
|
||||||
|
this.show_add_counselor_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.counselor_id != null && this.counselor_id > 0) {
|
||||||
|
this.submit()
|
||||||
|
} else {
|
||||||
|
this.notifyError("수다친구를 선택해 주세요.")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.addRecommendCounselor(this.counselor_id)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_add_counselor_dialog = false
|
||||||
|
this.counselor_id = null
|
||||||
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
await this.getRecommendCounselorList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCounselorList() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await accountApi.getCounselorList()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.counselorList = res.data.data.map((item) => {
|
||||||
|
return {name: item.nickname, value: item.id}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getRecommendCounselorList() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getRecommendCounselorList()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.recommendCounselorList = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteRecommendCounselor(item) {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
const res = await api.deleteRecommendCounselor(item.id)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message || '삭제되었습니다.')
|
||||||
|
await this.getRecommendCounselorList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
td img {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,486 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>상황별 추천상담사</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
상황등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="situationList"
|
||||||
|
:loading="isLoading"
|
||||||
|
class="elevation-1"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.image="{ item }">
|
||||||
|
<img
|
||||||
|
:src="item.thumbnailImageUrl"
|
||||||
|
alt=""
|
||||||
|
height="100"
|
||||||
|
width="100"
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.counselor="{ item }">
|
||||||
|
- {{ item.counselorList[0].nickname }}<br>
|
||||||
|
- {{ item.counselorList[1].nickname }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.isActive="{ item }">
|
||||||
|
<h3 v-if="item.isActive">
|
||||||
|
O
|
||||||
|
</h3>
|
||||||
|
<h3 v-else>
|
||||||
|
X
|
||||||
|
</h3>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.management="{ item }">
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="showModifySituationDialog(item)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
:disabled="isLoading"
|
||||||
|
@click="deleteSituation(item)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>상황 등록</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="title"
|
||||||
|
label="제목"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
썸네일
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<div class="image-select">
|
||||||
|
<label for="image">
|
||||||
|
이미지 불러오기
|
||||||
|
</label>
|
||||||
|
<v-file-input
|
||||||
|
id="image"
|
||||||
|
v-model="image"
|
||||||
|
@change="imageAdd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
v-if="image_url"
|
||||||
|
:src="image_url"
|
||||||
|
alt=""
|
||||||
|
class="image-preview"
|
||||||
|
>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
추천친구
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-select
|
||||||
|
v-model="counselor1"
|
||||||
|
:items="counselorList"
|
||||||
|
item-text="name"
|
||||||
|
item-value="value"
|
||||||
|
label="수다친구 선택 1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<v-select
|
||||||
|
v-model="counselor2"
|
||||||
|
:items="counselorList"
|
||||||
|
item-text="name"
|
||||||
|
item-value="value"
|
||||||
|
label="수다친구 선택 2"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-card-text>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="4">
|
||||||
|
사용 여부
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-radio-group
|
||||||
|
v-model="is_active"
|
||||||
|
row
|
||||||
|
>
|
||||||
|
<v-spacer />
|
||||||
|
<v-radio
|
||||||
|
:value="true"
|
||||||
|
label="사용"
|
||||||
|
/>
|
||||||
|
<v-radio
|
||||||
|
:value="false"
|
||||||
|
label="미사용"
|
||||||
|
/>
|
||||||
|
<v-spacer />
|
||||||
|
</v-radio-group>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!isLoading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="selected_situation !== null"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="validate"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as accountApi from '@/api/member'
|
||||||
|
import * as api from '@/api/counselor_situation'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PromotionCounselorSituation",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
title: null,
|
||||||
|
image: null,
|
||||||
|
image_url: null,
|
||||||
|
is_active: null,
|
||||||
|
show_dialog: false,
|
||||||
|
selected_situation: null,
|
||||||
|
counselor1: null,
|
||||||
|
counselor2: null,
|
||||||
|
counselorList: [],
|
||||||
|
situationList: [],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '제목',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '썸네일',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'image',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '추천친구',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'counselor',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '사용여부',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'isActive',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '관리',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'management'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getCounselorList()
|
||||||
|
this.getSituationList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
imageAdd(payload) {
|
||||||
|
const file = payload;
|
||||||
|
if (file) {
|
||||||
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
|
} else {
|
||||||
|
this.image_url = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.title = null
|
||||||
|
this.selected_situation = null
|
||||||
|
this.is_active = null
|
||||||
|
this.counselor1 = null
|
||||||
|
this.counselor2 = null
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (
|
||||||
|
this.title === null ||
|
||||||
|
this.image === null ||
|
||||||
|
this.is_active === null ||
|
||||||
|
this.counselor2 === null ||
|
||||||
|
this.counselor1 === null
|
||||||
|
) {
|
||||||
|
this.notifyError('내용을 입력하세요')
|
||||||
|
} else if (this.counselor2 === this.counselor1) {
|
||||||
|
this.notifyError('다른 수다친구를 선택해 주세요.')
|
||||||
|
} else {
|
||||||
|
this.submit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showModifySituationDialog(item) {
|
||||||
|
this.selected_situation = item
|
||||||
|
this.counselor1 = item.counselorList[0].accountId
|
||||||
|
this.counselor2 = item.counselorList[1].accountId
|
||||||
|
this.title = item.title
|
||||||
|
this.image_url = item.thumbnailImageUrl
|
||||||
|
this.is_active = item.isActive
|
||||||
|
|
||||||
|
this.show_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({
|
||||||
|
title: this.title,
|
||||||
|
isActive: JSON.parse(this.is_active),
|
||||||
|
recommendCounselorIds: [this.counselor1, this.counselor2]
|
||||||
|
}))
|
||||||
|
|
||||||
|
const res = await api.createSituation(formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.title = null
|
||||||
|
this.selected_situation = null
|
||||||
|
this.is_active = null
|
||||||
|
this.counselor1 = null
|
||||||
|
this.counselor2 = null
|
||||||
|
|
||||||
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("image", this.image)
|
||||||
|
formData.append("request", JSON.stringify({
|
||||||
|
title: this.title,
|
||||||
|
isActive: JSON.parse(this.is_active),
|
||||||
|
recommendCounselorIds: [this.counselor1, this.counselor2]
|
||||||
|
}))
|
||||||
|
|
||||||
|
const res = await api.modifySituation(this.selected_situation.id, formData)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_dialog = false
|
||||||
|
this.image = null
|
||||||
|
this.image_url = null
|
||||||
|
this.title = null
|
||||||
|
this.selected_situation = null
|
||||||
|
this.is_active = null
|
||||||
|
this.counselor1 = null
|
||||||
|
this.counselor2 = null
|
||||||
|
this.situationList = []
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
|
||||||
|
await this.getSituationList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteSituation(item) {
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
const res = await api.deleteSituation(item.id)
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message || '삭제되었습니다.')
|
||||||
|
await this.getSituationList()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getSituationList() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getSituationList();
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.situationList = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getCounselorList() {
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await accountApi.getCounselorList()
|
||||||
|
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.counselorList = res.data.data.map((item) => {
|
||||||
|
return {name: item.nickname, value: item.id}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-select label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #232d4a;
|
||||||
|
color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-file-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td img {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,374 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>FAQ</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="9">
|
||||||
|
<v-radio-group
|
||||||
|
v-model="selected_category"
|
||||||
|
row
|
||||||
|
@change="getFaqs"
|
||||||
|
>
|
||||||
|
<v-radio
|
||||||
|
v-for="category in categories"
|
||||||
|
:key="category"
|
||||||
|
:label="category"
|
||||||
|
:value="category"
|
||||||
|
/>
|
||||||
|
</v-radio-group>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
FAQ 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-simple-table
|
||||||
|
class="elevation-10"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
<template>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center">
|
||||||
|
NO
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
카테고리
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
질문
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
답변
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="item in faqs"
|
||||||
|
:key="item.id"
|
||||||
|
@click="clickFaq(item)"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
{{ item.id }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{ item.category }}
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
{{ item.question }}
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
<div v-html="item.answer" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
<v-radio-group
|
||||||
|
v-model="faq.category"
|
||||||
|
row
|
||||||
|
>
|
||||||
|
<v-radio
|
||||||
|
v-for="category in categories"
|
||||||
|
:key="category"
|
||||||
|
:label="category"
|
||||||
|
:value="category"
|
||||||
|
/>
|
||||||
|
</v-radio-group>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="faq.question"
|
||||||
|
label="제목"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<VueEditor
|
||||||
|
v-model="faq.answer"
|
||||||
|
:editor-toolbar="customToolbar"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-btn
|
||||||
|
v-show="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteFaq"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-if="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-else
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/faq'
|
||||||
|
import {VueEditor} from "vue2-editor";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "FaqView",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
VueEditor,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
is_modify: false,
|
||||||
|
categories: [],
|
||||||
|
selected_category: '',
|
||||||
|
selected_faq: {},
|
||||||
|
faqs: [],
|
||||||
|
faq: {},
|
||||||
|
show_write_dialog: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
customToolbar: [
|
||||||
|
[{header: [false, 1, 2, 3, 4, 5, 6]}],
|
||||||
|
["bold", "italic", "underline"],
|
||||||
|
[
|
||||||
|
{align: ""},
|
||||||
|
{align: "center"},
|
||||||
|
{align: "right"},
|
||||||
|
{align: "justify"}
|
||||||
|
],
|
||||||
|
[{list: "ordered"}, {list: "bullet"}],
|
||||||
|
[{color: []}, {background: []}],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getFaqCategories()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getFaqCategories() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getCategories()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
this.categories = data
|
||||||
|
this.selected_category = data[0]
|
||||||
|
await this.getFaqs()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getFaqs() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
this.faqs = []
|
||||||
|
try {
|
||||||
|
const res = await api.getFaqs(this.selected_category)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.faqs = res.data.data
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.save(this.faq.question, this.faq.answer, this.faq.category)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
this.faq = {}
|
||||||
|
await this.getFaqs()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteFaq() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.deleteFaq(this.faq.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess(res.data.message || '삭제되었습니다.')
|
||||||
|
this.faq = {}
|
||||||
|
await this.getFaqs()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
this.is_modify = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
let request = {id: this.faq.id}
|
||||||
|
|
||||||
|
if (this.faq.question !== this.selected_faq.question) {
|
||||||
|
request.question = this.faq.question
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.faq.answer !== this.selected_faq.answer) {
|
||||||
|
request.answer = this.faq.answer
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.faq.category !== this.selected_faq.category) {
|
||||||
|
request.category = this.faq.category
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await api.modify(request)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
this.faq = {}
|
||||||
|
await this.getFaqs()
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
this.is_modify = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clickFaq(item) {
|
||||||
|
this.faq.id = item.id
|
||||||
|
this.faq.question = item.question
|
||||||
|
this.faq.answer = item.answer
|
||||||
|
this.faq.category = item.category
|
||||||
|
|
||||||
|
this.selected_faq = item
|
||||||
|
this.is_modify = true
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.faq = {}
|
||||||
|
this.selected_faq = {}
|
||||||
|
this.is_modify = false
|
||||||
|
this.show_write_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.faq.question == null || this.faq.question.trim().length === 0) {
|
||||||
|
this.notifyError("질문을 입력하세요.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.faq.answer == null || this.faq.answer.trim().length === 0) {
|
||||||
|
this.notifyError("답변을 입력하세요.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.faq.category == null || this.faq.category.trim().length === 0) {
|
||||||
|
this.notifyError("카테고리를 선택하세요.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,382 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>공지사항</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col>
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="showWriteDialog"
|
||||||
|
>
|
||||||
|
공지사항 등록
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-simple-table
|
||||||
|
class="elevation-10"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
<template>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center">
|
||||||
|
NO
|
||||||
|
</th>
|
||||||
|
<th class="text-left">
|
||||||
|
제목
|
||||||
|
</th>
|
||||||
|
<th class="text-center">
|
||||||
|
등록일
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="item in notices"
|
||||||
|
:key="item.id"
|
||||||
|
@click="clickNotice(item)"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
{{ item.id }}
|
||||||
|
</td>
|
||||||
|
<td class="text-left">
|
||||||
|
{{ item.title }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{ item.date }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="next"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_write_dialog"
|
||||||
|
max-width="1000px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
<v-text-field
|
||||||
|
v-model="notice.title"
|
||||||
|
label="제목"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<VueEditor
|
||||||
|
v-model="notice.content"
|
||||||
|
:editor-toolbar="customToolbar"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-btn
|
||||||
|
v-show="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteConfirm"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="cancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-show="!is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
v-show="is_modify"
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="modify"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-dialog
|
||||||
|
v-model="show_delete_confirm_dialog"
|
||||||
|
max-width="400px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-text />
|
||||||
|
<v-card-text>
|
||||||
|
삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions v-show="!is_loading">
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteCancel"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="deleteNotice"
|
||||||
|
>
|
||||||
|
확인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {VueEditor} from "vue2-editor";
|
||||||
|
import * as api from '@/api/notice'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "NoticeView",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
VueEditor,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
is_modify: false,
|
||||||
|
page: 1,
|
||||||
|
total_page: 0,
|
||||||
|
notices: [],
|
||||||
|
notice: {},
|
||||||
|
show_write_dialog: false,
|
||||||
|
show_delete_confirm_dialog: false,
|
||||||
|
customToolbar: [
|
||||||
|
[{header: [false, 1, 2, 3, 4, 5, 6]}],
|
||||||
|
["bold", "italic", "underline"],
|
||||||
|
[
|
||||||
|
{align: ""},
|
||||||
|
{align: "center"},
|
||||||
|
{align: "right"},
|
||||||
|
{align: "justify"}
|
||||||
|
],
|
||||||
|
[{list: "ordered"}, {list: "bullet"}],
|
||||||
|
[{color: []}, {background: []}],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getNotices()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async next() {
|
||||||
|
await this.getNotices()
|
||||||
|
},
|
||||||
|
|
||||||
|
async getNotices() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getNotices(this.page)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
|
||||||
|
const total_page = Math.ceil(data.totalCount / 20)
|
||||||
|
this.notices = res.data.data.noticeList
|
||||||
|
|
||||||
|
if (total_page <= 0)
|
||||||
|
this.total_page = 1
|
||||||
|
else
|
||||||
|
this.total_page = total_page
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showWriteDialog() {
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
clickNotice(item) {
|
||||||
|
this.is_modify = true
|
||||||
|
this.notice.id = item.id;
|
||||||
|
this.notice.title = item.title;
|
||||||
|
this.notice.content = item.content;
|
||||||
|
this.show_write_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.is_modify = false
|
||||||
|
this.notice = {}
|
||||||
|
this.show_write_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
if (this.notice.title == null || this.notice.title.trim().length === 0) {
|
||||||
|
this.notifyError("제목을 입력하세요.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.notice.content == null || this.notice.content.trim().length === 0) {
|
||||||
|
this.notifyError("내용을 입력하세요.")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
async submit() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.save(this.notice.title, this.notice.content)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess('등록되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getNotices()
|
||||||
|
this.notice = {}
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async modify() {
|
||||||
|
if (!this.validate()) return;
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.modify(this.notice.id, this.notice.title, this.notice.content)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.notifySuccess('수정되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getNotices()
|
||||||
|
this.notice = {}
|
||||||
|
this.is_modify = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteConfirm() {
|
||||||
|
this.show_delete_confirm_dialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteCancel() {
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteNotice() {
|
||||||
|
if (this.is_loading) return;
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.deleteNotice(this.notice.id)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.show_write_dialog = false
|
||||||
|
this.show_delete_confirm_dialog = false
|
||||||
|
this.notifySuccess('삭제되었습니다.')
|
||||||
|
this.page = 1
|
||||||
|
await this.getNotices()
|
||||||
|
this.notice = {}
|
||||||
|
this.is_modify = false
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid #444444;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border-left: 1px solid #444444;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:first-child, th:last-child {
|
||||||
|
width: 20%
|
||||||
|
}
|
||||||
|
|
||||||
|
th:first-child, td:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>개인정보 처리방침</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<VueEditor
|
||||||
|
v-model="privacy_policy"
|
||||||
|
:editor-toolbar="customToolbar"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col v-if="!is_loading">
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="save"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {VueEditor} from "vue2-editor";
|
||||||
|
import * as api from "@/api/stplat";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PrivacyView",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
VueEditor,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
stiplat_id: 0,
|
||||||
|
privacy_policy: '',
|
||||||
|
customToolbar: [
|
||||||
|
[{header: [false, 1, 2, 3, 4, 5, 6]}],
|
||||||
|
["bold", "italic", "underline"],
|
||||||
|
[
|
||||||
|
{align: ""},
|
||||||
|
{align: "center"},
|
||||||
|
{align: "right"},
|
||||||
|
{align: "justify"}
|
||||||
|
],
|
||||||
|
[{list: "ordered"}, {list: "bullet"}],
|
||||||
|
[{color: []}, {background: []}],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getPrivacyPolicy()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getPrivacyPolicy() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getPrivacyPolicy()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.privacy_policy = data.description
|
||||||
|
this.stiplat_id = data.id
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async save() {
|
||||||
|
if (this.stiplat_id < 1) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.privacy_policy.length < 10) {
|
||||||
|
this.notifyError('내용을 입력하세요')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.modify(this.stiplat_id, this.privacy_policy)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div>신고내역</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ReportView"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>서비스 이용약관</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<VueEditor
|
||||||
|
v-model="terms_of_service"
|
||||||
|
:editor-toolbar="customToolbar"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="10" />
|
||||||
|
<v-col v-if="!is_loading">
|
||||||
|
<v-btn
|
||||||
|
block
|
||||||
|
color="#9970ff"
|
||||||
|
dark
|
||||||
|
depressed
|
||||||
|
@click="save"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {VueEditor} from "vue2-editor";
|
||||||
|
import * as api from "@/api/stplat";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "TermsOfServiceView",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
VueEditor,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
stiplat_id: 0,
|
||||||
|
terms_of_service: '',
|
||||||
|
customToolbar: [
|
||||||
|
[{header: [false, 1, 2, 3, 4, 5, 6]}],
|
||||||
|
["bold", "italic", "underline"],
|
||||||
|
[
|
||||||
|
{align: ""},
|
||||||
|
{align: "center"},
|
||||||
|
{align: "right"},
|
||||||
|
{align: "justify"}
|
||||||
|
],
|
||||||
|
[{list: "ordered"}, {list: "bullet"}],
|
||||||
|
[{color: []}, {background: []}],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async created() {
|
||||||
|
await this.getTermsOfService()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog.notify.success(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTermsOfService() {
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.getTermsOfService()
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.terms_of_service = data.description
|
||||||
|
this.stiplat_id = data.id
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async save() {
|
||||||
|
if (this.stiplat_id < 1) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.terms_of_service.length < 10) {
|
||||||
|
this.notifyError('내용을 입력하세요')
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.is_loading) return;
|
||||||
|
|
||||||
|
this.is_loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await api.modify(this.stiplat_id, this.terms_of_service)
|
||||||
|
if (res.status === 200 && res.data.success === true) {
|
||||||
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-main>
|
||||||
|
<v-container
|
||||||
|
align-center
|
||||||
|
justify-center
|
||||||
|
>
|
||||||
|
<v-card class="elevation-12">
|
||||||
|
<v-card-text>
|
||||||
|
<v-form>
|
||||||
|
<v-text-field
|
||||||
|
v-model="email"
|
||||||
|
label="Email"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<v-text-field
|
||||||
|
v-model="password"
|
||||||
|
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
|
:type="showPassword ? 'text' : 'password'"
|
||||||
|
label="Password"
|
||||||
|
@click:append="showPassword = !showPassword"
|
||||||
|
@keyup.enter="loginSubmit"
|
||||||
|
/>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="primary"
|
||||||
|
@click="loginSubmit"
|
||||||
|
>
|
||||||
|
로그인
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Login",
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
showPassword: false,
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
}),
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
notifyError: async function (message) {
|
||||||
|
await this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
|
||||||
|
loginSubmit() {
|
||||||
|
let loginData = {};
|
||||||
|
loginData.email = this.email;
|
||||||
|
loginData.password = this.password;
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.$store.dispatch('accountStore/LOGIN', loginData)
|
||||||
|
.then(() => {
|
||||||
|
this.$router.push(this.$route.query.redirect || '/')
|
||||||
|
})
|
||||||
|
.catch((message) => {
|
||||||
|
this.notifyError(message);
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('로그인 정보를 확인해주세요.');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
module.exports = {
|
||||||
|
transpileDependencies: [
|
||||||
|
'vuetify'
|
||||||
|
],
|
||||||
|
//adding extract css true solves this issue
|
||||||
|
css: {
|
||||||
|
extract: true
|
||||||
|
},
|
||||||
|
configureWebpack: config => {
|
||||||
|
config.output.filename = 'js/[name].[hash].js'
|
||||||
|
config.output.chunkFilename = 'js/[name].[hash].js'
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue