Blame view
src/pages/myOrder/myOrder.vue
4.32 KB
4506eedf6
![]() |
1 |
<template> |
72a08fa45
|
2 3 4 5 6 |
<view class="content"> <view class="header"> <!-- 搜索--> <view class="searchBar"> <icon class="searchIcon" type="search" size="14"></icon> |
987972474
|
7 8 9 10 11 12 |
<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> |
72a08fa45
|
13 |
</view> |
72a08fa45
|
14 |
</view> |
46e5b6c99
|
15 |
<view class="orderList" > |
72d769fb7
|
16 17 18 19 |
<view v-for="(order) in orderList" :key="order.orderId" > |
46e5b6c99
|
20 21 22 |
<OrderCard :order = "order" :current="current"></OrderCard> </view> </view> |
ab4209caf
|
23 24 |
<navigator url="/pages/user/user" open-type="switchTab"><view class="footer">已显示全部</view></navigator> <!-- <view class="footer">已显示全部</view> --> |
843fce64e
|
25 26 |
</view> </template> |
987972474
|
27 |
<script> |
72d769fb7
|
28 29 30 |
import OrderCard from './components/OrderCard.vue'; import store from '@/store'; |
987972474
|
31 32 |
export default { components:{ |
72d769fb7
|
33 |
'OrderCard': OrderCard |
4506eedf6
![]() |
34 35 |
}, data() { |
987972474
|
36 37 38 39 40 41 42 43 |
return { screenItems: [ {current:0,text:'全部'}, {current:1,text:'待付款'}, {current:2,text:'待发货'}, {current:3,text:'待收货'}, {current:4,text:'退款售后'}, ], |
843fce64e
|
44 |
current: 0, |
46e5b6c99
|
45 |
//订单数据 |
72d769fb7
|
46 47 48 49 50 51 52 53 54 55 56 |
// 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} // ], |
4506eedf6
![]() |
57 |
}; |
987972474
|
58 |
}, |
72d769fb7
|
59 60 61 62 63 64 65 66 67 68 69 70 |
onLoad: function() { store.dispatch('myOrder/getList', { uid: "1", way: "0", }); }, computed: { orderList() { console.log('orderList', this.$store.state.myOrder.orderlist); return this.$store.state.myOrder.orderlist; } }, |
987972474
|
71 72 73 74 75 76 |
methods:{ onClickItem(e) { if (this.current !== e) { this.current = e; } } |
4506eedf6
![]() |
77 78 79 80 |
} } </script> |
72a08fa45
|
81 82 83 84 85 86 |
<style lang="scss"> .content { display: flex; flex-direction: column; align-items: center; background-color: #F7F6F6; |
46e5b6c99
|
87 88 |
min-height: 100vh; .header{ |
72a08fa45
|
89 |
background-color: #ffffff; |
46e5b6c99
|
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 133 134 135 136 137 138 |
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; } |
72a08fa45
|
139 |
} |
46e5b6c99
|
140 141 |
.orderList{ margin-top: 232rpx; |
987972474
|
142 |
} |
46e5b6c99
|
143 144 145 146 |
.footer{ font-size: 14px; color: #B8B8B8; margin: 40rpx 0; |
72a08fa45
|
147 |
} |
4506eedf6
![]() |
148 149 |
} </style> |