上传图片

src/api/other.js

@@ -32,3 +32,23 @@ export function uploadFile(data) {
   })
 }
 
+/**
+ * @param  file
+ * @returns output value
+ */
+export function getBase64(file) {
+  return new Promise(function(resolve, reject) {
+    const reader = new FileReader()
+    let imgResult = ''
+    reader.readAsDataURL(file)
+    reader.onload = function() {
+      imgResult = reader.result
+    }
+    reader.onerror = function(error) {
+      reject(error)
+    }
+    reader.onloadend = function() {
+      resolve(imgResult)
+    }
+  })
+}

src/components/Tinymce/components/EditorImage.vue

@@ -12,7 +12,7 @@
         :on-success="handleSuccess"
         :before-upload="beforeUpload"
         class="editor-slide-upload"
-        action="https://httpbin.org/post"
+        :action="action"
         list-type="picture-card"
       >
         <el-button size="small" type="primary">
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-// import { getToken } from 'api/qiniu'
+import { uploadFile, getBase64 } from '@/api/other'
 
 export default {
   name: 'EditorSlideUpload',
@@ -42,6 +42,7 @@ export default {
   },
   data() {
     return {
+      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
       dialogVisible: false,
       listObj: {},
       fileList: []
@@ -62,16 +63,21 @@ export default {
       this.fileList = []
       this.dialogVisible = false
     },
-    handleSuccess(response, file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
-      for (let i = 0, len = objKeyArr.length; i < len; i++) {
-        if (this.listObj[objKeyArr[i]].uid === uid) {
-          this.listObj[objKeyArr[i]].url = response.files.file
-          this.listObj[objKeyArr[i]].hasSuccess = true
-          return
-        }
-      }
+    handleSuccess(file) {
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response.data)
+          const uid = file.uid
+          const objKeyArr = Object.keys(this.listObj)
+          for (let i = 0, len = objKeyArr.length; i < len; i++) {
+            if (this.listObj[objKeyArr[i]].uid === uid) {
+              this.listObj[objKeyArr[i]].url = response.data
+              this.listObj[objKeyArr[i]].hasSuccess = true
+              return
+            }
+          }
+        })
+      })
     },
     handleRemove(file) {
       const uid = file.uid

src/main.js

@@ -21,7 +21,8 @@ import * as filters from './filters' // global filters
 
 const organizeID = 1 // 组织ID
 const simplePwd = '12345678' // 简单密码
-
+const baseUrl = 'https://mai-b.caimei365.com' // 测试
+// const baseUrl = 'https://mai.caimei365.com' //正式
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -46,6 +47,7 @@ Object.keys(filters).forEach(key => {
 
 Vue.prototype.organizeID = organizeID
 Vue.prototype.simplePwd = simplePwd
+Vue.prototype.baseUrl = baseUrl
 Vue.config.productionTip = false
 
 new Vue({

src/utils/request.js

@@ -70,12 +70,20 @@ service.interceptors.response.use(
     }
   },
   error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: '网络连接超时，请稍后重试',
-      type: 'error',
-      duration: 5 * 1000
-    })
+    const reg = new RegExp(/504|503|500|400/)
+    if (reg.test(error.message) || error.message === 'Network Error') {
+      Message({
+        message: '网络连接超时，请检查网络！',
+        type: 'error',
+        duration: 5 * 1000
+      })
+    } else {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
     return Promise.reject(error)
   }
 )

src/views/club/editForm.vue

@@ -27,13 +27,10 @@
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
-            accept="image/jpeg,image/gif,image/png"
-            action="https://www-b.caimei365.com/register/imageUpload.action"
+            :action="action"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            :multiple="false"
-            :limit="1"
           >
             <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
@@ -45,11 +42,10 @@
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
-            accept="image/jpeg,image/gif,image/png,image/jpg"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            :action="action"
             :show-file-list="false"
             :on-success="handleDoorwaySuccess"
-            :before-upload="beforeDoorwayUpload"
+            :before-upload="beforeAvatarUpload"
           >
             <img v-if="form.headpic" :src="form.headpic" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
@@ -76,11 +72,13 @@
 // 引入省市区组件，公共组件所在的路径
 import City from '@/components/Ctiy'
 import { addNewClub, saveAddClubUser } from '@/api/club'
+import { uploadFile, getBase64 } from '@/api/other'
 // import { addNewClub } from '@/api/club'
 export default {
   components: { City },
   data() {
     return {
+      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
       userID: this.$route.query.userID,
       clubID: this.$route.query.clubID,
       dialogImageUrl: '',
@@ -165,51 +163,48 @@ export default {
     },
     // 从子组件获取省市区
     handleCity(data) {
-      console.log(data)
       this.addList.provinceID = data.provinceid
       this.addList.cityID = data.cityid
       this.addList.townID = data.townid
     },
+    // 上传图标事件
     handleAvatarSuccess(res, file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response)
+          if (response.code === '1') {
+            this.form.businessLicenseImage = response.data
+          } else {
+            this.$message.error('上传图片失败')
+          }
+        })
       })
-      const fileName = file.name
-      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
-      if (regex.test(fileName.toLowerCase())) {
-        this.form.imageUrl = URL.createObjectURL(file.raw)
-      } else {
-        this.$message.error('请选择图片文件')
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isLt5M = file.size / 1024 / 1024 < 5
-      if (!isLt5M) {
-        this.$message.error('上传头像图片大小不能超过 5MB!')
-      }
-      return isLt5M
     },
     handleDoorwaySuccess(res, file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response)
+          if (response.code === '1') {
+            this.form.headpic = response.data
+          } else {
+            this.$message.error('上传图片失败')
+          }
+        })
       })
-      const fileName = file.name
-      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
-      if (regex.test(fileName.toLowerCase())) {
-        this.form.doorwayImageUrl = URL.createObjectURL(file.raw)
-      } else {
-        this.$message.error('请选择图片文件')
-      }
     },
-    beforeDoorwayUpload(file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
-      })
+    // 对上传图片的大小、格式进行限制
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
       const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
       if (!isLt5M) {
-        this.$message.error('上传头像图片大小不能超过 5MB!')
+        this.$message.error('请上传5MB以内的图片!')
       }
-      return isLt5M
+      return (isJPG || isJPG2 || isPNG) && isLt5M
     },
     getBase64(file) {
       return new Promise(function(resolve, reject) {

src/views/club/form.vue

@@ -27,15 +27,12 @@
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
-            accept="image/jpeg,image/gif,image/png"
-            action="https://www-b.caimei365.com/register/imageUpload.action"
+            :action="action"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            :multiple="false"
-            :limit="1"
           >
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
+            <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
             <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
@@ -45,13 +42,12 @@
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
-            accept="image/jpeg,image/gif,image/png,image/jpg"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            :action="action"
             :show-file-list="false"
             :on-success="handleDoorwaySuccess"
-            :before-upload="beforeDoorwayUpload"
+            :before-upload="beforeAvatarUpload"
           >
-            <img v-if="form.doorwayImageUrl" :src="form.doorwayImageUrl" class="avatar">
+            <img v-if="form.headpic" :src="form.headpic" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
             <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
@@ -77,12 +73,12 @@
 // 引入省市区组件，公共组件所在的路径
 import City from '@/components/Ctiy'
 import { saveAddClubUser } from '@/api/club'
+import { uploadFile, getBase64 } from '@/api/other'
 export default {
   components: { City },
   data() {
     return {
-      dialogImageUrl: '',
-      dialogVisible: false,
+      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
       form: {
         name: '',
         linkMan: '',
@@ -121,46 +117,44 @@ export default {
       this.addList.cityID = data.cityid
       this.addList.townID = data.townid
     },
+    // 上传图标事件
     handleAvatarSuccess(res, file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response)
+          if (response.code === '1') {
+            this.form.businessLicenseImage = response.data
+          } else {
+            this.$message.error('上传图片失败')
+          }
+        })
       })
-      const fileName = file.name
-      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
-      if (regex.test(fileName.toLowerCase())) {
-        this.form.imageUrl = URL.createObjectURL(file.raw)
-      } else {
-        this.$message.error('请选择图片文件')
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isLt5M = file.size / 1024 / 1024 < 5
-      if (!isLt5M) {
-        this.$message.error('上传头像图片大小不能超过 5MB!')
-      }
-      return isLt5M
     },
     handleDoorwaySuccess(res, file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response)
+          if (response.code === '1') {
+            this.form.headpic = response.data
+          } else {
+            this.$message.error('上传图片失败')
+          }
+        })
       })
-      const fileName = file.name
-      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
-      if (regex.test(fileName.toLowerCase())) {
-        this.form.doorwayImageUrl = URL.createObjectURL(file.raw)
-      } else {
-        this.$message.error('请选择图片文件')
-      }
     },
-    beforeDoorwayUpload(file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
-      })
+    // 对上传图片的大小、格式进行限制
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
       const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
       if (!isLt5M) {
-        this.$message.error('上传头像图片大小不能超过 5MB!')
+        this.$message.error('请上传5MB以内的图片!')
       }
-      return isLt5M
+      return (isJPG || isJPG2 || isPNG) && isLt5M
     },
     onSubmite() {
       this.$refs['dataForm'].validate((valid) => {
@@ -179,22 +173,6 @@ export default {
           })
         }
       })
-    },
-    getBase64(file) {
-      return new Promise(function(resolve, reject) {
-        const reader = new FileReader()
-        let imgResult = ''
-        reader.readAsDataURL(file)
-        reader.onload = function() {
-          imgResult = reader.result
-        }
-        reader.onerror = function(error) {
-          reject(error)
-        }
-        reader.onloadend = function() {
-          resolve(imgResult)
-        }
-      })
     }
   }
 }
@@ -214,23 +192,24 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
   text-align: center;
 }
 .avatar {
-  width: 178px;
-  height: 178px;
+  width: 148px;
+  height: 148px;
   display: block;
 }
 .el-form-item__label{
     text-align: right !important;
 }
 .form-el-upload{
-  width: 180px;
+  width: 150px;
 }
 .el-upload__tip{
+  margin-top: 0;
   line-height: 20px;
   color: red;
   text-align: left;

src/views/dashboard/admin/index.vue

@@ -126,18 +126,18 @@ export default {
       monthData: [],
       goodsList: [],
       Receivable: {
-        startTime: '',
-        endTime: '',
+        startTime: this.getCurrentMonthFirst(),
+        endTime: this.getCurrentMonthLast(),
         organizeID: this.organizeID
       },
       Order: {
-        startTime: '',
-        endTime: '',
+        startTime: this.getCurrentMonthFirst(),
+        endTime: this.getCurrentMonthLast(),
         organizeID: this.organizeID
       },
       Commodity: {
-        startTime: '',
-        endTime: '',
+        startTime: this.getCurrentMonthFirst(),
+        endTime: this.getCurrentMonthLast(),
         organizeID: this.organizeID
       },
       count: 0,
@@ -197,6 +197,38 @@ export default {
     numFormat(num) {
       var c = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
       return c
+    },
+    getCurrentMonthFirst() {
+      var date = new Date()
+      date.setDate(1)
+      var month = parseInt(date.getMonth() + 1)
+      var day = date.getDate()
+      if (month < 10) {
+        month = '0' + month
+      }
+      if (day < 10) {
+        day = '0' + day
+      }
+      const startTime = date.getFullYear() + '-' + month + '-' + day
+      console.log(startTime)
+      return startTime
+    },
+    getCurrentMonthLast() {
+      var date = new Date()
+      var currentMonth = date.getMonth()
+      var nextMonth = ++currentMonth
+      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
+      var oneDay = 1000 * 60 * 60 * 24
+      var lastTime = new Date(nextMonthFirstDay - oneDay)
+      var month = parseInt(lastTime.getMonth() + 1)
+      var day = lastTime.getDate()
+      if (month < 10) {
+        month = '0' + month
+      }
+      if (day < 10) {
+        day = '0' + day
+      }
+      return date.getFullYear() + '-' + month + '-' + day
     }
   }
 }

src/views/goods/category-edit.vue

@@ -15,13 +15,10 @@
         <div class="form-el-upload">
           <el-upload
             class="avatar-uploader"
-            accept="image/jpeg,image/gif,image/png"
-            action="https://www-b.caimei365.com/register/imageUpload.action"
+            :action="action"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            :multiple="false"
-            :limit="1"
           >
             <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
@@ -53,9 +50,11 @@
 
 <script>
 import { getClassify, saveClassify } from '@/api/goods-classify'
+import { uploadFile, getBase64 } from '@/api/other'
 export default {
   data() {
     return {
+      action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
       msg: '编辑分类',
       activeIndex: '2',
       rules: {
@@ -110,40 +109,32 @@ export default {
         }
       })
     },
+    // 上传图标事件
     handleAvatarSuccess(res, file) {
-      this.getBase64(file.raw).then(res => {
-        console.log(res)
+      getBase64(file.raw).then(res => {
+        uploadFile({ imgStr: res }).then(response => {
+          console.log(response)
+          if (response.code === '1') {
+            this.temp.classifyImage = response.data
+          } else {
+            this.$message.error('上传图片失败')
+          }
+        })
       })
-      const fileName = file.name
-      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
-      if (regex.test(fileName.toLowerCase())) {
-        this.form.imageUrl = URL.createObjectURL(file.raw)
-      } else {
-        this.$message.error('请选择图片文件')
-      }
     },
+    // 对上传图片的大小、格式进行限制
     beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
       const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
       if (!isLt5M) {
-        this.$message.error('上传头像图片大小不能超过 5MB!')
+        this.$message.error('请上传5MB以内的图片!')
       }
-      return isLt5M
-    },
-    getBase64(file) {
-      return new Promise(function(resolve, reject) {
-        const reader = new FileReader()
-        let imgResult = ''
-        reader.readAsDataURL(file)
-        reader.onload = function() {
-          imgResult = reader.result
-        }
-        reader.onerror = function(error) {
-          reject(error)
-        }
-        reader.onloadend = function() {
-          resolve(imgResult)
-        }
-      })
+      return (isJPG || isJPG2 || isPNG) && isLt5M
     }
   }
 }

src/views/login/index.vue

@@ -42,8 +42,8 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin:20px 0;" @click.native.prevent="handleLogin">登录</el-button>
-      <div class="footer"><p>copyrigh © 2019星范商城后台V1.0.0</p></div>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
+      <!-- <div class="footer"><p>copyrigh © 2019星范商城后台V1.0.0</p></div> -->
     </el-form>
   </div>
 </template>