Commit ded3fbc4a88fedc122481a845f250a84b92dd4cf
1 parent
9e82c267
Exists in
master
feat: 确认订单页出行人样式修改
Showing
3 changed files
with
131 additions
and
26 deletions
Show diff stats
src/views/Service/CheckOrder.vue
@@ -21,13 +21,8 @@ | @@ -21,13 +21,8 @@ | ||
21 | <van-icon name="arrow" /> | 21 | <van-icon name="arrow" /> |
22 | </div> | 22 | </div> |
23 | </div> | 23 | </div> |
24 | - <div class="card top_border" v-if="selectedContactArr.length==0" @click="enterSelectContact"> | ||
25 | - <p>出行人</p> | ||
26 | - <span style="color:#999;font-weight:normal;">*请添加活动出行人</span> | ||
27 | - </div> | ||
28 | - <div class="card top_border" v-for="(item,index) in selectedContactArr" :style="index>0?'border-top:0':''" :key="index" @click="enterSelectContact"> | ||
29 | - <p>{{index==0?'出行人':''}}</p> | ||
30 | - <span style="color:#999;font-weight:normal;">{{item.travelerName}} {{item.travelerMobile}}</span> | 24 | + <div class="top_border"> |
25 | + <contact-box :limit="count"></contact-box> | ||
31 | </div> | 26 | </div> |
32 | <div class="card top_border"> | 27 | <div class="card top_border"> |
33 | <p>服务承诺和保障</p> | 28 | <p>服务承诺和保障</p> |
@@ -49,6 +44,7 @@ | @@ -49,6 +44,7 @@ | ||
49 | </div> | 44 | </div> |
50 | </template> | 45 | </template> |
51 | <script> | 46 | <script> |
47 | +import ContactBox from './component/ContactBox.vue' | ||
52 | export default { | 48 | export default { |
53 | name: 'ServiceCheckOrder', | 49 | name: 'ServiceCheckOrder', |
54 | data () { | 50 | data () { |
@@ -63,8 +59,6 @@ export default { | @@ -63,8 +59,6 @@ export default { | ||
63 | showCourseData: '',//当前课程的信息 | 59 | showCourseData: '',//当前课程的信息 |
64 | selectCombo: '',//已选择的套餐 | 60 | selectCombo: '',//已选择的套餐 |
65 | userInfo: '',//支付用 | 61 | userInfo: '',//支付用 |
66 | - selectedContactArr: [],//选择的出行人 | ||
67 | - selectedContact: '', | ||
68 | } | 62 | } |
69 | }, | 63 | }, |
70 | mounted () { | 64 | mounted () { |
@@ -72,17 +66,6 @@ export default { | @@ -72,17 +66,6 @@ export default { | ||
72 | if (userInfo) { | 66 | if (userInfo) { |
73 | this.userInfo = JSON.parse(userInfo); | 67 | this.userInfo = JSON.parse(userInfo); |
74 | } | 68 | } |
75 | - // 选择的出行人 | ||
76 | - let selectedContactArr = localStorage.getItem('selectedContactArr'); | ||
77 | - if (selectedContactArr) { | ||
78 | - selectedContactArr = JSON.parse(selectedContactArr); | ||
79 | - this.selectedContactArr = selectedContactArr | ||
80 | - let selectedContact = [] | ||
81 | - for (let i in selectedContactArr) { | ||
82 | - selectedContact.push(selectedContactArr[i].travelerNum) | ||
83 | - } | ||
84 | - this.selectedContact = selectedContact.join(',') | ||
85 | - } | ||
86 | 69 | ||
87 | this.date = this.$route.query.date; | 70 | this.date = this.$route.query.date; |
88 | this.count = this.$route.query.count; | 71 | this.count = this.$route.query.count; |
@@ -129,21 +112,28 @@ export default { | @@ -129,21 +112,28 @@ export default { | ||
129 | goProtocol () { | 112 | goProtocol () { |
130 | this.$router.push({ name: 'protocol' }) | 113 | this.$router.push({ name: 'protocol' }) |
131 | }, | 114 | }, |
132 | - // 选择联系人 | ||
133 | - enterSelectContact () { | ||
134 | - this.$router.push({ name: 'SelectContact', query: { limit: this.count } }) | ||
135 | - | ||
136 | - }, | ||
137 | // 创建订单 | 115 | // 创建订单 |
138 | createOrder () { | 116 | createOrder () { |
139 | - if (this.selectedContactArr.length != this.count) { | 117 | + // 出行人数量判断 |
118 | + let selectedContactArr = localStorage.getItem('selectedContactArr'); | ||
119 | + selectedContactArr = JSON.parse(selectedContactArr); | ||
120 | + if (selectedContactArr.length != this.count) { | ||
140 | this.$toast.fail('请选择与购买商品数量相同的出行人数'); | 121 | this.$toast.fail('请选择与购买商品数量相同的出行人数'); |
141 | return; | 122 | return; |
142 | } | 123 | } |
124 | + | ||
125 | + // 协议勾选 | ||
143 | if (!this.checked) { | 126 | if (!this.checked) { |
144 | this.$toast.fail('请先阅读并同意用户协议'); | 127 | this.$toast.fail('请先阅读并同意用户协议'); |
145 | return; | 128 | return; |
146 | } | 129 | } |
130 | + | ||
131 | + // 出行人字段格式 | ||
132 | + let selectedContact = [] | ||
133 | + for (let i in selectedContactArr) { | ||
134 | + selectedContact.push(selectedContactArr[i].travelerNum) | ||
135 | + } | ||
136 | + selectedContact = selectedContact.join(',') | ||
147 | this.mgop({ | 137 | this.mgop({ |
148 | api: 'mgop.sz.hswsy.AddOrderPay', // 必须 | 138 | api: 'mgop.sz.hswsy.AddOrderPay', // 必须 |
149 | host: 'https://mapi.zjzwfw.gov.cn/', | 139 | host: 'https://mapi.zjzwfw.gov.cn/', |
@@ -322,11 +312,15 @@ export default { | @@ -322,11 +312,15 @@ export default { | ||
322 | } | 312 | } |
323 | }); | 313 | }); |
324 | } | 314 | } |
315 | + }, | ||
316 | + components: { | ||
317 | + ContactBox | ||
325 | } | 318 | } |
326 | } | 319 | } |
327 | </script> | 320 | </script> |
328 | <style lang="scss" scoped> | 321 | <style lang="scss" scoped> |
329 | #checkOrder { | 322 | #checkOrder { |
323 | + padding-bottom: 260px; | ||
330 | .top_border { | 324 | .top_border { |
331 | border-top: 16px solid #f6f7fa; | 325 | border-top: 16px solid #f6f7fa; |
332 | } | 326 | } |
src/views/Service/SelectContact.vue
@@ -125,6 +125,7 @@ export default { | @@ -125,6 +125,7 @@ export default { | ||
125 | travelerName: contactList[i].travelerName, | 125 | travelerName: contactList[i].travelerName, |
126 | travelerMobile: contactList[i].travelerMobile, | 126 | travelerMobile: contactList[i].travelerMobile, |
127 | travelerNum: contactList[i].travelerNum, | 127 | travelerNum: contactList[i].travelerNum, |
128 | + travelerIdCard:contactList[i].travelerIdCard, | ||
128 | userType: contactList[i].userType, | 129 | userType: contactList[i].userType, |
129 | }) | 130 | }) |
130 | } | 131 | } |
@@ -0,0 +1,110 @@ | @@ -0,0 +1,110 @@ | ||
1 | +<template> | ||
2 | + <div class="contact_box"> | ||
3 | + <div class="flex_box"> | ||
4 | + <p class="contact_title">出行人</p> | ||
5 | + <span class="contact_count">需添加{{limit}}位出行人</span> | ||
6 | + <span class="contact_btn" @click="enterSelectContact">选择出行人</span> | ||
7 | + </div> | ||
8 | + <p class="tip"> | ||
9 | + <van-icon class="icon" name="warning" /> | ||
10 | + 填写项须与出游所持证件保持一致 | ||
11 | + </p> | ||
12 | + <div class="contact_item" v-for="(item,index) in selectedContactArr" :key="index"> | ||
13 | + <van-icon class="close" name="close" @click="delContact(index)" /> | ||
14 | + <div class="info"> | ||
15 | + <p class="name">{{item.travelerName}}</p> | ||
16 | + <p class="cardid">身份证{{item.travelerIdCard}}</p> | ||
17 | + </div> | ||
18 | + </div> | ||
19 | + </div> | ||
20 | +</template> | ||
21 | +<script> | ||
22 | +export default { | ||
23 | + props: ["limit"], | ||
24 | + data () { | ||
25 | + return { | ||
26 | + selectedContactArr: [],//选择的出行人 | ||
27 | + } | ||
28 | + }, | ||
29 | + mounted () { | ||
30 | + // 选择的出行人 | ||
31 | + let selectedContactArr = localStorage.getItem('selectedContactArr'); | ||
32 | + if (selectedContactArr) { | ||
33 | + selectedContactArr = JSON.parse(selectedContactArr); | ||
34 | + this.selectedContactArr = selectedContactArr | ||
35 | + } | ||
36 | + }, | ||
37 | + methods: { | ||
38 | + // 选择联系人 | ||
39 | + enterSelectContact () { | ||
40 | + this.$router.push({ name: 'SelectContact', query: { limit: this.limit } }) | ||
41 | + }, | ||
42 | + // 删除联系人 | ||
43 | + delContact (index) { | ||
44 | + this.selectedContactArr.splice(index, 1) | ||
45 | + localStorage.setItem('selectedContactArr',JSON.stringify(this.selectedContactArr)) | ||
46 | + } | ||
47 | + } | ||
48 | +} | ||
49 | +</script> | ||
50 | +<style lang="scss"> | ||
51 | +.contact_box { | ||
52 | + font-size: 28px; | ||
53 | + .flex_box { | ||
54 | + padding: 0 22px; | ||
55 | + height: 98px; | ||
56 | + display: flex; | ||
57 | + align-items: center; | ||
58 | + justify-content: space-between; | ||
59 | + } | ||
60 | + .contact_title { | ||
61 | + display: inline-block; | ||
62 | + font-weight: bold; | ||
63 | + } | ||
64 | + .contact_count { | ||
65 | + display: inline-block; | ||
66 | + width: 420px; | ||
67 | + color: #666; | ||
68 | + font-weight: normal; | ||
69 | + } | ||
70 | + .contact_btn { | ||
71 | + color: #4092ff; | ||
72 | + font-weight: normal; | ||
73 | + } | ||
74 | + .tip{ | ||
75 | + padding: 0 22px; | ||
76 | + margin-bottom: 28px; | ||
77 | + color: #999; | ||
78 | + .icon{ | ||
79 | + color: #FF9604; | ||
80 | + } | ||
81 | + } | ||
82 | + .contact_item { | ||
83 | + display: flex; | ||
84 | + align-items: center; | ||
85 | + justify-content: space-between; | ||
86 | + border-top: 2px solid #F2F4F9; | ||
87 | + width: 702px; | ||
88 | + margin: 0 auto; | ||
89 | + .close { | ||
90 | + padding: 20px; | ||
91 | + padding-left: 0; | ||
92 | + font-size: 40px; | ||
93 | + color: #4092ff; | ||
94 | + } | ||
95 | + .info { | ||
96 | + width: 630px; | ||
97 | + padding: 28px 0; | ||
98 | + .name { | ||
99 | + font-size: 30px; | ||
100 | + font-weight: bold; | ||
101 | + } | ||
102 | + .cardid { | ||
103 | + margin-top: 6px; | ||
104 | + font-size: 24px; | ||
105 | + color: #999; | ||
106 | + } | ||
107 | + } | ||
108 | + } | ||
109 | +} | ||
110 | +</style> | ||
0 | \ No newline at end of file | 111 | \ No newline at end of file |