<style>
.OrderdetailCompleted{
background-color: #f5f5f5
}
.OrderdetailCompleted .breadcrumb{
padding: 20px 0;
}
.Order_Top{
width:100%;
height:300px;
border:1px solid #ECECEC;
background-color: #fff;
border-top:4px solid #F2DADA;
}
.Order_Top_left{
display:inline-block;
width:326px;
height:100%;
border-right:1px solid #ECECEC;
text-align: center;
font-size:12px;
color:#666666;
}
.Order_Top_right{
font-size:12px;
color:#333333;
float:right;
margin:120px 25px 0 0;
}
.Order_Complate{
margin-top:109px;
}
.Order_Complate span{
position: relative;
top:-18px;
margin-left:20px;
color:#4CAF50;
font-size:24px;
font-weight: bold;
}
.Order_jifen{
margin:20px 0;
}
.Submit_Orders i{
display: block;
font-size:25px;
color:#4CAF50;
margin-bottom:10px;
}
.Submit_Orders{
width:80px;
display: inline-block;
text-align: center;
}
.SubmitComLine{
display:inline-block;
position: relative;
top:-28px;
}
.Submit_Orders img{
width:22px;
position: relative;
top:-8px;
}
.OrderdetailCompleted .myPointTable{
width: 100%;
border: solid 1px #EDEDED;
border-collapse: collapse;
font-size:14px;
margin:20px 0;
}
.OrderdetailCompleted .myPointTable td{
padding:17px 15px;
background-color: #fff;
color:#333333;
border:1px solid #ECECEC;
font-size:12px;
}
.OrderdetailCompleted .pointOrderTime{
color:#999999;
}
.OrderdetailCompleted .pointOrderNum{
color:#333333
}
.OrderdetailCompleted .pointOrderTitle{
margin-left:30px;
color:#666666;
}
.OrderdetailCompleted .po_info{
display: flex;
align-items: center;
}
.OrderdetailCompleted .po_left{
width: 70px;
height: 70px;
background-color: #fff;
margin-right: 10px;
border:1px solid #ECECEC;
display: inline-block;
}
.OrderdetailCompleted .po_left img{
width:100%;
}
.OrderdetailCompleted .po_right{
color: #666666;
font-size: 14px;
display: inline-block;
width: 220px;
text-align: left;
}
.OrderdetailCompleted .pointCancelBtn{
width:64px;
height:24px;
outline: none;
color:#666666;
background-color: transparent;
border:1px solid rgba(102,102,102,1);
border-radius:4px;
cursor: pointer;
font-size:12px;
}
.OrderShouContent{
font-size:12px;
color:#333333;
margin-left:20px;
}
.Order_left,.Order_right{
display:inline-block;
vertical-align:top;
}
.Order_right{
margin-left:20px;
text-align: left;
}
.Order_right div{
margin-bottom:5px;
}
.Order_more{
color:#EE4454;
text-decoration: underline;
cursor: pointer;
}
.OrderDetails_Status{
text-align: center;
font-size:18px;
}
</style>
<template>
<el-row class="OrderdetailCompleted">
<div class="w1200">
<el-row>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/IntegralMall' }">积分商城</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/myPointOrder' }">我的订单</el-breadcrumb-item>
<el-breadcrumb-item>订单详情</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<div class="OrderContent">
<div class="Order_Top">
<div class="Order_Top_left">
<div class="Order_Complate">
<img src="../../assets/img/ticket/icons8-tick-box-96.png" alt=""/>
<span>支付成功</span>
</div>
<div class="Order_jifen">
支付积分：￥{{dataList.goodsPrice*dataList.buyNum}}
</div>
</div>
<div class="Order_Top_right">
<div class="Submit_Orders">
<i class="iconfont icon-order_icon" v-if="dataList.orderStatus==1||dataList.orderStatus==2||dataList.orderStatus==3||dataList.orderStatus==4"/>
<i class="iconfont icon-order_icon" v-else style="color:gray"/>
待处理
</div>
<div class="SubmitComLine">
<img src="../../assets/img/orderLins.png" alt=""/>
</div>
<div class="Submit_Orders">
<i class="iconfont icon-xunhuan" v-if="dataList.orderStatus==2||dataList.orderStatus==3||dataList.orderStatus==4"/>
<i class="iconfont icon-xunhuan" v-else style="color:gray"/>
待配送
</div>
<div class="SubmitComLine">
<img src="../../assets/img/orderLins.png" alt=""/>
</div>
<div class="Submit_Orders">
<i class="iconfont icon-gerenzhongxindingdandaishouhuo" v-if="dataList.orderStatus==3||dataList.orderStatus==4"></i>
<i class="iconfont icon-gerenzhongxindingdandaishouhuo" v-else style="color:gray"></i>
配送中
</div>
<div class="SubmitComLine">
<img src="../../assets/img/orderLins.png" alt=""/>
</div>
<div class="Submit_Orders">
<div v-if="dataList.orderStatus==4"><img src="../../assets/img/ticket/icons8-tick-box-96.png" alt=""/></div>
<div v-else><img src="../../assets/img/ticket/huigou.png" alt=""/></div>
交易成功
</div>
</div>
</div>
<table class="myPointTable">
<tr>
<td colspan="3">
<span class="pointOrderTime">{{dataList.crateTime | YMDHMS}}</span>
<span class="pointOrderTitle">订单号：</span><span class="pointOrderNum">{{dataList.orderNum}}</span>
</td>
</tr>
<tr>
<td width="325px">
<div class="po_info">
<div class="po_left">
<img :src="dataList.goodsImg" alt=""/>
</div>
<div class="po_right">
{{dataList.goodsName}}
</div>
</div>
</td>
<td>
<!-- <div class="OrderShouContent" v-if="index<num" v-for="(item,index) in data">
<div class="Order_left">
{{item.time}}
</div>
<div class="Order_right">
<div v-for="(subItem,subIndex) in item.list">
{{subItem}}
<span @click="DataLength(1)" v-if="num==1&&data.length>1&&subIndex==item.list.length-1" class="Order_more">查看更多>></span>
<span @click="DataLength(2)" v-if="num>1&&index==data.length-1&&subIndex==item.list.length-1" class="Order_more">收起>></span>
</div>
</div>
</div> -->
<div class="OrderDetails_Status">
<span v-if="dataList.orderStatus==1">待处理</span>
<span v-if="dataList.orderStatus==2">待配送</span>
<span v-if="dataList.orderStatus==3">配送中</span>
<span v-if="dataList.orderStatus==4">交易成功</span>
</div>
</td>
<td width="132px" style="text-align:center;">
<input type="button" class="pointCancelBtn" @click="goUrl('integral')" value="再次兑换">
</td>
</tr>
</table>
</div>
</div>
</el-row>
</template>
<script>
export default {
data(){
return {
num:1,
id:0,
dataList:[],
//标题
orderTitle:'',
score:'',
data:[
{
time:"2019-08-08",
list:[
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
]
},
{
time:"2019-08-09",
list:[
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
"09:26:17包裹正在等待收货",
]
}
]
}
},methods:{
DataLength(num){
if(num==2){
this.num=1;
}else{
this.num=this.data.length;
}
},
getInfo(){
let msg = {
id:this.id
}
this.apiJavaPost('/api/orderForm/getOrderDetail',msg,res=>{
if(res.data.resultCode==1){
this.dataList = res.data.data;
}else{
this.Error(res.data.message);
}
});
},
//获取积分
getScore(){
this.apiJavaPost('/api/orderForm/getTotalIntegrals',{},res=>{
if(res.data.resultCode==1){
this.score = res.data.data;
}else{
this.Error(res.data.message);
}
});
},
goUrl: function (path) {
this.$router.push({name: path});
}
},mounted(){
this.getInfo();
this.getScore();
},created(){
this.id = this.$route.query.id;
}
}
</script>