feats

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npm.taobao.org

package.json

@@ -14,13 +14,16 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@toast-ui/vue-editor": "^2.3.1",
     "axios": "0.18.1",
-    "core-js": "3.6.5",
+    "codemirror": "^5.56.0",
+    "core-js": "^3.6.5",
     "element-ui": "2.13.2",
     "md5": "^2.3.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "tui-editor": "^1.4.10",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"

src/api/comm.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function upload(file) {
+  const data = new FormData()
+  data.set('file', file)
+
+  return request({
+    url: '/api/admin/upload',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data
+  })
+}

src/components/MarkdownEditor/default-options.js

@@ -0,0 +1,28 @@
+// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
+export default {
+  minHeight: '200px',
+  previewStyle: 'vertical',
+  useCommandShortcut: true,
+  useDefaultHTMLSanitizer: true,
+  usageStatistics: false,
+  hideModeSwitch: false,
+  toolbarItems: [
+    'heading',
+    'bold',
+    'italic',
+    'strike',
+    'divider',
+    'hr',
+    'quote',
+    'divider',
+    'ul',
+    'ol',
+    'task',
+    'indent',
+    'outdent',
+    'divider',
+    'table',
+    'image',
+    'divider'
+  ]
+}

src/components/MarkdownEditor/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <editor
+    :initialValue="value"
+    :initialEditType="mode"
+    :options="options"
+    :height="height"
+    previewStyle="vertical"
+    ref="toastuiEditor"
+    @change="handleEditorChange"
+    />
+</template>
+
+<script>
+// deps for editor
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+
+import { Editor } from '@toast-ui/vue-editor'
+import { upload } from '@/api/comm'
+import defaultOptions from './default-options'
+
+export default {
+  name: 'MarkdownEditor',
+  components: {
+    editor: Editor
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default() {
+        return defaultOptions
+      }
+    },
+    mode: {
+      type: String,
+      default: 'markdown'
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '480px'
+    },
+    language: {
+      type: String,
+      required: false,
+      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  watch: {
+    value(newValue, preValue) {
+      if (newValue !== preValue && newValue !== this.getValue()) {
+        this.setValue(newValue)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.toastuiEditor.invoke('addHook', 'addImageBlobHook', this.uploadImage)
+    })
+  },
+  destroyed() {
+  },
+  methods: {
+    handleEditorChange() {
+      this.$emit('input', this.getValue())
+    },
+    setValue(value) {
+      this.$refs.toastuiEditor.invoke('setMarkdown', value)
+    },
+    getValue() {
+      return this.$refs.toastuiEditor.invoke('getMarkdown')
+    },
+    uploadImage(file, callback) {
+      upload(file).then(res => {
+        callback(res.data.url)
+      })
+    }
+  }
+}
+</script>
+
+<style>
+/* 修复 css bug */
+.te-mode-switch {
+  display: flex;
+}
+</style>

src/router/index.js

@@ -56,23 +56,107 @@ export const constantRoutes = [
   },
 
   {
-    path: '/example',
+    path: '/life',
     component: Layout,
-    redirect: '/example/table',
-    name: 'Example',
-    meta: { title: 'Example', icon: 'el-icon-s-help' },
+    redirect: '/life/warm',
+    name: 'life',
+    meta: { title: '荟生活', icon: 'el-icon-camera-solid' },
     children: [
       {
-        path: 'table',
-        name: 'Table',
+        path: 'warm',
+        name: 'warm',
+        component: () => import('@/views/life/Warm'),
+        meta: { title: '暖场活动', icon: 'el-icon-position' }
+      },
+      {
+        path: 'travel',
+        name: 'travel',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '美好出游季', icon: 'el-icon-bicycle' }
+      },
+      {
+        path: 'school',
+        name: 'school',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '六点半学堂', icon: 'el-icon-school' }
+      },
+      {
+        path: 'sport',
+        name: 'sport',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '夜跑行动', icon: 'el-icon-moon' }
+      },
+      {
+        path: 'warm-history',
+        name: 'warm-history',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '暖场活动回顾', icon: 'tree' }
+      }
+    ]
+  },
+
+  {
+    path: '/rights',
+    component: Layout,
+    redirect: '/rights/seasons',
+    name: 'rights',
+    meta: { title: '荟权益', icon: 'el-icon-s-check' },
+    children: [
+      {
+        path: 'seasons',
+        name: 'seasons',
+        component: () => import('@/views/table/index'),
+        meta: { title: '惊喜四季节', icon: 'el-icon-grape' }
+      },
+      {
+        path: 'letter',
+        name: 'letter',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '丽园家书', icon: 'el-icon-notebook-2' }
+      }
+    ]
+  },
+
+  {
+    path: '/love',
+    component: Layout,
+    redirect: '/love/clothes',
+    name: 'love',
+    meta: { title: '荟爱心', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'clothes',
+        name: 'clothes',
+        component: () => import('@/views/table/index'),
+        meta: { title: '旧衣飞行', icon: 'el-icon-aim' }
+      },
+      {
+        path: 'help',
+        name: 'help',
+        component: () => import('@/views/tree/index'),
+        meta: { title: '丽园助农', icon: 'el-icon-bangzhu' }
+      }
+    ]
+  },
+
+  {
+    path: '/customer',
+    component: Layout,
+    redirect: '/customer/list',
+    name: 'customer',
+    meta: { title: '会员管理', icon: 'el-icon-s-custom' },
+    children: [
+      {
+        path: 'list',
+        name: 'list',
         component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
+        meta: { title: '信息统计', icon: 'el-icon-data-analysis' }
       },
       {
-        path: 'tree',
-        name: 'Tree',
+        path: 'recommender',
+        name: 'recommender',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
+        meta: { title: '推荐记录', icon: 'el-icon-notebook-1' }
       }
     ]
   },

src/utils/uploadOption.js

@@ -0,0 +1,11 @@
+import { getToken } from "./auth";
+
+const options = {
+  action: '/api/admin/upload',
+  headers: {
+    'x-authorization-jwt': getToken()
+  },
+  name: 'file'
+}
+
+export default options;

src/views/components/Activity/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <el-form ref="activityForm" :model="form" :rules="rules" label-width="120px">
+    <el-form-item label="活动名称" prop="name">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="活动时间" required="">
+      <el-date-picker
+        v-model="dtRange1"
+        type="daterange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        style="width: 100%;" />
+    </el-form-item>
+    <el-form-item label="活动封面" prop="thumb">
+      <el-upload
+        v-bind="uploadOption"
+        class="activty-uploader"
+        :show-file-list="false"
+        :on-success="handleUploadSuccess"
+        :before-upload="beforeUpload">
+        <img v-if="form.thumb" :src="form.thumb" class="activty-thumb">
+        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      </el-upload>
+    </el-form-item>
+    <el-form-item label="活动地点" prop="address">
+      <el-input v-model="form.address" />
+    </el-form-item>
+    <template v-if="enroll">
+      <el-form-item label="报名时间">
+        <el-date-picker
+          v-model="dtRange2"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 100%;" />
+      </el-form-item>
+    </template>
+    <template v-if="type == 2">
+      <el-form-item label="是否投票" prop="is_vote">
+        <el-switch v-model="form.is_vote" />
+      </el-form-item>
+      <el-form-item label="投票时间">
+        <el-date-picker
+          v-model="dtRange3"
+          :disabled="!form.is_vote"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 100%;" />
+      </el-form-item>
+    </template>
+    <el-form-item label="活动详情" prop="detail">
+      <markdown v-model="form.detail" />
+    </el-form-item>
+    <el-form-item label="分享标题" prop="shareTitle">
+      <el-input v-model="form.shareTitle" />
+    </el-form-item>
+    <el-form-item label="分享封面" prop="shareImg">
+      <el-upload
+        v-bind="uploadOption"
+        class="activty-uploader"
+        action=""
+        :show-file-list="false"
+        :on-success="handleUploadSuccess"
+        :before-upload="beforeUpload">
+        <img v-if="form.shareImg" :src="form.shareImg" class="activty-thumb">
+        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      </el-upload>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handleSubmit">保 存</el-button>
+      <el-button @click="handleCancel">取 消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import uploadOption from '@/utils/uploadOption'
+
+export default {
+  components: {
+    markdown: () => import('@/components/MarkdownEditor')
+  },
+
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    dataset: {
+      type: Object,
+      default: undefined
+    },
+    enroll: Boolean,
+    vote: Boolean
+  },
+
+  data() {
+    return {
+      uploadOption,
+      formDataInited: false,
+      form: {
+        activityId: 0,
+        name: null,
+        typeId: 0,
+        typeName: null,
+        summary: null,
+        startDate: new Date(),
+        endDate: new Date(),
+        address: null,
+        enrollStart: new Date(),
+        enrollEnd: new Date(),
+        voteStart: new Date(),
+        voteEnd: new Date(),
+        createDate: new Date(),
+        status: null,
+        thumb: null,
+        detail: null,
+        isWarm: false,
+        isVote: false,
+        voteNum: null,
+        enrollNum: null,
+        shareImg: null,
+        shareTitle: null,
+        weight: null
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' }
+        ],
+        thumb: [
+          { required: true, message: '请设置活动封面', trigger: 'change' }
+        ]
+      }
+    }
+  },
+
+  computed: {
+    dtRange1: {
+      get() {
+        return [this.form.startDate, this.form.endDate]
+      },
+      set(val) {
+        this.form.startDate = val[0]
+        this.form.endDate = val[1]
+      }
+    },
+
+    dtRange2: {
+      get() {
+        return [this.form.enrollStart, this.form.enrollEnd]
+      },
+      set(val) {
+        this.form.enrollStart = val[0]
+        this.form.enrollEnd = val[1]
+      }
+    },
+
+    dtRange3: {
+      get() {
+        return [this.form.voteStart, this.form.voteEnd]
+      },
+      set(val) {
+        this.form.voteStart = val[0]
+        this.form.voteEnd = val[1]
+      }
+    }
+  },
+
+  watch: {
+    'form.name'(newVal, oldVal) {
+      if (!this.form.shareTitle || this.form.shareTitle === oldVal) {
+        this.form.shareTitle = newVal
+      }
+    },
+
+    'form.thumb'(newVal, oldVal) {
+      if (!this.form.shareImg || this.form.shareImg === oldVal) {
+        this.form.shareImg = newVal
+      }
+    },
+
+    dataset(val) {
+      if (val && !this.formDataInited) {
+        this.form = val
+        this.formDataInited = true
+      }
+    }
+  },
+
+  mounted() {
+    if (this.dataset) {
+      this.form = this.dataset
+      this.formDataInited = true
+    }
+  },
+
+  methods: {
+    handleSubmit() {
+      this.$refs.activityForm.validate(valid => {
+        if (valid) {
+          const data = {
+            ...this.form,
+            typeId: this.type
+          }
+          this.$emit('submit', data)
+        }
+      })
+    },
+
+    handleCancel() {
+      this.$emit('cancel')
+    },
+
+    beforeUpload(file) {
+      // const isJPG = file.type === 'image/jpeg';
+      // const isLt2M = file.size / 1024 / 1024 < 2;
+
+      return true
+    },
+
+    handleUploadSuccess(res, file) {
+      this.form.thumb = res.data.url
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.activty-uploader {
+  .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+      border-color: #409EFF;
+    }
+
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+  }
+}
+
+.activty-thumb {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

src/views/life/Warm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="app-container">
+    <div style="max-width: 60vw">
+      <activity type="2" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    activity: () => import('@/views/components/Activity')
+  }
+}
+</script>

yarn.lock

@@ -2909,6 +2909,11 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
+codemirror@^5.56.0:
+  version "5.56.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.56.0.tgz#675640fcc780105cd22d3faa738b5d7ea6426f61"
+  integrity sha512-MfKVmYgifXjQpLSgpETuih7A7WTTIsxvKfSLGseTY5+qt0E1UD1wblZGM6WLenORo8sgmf+3X+WTe2WF7mufyw==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"