Adam / gulu-vue

Download as
Browse Code »

Commit a658edc461141f8c606ffb3fce2f4d57228ea521

Authored by BigBoss
1 parent 78ed60987a
Exists in master

。。

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