吉鹏 / gulu-vue

Download as
Browse Code »

Commit 29c972fd52b93bd0973a38ea5592779f2f6cfc56

Authored by mullins
1 parent f112b6434a
Exists in master

再次购买、确认订单修改

Showing 9 changed files with 97 additions and 46 deletions   Show diff stats

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

5.15 KB
src/static/nocart.png
View file @f112b64

19 KB
src/store/modules/details.js
Diff comments   View file @29c972f
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 read, 5 read,
6 cartList, 6 cartList,
7 makePost, 7 makePost,
8 } = urlAlias 8 } = urlAlias
9 9
10 const state = { 10 const state = {
11 // 为配合参数选择框 11 // 为配合参数选择框
12 goodInfo: {}, 12 goodInfo: {},
13 // 轮播图 13 // 轮播图
14 carousel: [ 14 carousel: [
15 '/static/img/detail/d9.png', 15 '/static/img/detail/d9.png',
16 ], 16 ],
17 // 商品基本信息 17 // 商品基本信息
18 goodsInfo: { 18 goodsInfo: {
19 name: '暂无名称', 19 name: '暂无名称',
20 price: '暂无价格', 20 price: '暂无价格',
21 discountPrice: undefined, 21 discountPrice: undefined,
22 tradeNumber: undefined, 22 tradeNumber: undefined,
23 }, 23 },
24 // 商品介绍 24 // 商品介绍
25 tag: { 25 tag: {
26 prod_tag_style: [{ 26 prod_tag_style: [{
27 label: '青春学子风', 27 label: '青春学子风',
28 value: '54', 28 value: '54',
29 }], 29 }],
30 }, 30 },
31 // 规格参数 31 // 规格参数
32 specification: [ 32 specification: [
33 { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 33 { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
34 { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 34 { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
35 { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 35 { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
36 { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 36 { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
37 { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 37 { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
38 { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' }, 38 { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' },
39 ], 39 ],
40 // 评价 40 // 评价
41 evaluate: { 41 evaluate: {
42 rate: '100%', 42 rate: '100%',
43 star: 5, 43 star: 5,
44 tag: [{ name: '价格实惠' }], 44 tag: [{ name: '价格实惠' }],
45 }, 45 },
46 // 商品详情 46 // 商品详情
47 more: '', 47 more: '',
48 // 购物车数目 48 // 购物车数目
49 cartNumber: 0, 49 cartNumber: 0,
50 // skuList 50 // skuList
51 skuList: [], 51 skuList: [],
52 postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png', 52 postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png',
53 } 53 }
54 54
55 const mutations = { 55 const mutations = {
56 INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => { 56 INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => {
57 state.goodInfo = goodInfo 57 state.goodInfo = goodInfo
58 state.carousel = carousel 58 state.carousel = carousel
59 state.goodsInfo = goodsInfo 59 state.goodsInfo = goodsInfo
60 state.tag = tag 60 state.tag = tag
61 state.specification = specification 61 state.specification = specification
62 state.evaluate = evaluate 62 state.evaluate = evaluate
63 state.more = more 63 state.more = more
64 state.skuList = skuList 64 state.skuList = skuList
65 }, 65 },
66 CART: (state, number) => { 66 CART: (state, number) => {
67 state.cartNumber = number 67 state.cartNumber = number
68 }, 68 },
69 POST: (state, url) => { 69 POST: (state, url) => {
70 state.postUrl = url 70 state.postUrl = url
71 }, 71 },
72 } 72 }
73 73
74 const actions = { 74 const actions = {
75 // 获取详情 75 // 获取详情
76 details({ commit, rootState }, param) { 76 details({ commit, rootState }, param) {
77 return new Promise((resolve, reject) => request({ 77 return new Promise((resolve, reject) => request({
78 url: read, 78 url: read,
79 data: param, 79 data: param,
80 success: ({ data: { data } }) => { 80 success: ({ data: { data } }) => {
81 console.log('data.tag', data.tag) 81 console.log('data.tag', data.tag)
82 // 规格参数设置 82 // 规格参数设置
83 const specification = rootState.details.specification 83 const specification = rootState.details.specification
84 const parameter = { 84 const parameter = {
85 frame_width: data.frame_width, 85 frame_width: data.frame_width,
86 glass_width: data.glass_width, 86 glass_width: data.glass_width,
87 glass_height: data.glass_height, 87 glass_height: data.glass_height,
88 nose_width: data.nose_width, 88 nose_width: data.nose_width,
89 leg_long: data.leg_long, 89 leg_long: data.leg_long,
90 weight: data.weight, 90 weight: data.weight,
91 } 91 }
92 for (let index = 0; index < specification.length; index++) { 92 for (let index = 0; index < specification.length; index++) {
93 if (specification[index].key !== 'weight') { 93 if (specification[index].key !== 'weight') {
94 specification[index].slength = `${parameter[specification[index].key]}mm` 94 specification[index].slength = `${parameter[specification[index].key]}mm`
95 } else { 95 } else {
96 specification[index].slength = `${parameter[specification[index].key]}克（grams）` 96 specification[index].slength = `${parameter[specification[index].key]}克（grams）`
97 } 97 }
98 } 98 }
99 99
100 commit('INIT', { 100 commit('INIT', {
101 goodInfo: data, 101 goodInfo: data,
102 skuList: data.skuList, 102 skuList: data.skuList,
103 carousel: data.pics, 103 carousel: data.pics,
104 goodsInfo: { 104 goodsInfo: {
105 name: data.p_name, 105 name: data.p_name,
106 price: data.priceArea.Min_Price, 106 price: data.priceArea.Min_Price,
107 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount), 107 discountPrice: parseInt(data.priceArea.Min_Price * (1 + Number(data.priceArea.discount) / 100)),
108 tradeNumber: data.trade_num, 108 tradeNumber: data.trade_num,
109 }, 109 },
110 tag: data.tag, 110 tag: data.tag,
111 specification, 111 specification,
112 evaluate: { 112 evaluate: {
113 rate: data.judgeInfo.good, 113 rate: data.judgeInfo.good,
114 tag: data.judge_tag, 114 tag: data.judge_tag,
115 star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100), 115 star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
116 }, 116 },
117 // eslint-disable-next-line 117 // eslint-disable-next-line
118 more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'), 118 more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
119 }) 119 })
120 resolve(data) 120 resolve(data)
121 }, 121 },
122 fail: (res) => { 122 fail: (res) => {
123 console.log('fail status ===>', res) 123 console.log('fail status ===>', res)
124 }, 124 },
125 })) 125 }))
126 }, 126 },
127 // 获取购物车列表 127 // 获取购物车列表
128 getCartNumber({ commit }, param) { 128 getCartNumber({ commit }, param) {
129 return new Promise((resolve) => request({ 129 return new Promise((resolve) => request({
130 url: cartList, 130 url: cartList,
131 data: param, 131 data: param,
132 success: ({ data: { data } }) => { 132 success: ({ data: { data } }) => {
133 let number = 0 133 let number = 0
134 for (let index = 0; index < data.length; index++) { 134 for (let index = 0; index < data.length; index++) {
135 number += Number(data[index].num) 135 number += Number(data[index].num)
136 } 136 }
137 commit('CART', number) 137 commit('CART', number)
138 }, 138 },
139 })) 139 }))
140 }, 140 },
141 // 生成分享海报 141 // 生成分享海报
142 post({ commit }, param) { 142 post({ commit }, param) {
143 return new Promise((resolve) => request({ 143 return new Promise((resolve) => request({
144 url: makePost, 144 url: makePost,
145 data: param, 145 data: param,
146 success: ({ data }) => { 146 success: ({ data }) => {
147 commit('POST', data.data) 147 commit('POST', data.data)
148 resolve() 148 resolve()
149 }, 149 },
150 })) 150 }))
151 }, 151 },
152 } 152 }
153 153
154 export default { 154 export default {
155 namespaced: true, 155 namespaced: true,
156 state, 156 state,
157 mutations, 157 mutations,
158 actions, 158 actions,
159 } 159 }
160 160
src/store/modules/statusConfirm.js
Diff comments   View file @29c972f
1 import urlAlias from '../url'; 1 import urlAlias from '../url'
2 import request from '../request'; 2 import request from '../request'
3 3
4 const { 4 const {
5 statusConfirm 5 statusConfirm,
6 } = urlAlias; 6 } = urlAlias
7 7
8 // const openid = uni.getStorageSync('openid');
9 const actions = { 8 const actions = {
10 confirm({ commit }, param) { 9 confirm({ commit }, param) {
11 request({ 10 return new Promise((resolve) => request({
12 url: statusConfirm, 11 url: statusConfirm,
13 data: param|| { }, 12 data: param || {},
14 success: (res) => { 13 success: (res) => {
15 console.log(res.data); 14 console.log(res.data)
16 15 resolve(res)
17 }, 16 },
18 }) 17 }))
19 } 18 },
20 } 19 }
21 20
22 export default { 21 export default {
23 namespaced: true, 22 namespaced: true,
24 actions, 23 actions,
25 }