perf[litemall-admin]: 调整管理后台的专题页面

litemall-admin/src/views/promotion/topic.vue

@@ -14,32 +14,34 @@
 
     <!-- 查询结果 -->
     <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
-
-      <el-table-column align="center" width="100px" label="专题ID" prop="id" sortable>
-      </el-table-column>
-
-      <el-table-column align="center" min-width="100px" label="专题标题" prop="title">
+      <el-table-column align="center" label="专题标题" prop="title">
       </el-table-column>
 
-      <el-table-column align="center" min-width="100px" label="专题子内容" prop="subtitle">
+      <el-table-column align="center" label="专题子标题" min-width="200" prop="subtitle">
       </el-table-column>
 
-      <el-table-column align="center" min-width="400px" label="内容" prop="content">
+      <el-table-column align="center" property="picUrl" label="图片">
+        <template slot-scope="scope">
+          <img :src="scope.row.picUrl" width="80"/>
+        </template>
       </el-table-column>
 
-      <el-table-column align="center" min-width="80px" label="底价" prop="priceInfo">
+      <el-table-column align="center" label="专题详情" prop="content">
+        <template slot-scope="scope">
+          <el-dialog title="专题详情" :visible.sync="contentDialogVisible">
+            <div v-html="contentDetail"></div>
+          </el-dialog>
+          <el-button type="primary" size="mini" @click="showContent(scope.row.content)">查看</el-button>
+        </template>
       </el-table-column>
 
-      <el-table-column align="center" min-width="80px" label="阅读数量" prop="readCount">
+      <el-table-column align="center" label="底价" prop="price">
       </el-table-column>
 
-      <el-table-column align="center" min-width="100px" label="是否显示" prop="isShow">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.isShow ? 'success' : 'error' ">{{scope.row.isShow ? '显示' : '不显示'}}</el-tag>
-        </template>
+      <el-table-column align="center" label="阅读数量" prop="readCount">
       </el-table-column>
 
-      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
+      <el-table-column align="center" label="操作" min-width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
           <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
@@ -67,23 +69,21 @@
         <el-form-item label="专题子标题" prop="subtitle">
           <el-input v-model="dataForm.subtitle"></el-input>
         </el-form-item>
+        <el-form-item label="专题图片" prop="picUrl">
+          <el-upload class="avatar-uploader" :action="uploadPath" list-type="picture-card" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif" :on-success="uploadPicUrl">
+			      <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
+						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
         <el-form-item style="width: 700px;" label="专题内容">
           <editor :init="editorInit" v-model="dataForm.content"></editor>
         </el-form-item>        
-        <el-form-item label="商品低价" prop="priceInfo">
-          <el-input v-model="dataForm.priceInfo"></el-input>
+        <el-form-item label="商品低价" prop="price">
+          <el-input v-model="dataForm.price"></el-input>
         </el-form-item>
         <el-form-item label="阅读量" prop="readCount">
           <el-input v-model="dataForm.readCount"></el-input>
         </el-form-item>
-        <el-form-item label="是否显示" prop="isShow">
-          <el-select v-model="dataForm.isShow" placeholder="请选择">
-            <el-option label="显示" :value="true">
-            </el-option>
-            <el-option label="不显示" :value="false">
-            </el-option>
-          </el-select>
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取消</el-button>
@@ -96,25 +96,37 @@
 </template>
 
 <style>
-  .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 200px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-  }
   .el-dialog {
     width: 800px;
-  }  
+  }
+  .avatar-uploader .el-upload {
+	  border: 1px dashed #d9d9d9;
+	  border-radius: 6px;
+	  cursor: pointer;
+	  position: relative;
+	  overflow: hidden;
+	}
+	.avatar-uploader .el-upload:hover {
+	  border-color: #20a0ff;
+	}
+	.avatar-uploader-icon {
+	    font-size: 28px;
+	    color: #8c939d;
+	    width: 120px;
+	    height: 120px;
+	    line-height: 120px;
+	    text-align: center;
+	}
+	.avatar {
+	    width: 120px;
+	    height: 120px;
+	    display: block;
+	}
 </style>
 
 <script>
 import { listTopic, createTopic, updateTopic, deleteTopic } from '@/api/topic'
-import { createStorage } from '@/api/storage'
+import { createStorage, uploadPath } from '@/api/storage'
 import BackToTop from '@/components/BackToTop'
 import Editor from '@tinymce/tinymce-vue'
 
@@ -123,6 +135,7 @@ export default {
   components: { BackToTop, Editor },
   data() {
     return {
+      uploadPath,
       list: undefined,
       total: undefined,
       listLoading: true,
@@ -138,11 +151,14 @@ export default {
         id: undefined,
         titile: undefined,
         subtitle: undefined,
+        picUrl: undefined,
         content: '',
-        priceInfo: undefined,
+        price: undefined,
         readCount: undefined,
-        isShow: false
+        goods: []
       },
+      contentDetail: '',
+      contentDialogVisible: false,
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
@@ -204,10 +220,11 @@ export default {
         id: undefined,
         titile: undefined,
         subtitle: undefined,
+        picUrl: undefined,
         content: '',
-        priceInfo: undefined,
+        price: undefined,
         readCount: undefined,
-        isShow: false
+        goods: []
       }
     },
     handleCreate() {
@@ -218,14 +235,8 @@ export default {
         this.$refs['dataForm'].clearValidate()
       })
     },
-    uploadUrl(item) {
-      const formData = new FormData()
-      formData.append('file', item.file)
-      createStorage(formData).then(res => {
-        this.dataForm.url = res.data.data.url
-      }).catch(() => {
-        this.$message.error('上传失败，请重新上传')
-      })
+    uploadPicUrl: function(response) {
+      this.dataForm.picUrl = response.data.url
     },
     createData() {
       this.$refs['dataForm'].validate((valid) => {
@@ -243,6 +254,10 @@ export default {
         }
       })
     },
+    showContent(content) {
+      this.contentDetail = content
+      this.contentDialogVisible = true
+    },
     handleUpdate(row) {
       this.dataForm = Object.assign({}, row)
       this.dialogStatus = 'update'
@@ -288,8 +303,8 @@ export default {
     handleDownload() {
       this.downloadLoading = true
       import('@/vendor/Export2Excel').then(excel => {
-        const tHeader = ['专题ID', '专题标题', '专题子标题', '专题内容', '商品低价', '阅读量', '是否显示']
-        const filterVal = ['id', 'title', 'subtitle', 'content', 'priceInfo', 'readCount', 'isShow']
+        const tHeader = ['专题ID', '专题标题', '专题子标题', '专题内容', '专题图片', '商品低价', '阅读量', '专题商品']
+        const filterVal = ['id', 'title', 'subtitle', 'content', 'picUrl', 'price', 'readCount', 'goods']
         excel.export_json_to_excel2(tHeader, this.list, filterVal, '专题信息')
         this.downloadLoading = false
       })