刘文博 / gulu-vue

Download as
Browse Code »

Commit 46e5b6c99cd4fb905690df17e7b9858844ac2be2

Authored by BigBoss
1 parent 987972474c
Exists in master

add myOrder

Showing 3 changed files with 258 additions and 59 deletions   Show diff stats
1 1 {
2 2 "pages": [
3   - {
4   - "path" : "pages/myOrder/myOrder",
5   - "style" : {
6   - "navigationBarTitleText": "我的订单"}
7   - },
8 3 {
9 4 "path": "pages/index/index",
10 5 "style": {
... ... @@ -12,6 +7,11 @@
12 7 // "enablePullDownRefresh":true
13 8 }
14 9 },
  10 + {
  11 + "path" : "pages/myOrder/myOrder",
  12 + "style" : {
  13 + "navigationBarTitleText": "我的订单"}
  14 + },
15 15 {
16 16 "path": "pages/addArddess/addArddess",
17 17 "style": {
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @46e5b6c
... ... @@ -12,8 +12,12 @@
12 12 </view>
13 13 </view>
14 14 </view>
15   - <OrderCard></OrderCard>
16   -
  15 + <view class="orderList" >
  16 + <view v-for="(order) in orderList" :key="orderId">
  17 + <OrderCard :order = "order" :current="current"></OrderCard>
  18 + </view>
  19 + </view>
  20 + <view class="footer">已显示全部</view>
17 21 </view>
18 22 </template>
19 23  
... ... @@ -33,7 +37,18 @@
33 37 {current:4,text:'退款售后'},
34 38 ],
35 39 current: 0,
36   -
  40 + //订单数据
  41 + orderList:[
  42 + { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
  43 + { orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
  44 + { orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
  45 + { orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
  46 + { orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
  47 + { orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
  48 + { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
  49 + { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
  50 + { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
  51 + ],
37 52 };
38 53 },
39 54 methods:{
... ... @@ -52,55 +67,66 @@
52 67 flex-direction: column;
53 68 align-items: center;
54 69 background-color: #F7F6F6;
55   - height: 100vh;
56   - }
57   - .header{
58   - background-color: #ffffff;
59   - width: 100%;
60   - height: 232rpx;
61   - padding: 40rpx 40rpx 36rpx 40rpx;
62   - box-sizing: border-box;
63   - .searchBar {
64   - width: 670rpx;
65   - display: flex;
66   - justify-content: center;
67   - align-items: center;
68   - box-sizing: border-box;
69   - padding: 0rpx 16rpx;
70   - border: 1px solid #FF6B4A;
71   - border-radius: 8rpx;
  70 + min-height: 100vh;
  71 + .header{
72 72 background-color: #ffffff;
  73 + width: 100%;
  74 + height: 232rpx;
  75 + padding: 40rpx 40rpx 36rpx 40rpx;
  76 + box-sizing: border-box;
  77 + position: fixed;
  78 + top: 0;
  79 + left: 0;
  80 + .searchBar {
  81 + width: 670rpx;
  82 + display: flex;
  83 + justify-content: center;
  84 + align-items: center;
  85 + box-sizing: border-box;
  86 + padding: 0rpx 16rpx;
  87 + border: 1px solid #FF6B4A;
  88 + border-radius: 8rpx;
  89 + background-color: #ffffff;
  90 + }
  91 +
  92 + .screenBar{
  93 + width: 670rpx;
  94 + height: 110rpx;
  95 + display: flex;
  96 + flex-direction: row;
  97 + justify-content: space-between;
  98 + align-items: center;
  99 + color: #333333;
  100 + font-size: 32rpx;
  101 + }
  102 + .screenItem{
  103 + height: 50rpx;
  104 + font-size: 32rpx;
  105 + color: #333333;
  106 + display: flex;
  107 + justify-content: center;
  108 + align-items: center;
  109 + transition:all 0.2s;
  110 + }
  111 + .active{
  112 + // font-size: 34rpx;
  113 + color: #EC5D3B;
  114 + }
  115 + .searchIpt {
  116 + height: 68rpx;
  117 + width: 670rpx;
  118 + padding: 16rpx;
  119 + font-size: 28rpx;
  120 + box-sizing: border-box;
  121 + }
73 122 }
74   -
75   - .screenBar{
76   - width: 670rpx;
77   - height: 110rpx;
78   - display: flex;
79   - flex-direction: row;
80   - justify-content: space-between;
81   - align-items: center;
82   - color: #333333;
83   - font-size: 32rpx;
84   - }
85   - .screenItem{
86   - height: 50rpx;
87   - font-size: 32rpx;
88   - color: #333333;
89   - display: flex;
90   - justify-content: center;
91   - align-items: center;
92   - transition:all 0.2s;
93   - }
94   - .active{
95   - // font-size: 34rpx;
96   - color: #EC5D3B;
  123 + .orderList{
  124 + margin-top: 232rpx;
97 125 }
98   - .searchIpt {
99   - height: 68rpx;
100   - width: 670rpx;
101   - padding: 16rpx;
102   - font-size: 28rpx;
103   - box-sizing: border-box;
  126 + .footer{
  127 + font-size: 14px;
  128 + color: #B8B8B8;
  129 + margin: 40rpx 0;
104 130 }
105 131 }
106 132 </style>
... ...
src/pages/myOrder/orderCard.vue
Diff comments   View file @46e5b6c
1   -<template>
2   - <view class="card">
3   -
  1 +<template>
  2 + <view>
  3 + <view class="card" v-if="current === order.orderType" >
  4 + <view class="cardHeader">
  5 + <text class="orderId">订单号：{{order.orderId}}</text>
  6 + <text class="orderType" v-if="order.orderType===1">待付款</text>
  7 + <text class="orderType" v-if="order.orderType===2">待发货</text>
  8 + <text class="orderType" v-if="order.orderType === 3">待收货</text>
  9 + <text class="orderType" v-if="order.orderType === 4">退款售后</text>
  10 + <text class="orderType" v-if="order.orderType === 5">已完成</text>
  11 + </view>
  12 + <view class="orderCardInfo">
  13 + <image :src="order.img" mode="aspectFill"></image>
  14 + <view class="infoText">
  15 + <view class="orderName">{{order.name}}</view>
  16 + <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
  17 + <view class="infoText-bottom">
  18 + <view class="markPrice">{{order.price}}</view>
  19 + <view class="buy-num">X{{order.buyNum}}</view>
  20 + </view>
  21 + </view>
  22 + </view>
  23 + <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
  24 + <view class="btns" v-if="order.orderType === 1">
  25 + <view class="btn-type1">申请退款</view>
  26 + <view class="btn-type2">去支付</view>
  27 + </view>
  28 + <view class="btns" v-if="order.orderType === 0">
  29 + <view class="btn-type1">再次购买</view>
  30 + </view>
  31 + </view>
  32 + <view class="card" v-if="current === 0" >
  33 + <view class="cardHeader">
  34 + <text class="orderId">订单号：{{order.orderId}}</text>
  35 + <text class="orderType" v-if="order.orderType===1">待付款</text>
  36 + <text class="orderType" v-if="order.orderType===2">待发货</text>
  37 + <text class="orderType" v-if="order.orderType === 3">待收货</text>
  38 + <text class="orderType" v-if="order.orderType === 4">退款售后</text>
  39 + </view>
  40 + <view class="orderCardInfo">
  41 + <image :src="order.img" mode="aspectFill"></image>
  42 + <view class="infoText">
  43 + <view class="orderName">{{order.name}}</view>
  44 + <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
  45 + <view class="infoText-bottom">
  46 + <view class="markPrice">{{order.price}}</view>
  47 + <view class="buy-num">X{{order.buyNum}}</view>
  48 + </view>
  49 + </view>
  50 + </view>
  51 + <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
  52 + <view class="btns" v-if="order.orderType === 1">
  53 + <view class="btn-type1">申请退款</view>
  54 + <view class="btn-type2">去支付</view>
  55 + </view>
  56 + <view class="btns" v-if="order.orderType === 0">
  57 + <view class="btn-type1">再次购买</view>
  58 + </view>
  59 + </view>
4 60 </view>
5 61 </template>
6 62  
7 63 <script>
8   - export default {
  64 + export default {
  65 + props: {
  66 + /**
  67 + * 订单数据
  68 + */
  69 + order: {
  70 + orderId: Number,
  71 + img: String,
  72 + name: String,
  73 + originCost:String,
  74 + price: String,
  75 + orderType:Number,
  76 + buyNum:Number
  77 + },
  78 + /**
  79 + * 当前选择
  80 + */
  81 + current:Number
  82 +
  83 + },
9 84 data() {
10 85 return {
11   -
12 86 };
13 87 }
14 88 }
... ... @@ -23,5 +97,104 @@
23 97 border-radius: 8px;
24 98 border-radius: 8px;
25 99 margin-top: 20rpx;
  100 + padding: 40rpx;
  101 + box-sizing: border-box;
  102 + .cardHeader{
  103 + width: 100%;
  104 + height: 40rpx;
  105 + display: flex;
  106 + justify-content: space-between;
  107 + align-items: center;
  108 + .orderId{
  109 + font-size: 12px;
  110 + color: #999999;
  111 + }
  112 + .orderType{
  113 + font-size: 14px;
  114 + color: #FF6B4A;
  115 + }
  116 + }
  117 + .orderCardInfo{
  118 + width: 100%;
  119 + height: 188rpx;
  120 + display: flex;
  121 + flex-direction: row;
  122 + justify-content: space-between;
  123 + align-items: center;
  124 + margin-top: 40rpx;
  125 + image{
  126 + height: 188rpx;
  127 + width: 188rpx;
  128 + margin-right: 24rpx;
  129 + }
  130 + .infoText{
  131 + display: flex;
  132 + flex-direction: column;
  133 + justify-content: space-between;
  134 + align-items: flex-start;
  135 + height: 188rpx;
  136 + }
  137 + .orderName{
  138 + font-size: 14px;
  139 + color: #333333;
  140 + }
  141 + .orderDescrib{
  142 + font-size: 12px;
  143 + color: #999999;
  144 + }
  145 + .infoText-bottom{
  146 + display: flex;
  147 + flex-direction: row;
  148 + justify-content: space-between;
  149 + align-items: center;
  150 + width: 100%;
  151 + .markPrice{
  152 + font-size: 14px;
  153 + color: #FF6B4A;
  154 + }
  155 + .buy-num{
  156 + font-size: 12px;
  157 + color: #999999;
  158 + }
  159 + }
  160 + }
  161 + .payPrice{
  162 + text-align: right;
  163 + margin: 20rpx 0;
  164 + font-size: 14px;
  165 + color: #333333;
  166 + .priceNum{
  167 + font-size: 14px;
  168 + color: #FF6B4A;
  169 + }
  170 + }
  171 + .btns{
  172 + display: flex;
  173 + justify-content: flex-end;
  174 + align-items: center;
  175 + .btn-type1{
  176 + height: 48rpx;
  177 + width: 156rpx;
  178 + border: 1px solid #FF6B4A;
  179 + border-radius: 12px;
  180 + border-radius: 12px;
  181 + text-align: center;
  182 + line-height: 48rpx;
  183 + font-size: 12px;
  184 + color: #FF6B4A;
  185 + }
  186 + .btn-type2{
  187 + height: 48rpx;
  188 + width: 140rpx;
  189 + background: #FF6B4A;
  190 + border-radius: 12px;
  191 + border-radius: 12px;
  192 + text-align: center;
  193 + line-height: 48rpx;
  194 + font-size: 12px;
  195 + color: #FFFFFF;
  196 + margin-left: 20rpx;
  197 + }
  198 + }
26 199 }
27 200 </style>
... ...