389 lines
7.7 KiB
Vue
389 lines
7.7 KiB
Vue
<template>
|
|
<div class="order-right">
|
|
<div class="order-content">
|
|
<div class="title">
|
|
<h3>我的订单</h3>
|
|
</div>
|
|
<div class="chosetype">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th width="29%">商品</th>
|
|
<th width="31%">订单详情</th>
|
|
<th width="13%">收货人</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="orders">
|
|
<!-- 每一笔订单 -->
|
|
<table class="order-item" v-for="(item, index) in dingdanmessage.records" :key="index">
|
|
<thead>
|
|
<!-- 头部 -->
|
|
<tr>
|
|
<th colspan="5">
|
|
<span class="ordertitle"
|
|
>{{ item.expireTime }} 订单编号：{{ item.outTradeNo }} <span class="pull-right delete"><img src="./images/delete.png" /></span
|
|
></span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 每笔订单商品 -->
|
|
<tr v-for="(a, i) in item.orderDetailList" :key="i">
|
|
<td width="60%">
|
|
<div class="typographic">
|
|
<img :src="a.imgUrl" />
|
|
<a href="#" class="block-text">{{ a.skuName }}</a>
|
|
<span>x{{ a.skuNum }}</span>
|
|
<a href="#" class="service">售后申请</a>
|
|
</div>
|
|
</td>
|
|
<!-- 1.根据商品的数量合并上下单元格 -->
|
|
<!-- 2.并显示1次:根据索引来只显示一次 -->
|
|
<td :rowspan="item.orderDetailList.length" width="8%" class="center" v-if="i == 0">{{ item.consignee }}</td>
|
|
<td :rowspan="item.orderDetailList.length" width="13%" class="center" v-if="i == 0">
|
|
<ul class="unstyled">
|
|
<li>总金额¥{{ item.totalAmount }}.00</li>
|
|
<li>在线支付</li>
|
|
</ul>
|
|
</td>
|
|
<td :rowspan="item.orderDetailList.length" width="8%" class="center" v-if="i == 0">
|
|
<a href="#" class="btn">{{ item.orderStatusName }} </a>
|
|
</td>
|
|
<td :rowspan="item.orderDetailList.length" width="13%" class="center" v-if="i == 0">
|
|
<ul class="unstyled">
|
|
<li>
|
|
<a href="mycomment.html" target="_blank">评价|晒单</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="choose-order">
|
|
<!-- 分页 -->
|
|
<!-- 父传子当前显示第几页 -->
|
|
<Pagination :pageNo="page" :pagesize="limit" :total="dingdanmessage.total" :continues="5" @pagechangelist="pagechangelist"></Pagination>
|
|
</div>
|
|
</div>
|
|
<!--猜你喜欢-->
|
|
<div class="like">
|
|
<h4 class="kt">猜你喜欢</h4>
|
|
<ul class="like-list">
|
|
<li class="likeItem">
|
|
<div class="p-img">
|
|
<img src="./images/itemlike01.png" />
|
|
</div>
|
|
<div class="attr">
|
|
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
|
|
</div>
|
|
<div class="price">
|
|
<em>¥</em>
|
|
<i>3699.00</i>
|
|
</div>
|
|
<div class="commit">已有6人评价</div>
|
|
</li>
|
|
<li class="likeItem">
|
|
<div class="p-img">
|
|
<img src="./images/itemlike02.png" />
|
|
</div>
|
|
<div class="attr">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</div>
|
|
<div class="price">
|
|
<em>¥</em>
|
|
<i>4388.00</i>
|
|
</div>
|
|
<div class="commit">已有700人评价</div>
|
|
</li>
|
|
<li class="likeItem">
|
|
<div class="p-img">
|
|
<img src="./images/itemlike03.png" />
|
|
</div>
|
|
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
|
<div class="price">
|
|
<em>¥</em>
|
|
<i>4088.00</i>
|
|
</div>
|
|
<div class="commit">已有700人评价</div>
|
|
</li>
|
|
<li class="likeItem">
|
|
<div class="p-img">
|
|
<img src="./images/itemlike04.png" />
|
|
</div>
|
|
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
|
|
<div class="price">
|
|
<em>¥</em>
|
|
<i>4088.00</i>
|
|
</div>
|
|
<div class="commit">已有700人评价</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 当前第几页
|
|
page: 1,
|
|
// 每一页展示的数据
|
|
limit: 3
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
dingdanmessage: (state) => {
|
|
return state.mydingdan.dingdanmessage || {}
|
|
}
|
|
})
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('getmydingdan', { page: this.page, limit: this.limit })
|
|
},
|
|
methods: {
|
|
// 获取当前点击的那一页
|
|
pagechangelist(page) {
|
|
this.page = page
|
|
this.$store.dispatch('getmydingdan', { page: this.page, limit: this.limit })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
//右边
|
|
.order-right {
|
|
float: right;
|
|
width: 83.33%;
|
|
|
|
//订单部分
|
|
.order-content {
|
|
margin: 0 20px;
|
|
color: #666;
|
|
|
|
//标题
|
|
.title {
|
|
margin-bottom: 22px;
|
|
border: 1px solid #ddd;
|
|
|
|
h3 {
|
|
padding: 12px 10px;
|
|
font-size: 15px;
|
|
background-color: #f1f1f1;
|
|
}
|
|
}
|
|
|
|
//表头
|
|
.chosetype {
|
|
margin-bottom: 15px;
|
|
color: #666;
|
|
|
|
table {
|
|
border: 1px solid #e6e6e6;
|
|
border-collapse: separate;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-spacing: 0;
|
|
|
|
th {
|
|
padding: 6px 8px;
|
|
color: #666;
|
|
font-weight: 700;
|
|
vertical-align: bottom;
|
|
background-color: #f4f4f4;
|
|
line-height: 18px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表单内容
|
|
.orders {
|
|
font-size: 12px;
|
|
|
|
a {
|
|
&:hover {
|
|
color: #4cb9fc;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border: 1px solid #e6e6e6;
|
|
border-collapse: collapse;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
margin-bottom: 18px;
|
|
max-width: 100%;
|
|
|
|
th {
|
|
padding: 6px 8px;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
vertical-align: bottom;
|
|
background-color: #f4f4f4;
|
|
font-size: 12px;
|
|
color: #666;
|
|
|
|
.pull-right {
|
|
float: right;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
td {
|
|
font-size: 12px;
|
|
color: #666;
|
|
padding: 6px 8px;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
border: 1px solid #e6e6e6;
|
|
|
|
&.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.typographic {
|
|
img {
|
|
float: left;
|
|
margin-right: 10px;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
a {
|
|
float: left;
|
|
min-width: 80px;
|
|
max-width: 250px;
|
|
color: #e1251b;
|
|
|
|
&.service {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
span {
|
|
float: left;
|
|
min-width: 80px;
|
|
max-width: 250px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 分页
|
|
.choose-order {
|
|
.pagination {
|
|
margin: 38px 0;
|
|
|
|
ul {
|
|
font-size: 0;
|
|
display: inline-block;
|
|
|
|
li {
|
|
display: inline-block;
|
|
padding: 4px 9px;
|
|
font-size: 14px;
|
|
border: 1px solid #e0e9ee;
|
|
|
|
&.prev,
|
|
&.next {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
&.prev {
|
|
border-right-color: #28a3ef;
|
|
}
|
|
|
|
&.page {
|
|
border-color: #28a3ef;
|
|
border-left: 0;
|
|
|
|
&.actived {
|
|
background-color: #28a3ef;
|
|
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 猜你喜欢
|
|
.like {
|
|
border: 1px solid #ddd;
|
|
margin: 15px 20px;
|
|
|
|
.kt {
|
|
border-bottom: 1px solid #ddd;
|
|
background: #f1f1f1;
|
|
color: #666;
|
|
margin: 0;
|
|
padding: 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.like-list {
|
|
padding: 15px 11px;
|
|
overflow: hidden;
|
|
|
|
.likeItem {
|
|
width: 25%;
|
|
float: left;
|
|
|
|
.p-img {
|
|
text-align: left;
|
|
|
|
img {
|
|
width: 167px;
|
|
height: 123px;
|
|
}
|
|
}
|
|
|
|
.attr {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.price {
|
|
padding: 0 15px;
|
|
font-size: 16px;
|
|
color: #c81623;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.commit {
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|