吉鹏 / gulu-vue

Download as
Browse Code »

Commit cb58acb8c1540674edb1dd7cba23e4f04df66c19

Authored by Adam
2 parents 43f318e26d 3fb9af8d56
Exists in master

Merge branch 'master' into 'master' 

Master

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