<template>
|
<div class="orderdetail">
|
<div class="person-header">
|
<span>卖家已发货</span>
|
</div>
|
<div class="weui-flex">
|
<div><div class="placeholder"><img class="img" src="@/assets/images/profile.png" alt=""></div></div>
|
<div class="weui-flex__item">
|
<div class="placeholder">
|
<p>收件人 张先生 1339349293</p>
|
<p>收货地址：北京 朝阳区 朗廷大厦 413室</p>
|
</div>
|
</div>
|
</div>
|
<div class="commodity border-bottom-5">
|
<div class="commodity-main">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
|
<p class="selected">颜色 红色</p>
|
<p class="selected">尺码 L码</p>
|
</div>
|
<div class="valuation">
|
<p> </p>
|
<p class="money">￥ 349</p>
|
<p class="weui-count">
|
X1
|
</p>
|
</div>
|
</div>
|
<div class="commodity-main">
|
<div class="img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="detail">
|
<p class="name">Cache韩版打底衫女短款时尚休闲动物图案短袖印花T恤女圆领</p>
|
<p class="selected">颜色 红色</p>
|
<p class="selected">尺码 L码</p>
|
</div>
|
<div class="valuation">
|
<p> </p>
|
<p class="money">￥ 349</p>
|
<p class="weui-count">
|
X1
|
</p>
|
</div>
|
</div>
|
<div class="commodity-footer border-top-1">
|
<p>共2件商品，合计￥ 263.00</p>
|
<p>积分抵扣￥ 3.00</p>
|
<p>运费￥ 3.00</p>
|
<p>实付款<span class="money">￥ 3.00</span></p>
|
</div>
|
</div>
|
<div class="commodity">
|
<div class="commodity-footer">
|
<div class="order-message">
|
<span class="title">订单编号：</span>
|
<span class="pull-right">342345325653</span>
|
</div>
|
<div class="order-message">
|
<span class="title">创建时间：</span>
|
<span class="pull-right">2018-09-12 12:30</span>
|
</div>
|
<div class="order-message">
|
<span class="title">付款时间：</span>
|
<span class="pull-right">2018-09-12 12:35</span>
|
</div>
|
<div class="order-message">
|
<span class="title">发货时间：</span>
|
<span class="pull-right">2018-09-13 12:30</span>
|
</div>
|
<div class="clear"></div>
|
<div class="operation">
|
<div class="placeholder" @click="contactService()">联系客服</div>
|
<div class="placeholder">确认收货</div>
|
<div class="placeholder active">查看物流</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'orderdetail',
|
components: {},
|
data () {
|
return {
|
dict: dict
|
}
|
},
|
methods: {
|
jumpBack () {
|
this.$router.back(-1)
|
},
|
jumpSearch () {
|
this.$router.push({name: 'login', params: {view: 'home'}})
|
},
|
contactService () {
|
this.$router.push({name: 'service'})
|
}
|
},
|
mounted: function () {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.order-message {
|
height: 30px;
|
}
|
.order-message .title {
|
width: 80px;
|
float: left;
|
}
|
.person-header {
|
height: 60px;
|
background: #EA2E57;
|
padding: 10px 20px;
|
color: #ffffff;
|
line-height: 60px;
|
}
|
.weui-flex {
|
height: 50px;
|
padding-top: 10px;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.placeholder .img {
|
display: inline-block;
|
width: 35px;
|
}
|
.placeholder p {
|
font-size: 13px;
|
}
|
.commodity {
|
position: relative;
|
padding: 10px 10px 10px;
|
}
|
.commodity-main {
|
position: relative;
|
}
|
.commodity .select {
|
position: absolute;
|
top: 35%;
|
}
|
.commodity .img {
|
display: inline-block;
|
width: 28%;
|
}
|
.commodity .img img {
|
width: 100%;
|
display: table-cell;
|
border-radius: 3px;
|
}
|
.commodity .detail {
|
position: absolute;
|
width: 40%;
|
height: 100%;
|
left: 30%;
|
top: 0px;
|
}
|
.commodity .detail p {
|
font-size: 13px;
|
height: 30%;
|
}
|
.commodity .detail .name {
|
width: 120%;
|
height: auto;
|
min-height: 30%;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
.commodity .detail .selected {
|
color: #bcbcbc;
|
}
|
.valuation {
|
position: absolute;
|
width: 30%;
|
height: 100%;
|
right: 10px;
|
top: 0px;
|
text-align: right;
|
}
|
.valuation p {
|
font-size: 13px;
|
height: 30%;
|
}
|
.valuation .money, .money {
|
color: red;
|
font-size: 16px;
|
}
|
.commodity-footer {
|
font-size: 14px;
|
color: #777777;
|
text-align: right;
|
}
|
.commodity-footer p {
|
line-height: 30px;
|
}
|
.operation {
|
padding-top: 15px;
|
margin-bottom: 40px;
|
}
|
.operation .placeholder {
|
width: 70px;
|
height: 25px;
|
line-height: 25px;
|
margin: 2px;
|
text-align: center;
|
border-radius: 25px;
|
float: right;
|
border: 1px solid #bbbbbb;
|
}
|
.operation .placeholder.active {
|
color: #ee0000;
|
border-color: #ee0000;
|
}
|
</style>
|
