文章发布模块的开发

config/dev.env.js

@@ -1,8 +1,8 @@
 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  //BASE_API:'"http://api.test1.sgjyun.com"',//'"http://localhost:9534"'
-  BASE_API:'"http://localhost:9534"'
+  BASE_API:'"http://api.test1.sgjyun.com"',//'"http://localhost:9534"'
+  //BASE_API:'"http://localhost:9534"'
 
   SSO_HOST: '"http://testsso.sgjyun.com"',
   SRCM_HOST: '"http://test1.sgjyun.com"',

src/api/act/submitinfo.js

@@ -7,4 +7,13 @@ export function submitForm (params){
         method: 'Get',
         params: params
     })
+}
+
+export function getArticleType(params){
+     console.log("分类信息")
+     return request({
+         url:'/api/acticle/getArticleType',
+         method: 'Get',
+         params: params
+     })
 }

src/api/qiniu.js

@@ -1,6 +1,7 @@
 import request from '@/utils/request'
 
 export function getToken() {
+  console.log("加地址")
   return request({
     url: '/api/qiniu/uptoken', // 假地址 自行替换
     method: 'get'

src/scrm_pages/article/createArticle.vue

@@ -7,7 +7,7 @@
     <div class="app-container">
     <el-tabs type="border-card">
       <el-tab-pane label="文章">
-        <el-form label-width="80px" class="clearfix" :model="form" ref="form" v-loading="formloading" :element-loading-text="loadingText">
+        <el-form label-width="80px" class="clearfix" :model="form" ref="form"  :element-loading-text="loadingText">
           <el-row>
             <el-col :span="24">
                 <el-form-item label="文章标题:">
@@ -25,7 +25,7 @@
                   <el-radio v-model="radio" label="1" @click.native.prevent="select()" >单图</el-radio>
                   <el-radio v-model="radio" label="2" @click.native.prevent="clickitem()" >三图</el-radio>
               </el-form-item>
-              <el-form-item prop="org_logo">
+              <el-form-item prop="org_log">
                 <el-col :span="3">
                   <div>
                     <el-upload  
@@ -45,24 +45,46 @@
                 </el-col>
                 <el-col :span="3">
                   <div v-if="show">
-                    <el-upload 
-                     class="avatar-uploader" 
-                     :show-file-list="false" 
-                     :on-success="handleAvatarSuccess" 
-                     :before-upload="beforeAvatarUpload">
-                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                    <el-upload  
+                      v-loading="guploading"
+                      :element-loading-text="loadingText"
+                      class="avatar-uploader"
+                      :data="uploadData"
+                      action="https://upload.qiniup.com"
+                      :show-file-list="false"
+                      :on-error="handleAvatartwoError"
+                      :on-success="handleAvatartwoSuccess"
+                      :before-upload="beforeAvatartwoUpload">
+                      <img v-if="imageUrlSecond" :src="imageUrlSecond" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                  </div>
+                </el-col>
+                <el-col :span="3">
+                  <div v-if="show">
+                    <el-upload  
+                      v-loading="uploading"
+                      :element-loading-text="loadingText"
+                      class="avatar-uploader"
+                      :data="uploadData"
+                      action="https://upload.qiniup.com"
+                      :show-file-list="false"
+                      :on-error="handleAvatarlastError"
+                      :on-success="handleAvatarlastSuccess"
+                      :before-upload="beforeAvatarlastUpload">
+                      <img v-if="imageUrlLast" :src="imageUrlLast" class="avatar">
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                   </div>
                 </el-col>
               </el-form-item>
                <el-form-item label="所属分类:">
-                 <el-select v-model="value" placeholder="请先选择文章所属分类">
+                 <el-select v-model="value" placeholder="请先选择文章所属分类" prop="act_type">
                    <el-option
                      v-for="item in options"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value">
+                     :key="item.id"
+                     :label="item.Name"
+                     :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
@@ -72,7 +94,7 @@
           <el-row :span="24">
             <el-col :span="24">
                 <el-form-item>
-                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm">发布</el-button>
+                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm" :disabled="formsubmit">发布</el-button>
                       <el-button size="small" style="width: 100px">预览</el-button>
                       <el-button size="small" style="width: 100px">保存草稿</el-button>
                   <el-button size="small" style="width: 100px">取消</el-button>
@@ -90,7 +112,7 @@
                  <div class="video-select">
                    <el-upload
                    class="upload-demo"
-                   action="https://jsonplaceholder.typicode.com/posts/"
+                   action="https://upload.qiniup.com"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
@@ -123,12 +145,12 @@
                    </el-upload>
                  </el-form-item>
                   <el-form-item label="所属分类:">
-                    <el-select v-model="value" placeholder="请选择">
+                    <el-select v-model="form.act_type" placeholder="请选择">
                       <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
+                         v-for="item in options"
+                         :key="item.value"
+                        :label="item.label"
+                         :value="item.value">
                       </el-option>
                       </el-select>
                   </el-form-item>
@@ -158,7 +180,7 @@
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   import Neditor from '@/components/Neditor'
-  import {submitForm} from '@/api/act/submitinfo'
+  import {submitForm,getArticleType} from '@/api/act/submitinfo'
   import { getToken } from '@/api/qiniu'
   import { getFileExtension} from '@/utils/tools'
   export default {
@@ -174,17 +196,7 @@
           { path: '/articles/createArticle', name: '发布文章' }
         ],
          radio:'1',
-        imageUrl: '',
-        options: [{
-          value: '选项1',
-          label: '科普教育'
-        }, {
-          value: '选项2',
-          label: '肾病常识'
-        }, {
-          value: '选项3',
-          label: '食物库'
-        }],
+        options: [],
         value: '',
         show:false,
         content: '',
@@ -201,18 +213,43 @@
           act_picture:'',
           act_category:'',
           org_logo:'',
+          act_type:'',
         },
+         acttypes:[],
+         imageUrl:'',
+         imageUrlSecond:'',
+         imageUrlLast:'',
          formloading:false,
+         formsubmit:false,
          qiniuDomain: 'https://images.shengws.com/',
          uploading:false,
          loadingText:'',
          uploadData: { token: '', key: '' },
+         myConfig: {
+                // 如果需要上传功能,找后端小伙伴要服务器接口地址
+                serverUrl: '/api/web/upload/ueditor',
+                // 你的UEditor资源存放的路径,相对于打包后的index.html
+                UEDITOR_HOME_URL: '/NEditor/',
+                // 编辑器不自动被内容撑高
+                autoHeightEnabled: false,
+                // 初始容器高度
+                initialFrameHeight: 240,
+                // 初始容器宽度
+                initialFrameWidth: '100%',
+                // 关闭自动保存
+                enableAutoSave: false
+            },
       }
     },
+    created(){
+        this.getArticleType()
+    },
     methods: {
+      //第一个图片
       handleAvatarSuccess(res, file) {
-        //this.imageUrl = URL.createObjectURL(file.raw);
+        this.imageUrl = URL.createObjectURL(file.raw);
         this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
       },
        handleAvatarError(err, file, fileList) {
             this.$message.error(err);
@@ -240,6 +277,7 @@
             return new Promise((resolve, reject) => {
                 getToken().then(response => {
                     const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
                     _self._data.uploadData.token = token
                     _self._data.uploadData.key = key
                     resolve(true)
@@ -251,6 +289,97 @@
         
           //return isJPG && isLt2M;
       },
+      //第二个图片
+      handleAvatartwoSuccess(res, file) {
+        this.imageUrlSecond = URL.createObjectURL(file.raw);
+        this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
+      },
+       handleAvatartwoError(err, file, fileList) {
+            this.$message.error(err);
+            this.uploading = false;
+            return false
+      },
+      beforeAvatartwoUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.uploading = true;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
+                    _self._data.uploadData.token = token
+                    _self._data.uploadData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })
+        
+          //return isJPG && isLt2M;
+      },
+      
+      //第三张图片
+      //第二个图片
+      handleAvatarlastSuccess(res, file) {
+        this.imageUrlLast = URL.createObjectURL(file.raw);
+        this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
+      },
+       handleAvatarlastError(err, file, fileList) {
+            this.$message.error(err);
+            this.uploading = false;
+            return false
+      },
+      beforeAvatarlastUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.uploading = true;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
+                    _self._data.uploadData.token = token
+                    _self._data.uploadData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })
+        
+          //return isJPG && isLt2M;
+      },
+
       beforeUpload(file) {
         var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
         const extension = testmsg === 'mp4'
@@ -292,10 +421,13 @@
         var params  = new Object()
         params.act_name = this.form.act_name
         params.act_content = this.$refs.neditor.content
+        params.org_logo = this.form.org_logo
         this.formloading=true
+        this.submitForm =true
         console.log("文章标题",params.act_name)
         console.log("文章内容",params.act_content)
         console.log("富文本编辑器的内容",params.act_content)
+        console.log("图片",params.org_logo)
         submitForm(params).then(response => {
            if(response.data.state === 1){
              this.$message({
@@ -305,7 +437,17 @@
            }
         })
       },
-
+      getArticleType(){
+        getArticleType().then(response =>{
+            console.log("好嗨我")
+            if(response.data.state === 1){
+            var category = response.data.data.category
+            this.options = response.data.data.category
+             console.log("文章内容:",category)
+             console.log("文章",this.options)
+            }
+        })
+      }
     },
   }
 </script>