吉鹏 / gulu-vue

Merge Request #8

← To merge requests From adam:master into jp:master
Merged
Created by Adam

Master

Assignee: None
Milestone: None

Merged by Adam

Commits (6)
1 participants
Showing 4 changed files   Show diff stats
src/pages/confirmOrder/confirmOrder.vue
Diff comments   Edit   View file @3fb9af8
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view 3 <view></view>
4 class="addAddress" 4 <view
5 @click="toaddAddress" 5 class="addAddress"
6 > 6 @tap="toaddAddress"
7 <view class="addIcon"> 7 v-if="this.showAddress"
8 <image 8 >
9 src="../../static/add.png" 9 <view class="addIcon">
10 mode="aspectFill" 10 <image
11 ></image> 11 src="../../static/add.png"
12 </view> 12 mode="aspectFill"
13 <view class="addressText">{{addAddress}}</view> 13 ></image>
14 <image 14 </view>
15 src="../../static/right.png" 15 <view class="addressText">{{addAddress}}</view>
16 mode="aspectFill" 16 <image
17 ></image> 17 src="../../static/right.png"
18 </view> 18 mode="aspectFill"
19 <view class="content"> 19 ></image>
20 <view class="orderInfo"> 20 </view>
21 <view class="title"> 21 <view
22 <image 22 v-else
23 src="../../static/store.png" 23 @tap="toaddAddress"
24 mode="aspectFill" 24 class="list order-user"
25 style="width: 40rpx;height: 40rpx;" 25 >
26 ></image> 26 <view class="order-user-head">
27 <text>非常戴镜</text> 27 <view class="name">
28 </view> 28 <view
29 <view class="infoBox"> 29 v-if="addressInfo.default === '1'"
30 <view class="infoTop"> 30 class="default"
31 <!-- <image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image> --> 31 ><text>默认</text></view>{{addressInfo.name}}
32 <view class="infoRight"> 32 </view>
33 <text class="goodName">商品名称商品名称商品名称名称名称</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 <text class="remarks">支持7天无理由退货 顺丰发货</text> 34 </view>
35 <view class="priceBox"> 35 <view class="order-user-body">
36 <view class="price">￥198</view> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <view class="counter"> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38 <view 38 </view>
39 class="btn" 39 <image
40 disabled="this.disabled" 40 class="arrow"
41 type="default" 41 src="../../static/right.png"
42 @click="counter(false)" 42 ></image>
43 >-</view> 43 </view>
44 <text>{{count}}</text> 44 <view class="content">
45 <view 45 <view class="orderInfo">
46 class="btn" 46 <view class="title">
47 type="default" 47 <image
48 @click="counter(true)" 48 src="../../static/store.png"
49 >+</view> 49 mode="aspectFill"
50 </view> 50 style="width: 40rpx;height: 40rpx;"
51 </view> 51 ></image>
52 </view> 52 <text>非常戴镜</text>
53 </view> 53 </view>
54 <view class="infoBottom"> 54 <view class="infoBox">
55 <view class="norm">规格 <text>玫瑰金/钛合金</text></view> 55 <view class="infoTop">
56 <view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view> 56 <image
57 <view class="message">买家留言 57 :src="goodInfo.img_index_url"
58 <input 58 mode="aspectFill"
59 type="text" 59 ></image>
60 value="" 60 <view class="infoRight">
61 placeholder="建议提前协商(50字以内)" 61 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 /> 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 </view> 63 <view class="priceBox">
64 </view> 64 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65 </view> 65 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66 </view> 66 </text></view>
67 <view class="payWay"> 67 <view class="counter">
68 <view class="item"> 68 <view
69 <text>支付方式</text> 69 class="btn"
70 <view class="itemRight"> 70 disabled="this.disabled"
71 <view class="rightText"> 71 type="default"
72 <view class="choosePayWay"> 72 @click="counter(false)"
73 <image 73 >-</view>
74 src="../../static/store.png" 74 <text>{{count}}</text>
75 mode="aspectFill" 75 <view
76 ></image> 76 class="btn"
77 <text>微信支付</text> 77 type="default"
78 </view> 78 @click="counter(true)"
79 <view class="randomSubstraction">最高随机立减￥99</view> 79 >+</view>
80 </view> 80 </view>
81 <image 81 </view>
82 src="../../static/right.png" 82 </view>
83 mode="aspectFill" 83 </view>
84 ></image> 84 <view class="infoBottom">
85 </view> 85 <view class="norm">规格 <text>
86 </view> 86 <!-- 长度超出变省略号未做 -->
87 <view class="item"> 87 <block
88 <text>优惠券</text> 88 v-for="(item, index) in current"
89 <view class="itemRight"> 89 :key="index"
90 <view class="rightText"> 90 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
91 </block>
91 <view class="chooseOffers"> 92 </text></view>
92 <text>-￥70.00</text> 93 <view class="shippingMethod">配送方式 <text>快递</text></view>
93 </view> 94 <view class="message">买家留言
94 <view class="preferentialWay">最大优惠</view> 95 <input
95 </view> 96 type="text"
96 <image 97 :value="note"
97 src="../../static/right.png" 98 placeholder="建议提前协商(50字以内)"
98 mode="aspectFill" 99 />
99 ></image> 100 </view>
100 </view> 101 </view>
101 </view> 102 </view>
102 <view class="item"> 103 </view>
103 <text>运费</text> 104 <view class="payWay">
104 <view class="itemRight"> 105 <view class="item">
105 <view class="freight">￥{{freight}}</view> 106 <text>支付方式</text>
106 </view> 107 <view class="itemRight">
107 </view> 108 <view class="rightText">
108 <view class="item"> 109 <view class="choosePayWay">
109 <text>合计</text> 110 <image
110 <view class="itemRight"> 111 src="../../static/store.png"
111 <view class="total">￥{{total}}</view> 112 mode="aspectFill"
112 </view> 113 ></image>
113 </view> 114 <text>微信支付</text>
114 </view> 115 </view>
115 <!-- 116 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
116 <view class="checkBox"> 117 </view>
117 <checkbox-group> 118 <!-- <image
118 <label> 119 src="../../static/right.png"
119 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 120 mode="aspectFill"
120 </label> 121 ></image> -->
121 </checkbox-group> 122 </view>
122 </view> --> 123 </view>
123 </view> 124 <!-- <view class="item">
124 <view class="footer"> 125 <text>优惠券</text>
125 <view class="footerLeft">实付金额:<text>￥{{total}}</text></view> 126 <view class="itemRight">
126 <view class="footerRight"> 127 <view class="rightText">
127 <view class="paybtn">立即支付</view> 128 <view class="chooseOffers">
128 </view> 129 <text>-￥70.00</text>
129 </view> 130 </view>
130 </view> 131 <view class="preferentialWay">最大优惠</view>
131 </template> 132 </view>
132 133 <image
133 <script> 134 src="../../static/right.png"
134 export default { 135 mode="aspectFill"
135 data() { 136 ></image>
136 return { 137 </view>
137 addAddress: "添加收货地址", 138 </view> -->
138 count: 1, 139 <view class="item">
139 disabled: false, 140 <text>运费</text>
140 total: 120, 141 <view class="itemRight">
141 freight: 0.0 142 <view class="freight">免运费</view>
142 // isAnonymous: 143 </view>
143 }; 144 </view>
144 }, 145 <view class="item">
145 methods: { 146 <text>合计</text>
146 counter(isadd) { 147 <view class="itemRight">
147 if (isadd) { 148 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
148 this.count++; 149 </view>
149 } else { 150 </view>
150 this.count <= 1 ? (this.disabled = true) : this.count--; 151 </view>
151 } 152 <!--
152 }, 153 <view class="checkBox">
153 toaddAddress() { 154 <checkbox-group>
154 uni.navigateTo({ 155 <label>
155 url: "../addArddess/addArddess", 156 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
156 success: res => {}, 157 </label>
157 fail: () => {}, 158 </checkbox-group>
158 complete: () => {} 159 </view> -->
159 }); 160 </view>
160 } 161 <view class="footer">
161 } 162 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
162 }; 163 <view class="footerRight">
163 </script> 164 <view
164 165 class="paybtn"
165 <style lang="scss"> 166 @tap="orderBuild"
166 .wrap { 167 >立即支付</view>
167 height: 100vh; 168 </view>
168 background-color: #f2f2f2; 169 </view>
169 font-family: PingFangSC-Regular; 170 </view>
170 letter-spacing: -0.23px; 171 </template>
171 } 172
172 .addAddress { 173 <script>
173 background-color: #ffffff; 174 import store from "@/store";
174 box-sizing: border-box; 175
175 height: 124rpx; 176 export default {
176 width: 100%; 177 data() {
177 display: flex; 178 return {
178 align-items: center; 179 addAddress: "添加收货地址",
179 padding: 0 40rpx; 180 count: 1,
180 .addIcon { 181 pid: 0,
181 background-color: #f2f2f2; 182 disabled: false,
182 height: 56rpx; 183 freight: 0.0,
183 width: 60rpx; 184 showAddress: false,
184 border-radius: 4rpx; 185 note: "",
185 display: flex; 186 addressInfo: {
186 justify-content: center; 187 address: ""
187 align-items: center; 188 }
188 margin-right: 40rpx; 189 // isAnonymous:
189 } 190 };
190 image { 191 },
191 height: 28rpx; 192 onLoad({ pid, addressId, isCart }) {
192 width: 28rpx; 193 this.pid = pid;
193 } 194 // 若已经选择地址
194 .addressText { 195 if (addressId) {
195 font-size: 28rpx; 196 store
196 color: #333333; 197 .dispatch("address/details", {
197 margin-right: 364rpx; 198 add_id: addressId
198 } 199 })
199 } 200 .then(({ code, data }) => {
200 .content { 201 if (code === 1) {
201 background-color: #f2f2f2; 202 console.log("code", code, data);
202 width: 100%; 203 this.showAddress = true;
203 display: flex; 204 this.addressInfo = data;
205 }
206 });
204 flex-direction: column; 207 } else {
205 justify-content: center; 208 store.dispatch("address/default").then(({ code, data }) => {
206 align-items: center; 209 if (code === 1) {
207 padding: 40rpx; 210 console.log("code", code, data);
208 box-sizing: border-box; 211 this.showAddress = true;
209 .orderInfo { 212 this.addressInfo = data;
210 width: 670rpx; 213 }
211 height: 488rpx; 214 });
212 background-color: #ffffff; 215 }
213 border-radius: 20rpx; 216 store.dispatch("read/fetch", {
214 box-sizing: border-box; 217 pid
215 padding: 0 40rpx 40rpx 40rpx; 218 });
216 .title { 219 },
217 display: flex; 220 computed: {
218 align-items: center; 221 goodInfo() {
219 font-size: 28rpx; 222 console.log("state", this.$store.state);
220 color: #333333; 223 return this.$store.state.read.goodInfo;
221 height: 60rpx;
222 line-height: 40rpx;
223 padding: 10rpx 10rpx 10rpx 0rpx;
224 image { 224 },
225 margin-right: 20rpx; 225 skuInfo() {
226 } 226 return this.$store.state.order.param.sk_id_arr;
227 } 227 },
228 .infoBox { 228 attrList() {
229 margin-top: 42rpx; 229 return this.$store.state.order.param.attrList;
230 .infoTop { 230 },
231 current() {
232 return this.$store.state.order.param.current;
233 }
231 display: flex; 234 },
232 flex-direction: row; 235 methods: {
233 image { 236 counter(isadd) {
234 height: 188rpx; 237 if (isadd) {
235 width: 188rpx; 238 this.count++;
236 margin-right: 24rpx; 239 } else {
237 } 240 this.count <= 1 ? (this.disabled = true) : this.count--;
238 .infoRight { 241 }
239 width: 374rpx; 242 },
240 display: flex; 243 // 跳转添加地址页面
241 flex-direction: column; 244 toaddAddress() {
242 align-items: flex-start; 245 uni.navigateTo({
243 justify-content: space-between; 246 url: `../address/addressList?edit=${1}`,
244 .goodName { 247 success: res => {},
245 font-size: 28rpx; 248 fail: error => {
246 color: #333333; 249 console.log("跳转到地址列表页面失败====>", error);
247 } 250 },
251 complete: () => {}
252 });
248 .remarks { 253 },
249 font-size: 20rpx; 254 // 下单
250 color: #999999; 255 orderBuild() {
251 } 256 console.log("this", this.$store.state);
252 .priceBox { 257 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param;
253 display: flex; 258 store
254 justify-content: space-between; 259 .dispatch("order/buyNow", {
255 align-items: center; 260 pid: skId.pid,
256 width: 100%; 261 sk_id: skId.sk_id,
257 .price { 262 number: this.count,
258 color: #ff6b4a; 263 mp_id: mpId,
259 font-size: 28rpx; 264 address: JSON.stringify(this.addressInfo),
260 } 265 totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
261 .counter { 266 liuyan: this.note,
262 display: flex; 267 dir: 1
263 flex-direction: row; 268 })
264 justify-content: space-between; 269 .then(res => {
270 this.pay(res.data);
271 });
265 font-size: 28rpx; 272 },
266 color: #333333; 273 // 支付
267 width: 122rpx; 274 pay(res) {
268 .btn { 275 console.log("pay", res);
269 display: flex; 276 const { data, exKeyName: keyName } = res;
270 justify-content: center; 277 const uid = uni.getStorageSync("uid");
271 line-height: 32rpx; 278 const fieldSet = {
272 height: 32rpx; 279 openid: this.$store.state.user.userInfo.openid,
273 width: 32rpx; 280 uid: this.$store.state.user.userInfo.uid,
274 background-color: #f2f2f2; 281 shopid: 0,
275 color: #cfcfcf; 282 payCate: 2020,
276 } 283 payMoney: Number(this.skuInfo.real_price) * this.count * 100,
277 } 284 payWoodId: `fcdj-${uid}-${keyName}`,
278 } 285 nonceStr: "asfafasfasfasfasf",
279 } 286 signType: "MD5",
280 } 287 app_uid: 2020,
281 .infoBottom { 288 timeStamp: new Date().getTime().toString(),
282 display: flex; 289 billInfo: JSON.stringify(data),
283 flex-direction: column; 290 keyname: keyName
284 justify-content: flex-start; 291 };
285 font-size: 24rpx; 292 console.log("fieldSet", fieldSet);
286 color: #333333; 293 store.dispatch("order/pay", fieldSet).then(res => {
287 text { 294 console.log("res", res);
288 color: #999999; 295 });
289 margin-left: 20rpx; 296 }
290 } 297 }
291 298 };
292 .norm { 299 </script>
293 margin-top: 28rpx; 300
294 } 301 <style lang="scss">
295 .shippingMethod { 302 .wrap {
296 margin-top: 12rpx; 303 height: 100vh;
297 } 304 background-color: #f2f2f2;
298 .message { 305 font-family: PingFangSC-Regular;
299 display: flex; 306 letter-spacing: -0.23px;
300 flex-direction: row; 307 position: absolute;
301 align-items: center; 308 }
302 margin-top: 18rpx; 309 .addAddress {
303 input { 310 background-color: #ffffff;
304 margin-left: 20rpx; 311 box-sizing: border-box;
305 width: 75%; 312 height: 124rpx;
306 } 313 width: 100%;
307 } 314 display: flex;
308 } 315 align-items: center;
309 } 316 padding: 0 40rpx;
310 } 317 .addIcon {
311 .payWay { 318 background-color: #f2f2f2;
312 height: 464rpx; 319 height: 56rpx;
313 width: 670rpx; 320 width: 60rpx;
314 background-color: #ffffff; 321 border-radius: 4rpx;
315 color: #333333; 322 display: flex;
316 font-size: 24rpx; 323 justify-content: center;
317 border-radius: 20rpx; 324 align-items: center;
318 box-sizing: border-box; 325 margin-right: 40rpx;
319 padding: 0 52rpx 0rpx 40rpx; 326 }
320 margin-top: 20rpx; 327 image {
321 display: flex; 328 height: 28rpx;
322 flex-direction: column; 329 width: 28rpx;
323 justify-content: center; 330 }
324 align-items: flex-start; 331 .addressText {
325 .item { 332 font-size: 28rpx;
326 display: flex; 333 color: #333333;
327 flex-direction: row; 334 margin-right: 364rpx;
328 justify-content: space-between; 335 }
329 align-items: center; 336 }
330 width: 100%; 337 .content {
331 height: 115rpx; 338 background-color: #f2f2f2;
332 .itemRight { 339 width: 100%;
333 display: flex; 340 display: flex;
334 flex-direction: row; 341 flex-direction: column;
335 justify-content: space-between; 342 justify-content: center;
336 align-items: center; 343 align-items: center;
337 image { 344 padding: 40rpx;
338 height: 24rpx; 345 box-sizing: border-box;
339 width: 12rpx; 346 .orderInfo {
340 } 347 width: 670rpx;
341 .rightText { 348 height: 488rpx;
342 margin-right: 20rpx; 349 background-color: #ffffff;
343 text-align: right; 350 border-radius: 20rpx;
344 .choosePayWay { 351 box-sizing: border-box;
345 text { 352 padding: 0 40rpx 40rpx 40rpx;
346 color: #333333; 353 .title {
347 } 354 display: flex;
348 image { 355 align-items: center;
349 height: 26rpx; 356 font-size: 28rpx;
350 width: 30rpx; 357 color: #333333;
351 margin-right: 20px; 358 height: 60rpx;
352 } 359 line-height: 40rpx;
353 } 360 padding: 10rpx 10rpx 10rpx 0rpx;
354 .randomSubstraction { 361 image {
355 color: #ff6b4a; 362 margin-right: 20rpx;
356 } 363 }
357 .preferentialWay { 364 }
358 color: #999999; 365 .infoBox {
359 } 366 margin-top: 42rpx;
360 } 367 .infoTop {
361 .freight, 368 display: flex;
362 .total { 369 flex-direction: row;
363 margin-right: 32rpx; 370 image {
364 } 371 height: 188rpx;
365 text { 372 width: 188rpx;
366 color: #ff6b4a; 373 margin-right: 24rpx;
367 } 374 }
368 } 375 .infoRight {
369 } 376 width: 374rpx;
370 } 377 display: flex;
371 // .checkBox{ 378 flex-direction: column;
372 // height: 58rpx; 379 align-items: flex-start;
373 // line-height: 58rpx; 380 justify-content: space-between;
374 // width: 100%; 381 .goodName {
375 // margin-top: 36rpx; 382 font-size: 28rpx;
376 // margin-left: 40rpx; 383 color: #333333;
377 // font-size: 12px; 384 }
378 // color: #999999; 385 .remarks {
379 // } 386 font-size: 20rpx;
380 } 387 color: #999999;
381 .footer { 388 }
382 height: 112rpx; 389 .priceBox {
383 width: 100%; 390 display: flex;
384 background-color: #f2f2f2; 391 justify-content: space-between;
385 font-size: 16px; 392 align-items: center;
386 display: flex; 393 width: 100%;
387 justify-content: space-between; 394 .price {
388 align-items: center; 395 color: #ff6b4a;
389 .footerLeft { 396 font-size: 28rpx;
390 display: flex; 397 }
391 justify-content: center; 398 .originCost {
392 align-items: center; 399 text-decoration: line-through;
393 width: 50%; 400 color: #999999;
394 color: #333333; 401 font-size: 20rpx;
395 text { 402 }
396 color: #ff6b4a; 403 .counter {
397 } 404 display: flex;
398 } 405 flex-direction: row;
399 .footerRight { 406 justify-content: space-between;
400 display: flex; 407 font-size: 28rpx;
401 justify-content: flex-end; 408 color: #333333;
402 align-items: center; 409 width: 122rpx;
403 width: 50%; 410 .btn {
404 margin-right: 26rpx; 411 display: flex;
405 .paybtn { 412 justify-content: center;
406 display: flex; 413 line-height: 32rpx;
407 justify-content: center; 414 height: 32rpx;
408 align-items: center; 415 width: 32rpx;
409 background: #ff6b4a; 416 background-color: #f2f2f2;
410 border-radius: 20px; 417 color: #cfcfcf;
411 border-radius: 20px; 418 }
412 color: #ffffff; 419 }
413 width: 204rpx; 420 }
414 height: 80rpx; 421 }
415 } 422 }
416 } 423 .infoBottom {
417 } 424 display: flex;
418 </style> 425 flex-direction: column;
419 426 justify-content: flex-start;
427 font-size: 24rpx;
428 color: #333333;
429 text {
430 color: #999999;
431 margin-left: 20rpx;
432 }
433
434 .norm {
435 margin-top: 28rpx;
436 }
437 .shippingMethod {
438 margin-top: 12rpx;
439 }
440 .message {
441 display: flex;
442 flex-direction: row;
443 align-items: center;
444 margin-top: 18rpx;
445 input {
446 margin-left: 20rpx;
447 width: 75%;
448 }
449 }
450 }
451 }
452 }
453 .payWay {
454 height: 464rpx;
455 width: 670rpx;
456 background-color: #ffffff;
457 color: #333333;
458 font-size: 24rpx;
459 border-radius: 20rpx;
460 box-sizing: border-box;
461 padding: 0 52rpx 0rpx 40rpx;
462 margin-top: 20rpx;
463 display: flex;
464 flex-direction: column;
465 justify-content: center;
466 align-items: flex-start;
467 .item {
468 display: flex;
469 flex-direction: row;
470 justify-content: space-between;
471 align-items: center;
472 width: 100%;
473 height: 115rpx;
474 .itemRight {
475 display: flex;
476 flex-direction: row;
477 justify-content: space-between;
478 align-items: center;
479 image {
480 height: 24rpx;
481 width: 12rpx;
482 }
483 .rightText {
484 margin-right: 20rpx;
485 text-align: right;
486 .choosePayWay {
487 text {
488 color: #333333;
489 }
490 image {
491 height: 26rpx;
492 width: 30rpx;
493 margin-right: 20px;
494 }
495 }
496 .randomSubstraction {
497 color: #ff6b4a;
498 }
499 .preferentialWay {
500 color: #999999;
501 }
502 }
503 .freight,
504 .total {
505 margin-right: 32rpx;
506 }
507 text {
508 color: #ff6b4a;
509 }
510 }
511 }
512 }
513 // .checkBox {
514 // height: 58rpx;
515 // line-height: 58rpx;
516 // width: 100%;
517 // margin-top: 36rpx;
518 // margin-left: 40rpx;
519 // font-size: 12px;
520 // color: #999999;
521 // }
522 }
523 .footer {
524 height: 112rpx;
525 width: 100%;
526 background-color: #fff;
527 font-size: 16px;
528 display: flex;
529 justify-content: space-between;
530 align-items: center;
531 position: fixed;
532 bottom: 0;
533 .footerLeft {
534 display: flex;
535 justify-content: center;
536 align-items: center;
537 width: 50%;
538 color: #333333;
539 text {
540 color: #ff6b4a;
541 }
542 }
543 .footerRight {
544 display: flex;
545 justify-content: flex-end;
546 align-items: center;
547 width: 50%;
548 margin-right: 26rpx;
549 .paybtn {
550 display: flex;
551 justify-content: center;
552 align-items: center;
553 background: #ff6b4a;
554 border-radius: 20px;
555 border-radius: 20px;
556 color: #ffffff;
557 width: 204rpx;
558 height: 80rpx;
559 }
560 }
561 }
562 // 地址信息样式
563 .order-user {
564 width: 670rpx;
565 height: 228rpx;
566 background: #ffffff;
567 border-radius: 14rpx;
568 margin: 0 auto;
569 margin-top: 20rpx;
570 position: relative;
571 .order-user-head {
572 display: flex;
573 height: 108rpx;
574 width: 100%;
575 align-items: center;
576 margin-left: 126rpx;
577 .name {
578 display: flex;
579 justify-content: space-between;
580 font-size: 14px;
581 color: #333333;
582 letter-spacing: -0.26px;
583 margin-right: 20rpx;
584 .default {
585 height: 40rpx;
586 width: 80rpx;
587 background-color: #4a90e2;
588 border-radius: 13px;
589 border-radius: 13px;
590 text-align: center;
591 margin-right: 20rpx;
592 text {
593 font-size: 12px;
594 color: #ffffff;
595 letter-spacing: -0.23px;
596 }
597 }
598 }
599 .mobile {
600 font-size: 14px;
601 color: #999999;
602 letter-spacing: -0.26px;
603 }
604 }
605 .order-user-body {
606 display: flex;
607 width: 100%;
608 image {
609 width: 24px;
610 height: 26px;
611 margin: 12rpx 32rpx 0 40rpx;
612 }
613 .address {
614 font-weight: bold;
615 font-size: 14px;
616 color: #333333;
617 letter-spacing: -0.26px;
618 }
619 }
620 .arrow {
621 width: 6px;
622 height: 12px;
623 position: absolute;
624 right: 40rpx;
625 bottom: 104rpx;
626 }
src/pages/refundment/Refundways.vue
Diff comments   Edit   View file @3fb9af8
1 <template> 1 <template>
2 <view 2 <view
3 class="container" 3 class="container"
4 v-bind:style="{height: curheight+'px'}" 4 v-bind:style="{height: curheight+'px'}"
5 > 5 >
6 <view 6 <view
7 class="refund" 7 class="refund"
8 v-for="(items) in refund" 8 v-for="(items) in refund"
9 :key="items.key" 9 :key="items.key"
10 > 10 >
11 <view class="detail"> 11 <view class="detail">
12 <view class="detail_img"> 12 <view class="detail_img">
13 <image v-bind:src="items.img"></image> 13 <image v-bind:src="items.img"></image>
14 </view>
15 <view class="detail2">
16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason"> 14 </view>
15 <view class="detail2">
16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason">
29 <view>仅退款<image src="/static/img/detail/xiala.png"></image>
30 </view>
31 </view>
32 <view class="refund_reason">
33 <view>退款退货<image src="/static/img/detail/xiala.png"></image>
34 </view>
35 </view>
36 <view class="refund_reason">
37 <view>换货<image src="/static/img/detail/xiala.png"></image>
38 </view>
39 </view>
29 <view>仅退款<image src="/static/img/detail/xiala.png"></image> 40 </view>
41 </view>
30 </view> 42 </template>
31 </view> 43
32 <view class="refund_reason"> 44 <script>
33 <view>退款退货<image src="/static/img/detail/xiala.png"></image> 45 export default {
34 </view> 46 //获取浏览器高度
35 </view> 47 beforeMount(height) {
36 <view class="refund_reason"> 48 var h = document.documentElement.clientHeight || document.body.clientHeight;
37 <view>换货<image src="/static/img/detail/xiala.png"></image> 49 this.curheight = h - 44;
38 </view> 50 },
39 </view> 51 data() {
40 </view> 52 return {
41 </view> 53 curheight: 0, //浏览器高度
42 </template> 54 refund: [
43 55 {
44 <script> 56 key: 0,
45 export default { 57 img: "/static/img/detail/d1.png",
46 //获取浏览器高度 58 name: "商品名称",
47 beforeMount(height) { 59 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
48 var h = document.documentElement.clientHeight || document.body.clientHeight; 60 price: 180,
49 this.curheight = h - 44; 61 number: 1,
50 }, 62 refundprice: 110,
51 data() { 63 refund_img: "/static/img/detail/refund_img.png"
52 return { 64 }
53 curheight: 0, //浏览器高度 65 ]
54 refund: [ 66 };
55 { 67 }
56 key: 0, 68 };
57 img: "/static/img/detail/d1.png",
58 name: "商品名称", 69 </script>
59 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻", 70
60 price: 180, 71 <style lang="scss">
61 number: 1, 72 .container {
62 refundprice: 110, 73 background: #f2f2f2;
63 refund_img: "/static/img/detail/refund_img.png" 74 padding-top: 10px;
64 } 75 box-sizing: border-box;
65 ]
66 }; 76 }
67 } 77 .refund {
68 }; 78 width: 90%;
69 </script> 79 height: 300px;
70 80 margin: 0 auto;
71 <style lang="scss"> 81 background: #ffffff;
72 .container { 82 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
73 background: #f2f2f2; 83 border-radius: 8px;
74 padding-top: 10px; 84 padding: 14px;
75 box-sizing: border-box; 85 box-sizing: border-box;
76 } 86 }
77 .refund { 87 .detail {
78 width: 90%; 88 display: flex;
79 height: 300px; 89 justify-content: space-between;
80 margin: 0 auto; 90 font-family: PingFangSC-Regular;
81 background: #ffffff; 91 margin-bottom: 20px;
82 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); 92 .detail2 {
83 border-radius: 8px; 93 width: 64%;
84 padding: 14px; 94 view {
85 box-sizing: border-box; 95 margin-bottom: 8px;
86 }
87 .detail {
88 display: flex;
89 justify-content: space-between;
90 font-family: PingFangSC-Regular;
91 margin-bottom: 20px;
92 .detail2 {
93 width: 64%;
94 view {
95 margin-bottom: 8px;
96 }
97 .detail_name {
98 font-size: 14px;
99 color: #333333;
100 }
101 .detail_standard { 96 }
102 font-size: 12px; 97 .detail_name {
103 color: #999999; 98 font-size: 14px;
104 } 99 color: #333333;
105 .detail_price {
106 font-size: 14px;
107 color: #999999;
108 display: flex;
109 justify-content: space-between;
110 } 100 }
111 } 101 .detail_standard {
112 .detail_img { 102 font-size: 12px;
113 width: 188rpx; 103 color: #999999;
114 height: 188rpx; 104 }
115 border-radius: 40px; 105 .detail_price {
116 image { 106 font-size: 14px;
117 width: 100%; 107 color: #999999;
118 height: 100%; 108 display: flex;
119 } 109 justify-content: space-between;
120 }
121 }
122
123 .refund_price { 110 }
124 font-family: PingFangSC-Semibold; 111 }
125 font-size: 14px; 112 .detail_img {
113 width: 188rpx;
114 height: 188rpx;
115 border-radius: 40px;
116 image {
117 width: 100%;
118 height: 100%;
126 color: #333333; 119 }
120 }
127 letter-spacing: -0.26px; 121 }
src/pages/refundment/refundWays.vue
Diff comments   Edit   View file @3fb9af8
1 <template> 1 <template>
2 <view 2 <view
3 class="container" 3 class="container"
4 v-bind:style="{height: curheight+'px'}" 4 v-bind:style="{height: curheight+'px'}"
5 > 5 >
6 <view 6 <view
7 class="refund" 7 class="refund"
8 v-for="(items) in refund" 8 v-for="(items) in refund"
9 :key="items.key" 9 :key="items.key"
10 > 10 >
11 <view class="detail"> 11 <view class="detail">
12 <view class="detail_img"> 12 <view class="detail_img">
13 <image v-bind:src="items.img"></image> 13 <image v-bind:src="items.img"></image>
14 </view>
15 <view class="detail2">
16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason"> 14 </view>
15 <view class="detail2">
16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason">
29 <view>仅退款<image src="/static/img/detail/xiala.png"></image>
30 </view>
31 </view>
32 <view class="refund_reason">
33 <view>退款退货<image src="/static/img/detail/xiala.png"></image>
34 </view>
35 </view>
36 <view class="refund_reason">
37 <view>换货<image src="/static/img/detail/xiala.png"></image>
38 </view>
39 </view>
29 <view>仅退款<image src="/static/img/detail/xiala.png"></image> 40 </view>
41 </view>
30 </view> 42 </template>
31 </view> 43
32 <view class="refund_reason"> 44 <script>
33 <view>退款退货<image src="/static/img/detail/xiala.png"></image> 45 export default {
34 </view> 46 //获取浏览器高度
35 </view> 47 beforeMount(height) {
36 <view class="refund_reason"> 48 var h = document.documentElement.clientHeight || document.body.clientHeight;
37 <view>换货<image src="/static/img/detail/xiala.png"></image> 49 this.curheight = h - 44;
38 </view> 50 },
39 </view> 51 data() {
40 </view> 52 return {
41 </view> 53 curheight: 0, //浏览器高度
42 </template> 54 refund: [
43 55 {
44 <script> 56 key: 0,
45 export default { 57 img: "/static/img/detail/d1.png",
46 //获取浏览器高度 58 name: "商品名称",
47 beforeMount(height) { 59 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
48 var h = document.documentElement.clientHeight || document.body.clientHeight; 60 price: 180,
49 this.curheight = h - 44; 61 number: 1,
50 }, 62 refundprice: 110,
51 data() { 63 refund_img: "/static/img/detail/refund_img.png"
52 return { 64 }
53 curheight: 0, //浏览器高度 65 ]
54 refund: [ 66 };
55 { 67 }
56 key: 0, 68 };
57 img: "/static/img/detail/d1.png",
58 name: "商品名称", 69 </script>
59 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻", 70
60 price: 180, 71 <style lang="scss">
61 number: 1, 72 .container {
62 refundprice: 110, 73 background: #f2f2f2;
63 refund_img: "/static/img/detail/refund_img.png" 74 padding-top: 10px;
64 } 75 box-sizing: border-box;
65 ]
66 }; 76 }
67 } 77 .refund {
68 }; 78 width: 90%;
69 </script> 79 height: 300px;
70 80 margin: 0 auto;
71 <style lang="scss"> 81 background: #ffffff;
72 .container { 82 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
73 background: #f2f2f2; 83 border-radius: 8px;
74 padding-top: 10px; 84 padding: 14px;
75 box-sizing: border-box; 85 box-sizing: border-box;
76 } 86 }
77 .refund { 87 .detail {
78 width: 90%; 88 display: flex;
79 height: 300px; 89 justify-content: space-between;
80 margin: 0 auto; 90 font-family: PingFangSC-Regular;
81 background: #ffffff; 91 margin-bottom: 20px;
82 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); 92 .detail2 {
83 border-radius: 8px; 93 width: 64%;
84 padding: 14px; 94 view {
85 box-sizing: border-box; 95 margin-bottom: 8px;
86 }
87 .detail {
88 display: flex;
89 justify-content: space-between;
90 font-family: PingFangSC-Regular;
91 margin-bottom: 20px;
92 .detail2 {
93 width: 64%;
94 view {
95 margin-bottom: 8px;
96 }
97 .detail_name {
98 font-size: 14px;
99 color: #333333;
100 }
101 .detail_standard { 96 }
102 font-size: 12px; 97 .detail_name {
103 color: #999999; 98 font-size: 14px;
104 } 99 color: #333333;
105 .detail_price {
106 font-size: 14px;
107 color: #999999;
108 display: flex;
109 justify-content: space-between;
110 } 100 }
111 } 101 .detail_standard {
112 .detail_img { 102 font-size: 12px;
113 width: 188rpx; 103 color: #999999;
114 height: 188rpx; 104 }
115 border-radius: 40px; 105 .detail_price {
116 image { 106 font-size: 14px;
117 width: 100%; 107 color: #999999;
118 height: 100%; 108 display: flex;
119 } 109 justify-content: space-between;
120 }
121 }
122
123 .refund_price { 110 }
124 font-family: PingFangSC-Semibold; 111 }
125 font-size: 14px; 112 .detail_img {
113 width: 188rpx;
114 height: 188rpx;
115 border-radius: 40px;
116 image {
117 width: 100%;
118 height: 100%;
126 color: #333333; 119 }
120 }
127 letter-spacing: -0.26px; 121 }
src/pages/refundment/refundment.vue
Diff comments   Edit   View file @3fb9af8
1 <template> 1 <template>
2 <view 2 <view
3 class="container" 3 class="container"
4 v-bind:style="{height: curheight+'px'}" 4 v-bind:style="{height: curheight+'px'}"
5 > 5 >
6 <view 6 <view
7 class="refund" 7 class="refund"
8 v-for="(items) in refund" 8 v-for="(items) in refund"
9 :key="items.key" 9 :key="items.key"
10 > 10 >
11 <view class="detail"> 11 <view class="detail">
12 <view class="detail_img"> 12 <view class="detail_img">
13 <image v-bind:src="items.img"></image> 13 <image v-bind:src="items.img"></image>
14 </view>
15 <view class="detail2">
16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason">
29 <span>退款原因</span>
30 <!-- 跳转退款原因详细页 -->
31 <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image>
32 </view>
33 </view> 14 </view>
34 <view class="refund_explain"> 15 <view class="detail2">
35 <span>退款说明</span> 16 <view class="detail_name">{{items.name}}</view>
17 <view class="detail_standard">规格：{{items.standard}}</view>
18 <view class="detail_price">
19 <span>￥{{items.price}}</span>
20 <span>X{{items.number}}</span>
21 </view>
36 <input 22 </view>
23 </view>
24 <view class="refund_price">
25 <span class="refund_price1">退款金额</span>
26 <span class="refund_price2">￥{{items.refundprice}}</span>
27 </view>
28 <view class="refund_reason">
29 <span>退款原因</span>
30 <!-- 跳转退款原因详细页 -->
31 <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image>
32 </view>
33 </view>
34 <view class="refund_explain">
35 <span>退款说明</span>
36 <input
37 placeholder="选填"
38 value=""
39 >
40 </view>
41 <view class="refund_img">
42 <span class="refund_img1">上传图片</span>
43 <span class="refund_img2">（最多3张）</span>
44 <view>
45 <image v-bind:src="items.refund_img"></image>
46 </view>
47 </view>
48 </view>
49 <view class="button">
50 <span>提交</span>
37 placeholder="选填" 51 </view>
52 </view>
38 value="" 53 </template>
39 > 54
40 </view> 55 <script>
41 <view class="refund_img">
42 <span class="refund_img1">上传图片</span> 56 export default {
43 <span class="refund_img2">（最多3张）</span> 57 //获取浏览器高度
44 <view> 58 beforeMount(height) {
45 <image v-bind:src="items.refund_img"></image> 59 var h = document.documentElement.clientHeight || document.body.clientHeight;
46 </view> 60 this.curheight = h - 44;
47 </view> 61 },
48 </view> 62 methods: {
49 <view class="button"> 63 Jump() {
50 <span>提交</span> 64 this.$router.push({ path: "refundWays" });
51 </view>
52 </view>
53 </template>
54
55 <script>
56 export default {
57 //获取浏览器高度
58 beforeMount(height) {
59 var h = document.documentElement.clientHeight || document.body.clientHeight;
60 this.curheight = h - 44;
61 },
62 methods: {
63 Jump() {
64 this.$router.push({ path: "refundWays" });
65 }
66 },
67 data() {
68 return {
69 curheight: 0, //浏览器高度
70 refund: [ 65 }
71 { 66 },
67 data() {
68 return {
69 curheight: 0, //浏览器高度
70 refund: [
71 {
72 key: 0,
73 img: "/static/img/detail/d1.png",
74 name: "商品名称",
75 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻",
76 price: 180,
77 number: 1,
78 refundprice: 110,
79 refund_img: "/static/img/detail/refund_img.png"
80 }
81 ]
82 };
83 }
84 };
72 key: 0, 85 </script>
73 img: "/static/img/detail/d1.png", 86
74 name: "商品名称", 87 <style lang="scss">
75 standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻", 88 .container {
76 price: 180, 89 background: #f2f2f2;
77 number: 1, 90 padding-top: 10px;
78 refundprice: 110, 91 box-sizing: border-box;
79 refund_img: "/static/img/detail/refund_img.png"
80 } 92 }
81 ] 93 .refund {
82 }; 94 width: 90%;
83 } 95 height: 353px;
84 }; 96 margin: 0 auto;
85 </script> 97 background: #ffffff;
86 98 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
87 <style lang="scss"> 99 border-radius: 8px;
88 .container { 100 padding: 14px;
89 background: #f2f2f2; 101 box-sizing: border-box;
90 padding-top: 10px; 102 }
91 box-sizing: border-box; 103 .detail {
92 } 104 display: flex;
93 .refund { 105 justify-content: space-between;
94 width: 90%; 106 font-family: PingFangSC-Regular;
95 height: 353px; 107 margin-bottom: 20px;
96 margin: 0 auto; 108 .detail2 {
97 background: #ffffff; 109 width: 64%;
98 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); 110 view {
99 border-radius: 8px; 111 margin-bottom: 8px;
100 padding: 14px;
101 box-sizing: border-box;
102 }
103 .detail {
104 display: flex;
105 justify-content: space-between;
106 font-family: PingFangSC-Regular;
107 margin-bottom: 20px;
108 .detail2 {
109 width: 64%;
110 view {
111 margin-bottom: 8px;
112 }
113 .detail_name {
114 font-size: 14px;
115 color: #333333; 112 }
116 } 113 .detail_name {
117 .detail_standard { 114 font-size: 14px;
118 font-size: 12px; 115 color: #333333;
119 color: #999999;
120 }
121 .detail_price {
122 font-size: 14px;
123 color: #999999;
124 display: flex; 116 }
125 justify-content: space-between; 117 .detail_standard {
126 } 118 font-size: 12px;
127 } 119 color: #999999;
128 .detail_img { 120 }
129 width: 188rpx; 121 .detail_price {
130 height: 188rpx; 122 font-size: 14px;
131 border-radius: 40px; 123 color: #999999;
132 image { 124 display: flex;
133 width: 100%; 125 justify-content: space-between;
134 height: 100%;
135 }
136 }
137 }
138 .refund_explain,
139 .refund_img, 126 }
140 .refund_price, 127 }
141 .refund_reason { 128 .detail_img {
129 width: 188rpx;
130 height: 188rpx;
131 border-radius: 40px;
132 image {
133 width: 100%;
134 height: 100%;
142 margin-top: 16px; 135 }
136 }
143 margin-bottom: 16px; 137 }
144 } 138 .refund_explain,
145 .refund_price { 139 .refund_img,
146 font-family: PingFangSC-Semibold; 140 .refund_price,
147 font-size: 14px; 141 .refund_reason {
148 color: #333333; 142 margin-top: 16px;
149 letter-spacing: -0.26px; 143 margin-bottom: 16px;
150 line-height: 18px; 144 }
151 .refund_price1 { 145 .refund_price {
152 font-weight: bold; 146 font-family: PingFangSC-Semibold;
153 margin-right: 16px; 147 font-size: 14px;
154 } 148 color: #333333;
149 letter-spacing: -0.26px;
150 line-height: 18px;
151 .refund_price1 {
152 font-weight: bold;
153 margin-right: 16px;
154 }
155 .refund_price2 {
156 color: #ff6b4a;
157 }
155 .refund_price2 { 158 }
156 color: #ff6b4a; 159 .refund_reason,
157 } 160 .refund_explain span,
158 } 161 .refund_img1 {
159 .refund_reason, 162 font-family: PingFangSC-Regular;
160 .refund_explain span, 163 font-size: 12px;
161 .refund_img1 { 164 color: #333333;
165 letter-spacing: -0.23px;
166 line-height: 18px;
162 font-family: PingFangSC-Regular; 167 }
163 font-size: 12px; 168 .refund_explain {
164 color: #333333; 169 display: flex;
165 letter-spacing: -0.23px; 170 justify-content: space-between;
166 line-height: 18px; 171 align-items: center;