添加订单管理

src/api/biz/order.js

+/******************
+ * 订单管理
+ *****************/
+
+// 导入请求公用方法
+import {
+    request
+} from '../../utils/axiosFun';
+
+export function fetchList(query) {
+    return request('post', '/api/mgr/order/list', query)
+}
+

src/views/biz/order/index.vue

+<template>
+    <div class="template_content">
+        <!-- 搜索 -->
+        <div class="search_box">
+            <a-form layout="inline">
+              <a-form-item label="用户手机号">
+                  <a-input  v-model="searchPage.username" placeholder="请输入手机号" allowClear></a-input>
+              </a-form-item>
+              
+              <a-form-item>
+                  <a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
+              </a-form-item>
+            </a-form>
+        </div>
+
+        <!-- 表格内容 -->
+        <div class="content_box">
+            <!-- 表格 -->
+            <a-table
+                :columns="columns"
+                :dataSource="data"
+                :loading="loading"
+                :pagination="pagination"
+                bordered
+                size="small"
+                @change="handleTableChange"
+                rowKey="id"
+            >
+                <template slot="userInfo" slot-scope="text,record">
+                    <div>昵称：{{record.nickName}}</div>
+                    <div>手机：{{record.username}}</div>
+                </template>
+                <template slot="status" slot-scope="text,record">
+                    <a-tag v-if="text == 'WAIT_PAY'" color="red">未支付</a-tag>
+                    <a-tag v-if="text == 'PAY_COMPLETE'" color="green">已支付</a-tag>
+                    <a-tag v-if="text == 'PAY_FAILD'" color="red">支付失败</a-tag>
+                </template>
+            </a-table>
+        </div>
+    </div>
+</template>
+<script>
+import {fetchList} from '@/api/biz/order'
+import {disposereq} from '@/utils/util'
+
+let columns = [
+    {
+        title: "订单编号",
+        dataIndex: "orderNo",
+        align: "center"
+    },
+    {
+        title: "订单名称",
+        dataIndex: "orderNo",
+        align: "orderName"
+    },
+    {
+        title: "单价",
+        dataIndex: "productPrice",
+        align: "center"
+    },
+    {
+        title: "数量",
+        dataIndex: "productCount",
+        align: "center"
+    },
+    {
+        title: "下单人信息",
+        dataIndex: "userId",
+        align: "center",
+        scopedSlots: {customRender: 'userInfo'}
+    },
+    {
+        title: "状态",
+        dataIndex: "status",
+        align: "center",
+        scopedSlots: {customRender: 'status'}
+    },
+    {
+        title: "用户身份",
+        dataIndex: "userRoleName",
+        align: "center"
+    },
+    {
+        title: "支付方式",
+        dataIndex: "payMethod",
+        align: "center",
+        customRender: (text) => {
+            return text == 'WeiXin' ? '微信' : text == 'AliPay' ? '支付宝' : '其它'
+        }
+    },
+    {
+        title: "支付金额",
+        dataIndex: "paymentMoney",
+        align: "center",
+        customRender: (text) => {
+            return '¥'+text
+        }
+    },
+
+]
+
+export default {
+    data(){
+        return {
+            columns: columns,
+            data: [],
+            loading: false,
+            searchPage: {
+                pageIndex: 1,
+                pageSize: 10,
+                username: ''
+
+            },
+            pagination: {
+                showQuickJumper: true,
+                showSizeChanger: true
+            },
+        }
+    },
+    created() {
+        this.getList(this.searchPage)
+    },
+    beforeUpdate() {
+        
+    },
+    methods: {
+        getList(query){
+            this.loading = true;
+            fetchList(query).then(res => {
+                if(res.code == 200){
+                    this.data = res.data
+                    let paper = {...this.pagination}
+                    paper.current = query.pageIndex
+                    paper.total = res.count
+                    this.pagination = paper
+                }else{
+                    this.$message.info(res.resp_code)
+                }
+                this.loading = false
+            }).catch(err => {
+                this.loading = false
+                disposereq(this,err)
+            })
+        }
+    }
+}
+</script>
+<style>
+.template_content {
+  background-color: #f0f2f5;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.search_box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+  background-color: #fff;
+}
+.content_box {
+  width: 100%;
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 14px;
+}
+.table_top {
+  padding-bottom: 14px;
+}
+.btn_margin {
+  margin: 0px 5px;
+}
+</style>
\ No newline at end of file