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 21 <van-icon name="arrow" />
22 22 </div>
23 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 26 </div>
32 27 <div class="card top_border">
33 28 <p>服务承诺和保障</p>
... ... @@ -49,6 +44,7 @@
49 44 </div>
50 45 </template>
51 46 <script>
  47 +import ContactBox from './component/ContactBox.vue'
52 48 export default {
53 49 name: 'ServiceCheckOrder',
54 50 data () {
... ... @@ -63,8 +59,6 @@ export default {
63 59 showCourseData: '',//当前课程的信息
64 60 selectCombo: '',//已选择的套餐
65 61 userInfo: '',//支付用
66   - selectedContactArr: [],//选择的出行人
67   - selectedContact: '',
68 62 }
69 63 },
70 64 mounted () {
... ... @@ -72,17 +66,6 @@ export default {
72 66 if (userInfo) {
73 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 70 this.date = this.$route.query.date;
88 71 this.count = this.$route.query.count;
... ... @@ -129,21 +112,28 @@ export default {
129 112 goProtocol () {
130 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 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 121 this.$toast.fail('请选择与购买商品数量相同的出行人数');
141 122 return;
142 123 }
  124 +
  125 + // 协议勾选
143 126 if (!this.checked) {
144 127 this.$toast.fail('请先阅读并同意用户协议');
145 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 137 this.mgop({
148 138 api: 'mgop.sz.hswsy.AddOrderPay', // 必须
149 139 host: 'https://mapi.zjzwfw.gov.cn/',
... ... @@ -322,11 +312,15 @@ export default {
322 312 }
323 313 });
324 314 }
  315 + },
  316 + components: {
  317 + ContactBox
325 318 }
326 319 }
327 320 </script>
328 321 <style lang="scss" scoped>
329 322 #checkOrder {
  323 + padding-bottom: 260px;
330 324 .top_border {
331 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 125 travelerName: contactList[i].travelerName,
126 126 travelerMobile: contactList[i].travelerMobile,
127 127 travelerNum: contactList[i].travelerNum,
  128 + travelerIdCard:contactList[i].travelerIdCard,
128 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 @@
  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 111 \ No newline at end of file
... ...