myOrder.vue
3.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<template>
<view class="content">
<view class="header">
<!-- 搜索-->
<view class="searchBar">
<icon class="searchIcon" type="search" size="14"></icon>
<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
</view>
<view class="screenBar">
<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
<view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
</view>
</view>
</view>
<view class="orderList" >
<view v-for="(order) in orderList" :key="order.orderId">
<OrderCard :order = "order" :current="current"></OrderCard>
</view>
</view>
<view class="footer">已显示全部</view>
</view>
</template>
<script>
import OrderCard from './OrderCard.vue'
export default {
components:{
'OrderCard':OrderCard
},
data() {
return {
screenItems: [
{current:0,text:'全部'},
{current:1,text:'待付款'},
{current:2,text:'待发货'},
{current:3,text:'待收货'},
{current:4,text:'退款售后'},
],
current: 0,
//订单数据
orderList:[
{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
],
};
},
methods:{
onClickItem(e) {
if (this.current !== e) {
this.current = e;
}
}
}
}
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #F7F6F6;
min-height: 100vh;
.header{
background-color: #ffffff;
width: 100%;
height: 232rpx;
padding: 40rpx 40rpx 36rpx 40rpx;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
.searchBar {
width: 670rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 0rpx 16rpx;
border: 1px solid #FF6B4A;
border-radius: 8rpx;
background-color: #ffffff;
}
.screenBar{
width: 670rpx;
height: 110rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: #333333;
font-size: 32rpx;
}
.screenItem{
height: 50rpx;
font-size: 32rpx;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
transition:all 0.2s;
}
.active{
// font-size: 34rpx;
color: #EC5D3B;
}
.searchIpt {
height: 68rpx;
width: 670rpx;
padding: 16rpx;
font-size: 28rpx;
box-sizing: border-box;
}
}
.orderList{
margin-top: 232rpx;
}
.footer{
font-size: 14px;
color: #B8B8B8;
margin: 40rpx 0;
}
}
</style>