Blame view
src/pages/myOrder/myOrder.vue
4.2 KB
4506eedf6 ss |
1 |
<template> |
72a08fa45 icon |
2 3 4 5 6 |
<view class="content"> <view class="header"> <!-- 搜索--> <view class="searchBar"> <icon class="searchIcon" type="search" size="14"></icon> |
987972474 订单页card组件提取 |
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 icon |
13 |
</view> |
72a08fa45 icon |
14 |
</view> |
46e5b6c99 add myOrder |
15 |
<view class="orderList" > |
72d769fb7 myOrder |
16 17 18 19 |
<view v-for="(order) in orderList" :key="order.orderId" > |
46e5b6c99 add myOrder |
20 21 22 23 |
<OrderCard :order = "order" :current="current"></OrderCard> </view> </view> <view class="footer">已显示全部</view> |
843fce64e feat(master): 加入 ... |
24 25 |
</view> </template> |
987972474 订单页card组件提取 |
26 |
<script> |
72d769fb7 myOrder |
27 28 29 |
import OrderCard from './components/OrderCard.vue'; import store from '@/store'; |
987972474 订单页card组件提取 |
30 31 |
export default { components:{ |
72d769fb7 myOrder |
32 |
'OrderCard': OrderCard |
4506eedf6 ss |
33 34 |
}, data() { |
987972474 订单页card组件提取 |
35 36 37 38 39 40 41 42 |
return { screenItems: [ {current:0,text:'全部'}, {current:1,text:'待付款'}, {current:2,text:'待发货'}, {current:3,text:'待收货'}, {current:4,text:'退款售后'}, ], |
843fce64e feat(master): 加入 ... |
43 |
current: 0, |
46e5b6c99 add myOrder |
44 |
//订单数据 |
72d769fb7 myOrder |
45 46 47 48 49 50 51 52 53 54 55 |
// 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 ss |
56 |
}; |
987972474 订单页card组件提取 |
57 |
}, |
a8284c675 修改冲突 |
58 |
|
72d769fb7 myOrder |
59 60 61 62 63 64 65 66 67 68 69 |
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; } |
0508098fe 首页筛选列表接口获取 |
70 |
}, |
987972474 订单页card组件提取 |
71 72 73 74 75 76 |
methods:{ onClickItem(e) { if (this.current !== e) { this.current = e; } } |
4506eedf6 ss |
77 78 79 80 |
} } </script> |
72a08fa45 icon |
81 82 83 84 85 86 |
<style lang="scss"> .content { display: flex; flex-direction: column; align-items: center; background-color: #F7F6F6; |
46e5b6c99 add myOrder |
87 88 |
min-height: 100vh; .header{ |
72a08fa45 icon |
89 |
background-color: #ffffff; |
46e5b6c99 add myOrder |
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 icon |
139 |
} |
46e5b6c99 add myOrder |
140 141 |
.orderList{ margin-top: 232rpx; |
987972474 订单页card组件提取 |
142 |
} |
46e5b6c99 add myOrder |
143 144 145 146 |
.footer{ font-size: 14px; color: #B8B8B8; margin: 40rpx 0; |
72a08fa45 icon |
147 |
} |
4506eedf6 ss |
148 149 |
} </style> |