??

src/components/access/access.vue

@@ -35,7 +35,6 @@ export default {
         this.$message.error(res.meta.msg)
       }
       this.data = res.data
-      console.log(res.data)
     }
   },
   mounted () {

src/components/order/order.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="order">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
+        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <el-card class="box-card">
+        <el-row :gutter="10">
+         <el-col :span="8">
+           <el-input v-model="params.query" placeholder="请输入内容">
+             <el-button slot="append" icon="el-icon-search" ></el-button>
+           </el-input>
+         </el-col>
+        </el-row>
+
+        <el-table
+          :data="data" border stripe
+          style="width: 100%">
+          <el-table-column
+            type="index"
+            label="#"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="order_number"
+            label="订单号"
+            width="250">
+          </el-table-column>
+          <el-table-column
+            prop="order_price"
+            label="订单价格"
+            width="100">
+          </el-table-column>
+          <el-table-column
+            prop="pay_status"
+            label="是否付款">
+            <template slot-scope="scope">
+              <el-tag :type="['danger','success'][scope.row.pay_status]">{{['未付款','已付款'][scope.row.pay_status]}}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="is_send"
+            label="是否发货">
+          </el-table-column>
+          <el-table-column
+            prop="create_time"
+            label="下单时间">
+            <template slot-scope="scope">
+              {{scope.row.create_time*1000 | dataFormat}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
+              <el-button size="mini" type="success" icon="el-icon-location" @click="edit(scope.row)"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="params.pagenum"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="params.pagesize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+
+      </el-card>
+
+      <el-dialog @close="close" title="修改收货地址" :visible.sync="dialogFormVisible">
+        <el-form :model="form" ref="form" :rules="rules" label-width="100">
+          <el-form-item label="活动区域" prop="region">
+
+            <el-cascader
+              :options="options"
+              v-model="selectKey" :props="props"
+              @change="handleChange"></el-cascader>
+          </el-form-item>
+          <el-form-item label="活动名称" prop="address">
+            <el-input v-model="form.address" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+import citydata from './citydata'
+
+export default {
+  data () {
+    return {
+      params: {
+        query: '',
+        pagesize: 10,
+        pagenum: 1
+      },
+      data: [],
+      form: {
+        address: '',
+        region: ''
+      },
+      props: {
+        label: 'label',
+        value: 'value',
+        children: 'children',
+        expandTrigger: 'hover'
+      },
+      options: citydata,
+      selectKey: [],
+      total: 0,
+      dialogFormVisible: false,
+      rules: {
+        address: [
+          { required: true, message: '请填写详细地址', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择区域' }
+        ]
+      }
+    }
+  },
+  methods: {
+    close () {
+      this.$refs.form.resetFields()
+      this.selectKey = []
+    },
+    handleChange (value) {
+      this.form.region = value.join(',')
+    },
+    edit (row) {
+      this.dialogFormVisible = true
+    },
+    handleSizeChange (val) {
+      this.params.pagesize = val
+      this.list()
+    },
+    handleCurrentChange (val) {
+      this.params.pagenum = val
+      this.list()
+    },
+    async list () {
+      const { data: res } = await this.$http.get('orders', {
+        params: this.params
+      })
+      this.total = res.data.total
+      this.data = res.data.goods
+    }
+  },
+  mounted () {
+    this.list()
+  }
+}
+</script>
+<style lang="less" scoped>
+  .el-cascader{
+    width: 100%;
+  }
+</style>

src/router/router.js

@@ -10,6 +10,7 @@ import categories from '../components/goods/categories'
 import params from '../components/goods/params'
 import goods from '../components/goods/goods'
 import goodsEdit from '../components/goods/edit'
+import order from '../components/order/order'
 
 Vue.use(VueRouter)
 
@@ -28,7 +29,8 @@ const routes = [
       { path: '/categories', component: categories },
       { path: '/params', component: params },
       { path: '/goods', component: goods },
-      { path: '/goods/add', component: goodsEdit }
+      { path: '/goods/add', component: goodsEdit },
+      { path: '/orders', component: order }
     ]
   }
 ]