刘文博 / gulu-vue

Download as
Browse Code »

Commit c00c2580982ee60f8df451af7ac431851767db18

Authored by mullins
1 parent 7c039b6f9a
Exists in master

规格样式修改

Showing 1 changed file with 9 additions and 9 deletions   Show diff stats
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @c00c258
1 <!-- 订单待付款 待收货 --> 1 <!-- 订单待付款 待收货 -->
2 <template> 2 <template>
3 <view class="content"> 3 <view class="content">
4 <view 4 <view
5 class="headerBanner" 5 class="headerBanner"
6 v-if="status == '2'||'3'" 6 v-if="status == '2'||'3'"
7 > 7 >
8 <view class="bannerLeft"> 8 <view class="bannerLeft">
9 <view class="T1">订单已完成</view> 9 <view class="T1">订单已完成</view>
10 </view> 10 </view>
11 <image 11 <image
12 src="../../static/car.png" 12 src="../../static/car.png"
13 mode="aspectFill" 13 mode="aspectFill"
14 ></image> 14 ></image>
15 </view> 15 </view>
16 <!-- 待付款 --> 16 <!-- 待付款 -->
17 <view 17 <view
18 class="order-time" 18 class="order-time"
19 v-if="status == '0'" 19 v-if="status == '0'"
20 > 20 >
21 <text>请在</text> 21 <text>请在</text>
22 <uni-countdown 22 <uni-countdown
23 color="#EC5D3B" 23 color="#EC5D3B"
24 splitor-color="#EC5D3B" 24 splitor-color="#EC5D3B"
25 :show-day="false" 25 :show-day="false"
26 :hour="0" 26 :hour="0"
27 :second="getLeftTime" 27 :second="getLeftTime"
28 @timeup="timeup" 28 @timeup="timeup"
29 > 29 >
30 </uni-countdown> 30 </uni-countdown>
31 31
32 <text>内完成付款</text> 32 <text>内完成付款</text>
33 </view> 33 </view>
34 34
35 <view 35 <view
36 class="headerBanner" 36 class="headerBanner"
37 v-if="status == '1'" 37 v-if="status == '1'"
38 > 38 >
39 <view class="bannerLeft"> 39 <view class="bannerLeft">
40 <view class="T1">卖家已发货</view> 40 <view class="T1">卖家已发货</view>
41 <!-- <view class="T2">还剩 确认收货</view> --> 41 <!-- <view class="T2">还剩 确认收货</view> -->
42 </view> 42 </view>
43 <image 43 <image
44 src="../../static/car.png" 44 src="../../static/car.png"
45 mode="aspectFill" 45 mode="aspectFill"
46 ></image> 46 ></image>
47 </view> 47 </view>
48 48
49 <view class="order"> 49 <view class="order">
50 <view class="order-user"> 50 <view class="order-user">
51 <view class="order-user-head"> 51 <view class="order-user-head">
52 <text class="p1">{{orderAddressInfo.name}}</text> 52 <text class="p1">{{orderAddressInfo.name}}</text>
53 <text class="p2">{{orderAddressInfo.mobile}}</text> 53 <text class="p2">{{orderAddressInfo.mobile}}</text>
54 </view> 54 </view>
55 <view class="order-user-body"> 55 <view class="order-user-body">
56 <image src="../../static/myorder-paying-location.png"></image> 56 <image src="../../static/myorder-paying-location.png"></image>
57 <text class="p3">{{orderAddressInfo.address}}</text> 57 <text class="p3">{{orderAddressInfo.address}}</text>
58 </view> 58 </view>
59 </view> 59 </view>
60 <view class="order-info"> 60 <view class="order-info">
61 <view 61 <view
62 class="order-info-head" 62 class="order-info-head"
63 v-for="(orderInfoListItem, index) in orderInfoList" 63 v-for="(orderInfoListItem, index) in orderInfoList"
64 :key="index" 64 :key="index"
65 > 65 >
66 <image 66 <image
67 :src="orderInfoListItem.imgUrl" 67 :src="orderInfoListItem.imgUrl"
68 mode="aspectFill" 68 mode="aspectFill"
69 ></image> 69 ></image>
70 <view class="order-info-head-r"> 70 <view class="order-info-head-r">
71 <text class="p1">{{orderInfoListItem.p_name}}</text> 71 <text class="p1">{{orderInfoListItem.p_name}}</text>
72 <view 72 <template v-if="orderInfoList.length === 1">
73 class="p2" 73 <view
74 style="margin: 0;" 74 class="p2"
75 > 75 style="margin: 0;"
76 <!-- {{index}} --> 76 >
77 {{skuList[index] ? skuList[0].sku_name.replace('_', '/') : ''}} 77 {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}}
78 <!-- {{skuList.length === 0 ? '' : skuList[0].sku_name.replace('_', '/')}} --> 78 </view>
79 <!-- <view class="arrow"></view> --> 79 </template>
80 </view>
81 <view class="infoText-bottom"> 80 <view class="infoText-bottom">
82 <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view> 81 <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view>
83 <view class="buy-num">X {{orderInfoListItem.num}}</view> 82 <view class="buy-num">X {{orderInfoListItem.num}}</view>
84 </view> 83 </view>
85 </view> 84 </view>
86 </view> 85 </view>
87 <!-- <view class="order-info-goodsnum"> 86 <!-- <view class="order-info-goodsnum">
88 <text>X1</text> 87 <text>X1</text>
89 </view> --> 88 </view> -->
90 <text class="order-info-freight"> 89 <text class="order-info-freight">
91 <text class="p1">运费</text> 90 <text class="p1">运费</text>
92 <text class="p2">免运费</text> 91 <text class="p2">免运费</text>
93 </text> 92 </text>
94 <text class="order-info-discount"> 93 <text class="order-info-discount">
95 <text class="p1">优惠</text> 94 <text class="p1">优惠</text>
96 <text class="p2">-￥{{totalDiscount}}</text> 95 <text class="p2">-￥{{totalDiscount}}</text>
97 </text> 96 </text>
98 <text class="order-info-price"> 97 <text class="order-info-price">
99 <text class="p1">实付</text> 98 <text class="p1">实付</text>
100 <text class="p2">￥{{Number(totalPrice)/100}}</text> 99 <text class="p2">￥{{Number(totalPrice)/100}}</text>
101 </text> 100 </text>
102 <text class="order-info-num"> 101 <text class="order-info-num">
103 <text>订单号：{{payId}}</text> 102 <text>订单号：{{payId}}</text>
104 </text> 103 </text>
105 <text class="order-info-time"> 104 <text class="order-info-time">
106 <text>下单时间：{{orderInfo.pay_time}}</text> 105 <text>下单时间：{{orderInfo.pay_time}}</text>
107 </text> 106 </text>
108 <view class="order-info-hr"></view> 107 <view class="order-info-hr"></view>
109 <view class="order-info-contact"> 108 <view class="order-info-contact">
110 <image src="../../static/myorder-paying-contact.png"></image> 109 <image src="../../static/myorder-paying-contact.png"></image>
111 <button open-type="contact">联系客服</button> 110 <button open-type="contact">联系客服</button>
112 </view> 111 </view>
113 </view> 112 </view>
114 </view> 113 </view>
115 <view 114 <view
116 class="order-confim" 115 class="order-confim"
117 v-if="status == '0'" 116 v-if="status == '0'"
118 > 117 >
119 <button 118 <button
120 class="b1" 119 class="b1"
121 @click="cancleOrder" 120 @click="cancleOrder"
122 >取消订单</button> 121 >取消订单</button>
123 <button 122 <button
124 class="b2" 123 class="b2"
125 @click="paylog" 124 @click="paylog"
126 >立即支付</button> 125 >立即支付</button>
127 </view> 126 </view>
128 127
129 <view 128 <view
130 class="order-confim" 129 class="order-confim"
131 v-if="status == '1'" 130 v-if="status == '1'"
132 > 131 >
133 <!-- <button class="b1">取消订单</button> --> 132 <!-- <button class="b1">取消订单</button> -->
134 <button 133 <button
135 class="b2" 134 class="b2"
136 @click="confirmOrder" 135 @click="confirmOrder"
137 >确认收货</button> 136 >确认收货</button>
138 </view> 137 </view>
139 <view 138 <view
140 class="order-confim" 139 class="order-confim"
141 v-if="status == '2'" 140 v-if="status == '2'"
142 > 141 >
143 <button 142 <button
144 class="b2" 143 class="b2"
145 @click="toDetail" 144 @click="toDetail"
146 >再次购买</button> 145 >再次购买</button>
147 </view> 146 </view>
148 147
149 </view> 148 </view>
150 </template> 149 </template>
151 150
152 <script> 151 <script>
153 import store from '@/store' 152 import store from '@/store'
154 import MD5Util from '../../utils/md5' 153 import MD5Util from '../../utils/md5'
155 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 154 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
156 export default { 155 export default {
157 components: { 156 components: {
158 UniCountdown, 157 UniCountdown,
159 }, 158 },
160 data() { 159 data() {
161 return { 160 return {
162 payId: '', 161 payId: '',
163 payTime: '', 162 payTime: '',
164 status: '', // status 0 待付款 1 已发货 163 status: '', // status 0 待付款 1 已发货
165 uid: '', 164 uid: '',
166 openid: '', 165 openid: '',
167 lefttime: 0, 166 lefttime: 0,
168 isPay: 0, 167 isPay: 0,
169 totalPrice: 0, 168 totalPrice: 0,
169 index: 0,
170 } 170 }
171 }, 171 },
172 async onLoad ({ payId, status, isPay }) { 172 async onLoad ({ payId, status, isPay }) {
173 this.payId = payId 173 this.payId = payId
174 this.status = status 174 this.status = status
175 this.isPay = isPay 175 this.isPay = isPay
176 // console.log('++++++++++++++++++',this.status) 176 // console.log('++++++++++++++++++',this.status)
177 const openid = uni.getStorageSync('openid') 177 const openid = uni.getStorageSync('openid')
178 const uid = this.$store.state.user.userInfo.uid 178 const uid = this.$store.state.user.userInfo.uid
179 this.uid = uid 179 this.uid = uid
180 this.openid = openid 180 this.openid = openid
181 await store.dispatch('orderRead/getOrderInfo', { 181 await store.dispatch('orderRead/getOrderInfo', {
182 pay_id: this.payId, 182 pay_id: this.payId,
183 uid: uid, 183 uid: uid,
184 openid: openid, 184 openid: openid,
185 }) 185 })
186 const { list } = this.orderInfo.order_info 186 const { list } = this.orderInfo.order_info
187 for (let index = 0; index < list.length; index++) { 187 for (let index = 0; index < list.length; index++) {
188 await store.dispatch('orderRead/goodDetails', { 188 await store.dispatch('orderRead/goodDetails', {
189 pid: list[index].pid, 189 pid: list[index].pid,
190 skId: list[index].sk_id, 190 skId: list[index].sk_id,
191 }) 191 })
192 } 192 }
193 this.totalPrice = this.orderInfo.total_fee 193 this.totalPrice = this.orderInfo.total_fee
194 }, 194 },
195 // 若从支付页面跳转过来，返回直接返回到首页 195 // 若从支付页面跳转过来，返回直接返回到首页
196 onBackPress(option) { 196 onBackPress(option) {
197 if (option.from === 'backbutton' && this.isPay) { 197 if (option.from === 'backbutton' && this.isPay) {
198 uni.switchTab({ 198 uni.switchTab({
199 url: '/pages/index/index', 199 url: '/pages/index/index',
200 }) 200 })
201 return true // 阻止默认返回行为 201 return true // 阻止默认返回行为
202 } 202 }
203 }, 203 },
204 computed: { 204 computed: {
205 // 规格列表 205 // 规格列表
206 skuList () { 206 skuList () {
207 return this.$store.state.orderRead.skuList 207 return this.$store.state.orderRead.skuList
208 }, 208 },
209 orderInfo() { 209 orderInfo() {
210 return this.$store.state.orderRead.orderInfo 210 return this.$store.state.orderRead.orderInfo
211 }, 211 },
212 orderInfoList () { 212 orderInfoList () {
213 return this.orderInfo.order_info ? this.orderInfo.order_info.list : null 213 return this.orderInfo.order_info ? this.orderInfo.order_info.list : null
214 }, 214 },
215 // 获取订单地址信息 215 // 获取订单地址信息
216 orderAddressInfo () { 216 orderAddressInfo () {
217 return this.orderInfo.order_info ? this.orderInfo.order_info.address : null 217 return this.orderInfo.order_info ? this.orderInfo.order_info.address : null
218 }, 218 },
219 // 订单付款时间 219 // 订单付款时间
220 getLeftTime () { 220 getLeftTime () {
221 return this.orderInfo.order_info ? this.orderInfo.order_info.lefttime : 1800 221 return this.orderInfo.order_info ? this.orderInfo.order_info.lefttime : 1800
222 }, 222 },
223 // 计算总优惠额 223 // 计算总优惠额
224 totalDiscount() { 224 totalDiscount() {
225 const discountInfoList = this.orderInfo.discount_info 225 const discountInfoList = this.orderInfo.discount_info
226 let totalDiscount = 0 226 let totalDiscount = 0
227 if (discountInfoList) { 227 if (discountInfoList) {
228 discountInfoList.map((discountItem, index) => { 228 discountInfoList.map((discountItem, index) => {
229 totalDiscount += Number(discountItem.value) 229 totalDiscount += Number(discountItem.value)
230 }) 230 })
231 } 231 }
232 // console.log(totalDiscount) 232 // console.log(totalDiscount)
233 return totalDiscount 233 return totalDiscount
234 }, 234 },
235 }, 235 },
236 236
237 methods: { 237 methods: {
238 // 再次购买 暂时只支持跳转第一个商品 238 // 再次购买 暂时只支持跳转第一个商品
239 toDetail() { 239 toDetail() {
240 const pid = this.orderInfo.order_info.list[0].pid 240 const pid = this.orderInfo.order_info.list[0].pid
241 uni.navigateTo({ 241 uni.navigateTo({
242 url: '../details/details?pid=' + pid, 242 url: '../details/details?pid=' + pid,
243 fail: (res) => { console.log(res) }, 243 fail: (res) => { console.log(res) },
244 }) 244 })
245 }, 245 },
246 // 取消订单 246 // 取消订单
247 timeup() { 247 timeup() {
248 this.cancleOrder() 248 this.cancleOrder()
249 }, 249 },
250 cancleOrder() { 250 cancleOrder() {
251 console.log('dddd', this.skuList) 251 console.log('dddd', this.skuList)
252 // const uid = this.uid 252 // const uid = this.uid
253 // const openid = this.openid 253 // const openid = this.openid
254 // const keyname = this.orderInfo.order_info.keyname 254 // const keyname = this.orderInfo.order_info.keyname
255 // // console.log('keyname',this.orderInfo.keyname) 255 // // console.log('keyname',this.orderInfo.keyname)
256 // uni.showModal({ 256 // uni.showModal({
257 // title: '提示', 257 // title: '提示',
258 // content: '现在取消，订单不可恢复哦，确认取消吗？', 258 // content: '现在取消，订单不可恢复哦，确认取消吗？',
259 // success: function(res) { 259 // success: function(res) {
260 // if (res.confirm) { 260 // if (res.confirm) {
261 // store.dispatch('cancelOrder/cancel', { 261 // store.dispatch('cancelOrder/cancel', {
262 // keyname: keyname, 262 // keyname: keyname,
263 // uid: uid, 263 // uid: uid,
264 // openid: openid, 264 // openid: openid,
265 // }) 265 // })
266 // uni.navigateBack({ 266 // uni.navigateBack({
267 // delta: 1, 267 // delta: 1,
268 // }) 268 // })
269 // } else if (res.cancel) { 269 // } else if (res.cancel) {
270 // console.log('用户点击取消') 270 // console.log('用户点击取消')
271 // } 271 // }
272 // }, 272 // },
273 // }) 273 // })
274 }, 274 },
275 paylog() { 275 paylog() {
276 console.log('pay', this.orderInfo) 276 console.log('pay', this.orderInfo)
277 const { data, exKeyName: keyName } = this.orderInfo 277 const { data, exKeyName: keyName } = this.orderInfo
278 const uid = uni.getStorageSync('uid') 278 const uid = uni.getStorageSync('uid')
279 const timeStamp = new Date().getTime().toString() 279 const timeStamp = new Date().getTime().toString()
280 const nonceStr = 'asfafasfasfasfasf' 280 const nonceStr = 'asfafasfasfasfasf'
281 // 支付参数 281 // 支付参数
282 const fieldSet = { 282 const fieldSet = {
283 openid: this.$store.state.user.userInfo.openid, 283 openid: this.$store.state.user.userInfo.openid,
284 uid: this.$store.state.user.userInfo.uid, 284 uid: this.$store.state.user.userInfo.uid,
285 shopid: 0, 285 shopid: 0,
286 payCate: 2020, 286 payCate: 2020,
287 payMoney: this.totalPrice, 287 payMoney: this.totalPrice,
288 payWoodId: `fcdj-${uid}-${keyName}`, 288 payWoodId: `fcdj-${uid}-${keyName}`,
289 payWoodDesc: '在【非常戴镜】的微信付款凭证', 289 payWoodDesc: '在【非常戴镜】的微信付款凭证',
290 nonceStr, 290 nonceStr,
291 signType: 'MD5', 291 signType: 'MD5',
292 app_uid: 2020, 292 app_uid: 2020,
293 timeStamp, 293 timeStamp,
294 keyname: keyName, 294 keyname: keyName,
295 billInfo: JSON.stringify(data), 295 billInfo: JSON.stringify(data),
296 } 296 }
297 // 请求后台支付接口 297 // 请求后台支付接口
298 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 298 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
299 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 299 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
300 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 300 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
301 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 301 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
302 302
303 // 微信支付接口 303 // 微信支付接口
304 uni.requestPayment({ 304 uni.requestPayment({
305 appId: data.appid, 305 appId: data.appid,
306 timeStamp, 306 timeStamp,
307 nonceStr, 307 nonceStr,
308 total_fee: this.totalPrice, 308 total_fee: this.totalPrice,
309 package: `prepay_id=${data.prepay_id}`, 309 package: `prepay_id=${data.prepay_id}`,
310 signType: 'MD5', 310 signType: 'MD5',
311 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 311 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
312 success: (res) => { 312 success: (res) => {
313 // 支付成功 313 // 支付成功
314 uni.showModal({ 314 uni.showModal({
315 content: '支付成功', 315 content: '支付成功',
316 showCancel: false, 316 showCancel: false,
317 }) 317 })
318 // 跳转订单详情页->状态 待收货 318 // 跳转订单详情页->状态 待收货
319 uni.reLaunch({ 319 uni.reLaunch({
320 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 320 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
321 }) 321 })
322 }, 322 },
323 fail: (res) => { 323 fail: (res) => {
324 // 支付失败 324 // 支付失败
325 uni.showModal({ 325 uni.showModal({
326 content: '支付失败', 326 content: '支付失败',
327 showCancel: false, 327 showCancel: false,
328 }) 328 })
329 // 跳转订单详情页->刷新本页面 329 // 跳转订单详情页->刷新本页面
330 // uni.redirectTo({ 330 // uni.redirectTo({
331 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 331 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
332 // }) 332 // })
333 }, 333 },
334 complete: () => { 334 complete: () => {
335 uni.hideLoading() 335 uni.hideLoading()
336 }, 336 },
337 }) 337 })
338 } else { 338 } else {
339 uni.showModal({ 339 uni.showModal({
340 content: '支付失败', 340 content: '支付失败',
341 showCancel: false, 341 showCancel: false,
342 }) 342 })
343 console.log('支付失败') 343 console.log('支付失败')
344 uni.hideLoading() 344 uni.hideLoading()
345 // uni.redirectTo({ 345 // uni.redirectTo({
346 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 346 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
347 // }) 347 // })
348 } 348 }
349 }) 349 })
350 350
351 // 修改订单状态 待付款==>待收货 351 // 修改订单状态 待付款==>待收货
352 store.dispatch('statusConfirm/confirm', { 352 store.dispatch('statusConfirm/confirm', {
353 uid: this.uid, 353 uid: this.uid,
354 openid: this.openid, 354 openid: this.openid,
355 oldway: '0', 355 oldway: '0',
356 way: '1', 356 way: '1',
357 pay_id: this.payId, 357 pay_id: this.payId,
358 judgeContent: '', 358 judgeContent: '',
359 orderInfo: this.orderInfo.order_info, 359 orderInfo: this.orderInfo.order_info,
360 }) 360 })
361 .then( 361 .then(
362 // setTimeout(() => { 362 // setTimeout(() => {
363 // uni.navigateBack(); 363 // uni.navigateBack();
364 // }, 1500) 364 // }, 1500)
365 ) 365 )
366 }, 366 },
367 confirmOrder() { 367 confirmOrder() {
368 // 确认收货 way1 ==>way2 368 // 确认收货 way1 ==>way2
369 store 369 store
370 .dispatch('statusConfirm/confirm', { 370 .dispatch('statusConfirm/confirm', {
371 uid: this.uid, 371 uid: this.uid,
372 openid: this.openid, 372 openid: this.openid,
373 oldway: '1', 373 oldway: '1',
374 way: '2', 374 way: '2',
375 pay_id: this.payId, 375 pay_id: this.payId,
376 judgeContent: '', 376 judgeContent: '',
377 orderInfo: this.orderInfo.order_info, 377 orderInfo: this.orderInfo.order_info,
378 }) 378 })
379 .then((res) => { 379 .then((res) => {
380 if (res.data.code === 1) { 380 if (res.data.code === 1) {
381 uni.showToast({ 381 uni.showToast({
382 title: '已确认', 382 title: '已确认',
383 mask: true, 383 mask: true,
384 duration: 1500, 384 duration: 1500,
385 icon: 'success', 385 icon: 'success',
386 }) 386 })
387 } else { 387 } else {
388 uni.showToast({ 388 uni.showToast({
389 title: '服务器错误，确认失败!', 389 title: '服务器错误，确认失败!',
390 mask: true, 390 mask: true,
391 }) 391 })
392 } 392 }
393 setTimeout(() => { 393 setTimeout(() => {
394 uni.navigateBack() 394 uni.navigateBack()
395 }, 1500) 395 }, 1500)
396 }) 396 })
397 }, 397 },
398 }, 398 },
399 // filters: { 399 // filters: {
400 // timerChange: function(value) { 400 // timerChange: function(value) {
401 // var newDate = new Date() 401 // var newDate = new Date()
402 // newDate.setTime(value * 1000) 402 // newDate.setTime(value * 1000)
403 // return newDate.toLocaleString() 403 // return newDate.toLocaleString()
404 // }, 404 // },
405 // }, 405 // },
406 } 406 }
407 </script> 407 </script>
408 408
409 <style lang="scss" scoped> 409 <style lang="scss" scoped>
410 .content { 410 .content {
411 min-height: 100vh; 411 min-height: 100vh;
412 display: flex; 412 display: flex;
413 flex-direction: column; 413 flex-direction: column;
414 justify-content: flex-start; 414 justify-content: flex-start;
415 align-items: center; 415 align-items: center;
416 background-color: #f2f2f2; 416 background-color: #f2f2f2;
417 } 417 }
418 418
419 .order { 419 .order {
420 margin-bottom: 112rpx; 420 margin-bottom: 112rpx;
421 background: #f2f2f2; 421 background: #f2f2f2;
422 margin-top: 140rpx; 422 margin-top: 140rpx;
423 width: 670rpx; 423 width: 670rpx;
424 } 424 }
425 425
426 .order-time { 426 .order-time {
427 width: 100%; 427 width: 100%;
428 height: 140rpx; 428 height: 140rpx;
429 background-color: #fff; 429 background-color: #fff;
430 display: flex; 430 display: flex;
431 justify-content: center; 431 justify-content: center;
432 align-items: center; 432 align-items: center;
433 position: fixed; 433 position: fixed;
434 top: 0; 434 top: 0;
435 left: 0; 435 left: 0;
436 text { 436 text {
437 // font-family: PingFangSC-Regular; 437 // font-family: PingFangSC-Regular;
438 // margin-top: 48rpx; 438 // margin-top: 48rpx;
439 font-size: 14px; 439 font-size: 14px;
440 color: #333333; 440 color: #333333;
441 letter-spacing: -0.26px; 441 letter-spacing: -0.26px;
442 } 442 }
443 .p2 { 443 .p2 {
444 // font-family: DINAlternate-Bold; 444 // font-family: DINAlternate-Bold;
445 margin: 42rpx 20rpx 0 20rpx; 445 margin: 42rpx 20rpx 0 20rpx;
446 font-size: 18px; 446 font-size: 18px;
447 color: #ec5d3b; 447 color: #ec5d3b;
448 letter-spacing: -0.34px; 448 letter-spacing: -0.34px;
449 } 449 }
450 } 450 }
451 .headerBanner { 451 .headerBanner {
452 width: 100%; 452 width: 100%;
453 height: 140rpx; 453 height: 140rpx;
454 background: #4a90e2; 454 background: #4a90e2;
455 padding: 26rpx 60rpx 24rpx 60rpx; 455 padding: 26rpx 60rpx 24rpx 60rpx;
456 box-sizing: border-box; 456 box-sizing: border-box;
457 color: #ffffff; 457 color: #ffffff;
458 display: flex; 458 display: flex;
459 justify-content: space-between; 459 justify-content: space-between;
460 align-items: center; 460 align-items: center;
461 position: fixed; 461 position: fixed;
462 top: 0; 462 top: 0;
463 left: 0; 463 left: 0;
464 .bannerLeft { 464 .bannerLeft {
465 font-size: 36rpx; 465 font-size: 36rpx;
466 display: flex; 466 display: flex;
467 flex-direction: column; 467 flex-direction: column;
468 justify-content: center; 468 justify-content: center;
469 align-items: center; 469 align-items: center;
470 .T2 { 470 .T2 {
471 font-size: 24rpx; 471 font-size: 24rpx;
472 } 472 }
473 } 473 }
474 image { 474 image {
475 height: 56rpx; 475 height: 56rpx;
476 width: 72rpx; 476 width: 72rpx;
477 } 477 }
478 } 478 }
479 479
480 .order-user { 480 .order-user {
481 height: 228rpx; 481 height: 228rpx;
482 background: #ffffff; 482 background: #ffffff;
483 border-radius: 14rpx; 483 border-radius: 14rpx;
484 margin: 0 auto; 484 margin: 0 auto;
485 margin-top: 20rpx; 485 margin-top: 20rpx;
486 margin-bottom: 20rpx; 486 margin-bottom: 20rpx;
487 .order-user-head { 487 .order-user-head {
488 display: flex; 488 display: flex;
489 height: 108rpx; 489 height: 108rpx;
490 align-items: center; 490 align-items: center;
491 margin-left: 126rpx; 491 margin-left: 126rpx;
492 .p1 { 492 .p1 {
493 // font-family: PingFangSC-Regular; 493 // font-family: PingFangSC-Regular;
494 font-size: 14px; 494 font-size: 14px;
495 color: #333333; 495 color: #333333;
496 letter-spacing: -0.26px; 496 letter-spacing: -0.26px;
497 margin-right: 20rpx; 497 margin-right: 20rpx;
498 } 498 }
499 .p2 { 499 .p2 {
500 // font-family: PingFangSC-Regular; 500 // font-family: PingFangSC-Regular;
501 font-size: 14px; 501 font-size: 14px;
502 color: #999999; 502 color: #999999;
503 letter-spacing: -0.26px; 503 letter-spacing: -0.26px;
504 } 504 }
505 } 505 }
506 .order-user-body { 506 .order-user-body {
507 display: flex; 507 display: flex;
508 width: 100%; 508 width: 100%;
509 image { 509 image {
510 width: 24px; 510 width: 24px;
511 height: 26px; 511 height: 26px;
512 margin: 12rpx 32rpx 0 40rpx; 512 margin: 12rpx 32rpx 0 40rpx;
513 } 513 }
514 .p3 { 514 .p3 {
515 // font-family: PingFangSC-Semibold; 515 // font-family: PingFangSC-Semibold;
516 font-size: 14px; 516 font-size: 14px;
517 color: #333333; 517 color: #333333;
518 letter-spacing: -0.26px; 518 letter-spacing: -0.26px;
519 line-height: 70rpx; 519 line-height: 70rpx;
520 } 520 }
521 } 521 }
522 } 522 }
523 523
524 .order-info { 524 .order-info {
525 background-color: #fff; 525 background-color: #fff;
526 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 526 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
527 border-radius: 16rpx; 527 border-radius: 16rpx;
528 margin: 0 auto; 528 margin: 0 auto;
529 view { 529 view {
530 margin-left: 40rpx; 530 margin-left: 40rpx;
531 } 531 }
532 text { 532 text {
533 font-size: 14px; 533 font-size: 14px;
534 } 534 }
535 .order-info-head { 535 .order-info-head {
536 display: flex; 536 display: flex;
537 padding-top: 40rpx; 537 padding-top: 40rpx;
538 image { 538 image {
539 height: 188rpx; 539 height: 188rpx;
540 width: 188rpx; 540 width: 188rpx;
541 } 541 }
542 .order-info-head-r { 542 .order-info-head-r {
543 margin: 0; 543 margin: 0;
544 width: 368rpx; 544 width: 368rpx;
545 margin-left: 24rpx; 545 margin-left: 24rpx;
546 // margin-top: 40rpx; 546 // margin-top: 40rpx;
547 text { 547 text {
548 display: block; 548 display: block;
549 } 549 }
550 // .arrow{ 550 // .arrow{
551 // width: 0; 551 // width: 0;
552 // height: 0; 552 // height: 0;
553 // border-left: 5px transparent; 553 // border-left: 5px transparent;
554 // border-right: 5px transparent; 554 // border-right: 5px transparent;
555 // border-top: 5px #979797; 555 // border-top: 5px #979797;
556 // border-bottom: 0 transparent; 556 // border-bottom: 0 transparent;
557 // border-style: solid; 557 // border-style: solid;
558 // position: relative; 558 // position: relative;
559 // // transform: scaleY(-1); 559 // // transform: scaleY(-1);
560 // } 560 // }
561 // .arrow::after{ 561 // .arrow::after{
562 // content: ''; 562 // content: '';
563 // position: absolute; 563 // position: absolute;
564 // top: -6.5px; 564 // top: -6.5px;
565 // left: -5px; 565 // left: -5px;
566 // border-left: 5px transparent; 566 // border-left: 5px transparent;
567 // border-right: 5px transparent; 567 // border-right: 5px transparent;
568 // border-top: 5px #FFFFFF; 568 // border-top: 5px #FFFFFF;
569 // border-bottom: 0 transparent; 569 // border-bottom: 0 transparent;
570 // border-style: solid; 570 // border-style: solid;
571 // } 571 // }
572 .p1 { 572 .p1 {
573 min-height: 40px; 573 min-height: 40px;
574 // font-family: PingFangSC-Regular; 574 // font-family: PingFangSC-Regular;
575 font-size: 14px; 575 font-size: 14px;
576 color: #333333; 576 color: #333333;
577 letter-spacing: -0.26px; 577 letter-spacing: -0.26px;
578 line-height: 18px; 578 line-height: 18px;
579 // line-height: 20px; 579 // line-height: 20px;
580 } 580 }
581 .p2 { 581 .p2 {
582 height: 34px; 582 height: 34px;
583 padding: 1px 0 3px 0; 583 padding: 1px 0 3px 0;
584 // font-family: PingFangSC-Regular; 584 // font-family: PingFangSC-Regular;
585 font-size: 12px; 585 font-size: 12px;
586 color: #999999; 586 color: #999999;
587 letter-spacing: -0.23px; 587 letter-spacing: -0.23px;
588 } 588 }
589 .infoText-bottom { 589 .infoText-bottom {
590 display: flex; 590 display: flex;
591 flex-direction: row; 591 flex-direction: row;
592 justify-content: flex-start; 592 justify-content: flex-start;
593 align-items: center; 593 align-items: center;
594 width: 100%; 594 width: 100%;
595 margin-left: 0; 595 margin-left: 0;
596 .markPrice { 596 .markPrice {
597 font-size: 14px; 597 font-size: 14px;
598 color: #ff6b4a; 598 color: #ff6b4a;
599 margin-right: 20rpx; 599 margin-right: 20rpx;
600 margin-left: 0rpx; 600 margin-left: 0rpx;
601 } 601 }
602 .buy-num { 602 .buy-num {
603 font-size: 12px; 603 font-size: 12px;
604 color: #999999; 604 color: #999999;
605 margin-left: 0; 605 margin-left: 0;
606 } 606 }
607 } 607 }
608 } 608 }
609 } 609 }
610 // .order-info-goodsnum { 610 // .order-info-goodsnum {
611 // display: flex; 611 // display: flex;
612 // align-items: center; 612 // align-items: center;
613 // justify-content: flex-end; 613 // justify-content: flex-end;
614 // text { 614 // text {
615 // margin-right: 44rpx; 615 // margin-right: 44rpx;
616 // // ont-family: PingFangSC-Regular; 616 // // ont-family: PingFangSC-Regular;
617 // font-size: 12px; 617 // font-size: 12px;
618 // color: #999999; 618 // color: #999999;
619 // letter-spacing: -0.23px; 619 // letter-spacing: -0.23px;
620 // } 620 // }
621 // } 621 // }
622 .order-info-freight { 622 .order-info-freight {
623 display: block; 623 display: block;
624 margin-left: 40rpx; 624 margin-left: 40rpx;
625 margin-top: 22rpx; 625 margin-top: 22rpx;
626 .p1 { 626 .p1 {
627 // font-family: PingFangSC-Regular; 627 // font-family: PingFangSC-Regular;
628 font-size: 14px; 628 font-size: 14px;
629 color: #333333; 629 color: #333333;
630 letter-spacing: -0.26px; 630 letter-spacing: -0.26px;
631 line-height: 18px; 631 line-height: 18px;
632 margin-right: 24px; 632 margin-right: 24px;
633 } 633 }
634 .p2 { 634 .p2 {
635 // font-family: PingFangSC-Regular; 635 // font-family: PingFangSC-Regular;
636 font-size: 14px; 636 font-size: 14px;
637 color: #ff6b4a; 637 color: #ff6b4a;
638 letter-spacing: -0.26px; 638 letter-spacing: -0.26px;
639 } 639 }
640 } 640 }
641 .order-info-discount { 641 .order-info-discount {
642 display: block; 642 display: block;
643 margin-left: 40rpx; 643 margin-left: 40rpx;
644 margin-top: 24rpx; 644 margin-top: 24rpx;
645 .p1 { 645 .p1 {
646 // font-family: PingFangSC-Regular; 646 // font-family: PingFangSC-Regular;
647 font-size: 14px; 647 font-size: 14px;
648 color: #333333; 648 color: #333333;
649 letter-spacing: -0.26px; 649 letter-spacing: -0.26px;
650 line-height: 18px; 650 line-height: 18px;
651 margin-right: 24px; 651 margin-right: 24px;
652 } 652 }
653 .p2 { 653 .p2 {
654 // font-family: PingFangSC-Regular; 654 // font-family: PingFangSC-Regular;
655 font-size: 14px; 655 font-size: 14px;
656 color: #ff6b4a; 656 color: #ff6b4a;
657 letter-spacing: -0.26px; 657 letter-spacing: -0.26px;
658 } 658 }
659 } 659 }
660 .order-info-price { 660 .order-info-price {
661 display: block; 661 display: block;
662 margin-left: 40rpx; 662 margin-left: 40rpx;
663 margin-top: 24rpx; 663 margin-top: 24rpx;
664 .p1 { 664 .p1 {
665 // font-family: PingFangSC-Semibold; 665 // font-family: PingFangSC-Semibold;
666 font-size: 14px; 666 font-size: 14px;
667 color: #333333; 667 color: #333333;
668 letter-spacing: -0.26px; 668 letter-spacing: -0.26px;
669 line-height: 18px; 669 line-height: 18px;
670 margin-right: 24px; 670 margin-right: 24px;
671 } 671 }
672 .p2 { 672 .p2 {
673 // font-family: PingFangSC-Semibold; 673 // font-family: PingFangSC-Semibold;
674 font-size: 14px; 674 font-size: 14px;
675 color: #ff6b4a; 675 color: #ff6b4a;
676 letter-spacing: -0.26px; 676 letter-spacing: -0.26px;
677 } 677 }
678 } 678 }
679 .order-info-num { 679 .order-info-num {
680 display: block; 680 display: block;
681 margin-left: 40rpx; 681 margin-left: 40rpx;
682 margin-top: 44rpx; 682 margin-top: 44rpx;
683 text { 683 text {
684 // font-family: PingFangSC-Regular; 684 // font-family: PingFangSC-Regular;
685 font-size: 12px; 685 font-size: 12px;
686 color: #999999; 686 color: #999999;
687 letter-spacing: -0.23px; 687 letter-spacing: -0.23px;
688 } 688 }
689 } 689 }
690 .order-info-time { 690 .order-info-time {
691 display: block; 691 display: block;
692 margin: 8rpx 0 48rpx 40rpx; 692 margin: 8rpx 0 48rpx 40rpx;
693 text { 693 text {
694 // font-family: PingFangSC-Regular; 694 // font-family: PingFangSC-Regular;
695 font-size: 12px; 695 font-size: 12px;
696 color: #999999; 696 color: #999999;
697 letter-spacing: -0.23px; 697 letter-spacing: -0.23px;
698 } 698 }
699 } 699 }
700 .order-info-hr { 700 .order-info-hr {
701 width: 520rpx; 701 width: 520rpx;
702 height: 1px; 702 height: 1px;
703 background-color: #e9e9e9; 703 background-color: #e9e9e9;
704 margin-bottom: 20rpx; 704 margin-bottom: 20rpx;
705 } 705 }
706 .order-info-contact { 706 .order-info-contact {
707 display: flex; 707 display: flex;
708 padding-bottom: 28rpx; 708 padding-bottom: 28rpx;
709 image { 709 image {
710 width: 19px; 710 width: 19px;
711 height: 16px; 711 height: 16px;
712 } 712 }
713 button { 713 button {
714 // font-family: PingFangSC-Regular; 714 // font-family: PingFangSC-Regular;
715 border: none; 715 border: none;
716 border-radius: 0; 716 border-radius: 0;
717 text-align: left; 717 text-align: left;
718 margin-left: 20rpx; 718 margin-left: 20rpx;
719 font-size: 14px; 719 font-size: 14px;
720 color: #333333; 720 color: #333333;
721 letter-spacing: -0.26px; 721 letter-spacing: -0.26px;
722 line-height: 18px; 722 line-height: 18px;
723 background-color: #fff; 723 background-color: #fff;
724 padding: 0; 724 padding: 0;
725 &::after { 725 &::after {
726 border: 0; 726 border: 0;
727 } 727 }
728 } 728 }
729 } 729 }
730 } 730 }
731 731
732 .order-confim { 732 .order-confim {
733 display: flex; 733 display: flex;
734 align-items: center; 734 align-items: center;
735 justify-content: flex-end; 735 justify-content: flex-end;
736 // z-index: 999; 736 // z-index: 999;
737 width: 100%; 737 width: 100%;
738 height: 112rpx; 738 height: 112rpx;
739 position: fixed; 739 position: fixed;
740 bottom: 0; 740 bottom: 0;
741 background: #ffffff; 741 background: #ffffff;
742 button { 742 button {
743 width: 204rpx; 743 width: 204rpx;
744 height: 80rpx; 744 height: 80rpx;
745 border: 1px solid #ff6b4a; 745 border: 1px solid #ff6b4a;
746 border-radius: 40rpx; 746 border-radius: 40rpx;
747 font-size: 32rpx; 747 font-size: 32rpx;
748 letter-spacing: -0.3px; 748 letter-spacing: -0.3px;
749 margin-right: 0; 749 margin-right: 0;
750 } 750 }
751 .b1 { 751 .b1 {
752 // font-family: PingFangSC-Regular; 752 // font-family: PingFangSC-Regular;
753 color: #ff6b4a; 753 color: #ff6b4a;
754 background-color: #ffffff; 754 background-color: #ffffff;
755 } 755 }
756 .b2 { 756 .b2 {
757 // font-family: PingFangSC-Regular; 757 // font-family: PingFangSC-Regular;
758 background-color: #ff6b4a; 758 background-color: #ff6b4a;
759 color: #ffffff; 759 color: #ffffff;
760 margin: 0 26rpx 0 20rpx; 760 margin: 0 26rpx 0 20rpx;
761 } 761 }
762 } 762 }
763 </style> 763 </style>