<div class="sui-pagination pagination-large top-pages">
    <ul>
        <li class="prev disabled">
            <a @click="prevPage">«上一页</a>
        </li>
        <li :class="{active:index(i) === query.page}" v-for="i in Math.min(5,totalPage)" :key="i">
            <a @click="query.page=index(i)">{{index(i)}}</a>
        </li>
        <li class="dotted" v-show="totalPage>5"><span>...</span></li>
        <li :class="{next:true,disabled:query.page === totalPage}">
            <a @click="nextPage">下一页»</a>
        </li>
    </ul>
    <div>
        <span>共{{totalPage}}页&nbsp;</span>
        <span>
            到第
            <input type="text" class="page-num" ref="page">
            页 <button class="page-confirm" @click="navPage">确定</button>
        </span>
    </div>
</div>

js代码：

方法

navPage(){
    this.query.page = this.$refs.page.value ;
},
index(i){
    if(this.query.page <= 3 || this.totalPage <= 5){
        // 如果当前页小于等于3或者总页数小于等于5
        return i;
    }else if (this.query.page > this.totalPage - 3) {
        //当前页码大于totalPage-3，应该从totalPage-5开始
        return this.totalPage - 5 + i;
    } else if(this.query.page > 3) {
        // 如果当前页大于3，应该从page-3开始
        return this.query.page - 3 + i;
    }
},
prevPage(){
    if(this.query.page > 1){
        this.query.page--
    }
},
nextPage(){
    if(this.query.page < this.totalPage){
        this.query.page++
    }
},

需要的变量

监听

当页数发生改变时，重新加载数据

watch:{
    'query':{
        deep:true,
        handler(){
            this.loadOrder();
        }
    }
}

1.4 测试

这个分页条与搜索页面的分页条是一模一样的，只不过换了一下监听对象。

1.5 订单状态过滤

1.5.1 全部订单（16）

1.5.2 待付款（3）

1.5.3 待发货（4）

1.5.4 待收货（3）

1.5.5 待评价（2）

1.5.6 对比

状态：1、未付款 2、已付款,未发货 3、已发货,未确认 4、交易成功 5、交易关闭 6、已评价

与数据库中的数据一致，去除状态5和6。

二、基本操作

2.1 准备工作

2.1.1 编写修改订单状态的函数

updateOrderState(orderId,status){
                ly.verifyUser().then(() => {
                    ly.http.put("/order/"+orderId+"/"+status).then(() => {
                        this.loadOrder();
                    })
                }).catch(() => {
                    this.gotoLogin();
                })
            },

2.1.2 订单状态修改

立即付款

携带订单号跳转支付页面，就修改订单状态为已付款代发货。

取消订单

提醒发货

确认收货

评价

2.2 页面改造

<td width="10%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0">
    <ul class="unstyled">
        <li v-if="o.status === 1">等待买家付款</li>
        <li v-if="o.status === 2">已付款</li>
        <li v-if="o.status === 3">已发货</li>
        <li v-if="o.status === 4">待评价</li>
        <li v-if="o.status === 5">交易关闭</li>
        <li v-if="o.status === 6">交易成功</li>
        <li><a href="home-orderDetail.html" class="btn">订单详情 </a></li>
    </ul>
</td>
<td width="10%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0">
    <ul class="unstyled">
        <li v-if="o.status === 1"><a href="#" @click="payment(o.orderId,getTotalPrice(o))" class="sui-btn btn-info">立即付款</a></li>
        <li v-if="o.status === 2"><a href="#" @click="deliver(o.orderId)" class="sui-btn btn-info">提醒发货</a></li>
        <li v-if="o.status === 3"><a href="#" @click="receiveGoods(o.orderId)" class="sui-btn btn-info">确认收货</a></li>
        <li v-if="o.status === 4"><a href="#" @click="review(o.orderId)" class="sui-btn btn-info">评价</a></li>
        <li v-if="o.status === 3">4天23时后自动确认</li>
        <li><a v-if="o.status === 1" href="javascript:void(0)" @click="cancelOrder(o.orderId)">取消订单</a></li>
    </ul>
</td>

2.3 测试

2.3.1 初始化数据

2.3.2 付款

点击立即付款：

返回查看：

2.3.4 提醒发货

点击上边的提醒发货：

2.3.5 确认收货

点击确认收货，然后查看待评价页面：

2.3.6 点击评价

2.3.7 取消订单

点击取消订单：

结果：

三、订单详情

3.1 页面效果

3.2 页面渲染

3.2.1 订单信息

这里面的订单信息重点是显示各个阶段的时间，所以也就是订单的状态。根据订单号查询当前订单状态，然后进行渲染

查询订单状态

当查询订单对象成功后，再根据订单号查询订单状态。（应该是在订单对象中将订单状态进行填充，但是前期设计有问题，只能通过新增接口来解决）

ly.http.get("/order/"+orderId).then(({data}) => {
    this.detailOrder = data;
    //查询订单详情
    ly.http.get("/order/status/"+orderId).then(({data}) => {
        this.orderStatus = data;
    })

});

查询结果：

页面渲染

收货地址和订单号通过detailOrder来渲染，其它的通过orderStatus来渲染

3.2.2 订单内商品信息

通过detailOrder中的orderDetails来进行渲染：

3.2.3 订单状态图

根据当前订单的状态渲染出对应的状态图。

封装对象orderState用来显示状态图。

准备数据

要显示的标题及对应的时间类型

封装

temp对象：

stateClass：设置样式（已完成：finished、当前：current、将来：todo）
staetTime：显示对应状态的时间
stateDay：显示对应状态的日期
satetTitle：显示对应状态的标题

createOrderState(data){
    for (let i = 1; i <= 5; i++){
        let temp = {
            stateClass: '',
            stateTime: '',
            stateDay: '',
            stateTitle: '',
        };
        temp.stateTitle = this.stateData[i-1];
        if (i === data.status){
            const t = this.formatDate(data[this.stateType[i-1]]).split(" ");
            temp.stateDay = t[0];
            temp.stateTime = t[1];
            temp.stateClass = "current";
            this.orderState.push(temp);
            continue ;
        }else if (i < data.status) {
            const t = this.formatDate(data[this.stateType[i-1]]).split(" ");
            temp.stateDay = t[0];
            temp.stateTime = t[1];
            if (i === 5){
                temp.stateClass = "finished last";
            }else {
                temp.stateClass = "finished";
            }
            this.orderState.push(temp);
            continue ;
        }else {
            if (i === 5) {
                temp.stateClass = "todo last";
            }else{
                temp.stateClass = "todo";
            }
            temp.stateDay = "";
            temp.stateTime = "";
            this.orderState.push(temp);
            continue ;
        }

    }
}

调用

渲染

效果

乐优商城（三十九）—— 订单中心

一、我的订单页

1.1. 页面效果

1.2 后台接口

1.3 页面改造

1.3.1 数据加载

1.3.2 分页条