吉鹏 / gulu-vue

Compare View

switch
from
...
to
 
Commits (2)
Showing 2 changed files   Show diff stats
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @16749c9
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="addressInfo !== false ? 'list order-user' : 'list order-user user_address'" 24 :class="addressInfo !== false ? 'list order-user' : 'list order-user user_address'"
25 > 25 >
26 <view 26 <view
27 class="order-user-head" 27 class="order-user-head"
28 v-if="addressInfo != false" 28 v-if="addressInfo != false"
29 > 29 >
30 <view class="name"> 30 <view class="name">
31 <view 31 <view
32 v-if="addressInfo.default === '1'" 32 v-if="addressInfo.default === '1'"
33 class="default" 33 class="default"
34 > 34 >
35 <text>默认</text> 35 <text>默认</text>
36 </view> 36 </view>
37 {{addressInfo.name}} 37 {{addressInfo.name}}
38 </view> 38 </view>
39 <text class="mobile">{{addressInfo.mobile}}</text> 39 <text class="mobile">{{addressInfo.mobile}}</text>
40 </view> 40 </view>
41 <view 41 <view
42 class="order-user-body" 42 class="order-user-body"
43 v-if="addressInfo !== false" 43 v-if="addressInfo !== false"
44 > 44 >
45 <image src="../../static/myorder-paying-location.png"></image> 45 <image src="../../static/myorder-paying-location.png"></image>
46 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text> 46 <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
47 </view> 47 </view>
48 <view 48 <view
49 class="order_user_body_add" 49 class="order_user_body_add"
50 v-if="addressInfo == false" 50 v-if="addressInfo == false"
51 > 51 >
52 <image 52 <image
53 src="../../static/add_address.png" 53 src="../../static/add_address.png"
54 mode="aspectFill" 54 mode="aspectFill"
55 ></image> 55 ></image>
56 <text class="address_add">点击添加地址</text> 56 <text class="address_add">点击添加地址</text>
57 </view> 57 </view>
58 <image 58 <image
59 class="arrow" 59 class="arrow"
60 src="../../static/right.png" 60 src="../../static/right.png"
61 mode="aspectFill" 61 mode="aspectFill"
62 ></image> 62 ></image>
63 </view> 63 </view>
64 <view class="content"> 64 <view class="content">
65 <view class="orderInfo"> 65 <view class="orderInfo">
66 <view class="title"> 66 <view class="title">
67 <image 67 <image
68 src="../../static/store.png" 68 src="../../static/store.png"
69 mode="aspectFill" 69 mode="aspectFill"
70 style="width: 40rpx;height: 40rpx;" 70 style="width: 40rpx;height: 40rpx;"
71 ></image> 71 ></image>
72 <text>非常戴镜</text> 72 <text>非常戴镜</text>
73 </view> 73 </view>
74 <template v-if="isCart === 'true'"> 74 <template v-if="isCart === 'true'">
75 <view 75 <view
76 class="infoBox" 76 class="infoBox"
77 v-for="(item, index) in checkedCartLst" 77 v-for="(item, index) in checkedCartLst"
78 :key="index" 78 :key="index"
79 > 79 >
80 <view class="infoTop"> 80 <view class="infoTop">
81 <image 81 <image
82 :src="item.img_index_url" 82 :src="item.img_index_url"
83 mode="aspectFill" 83 mode="aspectFill"
84 ></image> 84 ></image>
85 <view class="infoRight"> 85 <view class="infoRight">
86 <text class="goodName">{{item.p_name}}</text> 86 <text class="goodName">{{item.p_name}}</text>
87 <text class="remarks">支持7天无理由退货 顺丰发货</text> 87 <text class="remarks">支持7天无理由退货 顺丰发货</text>
88 <view class="priceBox"> 88 <view class="priceBox">
89 <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost"> 89 <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost">
90 ¥{{item.oldPrice}} 90 ¥{{item.oldPrice}}
91 </text></view> 91 </text></view>
92 <view class="counter"> 92 <view class="counter">
93 <view 93 <view
94 class="btn" 94 class="btn"
95 disabled="this.disabled" 95 disabled="this.disabled"
96 type="default" 96 type="default"
97 @click="counter(false,index)" 97 @click="counter(false,index)"
98 >-</view> 98 >-</view>
99 <text>{{checkedCartLst[index].num}}</text> 99 <text>{{checkedCartLst[index].num}}</text>
100 <view 100 <view
101 class="btn" 101 class="btn"
102 type="default" 102 type="default"
103 @click="counter(true,index)" 103 @click="counter(true,index)"
104 >+</view> 104 >+</view>
105 </view> 105 </view>
106 </view> 106 </view>
107 </view> 107 </view>
108 </view> 108 </view>
109 <view class="infoBottom"> 109 <view class="infoBottom">
110 <view class="norm">规格 <text> 110 <view class="norm">规格 <text>
111 <!-- 长度超出变省略号未做 --> 111 <!-- 长度超出变省略号未做 -->
112 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block> 112 <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
113 </block> 113 </block>
114 </text></view> 114 </text></view>
115 <view class="shippingMethod">使用人 <text> 115 <view class="shippingMethod">使用人 <text>
116 {{item.peopleName}} 116 {{item.peopleName}}
117 </text></view> 117 </text></view>
118 <view class="shippingMethod">配送方式 <text>快递</text></view> 118 <view class="shippingMethod">配送方式 <text>快递</text></view>
119 <view class="message">买家留言 119 <view class="message">买家留言
120 <input 120 <input
121 type="text" 121 type="text"
122 :value="note" 122 :value="note"
123 placeholder="建议提前协商(50字以内)" 123 placeholder="建议提前协商(50字以内)"
124 /> 124 />
125 </view> 125 </view>
126 </view> 126 </view>
127 </view> 127 </view>
128 </template> 128 </template>
129 <template v-else> 129 <template v-else>
130 <view class="infoBox"> 130 <view class="infoBox">
131 <view class="infoTop"> 131 <view class="infoTop">
132 <image 132 <image
133 :src="buyItem.pic" 133 :src="buyItem.pic"
134 mode="aspectFill" 134 mode="aspectFill"
135 ></image> 135 ></image>
136 <view class="infoRight"> 136 <view class="infoRight">
137 <text class="goodName">{{goodInfo.p_name}}</text> 137 <text class="goodName">{{goodInfo.p_name}}</text>
138 <text class="remarks">支持7天无理由退货 顺丰发货</text> 138 <text class="remarks">支持7天无理由退货 顺丰发货</text>
139 <view class="priceBox"> 139 <view class="priceBox">
140 <view class="price">¥{{buyItem.real_price}}<text class="originCost"> 140 <view class="price">¥{{buyItem.real_price}}<text class="originCost">
141 ¥{{buyItem.out_price}} 141 ¥{{buyItem.out_price}}
142 </text></view> 142 </text></view>
143 <view class="counter"> 143 <view class="counter">
144 <view 144 <view
145 class="btn" 145 class="btn"
146 disabled="this.disabled" 146 disabled="this.disabled"
147 type="default" 147 type="default"
148 @click="counter(false)" 148 @click="counter(false)"
149 >-</view> 149 >-</view>
150 <text>{{count}}</text> 150 <text>{{count}}</text>
151 <view 151 <view
152 class="btn" 152 class="btn"
153 type="default" 153 type="default"
154 @click="counter(true)" 154 @click="counter(true)"
155 >+</view> 155 >+</view>
156 </view> 156 </view>
157 </view>
158 </view>
159 </view> 157 </view>
160 <view class="infoBottom"> 158 </view>
161 <view class="norm">规格 <text> 159 </view>
162 <!-- 长度超出变省略号未做 --> 160 <view class="infoBottom">
163 <block 161 <view class="norm">规格 <text>
164 v-for="(item, index) in current" 162 <!-- 长度超出变省略号未做 -->
165 :key="index" 163 <block
166 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> 164 v-for="(item, index) in current"
167 </block> 165 :key="index"
168 </text></view> 166 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
169 <view class="shippingMethod">使用人 <text> 167 </block>
170 {{name}} 168 </text></view>
171 </text></view> 169 <view class="shippingMethod">使用人 <text>
172 <view class="shippingMethod">配送方式 <text>快递</text></view> 170 {{name}}
173 <view class="message">买家留言 171 </text></view>
174 <input 172 <view class="shippingMethod">配送方式 <text>快递</text></view>
175 type="text" 173 <view class="message">买家留言
176 :value="note" 174 <input
177 placeholder="建议提前协商(50字以内)" 175 type="text"
178 /> 176 :value="note"
179 </view> 177 placeholder="建议提前协商(50字以内)"
180 </view> 178 />
181 </view> 179 </view>
182 </template> 180 </view>
183 181 </view>
184 </view> 182 </template>
183
185 <view class="payWay"> 184 </view>
186 <view class="item"> 185 <view class="payWay">
187 <text>支付方式</text> 186 <view class="item">
188 <view class="itemRight"> 187 <text>支付方式</text>
189 <view class="rightText"> 188 <view class="itemRight">
190 <view class="choosePayWay"> 189 <view class="rightText">
191 <image 190 <view class="choosePayWay">
192 src="../../static/chat_logo.png" 191 <image
193 mode="aspectFill" 192 src="../../static/chat_logo.png"
194 ></image> 193 mode="aspectFill"
195 <text>微信支付</text> 194 ></image>
196 </view> 195 <text>微信支付</text>
197 <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> 196 </view>
198 </view> 197 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
199 <!-- <image 198 </view>
200 src="../../static/right.png" 199 <!-- <image
201 mode="aspectFill" 200 src="../../static/right.png"
202 ></image> --> 201 mode="aspectFill"
203 </view> 202 ></image> -->
204 </view> 203 </view>
205 <!-- <view class="item"> 204 </view>
206 <text>优惠券</text> 205 <!-- <view class="item">
207 <view class="itemRight"> 206 <text>优惠券</text>
208 <view class="rightText"> 207 <view class="itemRight">
209 <view class="chooseOffers"> 208 <view class="rightText">
210 <text>-￥70.00</text> 209 <view class="chooseOffers">
211 </view> 210 <text>-￥70.00</text>
212 <view class="preferentialWay">最大优惠</view> 211 </view>
213 </view> 212 <view class="preferentialWay">最大优惠</view>
214 <image 213 </view>
215 src="../../static/right.png" 214 <image
216 mode="aspectFill" 215 src="../../static/right.png"
217 ></image> 216 mode="aspectFill"
218 </view> 217 ></image>
219 </view> --> 218 </view>
220 <view class="item"> 219 </view> -->
221 <text>运费</text> 220 <view class="item">
222 <view class="itemRight"> 221 <text>运费</text>
223 <view class="freight">免运费</view> 222 <view class="itemRight">
224 </view> 223 <view class="freight">免运费</view>
225 </view> 224 </view>
226 <view class="item"> 225 </view>
227 <text>合计</text> 226 <view class="item">
228 <view class="itemRight"> 227 <text>合计</text>
229 <view class="total">¥{{totalPrice}}</view> 228 <view class="itemRight">
230 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> --> 229 <view class="total">¥{{totalPrice}}</view>
231 </view> 230 <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
232 </view> 231 </view>
233 </view> 232 </view>
234 <!-- 233 </view>
235 <view class="checkBox"> 234 <!--
236 <checkbox-group> 235 <view class="checkBox">
237 <label> 236 <checkbox-group>
238 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 237 <label>
239 </label> 238 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
240 </checkbox-group> 239 </label>
241 </view> --> 240 </checkbox-group>
242 </view> 241 </view> -->
243 <view class="last_zhanwei"></view> 242 </view>
244 <view class="footer"> 243 <view class="last_zhanwei"></view>
245 <view class="footerLeft">实付金额: 244 <view class="footer">
246 <text>¥{{totalPrice}}</text> 245 <view class="footerLeft">实付金额:
247 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> --> 246 <text>¥{{totalPrice}}</text>
248 </view> 247 <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
249 <view class="footerRight"> 248 </view>
250 <view 249 <view class="footerRight">
251 class="paybtn" 250 <view
252 @tap="orderBuild" 251 class="paybtn"
253 >立即支付</view> 252 @tap="orderBuild"
254 </view> 253 >立即支付</view>
255 </view> 254 </view>
256 </view> 255 </view>
257 </template> 256 </view>
258 257 </template>
259 <script> 258
260 import store from '@/store' 259 <script>
261 import MD5Util from '../../utils/md5' 260 import store from '@/store'
262 261 import MD5Util from '../../utils/md5'
263 export default { 262
264 data() { 263 export default {
265 return { 264 data() {
266 name: String, 265 return {
267 addAddress: '添加收货地址', 266 name: String,
268 count: 1, 267 addAddress: '添加收货地址',
269 pid: 0, 268 count: 1,
270 disabled: false, 269 pid: 0,
271 freight: 0.0, 270 disabled: false,
272 showAddress: false, 271 freight: 0.0,
273 note: '', 272 showAddress: false,
274 addressInfo: { 273 note: '',
275 address: '', 274 addressInfo: {
276 }, 275 address: '',
277 isCart: Boolean, 276 },
278 // isAnonymous: 277 isCart: Boolean,
279 checkedCartLst: [], 278 // isAnonymous:
280 } 279 checkedCartLst: [],
281 }, 280 }
282 onShow(addressId) { 281 },
283 // console.log('+-+-*-*-+-+',addressId) 282 onShow(addressId) {
284 if (addressId) { 283 // console.log('+-+-*-*-+-+',addressId)
285 store 284 if (addressId) {
286 .dispatch('address/details', { 285 store
287 add_id: addressId, 286 .dispatch('address/details', {
288 }) 287 add_id: addressId,
289 .then(({ code, data }) => { 288 })
290 if (code === 1) { 289 .then(({ code, data }) => {
291 // console.log('code', code, data) 290 if (code === 1) {
292 this.showAddress = true 291 // console.log('code', code, data)
293 this.addressInfo = data 292 this.showAddress = true
294 } 293 this.addressInfo = data
295 }) 294 }
296 } 295 })
297 }, 296 }
298 onLoad({ pid, addressId, isCart, count, name }) { 297 },
299 if (isCart === 'false') { 298 onLoad({ pid, addressId, isCart, count, name }) {
300 this.pid = pid 299 if (isCart === 'false') {
301 // store.dispatch('read/fetch', { 300 this.pid = pid
302 // pid, 301 // store.dispatch('read/fetch', {
303 // }) 302 // pid,
304 } 303 // })
305 this.count = count 304 }
306 this.name = name 305 this.count = count
307 this.isCart = isCart 306 this.name = name
308 307 this.isCart = isCart
309 console.log('++++++++++++' + pid, addressId, isCart) 308
310 this.checkedCartLst = this.$store.state.cart.checkedCartLst 309 console.log('++++++++++++' + pid, addressId, isCart)
311 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst) 310 this.checkedCartLst = this.$store.state.cart.checkedCartLst
312 // 若已经选择地址 311 // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
313 if (addressId) { 312 // 若已经选择地址
314 store 313 if (addressId) {
315 .dispatch('address/details', { 314 store
316 add_id: addressId, 315 .dispatch('address/details', {
317 }) 316 add_id: addressId,
318 .then(({ code, data }) => { 317 })
319 if (code === 1) { 318 .then(({ code, data }) => {
320 // console.log('code', code, data) 319 if (code === 1) {
321 this.showAddress = true 320 // console.log('code', code, data)
322 this.addressInfo = data 321 this.showAddress = true
323 } 322 this.addressInfo = data
324 }) 323 }
325 } else { 324 })
326 store.dispatch('address/default').then(({ code, data }) => { 325 } else {
327 this.showAddress = true 326 store.dispatch('address/default').then(({ code, data }) => {
328 this.addressInfo = data 327 this.showAddress = true
329 console.log('this.addressInfo', this.addressInfo) 328 this.addressInfo = data
330 }) 329 console.log('this.addressInfo', this.addressInfo)
331 } 330 })
332 }, 331 }
333 computed: { 332 },
334 totalPrice() { 333 computed: {
335 if (this.isCart == 'true') { 334 totalPrice() {
336 let total = 0 335 if (this.isCart == 'true') {
337 this.$store.state.cart.checkedCartLst.map(item => { 336 let total = 0
338 total += item.nowPrice * item.num 337 this.$store.state.cart.checkedCartLst.map(item => {
339 }) 338 total += item.nowPrice * item.num
340 return total 339 })
341 } else { 340 return total
342 return this.buyItem.real_price * this.count 341 } else {
343 } 342 return this.buyItem.real_price * this.count
344 }, 343 }
345 buyItem() { 344 },
346 return this.$store.state.cart.buyItem 345 buyItem() {
347 }, 346 return this.$store.state.cart.buyItem
348 // checkedCartLst(){ 347 },
349 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) 348 // checkedCartLst(){
350 // return this.$store.state.cart.checkedCartLst 349 // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
351 // }, 350 // return this.$store.state.cart.checkedCartLst
352 goodInfo() { 351 // },
353 // console.log('state', this.$store.state.read.goodInfo) 352 goodInfo() {
354 return this.$store.state.read.goodInfo 353 // console.log('state', this.$store.state.read.goodInfo)
355 }, 354 return this.$store.state.read.goodInfo
356 skuInfo() { 355 },
357 return this.$store.state.order.param.sk_id_arr 356 skuInfo() {
358 }, 357 return this.$store.state.order.param.sk_id_arr
359 attrList() { 358 },
360 return this.$store.state.order.param.attrList 359 attrList() {
361 }, 360 return this.$store.state.order.param.attrList
362 current() { 361 },
363 return this.$store.state.order.param.current 362 current() {
364 }, 363 return this.$store.state.order.param.current
365 }, 364 },
366 methods: { 365 },
367 counter(isadd, index) { 366 methods: {
368 if (isadd) { 367 counter(isadd, index) {
369 if (this.isCart == 'true') { 368 if (isadd) {
370 this.checkedCartLst[index].num++ 369 if (this.isCart == 'true') {
371 } else { 370 this.checkedCartLst[index].num++
372 this.count++ 371 } else {
373 } 372 this.count++
374 } else { 373 }
375 if (this.isCart == 'true') { 374 } else {
376 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- 375 if (this.isCart == 'true') {
377 } else { 376 this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
378 this.count <= 1 ? (this.disabled = true) : this.count-- 377 } else {
379 } 378 this.count <= 1 ? (this.disabled = true) : this.count--
380 } 379 }
381 }, 380 }
382 // 跳转添加地址页面 381 },
383 toaddAddress() { 382 // 跳转添加地址页面
384 uni.navigateTo({ 383 toaddAddress() {
385 url: `../address/addressList?edit=${1}`, 384 uni.navigateTo({
386 success: res => {}, 385 url: `../address/addressList?edit=${1}`,
387 fail: error => { 386 success: res => {},
388 console.log('跳转到地址列表页面失败====>', error) 387 fail: error => {
389 }, 388 console.log('跳转到地址列表页面失败====>', error)
390 complete: () => {}, 389 },
391 }) 390 complete: () => {},
392 }, 391 })
393 // 下单 392 },
394 orderBuild() { 393 // 下单
395 if (!this.addressInfo) { 394 orderBuild() {
396 uni.showToast({ 395 if (!this.addressInfo) {
397 title: '请先添加地址', 396 uni.showToast({
398 icon: 'none', 397 title: '请先添加地址',
399 }) 398 icon: 'none',
400 return 399 })
401 } 400 return
402 uni.showLoading({ 401 }
403 title: '支付中', 402 uni.showLoading({
404 }) 403 title: '支付中',
405 if (this.isCart === 'true') { 404 })
406 const checkedGoods = [] 405 if (this.isCart === 'true') {
407 const sk_id_arr = [] 406 const checkedGoods = []
408 this.checkedCartLst.map(item => { 407 const sk_id_arr = []
409 checkedGoods.push(item.cart_id) 408 this.checkedCartLst.map(item => {
410 sk_id_arr.push(item.sk_id) 409 checkedGoods.push(item.cart_id)
411 }) 410 sk_id_arr.push(item.sk_id)
412 store.dispatch('order/build', { 411 })
413 uid: this.$store.state.user.userInfo.uid, 412 store.dispatch('order/build', {
414 address: JSON.stringify(this.addressInfo), 413 uid: this.$store.state.user.userInfo.uid,
415 checkedGoods: checkedGoods, 414 address: JSON.stringify(this.addressInfo),
416 sk_id_arr: sk_id_arr, 415 checkedGoods: checkedGoods,
417 totalPrice: this.totalPrice * 100, 416 sk_id_arr: sk_id_arr,
418 }).then((res) => { 417 totalPrice: this.totalPrice * 100,
419 this.pay(res) 418 }).then((res) => {
420 }) 419 this.pay(res)
421 } 420 })
422 if (this.isCart === 'false') { 421 }
423 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param 422 if (this.isCart === 'false') {
424 store.dispatch('order/buyNow', { 423 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
425 pid: skId.pid, 424 store.dispatch('order/buyNow', {
426 sk_id: skId.sk_id, 425 pid: skId.pid,
427 number: this.count, 426 sk_id: skId.sk_id,
428 mp_id: mpId, 427 number: this.count,
429 address: JSON.stringify(this.addressInfo), 428 mp_id: mpId,
430 totalPrice: this.totalPrice * 100, 429 address: JSON.stringify(this.addressInfo),
431 liuyan: this.note, 430 totalPrice: this.totalPrice * 100,
432 dir: 1, 431 liuyan: this.note,
433 }).then((res) => { 432 dir: 1,
434 this.pay(res) 433 }).then((res) => {
435 }) 434 this.pay(res)
436 } 435 })
437 }, 436 }
438 // 支付 437 },
439 pay(res) { 438 // 支付
440 console.log('pay', res) 439 pay(res) {
441 const { data, exKeyName: keyName } = res 440 console.log('pay', res)
442 const uid = uni.getStorageSync('uid') 441 const { data, exKeyName: keyName } = res
443 const timeStamp = new Date().getTime().toString() 442 const uid = uni.getStorageSync('uid')
444 const nonceStr = 'asfafasfasfasfasf' 443 const timeStamp = new Date().getTime().toString()
445 // 支付参数 444 const nonceStr = 'asfafasfasfasfasf'
446 const fieldSet = { 445 // 支付参数
447 openid: this.$store.state.user.userInfo.openid, 446 const fieldSet = {
448 uid: this.$store.state.user.userInfo.uid, 447 openid: this.$store.state.user.userInfo.openid,
449 shopid: 0, 448 uid: this.$store.state.user.userInfo.uid,
450 payCate: 2020, 449 shopid: 0,
451 payMoney: this.totalPrice * 100, 450 payCate: 2020,
452 payWoodId: `fcdj-${uid}-${keyName}`, 451 payMoney: this.totalPrice * 100,
453 payWoodDesc: '在【非常戴镜】的微信付款凭证', 452 payWoodId: `fcdj-${uid}-${keyName}`,
454 nonceStr, 453 payWoodDesc: '在【非常戴镜】的微信付款凭证',
455 signType: 'MD5', 454 nonceStr,
456 app_uid: 2020, 455 signType: 'MD5',
457 timeStamp, 456 app_uid: 2020,
458 keyname: keyName, 457 timeStamp,
459 billInfo: JSON.stringify({ 458 keyname: keyName,
460 address: this.addressInfo, 459 billInfo: JSON.stringify({
461 list: data, 460 address: this.addressInfo,
462 keyname: keyName, 461 list: data,
463 }), 462 keyname: keyName,
464 } 463 }),
465 console.log('fieldSet', fieldSet) 464 }
466 // 请求后台支付接口 465 console.log('fieldSet', fieldSet)
467 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 466 // 请求后台支付接口
468 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 467 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
469 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 468 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
470 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 469 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
471 470 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
472 // 微信支付接口 471
473 uni.requestPayment({ 472 // 微信支付接口
474 appId: data.appid, 473 uni.requestPayment({
475 timeStamp, 474 appId: data.appid,
476 nonceStr, 475 timeStamp,
477 total_fee: this.totalPrice, 476 nonceStr,
478 package: `prepay_id=${data.prepay_id}`, 477 total_fee: this.totalPrice,
479 signType: 'MD5', 478 package: `prepay_id=${data.prepay_id}`,
480 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 479 signType: 'MD5',
481 success: (res) => { 480 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
482 // 支付成功 481 success: (res) => {
483 uni.showModal({ 482 // 支付成功
484 content: '支付成功', 483 uni.showModal({
485 showCancel: false, 484 content: '支付成功',
486 }) 485 showCancel: false,
487 // 跳转订单详情页->状态 待收货 486 })
488 uni.reLaunch({ 487 // 跳转订单详情页->状态 待收货
489 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 488 uni.reLaunch({
490 }) 489 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
491 }, 490 })
492 fail: (res) => { 491 },
493 // 支付失败 492 fail: (res) => {
494 uni.showModal({ 493 // 支付失败
495 content: '支付失败', 494 uni.showModal({
496 showCancel: false, 495 content: '支付失败',
497 }) 496 showCancel: false,
498 // 跳转订单详情页->状态 待付款 497 })
499 uni.reLaunch({ 498 // 跳转订单详情页->状态 待付款
500 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 499 uni.reLaunch({
501 }) 500 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
502 }, 501 })
503 complete: () => { 502 },
504 uni.hideLoading() 503 complete: () => {
505 }, 504 uni.hideLoading()
506 }) 505 },
507 } else { 506 })
508 uni.showModal({ 507 } else {
509 content: '支付失败', 508 uni.showModal({
510 showCancel: false, 509 content: '支付失败',
511 }) 510 showCancel: false,
512 console.log('支付失败') 511 })
513 uni.hideLoading() 512 console.log('支付失败')
514 } 513 uni.hideLoading()
515 }) 514 }
516 }, 515 })
517 }, 516 },
518 } 517 },
519 </script> 518 }
520 519 </script>
521 <style lang="scss"> 520
522 .wrap { 521 <style lang="scss">
523 height: 100vh; 522 .wrap {
524 background-color: #f2f2f2; 523 height: 100vh;
525 font-family: PingFangSC-Regular; 524 background-color: #f2f2f2;
526 letter-spacing: -0.23px; 525 font-family: PingFangSC-Regular;
527 position: absolute; 526 letter-spacing: -0.23px;
528 } 527 position: absolute;
529 .addAddress { 528 }
530 background-color: #ffffff; 529 .addAddress {
531 box-sizing: border-box; 530 background-color: #ffffff;
532 height: 124rpx; 531 box-sizing: border-box;
533 width: 100%; 532 height: 124rpx;
534 display: flex; 533 width: 100%;
535 align-items: center; 534 display: flex;
536 padding: 0 40rpx; 535 align-items: center;
537 .addIcon { 536 padding: 0 40rpx;
538 background-color: #f2f2f2; 537 .addIcon {
539 height: 56rpx; 538 background-color: #f2f2f2;
540 width: 60rpx; 539 height: 56rpx;
541 border-radius: 4rpx; 540 width: 60rpx;
542 display: flex; 541 border-radius: 4rpx;
543 justify-content: center; 542 display: flex;
544 align-items: center; 543 justify-content: center;
545 margin-right: 40rpx; 544 align-items: center;
546 } 545 margin-right: 40rpx;
547 image { 546 }
548 height: 28rpx; 547 image {
549 width: 30rpx; 548 height: 28rpx;
550 } 549 width: 30rpx;
551 .addressText { 550 }
552 font-size: 28rpx; 551 .addressText {
553 color: #333333; 552 font-size: 28rpx;
554 margin-right: 364rpx; 553 color: #333333;
555 } 554 margin-right: 364rpx;
556 } 555 }
557 .content { 556 }
558 background-color: #f2f2f2; 557 .content {
559 width: 100%; 558 background-color: #f2f2f2;
560 display: flex; 559 width: 100%;
561 flex-direction: column; 560 display: flex;
562 justify-content: center; 561 flex-direction: column;
563 align-items: center; 562 justify-content: center;
564 padding: 40rpx; 563 align-items: center;
565 box-sizing: border-box; 564 padding: 40rpx;
566 .orderInfo { 565 box-sizing: border-box;
567 width: 670rpx; 566 .orderInfo {
568 min-height: 488rpx; 567 width: 670rpx;
569 background-color: #ffffff; 568 min-height: 488rpx;
570 border-radius: 20rpx; 569 background-color: #ffffff;
571 box-sizing: border-box; 570 border-radius: 20rpx;
572 padding: 0 40rpx 40rpx 40rpx; 571 box-sizing: border-box;
573 .title { 572 padding: 0 40rpx 40rpx 40rpx;
574 display: flex; 573 .title {
575 align-items: center; 574 display: flex;
576 font-size: 28rpx; 575 align-items: center;
577 color: #333333; 576 font-size: 28rpx;
578 height: 60rpx; 577 color: #333333;
579 line-height: 40rpx; 578 height: 60rpx;
580 padding: 10rpx 10rpx 10rpx 0rpx; 579 line-height: 40rpx;
581 image { 580 padding: 10rpx 10rpx 10rpx 0rpx;
582 margin-right: 20rpx; 581 image {
583 } 582 margin-right: 20rpx;
584 } 583 }
585 .infoBox { 584 }
586 margin-top: 42rpx; 585 .infoBox {
587 .infoTop { 586 margin-top: 42rpx;
588 display: flex; 587 .infoTop {
589 flex-direction: row; 588 display: flex;
590 image { 589 flex-direction: row;
591 height: 188rpx; 590 image {
592 width: 188rpx; 591 height: 188rpx;
593 margin-right: 24rpx; 592 width: 188rpx;
594 } 593 margin-right: 24rpx;
595 .infoRight { 594 }
596 width: 374rpx; 595 .infoRight {
597 display: flex; 596 width: 374rpx;
598 flex-direction: column; 597 display: flex;
599 align-items: flex-start; 598 flex-direction: column;
600 justify-content: space-between; 599 align-items: flex-start;
601 .goodName { 600 justify-content: space-between;
602 font-size: 28rpx; 601 .goodName {
603 color: #333333; 602 font-size: 28rpx;
604 } 603 color: #333333;
605 .remarks { 604 }
606 font-size: 20rpx; 605 .remarks {
607 color: #999999; 606 font-size: 20rpx;
608 } 607 color: #999999;
609 .priceBox { 608 }
610 display: flex; 609 .priceBox {
611 justify-content: space-between; 610 display: flex;
612 align-items: center; 611 justify-content: space-between;
613 width: 100%; 612 align-items: center;
614 .price { 613 width: 100%;
615 color: #ff6b4a; 614 .price {
616 font-size: 28rpx; 615 color: #ff6b4a;
617 text { 616 font-size: 28rpx;
618 margin-left: 10rpx; 617 text {
619 } 618 margin-left: 10rpx;
620 } 619 }
621 .originCost { 620 }
622 text-decoration: line-through; 621 .originCost {
623 color: #999999; 622 text-decoration: line-through;
624 font-size: 20rpx; 623 color: #999999;
625 } 624 font-size: 20rpx;
626 .counter { 625 }
627 display: flex; 626 .counter {
628 flex-direction: row; 627 display: flex;
629 justify-content: space-between; 628 flex-direction: row;
630 font-size: 28rpx; 629 justify-content: space-between;
631 color: #333333; 630 font-size: 28rpx;
632 width: 122rpx; 631 color: #333333;
633 .btn { 632 width: 122rpx;
634 display: flex; 633 .btn {
635 justify-content: center; 634 display: flex;
636 line-height: 32rpx; 635 justify-content: center;
637 height: 32rpx; 636 line-height: 32rpx;
638 width: 32rpx; 637 height: 32rpx;
639 background-color: #f2f2f2; 638 width: 32rpx;
640 color: #cfcfcf; 639 background-color: #f2f2f2;
641 } 640 color: #cfcfcf;
642 } 641 }
643 } 642 }
644 } 643 }
645 } 644 }
646 .infoBottom { 645 }
647 display: flex; 646 .infoBottom {
648 flex-direction: column; 647 display: flex;
649 justify-content: flex-start; 648 flex-direction: column;
650 font-size: 24rpx; 649 justify-content: flex-start;
651 color: #333333; 650 font-size: 24rpx;
652 text { 651 color: #333333;
653 color: #999999; 652 text {
654 margin-left: 20rpx; 653 color: #999999;
655 } 654 margin-left: 20rpx;
656 655 }
657 .norm { 656
658 margin-top: 28rpx; 657 .norm {
659 } 658 margin-top: 28rpx;
660 .shippingMethod { 659 }
661 margin-top: 12rpx; 660 .shippingMethod {
662 } 661 margin-top: 12rpx;
663 .message { 662 }
664 display: flex; 663 .message {
665 flex-direction: row; 664 display: flex;
666 align-items: center; 665 flex-direction: row;
667 margin-top: 18rpx; 666 align-items: center;
668 input { 667 margin-top: 18rpx;
669 margin-left: 20rpx; 668 input {
670 width: 75%; 669 margin-left: 20rpx;
671 } 670 width: 75%;
672 } 671 }
673 } 672 }
674 } 673 }
675 } 674 }
676 .payWay { 675 }
677 height: 464rpx; 676 .payWay {
678 width: 670rpx; 677 height: 464rpx;
679 background-color: #ffffff; 678 width: 670rpx;
680 color: #333333; 679 background-color: #ffffff;
681 font-size: 24rpx; 680 color: #333333;
682 border-radius: 20rpx; 681 font-size: 24rpx;
683 box-sizing: border-box; 682 border-radius: 20rpx;
684 padding: 0 52rpx 0rpx 40rpx; 683 box-sizing: border-box;
685 margin-top: 20rpx; 684 padding: 0 52rpx 0rpx 40rpx;
686 display: flex; 685 margin-top: 20rpx;
687 flex-direction: column; 686 display: flex;
688 justify-content: center; 687 flex-direction: column;
689 align-items: flex-start; 688 justify-content: center;
690 .item { 689 align-items: flex-start;
691 display: flex; 690 .item {
692 flex-direction: row; 691 display: flex;
693 justify-content: space-between; 692 flex-direction: row;
694 align-items: center; 693 justify-content: space-between;
695 width: 100%; 694 align-items: center;
696 height: 115rpx; 695 width: 100%;
697 .itemRight { 696 height: 115rpx;
698 display: flex; 697 .itemRight {
699 flex-direction: row; 698 display: flex;
700 justify-content: space-between; 699 flex-direction: row;
701 align-items: center; 700 justify-content: space-between;
702 image { 701 align-items: center;
703 height: 24rpx; 702 image {
704 width: 12rpx; 703 height: 24rpx;
705 } 704 width: 12rpx;
706 .rightText { 705 }
707 margin-right: 20rpx; 706 .rightText {
708 text-align: right; 707 margin-right: 20rpx;
709 .choosePayWay { 708 text-align: right;
710 display: flex; 709 .choosePayWay {
711 align-items: center; 710 display: flex;
712 text { 711 align-items: center;
713 color: #333333; 712 text {
714 } 713 color: #333333;
715 image { 714 }
716 height: 36rpx; 715 image {
717 width: 40rpx; 716 height: 36rpx;
718 margin-right: 8px; 717 width: 40rpx;
719 } 718 margin-right: 8px;
720 } 719 }
721 .randomSubstraction { 720 }
722 color: #ff6b4a; 721 .randomSubstraction {
723 } 722 color: #ff6b4a;
724 .preferentialWay { 723 }
725 color: #999999; 724 .preferentialWay {
726 } 725 color: #999999;
727 } 726 }
728 .freight, 727 }
729 .total { 728 .freight,
730 margin-right: 32rpx; 729 .total {
731 } 730 margin-right: 32rpx;
732 text { 731 }
733 color: #ff6b4a; 732 text {
734 } 733 color: #ff6b4a;
735 } 734 }
736 } 735 }
737 } 736 }
738 // .checkBox { 737 }
739 // height: 58rpx; 738 // .checkBox {
740 // line-height: 58rpx; 739 // height: 58rpx;
741 // width: 100%; 740 // line-height: 58rpx;
742 // margin-top: 36rpx; 741 // width: 100%;
743 // margin-left: 40rpx; 742 // margin-top: 36rpx;
744 // font-size: 12px; 743 // margin-left: 40rpx;
745 // color: #999999; 744 // font-size: 12px;
746 // } 745 // color: #999999;
747 } 746 // }
748 .footer { 747 }
749 height: 112rpx; 748 .footer {
750 width: 100%; 749 height: 112rpx;
751 background-color: #fff; 750 width: 100%;
752 font-size: 16px; 751 background-color: #fff;
753 display: flex; 752 font-size: 16px;
754 justify-content: space-between; 753 display: flex;
755 align-items: center; 754 justify-content: space-between;
756 position: fixed; 755 align-items: center;
757 bottom: 0; 756 position: fixed;
758 z-index: 9999; 757 bottom: 0;
759 .footerLeft { 758 z-index: 9999;
760 display: flex; 759 .footerLeft {
761 justify-content: center; 760 display: flex;
762 align-items: center; 761 justify-content: center;
763 width: 50%; 762 align-items: center;
764 color: #333333; 763 width: 50%;
765 text { 764 color: #333333;
766 color: #ff6b4a; 765 text {
767 } 766 color: #ff6b4a;
768 } 767 }
769 .footerRight { 768 }
770 display: flex; 769 .footerRight {
771 justify-content: flex-end; 770 display: flex;
772 align-items: center; 771 justify-content: flex-end;
773 width: 50%; 772 align-items: center;
774 margin-right: 26rpx; 773 width: 50%;
775 .paybtn { 774 margin-right: 26rpx;
776 display: flex; 775 .paybtn {
777 justify-content: center; 776 display: flex;
778 align-items: center; 777 justify-content: center;
779 background: #ff6b4a; 778 align-items: center;
780 border-radius: 20px; 779 background: #ff6b4a;
781 border-radius: 20px; 780 border-radius: 20px;
782 color: #ffffff; 781 border-radius: 20px;
783 width: 204rpx; 782 color: #ffffff;
784 height: 80rpx; 783 width: 204rpx;
785 } 784 height: 80rpx;
786 } 785 }
787 } 786 }
788 // 地址信息样式 787 }
789 .order-user { 788 // 地址信息样式
790 width: 670rpx; 789 .order-user {
791 height: 228rpx; 790 width: 670rpx;
792 background: #ffffff; 791 height: 228rpx;
793 border-radius: 14rpx; 792 background: #ffffff;
794 margin: 0 auto; 793 border-radius: 14rpx;
795 margin-top: 20rpx; 794 margin: 0 auto;
796 position: relative; 795 margin-top: 20rpx;
797 .order-user-head { 796 position: relative;
798 display: flex; 797 .order-user-head {
799 height: 108rpx; 798 display: flex;
800 width: 100%; 799 height: 108rpx;
801 align-items: center; 800 width: 100%;
802 padding-left: 126rpx; 801 align-items: center;
803 box-sizing: border-box; 802 padding-left: 126rpx;
804 .name { 803 box-sizing: border-box;
805 display: flex; 804 .name {
806 justify-content: space-between; 805 display: flex;
807 font-size: 14px; 806 justify-content: space-between;
808 color: #333333; 807 font-size: 14px;
809 letter-spacing: -0.26px; 808 color: #333333;
810 margin-right: 20rpx; 809 letter-spacing: -0.26px;
811 .default { 810 margin-right: 20rpx;
812 height: 40rpx; 811 .default {
813 width: 80rpx; 812 height: 40rpx;
814 background-color: #4a90e2; 813 width: 80rpx;
815 border-radius: 13px; 814 background-color: #4a90e2;
816 border-radius: 13px; 815 border-radius: 13px;
817 text-align: center; 816 border-radius: 13px;
818 margin-right: 20rpx; 817 text-align: center;
819 text { 818 margin-right: 20rpx;
820 display: flex; 819 text {
821 justify-content: center; 820 display: flex;
822 align-items: center; 821 justify-content: center;
823 font-size: 12px; 822 align-items: center;
824 color: #ffffff; 823 font-size: 12px;
825 letter-spacing: -0.23px; 824 color: #ffffff;
826 } 825 letter-spacing: -0.23px;
827 } 826 }
828 } 827 }
829 .mobile { 828 }
830 font-size: 14px; 829 .mobile {
831 color: #999999; 830 font-size: 14px;
832 letter-spacing: -0.26px; 831 color: #999999;
833 } 832 letter-spacing: -0.26px;
834 } 833 }
835 .order-user-body { 834 }
836 display: flex; 835 .order-user-body {
837 width: 100%; 836 display: flex;
838 image { 837 width: 100%;
839 width: 24px; 838 image {
840 height: 28px; 839 width: 24px;
841 margin: 12rpx 32rpx 0 40rpx; 840 height: 28px;
842 } 841 margin: 12rpx 32rpx 0 40rpx;
843 .address { 842 }
844 font-weight: bold; 843 .address {
845 font-size: 14px; 844 font-weight: bold;
846 color: #333333; 845 font-size: 14px;
847 letter-spacing: -0.26px; 846 color: #333333;
848 } 847 letter-spacing: -0.26px;
849 } 848 }
850 849 }
851 .arrow { 850
852 width: 12px; 851 .arrow {
853 height: 12px; 852 width: 12px;
854 position: absolute; 853 height: 12px;
855 right: 40rpx; 854 position: absolute;
856 bottom: 104rpx; 855 right: 40rpx;
857 } 856 bottom: 104rpx;
858 } 857 }
859 858 }
860 .user_address { 859
861 height: 62px; 860 .user_address {
862 .order_user_body_add { 861 height: 62px;
863 display: flex; 862 .order_user_body_add {
864 align-items: center; 863 display: flex;
865 image { 864 align-items: center;
866 background: #f2f2f2; 865 image {
867 border-radius: 2px; 866 background: #f2f2f2;
868 border-radius: 2px; 867 border-radius: 2px;
869 width: 30px; 868 border-radius: 2px;
870 height: 28px; 869 width: 30px;
871 margin: 0 20px; 870 height: 28px;
872 } 871 margin: 0 20px;
873 .address_add { 872 }
874 font-family: PingFangSC-Regular; 873 .address_add {
875 font-size: 14px; 874 font-family: PingFangSC-Regular;
876 color: #333333; 875 font-size: 14px;
877 letter-spacing: -0.26px; 876 color: #333333;
878 line-height: 62px; 877 letter-spacing: -0.26px;
879 } 878 line-height: 62px;
880 } 879 }
881 .arrow { 880 }
882 bottom: 46rpx; 881 .arrow {
883 } 882 bottom: 46rpx;
884 } 883 }
885 .last_zhanwei { 884 }
886 background: #f2f2f2; 885 .last_zhanwei {
887 height: 60px; 886 background: #f2f2f2;
888 } 887 height: 60px;
889 </style> 888 }
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @16749c9
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 <template v-if="orderInfoList.length === 1"> 72 <template v-if="orderInfoList.length === 1">
73 <view 73 <view
74 class="p2" 74 class="p2"
75 style="margin: 0;" 75 style="margin: 0;"
76 > 76 >
77 {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}} 77 {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}}
78 </view> 78 </view>
79 </template> 79 </template>
80 <view class="infoText-bottom"> 80 <view class="infoText-bottom">
81 <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view> 81 <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view>
82 <view class="buy-num">X {{orderInfoListItem.num}}</view> 82 <view class="buy-num">X {{orderInfoListItem.num}}</view>
83 </view> 83 </view>
84 </view> 84 </view>
85 </view> 85 </view>
86 <!-- <view class="order-info-goodsnum"> 86 <!-- <view class="order-info-goodsnum">
87 <text>X1</text> 87 <text>X1</text>
88 </view> --> 88 </view> -->
89 <text class="order-info-freight"> 89 <text class="order-info-freight">
90 <text class="p1">运费</text> 90 <text class="p1">运费</text>
91 <text class="p2">免运费</text> 91 <text class="p2">免运费</text>
92 </text> 92 </text>
93 <text class="order-info-discount"> 93 <text class="order-info-discount">
94 <text class="p1">优惠</text> 94 <text class="p1">优惠</text>
95 <text class="p2">-￥{{totalDiscount}}</text> 95 <text class="p2">-￥{{totalDiscount}}</text>
96 </text> 96 </text>
97 <text class="order-info-price"> 97 <text class="order-info-price">
98 <text class="p1">实付</text> 98 <text class="p1">实付</text>
99 <text class="p2">￥{{Number(totalPrice)/100}}</text> 99 <text class="p2">￥{{Number(totalPrice)/100}}</text>
100 </text> 100 </text>
101 <text class="order-info-num"> 101 <text class="order-info-num">
102 <text>订单号：{{payId}}</text> 102 <text>订单号：{{payId}}</text>
103 </text> 103 </text>
104 <text class="order-info-time"> 104 <text class="order-info-time">
105 <text>下单时间：{{orderInfo.pay_time}}</text> 105 <text>下单时间：{{orderInfo.pay_time}}</text>
106 </text> 106 </text>
107 <view class="order-info-hr"></view> 107 <view class="order-info-hr"></view>
108 <view class="order-info-contact"> 108 <view class="order-info-contact">
109 <image src="../../static/myorder-paying-contact.png"></image> 109 <image src="../../static/myorder-paying-contact.png"></image>
110 <button open-type="contact">联系客服</button> 110 <button open-type="contact">联系客服</button>
111 </view> 111 </view>
112 </view> 112 </view>
113 </view> 113 </view>
114 <view 114 <view
115 class="order-confim" 115 class="order-confim"
116 v-if="status == '0'" 116 v-if="status == '0'"
117 > 117 >
118 <button 118 <button
119 class="b1" 119 class="b1"
120 @click="cancleOrder" 120 @click="cancleOrder"
121 >取消订单</button> 121 >取消订单</button>
122 <button 122 <button
123 class="b2" 123 class="b2"
124 @click="paylog" 124 @click="paylog"
125 >立即支付</button> 125 >立即支付</button>
126 </view> 126 </view>
127 127
128 <view 128 <view
129 class="order-confim" 129 class="order-confim"
130 v-if="status == '1'" 130 v-if="status == '1'"
131 > 131 >
132 <!-- <button class="b1">取消订单</button> --> 132 <!-- <button class="b1">取消订单</button> -->
133 <button 133 <button
134 class="b2" 134 class="b2"
135 @click="confirmOrder" 135 @click="confirmOrder"
136 >确认收货</button> 136 >确认收货</button>
137 </view> 137 </view>
138 <view 138 <view
139 class="order-confim" 139 class="order-confim"
140 v-if="status == '2'" 140 v-if="status == '2'"
141 > 141 >
142 <button 142 <button
143 class="b2" 143 class="b2"
144 @click="toDetail" 144 @click="toDetail"
145 >再次购买</button> 145 >再次购买</button>
146 </view> 146 </view>
147 147
148 </view> 148 </view>
149 </template> 149 </template>
150 150
151 <script> 151 <script>
152 import store from '@/store' 152 import store from '@/store'
153 import MD5Util from '../../utils/md5' 153 import MD5Util from '../../utils/md5'
154 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' 154 import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
155 export default { 155 export default {
156 components: { 156 components: {
157 UniCountdown, 157 UniCountdown,
158 }, 158 },
159 data() { 159 data() {
160 return { 160 return {
161 payId: '', 161 payId: '',
162 payTime: '', 162 payTime: '',
163 status: '', // status 0 待付款 1 已发货 163 status: '', // status 0 待付款 1 已发货
164 uid: '', 164 uid: '',
165 openid: '', 165 openid: '',
166 lefttime: 0, 166 lefttime: 0,
167 isPay: 0, 167 isPay: 0,
168 totalPrice: 0, 168 totalPrice: 0,
169 index: 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 const orderTime = new Date(this.orderInfo.pay_time.replace(/-/g, '/')).getTime() 221 const orderTime = new Date(this.orderInfo.pay_time.replace(/-/g, '/')).getTime()
222 const nowTime = new Date().getTime()
223 console.log('getLeftTime', 1800 - (nowTime - orderTime))
224 return 1800 - (nowTime - orderTime) / 1000
222 const nowTime = new Date().getTime() 225 },
223 console.log('getLeftTime', 1800 - (nowTime - orderTime)) 226 // 计算总优惠额
224 return 1800 - (nowTime - orderTime) / 1000 227 totalDiscount() {
225 }, 228 const discountInfoList = this.orderInfo.discount_info
226 // 计算总优惠额 229 let totalDiscount = 0
227 totalDiscount() { 230 if (discountInfoList) {
228 const discountInfoList = this.orderInfo.discount_info 231 discountInfoList.map((discountItem, index) => {
229 let totalDiscount = 0 232 totalDiscount += Number(discountItem.value)
230 if (discountInfoList) { 233 })
231 discountInfoList.map((discountItem, index) => { 234 }
232 totalDiscount += Number(discountItem.value) 235 // console.log(totalDiscount)
233 }) 236 return totalDiscount
234 } 237 },
235 // console.log(totalDiscount) 238 },
236 return totalDiscount 239
237 }, 240 methods: {
238 }, 241 // 再次购买 暂时只支持跳转第一个商品
239 242 toDetail() {
240 methods: { 243 const pid = this.orderInfo.order_info.list[0].pid
241 // 再次购买 暂时只支持跳转第一个商品 244 uni.navigateTo({
242 toDetail() { 245 url: '../details/details?pid=' + pid,
243 const pid = this.orderInfo.order_info.list[0].pid 246 fail: (res) => { console.log(res) },
244 uni.navigateTo({ 247 })
245 url: '../details/details?pid=' + pid, 248 },
246 fail: (res) => { console.log(res) }, 249 // 取消订单
247 }) 250 timeup() {
248 }, 251 this.cancleOrder()
249 // 取消订单 252 },
250 timeup() { 253 cancleOrder() {
251 this.cancleOrder() 254 const uid = this.uid
252 }, 255 const openid = this.openid
253 cancleOrder() { 256 const keyname = this.orderInfo.order_info.keyname
254 const uid = this.uid 257 const that = this
255 const openid = this.openid 258 // console.log('keyname',this.orderInfo.keyname)
256 const keyname = this.orderInfo.order_info.keyname 259 uni.showModal({
257 const that = this 260 title: '提示',
258 // console.log('keyname',this.orderInfo.keyname) 261 content: '现在取消，订单不可恢复哦，确认取消吗？',
259 uni.showModal({ 262 success: function(res) {
260 title: '提示', 263 if (res.confirm) {
261 content: '现在取消，订单不可恢复哦，确认取消吗？', 264 store.dispatch('cancelOrder/cancel', {
262 success: function(res) { 265 keyname: keyname,
263 if (res.confirm) { 266 uid: uid,
264 store.dispatch('cancelOrder/cancel', { 267 openid: openid,
265 keyname: keyname, 268 }).then(() => {
266 uid: uid, 269 if (that.isPay === '1') {
267 openid: openid, 270 console.log('lalallala-1')
268 }).then(() => { 271 uni.switchTab({
269 if (that.isPay === '1') { 272 url: '/pages/index/index',
270 console.log('lalallala-1') 273 })
271 uni.switchTab({ 274 } else {
272 url: '/pages/index/index', 275 console.log('lalallala-2')
273 }) 276 uni.navigateBack({
274 } else { 277 delta: 1,
275 console.log('lalallala-2') 278 })
276 uni.navigateBack({ 279 }
277 delta: 1, 280 })
278 }) 281 } else if (res.cancel) {
279 } 282 console.log('用户点击取消', that.isPay)
280 }) 283 }
281 } else if (res.cancel) { 284 },
282 console.log('用户点击取消', that.isPay) 285 })
283 } 286 },
284 }, 287 paylog() {
285 }) 288 console.log('pay', this.orderInfo)
286 }, 289 const { data, exKeyName: keyName } = this.orderInfo
287 paylog() { 290 const uid = uni.getStorageSync('uid')
288 console.log('pay', this.orderInfo) 291 const timeStamp = new Date().getTime().toString()
289 const { data, exKeyName: keyName } = this.orderInfo 292 const nonceStr = 'asfafasfasfasfasf'
290 const uid = uni.getStorageSync('uid') 293 // 支付参数
291 const timeStamp = new Date().getTime().toString() 294 const fieldSet = {
292 const nonceStr = 'asfafasfasfasfasf' 295 openid: this.$store.state.user.userInfo.openid,
293 // 支付参数 296 uid: this.$store.state.user.userInfo.uid,
294 const fieldSet = { 297 shopid: 0,
295 openid: this.$store.state.user.userInfo.openid, 298 payCate: 2020,
296 uid: this.$store.state.user.userInfo.uid, 299 payMoney: this.totalPrice,
297 shopid: 0, 300 payWoodId: `fcdj-${uid}-${keyName}`,
298 payCate: 2020, 301 payWoodDesc: '在【非常戴镜】的微信付款凭证',
299 payMoney: this.totalPrice, 302 nonceStr,
300 payWoodId: `fcdj-${uid}-${keyName}`, 303 signType: 'MD5',
301 payWoodDesc: '在【非常戴镜】的微信付款凭证', 304 app_uid: 2020,
302 nonceStr, 305 timeStamp,
303 signType: 'MD5', 306 keyname: keyName,
304 app_uid: 2020, 307 billInfo: JSON.stringify(data),
305 timeStamp, 308 }
306 keyname: keyName, 309 // 请求后台支付接口
307 billInfo: JSON.stringify(data), 310 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
308 } 311 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
309 // 请求后台支付接口 312 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
310 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 313 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
311 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 314
312 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 315 // 微信支付接口
313 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 316 uni.requestPayment({
314 317 appId: data.appid,
315 // 微信支付接口 318 timeStamp,
316 uni.requestPayment({ 319 nonceStr,
317 appId: data.appid, 320 total_fee: this.totalPrice,
318 timeStamp, 321 package: `prepay_id=${data.prepay_id}`,
319 nonceStr, 322 signType: 'MD5',
320 total_fee: this.totalPrice, 323 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
321 package: `prepay_id=${data.prepay_id}`, 324 success: (res) => {
322 signType: 'MD5', 325 // 支付成功
323 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 326 uni.showModal({
324 success: (res) => { 327 content: '支付成功',
325 // 支付成功 328 showCancel: false,
326 uni.showModal({ 329 })
327 content: '支付成功', 330 // 跳转订单详情页->状态 待收货
328 showCancel: false, 331 uni.reLaunch({
329 }) 332 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
330 // 跳转订单详情页->状态 待收货 333 })
331 uni.reLaunch({ 334 },
332 url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, 335 fail: (res) => {
333 }) 336 // 支付失败
334 }, 337 uni.showModal({
335 fail: (res) => { 338 content: '支付失败',
336 // 支付失败 339 showCancel: false,
337 uni.showModal({ 340 })
338 content: '支付失败', 341 // 跳转订单详情页->刷新本页面
339 showCancel: false, 342 // uni.redirectTo({
340 }) 343 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
341 // 跳转订单详情页->刷新本页面 344 // })
342 // uni.redirectTo({ 345 },
343 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 346 complete: () => {
344 // }) 347 uni.hideLoading()
345 }, 348 },
346 complete: () => { 349 })
347 uni.hideLoading() 350 } else {
348 }, 351 uni.showModal({
349 }) 352 content: '支付失败',
350 } else { 353 showCancel: false,
351 uni.showModal({ 354 })
352 content: '支付失败', 355 console.log('支付失败')
353 showCancel: false, 356 uni.hideLoading()
354 }) 357 // uni.redirectTo({
355 console.log('支付失败') 358 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
356 uni.hideLoading() 359 // })
357 // uni.redirectTo({ 360 }
358 // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, 361 })
359 // }) 362
360 } 363 // 修改订单状态 待付款==>待收货
361 }) 364 store.dispatch('statusConfirm/confirm', {
362 365 uid: this.uid,
363 // 修改订单状态 待付款==>待收货 366 openid: this.openid,
364 store.dispatch('statusConfirm/confirm', { 367 oldway: '0',
365 uid: this.uid, 368 way: '1',
366 openid: this.openid, 369 pay_id: this.payId,
367 oldway: '0', 370 judgeContent: '',
368 way: '1', 371 orderInfo: this.orderInfo.order_info,
369 pay_id: this.payId, 372 })
370 judgeContent: '', 373 .then(
371 orderInfo: this.orderInfo.order_info, 374 // setTimeout(() => {
372 }) 375 // uni.navigateBack();
373 .then( 376 // }, 1500)
374 // setTimeout(() => { 377 )
375 // uni.navigateBack(); 378 },
376 // }, 1500) 379 confirmOrder() {
377 ) 380 // 确认收货 way1 ==>way2
378 }, 381 store
379 confirmOrder() { 382 .dispatch('statusConfirm/confirm', {
380 // 确认收货 way1 ==>way2 383 uid: this.uid,
381 store 384 openid: this.openid,
382 .dispatch('statusConfirm/confirm', { 385 oldway: '1',
383 uid: this.uid, 386 way: '2',
384 openid: this.openid, 387 pay_id: this.payId,
385 oldway: '1', 388 judgeContent: '',
386 way: '2', 389 orderInfo: this.orderInfo.order_info,
387 pay_id: this.payId, 390 })
388 judgeContent: '', 391 .then((res) => {
389 orderInfo: this.orderInfo.order_info, 392 if (res.data.code === 1) {
390 }) 393 uni.showToast({
391 .then((res) => { 394 title: '已确认',
392 if (res.data.code === 1) { 395 mask: true,
393 uni.showToast({ 396 duration: 1500,
394 title: '已确认', 397 icon: 'success',
395 mask: true, 398 })
396 duration: 1500, 399 } else {
397 icon: 'success', 400 uni.showToast({
398 }) 401 title: '服务器错误，确认失败!',
399 } else { 402 mask: true,
400 uni.showToast({ 403 })
401 title: '服务器错误，确认失败!', 404 }
402 mask: true, 405 setTimeout(() => {
403 }) 406 uni.navigateBack()
404 } 407 }, 1500)
405 setTimeout(() => { 408 })
406 uni.navigateBack() 409 },
407 }, 1500) 410 },
408 }) 411 // filters: {
409 }, 412 // timerChange: function(value) {
410 }, 413 // var newDate = new Date()
411 // filters: { 414 // newDate.setTime(value * 1000)
412 // timerChange: function(value) { 415 // return newDate.toLocaleString()
413 // var newDate = new Date() 416 // },
414 // newDate.setTime(value * 1000) 417 // },
415 // return newDate.toLocaleString() 418 }
416 // }, 419 </script>
417 // }, 420
418 } 421 <style lang="scss" scoped>
419 </script> 422 .content {
420 423 min-height: 100vh;
421 <style lang="scss" scoped> 424 display: flex;
422 .content { 425 flex-direction: column;
423 min-height: 100vh; 426 justify-content: flex-start;
424 display: flex; 427 align-items: center;
425 flex-direction: column; 428 background-color: #f2f2f2;
426 justify-content: flex-start; 429 }
427 align-items: center; 430
428 background-color: #f2f2f2; 431 .order {
429 } 432 margin-bottom: 112rpx;
430 433 background: #f2f2f2;
431 .order { 434 margin-top: 140rpx;
432 margin-bottom: 112rpx; 435 width: 670rpx;
433 background: #f2f2f2; 436 }
434 margin-top: 140rpx; 437
435 width: 670rpx; 438 .order-time {
436 } 439 width: 100%;
437 440 height: 140rpx;
438 .order-time { 441 background-color: #fff;
439 width: 100%; 442 display: flex;
440 height: 140rpx; 443 justify-content: center;
441 background-color: #fff; 444 align-items: center;
442 display: flex; 445 position: fixed;
443 justify-content: center; 446 top: 0;
444 align-items: center; 447 left: 0;
445 position: fixed; 448 text {
446 top: 0; 449 // font-family: PingFangSC-Regular;
447 left: 0; 450 // margin-top: 48rpx;
448 text { 451 font-size: 14px;
449 // font-family: PingFangSC-Regular; 452 color: #333333;
450 // margin-top: 48rpx; 453 letter-spacing: -0.26px;
451 font-size: 14px; 454 }
452 color: #333333; 455 .p2 {
453 letter-spacing: -0.26px; 456 // font-family: DINAlternate-Bold;
454 } 457 margin: 42rpx 20rpx 0 20rpx;
455 .p2 { 458 font-size: 18px;
456 // font-family: DINAlternate-Bold; 459 color: #ec5d3b;
457 margin: 42rpx 20rpx 0 20rpx; 460 letter-spacing: -0.34px;
458 font-size: 18px; 461 }
459 color: #ec5d3b; 462 }
460 letter-spacing: -0.34px; 463 .headerBanner {
461 } 464 width: 100%;
462 } 465 height: 140rpx;
463 .headerBanner { 466 background: #4a90e2;
464 width: 100%; 467 padding: 26rpx 60rpx 24rpx 60rpx;
465 height: 140rpx; 468 box-sizing: border-box;
466 background: #4a90e2; 469 color: #ffffff;
467 padding: 26rpx 60rpx 24rpx 60rpx; 470 display: flex;
468 box-sizing: border-box; 471 justify-content: space-between;
469 color: #ffffff; 472 align-items: center;
470 display: flex; 473 position: fixed;
471 justify-content: space-between; 474 top: 0;
472 align-items: center; 475 left: 0;
473 position: fixed; 476 .bannerLeft {
474 top: 0; 477 font-size: 36rpx;
475 left: 0; 478 display: flex;
476 .bannerLeft { 479 flex-direction: column;
477 font-size: 36rpx; 480 justify-content: center;
478 display: flex; 481 align-items: center;
479 flex-direction: column; 482 .T2 {
480 justify-content: center; 483 font-size: 24rpx;
481 align-items: center; 484 }
482 .T2 { 485 }
483 font-size: 24rpx; 486 image {
484 } 487 height: 56rpx;
485 } 488 width: 72rpx;
486 image { 489 }
487 height: 56rpx; 490 }
488 width: 72rpx; 491
489 } 492 .order-user {
490 } 493 height: 228rpx;
491 494 background: #ffffff;
492 .order-user { 495 border-radius: 14rpx;
493 height: 228rpx; 496 margin: 0 auto;
494 background: #ffffff; 497 margin-top: 20rpx;
495 border-radius: 14rpx; 498 margin-bottom: 20rpx;
496 margin: 0 auto; 499 .order-user-head {
497 margin-top: 20rpx; 500 display: flex;
498 margin-bottom: 20rpx; 501 height: 108rpx;
499 .order-user-head { 502 align-items: center;
500 display: flex; 503 margin-left: 126rpx;
501 height: 108rpx; 504 .p1 {
502 align-items: center; 505 // font-family: PingFangSC-Regular;
503 margin-left: 126rpx; 506 font-size: 14px;
504 .p1 { 507 color: #333333;
505 // font-family: PingFangSC-Regular; 508 letter-spacing: -0.26px;
506 font-size: 14px; 509 margin-right: 20rpx;
507 color: #333333; 510 }
508 letter-spacing: -0.26px; 511 .p2 {
509 margin-right: 20rpx; 512 // font-family: PingFangSC-Regular;
510 } 513 font-size: 14px;
511 .p2 { 514 color: #999999;
512 // font-family: PingFangSC-Regular; 515 letter-spacing: -0.26px;
513 font-size: 14px; 516 }
514 color: #999999; 517 }
515 letter-spacing: -0.26px; 518 .order-user-body {
516 } 519 display: flex;
517 } 520 width: 100%;
518 .order-user-body { 521 image {
519 display: flex; 522 width: 24px;
520 width: 100%; 523 height: 26px;
521 image { 524 margin: 12rpx 32rpx 0 40rpx;
522 width: 24px; 525 }
523 height: 26px; 526 .p3 {
524 margin: 12rpx 32rpx 0 40rpx; 527 // font-family: PingFangSC-Semibold;
525 } 528 font-size: 14px;
526 .p3 { 529 color: #333333;
527 // font-family: PingFangSC-Semibold; 530 letter-spacing: -0.26px;
528 font-size: 14px; 531 line-height: 70rpx;
529 color: #333333; 532 }
530 letter-spacing: -0.26px; 533 }
531 line-height: 70rpx; 534 }
532 } 535
533 } 536 .order-info {
534 } 537 background-color: #fff;
535 538 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
536 .order-info { 539 border-radius: 16rpx;
537 background-color: #fff; 540 margin: 0 auto;
538 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 541 view {
539 border-radius: 16rpx; 542 margin-left: 40rpx;
540 margin: 0 auto; 543 }
541 view { 544 text {
542 margin-left: 40rpx; 545 font-size: 14px;
543 } 546 }
544 text { 547 .order-info-head {
545 font-size: 14px; 548 display: flex;
546 } 549 padding-top: 40rpx;
547 .order-info-head { 550 image {
548 display: flex; 551 height: 188rpx;
549 padding-top: 40rpx; 552 width: 188rpx;
550 image { 553 }
551 height: 188rpx; 554 .order-info-head-r {
552 width: 188rpx; 555 margin: 0;
553 } 556 width: 368rpx;
554 .order-info-head-r { 557 margin-left: 24rpx;
555 margin: 0; 558 // margin-top: 40rpx;
556 width: 368rpx; 559 text {
557 margin-left: 24rpx; 560 display: block;
558 // margin-top: 40rpx; 561 }
559 text { 562 // .arrow{
560 display: block; 563 // width: 0;
561 } 564 // height: 0;
562 // .arrow{ 565 // border-left: 5px transparent;
563 // width: 0; 566 // border-right: 5px transparent;
564 // height: 0; 567 // border-top: 5px #979797;
565 // border-left: 5px transparent; 568 // border-bottom: 0 transparent;
566 // border-right: 5px transparent; 569 // border-style: solid;
567 // border-top: 5px #979797; 570 // position: relative;
568 // border-bottom: 0 transparent; 571 // // transform: scaleY(-1);
569 // border-style: solid; 572 // }
570 // position: relative; 573 // .arrow::after{
571 // // transform: scaleY(-1); 574 // content: '';
572 // } 575 // position: absolute;
573 // .arrow::after{ 576 // top: -6.5px;
574 // content: ''; 577 // left: -5px;
575 // position: absolute; 578 // border-left: 5px transparent;
576 // top: -6.5px; 579 // border-right: 5px transparent;
577 // left: -5px; 580 // border-top: 5px #FFFFFF;
578 // border-left: 5px transparent; 581 // border-bottom: 0 transparent;
579 // border-right: 5px transparent; 582 // border-style: solid;
580 // border-top: 5px #FFFFFF; 583 // }
581 // border-bottom: 0 transparent; 584 .p1 {
582 // border-style: solid; 585 min-height: 40px;
583 // } 586 // font-family: PingFangSC-Regular;
584 .p1 { 587 font-size: 14px;
585 min-height: 40px; 588 color: #333333;
586 // font-family: PingFangSC-Regular; 589 letter-spacing: -0.26px;
587 font-size: 14px; 590 line-height: 18px;
588 color: #333333; 591 // line-height: 20px;
589 letter-spacing: -0.26px; 592 }
590 line-height: 18px; 593 .p2 {
591 // line-height: 20px; 594 height: 34px;
592 } 595 padding: 1px 0 3px 0;
593 .p2 { 596 // font-family: PingFangSC-Regular;
594 height: 34px; 597 font-size: 12px;
595 padding: 1px 0 3px 0; 598 color: #999999;
596 // font-family: PingFangSC-Regular; 599 letter-spacing: -0.23px;
597 font-size: 12px; 600 }
598 color: #999999; 601 .infoText-bottom {
599 letter-spacing: -0.23px; 602 display: flex;
600 } 603 flex-direction: row;
601 .infoText-bottom { 604 justify-content: flex-start;
602 display: flex; 605 align-items: center;
603 flex-direction: row; 606 width: 100%;
604 justify-content: flex-start; 607 margin-left: 0;
605 align-items: center; 608 .markPrice {
606 width: 100%; 609 font-size: 14px;
607 margin-left: 0; 610 color: #ff6b4a;
608 .markPrice { 611 margin-right: 20rpx;
609 font-size: 14px; 612 margin-left: 0rpx;
610 color: #ff6b4a; 613 }
611 margin-right: 20rpx; 614 .buy-num {
612 margin-left: 0rpx; 615 font-size: 12px;
613 } 616 color: #999999;
614 .buy-num { 617 margin-left: 0;
615 font-size: 12px; 618 }
616 color: #999999; 619 }
617 margin-left: 0; 620 }
618 } 621 }
619 } 622 // .order-info-goodsnum {
620 } 623 // display: flex;
621 } 624 // align-items: center;
622 // .order-info-goodsnum { 625 // justify-content: flex-end;
623 // display: flex; 626 // text {
624 // align-items: center; 627 // margin-right: 44rpx;
625 // justify-content: flex-end; 628 // // ont-family: PingFangSC-Regular;
626 // text { 629 // font-size: 12px;
627 // margin-right: 44rpx; 630 // color: #999999;
628 // // ont-family: PingFangSC-Regular; 631 // letter-spacing: -0.23px;
629 // font-size: 12px; 632 // }
630 // color: #999999; 633 // }
631 // letter-spacing: -0.23px; 634 .order-info-freight {
632 // } 635 display: block;
633 // } 636 margin-left: 40rpx;
634 .order-info-freight { 637 margin-top: 22rpx;
635 display: block; 638 .p1 {
636 margin-left: 40rpx; 639 // font-family: PingFangSC-Regular;
637 margin-top: 22rpx; 640 font-size: 14px;
638 .p1 { 641 color: #333333;
639 // font-family: PingFangSC-Regular; 642 letter-spacing: -0.26px;
640 font-size: 14px; 643 line-height: 18px;
641 color: #333333; 644 margin-right: 24px;
642 letter-spacing: -0.26px; 645 }
643 line-height: 18px; 646 .p2 {
644 margin-right: 24px; 647 // font-family: PingFangSC-Regular;
645 } 648 font-size: 14px;
646 .p2 { 649 color: #ff6b4a;
647 // font-family: PingFangSC-Regular; 650 letter-spacing: -0.26px;
648 font-size: 14px; 651 }
649 color: #ff6b4a; 652 }
650 letter-spacing: -0.26px; 653 .order-info-discount {
651 } 654 display: block;
652 } 655 margin-left: 40rpx;
653 .order-info-discount { 656 margin-top: 24rpx;
654 display: block; 657 .p1 {
655 margin-left: 40rpx; 658 // font-family: PingFangSC-Regular;
656 margin-top: 24rpx; 659 font-size: 14px;
657 .p1 { 660 color: #333333;
658 // font-family: PingFangSC-Regular; 661 letter-spacing: -0.26px;
659 font-size: 14px; 662 line-height: 18px;
660 color: #333333; 663 margin-right: 24px;
661 letter-spacing: -0.26px; 664 }
662 line-height: 18px; 665 .p2 {
663 margin-right: 24px; 666 // font-family: PingFangSC-Regular;
664 } 667 font-size: 14px;
665 .p2 { 668 color: #ff6b4a;
666 // font-family: PingFangSC-Regular; 669 letter-spacing: -0.26px;
667 font-size: 14px; 670 }
668 color: #ff6b4a; 671 }
669 letter-spacing: -0.26px; 672 .order-info-price {
670 } 673 display: block;
671 } 674 margin-left: 40rpx;
672 .order-info-price { 675 margin-top: 24rpx;
673 display: block; 676 .p1 {
674 margin-left: 40rpx; 677 // font-family: PingFangSC-Semibold;
675 margin-top: 24rpx; 678 font-size: 14px;
676 .p1 { 679 color: #333333;
677 // font-family: PingFangSC-Semibold; 680 letter-spacing: -0.26px;
678 font-size: 14px; 681 line-height: 18px;
679 color: #333333; 682 margin-right: 24px;
680 letter-spacing: -0.26px; 683 }
681 line-height: 18px; 684 .p2 {
682 margin-right: 24px; 685 // font-family: PingFangSC-Semibold;
683 } 686 font-size: 14px;
684 .p2 { 687 color: #ff6b4a;
685 // font-family: PingFangSC-Semibold; 688 letter-spacing: -0.26px;
686 font-size: 14px; 689 }
687 color: #ff6b4a; 690 }
688 letter-spacing: -0.26px; 691 .order-info-num {
689 } 692 display: block;
690 } 693 margin-left: 40rpx;
691 .order-info-num { 694 margin-top: 44rpx;
692 display: block; 695 text {
693 margin-left: 40rpx; 696 // font-family: PingFangSC-Regular;
694 margin-top: 44rpx; 697 font-size: 12px;
695 text { 698 color: #999999;
696 // font-family: PingFangSC-Regular; 699 letter-spacing: -0.23px;
697 font-size: 12px; 700 }
698 color: #999999; 701 }
699 letter-spacing: -0.23px; 702 .order-info-time {
700 } 703 display: block;
701 } 704 margin: 8rpx 0 48rpx 40rpx;
702 .order-info-time { 705 text {
703 display: block; 706 // font-family: PingFangSC-Regular;
704 margin: 8rpx 0 48rpx 40rpx; 707 font-size: 12px;
705 text { 708 color: #999999;
706 // font-family: PingFangSC-Regular; 709 letter-spacing: -0.23px;
707 font-size: 12px; 710 }
708 color: #999999; 711 }
709 letter-spacing: -0.23px; 712 .order-info-hr {
710 } 713 width: 520rpx;
711 } 714 height: 1px;
712 .order-info-hr { 715 background-color: #e9e9e9;
713 width: 520rpx; 716 margin-bottom: 20rpx;
714 height: 1px; 717 }
715 background-color: #e9e9e9; 718 .order-info-contact {
716 margin-bottom: 20rpx; 719 display: flex;
717 } 720 padding-bottom: 28rpx;
718 .order-info-contact { 721 image {
719 display: flex; 722 width: 19px;
720 padding-bottom: 28rpx; 723 height: 16px;
721 image { 724 }
722 width: 19px; 725 button {
723 height: 16px; 726 // font-family: PingFangSC-Regular;
724 } 727 border: none;
725 button { 728 border-radius: 0;
726 // font-family: PingFangSC-Regular; 729 text-align: left;
727 border: none; 730 margin-left: 20rpx;
728 border-radius: 0; 731 font-size: 14px;
729 text-align: left; 732 color: #333333;
730 margin-left: 20rpx; 733 letter-spacing: -0.26px;
731 font-size: 14px; 734 line-height: 18px;
732 color: #333333; 735 background-color: #fff;
733 letter-spacing: -0.26px; 736 padding: 0;
734 line-height: 18px; 737 &::after {
735 background-color: #fff; 738 border: 0;
736 padding: 0; 739 }
737 &::after { 740 }
738 border: 0; 741 }
739 } 742 }
740 } 743
741 } 744 .order-confim {
742 } 745 display: flex;
743 746 align-items: center;
744 .order-confim { 747 justify-content: flex-end;
745 display: flex; 748 // z-index: 999;
746 align-items: center; 749 width: 100%;
747 justify-content: flex-end; 750 height: 112rpx;
748 // z-index: 999; 751 position: fixed;
749 width: 100%; 752 bottom: 0;
750 height: 112rpx; 753 background: #ffffff;
751 position: fixed; 754 button {
752 bottom: 0; 755 width: 204rpx;
753 background: #ffffff; 756 height: 80rpx;
754 button { 757 border: 1px solid #ff6b4a;
755 width: 204rpx; 758 border-radius: 40rpx;
756 height: 80rpx; 759 font-size: 32rpx;
757 border: 1px solid #ff6b4a; 760 letter-spacing: -0.3px;
758 border-radius: 40rpx; 761 margin-right: 0;
759 font-size: 32rpx; 762 }
760 letter-spacing: -0.3px; 763 .b1 {
761 margin-right: 0; 764 // font-family: PingFangSC-Regular;
762 } 765 color: #ff6b4a;
763 .b1 { 766 background-color: #ffffff;
764 // font-family: PingFangSC-Regular; 767 }
765 color: #ff6b4a; 768 .b2 {
766 background-color: #ffffff; 769 // font-family: PingFangSC-Regular;
767 } 770 background-color: #ff6b4a;
768 .b2 { 771 color: #ffffff;
769 // font-family: PingFangSC-Regular; 772 margin: 0 26rpx 0 20rpx;
770 background-color: #ff6b4a; 773 }
771 color: #ffffff; 774 }
772 margin: 0 26rpx 0 20rpx; 775 </style>
773 } 776