Compare View
Commits (7)
-
Master See merge request !8
Showing
4 changed files
Show diff stats
src/pages/confirmOrder/confirmOrder.vue
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
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
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
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; |