刘文博 / gulu-vue

Download as
Browse Code »

Commit 2e191f6b1cb92907a75e30d91782621c1d5d3ccb

Authored by BigBoss
1 parent 066667dc4f
Exists in master

修改详情页

Showing 2 changed files with 17 additions and 7 deletions   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path" : "pages/refundProgress/refundProgress",
5 "style": {
6 "navigationBarTitleText": "申请退款"
7 }
8 },
9 {
10 "path": "pages/index/index", 4 "path": "pages/index/index",
11 "style": { 5 "style": {
12 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
13 // "enablePullDownRefresh":true 7 // "enablePullDownRefresh":true
14 } 8 }
15 }, 9 },
10 {
11 "path" : "pages/refundProgress/refundProgress",
12 "style": {
13 "navigationBarTitleText": "申请退款"
14 }
15 },
16 { 16 {
17 "path" : "pages/myOrder/myOrder", 17 "path" : "pages/myOrder/myOrder",
18 "style" : { 18 "style" : {
19 "navigationBarTitleText": "我的订单"} 19 "navigationBarTitleText": "我的订单"}
20 }, 20 },
21 { 21 {
22 "path": "pages/addArddess/addArddess", 22 "path": "pages/addArddess/addArddess",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "新增地址" 24 "navigationBarTitleText": "新增地址"
25 } 25 }
26 }, 26 },
27 { 27 {
28 "path" : "pages/confirmOrder/confirmOrder", 28 "path" : "pages/confirmOrder/confirmOrder",
29 "style" : { 29 "style" : {
30 "navigationBarTitleText": "确认订单"} 30 "navigationBarTitleText": "确认订单"}
31 }, 31 },
32 { 32 {
33 "path": "pages/cart/cart", 33 "path": "pages/cart/cart",
34 "style": { 34 "style": {
35 "navigationBarTitleText": "购物车" 35 "navigationBarTitleText": "购物车"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path": "pages/user/user", 39 "path": "pages/user/user",
40 "style": { 40 "style": {
41 "navigationBarTitleText": "我的" 41 "navigationBarTitleText": "我的"
42 } 42 }
43 }, 43 },
44 { 44 {
45 "path": "pages/details-3/details-3" 45 "path": "pages/details-3/details-3"
46 }, 46 },
47 { 47 {
48 "path": "pages/refundment/Refundways" 48 "path": "pages/refundment/Refundways"
49 }, 49 },
50 { 50 {
51 "path": "pages/refundment/refundment" 51 "path": "pages/refundment/refundment"
52 }, 52 },
53 { 53 {
54 "path": "pages/Predelivery/Predelivery" 54 "path": "pages/Predelivery/Predelivery"
55 }, 55 },
56 { 56 {
57 "path": "pages/customerService/customerService" 57 "path": "pages/customerService/customerService"
58 }, 58 },
59 { 59 {
60 "path": "pages/myorder-paying/myorder-paying" 60 "path": "pages/myorder-paying/myorder-paying"
61 }, 61 },
62 { 62 {
63 "path": "pages/detail/detail" 63 "path": "pages/detail/detail"
64 } 64 }
65 65
66 ], 66 ],
67 "globalStyle": { 67 "globalStyle": {
68 "navigationBarTextStyle": "black", 68 "navigationBarTextStyle": "black",
69 "navigationBarTitleText": "uni-app", 69 "navigationBarTitleText": "uni-app",
70 "navigationBarBackgroundColor": "#F8F8F8", 70 "navigationBarBackgroundColor": "#F8F8F8",
71 "backgroundColor": "#F8F8F8" 71 "backgroundColor": "#F8F8F8"
72 }, 72 },
73 "tabBar": { 73 "tabBar": {
74 "color": "#C0C4CC", 74 "color": "#C0C4CC",
75 "selectedColor": "#fa436a", 75 "selectedColor": "#fa436a",
76 "borderStyle": "black", 76 "borderStyle": "black",
77 "backgroundColor": "#ffffff", 77 "backgroundColor": "#ffffff",
78 "list": [{ 78 "list": [{
79 "pagePath": "pages/index/index", 79 "pagePath": "pages/index/index",
80 "iconPath": "static/tab-home.png", 80 "iconPath": "static/tab-home.png",
81 "selectedIconPath": "static/tab-home-current.png", 81 "selectedIconPath": "static/tab-home-current.png",
82 "text": "首页" 82 "text": "首页"
83 }, 83 },
84 { 84 {
85 "pagePath": "pages/cart/cart", 85 "pagePath": "pages/cart/cart",
86 "iconPath": "static/tab-cart.png", 86 "iconPath": "static/tab-cart.png",
87 "selectedIconPath": "static/tab-cart-current.png", 87 "selectedIconPath": "static/tab-cart-current.png",
88 "text": "购物车" 88 "text": "购物车"
89 }, 89 },
90 { 90 {
91 "pagePath": "pages/user/user", 91 "pagePath": "pages/user/user",
92 "iconPath": "static/tab-my.png", 92 "iconPath": "static/tab-my.png",
93 "selectedIconPath": "static/tab-my-current.png", 93 "selectedIconPath": "static/tab-my-current.png",
src/pages/myOrder/orderCard.vue
Diff comments   View file @2e191f6
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current === order.orderType" > 3 <view class="card" v-if="current === order.orderType" >
4 <view class="cardHeader"> 4 <view class="cardHeader">
5 <text class="orderId">订单号：{{order.orderId}}</text> 5 <text class="orderId">订单号：{{order.orderId}}</text>
6 <text class="orderType" v-if="order.orderType===1">待付款</text> 6 <text class="orderType" v-if="order.orderType===1">待付款</text>
7 <text class="orderType" v-if="order.orderType===2">待发货</text> 7 <text class="orderType" v-if="order.orderType===2">待发货</text>
8 <text class="orderType" v-if="order.orderType === 3">待收货</text> 8 <text class="orderType" v-if="order.orderType === 3">待收货</text>
9 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 9 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
10 <text class="orderType" v-if="order.orderType === 5">已完成</text> 10 <text class="orderType" v-if="order.orderType === 5">已完成</text>
11 </view> 11 </view>
12 <view class="orderCardInfo"> 12 <view class="orderCardInfo">
13 <image :src="order.img" mode="aspectFill"></image> 13 <image :src="order.img" mode="aspectFill"></image>
14 <view class="infoText"> 14 <view class="infoText">
15 <view class="orderName">{{order.name}}</view> 15 <view class="orderName">{{order.name}}</view>
16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 16 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
17 <view class="infoText-bottom"> 17 <view class="infoText-bottom">
18 <view class="markPrice">{{order.price}}</view> 18 <view class="markPrice">{{order.price}}</view>
19 <view class="buy-num">X{{order.buyNum}}</view> 19 <view class="buy-num">X{{order.buyNum}}</view>
20 </view> 20 </view>
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 23 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
24 <view class="btns" v-if="order.orderType === 1"> 24 <view class="btns" v-if="order.orderType === 1">
25 <view class="btn-type1">申请退款</view> 25 <view class="btn-type1">申请退款</view>
26 <view class="btn-type2">去支付</view> 26 <view class="btn-type2">去支付</view>
27 </view> 27 </view>
28 <view class="btns" v-if="order.orderType === 0"> 28 <view class="btns" v-if="order.orderType === 0">
29 <view class="btn-type1">再次购买</view> 29 <view class="btn-type1">再次购买</view>
30 </view> 30 </view>
31 </view> 31 </view>
32 <view class="card" v-if="current === 0" > 32 <view class="card" v-if="current === 0" >
33 <view class="cardHeader"> 33 <view class="cardHeader">
34 <text class="orderId">订单号：{{order.orderId}}</text> 34 <text class="orderId">订单号：{{order.orderId}}</text>
35 <text class="orderType" v-if="order.orderType===1">待付款</text> 35 <text class="orderType" v-if="order.orderType===1">待付款</text>
36 <text class="orderType" v-if="order.orderType===2">待发货</text> 36 <text class="orderType" v-if="order.orderType===2">待发货</text>
37 <text class="orderType" v-if="order.orderType === 3">待收货</text> 37 <text class="orderType" v-if="order.orderType === 3">待收货</text>
38 <text class="orderType" v-if="order.orderType === 4">退款售后</text> 38 <text class="orderType" v-if="order.orderType === 4">退款售后</text>
39 </view> 39 </view>
40 <view class="orderCardInfo"> 40 <view class="orderCardInfo">
41 <image :src="order.img" mode="aspectFill"></image> 41 <image :src="order.img" mode="aspectFill"></image>
42 <view class="infoText"> 42 <view class="infoText">
43 <view class="orderName">{{order.name}}</view> 43 <view class="orderName">{{order.name}}</view>
44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view> 44 <view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
45 <view class="infoText-bottom"> 45 <view class="infoText-bottom">
46 <view class="markPrice">{{order.price}}</view> 46 <view class="markPrice">{{order.price}}</view>
47 <view class="buy-num">X{{order.buyNum}}</view> 47 <view class="buy-num">X{{order.buyNum}}</view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </view> 50 </view>
51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view> 51 <view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
52 <view class="btns" v-if="order.orderType === 1"> 52 <view class="btns" v-if="order.orderType === 1">
53 <view class="btn-type1">申请退款</view> 53 <view class="btn-type1" @click="toRefundment">申请退款</view>
54 <view class="btn-type2">去支付</view> 54 <view class="btn-type2">去支付</view>
55 </view> 55 </view>
56 <view class="btns" v-if="order.orderType === 0"> 56 <view class="btns" v-if="order.orderType === 0">
57 <view class="btn-type1">再次购买</view> 57 <view class="btn-type1">再次购买</view>
58 </view> 58 </view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 export default { 64 export default {
65 props: { 65 props: {
66 /** 66 /**
67 * 订单数据 67 * 订单数据
68 */ 68 */
69 order: { 69 order: {
70 orderId: Number, 70 orderId: Number,
71 img: String, 71 img: String,
72 name: String, 72 name: String,
73 originCost:String, 73 originCost:String,
74 price: String, 74 price: String,
75 orderType:Number, 75 orderType:Number,
76 buyNum:Number 76 buyNum:Number
77 }, 77 },
78 /** 78 /**
79 * 当前选择 79 * 当前选择
80 */ 80 */
81 current:Number 81 current:Number
82 82
83 }, 83 },
84 data() { 84 data() {
85 return { 85 return {
86 }; 86 };
87 },
88 methods:{
89 toRefundment(){
90 uni.navigateTo({
91 url: '../refundment/refundment',
92 success: res => {},
93 fail: () => {},
94 complete: () => {}
95 });
96 }
87 } 97 }
88 } 98 }
89 </script> 99 </script>
90 100
91 <style lang="scss"> 101 <style lang="scss">
92 .card{ 102 .card{
93 width: 670rpx; 103 width: 670rpx;
94 height: 478rpx; 104 height: 478rpx;
95 background: #FFFFFF; 105 background: #FFFFFF;
96 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06); 106 box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
97 border-radius: 8px; 107 border-radius: 8px;
98 border-radius: 8px; 108 border-radius: 8px;
99 margin-top: 20rpx; 109 margin-top: 20rpx;
100 padding: 40rpx; 110 padding: 40rpx;
101 box-sizing: border-box; 111 box-sizing: border-box;
102 .cardHeader{ 112 .cardHeader{
103 width: 100%; 113 width: 100%;
104 height: 40rpx; 114 height: 40rpx;
105 display: flex; 115 display: flex;
106 justify-content: space-between; 116 justify-content: space-between;
107 align-items: center; 117 align-items: center;
108 .orderId{ 118 .orderId{
109 font-size: 12px; 119 font-size: 12px;
110 color: #999999; 120 color: #999999;
111 } 121 }
112 .orderType{ 122 .orderType{
113 font-size: 14px; 123 font-size: 14px;
114 color: #FF6B4A; 124 color: #FF6B4A;
115 } 125 }
116 } 126 }
117 .orderCardInfo{ 127 .orderCardInfo{
118 width: 100%; 128 width: 100%;
119 height: 188rpx; 129 height: 188rpx;
120 display: flex; 130 display: flex;
121 flex-direction: row; 131 flex-direction: row;
122 justify-content: space-between; 132 justify-content: space-between;
123 align-items: center; 133 align-items: center;
124 margin-top: 40rpx; 134 margin-top: 40rpx;
125 image{ 135 image{
126 height: 188rpx; 136 height: 188rpx;
127 width: 188rpx; 137 width: 188rpx;
128 margin-right: 24rpx; 138 margin-right: 24rpx;
129 } 139 }
130 .infoText{ 140 .infoText{
131 display: flex; 141 display: flex;
132 flex-direction: column; 142 flex-direction: column;
133 justify-content: space-between; 143 justify-content: space-between;
134 align-items: flex-start; 144 align-items: flex-start;
135 height: 188rpx; 145 height: 188rpx;
136 } 146 }
137 .orderName{ 147 .orderName{
138 font-size: 14px; 148 font-size: 14px;
139 color: #333333; 149 color: #333333;
140 } 150 }
141 .orderDescrib{ 151 .orderDescrib{
142 font-size: 12px; 152 font-size: 12px;
143 color: #999999; 153 color: #999999;
144 } 154 }
145 .infoText-bottom{ 155 .infoText-bottom{
146 display: flex; 156 display: flex;
147 flex-direction: row; 157 flex-direction: row;
148 justify-content: space-between; 158 justify-content: space-between;
149 align-items: center; 159 align-items: center;
150 width: 100%; 160 width: 100%;
151 .markPrice{ 161 .markPrice{
152 font-size: 14px; 162 font-size: 14px;
153 color: #FF6B4A; 163 color: #FF6B4A;
154 } 164 }
155 .buy-num{ 165 .buy-num{
156 font-size: 12px; 166 font-size: 12px;
157 color: #999999; 167 color: #999999;
158 } 168 }
159 } 169 }
160 } 170 }
161 .payPrice{ 171 .payPrice{
162 text-align: right; 172 text-align: right;
163 margin: 20rpx 0; 173 margin: 20rpx 0;
164 font-size: 14px; 174 font-size: 14px;
165 color: #333333; 175 color: #333333;
166 .priceNum{ 176 .priceNum{
167 font-size: 14px; 177 font-size: 14px;
168 color: #FF6B4A; 178 color: #FF6B4A;
169 } 179 }
170 } 180 }
171 .btns{ 181 .btns{
172 display: flex; 182 display: flex;
173 justify-content: flex-end; 183 justify-content: flex-end;
174 align-items: center; 184 align-items: center;
175 .btn-type1{ 185 .btn-type1{
176 height: 48rpx; 186 height: 48rpx;
177 width: 156rpx; 187 width: 156rpx;
178 border: 1px solid #FF6B4A; 188 border: 1px solid #FF6B4A;
179 border-radius: 12px; 189 border-radius: 12px;
180 border-radius: 12px; 190 border-radius: 12px;
181 text-align: center; 191 text-align: center;
182 line-height: 48rpx; 192 line-height: 48rpx;
183 font-size: 12px; 193 font-size: 12px;
184 color: #FF6B4A; 194 color: #FF6B4A;
185 } 195 }
186 .btn-type2{ 196 .btn-type2{
187 height: 48rpx; 197 height: 48rpx;
188 width: 140rpx; 198 width: 140rpx;
189 background: #FF6B4A; 199 background: #FF6B4A;
190 border-radius: 12px; 200 border-radius: 12px;
191 border-radius: 12px; 201 border-radius: 12px;
192 text-align: center; 202 text-align: center;
193 line-height: 48rpx; 203 line-height: 48rpx;
194 font-size: 12px; 204 font-size: 12px;
195 color: #FFFFFF; 205 color: #FFFFFF;
196 margin-left: 20rpx; 206 margin-left: 20rpx;
197 } 207 }
198 } 208 }
199 } 209 }
200 </style> 210 </style>
201 211