update

src/router/index.js

@@ -25,6 +25,11 @@ const admin = [
     meta: { title: '社区话题', isleftarrow: false },
     component: () => import('../views/adminCenter/adminCommunity.vue'),
   },
+  {
+    path: '/adminCommunity/edit',
+    meta: { title: '社区话题', isleftarrow: false },
+    component: () => import('../views/adminCenter/topic/edit.vue'),
+  },
   {
     path: '/adminServe',
     meta: { title: '咨询服务', isleftarrow: false },

src/store/upload.js

@@ -4,16 +4,16 @@ import _ from 'lodash';
 import axios from 'axios';
 Vue.use(Vuex);
 const api = {
-  upload: `/files/article/refute/upload`,
+  upload: dir => `/files/article/${dir}/upload`,
 };
 const state = () => ({});
 const mutations = {};
 
 const actions = {
-  async upload({ commit }, file) {
+  async upload({ commit }, { file, dir }) {
     var formdata = new FormData();
     formdata.append('file', file, file.name);
-    const res = await axios.post(api.upload, formdata, { headers: { 'Content-Type': 'multipart/form-data' } });
+    const res = await axios.post(api.upload(dir), formdata, { headers: { 'Content-Type': 'multipart/form-data' } });
     return res.data;
   },
 };

src/views/adminCenter/adminCommunity.vue

@@ -3,10 +3,19 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="top">
-          <top topType="2" :leftArrow="false"></top>
+          <van-nav-bar :title="pageTitle">
+            <template #right>
+              <van-icon name="add" size="28" @click="toAdd" />
+            </template>
+          </van-nav-bar>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          社区话题
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }" ref="list">
+          <template v-for="(i, index) in list">
+            <item :key="`list${index}`" :data="i"></item>
+          </template>
+          <van-sticky container="list" :offset-top="clientHeight">
+            <page :total="total" :limit="limit"></page>
+          </van-sticky>
         </el-col>
         <el-col :span="24" class="foot">
           <foot></foot>
@@ -17,29 +26,52 @@
 </template>
 
 <script>
-import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
+import item from './topic/item.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: topic } = createNamespacedHelpers('topic');
 export default {
   name: 'adminCommunity',
   props: {},
   components: {
-    top,
     foot,
+    page,
+    item,
   },
   data: function() {
     return {
       clientHeight: '',
+      list: [],
+      total: 0,
+      limit: '5',
     };
   },
-  created() {},
+  created() {
+    this.search();
+  },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+  methods: {
+    ...topic(['query']),
+    async search({ skip = 0 } = {}) {
+      const res = await this.query({ skip, limit: this.limit });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    toAdd() {
+      this.$router.push('/adminCommunity/edit');
+    },
+  },
   computed: {
     ...mapState(['user']),
+    pageTitle() {
+      return this.$route.meta.title;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };

src/views/adminCenter/adminRefute.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
 import page from '@/layout/common/page.vue';
 import item from './refute/item.vue';
@@ -61,6 +60,7 @@ export default {
       const res = await this.query({ skip, limit: this.limit });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
       }
     },
     toAdd() {

src/views/adminCenter/refute/edit.vue

@@ -12,12 +12,12 @@
             <van-field v-model="form.content" rows="2" autosize type="textarea" placeholder="请输入本文内容" />
             <van-field name="uploader" label="封面上传">
               <template #input>
-                <van-uploader v-model="form.imgUrl" :max-count="1" :after-read="file => toUpload(file, 'imgUrl')" />
+                <van-uploader :fileList="form.imgUrl" :max-count="1" :after-read="file => toUpload(file, 'imgUrl')" />
               </template>
             </van-field>
             <van-field name="uploader" label="文章视频">
               <template #input>
-                <van-uploader v-model="form.fileUrl" :max-count="1" :after-read="file => toUpload(file, 'fileUrl')" accept=".mp4,.flv,.avi,.rmvb,.wmv" />
+                <van-uploader :fileList="form.fileUrl" :max-count="1" :after-read="file => toUpload(file, 'fileUrl')" accept=".mp4,.flv,.avi,.rmvb,.wmv" />
               </template>
             </van-field>
           </van-form>
@@ -62,7 +62,6 @@ export default {
       }
     },
     async toSubmit() {
-      console.log(_.get);
       let dup = _.cloneDeep(this.form);
       let res;
       // 需要处理imgUrl和fileUrl
@@ -78,13 +77,12 @@ export default {
         res = await this.create(dup);
       }
       if (this.$checkRes(res, '保存成功', res.errmsg || '保存失败')) {
-        // 返回
-        this.$router.push('/adminRefute');
+        this.toCancel();
       }
     },
     async toUpload({ file }, model) {
       // 上传,赋值
-      const res = await this.upload(file);
+      const res = await this.upload({ file, dir: refute });
       if (this.$checkRes(res)) {
         this.$set(this.form, model, [{ url: res.uri }]);
       }

src/views/adminCenter/topic/edit.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="edit">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <van-nav-bar :title="pageTitle" left-text="取消" @click-left="toCancel" :right-text="id ? '修改' : '发表'" @click-right="toSubmit" />
+        </el-col>
+        <el-col :span="24">
+          <van-form ref="form" style="margin-top:30px">
+            <van-field name="type" label="主题类型">
+              <template #input>
+                <van-radio-group v-model="form.type" direction="horizontal">
+                  <van-radio name="0">图文</van-radio>
+                  <van-radio name="1">视频</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field v-model="form.website" name="website" label="网址" placeholder="请输入标题" />
+            <van-field name="uploader" label="图片" v-if="form.type === '0'">
+              <template #input>
+                <van-uploader :fileList="form.imgUrl" :after-read="file => toUpload(file, 'imgUrl')" @delete="file => toDelete(file, 'imgUrl')" />
+              </template>
+            </van-field>
+            <van-field name="uploader" label="视频" v-if="form.type === '1'">
+              <template #input>
+                <van-uploader :fileList="form.fileUrl" :after-read="file => toUpload(file, 'fileUrl')" accept=".mp4,.flv,.avi,.rmvb,.wmv" max-size="11534336" />
+              </template>
+            </van-field>
+            <van-field v-model="form.content" rows="2" class="border" autosize type="textarea" placeholder="请输入本文内容" />
+          </van-form>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot></foot>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const moment = require('moment');
+const _ = require('lodash');
+import foot from '@/layout/common/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: upload } = createNamespacedHelpers('upload');
+const { mapActions: topic } = createNamespacedHelpers('topic');
+export default {
+  name: 'edit',
+  props: {},
+  components: { foot },
+  data: function() {
+    return {
+      form: {
+        imgUrl: [],
+        fileUrl: [],
+      },
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...upload(['upload']),
+    ...topic(['create', 'fetch', 'update']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res, null, res.errmsg || '未找到指定数据')) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    async toSubmit() {
+      let dup = _.cloneDeep(this.form);
+      if (dup.type === '0') delete dup.fileUrl;
+      else if (dup.type === '1') delete dup.imgUrl;
+      else delete dup.fileUrl, delete dup.imgUrl;
+      let res;
+      if (this.id) {
+        dup.renew_time = moment().format('YYYY-MM-DD HH:mm:ss');
+        res = await this.update(dup);
+      } else {
+        // user_id,origin需要加进数据中
+        dup.user_id = this.user._id;
+        dup.origin = this.user.name;
+        res = await this.create(dup);
+      }
+      if (this.$checkRes(res, '保存成功', res.errmsg || '保存失败')) {
+        this.toCancel();
+      }
+    },
+    async toUpload({ file }, model) {
+      // 上传,赋值
+      const res = await this.upload({ file, dir: 'topic' });
+      if (this.$checkRes(res)) {
+        this.form[model].push({ url: res.uri });
+      }
+    },
+    toDelete(file, model) {
+      const index = this.form[model].findIndex(f => _.isEqual(f, file));
+      this.form[model].splice(index, 1);
+    },
+    toCancel() {
+      this.$router.push('/adminCommunity');
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.border {
+  /deep/.van-field__control {
+    border: 1px solid rgb(183, 183, 189);
+  }
+}
+</style>

src/views/adminCenter/topic/item.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="item">
+    <el-row class="item">
+      <el-col :span="24" style="padding-bottom: 50px;" @click.native="toEdit">{{ data.content }}</el-col>
+      <el-col :span="24" v-if="data.type === '0'">
+        <el-col :span="8" v-for="(i, index) in data.imgUrl" :key="`img${index}`">
+          <template v-if="index < length - 1">
+            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
+          </template>
+          <template v-if="index == length - 1 && data.imgUrl.length <= length">
+            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
+          </template>
+          <template v-if="index == length - 1 && data.imgUrl.length > length">
+            <van-image src="" :width="imgpx" :height="imghpx" fit="scale-down">
+              <template #error>
+                <el-row>
+                  <el-col :span="24" style="font-size:32px"> <van-icon name="plus" size="28" /> {{ data.imgUrl.length - length + 1 }} </el-col>
+                </el-row>
+              </template>
+            </van-image>
+          </template>
+        </el-col>
+      </el-col>
+      <el-col :span="24" v-if="data.type === '1'"> </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from 'vant';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'item',
+  props: { data: { type: Object, default: () => {} } },
+  components: {},
+  data: function() {
+    return {
+      length: 9,
+    };
+  },
+  created() {},
+  methods: {
+    toEdit() {
+      this.$router.push({ path: '/adminCommunity/edit', query: { id: this.data._id } });
+    },
+    toPreview(index) {
+      let arr = [];
+      if (this.data.type === '0') arr = this.data.imgUrl.map(i => i.url);
+      ImagePreview({
+        images: arr,
+        startPosition: index,
+      });
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    imgpx() {
+      return 120;
+    },
+    imghpx() {
+      return this.imgpx * 0.8;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.item {
+  border-bottom: 1px solid #ccc;
+  padding: 8px 0;
+  .el-col:first-child {
+    &:extend(.dl2);
+  }
+}
+.dl2 {
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+/deep/.van-image__img {
+  border: 1px solid #f1f1f1;
+}
+</style>