From ded3fbc4a88fedc122481a845f250a84b92dd4cf Mon Sep 17 00:00:00 2001
From: xiayt <x1027869635@gmail.com>
Date: Mon, 1 Nov 2021 15:33:45 +0800
Subject: [PATCH] feat: 确认订单页出行人样式修改

---
 src/views/Service/CheckOrder.vue           |  46 ++++++++++++++++++++--------------------------
 src/views/Service/SelectContact.vue        |   1 +
 src/views/Service/component/ContactBox.vue | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 131 insertions(+), 26 deletions(-)
 create mode 100644 src/views/Service/component/ContactBox.vue

diff --git a/src/views/Service/CheckOrder.vue b/src/views/Service/CheckOrder.vue
index f486ad8..f11b24a 100644
--- a/src/views/Service/CheckOrder.vue
+++ b/src/views/Service/CheckOrder.vue
@@ -21,13 +21,8 @@
         <van-icon name="arrow" />
       </div>
     </div>
-    <div class="card top_border" v-if="selectedContactArr.length==0" @click="enterSelectContact">
-      <p>出行人</p>
-      <span style="color:#999;font-weight:normal;">*请添加活动出行人</span>
-    </div>
-    <div class="card top_border" v-for="(item,index) in selectedContactArr" :style="index>0?'border-top:0':''" :key="index" @click="enterSelectContact">
-      <p>{{index==0?'出行人':''}}</p>
-      <span style="color:#999;font-weight:normal;">{{item.travelerName}} {{item.travelerMobile}}</span>
+    <div class="top_border">
+      <contact-box :limit="count"></contact-box>
     </div>
     <div class="card top_border">
       <p>服务承诺和保障</p>
@@ -49,6 +44,7 @@
   </div>
 </template>
 <script>
+import ContactBox from './component/ContactBox.vue'
 export default {
   name: 'ServiceCheckOrder',
   data () {
@@ -63,8 +59,6 @@ export default {
       showCourseData: '',//当前课程的信息
       selectCombo: '',//已选择的套餐
       userInfo: '',//支付用
-      selectedContactArr: [],//选择的出行人
-      selectedContact: '',
     }
   },
   mounted () {
@@ -72,17 +66,6 @@ export default {
     if (userInfo) {
       this.userInfo = JSON.parse(userInfo);
     }
-    // 选择的出行人
-    let selectedContactArr = localStorage.getItem('selectedContactArr');
-    if (selectedContactArr) {
-      selectedContactArr = JSON.parse(selectedContactArr);
-      this.selectedContactArr = selectedContactArr
-      let selectedContact = []
-      for (let i in selectedContactArr) {
-        selectedContact.push(selectedContactArr[i].travelerNum)
-      }
-      this.selectedContact = selectedContact.join(',')
-    }
 
     this.date = this.$route.query.date;
     this.count = this.$route.query.count;
@@ -129,21 +112,28 @@ export default {
     goProtocol () {
       this.$router.push({ name: 'protocol' })
     },
-    // 选择联系人
-    enterSelectContact () {
-      this.$router.push({ name: 'SelectContact', query: { limit: this.count } })
-
-    },
     // 创建订单
     createOrder () {
-      if (this.selectedContactArr.length != this.count) {
+       // 出行人数量判断
+      let selectedContactArr = localStorage.getItem('selectedContactArr');
+      selectedContactArr = JSON.parse(selectedContactArr);
+      if (selectedContactArr.length != this.count) {
         this.$toast.fail('请选择与购买商品数量相同的出行人数');
         return;
       }
+
+      // 协议勾选
       if (!this.checked) {
         this.$toast.fail('请先阅读并同意用户协议');
         return;
       }
+
+      // 出行人字段格式
+      let selectedContact = []
+      for (let i in selectedContactArr) {
+        selectedContact.push(selectedContactArr[i].travelerNum)
+      }
+      selectedContact = selectedContact.join(',')
       this.mgop({
         api: 'mgop.sz.hswsy.AddOrderPay', // 必须
         host: 'https://mapi.zjzwfw.gov.cn/',
@@ -322,11 +312,15 @@ export default {
         }
       });
     }
+  },
+  components: {
+    ContactBox
   }
 }
 </script>
 <style lang="scss" scoped>
 #checkOrder {
+  padding-bottom: 260px;
   .top_border {
     border-top: 16px solid #f6f7fa;
   }
diff --git a/src/views/Service/SelectContact.vue b/src/views/Service/SelectContact.vue
index 97bc008..cdd0572 100644
--- a/src/views/Service/SelectContact.vue
+++ b/src/views/Service/SelectContact.vue
@@ -125,6 +125,7 @@ export default {
               travelerName: contactList[i].travelerName,
               travelerMobile: contactList[i].travelerMobile,
               travelerNum: contactList[i].travelerNum,
+              travelerIdCard:contactList[i].travelerIdCard,
               userType: contactList[i].userType,
             })
           }
diff --git a/src/views/Service/component/ContactBox.vue b/src/views/Service/component/ContactBox.vue
new file mode 100644
index 0000000..767ed2e
--- /dev/null
+++ b/src/views/Service/component/ContactBox.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="contact_box">
+    <div class="flex_box">
+      <p class="contact_title">出行人</p>
+      <span class="contact_count">需添加{{limit}}位出行人</span>
+      <span class="contact_btn" @click="enterSelectContact">选择出行人</span>
+    </div>
+    <p class="tip">
+        <van-icon class="icon" name="warning" />
+      填写项须与出游所持证件保持一致
+    </p>
+      <div class="contact_item" v-for="(item,index) in selectedContactArr" :key="index">
+        <van-icon class="close" name="close" @click="delContact(index)" />
+        <div class="info">
+          <p class="name">{{item.travelerName}}</p>
+          <p class="cardid">身份证{{item.travelerIdCard}}</p>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+export default {
+  props: ["limit"],
+  data () {
+    return {
+      selectedContactArr: [],//选择的出行人
+    }
+  },
+  mounted () {
+    // 选择的出行人
+    let selectedContactArr = localStorage.getItem('selectedContactArr');
+    if (selectedContactArr) {
+      selectedContactArr = JSON.parse(selectedContactArr);
+      this.selectedContactArr = selectedContactArr
+    }
+  },
+  methods: {
+    // 选择联系人
+    enterSelectContact () {
+      this.$router.push({ name: 'SelectContact', query: { limit: this.limit } })
+    },
+    // 删除联系人
+    delContact (index) {
+      this.selectedContactArr.splice(index, 1)
+      localStorage.setItem('selectedContactArr',JSON.stringify(this.selectedContactArr))
+    }
+  }
+}
+</script>
+<style lang="scss">
+.contact_box {
+  font-size: 28px;
+  .flex_box {
+    padding: 0 22px;
+    height: 98px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .contact_title {
+    display: inline-block;
+    font-weight: bold;
+  }
+  .contact_count {
+    display: inline-block;
+    width: 420px;
+    color: #666;
+    font-weight: normal;
+  }
+  .contact_btn {
+    color: #4092ff;
+    font-weight: normal;
+  }
+  .tip{
+    padding: 0 22px;
+    margin-bottom: 28px;
+    color: #999;
+    .icon{
+      color: #FF9604;
+    }
+  }
+  .contact_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 2px solid #F2F4F9;
+    width: 702px;
+    margin: 0 auto;
+    .close {
+      padding: 20px;
+      padding-left: 0;
+      font-size: 40px;
+      color: #4092ff;
+    }
+    .info {
+      width: 630px;
+      padding: 28px 0;
+      .name {
+        font-size: 30px;
+        font-weight: bold;
+      }
+      .cardid {
+        margin-top: 6px;
+        font-size: 24px;
+        color: #999;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.0