首页图表

src/api/home.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getReceivable(query) {
+  return request({
+    url: '/homepage/receivable',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getHomepageOrder(query) {
+  return request({
+    url: '/homepage/order',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getHomepageSale(query) {
+  return request({
+    url: 'homepage/sale',
+    method: 'get',
+    params: query
+  })
+}
+export function getHomepageCommodity(query) {
+  return request({
+    url: '/homepage/commodity',
+    method: 'get',
+    params: query
+  })
+}
+

src/api/other.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function getOrganizeInfo(query) {
+  return request({
+    url: '/user/organizeInfo',
+    method: 'get',
+    params: query
+  })
+}
+export function updateOrganizeInfo(data) {
+  return request({
+    url: '/user/update',
+    method: 'post',
+    data
+  })
+}

src/components/Ctiy/index.vue

@@ -74,15 +74,15 @@ export default {
     }
   },
   created: function() {
+    console.log(this.addressData)
+    this.province = this.addressData.province
+    this.city = this.addressData.city
+    this.town = this.addressData.town
     this.getCityData()
   },
   methods: {
     // 加载省份
     getCityData: function() {
-      console.log(this.addressData)
-      this.province = this.addressData.province
-      this.city = this.addressData.city
-      this.town = this.addressData.town
       getProvince().then(response => {
         this.provinceArray = response.data
       })

src/router/index.js

@@ -51,7 +51,7 @@ export const constantRoutes = [
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+      meta: { title: '首页', icon: 'dashboard', affix: true }
     }]
   },
   {

src/utils/request.js

@@ -51,7 +51,6 @@ service.interceptors.response.use(
         type: 'error',
         duration: 5 * 1000
       })
-
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
@@ -73,7 +72,7 @@ service.interceptors.response.use(
   error => {
     console.log('err' + error) // for debug
     Message({
-      message: error.msg,
+      message: error.message,
       type: 'error',
       duration: 5 * 1000
     })

src/views/club/editForm.vue

@@ -10,7 +10,7 @@
       <el-form-item label="手机号:" prop="contractMobile" style="width: 500px; text-align: right;">
         <el-input v-model="form.contractMobile" placeholder="请填写你的常用号码" maxlength="11" />
       </el-form-item>
-      <City :address-data="addList" @addlist="handleCity" />
+      <City v-if="isRequest" :address-data="addList" @addlist="handleCity" />
       <el-form-item label="" prop="address" style="width: 500px; text-align: right;">
         <el-input v-model="form.address" placeholder="请填写会所详细的地址" />
       </el-form-item>
@@ -68,7 +68,7 @@
       <router-link :to="'/club/list/'">
         <el-button>返回</el-button>
       </router-link>
-      <el-button type="primary" @click="onSubmite()">保存</el-button>
+      <el-button type="primary" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
     </div>
   </div>
 </template>
@@ -85,6 +85,7 @@ export default {
       clubID: this.$route.query.clubID,
       dialogImageUrl: '',
       dialogVisible: false,
+      isRequest: false,
       form: {
         name: '',
         linkMan: '',
@@ -108,23 +109,38 @@ export default {
         provinceID: '',
         cityID: '',
         townID: ''
-      }
+      },
+      loadingbut: false,
+      loadingbuttext: '保存'
     }
   },
   created() {
-    console.log(this.clubID)
     const params = { clubID: this.clubID, userID: this.userID }
     this.initClubData(params)
   },
   methods: {
     initClubData(params) {
-      console.log(params)
       addNewClub(params).then(response => {
-        this.form = Object.assign({}, response.data)
-        this.addList.province = response.data.province
-        this.addList.city = response.data.city
-        this.addList.town = response.data.town
-        console.log(this.addList)
+        const resData = response.data
+        const dataObj = {
+          name: resData.name,
+          linkMan: resData.linkMan,
+          contractMobile: resData.contractMobile,
+          socialCreditCode: resData.socialCreditCode,
+          address: resData.address,
+          status: resData.status,
+          firstClubType: resData.firstClubType,
+          headpic: resData.headpic,
+          businessLicenseImage: resData.businessLicenseImage
+        }
+        this.form = Object.assign({}, dataObj)
+        this.addList.province = resData.province
+        this.addList.city = resData.city
+        this.addList.town = resData.town
+        this.addList.provinceID = resData.provinceID
+        this.addList.cityID = resData.cityID
+        this.addList.townID = resData.townID
+        this.isRequest = true
       }).catch(() => {
         // 封装静态数据
       })
@@ -132,14 +148,17 @@ export default {
     onSubmite() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          console.log(this.form)
-          const Formobj = Object.assign(this.form, { userOrganizeID: this.organizeID })
+          const Formobj = Object.assign(this.form, { id: this.organizeID, userID: this.userID, clubID: this.clubID })
           const params = Object.assign(this.addList, Formobj)
-          console.log(params)
+          this.loadingbut = true
+          this.loadingbuttext = '保存中...'
           saveAddClubUser(params).then(response => {
-            this.dialogFormVisible = false
-            this.$message({ message: '上线会所成功', type: 'success', center: true })
-            this.$router.push({ path: '/club/list' })
+            this.loadingbut = false
+            this.loadingbuttext = '保存'
+            this.$message({ message: response.msg, type: 'success', center: true })
+            setTimeout(() => {
+              this.$router.push({ path: '/club/list' })
+            }, 3000)
           })
         }
       })

src/views/club/form.vue

@@ -68,7 +68,7 @@
       <router-link :to="'/club/list/'">
         <el-button>返回</el-button>
       </router-link>
-      <el-button type="primary" @click="onSubmite()">保存</el-button>
+      <el-button type="primary" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
     </div>
   </div>
 </template>
@@ -106,7 +106,9 @@ export default {
         provinceID: '',
         cityID: '',
         townID: ''
-      }
+      },
+      loadingbut: false,
+      loadingbuttext: '保存'
     }
   },
   created() {
@@ -114,7 +116,7 @@ export default {
   methods: {
     // 从子组件获取省市区
     handleCity(data) {
-      console.log(data)
+      // console.log(data)
       this.addList.provinceID = data.provinceid
       this.addList.cityID = data.cityid
       this.addList.townID = data.townid
@@ -163,12 +165,13 @@ export default {
     onSubmite() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          console.log(this.form)
-          const Formobj = Object.assign(this.form, { userOrganizeID: this.organizeID })
+          const Formobj = Object.assign(this.form, { id: this.organizeID })
           const params = Object.assign(this.addList, Formobj)
-          console.log(params)
+          this.loadingbut = true
+          this.loadingbuttext = '保存中...'
           saveAddClubUser(params).then(response => {
-            this.dialogFormVisible = false
+            this.loadingbut = false
+            this.loadingbuttext = '保存'
             this.$message({ message: '上线会所成功', type: 'success', center: true })
             this.$router.push({ path: '/club/list' })
           })

src/views/club/list.vue

@@ -20,18 +20,14 @@
         <el-form-item label="创建时间:" style="width:550px;float: left;">
           <el-date-picker
             v-model="listQuery.startTime"
-            type="date"
-            placeholder="选择日期"
-            format="yyyy 年 MM 月 dd 日"
-            value-format="yyyy-MM-dd"
+            type="datetime"
+            placeholder="选择日期时间"
           />
           至
           <el-date-picker
             v-model="listQuery.endTime"
-            type="date"
-            placeholder="选择日期"
-            format="yyyy 年 MM 月 dd 日"
-            value-format="yyyy-MM-dd"
+            type="datetime"
+            placeholder="选择日期时间"
           />
         </el-form-item>
         <el-form-item style="width:100px;float: left;">
@@ -106,14 +102,6 @@
         <el-button type="primary" @click="handlePreservOperator()">保存生成邀请码</el-button>
       </div>
     </el-dialog>
-
-    <el-dialog title="系统提示" :visible.sync="dialogVisible" width="15%">
-      <span>{{ dialogVisibleText }}</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleConfim()">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
@@ -196,7 +184,7 @@ export default {
           this.loadingbut = true
           this.loadingbuttext = '保存中...'
           createOperator(params).then(response => {
-            this.$message({ message: '保存成功', type: 'success', center: true })
+            this.$message({ message: response.msg, type: 'success', center: true })
             this.dialogFormVisible = false
             this.loadingbut = false
             this.loadingbuttext = '保存'
@@ -211,54 +199,47 @@ export default {
           const params = Object.assign(Formobj, this.addPeople)
           preservOperator(params).then(response => {
             this.dialogFormVisible = false
-            this.$message({
-              message: '生成邀请码成功',
-              type: 'success',
-              center: true
-            })
+            this.$message({ message: response.msg, type: 'success', center: true })
           })
         }
       })
     },
     handOnline(row) {
       this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.organizeID })
-      this.dialogVisible = true
-      this.dialogVisibleText = '确定上线该会所吗？'
-      this.updateTatusType = 'online'
+      this.$confirm('确定上线该会所吗？', '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = Object.assign({}, this.updateTemp)
+        this.updateClubStatus(params)
+      }).catch(() => {
+      })
     },
     handOffline(row) {
-      console.log(row.id)
       this.updateTemp = Object.assign({}, { clubID: row.clubID, userID: row.userID, clubStatus: row.clubStatus, userOrganizeID: this.organizeID })
-      this.dialogVisible = true
-      this.dialogVisibleText = '确定下线该会所吗？'
-      this.updateTatusType = 'offline'
-    },
-    handleConfim() {
-      if (this.updateTatusType === 'online') {
+      this.$confirm('确定下线该会所吗？', '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         const params = Object.assign({}, this.updateTemp)
-        updateStatus(params).then(response => {
-          if (response.code === '1') {
-            this.$message({ message: '上线会所成功', type: 'success', center: true })
-            this.list = []
-            this.fetchData()
-          } else {
-            this.$message.error(response.msg)
-          }
-          this.dialogVisible = false
-        })
-      } else {
-        const params = Object.assign({}, this.updateTemp)
-        updateStatus(params).then(response => {
-          if (response.code === '1') {
-            this.$message({ message: '下线会所成功', type: 'success', center: true })
+        this.updateClubStatus(params)
+      }).catch(() => {
+      })
+    },
+    updateClubStatus(params) {
+      updateStatus(params).then(response => {
+        if (response.code === '1') {
+          this.$message({ message: response.msg, type: 'success', center: true })
+          setTimeout(() => {
             this.list = []
             this.fetchData()
-          } else {
-            this.$message.error(response.msg)
-          }
-          this.dialogVisible = false
-        })
-      }
+          }, 3000)
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
     },
     handleFilter() {
       this.fetchData()

src/views/club/operateList.vue

@@ -15,8 +15,8 @@
           {{ scope.$index+1 }}
         </template>
       </el-table-column>
-      <el-table-column label="账号" width="150" align="center" prop="account" />
-      <el-table-column label="姓名" width="150" align="center" prop="linkName" />
+      <el-table-column label="账号" width="130" align="center" prop="account" />
+      <el-table-column label="姓名" align="center" prop="linkName" />
       <el-table-column label="手机号码" width="110" align="center" prop="mobile" />
       <el-table-column label="邀请码" width="130" align="center" prop="invitationCode">
         <template slot-scope="{row}">
@@ -31,7 +31,7 @@
           <!-- <i v-else class="el-icon-error" style="color: #E6A23C;font-size: 20px;" /> -->
         </template>
       </el-table-column>
-      <el-table-column align="center" label="微信昵称" width="110" prop="nickName">
+      <el-table-column align="center" label="微信昵称" prop="nickName">
         <template slot-scope="{row}">
           <span v-if="row.nickName">{{ row.nickName }}</span>
           <span v-else>----</span>
@@ -43,13 +43,13 @@
           <span v-else>----</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="添加时间" width="160" prop="addTime">
+      <el-table-column align="center" label="添加时间" prop="addTime">
         <template slot-scope="{row}">
           <span v-if="row.addTime">{{ row.addTime }}</span>
           <span v-else>----</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="绑定时间" width="160" prop="bindTime">
+      <el-table-column align="center" label="绑定时间" prop="bindTime">
         <template slot-scope="{row}">
           <span v-if="row.bindTime">{{ row.bindTime }}</span>
           <span v-else>----</span>
@@ -57,9 +57,9 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
-          <el-button v-if="row.status === '2'" type="primary" size="mini" @click="handleUntying(row)">解绑</el-button>
-          <el-button v-else type="primary" size="small" @click="handleGenerateCode(row)">{{ row.invitationCode ? '更新邀请码' : '生成邀请码' }}</el-button>
+          <el-button type="primary" size="mini" style="margin:5px 0 0 0;" @click="handleEdit(row)">编辑</el-button>
+          <el-button v-if="row.status === '2'" type="primary" size="mini" style="margin:5px 0 0 0;" @click="handleUntying(row)">解绑</el-button>
+          <el-button v-else type="primary" size="small" style="margin:5px 0 0 0;" @click="handleGenerateCode(row)">{{ row.invitationCode ? '更新邀请码' : '生成邀请码' }}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -196,11 +196,13 @@ export default {
       this.loadingbut = true
       this.loadingbuttext = '请稍候...'
       updateOperatorCode(params).then(response => {
-        this.$message({ message: '邀请码生成成功', type: 'success', center: true })
-        this.initOperatorListData()
+        this.$message({ message: response.msg, type: 'success', center: true })
         this.loadingbut = false
         this.loadingbuttext = '确定'
         this.dialogVisible = false
+        setTimeout(() => {
+          this.initOperatorListData()
+        }, 3000)
       })
     },
     handleUntying(row) {
@@ -215,11 +217,13 @@ export default {
       this.loadingbut = true
       this.loadingbuttext = '解绑中...'
       unbindOperator(params).then(response => {
-        this.$message({ message: '解绑成功', type: 'success', center: true })
-        this.initOperatorListData()
+        this.$message({ message: response.msg, type: 'success', center: true })
         this.dialogVisible = false
         this.loadingbut = false
         this.loadingbuttext = '确定'
+        setTimeout(() => {
+          this.initOperatorListData()
+        }, 3000)
       })
     },
     handleEdit(row) {
@@ -240,11 +244,13 @@ export default {
           this.loadingbuttext = '保存中...'
           preservOperator(params).then(response => {
             if (response.code === '1') {
-              this.$message({ message: '保存成功', type: 'success', center: true })
-              this.initOperatorListData()
+              this.$message({ message: response.msg, type: 'success', center: true })
               this.dialogFormVisible = false
               this.loadingbut = false
               this.loadingbuttext = '确定'
+              setTimeout(() => {
+                this.initOperatorListData()
+              }, 3000)
             } else {
               this.$message.error(response.msg)
               this.loadingbut = false

src/views/dashboard/admin/components/BarChart.vue

@@ -6,12 +6,22 @@
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
-
-const animationDuration = 6000
-
+const animationDuration = 2000
 export default {
   mixins: [resize],
   props: {
+    paytotalfeeData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    monthData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
     className: {
       type: String,
       default: 'chart'
@@ -22,7 +32,7 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: '80%'
     }
   },
   data() {
@@ -30,7 +40,7 @@ export default {
       chart: null
     }
   },
-  mounted() {
+  created() {
     this.$nextTick(() => {
       this.initChart()
     })
@@ -45,55 +55,68 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-
       this.chart.setOption({
         tooltip: {
           trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
           }
         },
+        legend: {
+          show: false,
+          top: 0,
+          right: 0
+        },
         grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
+          left: '3%',
+          right: '4%',
           bottom: '3%',
           containLabel: true
         },
         xAxis: [{
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
+          boundaryGap: false,
+          data: this.monthData
         }],
         yAxis: [{
           type: 'value',
           axisTick: {
-            show: false
+            show: true
           }
         }],
         series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
+          name: '销售总额',
+          type: 'line',
+          smooth: true,
+          symbolSize: 3,
+          showSymbol: false,
+          symbol: 'emptyCircle',
+          lineStyle: {
+            color: '#417DE6'
+          },
+          itemStyle: {
+            color: '#417DE6',
+            borderWidth: 2
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: 'rgba(65, 125, 230, 0.2)' // 0% 处的颜色
+              }, {
+                offset: 1, color: 'rgba(65, 125, 230, 0)'// 100% 处的颜色
+              }]
+            }
+          },
+          data: this.paytotalfeeData,
+          animationDuration: animationDuration
         }]
       })
     }

src/views/dashboard/admin/components/HotGoods.vue

@@ -0,0 +1,72 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}">
+    <el-table
+      :data="goodslistData"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width:100%;"
+    >
+      <el-table-column label="商品图片" align="center" prop="productImage" width="100px">
+        <template slot-scope="{row}">
+          <img :src="row.productImage" alt="" width="50">
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center" prop="name" width="300px">
+        <template slot-scope="{row}">
+          <span class="span-name">{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="销售量" align="center" prop="totalNum" />
+      <el-table-column label="订单量" align="center" prop="frequency" />
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    goodslistData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    className: {
+      type: String,
+      default: 'goods'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '80%'
+    }
+  },
+  data() {
+    return {
+      list: null
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .goods{
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .span-name{
+      word-break:break-all;
+      display:-webkit-box;
+      -webkit-line-clamp:1;
+      -webkit-box-orient:vertical;
+      overflow:hidden;
+  }
+</style>

src/views/dashboard/admin/components/PieChart.vue

@@ -6,10 +6,16 @@
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
-
+const animationDuration = 3000
 export default {
   mixins: [resize],
   props: {
+    orderData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
     className: {
       type: String,
       default: 'chart'
@@ -20,7 +26,7 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: '80%'
     }
   },
   data() {
@@ -28,7 +34,7 @@ export default {
       chart: null
     }
   },
-  mounted() {
+  created() {
     this.$nextTick(() => {
       this.initChart()
     })
@@ -43,35 +49,58 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-
       this.chart.setOption({
         tooltip: {
-          trigger: 'item',
+          trigger: 'hideTip',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
+        color: ['#417DE6', '#E6A441', '#E67441'],
         legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+          // orient: 'vertical',
+          // top: 'middle',
+          bottom: 0,
+          right: 0,
+          data: ['已收款订单', '未收款订单', '部分收款订单']
         },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
+        series: [{
+          name: '订单数量',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          center: ['50%', '50%'],
+          selectedMode: 'single',
+          roseType: false,
+          data: this.orderData,
+          label: {
+            fontSize: 14,
+            color: '#7C8894',
+            lineHeight: 22,
+            formatter: function(param) {
+              return param.name + '(' + Math.round(param.percent) + '%' + ')' + '\n' + param.value + '个'
+            }
+          },
+          labelLine: {
+            smooth: false,
+            lineStyle: {
+              width: 2
+            }
+          },
+          itemStyle: {
+            color: function(params) {
+              switch (params.name) {
+                case '已收款订单':
+                  return '#417DE6'
+                case '未收款订单':
+                  return '#E6A441'
+                case '部分收款订单':
+                  return '#E67441'
+                default:
+                  break
+              }
+            }
+          },
+          animationDuration: animationDuration
+        }]
       })
     }
   }

src/views/dashboard/admin/components/RaddarChart.vue

@@ -6,12 +6,17 @@
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
-
 const animationDuration = 3000
 
 export default {
   mixins: [resize],
   props: {
+    receivab: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
     className: {
       type: String,
       default: 'chart'
@@ -22,7 +27,7 @@ export default {
     },
     height: {
       type: String,
-      default: '300px'
+      default: '80%'
     }
   },
   data() {
@@ -30,7 +35,7 @@ export default {
       chart: null
     }
   },
-  mounted() {
+  created() {
     this.$nextTick(() => {
       this.initChart()
     })
@@ -45,68 +50,52 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
-          },
-          indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
-          ]
+          trigger: 'hideTip',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
+        color: ['#417DE6', '#E6A441'],
         legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+          // orient: 'vertical',
+          // top: 'middle',
+          bottom: 0,
+          right: 0,
+          data: ['已收金额', '未收金额']
         },
         series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
+          name: '收款金额',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          center: ['50%', '50%'],
+          selectedMode: 'single',
+          roseType: false,
+          data: this.receivab,
+          label: {
+            fontSize: 14,
+            color: '#545454',
+            lineHeight: 22,
+            formatter: function(param) {
+              return param.name + '(' + Math.round(param.percent) + '%' + ')' + '\n' + param.value + '元'
+            }
+          },
+          labelLine: {
+            smooth: false,
+            lineStyle: {
+              width: 2
             }
           },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
+          itemStyle: {
+            color: function(params) {
+              switch (params.name) {
+                case '已收金额':
+                  return '#417DE6'
+                case '未收金额':
+                  return '#E6A441'
+              }
             }
-          ],
+          },
           animationDuration: animationDuration
         }]
       })

src/views/dashboard/admin/index.vue

@@ -1,26 +1,86 @@
 <template>
   <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
+    <el-row :gutter="22" style="min-height: calc(100vh - 84px);">
+      <el-col :xs="24" :sm="24" :lg="12">
+        <div class="chart-wrapper">
+          <div class="chart-title">
+            <span>收款金额(元)</span>
+            <div style="float: right;">
+              <el-date-picker
+                v-model="Receivable.startTime"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+              至
+              <el-date-picker
+                v-model="Receivable.endTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                @blur="handleGetReceivable"
+              />
+            </div>
+          </div>
+          <div class="chartText">
+            <p>应收金额</p>
+            <p class="money">￥{{ numFormat(payTotalFee) }}元</p>
+          </div>
+          <raddar-chart v-if="isRequest" :receivab="ReceivableData" />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
-          <raddar-chart />
+          <div class="chart-title">
+            <span>订单数量(个)</span>
+            <div style="float: right;">
+              <el-date-picker
+                v-model="Order.startTime"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+              至
+              <el-date-picker
+                v-model="Order.endTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                @blur="handleGetHomepageOrder"
+              />
+            </div>
+          </div>
+          <div class="chartText">
+            <p>全部订单</p>
+            <p class="money">{{ count }}个</p>
+          </div>
+          <pie-chart v-if="isOrderRequest" :order-data="OrderData" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
-          <pie-chart />
+          <div class="chart-title">
+            <span>销售额趋势</span>
+          </div>
+          <bar-chart v-if="isSaleRequest" :paytotalfee-data="payTotalFeeData" :month-data="monthData" />
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
-          <bar-chart />
+          <div class="chart-title">
+            <span>热销商品</span>
+            <div style="float: right;">
+              <el-date-picker
+                v-model="Commodity.startTime"
+                type="datetime"
+                placeholder="选择日期时间"
+              />
+              至
+              <el-date-picker
+                v-model="Commodity.endTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                @blur="handleGetHomepageCommodity"
+              />
+            </div>
+          </div>
+          <hot-goods v-if="isGoodRequest" :goodslist-data="goodsList" />
         </div>
       </el-col>
     </el-row>
@@ -28,48 +88,94 @@
 </template>
 
 <script>
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
 import RaddarChart from './components/RaddarChart'
 import PieChart from './components/PieChart'
 import BarChart from './components/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
+import HotGoods from './components/HotGoods'
+import { getReceivable, getHomepageOrder, getHomepageSale, getHomepageCommodity } from '@/api/home'
 export default {
-  name: 'DashboardAdmin',
+  name: 'Admin',
   components: {
-    PanelGroup,
-    LineChart,
     RaddarChart,
     PieChart,
-    BarChart
+    BarChart,
+    HotGoods
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      isRequest: false,
+      isOrderRequest: false,
+      isSaleRequest: false,
+      isGoodRequest: false,
+      ReceivableData: [],
+      OrderData: [],
+      payTotalFeeData: [],
+      monthData: [],
+      goodsList: [],
+      Receivable: {
+        startTime: '',
+        endTime: '',
+        organizeID: this.organizeID
+      },
+      Order: {
+        startTime: '',
+        endTime: '',
+        organizeID: this.organizeID
+      },
+      Commodity: {
+        startTime: '',
+        endTime: '',
+        organizeID: this.organizeID
+      },
+      count: 0,
+      payTotalFee: ''
     }
   },
+  created() {
+    this.fetchData()
+  },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+    fetchData() {
+      this.handleGetReceivable()
+      this.handleGetHomepageOrder()
+      this.handleGetHomepageSale()
+      this.handleGetHomepageCommodity()
+    },
+    handleGetReceivable() {
+      getReceivable(this.Receivable).then(response => {
+        this.isRequest = true
+        this.payTotalFee = response.data.payTotalFee
+        const receob = { name: '已收金额', value: response.data.amountReceived }
+        const receob1 = { name: '未收金额', value: response.data.uncollected }
+        this.ReceivableData = [receob, receob1]
+      })
+    },
+    handleGetHomepageOrder() {
+      getHomepageOrder(this.Order).then(response => {
+        this.isOrderRequest = true
+        this.count = response.data.count
+        const order = { name: '已收款订单', value: response.data.received }
+        const order1 = { name: '未收款订单', value: response.data.uncollected }
+        const order2 = { name: '部分收款订单', value: response.data.portion }
+        this.OrderData = [order, order1, order2]
+      })
+    },
+    handleGetHomepageSale() {
+      getHomepageSale({ organizeID: this.organizeID }).then(response => {
+        this.isSaleRequest = true
+        this.monthData = response.data.month
+        this.payTotalFeeData = response.data.payTotalFee
+      })
+    },
+    handleGetHomepageCommodity() {
+      getHomepageCommodity(this.Commodity).then(response => {
+        this.isGoodRequest = true
+        this.goodsList = response.data
+      })
+    },
+    numFormat(num) {
+      var c = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+      return c
     }
   }
 }
@@ -77,21 +183,51 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
+  padding: 22px;
+  min-height: calc(100vh - 84px);
+  background-color: rgba(43, 67, 94, 1);
   position: relative;
-
   .github-corner {
     position: absolute;
     top: 0px;
     border: 0;
     right: 0;
   }
-
   .chart-wrapper {
     background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+    padding: 0 16px 0;
+    margin-bottom: 22px;
+    height: 475px;
+    border-radius: 10px;
+    position: relative;
+    .chartText{
+      width: 130px;
+      height: 140px;
+      padding-top:30px;
+      font-weight: bold;
+      font-size: 18px;
+      color:#98A0A7;
+      text-align: center;
+      position: absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      margin:auto;
+      .money{
+        color:#000000;
+      }
+    }
+    .chart-title{
+      height: 48px;
+      line-height: 48px;
+      span{
+        text-align: left;
+        font-size: 14px;
+        font-weight: bold;
+        color: #000000;
+      }
+    }
   }
 }
 

src/views/dashboard/index.vue

@@ -29,3 +29,8 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  .dashboard-container{
+    min-height: calc(100vh - 84px);
+  }
+</style>

src/views/other/about.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="app-container">
-    <tinymce v-model="content" :height="300" />
-    <div slot="footer" class="dialog-footer" style="float: right;padding:40px 0 80px 0;">
-      <el-button type="primary" style="width:100px;" @click="onSubmite()">提交</el-button>
+    <tinymce v-model="introduction" :height="300" />
+    <el-form ref="dataForm" :rules="rules" :model="from" label-position="left" label-width="80px" style="float: left;margin-top: 20px;">
+      <el-form-item label="联系我们" prop="contactNumber">
+        <el-input v-model="from.contactNumber" maxlength="11" placeholder="请输入联系方式" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="float: right;padding:80px 0 80px 0;">
+      <el-button type="primary" style="width:100px;" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
     </div>
-    <div v-if="isContent" class="editor-content" v-html="content" />
   </div>
 </template>
 
 <script>
 import Tinymce from '@/components/Tinymce'
+import { getOrganizeInfo, updateOrganizeInfo } from '@/api/other'
 export default {
   components: {
     Tinymce
@@ -17,13 +22,45 @@ export default {
   data() {
     return {
       isContent: false,
-      content: ''
+      introduction: '',
+      loadingbut: false,
+      loadingbuttext: '提交',
+      from: {
+        contactNumber: ''
+      },
+      rules: {
+        contactNumber: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
+      }
     }
   },
+  created() {
+    this.initData()
+  },
   methods: {
+    initData() {
+      getOrganizeInfo({ id: this.organizeID }).then(response => {
+        console.log(response)
+        this.introduction = response.data.introduction
+        this.from.contactNumber = response.data.contactNumber
+      })
+    },
     onSubmite() {
-      console.log(this.content)
-      this.isContent = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const Formobj = { id: this.organizeID, introduction: this.introduction }
+          const params = Object.assign(Formobj, this.from)
+          this.loadingbut = true
+          this.loadingbuttext = '提交中'
+          updateOrganizeInfo(params).then(response => {
+            this.$message({ message: response.msg, type: 'success', center: true })
+            this.loadingbut = false
+            this.loadingbuttext = '提交'
+            setTimeout(() => {
+              this.initData()
+            }, 3000)
+          })
+        }
+      })
     }
   }
 }

src/views/other/after.vue

@@ -1,21 +1,48 @@
 <template>
   <div class="app-container">
-    <Tinymce />
-    <div slot="footer" class="dialog-footer" style="float: right;padding:40px 0 80px 0;">
-      <el-button type="primary"  style="width:100px;" @click="onSubmite('dataForm')">提交</el-button>
+    <tinymce v-model="afterSale" :height="300" />
+    <div slot="footer" class="dialog-footer" style="float: right;padding:80px 0 80px 0;">
+      <el-button type="primary" style="width:100px;" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import Tinymce from '@/components/Tinymce'
+import { getOrganizeInfo, updateOrganizeInfo } from '@/api/other'
 export default {
   components: {
     Tinymce
   },
   data() {
     return {
-      msg: '售后无忧'
+      isContent: false,
+      afterSale: '',
+      loadingbut: false,
+      loadingbuttext: '提交'
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getOrganizeInfo({ id: this.organizeID }).then(response => {
+        console.log(response)
+        this.afterSale = response.data.afterSale
+      })
+    },
+    onSubmite() {
+      this.loadingbut = true
+      this.loadingbuttext = '提交中'
+      updateOrganizeInfo({ id: this.organizeID, afterSale: this.afterSale }).then(response => {
+        this.$message({ message: response.msg, type: 'success', center: true })
+        this.loadingbut = false
+        this.loadingbuttext = '提交'
+        setTimeout(() => {
+          this.initData()
+        }, 3000)
+      })
     }
   }
 }

src/views/other/notes.vue

@@ -1,21 +1,48 @@
 <template>
   <div class="app-container">
-    <Tinymce v-model="content" />
-    <div slot="footer" class="dialog-footer" style="float: right;padding:40px 0 80px 0;">
-      <el-button type="primary" style="width:100px;" @click="onSubmite('dataForm')">提交</el-button>
+    <tinymce v-model="shoppingNotes" :height="300" />
+    <div slot="footer" class="dialog-footer" style="float: right;padding:80px 0 80px 0;">
+      <el-button type="primary" style="width:100px;" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import Tinymce from '@/components/Tinymce'
+import { getOrganizeInfo, updateOrganizeInfo } from '@/api/other'
 export default {
   components: {
     Tinymce
   },
   data() {
     return {
-      msg: '购物须知'
+      isContent: false,
+      shoppingNotes: '',
+      loadingbut: false,
+      loadingbuttext: '提交'
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getOrganizeInfo({ id: this.organizeID }).then(response => {
+        console.log(response)
+        this.shoppingNotes = response.data.shoppingNotes
+      })
+    },
+    onSubmite() {
+      this.loadingbut = true
+      this.loadingbuttext = '提交中'
+      updateOrganizeInfo({ id: this.organizeID, afterSale: this.shoppingNotes }).then(response => {
+        this.$message({ message: response.msg, type: 'success', center: true })
+        this.loadingbut = false
+        this.loadingbuttext = '提交'
+        setTimeout(() => {
+          this.initData()
+        }, 3000)
+      })
     }
   }
 }