目录
一、我的订单页
1.1. 页面效果
通过订单的不同状态,来分页显示订单。
1.2 后台接口
接口已经写好,测试结果:
1.3 页面改造
1.3.1 数据加载
在created中调用数据加载函数loadOrder,因为需要对查询结果进行分页,所以改造原来的分页查询接口,填充分页信息
后台接口改造:
将页数也作为返回对象
1.3.2 分页条
<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}}页 </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 ;
}
}
}
调用
渲染
效果