代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>乐优商城--我的订单</title>
<link rel="icon" href="assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
<link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css"/>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#service").hover(function () {
$(".service").show();
}, function () {
$(".service").hide();
});
$("#shopcar").hover(function () {
$("#shopcarlist").show();
}, function () {
$("#shopcarlist").hide();
});
})
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
<!--header-->
<div id="account">
<div class="py-container">
<div class="yui3-g home">
<!--左侧列表-->
<div class="yui3-u-1-6 list">
<div class="person-info">
<div class="person-photo"><img src="img/_/photo.png" alt=""></div>
<div class="person-account">
<span class="name">{{user.username}}</span>
<span class="safe"><a href="#" @click="logout">退出登录 </a></span>
</div>
<div class="clearfix"></div>
</div>
<div class="list-items">
<dl>
<dt><i>·</i> 订单中心</dt>
<dd><a href="javascript:void(0)" @click="query.status=0" :class="{'list-active':query.status===0}">我的订单</a></dd>
<dd><a href="javascript:void(0)" @click="query.status=1" :class="{'list-active':query.status===1}">待付款</a></dd>
<dd><a href="javascript:void(0)" @click="query.status=2" :class="{'list-active':query.status===2}">待发货</a></dd>
<dd><a href="javascript:void(0)" @click="query.status=3" :class="{'list-active':query.status===3}">待收货</a></dd>
<dd><a href="javascript:void(0)" @click="query.status=4" :class="{'list-active':query.status===4}">待评价</a></dd>
</dl>
<dl>
<dt><i>·</i> 我的中心</dt>
<dd><a href="home-person-collect.html">我的收藏</a></dd>
<dd><a href="home-person-footmark.html">我的足迹</a></dd>
</dl>
<dl>
<dt><i>·</i> 物流消息</dt>
</dl>
<dl>
<dt><i>·</i> 设置</dt>
<dd><a href="home-setting-info.html">个人信息</a></dd>
<dd><a href="home-setting-address.html">地址管理</a></dd>
<dd><a href="home-setting-safe.html">安全管理</a></dd>
</dl>
</div>
</div>
<!--右侧主内容-->
<div class="yui3-u-5-6 order-pay">
<div class="body">
<div class="table-title">
<table class="sui-table order-table">
<tr>
<thead>
<th width="35%">宝贝</th>
<th width="5%">单价</th>
<th width="5%">数量</th>
<th width="8%">商品操作</th>
<th width="10%">实付款</th>
<th width="10%">交易状态</th>
<th width="10%">交易操作</th>
</thead>
</tr>
</table>
</div>
<div class="order-detail">
<div class="orders">
<div class="choose-order">
<div class="sui-pagination pagination-large top-pages">
<ul>
<li class="prev disabled"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
</div>
</div>
<!--order1-->
<div v-for="(o, i) in orders" :key="i">
<div class="choose-title">
<label data-toggle="checkbox" class="checkbox-pretty ">
<input type="checkbox" checked="checked" />
<span>{{formatDate(o.createTime)}} 订单编号：{{o.orderId}} <a>联系客服</a></span>
</label>
<a class="sui-btn btn-info share-btn">分享</a>
</div>
<table class="sui-table table-bordered order-datatable">
<tbody>
<tr v-for="(d,j) in o.orderDetails" :key="j">
<td width="35%">
<div class="typographic"><img width="70px" height="70px" :src="d.image"/>
<a href="#" class="block-text">包邮 {{d.title}}</a>
<span class="guige" v-for="(v,k) in JSON.parse(d.ownSpec)" :key="k">{{k+':'+ v}}</span>
</div>
</td>
<td width="5%" class="center">
<ul class="unstyled">
<li>¥{{formatPrice(d.price)}}</li>
</ul>
</td>
<td width
="5%" class="center">{{d.num}}</td>
<td width="8%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0">
<ul class="unstyled" v-if="o.status === 3">
<li>已发货</li>
<li><a>退货/退款</a></li>
</ul>
</td>
<td width="10%" class="center" :rowspan="o.orderDetails.length" v-if="j === 0">
<ul class="unstyled">
<li>¥{{formatPrice(getTotalPrice(o))}}</li>
<li>（含运费：￥0.00）</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">等待买家付款</li>
<li v-if="o.status === 2">已付款</li>
<li v-if="o.status === 3">已发货</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="#" class="sui-btn btn-info">立即付款</a></li>
<li v-if="o.status === 2"><a href="#" class="sui-btn btn-info">提醒发货</a></li>
<li v-if="o.status === 3"><a href="#" class="sui-btn btn-info">确认收货</a></li>
<li v-if="o.status === 3">4天23时后自动确认</li>
<li><a href="javascript:void(0)">取消订单</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="choose-order">
<div class="sui-pagination pagination-large top-pages">
<ul>
<li class="prev disabled"><a href="#">«上一页</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="dotted"><span>...</span></li>
<li class="next"><a href="#">下一页»</a></li>
</ul>
<div><span>共10页 </span><span>
到
<input type="text" class="page-num"><button class="page-confirm"
onclick="alert(1)">确定</button>
页</span></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="like-title">
<div class="mt">
<span class="fl"><strong>热卖单品</strong></span>
</div>
</div>
<div class="like-list">
<ul class="yui3-g">
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/_/itemlike01.png"/>
</div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>3699.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有6人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/_/itemlike02.png"/>
</div>
<div class="attr">
<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4388.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/_/itemlike03.png"/>
</div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4088.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/_/itemlike04.png"/>
</div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4088.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/plugins/jquery/jquery.cookie.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#account",
data: {
user: {},
orders:[],
query:{
status:0,
page:1,
rows:5
}
},
created() {
const token = Cookies.get("LY_TOKEN");
if (token) {
// 有token，曾经登录过，查询用户信息
leyou.http.get("/user/" + token)
.then(resp => {
this.user = resp.data;
// 查询订单信息
this.loadOrder();
})
.catch(() => {
// 去登录
this.gotoLogin();
});
} else {
// 去登录
this.gotoLogin();
}
},
methods: {
logout() {
// 删除cookie中的token即可
Cookies.remove("LY_TOKEN",{
path:"/",
domain:"leyou.com"
});
window.location = 'http://www.leyou.com'
},
gotoLogin() {
window.location = "login.html?returnUrl=" + window.location;
},
loadOrder(){
// 查询订单信息
ly.http.get("/order/list?"+ ly.stringify(this.query))
.then(({data:{items,total}}) => {
this.orders = items;
}).catch(() => this.orders = [])
},
formatDate:ly.formatDate,
formatPrice: ly.formatPrice,
getTotalPrice(order){
return order.orderDetails.map(d => d.num * d.price).reduce((v1,v2) => v1 + v2, 0);
}
},
watch:{
'query':{
deep:true,
handler(){
this.loadOrder();
}
}
}
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
