刘文博 / gulu-vue

Download as
Browse Code »

Commit 646a65287b64354371778b9fa77f0a7be3f472dd

Authored by BigBoss
1 parent 0db2918105
Exists in master

确认订单页面

Showing 4 changed files with 376 additions and 0 deletions   Show diff stats
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @646a652
File was created 1 <template>
2 <view class="wrap">
3 <view class="addAddress">
4 <view class="addIcon">
5 <image src="../../static/add.png" mode="aspectFill"></image>
6 </view>
7 <view class="addressText">{{addAddress}}</view>
8 <image src="../../static/right.png" mode="aspectFill"></image>
9 </view>
10 <view class="content">
11 <view class="orderInfo">
12 <view class="title">
13 <image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
14 <text>非常戴镜</text>
15 </view>
16 <view class="infoBox">
17 <view class="infoTop">
18 <image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image>
19 <view class="infoRight">
20 <text class="goodName">商品名称商品名称商品名称名称名称</text>
21 <text class="remarks">支持7天无理由退货 顺丰发货</text>
22 <view class="priceBox">
23 <view class="price">￥198</view>
24 <view class="counter">
25 <view class="btn" disabled="this.disabled" type="default" @click="counter(false)">-</view>
26 <text>{{count}}</text>
27 <view class="btn" type="default" @click="counter(true)">+</view>
28 </view>
29 </view>
30 </view>
31 </view>
32 <view class="infoBottom">
33 <view class="norm">规格 <text>玫瑰金/钛合金</text></view>
34 <view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view>
35 <view class="message">买家留言
36 <input type="text" value="" placeholder="建议提前协商(50字以内)" />
37 </view>
38 </view>
39 </view>
40 </view>
41 <view class="payWay">
42 <view class="item">
43 <text>支付方式</text>
44 <view class="itemRight">
45 <view class="rightText">
46 <view class="choosePayWay">
47 <image src="../../static/store.png" mode="aspectFill"></image>
48 <text>微信支付</text>
49 </view>
50 <view class="randomSubstraction">最高随机立减￥99</view>
51 </view>
52 <image src="../../static/right.png" mode="aspectFill"></image>
53 </view>
54 </view>
55 <view class="item">
56 <text>优惠券</text>
57 <view class="itemRight">
58 <view class="rightText">
59 <view class="chooseOffers">
60 <text>-￥70.00</text>
61 </view>
62 <view class="preferentialWay">最大优惠</view>
63 </view>
64 <image src="../../static/right.png" mode="aspectFill"></image>
65 </view>
66 </view>
67 <view class="item">
68 <text>运费</text>
69 <view class="itemRight">
70 <view class="freight">￥{{freight}}</view>
71 </view>
72 </view>
73 <view class="item">
74 <text>合计</text>
75 <view class="itemRight">
76 <view class="total">￥{{total}}</view>
77 </view>
78 </view>
79 </view>
80
81 <view class="checkBox">
82 <checkbox-group>
83 <label>
84 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
85 </label>
86 </checkbox-group>
87 </view>
88 </view>
89 <view class="footer">
90 <view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
91 <view class="footerRight">
92 <view class="paybtn">立即支付</view>
93 </view>
94 </view>
95 </view>
96 </template>
97
98 <script>
99 export default {
100 data() {
101 return {
102 addAddress :'添加收货地址',
103 count:1,
104 disabled:false,
105 total:120,
106 freight:0.00
107 // isAnonymous:
108 };
109 },
110 methods:{
111 counter(isadd){
112 if(isadd){
113 this.count++
114 }else{
115 this.count <= 1? this.disabled = true:this.count--
116 }
117 }
118 }
119 }
120 </script>
121
122 <style lang="scss">
123 .wrap{
124 height: 100vh;
125 background-color:#F2F2F2 ;
126 font-family: PingFangSC-Regular;
127 letter-spacing: -0.23px;
128 }
129 .addAddress{
130 background-color:#ffffff ;
131 box-sizing: border-box;
132 height: 124rpx;
133 width: 100%;
134 display: flex;
135 align-items: center;
136 padding: 0 40rpx;
137 .addIcon{
138 background-color:#F2F2F2 ;
139 height: 56rpx;
140 width: 60rpx;
141 border-radius: 4rpx;
142 display: flex;
143 justify-content: center;
144 align-items: center;
145 margin-right: 40rpx;
146 }
147 image{
148 height: 28rpx;
149 width: 28rpx;
150 }
151 .addressText{
152 font-size: 28rpx;
153 color: #333333;
154 margin-right: 364rpx;
155 }
156 }
157 .content{
158 background-color:#F2F2F2 ;
159 width: 100%;
160 display: flex;
161 flex-direction: column;
162 justify-content: center;
163 align-items: center;
164 padding: 40rpx;
165 box-sizing: border-box;
166 .orderInfo{
167 width: 670rpx;
168 height: 488rpx;
169 background-color:#ffffff ;
170 border-radius: 20rpx;
171 box-sizing: border-box;
172 padding: 0 40rpx 40rpx 40rpx;
173 .title{
174 display: flex;
175 align-items: center;
176 font-size: 28rpx;
177 color: #333333;
178 height: 60rpx;
179 line-height: 40rpx;
180 padding: 10rpx 10rpx 10rpx 0rpx;
181 image{
182 margin-right: 20rpx;
183 }
184 }
185 .infoBox{
186 margin-top: 42rpx;
187 .infoTop{
188 display: flex;
189 flex-direction: row;
190 image{
191 height: 188rpx;
192 width: 188rpx;
193 margin-right: 24rpx;
194 }
195 .infoRight{
196 width: 374rpx;
197 display: flex;
198 flex-direction: column;
199 align-items: flex-start;
200 justify-content: space-between;
201 .goodName{
202 font-size: 28rpx;
203 color: #333333;
204 }
205 .remarks{
206 font-size: 20rpx;
207 color: #999999;
208 }
209 .priceBox{
210 display: flex;
211 justify-content: space-between;
212 align-items: center;
213 width: 100%;
214 .price{
215 color: #FF6B4A;
216 font-size: 28rpx;
217 }
218 .counter{
219 display: flex;
220 flex-direction: row;
221 justify-content: space-between;
222 font-size: 28rpx;
223 color: #333333;
224 width: 122rpx;
225 .btn{
226 display: flex;
227 justify-content: center;
228 line-height: 32rpx;
229 height: 32rpx;
230 width: 32rpx;
231 background-color: #F2F2F2;
232 color: #CFCFCF;
233 }
234 }
235 }
236 }
237 }
238 .infoBottom{
239 display: flex;
240 flex-direction: column;
241 justify-content: flex-start;
242 font-size: 24rpx;
243 color: #333333;
244 text{
245 color: #999999;
246 margin-left: 20rpx;
247 }
248
249 .norm{
250 margin-top: 28rpx;
251 }
252 .shippingMethod{
253 margin-top: 12rpx;
254 }
255 .message{
256 display: flex;
257 flex-direction: row;
258 align-items: center;
259 margin-top: 18rpx;
260 input{
261 margin-left: 20rpx;
262 width: 75%;
263 }
264 }
265 }
266 }
267 }
268 .payWay{
269 height: 464rpx;
270 width: 670rpx;
271 background-color: #ffffff;
272 color: #333333;
273 font-size: 24rpx;
274 border-radius: 20rpx;
275 box-sizing: border-box;
276 padding: 0 52rpx 0rpx 40rpx;
277 margin-top: 20rpx;
278 display: flex;
279 flex-direction: column;
280 justify-content: center;
281 align-items: flex-start;
282 .item{
283 display: flex;
284 flex-direction: row;
285 justify-content: space-between;
286 align-items: center;
287 width: 100%;
288 height: 115rpx;
289 .itemRight{
290 display: flex;
291 flex-direction: row;
292 justify-content: space-between;
293 align-items: center;
294 image{
295 height: 24rpx;
296 width: 12rpx;
297 }
298 .rightText{
299 margin-right: 20rpx;
300 text-align: right;
301 .choosePayWay{
302 text{
303 color: #333333 ;
304 }
305 image{
306 height:26rpx ;
307 width: 30rpx;
308 margin-right: 20px;
309 }
310 }
311 .randomSubstraction{
312 color: #FF6B4A ;
313 }
314 .preferentialWay{
315 color: #999999 ;
316 }
317 }
318 .freight,.total{
319 margin-right: 32rpx;
320 }
321 text{
322 color: #FF6B4A ;
323 }
324 }
325 }
326 }
327 .checkBox{
328 height: 58rpx;
329 line-height: 58rpx;
330 width: 100%;
331 margin-top: 36rpx;
332 margin-left: 40rpx;
333 font-size: 12px;
334 color: #999999;
335 }
336 }
337 .footer{
338 height: 112rpx;
339 width: 100%;
340 background-color: #ffffff;
341 font-size: 16px;
342 display: flex;
343 justify-content: space-between;
344 align-items: center;
345 .footerLeft{
346 display: flex;
347 justify-content: center;
348 align-items: center;
349 width: 50%;
350 color: #333333;
351 text{
352 color: #FF6B4A;
353 }
354 }
355 .footerRight{
356 display: flex;
357 justify-content: flex-end;
358 align-items: center;
359 width: 50%;
360 margin-right: 26rpx;
361 .paybtn{
362 display: flex;
363 justify-content: center;
364 align-items: center;
365 background: #FF6B4A;
366 border-radius: 20px;
367 border-radius: 20px;
368 color: #FFFFFF;
369 width: 204rpx;
370 height: 80rpx;
371 }
372 }
373
374 }
375
376 </style>
377
src/static/add.png
Diff comments   View file @646a652

1.02 KB
src/static/right.png
Diff comments   View file @646a652

3.05 KB
src/static/store.png
Diff comments   View file @646a652

594 Bytes