管理后台-点单列表

htmldev/manage/src/router/modules/business.js

@@ -121,19 +121,19 @@ const businessRouter = {
         {
           path: 'category',
           component: () => import('@/views/business/pms/category/index'),
-          name: 'Category',
+          name: 'BusinessPMSCategory',
           meta: { title: '商品分类' }
         },
         {
           path: 'goods',
-          component: () => import('@/views/business/pms/index'),
-          name: 'Goods',
+          component: () => import('@/views/business/pms/goods/index'),
+          name: 'BusinessPMSGoods',
           meta: { title: '商品列表' }
         },
         {
           path: 'add',
-          component: () => import('@/views/business/pms/add'),
-          name: 'Goods',
+          component: () => import('@/views/business/pms/add/index'),
+          name: 'BusinessPMSAdd',
           meta: { title: '添加商品' }
         }
       ]

htmldev/manage/src/views/business/oms/detail/index.vue

@@ -1,13 +1,161 @@
 <template>
-  <div>订单</div>
+  <div class="detail-container">
+    <el-card shadow="never" style="margin-top: 10px">
+      <div class="operate-container">
+        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
+        <span class="color-danger">当前订单状态：</span>
+        <div class="operate-button-container">
+          <el-button size="mini" @click="$router.go(-1)">返回</el-button>
+          <el-button size="mini" type="primary" @click="showMarkOrderDialog">退款</el-button>
+        </div>
+      </div>
+      <div style="margin-top: 20px">
+        <span class="font-small">基本信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="5" class="table-cell-title">订单ID</el-col>
+          <el-col :span="4" class="table-cell-title">桌号</el-col>
+          <el-col :span="5" class="table-cell-title">下单用户</el-col>
+          <el-col :span="5" class="table-cell-title">下单手机号</el-col>
+          <el-col :span="5" class="table-cell-title">下单时间</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="5" class="table-cell"></el-col>
+          <el-col :span="4" class="table-cell"></el-col>
+          <el-col :span="5" class="table-cell"></el-col>
+          <el-col :span="5" class="table-cell"></el-col>
+          <el-col :span="5" class="table-cell"></el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <span class="font-small">商品信息</span>
+      </div>
+      <el-table
+        ref="orderItemTable"
+        :data="order.orderItemList"
+        style="width: 100%;margin-top: 20px" border>
+        <el-table-column label="商品图片" width="120" align="center">
+          <template slot-scope="scope">
+            <img :src="scope.row.productPic"
+                 alt=""
+                 style="height: 80px">
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" align="center"></el-table-column>
+        <el-table-column label="商品规格" width="120" align="center"></el-table-column>
+        <el-table-column label="规格" width="120" align="center"></el-table-column>
+        <el-table-column label="数量" width="120" align="center"></el-table-column>
+        <el-table-column label="价格" width="120" align="center"></el-table-column>
+        <el-table-column label="小计" width="120" align="center"></el-table-column>
+      </el-table>
+      <div style="float: right;margin: 20px">
+        合计：<span class="color-danger">￥{{order.totalAmount}}</span>
+      </div>
+      <div style="margin-top: 60px">
+        <span class="font-small">费用信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="8" class="table-cell-title">优惠券</el-col>
+          <el-col :span="8" class="table-cell-title">积分抵扣</el-col>
+          <el-col :span="8" class="table-cell-title">活动优惠</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="8" class="table-cell"></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="table-cell-title">折扣金额</el-col>
+          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
+          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="8" class="table-cell"></el-col>
+          <el-col :span="8" class="table-cell"></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <el-dialog title="退款"
+               :visible.sync="markOrderDialogVisible"
+               width="40%">
+      <el-form :model="markInfo"
+               label-width="150px">
+        <el-form-item label="备注：">
+          <el-input v-model="markInfo.note" type="textarea" rows="3">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
-
 <script>
 export default {
-  name: 'index'
+  name: 'orderDetail',
+  data () {
+    return {
+      id: null,
+      order: {},
+      markOrderDialogVisible: false,
+      markInfo: { note: null }
+    }
+  },
+  methods: {
+    handleMarkOrder () {},
+    showMarkOrderDialog () {}
+  }
 }
 </script>
+<style scoped>
+.detail-container {
+  width: 80%;
+  padding: 20px 20px 20px 20px;
+  margin: 20px auto;
+}
+
+.operate-container {
+  background: #F2F6FC;
+  height: 80px;
+  margin: -20px -20px 0;
+  line-height: 80px;
+}
+
+.operate-button-container {
+  float: right;
+  margin-right: 20px
+}
 
-<style lang="scss" scoped>
+.table-layout {
+  margin-top: 20px;
+  border-left: 1px solid #DCDFE6;
+  border-top: 1px solid #DCDFE6;
+}
 
+.table-cell {
+  height: 60px;
+  line-height: 40px;
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+}
+
+.table-cell-title {
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  background: #F2F6FC;
+  text-align: center;
+  font-size: 14px;
+  color: #303133;
+}
 </style>

htmldev/manage/src/views/business/oms/list/index.vue

@@ -1,13 +1,86 @@
 <template>
-  <div>订单</div>
+  <div class="padding-20">
+    <div class="search-box">
+      <el-form ref="form" :inline="true" :model="searchForm" clearable label-width="100px" class="mt-10">
+        <el-form-item label="创建时间:">
+          <el-date-picker
+            :editable="false"
+            v-model="time"
+            @change="timearr => {timearr ? (searchForm.start_time = timearr[0] + ' 00:00:00', searchForm.end_time = timearr[1] + ' 23:59:59') : searchForm.start_time = searchForm.end_time = undefined}"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="部门名称:">
+          <el-input v-model="searchForm.department_name" placeholder="请输入部门名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item class="ml-10">
+          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table :data="tableData"
+              stripe
+              v-loading="tableLoading"
+              fit
+              class="marginT-10 order-table"
+              border
+              :max-height="vheight">
+      <el-table-column label="订单ID" prop="order_number"></el-table-column>
+      <el-table-column label="桌号" prop="place_number"></el-table-column>
+      <el-table-column label="点单用户" prop="order_user_name"></el-table-column>
+      <el-table-column label="手机号" prop="order_user_phone"></el-table-column>
+      <el-table-column label="商品数量" prop="product_num"></el-table-column>
+      <el-table-column label="下单时间" prop="created_at"></el-table-column>
+      <el-table-column label="订单状态状态">
+        <template slot-scope="scope">
+          <p>{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][scope.row.order_status] }}</p>
+        </template>
+      </el-table-column>
+      <!--TODO 支付单号-->
+      <el-table-column label="用户支付订单编号"></el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="text"
+                     @click="$router.push({name: 'BusinessOMSDetail', query: {orderNum: scope.row.order_number}})">订单详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="marginT-20"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :hide-on-single-page="true"
+      :current-page="page"
+      :page-size="page_size"
+      :page-sizes="[10, 20, 100, 200, 300, 400]"
+      background
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalCount"/>
+  </div>
 </template>
 
 <script>
+import page from '@/mixin/page'
+
 export default {
-  name: 'index'
+  mixins: [page],
+  data () {
+    return {
+      time: [],
+      searchForm: {},
+      tableData: [],
+      tableUrl: '/v1/user/order/list'
+    }
+  },
+  mounted () {
+    this.init()
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-
 </style>