SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit ded3fbc4a88fedc122481a845f250a84b92dd4cf

Authored by 夏洋涛
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
  Diff comments   View file @ded3fbc
@@ -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
  Diff comments   View file @ded3fbc
@@ -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 }
src/views/Service/component/ContactBox.vue 0 → 100644
  Diff comments   View file @ded3fbc
@@ -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