功能模块总结

订单模块

实现的功能有：
查询，重置，导出，查看详情，分页功能
首先查看接口文档，找到对应的数据，编写获取订单数据的api

//获取订单统计信息
export function GetOrdersStatic() {
  return request.get("/api/yp/orders/static");
}

创建orderlist页面并导入订单请求数据的接口

import {
    GetOrderList
} from '@/api/order.js'

运用element-ui进行基本的排版，用lelement-ui前先在main.js中全局引入

//导入el
import ElementUI from 'element-ui';
//导入css
import 'element-ui/lib/theme-chalk/index.css';
//使用el
Vue.use(ElementUI)

可以在网页中按F12打开开发者模式切换到网络，点击Fetch,点击预览就可以看到数据了

对数据排版，遍历和渲染

 <h1 class="list">订单列表</h1>
        <el-tabs v-model="searchObj.status" @tab-click="handleClick">
            <el-tab-pane :label="item.name + '(' + item.num + ')'" v-for="item in $store.state.order.ordersStatic"
                :name="item.name" :key="item.name"></el-tab-pane>
        </el-tabs>
        <!-- 配送方式 -->
        <el-form :inline="true" :model="searchObj" class="demo-form-inline" ref="searchForm">
            <el-form-item label="配送方式" prop="pickupInstore" style="margin:10px;">
                <el-radio-group v-model="searchObj.pickupInstore" @change="getOrderList()">
                    <el-radio :label="''">全部</el-radio>
                    <el-radio :label="0">自提</el-radio>
                    <el-radio :label="1">配送</el-radio>
                </el-radio-group>
                <div class="btn">
                    <el-link style="margin-right: 25px;width: 80px;height: 30px;border: 1px solid #ccc;"
                        @click="$refs.searchForm.resetFields(); getOrderList()">
                        重置</el-link>
                    <el-button @click="getOrderList()" style="width:80px;height:30px;padding: 0;">查询</el-button>
                </div>
            </el-form-item><br>
            <div style="background-color: #fff;margin-left: 20px;">
                <el-form-item label="订单编号" prop="orderNum">
                    <el-input v-model="searchObj.orderNum" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="商品编号" prop="ParentOrderID">
                    <el-input v-model="searchObj.ParentOrderID" placeholder="商品编号"></el-input>
                </el-form-item>
                <el-form-item label="所属门店" prop="shoppingAdd">
                    <el-input v-model="searchObj.shoppingAdd" placeholder="所属门店"></el-input>
                </el-form-item> <br />
                <el-form-item label="会员账号" prop="customerId">
                    <el-input v-model="searchObj.customerId" placeholder="用户账号"></el-input>
                </el-form-item>
                <el-form-item label="收货人" prop="consignee">
                    <el-input v-model="searchObj.consignee" placeholder="收货人"></el-input>
                </el-form-item>
                <el-form-item label="下单时间" prop="createStart">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchObj.createStart" type="datetime"
                        placeholder="选择开始时间">
                    </el-date-picker>
                </el-form-item>
                -
                <el-form-item label="" prop="createEnd">
                    <el-date-picker v-model="searchObj.createEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                        placeholder="选择截至时间">
                    </el-date-picker>
                </el-form-item>
            </div>

查询，重置，导出：先定义条件和方法，然后进行更新数据

import Vue from 'vue';
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
// 导入订单请求数据的接口
import {
    GetOrderList
} from '@/api/order.js'
 methods: {
        pageChange(e) {
            console.log(e);
            // 更新搜索条件的当前页
            this.searchObj.current = e;
            // 获取当前的订单
            this.getOrderList();
        },
        handleSelectionChange(val) {
            console.log("选择", val);
            // 更新导出的数据
            this.DetailsForm = val;
        },
        // 单击顶部tab栏重新获取订单信息
        handleClick(tab, event) {
            console.log(tab, event);
            this.getOrderList();
        },
        // 获取订单信息的方法
        getOrderList() {
            // 修正el的bug
            if (this.searchObj.status == 0 || this.searchObj.status == "全部") {
                this.searchObj.status = "";
            }
            GetOrderList(this.searchObj)
                .then(res => {
                    console.log("订单列表信息", res.data)
                    this.orderList = res.data.data;
                    this.pagnation = res.data.pagnation;
                    // 更新导出的数据
                    this.DetailsForm = res.data.data;
                    this.$refs.tab.toggleAllSelection();
                })
                .catch(err => {
                    console.log("获取订单信息失败", err)
                })
        }
    },
    data() {
        return {
            // 定义搜索条件
            searchObj: {
                current: 1,//当前页
                status: "",
                pickupInstore: "",
                orderNum: "",
                ParentOrderID: "",
                shoppingAdd: "",
                customerId: "",
                consignee: "",
                createStart: "",
                createEnd: "",
            },
            // 订单列表
            orderList: [],
            // 分页信息
            pagnation: {},
            //  导出表格的数据
            DetailsForm: [],
            // 导出的表头信息
            json_fields: {
                "订单状态": "status",
                "是否自提": {
                    field: "pickupInstore",
                    callback: (value) => {
                        console.log(value)
                        return value == "1" ? '是' : '否';
                    },
                },
            }
        }
    },
    created() {
        // 获取订单列表
        this.$store.dispatch("getOrdersStatic");
    },
    mounted() {
        this.getOrderList();
    },
    watch: {
        "searchObj": {
            // 监听seachObj变化，进行搜索
            handler() {
                this.getOrderList();
            },
            deep: true
        }
    }
}

总的来说，我的思路不是很清晰，这些数据的渲染也是在老师的一步步指导下才成功渲染出来，我的逻辑思路还在逐步形成，还在努力学习