diff --git a/src/assets/service/select.png b/src/assets/service/select.png
new file mode 100644
index 0000000..2f49b44
Binary files /dev/null and b/src/assets/service/select.png differ
diff --git a/src/common/validateIdent.js b/src/common/validateIdent.js
new file mode 100644
index 0000000..0d3eef5
--- /dev/null
+++ b/src/common/validateIdent.js
@@ -0,0 +1,159 @@
+const validateIdent = {
+    aIdentityCode_City: { // 城市代码列表  
+        11: "北京",
+        12: "天津",
+        13: "河北",
+        14: "山西",
+        15: "内蒙古",
+        21: "辽宁",
+        22: "吉林",
+        23: "黑龙江 ",
+        31: "上海",
+        32: "江苏",
+        33: "浙江",
+        34: "安徽",
+        35: "福建",
+        36: "江西",
+        37: "山东",
+        41: "河南",
+        42: "湖北 ",
+        43: "湖南",
+        44: "广东",
+        45: "广西",
+        46: "海南",
+        50: "重庆",
+        51: "四川",
+        52: "贵州",
+        53: "云南",
+        54: "西藏 ",
+        61: "陕西",
+        62: "甘肃",
+        63: "青海",
+        64: "宁夏",
+        65: "新疆",
+        71: "台湾",
+        81: "香港",
+        82: "澳门",
+        91: "国外 "
+    },
+    IdentityCode_isCardNo(card) { //检查号码是否符合规范，包括长度，类型  
+        var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
+        if (reg.test(card) === false) {
+            return false;
+        }
+        return true;
+    },
+    IdentityCode_checkProvince(card) { //取身份证前两位，校验省份    
+        var province = card.substr(0, 2);
+        if (validateIdent.aIdentityCode_City[province] == undefined) {
+            return false;
+        }
+        return true;
+    },
+    IdentityCode_checkBirthday(card) { //检查生日是否正确，15位以'19'年份来进行补齐。  
+        var len = card.length;
+        //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字    
+        if (len == '15') {
+            var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
+            var arr_data = card.match(re_fifteen); // 正则取号码内所含出年月日数据  
+            var year = arr_data[2];
+            var month = arr_data[3];
+            var day = arr_data[4];
+            var birthday = new Date('19' + year + '/' + month + '/' + day);
+            return validateIdent.IdentityCode_verifyBirthday('19' + year, month, day, birthday);
+        }
+        //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X    
+        if (len == '18') {
+            var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
+            var arr_data = card.match(re_eighteen); // 正则取号码内所含出年月日数据  
+            var year = arr_data[2];
+            var month = arr_data[3];
+            var day = arr_data[4];
+            var birthday = new Date(year + '/' + month + '/' + day);
+            return validateIdent.IdentityCode_verifyBirthday(year, month, day, birthday);
+        }
+        return false;
+    },
+    IdentityCode_verifyBirthday(year, month, day, birthday) { //校验日期 ，15位以'19'年份来进行补齐。
+        var now = new Date();
+        var now_year = now.getFullYear();
+        //年月日是否合理    
+        if (birthday.getFullYear() == year &&
+            (birthday.getMonth() + 1) == month &&
+            birthday.getDate() == day) {
+            //判断年份的范围（3岁到150岁之间)    
+            var time = now_year - year;
+            if (time >= 3 && time <= 150) {
+                return true;
+            }
+            return false;
+        }
+        return false;
+    },
+    IdentityCode_checkParity(card) { //校验位的检测  
+        card = validateIdent.IdentityCode_changeFivteenToEighteen(card); // 15位转18位    
+        var len = card.length;
+        if (len == '18') {
+            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
+            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
+            var cardTemp = 0,
+                i, valnum;
+            for (i = 0; i < 17; i++) {
+                cardTemp += card.substr(i, 1) * arrInt[i];
+            }
+            valnum = arrCh[cardTemp % 11];
+            if (valnum == card.substr(17, 1)) {
+                return true;
+            }
+            return false;
+        }
+        return false;
+    },
+    IdentityCode_changeFivteenToEighteen(card) { //15位转18位身份证号   
+        if (card.length == '15') {
+            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
+            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
+            var cardTemp = 0,
+                i;
+            card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
+            for (i = 0; i < 17; i++) {
+                cardTemp += card.substr(i, 1) * arrInt[i];
+            }
+            card += arrCh[cardTemp % 11];
+            return card;
+        }
+        return card;
+    },
+    IdentityCodeValid(card) { //   身份证号码检验主入口 
+        let pass = true;
+        let sex = ''
+            //是否为空    
+        if (pass && card === '')
+            pass = false;
+        //校验长度，类型    
+        if (pass && validateIdent.IdentityCode_isCardNo(card) === false)
+            pass = false;
+        //检查省份    
+        if (pass && validateIdent.IdentityCode_checkProvince(card) === false)
+            pass = false;
+        //校验生日    
+        if (pass && validateIdent.IdentityCode_checkBirthday(card) === false)
+            pass = false;
+        //检验位的检测    
+        if (pass && validateIdent.IdentityCode_checkParity(card) === false)
+            pass = false;
+        if (pass) {
+            var iCard = validateIdent.IdentityCode_changeFivteenToEighteen(card);
+            if (parseInt(iCard.charAt(16)) % 2 == 0) {
+                sex = "0"; // 女生  
+            } else {
+                sex = "1"; // 男生  
+            }
+            return true
+        } else {
+            return false
+        }
+    }
+}
+
+export default validateIdent.IdentityCodeValid //导出
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c1be8e4..4e2944d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '@/views/Home/Home.vue'
+import HomeUserInfo from '@/views/Home/HomeUserInfo.vue'
 
 import ServiceAbroadDetail from '@/views/Service/AbroadDetail.vue'
 import ServiceAbroadEvaluate from '@/views/Service/AbroadEvaluate.vue'
@@ -55,7 +56,14 @@ const routes = [{
             title: '红色网上游'
         }
     },
-
+    {
+        path: '/home_user_info',
+        name: 'HomeUserInfo',
+        component: HomeUserInfo,
+        meta: {
+            title: '红色网上游'
+        }
+    },
     {
         path: '/abroad_detail',
         name: 'ServiceAbroadDetail',
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 5695ba8..ffda249 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -17,18 +17,6 @@
     </div>
     <HomeOrder></HomeOrder>
     <div class="function">
-      <!-- <div class="item" @click="handleGroup">
-        <div class="left">
-          <van-icon class="icon" name="orders-o" />
-          <span>集团权限</span>
-        </div>
-        <div class="pic">
-          <img src="@/assets/home/bg2.png"/>
-          <span>已认证</span>
-          <van-icon name="arrow" />
-        </div>
-        <van-icon name="arrow" />
-      </div> -->
       <div class="item" @click="handleMyCard">
         <div class="left">
           <van-icon class="icon" name="discount" />
@@ -36,6 +24,13 @@
         </div>
         <van-icon name="arrow" />
       </div>
+      <div class="item" @click="handleMyInfo">
+        <div class="left">
+          <van-icon class="icon" name="user-circle-o" />
+          <span>个人信息</span>
+        </div>
+        <van-icon name="arrow" />
+      </div>
       <div class="item" @click="handelElder">
         <div class="left">
           <van-icon class="icon" name="friends-o" />
@@ -122,6 +117,10 @@ export default {
     handleMyCard () {
       this.$router.push({ name: 'CardBoxXST' })
     },
+    // 个人信息
+    handleMyInfo () {
+      this.$router.push({ name: 'HomeUserInfo' })
+    },
     // 合伙人中心
     handlePartner () {
       this.$toast('暂未开放，敬请期待！');
@@ -164,7 +163,7 @@ export default {
       }
     },
     // 获取用户信息
-    getUserInfo: function () {
+    getUserInfo () {
       this.mgop({
         api: 'mgop.sz.hswsy.getPortalUserByNum', // 必须
         host: 'https://mapi.zjzwfw.gov.cn/',
@@ -196,7 +195,6 @@ export default {
             }
           }
           this.showChildList = true
-
         },
         onFail: err => {
           console.log('err', err)
@@ -220,6 +218,7 @@ export default {
     //集团回调关闭页面
     closeJT () {
       this.showSchool = false
+      this.getUserInfo()
     },
     //查看是否有集团认证
     getRZ () {
diff --git a/src/views/Home/HomeUserInfo.vue b/src/views/Home/HomeUserInfo.vue
new file mode 100644
index 0000000..1e58458
--- /dev/null
+++ b/src/views/Home/HomeUserInfo.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="home_user_info">
+    <van-cell-group>
+      <van-cell title="姓名" :value="nickName" />
+      <!-- <van-popover v-model="showGenderPopover" trigger="click" :actions="actions" @select="onSelect">
+      <template #reference>
+        <van-cell title="性别">
+        {{gender==1?'男':gender==2?'女':'-'}}
+      </van-cell>
+      </template>
+    </van-popover> -->
+      
+      <van-cell title="身份证" :value="idCard" />
+      <van-cell title="手机号" :value="phone" />
+      <van-cell title="关注主学校" :value="schoolNamesChoose" />
+    </van-cell-group>
+    
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      nickName: '',//姓名
+      gender: '',//性别
+      idCard: '',//身份证
+      phone: '',//手机号
+      schoolNamesChoose: '',//学校
+      showGenderPopover:false,
+      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    }
+  },
+  mounted () {
+    this.centerNo = localStorage.getItem('centerNo');
+    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+    this.nickName = userInfo.nickName
+    this.gender = userInfo.gender
+    this.idCard = userInfo.idCard || '-'
+    this.phone = userInfo.phone
+    this.schoolNamesChoose = sessionStorage.getItem('schoolNamesChoose')
+  },
+  methods: {
+     onSelect(action) {
+      Toast(action.text);
+    },
+    // 获取用户信息
+    getUserInfo: function () {
+      this.$toast.loading({
+        message: '加载中...',
+        duration: 0,
+        forbidClick: true
+      })
+      this.mgop({
+        api: 'mgop.sz.hswsy.getPortalUserByNum', // 必须
+        host: 'https://mapi.zjzwfw.gov.cn/',
+        dataType: 'JSON',
+        type: 'GET',
+        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
+        headers: {
+          //   'isTestUrl': '1'
+        },
+        data: {
+          "userNum": this.centerNo
+        },
+        onSuccess: res => {
+        this.$toast.clear()
+          if (res.data.code == 200) {
+             const userInfo = res.data.data.userInfo
+          sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
+          }
+        },
+        onFail: err => {
+          console.log('err', err)
+        }
+      });
+    },
+  }
+}
+</script>
+<style lang="scss">
+.home_user_info {
+  height: 100%;
+  padding-top: 10px;
+  box-sizing: border-box;
+  background: rgb(247, 245, 251);
+  .van-cell {
+    padding: 30px 32px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Service/AbroadDetail.scss b/src/views/Service/AbroadDetail.scss
new file mode 100644
index 0000000..7d7cef6
--- /dev/null
+++ b/src/views/Service/AbroadDetail.scss
@@ -0,0 +1,731 @@
+.abroad_detail {
+    padding-bottom: 200px;
+    .header {
+        img {
+            width: 100%;
+        }
+    }
+    .countDown {
+        height: 130px;
+        width: 100%;
+        background-color: #201e2b;
+        .countDownTop {
+            height: 50%;
+            padding: 0 3vw;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 32px;
+            .countDownTime {
+                font-size: 24px;
+                .countDownFont {
+                    line-height: 34px;
+                    color: #333333;
+                    border-radius: 5px;
+                    margin: 0 8px;
+                }
+                div {
+                    width: 34px;
+                    text-align: center;
+                    display: inline-block;
+                    background-color: #ffe9b1;
+                }
+            }
+        }
+        .countDownBottom {
+            height: 50%;
+            padding: 0 3vw;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 24px;
+            .countDownBottomyellow {
+                display: inline-block;
+                height: 33px;
+                margin-right: 12px;
+                padding: 0 8px;
+                color: #333333;
+                font-size: 24px;
+                background-color: #ffe9b1;
+                border-radius: 4px;
+            }
+            .countDownBottomTime {
+                font-size: 2.8vw;
+                color: #ffffff;
+                opacity: 0.85;
+            }
+            .countDownAbout {
+                text-decoration: underline;
+            }
+        }
+    }
+    .uni_text {
+        width: 100%;
+        background: #fff;
+        padding: 24px 34px;
+        box-sizing: border-box;
+        .course_price {
+            font-size: 38px;
+            font-weight: bold;
+            color: red;
+            .redmini {
+                font-size: 25px;
+            }
+            .tint {
+                font-size: 25px;
+                font-weight: normal;
+                color: #909399;
+                margin-left: 2vw;
+                text-decoration: line-through;
+            }
+        }
+        .course_price_free {
+            font-size: 34px;
+            font-weight: bold;
+            color: red;
+            display: flex;
+            justify-content: space-between;
+            .des {
+                color: #333;
+            }
+        }
+        .course_coupons {
+            height: 70px;
+            font-size: 27px;
+            // color: #4092FF;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .fontBlue {
+                color: #4092ff;
+            }
+        }
+        .course_name {
+            font-size: 34px;
+            font-weight: bold;
+        }
+        .course_info {
+            font-size: 24px;
+            color: #999;
+            margin-top: 16px;
+        }
+        .address {
+            font-size: 24px;
+            color: #999;
+            margin-top: 16px;
+            .icon {
+                color: #000;
+            }
+        }
+        .rate {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+            div>span {
+                font-size: 30px;
+                color: #ffcc00;
+                margin-left: 30px;
+            }
+            >span {
+                font-size: 26px;
+            }
+        }
+        .tag_box {
+            padding-top: 10px;
+            .tag {
+                display: inline-block;
+                margin-top: 10px;
+                margin-right: 12px;
+                color: #4092ff;
+                font-size: 24px;
+                border-radius: 8px;
+                border: 2px solid #4092ff;
+                padding: 2px 10px;
+            }
+        }
+    }
+    .custom_made {
+        height: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 24px;
+        box-sizing: border-box;
+        background: #4D9EFF;
+        font-size: 28px;
+        color: #fff;
+        p {
+            width: 610px;
+        }
+    }
+    .package {
+        padding: 18px 22px;
+        .package_title {
+            font-size: 28px;
+            color: #999;
+        }
+        .package_box {
+            display: flex;
+            white-space: nowrap;
+            margin-top: 22px;
+            .package_item {
+                position: relative;
+                width: 128px;
+                height: 152px;
+                border-radius: 12px;
+                border: 2px solid #dde3ef;
+                box-sizing: border-box;
+                display: inline-flex;
+                align-content: center;
+                justify-content: center;
+                flex-wrap: wrap;
+                vertical-align: top;
+                margin-right: 16px;
+                flex-shrink: 0;
+                &.active {
+                    border-color: #3F92FF;
+                    .select {
+                        display: block;
+                    }
+                }
+                p {
+                    width: 100%;
+                    margin: 0;
+                    text-align: center;
+                }
+                .more_icon {
+                    width: 36px;
+                    margin-top: 10px;
+                }
+                .more_text {
+                    font-size: 22px;
+                    color: #fff;
+                    margin-top: 22px;
+                }
+                .date {
+                    font-size: 32px;
+                    font-weight: bold;
+                }
+                .week {
+                    font-size: 22px;
+                    color: #999;
+                }
+                .price {
+                    font-size: 28px;
+                    color: #ff2b2b;
+                    margin-top: 14px;
+                    span {
+                        font-size: 20px;
+                    }
+                }
+                .index {
+                    margin-right: 10px;
+                    font-size: 26px;
+                    font-weight: bold;
+                    color: #333;
+                }
+                .name {
+                    margin-top: 8px;
+                    font-size: 26px;
+                    white-space: nowrap;
+                }
+                .select {
+                    display: none;
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                    width: 46px;
+                    height: 48px;
+                }
+            }
+            .package_item_more {
+                background: #3f92ff;
+                border: 2px solid #3f92ff;
+                box-shadow: 6px 12px 16px 0px rgba(63, 146, 255, 0.29);
+                margin-right: 0;
+            }
+            .package_item_type {
+                width: auto;
+                height: 118px;
+                padding: 0 34px;
+                .price {
+                    margin-top: 0;
+                }
+            }
+        }
+        .package_des {
+            margin-top: 28px;
+            font-size: 26px;
+            line-height: 40px;
+            color: #A9A9AA;
+        }
+    }
+    .notime {
+        width: 100%;
+    }
+    .content_box {
+        position: relative;
+        .content_all {
+            overflow: hidden;
+            height: 580px;
+            // font-size: 26px;
+            // line-height: 36px;
+            font-size: 31px !important;
+            line-height: 40px !important;
+            letter-spacing: 1.6px;
+            color: #666;
+            // padding-bottom: 130px;
+            img {
+                width: 100%;
+            }
+        }
+        /* 展开 */
+        .open {
+            height: auto;
+        }
+        .extend_wrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 26px;
+            padding: 40px 0;
+            color: #4092ff;
+            margin-top: -40px;
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 100%);
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+    }
+    .tag_item {
+        padding: 22px;
+        .tag_title {
+            font-size: 34px;
+            font-weight: bold;
+            margin-bottom: 32px;
+        }
+        .tag_text {
+            // font-size: 24px;
+            // line-height: 40px;
+            font-size: 28px !important;
+            line-height: 44px !important;
+            padding: 16px 0;
+        }
+    }
+    .cardCont {
+        // font-size: 24px;
+        font-size: 28px !important;
+        table {
+            border-radius: 5px;
+            width: 100%;
+            border: 1px solid #dde3ef;
+            td {
+                border: 1px solid #dde3ef;
+                text-align: center;
+                background: rgb(245, 246, 250);
+            }
+            .td_left {
+                width: 132px;
+                background: #fff;
+                box-sizing: border-box;
+            }
+        }
+    }
+    .courseContent {
+        li:not(:last-child) {
+            border-bottom: 1px solid #eee;
+        }
+        li:first-child {
+            .left {
+                color: #fa9b00;
+                border: 1px solid #fa9b00;
+                background-color: #fef4d9;
+            }
+        }
+        li:nth-child(3n + 1) {
+            .left {
+                color: #fa9b00;
+                border: 1px solid #fa9b00;
+                background-color: #fef4d9;
+            }
+        }
+        li:nth-child(3n-1) {
+            .left {
+                color: #fa008c;
+                border: 1px solid #fa008c;
+                background-color: #ffeffc;
+            }
+        }
+        li:nth-child(3n) {
+            .left {
+                color: #0076fa;
+                border: 1px solid #0076fa;
+                background-color: #efffff;
+            }
+        }
+        li {
+            position: relative;
+            margin-top: 20px;
+            padding-bottom: 10px;
+            .left {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 120px;
+                font-size: 26px;
+                text-align: center;
+                border-radius: 3px;
+                padding: 3px;
+                box-sizing: border-box;
+                font-weight: 600;
+            }
+            h3 {
+                color: #202228;
+                // font-size: 32px;
+                font-size: 30px !important;
+                font-weight: 400;
+                margin: 0;
+                padding-left: 160px;
+                word-break: break-all;
+            }
+            .item {
+                margin-top: 10px;
+                img {
+                    width: 100%;
+                }
+                p {
+                    margin: 0;
+                    margin-top: 10px;
+                    color: #a7a7aa;
+                    // font-size: 28px;
+                    font-size: 31px !important;
+                    b {
+                        // font-size: 32px;
+                        font-size: 35px !important;
+                        font-weight: 400;
+                        color: #000000;
+                        margin-right: 10px;
+                    }
+                    span {
+                        // font-size: 24px;
+                        font-size: 27px !important;
+                    }
+                }
+            }
+        }
+    }
+    .base {
+        padding: 28px 24px;
+        img {
+            width: 98px;
+            height: 98px;
+            display: inline-block;
+            vertical-align: top;
+            border-radius: 12px;
+        }
+        .center {
+            width: 550px;
+            display: inline-block;
+            margin-left: 20px;
+            .basename {
+                // font-size: 32px;
+                font-size: 35px !important;
+                font-weight: bold;
+            }
+            .address {
+                // font-size: 24px;
+                font-size: 27px !important;
+                margin-top: 12px;
+            }
+            .tag {
+                display: inline-block;
+                // font-size: 24px;
+                font-size: 26px !important;
+                margin-top: 14px;
+                background: #f5f6fa;
+                border-radius: 6px;
+                padding: 6px 20px;
+            }
+        }
+    }
+    .top_border {
+        border-top: 16px solid #f6f7fa;
+         ::v-deep.van-tab {
+            .van-tab__text {
+                font-size: 34px !important;
+            }
+        }
+    }
+    .popup_content {
+        width: 408px;
+        height: 346px;
+        overflow: hidden;
+        img {
+            display: block;
+            width: 86px;
+            height: 86px;
+            margin: 0 auto;
+            margin-top: 64px;
+        }
+        p:first-of-type {
+            text-align: center;
+            margin-top: 46px;
+            // font-size: 36px;
+            font-size: 39px !important;
+        }
+        p:last-of-type {
+            text-align: center;
+            margin-top: 16px;
+            // font-size: 26px;
+            font-size: 29px !important;
+            color: #999;
+        }
+    }
+    .Collection {
+        background-color: white;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 28px 22px;
+        box-sizing: border-box;
+        padding-bottom: 50px;
+        z-index: 500;
+        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34);
+        .box1 {
+            width: 40%;
+        }
+        .box2 {
+            width: 60%;
+        }
+        .box {
+            display: inline-block;
+            vertical-align: middle;
+            color: #666666;
+            .icon {
+                display: inline-block;
+                width: 45%;
+                text-align: center;
+                // font-size: 24px;
+                font-size: 26px !important;
+                p {
+                    // margin: 0;
+                    color: #999999;
+                    margin-top: 8px;
+                }
+                i {
+                    font-size: 48px;
+                    color: rgb(45, 45, 45);
+                    font-weight: bold;
+                }
+            }
+            .icon.active {
+                color: 0ce39d;
+                i {
+                    color: #0ce39d;
+                }
+            }
+            span {
+                display: inline-block;
+                width: 100%;
+                line-height: 92px;
+                box-sizing: border-box;
+                border-radius: 100px;
+                color: white;
+                // font-size: 32px;
+                font-size: 35px !important;
+                background: #4092ff;
+                text-align: center;
+                box-shadow: 0px 10px 40px 0px #a0c9ff;
+                b {
+                    display: inline-block;
+                    vertical-align: middle;
+                    margin-left: 20px;
+                    color: white;
+                }
+                i {
+                    vertical-align: middle;
+                    font-size: 44px;
+                    font-weight: bold;
+                }
+            }
+            .disabled {
+                color: #999;
+                background: #edeced;
+                box-shadow: none;
+            }
+        }
+    }
+    .pintuan_about {
+        width: 592px;
+        box-sizing: border-box;
+        padding: 0 50px;
+        .about_img {
+            width: 112px;
+            margin: 0 auto;
+            margin-top: 30px;
+            display: block;
+        }
+        .about_title {
+            font-size: 34px;
+            font-weight: bold;
+            text-align: center;
+        }
+        .about_content {
+            font-size: 30px;
+            margin-top: 20px;
+        }
+        .about_know {
+            font-size: 32px;
+            text-align: center;
+            color: #3385ff;
+            margin-top: 60px;
+            margin-bottom: 44px;
+        }
+    }
+    .show_tip_title {
+        img {
+            width: 112px;
+        }
+        p {
+            margin-top: -20px;
+            margin-bottom: 20px;
+        }
+    }
+    .show_tip {
+        padding: 0 20px;
+        font-size: 28px;
+        letter-spacing: 1px;
+        text-align: left;
+        line-height: 64px;
+        color: rgb(153, 153, 153);
+        b {
+            color: #000;
+        }
+    }
+    .tip_checkbox {
+        font-size: 26px;
+        margin-top: 24px;
+        margin-bottom: 60px;
+        margin-left: 50px;
+    }
+}
+
+.elder {
+    .abroad_detail {
+        .countDown {
+            height: auto;
+            .countDownTop {
+                display: block;
+                font-size: 40px;
+                .countDownTime {
+                    font-size: 40px;
+                    padding: 10px 0;
+                    div {
+                        width: 60px;
+                    }
+                    .countDownFont {
+                        line-height: 60px;
+                    }
+                }
+            }
+            .countDownBottom {
+                display: block;
+                font-size: 40px;
+                .countDownBottomyellow {
+                    height: 60px;
+                    font-size: 40px;
+                }
+            }
+        }
+        .uni_text {
+            .course_price {
+                font-size: 48px;
+                .redmini,
+                .tint {
+                    font-size: 36px;
+                }
+            }
+            .course_name {
+                font-size: 44px;
+            }
+            .course_info {
+                font-size: 40px;
+            }
+            .address {
+                font-size: 40px;
+            }
+            .rate>span {
+                font-size: 36px;
+            }
+            .tag_box .tag {
+                font-size: 40px;
+            }
+        }
+        .package {
+            .package_title {
+                font-size: 44px;
+            }
+            .package_item {
+                .date {
+                    font-size: 40px;
+                }
+                .week {
+                    font-size: 34px;
+                }
+                .price {
+                    font-size: 34px;
+                }
+            }
+        }
+        .content_box .content_all {
+            font-size: 40px !important;
+            line-height: 60px !important;
+        }
+        .tag_item {
+            .tag_title {
+                font-size: 44px;
+            }
+            .tag_text {
+                font-size: 40px !important;
+                line-height: 60px !important;
+            }
+        }
+        .base .center {
+            .basename {
+                font-size: 44px !important;
+            }
+            .address {
+                font-size: 40px !important;
+            }
+        }
+        .Collection .box {
+            span {
+                font-size: 44px !important;
+            }
+            .icon {
+                font-size: 40px !important;
+            }
+        }
+        .pintuan_about {
+            .about_title {
+                font-size: 44px;
+            }
+            .about_box {
+                height: 600px;
+                overflow: auto;
+            }
+            .about_content {
+                font-size: 36px;
+            }
+            .about_know {
+                font-size: 40px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/Service/AbroadDetail.vue b/src/views/Service/AbroadDetail.vue
index f967230..8b2b8df 100644
--- a/src/views/Service/AbroadDetail.vue
+++ b/src/views/Service/AbroadDetail.vue
@@ -10,47 +10,19 @@
       <img v-else src="@/assets/service/defCoure.jpg" alt="" />
     </div>
     <!--倒计时-->
-    <div class="countDown" v-show="detailData.clusterTime && timeTamp * 1 > 0">
-      <div class="countDownTop">
-        <div>{{packageArr[0]?packageArr[0].day:''}} {{detailData.applyCount>=detailData.minPeopleCount?'报名截止时间：':'团期截止倒计时'}}</div>
-        <div v-if="detailData.applyCount>=detailData.minPeopleCount">{{detailData.periodOfValidity}}</div>
-        <div class="countDownTime" v-else>
-          <div class="countDownFont">{{ showTime.day }}</div>
-          天
-          <div class="countDownFont">{{ showTime.hour }}</div>
-          时
-          <div class="countDownFont">{{ showTime.minute }}</div>
-          分
-          <div class="countDownFont">{{ showTime.second }}</div>
-          秒
-        </div>
-      </div>
-      <div class="countDownBottom">
-        <div>
-          <div class="countDownBottomyellow" v-show="detailData.minPeopleCount">
-            {{ detailData.clusterName }}
-          </div>
-          <span v-if="detailData.applyCount>=detailData.minPeopleCount">已报名 {{detailData.applyCount}}/{{detailData.stockCount}}人</span>
-          <span v-else>最低成团数{{detailData.minPeopleCount}}人/已报名{{detailData.applyCount}}人</span>
-          <!-- 已报名:<span>{{ detailData.applyCount }}</span><span>/{{ detailData.stockCount }}</span> -->
-        </div>
-        <div class="countDownAbout" @click="showPintuanAbout=true">关于拼团？</div>
-      </div>
-    </div>
-    <div class="uni_text">
-      <!-- <div class="course_price" v-if="detailData.showPrice!=0">
-        <span>¥ {{ detailData.showPrice }}</span><span class="redmini">起</span><span class="tint">{{ detailData.productPrice }}</span>
+    <count-down v-if="detailData&&packageArr[packageActive]" :productId="detailData.id" :packageArr="packageArr" :day="packageArr[packageActive].day" :bindId="packageArr[packageActive].comboInfoList[packageTypeActive].bindId" :comboId="packageArr[packageActive].comboInfoList[packageTypeActive].id"></count-down>
+
+    <div class="uni_text" v-if="initPackageArr">
+      <!-- <div class="course_price" v-if="packageArr.length>0">
+        <span>¥ {{ detailData.showPrice }}</span><span class="redmini">起/{{detailData.unitName}}</span><span class="tint">{{ detailData.productPrice }}</span>
       </div>
       <div class="course_price_free" v-else>
         <span>¥ {{ detailData.price }}</span>
         <span class="des">正在排期</span>
       </div> -->
-      <div class="course_coupons" v-if="proCoupon.length>0">
-        <div>
-          <van-tag v-for="(item,index) in proCoupon" :key="index" color="#ffffff" text-color="#FF2B2B">{{proCouponHas?'已领取：':''}}{{item.title}}</van-tag>
-        </div>
-        <div @click="toCoupons" class="fontBlue">领取 ></div>
-      </div>
+      <!-- 优惠券 -->
+      <abroad-coupon v-if="detailData&&centerNo" :detailDataId="detailData.id" :centerNo="centerNo"></abroad-coupon>
+
       <p class="course_name">{{ detailData.course_name }}</p>
       <p class="course_info">{{ detailData.course_info }}</p>
       <p class="address" v-if="detailData.provinceAddress">
@@ -63,15 +35,9 @@
           detailData.addressDetail
         }}
       </p>
-      <div class="rate" @click="handleEvaluate">
-        <div>
-          <van-rate v-model="evaluationData.evaluationScore" color="#FFCC00" :size="16" readonly />
-          <span>{{ evaluationData.evaluationScore }}</span>
-        </div>
-        <span>共{{evaluationData.evaluationCount}}个客户评价
-          <van-icon name="arrow" />
-        </span>
-      </div>
+      <!-- 商品评价 -->
+      <abroad-evaluate v-if="courseId" :courseId="courseId"></abroad-evaluate>
+      <!-- 商品标签 -->
       <div class="tag_box">
         <template v-for="(tag, index) in detailData.course_labels">
           <span class="tag" v-if="tag != ''" :key="index">{{ tag }}</span>
@@ -81,94 +47,39 @@
     <div class="package top_border">
       <p class="package_title">套餐类型/日期</p>
       <div class="package_box" v-if="packageArr.length>0">
-        <div class="package_item" v-for="(item, index) in packageArr" :key="index" @click="checkDatePackage(item.date)">
-          <p class="date">{{ item.day }}</p>
-          <p class="week">{{ item.week }}</p>
-          <!-- <p class="price"><span>¥</span>{{ item.marketPrice }}</p> -->
+        <div style="overflow:auto;">
+          <div class="package_item" :class="packageActive==index?'active':''" v-for="(item, index) in packageArr" :key="index" @click="handlePackageDay(index)">
+            <p class="date">{{ item.day }}</p>
+            <p class="week">{{ item.week }}</p>
+            <p class="price"><span>¥</span>{{ item.marketPrice }}<span class="des">起</span></p>
+            <img class="select" src="@/assets/service/select.png" alt="" />
+          </div>
         </div>
-        <div class="package_item package_item_more" @click="checkDatePackage()" v-if="packageArr.length > 3">
+        <div class="package_item package_item_more" @click="checkDatePackage()" v-if="packageArr.length>5">
           <img class="more_icon" src="@/assets/service/more.png" alt="" />
           <p class="more_text">查看更多</p>
         </div>
       </div>
+      <img class="notime" v-if="packageArr.length==0" src="@/assets/service/notime.png" alt="">
     </div>
-    <img class="notime" v-if="packageArr.length==0" src="@/assets/service/notime.png" alt="">
-
-    <van-tabs class="tabs top_border" v-model="active" swipeable :ellipsis="false" color="#4092FF" scrollspy sticky>
-      <van-tab title="产品详情">
-        <div class="tag_item" v-if="detailData.productFeatures">
-          <p class="tag_title">产品特色</p>
-          <p class="tag_text" v-html="detailData.productFeatures"></p>
-        </div>
-        <div class="tag_item" v-if="detailData.productDescription">
-          <p class="tag_title">产品描述</p>
-          <div class="content_box">
-            <div class="content_all" :class="isOpen ? 'open' : ''">
-              <p v-html="detailData.productDescription"></p>
-            </div>
-          </div>
-        </div>
-        <div class="tag_item" v-if="
-            detailData.courseContentList &&
-            detailData.courseContentList[0].content != ''
-          ">
-          <p class="tag_title">服务内容</p>
-          <ul class="courseContent">
-            <li v-for="(n, i) in detailData.courseContentList" :key="n.id">
-              <span class="left" v-if="n.title">{{ n.title }}</span>
-              <h3>{{ n.content }}</h3>
-              <div class="item" v-for="(k, j) in n.courseFileList" :key="i + '' + j">
-                <div>
-                  <video v-if="k.url && k.url.indexOf('.mp4') > -1" id="video" :src="k.url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4"></video>
-                </div>
-                <div>
-                  <img v-if="k.url && k.url.indexOf('.mp4') == -1" :src="k.url" />
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="tag_item" v-if="courseTable.length > 0 && showCourseTable">
-          <p class="tag_title">课程表</p>
-          <div class="cardCont" v-for="(item, index) in courseTable" :key="index">
-            <table cellspacing="0" cellpadding="8">
-              <tbody v-html="item"></tbody>
-            </table>
+    <div class="package top_border" v-if="packageArr.length>0&&packageArr[packageActive].comboInfoList.length>1">
+      <div class="package_box">
+        <div style="overflow:auto;">
+          <div class="package_item package_item_type" :class="packageTypeActive==index?'active':''" v-for="(item, index) in packageArr[packageActive].comboInfoList" :key="index" @click="packageTypeActive=index">
+            <p class="price"><span class="index">套餐{{index+1}}</span><span>¥</span>{{ item.actualPrice }}</p>
+            <p class="name">{{item.comboName}}</p>
+            <img class="select" src="@/assets/service/select.png" alt="" />
           </div>
         </div>
-        <div class="tag_item" v-if="detailData.extraService">
-          <p class="tag_title">附送服务</p>
-          <p class="tag_text" v-html="detailData.extraService"></p>
-        </div>
-        <div class="tag_item" v-if="detailData.serviceGuarantees">
-          <p class="tag_title">服务保障和承诺</p>
-          <p class="tag_text" v-html="detailData.serviceGuarantees"></p>
-        </div>
-      </van-tab>
-      <van-tab title="费用说明" v-if="detailData.feeDescription">
-        <div class="tag_item">
-          <p class="tag_title">费用说明</p>
-          <p class="tag_text" v-html="detailData.feeDescription"></p>
-        </div>
-      </van-tab>
-      <van-tab title="订购须知" v-if="detailData.notice">
-        <div class="tag_item">
-          <p class="tag_title">订购须知</p>
-          <p class="tag_text" v-html="detailData.notice"></p>
-        </div>
-      </van-tab>
-    </van-tabs>
-    <div class="base top_border" v-if="baseData">
-      <img v-if="baseData.coverList.length > 0" :src="baseData.coverList[0].cover_url" alt="" />
-      <div class="center">
-        <p class="basename">{{ baseData.baseName }}</p>
-        <p class="address">
-          <van-icon name="location-o" />{{ baseData.city }}{{ baseData.area
-          }}{{ baseData.address }}
-        </p>
-        <p class="tag">{{ baseData.baseLabel.join("/") }}</p>
       </div>
+      <!-- 套餐说明 -->
+      <p class="package_des" v-if="packageArr[packageActive]&&packageArr[packageActive].comboInfoList[packageTypeActive].comboDescrption">套餐说明<br>{{packageArr[packageActive].comboInfoList[packageTypeActive].comboDescrption}}</p>
     </div>
+    <!-- 商品详情 -->
+    <abroad-des v-if="detailData" :detailData="detailData"></abroad-des>
+    <!-- 基地信息 -->
+    <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base>
+
     <div class="Collection">
       <div class="box box1">
         <div class="icon" @click="backHome">
@@ -186,23 +97,10 @@
       </div>
       <div class="box box2">
         <span v-if="packageArr.length > 0&&detailData.applyCount>=detailData.stockCount" class="disabled">已满团</span>
-        <span v-else-if="packageArr.length > 0" @click="checkDatePackage(packageArr[0].date)">去订购</span>
+        <span v-else-if="packageArr.length > 0" @click="checkDatePackage()">去订购</span>
         <span v-else class="disabled">拼团请咨询客服</span>
       </div>
     </div>
-    <van-popup v-model="showPintuanAbout" round>
-      <div class="pintuan_about">
-        <img class="about_img" src="@/assets/service/tip.png" alt="">
-        <p class="about_title">拼团规则说明</p>
-        <div class="about_box">
-          <p class="about_content">1、拼团展示默认为最近活动档期，选择其它档期请时刻注意成团动态。</p>
-          <p class="about_content">2、在限时截止后，报名人数未达最低成团数，则结束本团活动，系统将在72小时内，全额退还！</p>
-          <p class="about_content">3、报名人数达到最低成团要求后，则拼团成功，凡在报名截止时间内未达最大限团人数，则可放心参与。</p>
-          <p class="about_content">4、已成团的活动，除特殊情况等不可抗拒因素外，活动如期举行。</p>
-        </div>
-        <p class="about_know" @click="showPintuanAbout=false">我知道了</p>
-      </div>
-    </van-popup>
     <van-dialog v-model="showTip" title="温馨提示" show-cancel-button confirm-button-color="#3385FF" cancel-button-color="#999" confirm-button-text="同意" cancel-button-text="再想想" @confirm="tipConfirm">
       <div class="show_tip_title" slot="title">
         <img src="@/assets/service/tip.png" alt="">
@@ -214,31 +112,25 @@
   </div>
 </template>
 <script>
+import AbroadDes from './component/AbroadDetail/AbroadDes';
+import AbroadBase from './component/AbroadDetail/AbroadBase';
+import AbroadEvaluate from './component/AbroadDetail/AbroadEvaluate';
+import CountDown from './component/AbroadDetail/CountDown';
+import AbroadCoupon from './component/AbroadDetail/AbroadCoupon';
+import './AbroadDetail.scss';
 export default {
   name: "ServiceAbroadDetail",
   data () {
     return {
-      isOpen: true,
       courseId: "",
       detailData: "",
-      active: 0,
-      courseTable: [], //课程表
       packageData: [], //未处理过格式的套餐表
+      packageActive: 0,
+      packageTypeActive: 0,
       packageArr: [], //套餐时间价格
-      evaluationData: '',//评价
-      baseData: "", //基地信息
+      initPackageArr: false,//packageArr已生成
       showCourseTable: true,
-      showTime: {
-        day: "",
-        hour: "",
-        minute: "",
-        second: "",
-      },
-      timeTamp: "",
       unionId: '',
-      proCoupon: [],//优惠券
-      proCouponHas: false,//优惠券已领取
-      showPintuanAbout: false,
       centerNo: '',
       showTip: false,
       PackageQuery: '',
@@ -252,69 +144,42 @@ export default {
     this.GetCourseDetail();
   },
   methods: {
-    // 展开关闭院校简介
-    extend_btn () {
-      this.isOpen = !this.isOpen;
-    },
-    //倒计时计算
-    timeDown () {
-      var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000;
-      var nowTime = Date.parse(new Date());
-      let timeTamp = clusterTime / 1000 - nowTime / 1000;
-      // console.log(timeTamp)
-      this.timeTamp = timeTamp;
-      // console.log(timeTamp)
-      let k = this.calculateDiffTime(timeTamp);
-      // console.log(k)
+    // 点击套餐日期
+    handlePackageDay (index) {
+      this.packageActive = index;
+      this.packageTypeActive = 0;//重置套餐类型选择
+      //TODO 获取该日所包含的套餐
     },
-    calculateDiffTime (timeDiff) {
-      var day = parseInt(timeDiff / 86400);
-      var hour = parseInt((timeDiff % 86400) / 3600);
-      var minute = parseInt(((timeDiff % 86400) % 3600) / 60);
-      var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60);
 
-      this.showTime = {
-        day,
-        hour,
-        minute,
-        second,
-      };
-      day = day ? day + "天" : "";
-      hour = hour ? hour + "时" : "";
-      minute = minute ? minute + "分" : "";
-      second = second ? second + "秒" : "";
-      return day + hour + minute + second;
-    },
     // 点击预约
-    checkDatePackage (date) {
-
-      if (this.packageArr[0].date == date)
-        if (this.detailData.applyCount >= this.detailData.stockCount && this.packageArr[0].date == date) {
-          this.$toast('已满团')
-          return;
-        }
-      let query = {};
-      if (date || date === 0) {
-        query = { date: date };
-      }
+    checkDatePackage () {
+      // if (this.packageArr[0].date == date) {
+      //   if (this.detailData.applyCount >= this.detailData.stockCount && this.packageArr[0].date == date) {
+      //     this.$toast('已满团')
+      //     return;
+      //   }
+      // }
+      const tagIndex = this.packageArr[this.packageActive].comboInfoList[this.packageTypeActive].tagIndex
+      console.log(this.packageArr[this.packageActive])
+      let query = { date: this.packageArr[this.packageActive].date, Index1: tagIndex[0], Index2: tagIndex[1] };
       this.PackageQuery = query
       const AbroadDetailTipChecked = sessionStorage.getItem('AbroadDetailTipChecked');
-      if(AbroadDetailTipChecked){
+      if (AbroadDetailTipChecked) {
         this.$router.push({ name: "ServiceDatePackage", query: query });
-      }else{
+      } else {
         this.showTip = true;
       }
     },
     tipConfirm () {
-      if(this.tipChecked){
-        sessionStorage.setItem('AbroadDetailTipChecked',1)
+      if (this.tipChecked) {
+        sessionStorage.setItem('AbroadDetailTipChecked', 1)
       }
       this.$router.push({ name: "ServiceDatePackage", query: this.PackageQuery });
     },
-    // 获取商品详情
+    // 获取产品详情
     GetCourseDetail () {
       if (!this.courseId) {
-        this.$toast.fail('商品id缺失，请从正确的途径访问')
+        this.$toast.fail('产品id缺失，请从正确的途径访问')
         return;
       }
       this.$toast.loading({
@@ -339,7 +204,7 @@ export default {
           this.$toast.clear();
           if (res.data.data && res.data.data.id !== 0) {
             let detailData = res.data.data;
-            // console.log(detailData)
+            console.log('产品详情：', detailData)
             detailData.course_labels = detailData.course_labels?.split(",");
             this.detailData = detailData;
             localStorage.setItem(
@@ -352,21 +217,6 @@ export default {
               })
             );
             this.getPackageData(); //获取套餐列表
-            this.getOrderCoupon(); //获取商品可使用优惠券
-            this.getEvaluationSummary();//获取评价
-            let timer = setInterval(() => {
-              this.timeDown(); //倒计时
-            }, 1000);
-            this.$once("hook:beforeDestroy", () => {
-              clearInterval(timer); //清理定时器
-            });
-            this.$nextTick(() => {
-              this.GetOneBase(detailData.baseId); //获取单个基地
-              // this.setPackageArr();//设置套餐
-              for (let i in detailData.courseScheduleList) {
-                this.getWeekCard(i);
-              }
-            });
           } else {
             let message = res.data.message;
             if (!message) {
@@ -380,82 +230,7 @@ export default {
         }
       });
     },
-    //获取商品可使用优惠券
-    getOrderCoupon () {
-      this.mgop({
-        api: 'mgop.sz.hswsy.orderCoupon', // 必须
-        host: 'https://mapi.zjzwfw.gov.cn/',
-        dataType: 'JSON',
-        type: 'POST',
-        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
-        headers: {
-          //   'isTestUrl': '1'
-        },
-        data: {
-          "proId": this.detailData.id,
-          "userId": this.centerNo,
-        },
-        onSuccess: res => {
-          if (res.data.data) {
-            if (res.data.data.has.length > 0) {
-              this.proCoupon = res.data.data.has
-              localStorage.setItem("proCoupon", JSON.stringify(this.proCoupon))
-              this.chooseDefaultUseCard(res.data.data.has)//设置默认选中的优惠券
-              this.proCouponHas = true;
-            } else if (res.data.data.get.length > 0) {
-              this.proCoupon = {
-                title: '您有可领优惠券'
-              }
-            }
-          }
-        },
-        onFail: err => {
-          console.log('err', err)
-        }
-      });
-    },
-    // 设置默认选中的优惠券
-    chooseDefaultUseCard (has) {
-      if (has.length > 1) {
-        let useCard = has[0];
-        for (let i in has) {
-          console.log(Number(has[i].couponPrice) > Number(useCard.couponPrice))
-          if (Number(has[i].couponPrice) > Number(useCard.couponPrice)) {
-            useCard = has[i]
-          }
-        }
-        // console.log('useCard', useCard)
-        this.proCoupon = [useCard]
-        localStorage.setItem('useCard', JSON.stringify(useCard))
 
-      } else {
-        localStorage.setItem('useCard', JSON.stringify(this.proCoupon[0]))
-      }
-    },
-    // 获取评价
-    getEvaluationSummary () {
-      this.mgop({
-        api: 'mgop.sz.hswsy.EvaluationSummary', // 必须
-        host: 'https://mapi.zjzwfw.gov.cn/',
-        dataType: 'JSON',
-        type: 'GET',
-        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
-        headers: {
-          //   'isTestUrl': '1'
-        },
-        data: {
-          "courseId": this.courseId,
-        },
-        onSuccess: res => {
-          if (res.data.data) {
-            this.evaluationData = res.data.data
-          }
-        },
-        onFail: err => {
-          console.log('err', err)
-        }
-      });
-    },
     // 获取套餐列表
     getPackageData () {
       let startDate = this.Moment().format("YYYY-MM-DD");
@@ -475,6 +250,7 @@ export default {
           "endDate": endDate,
         },
         onSuccess: res => {
+          console.log('套餐列表:', res.data.data);
           if (res.data.data) {
             let allPackage = res.data.data;
             let usefulPackage = [];
@@ -483,7 +259,6 @@ export default {
                 usefulPackage.push(allPackage[i]);
               }
             }
-            console.log(usefulPackage);
             this.packageData = usefulPackage;
             localStorage.setItem(
               "packageData",
@@ -499,7 +274,7 @@ export default {
     },
     // 设置套餐价格
     setPackageArr () {
-      console.log(this.packageData);
+      console.log('含套餐的日期：', this.packageData);
       let packageArr = [];
       for (let i in this.packageData) {
         let packageDate = this.Moment(
@@ -522,108 +297,30 @@ export default {
                       : week == 0
                         ? "周日"
                         : "";
-        //超出部分不显示
-        if (packageArr.length > 3) {
-          this.packageArr = packageArr;
-          return;
+        let comboInfoList = [];
+        let comboList = JSON.parse(JSON.stringify(this.packageData[i]?.comboList))
+        // 为套餐添加下标
+        let marketPrice = 999;
+        for (let j in comboList) {
+          for (let k in comboList[j].comboInfoList) {
+            comboList[j].comboInfoList[k].tagIndex = [j, k]
+            comboList[j].comboInfoList[k].bindId = comboList[j].id
+            if (comboList[j].comboInfoList[k].actualPrice < marketPrice) {
+              marketPrice = comboList[j].comboInfoList[k].actualPrice
+            }
+          }
+          comboInfoList.push(...comboList[j].comboInfoList)
         }
         packageArr.push({
           day: packageDate.format("M/D"),
           date: packageDate.format("YYYY-MM-DD"),
           week: week,
-          marketPrice: this.packageData[i]?.comboList[0]?.actualPrice,
+          marketPrice: marketPrice,
+          comboInfoList: comboInfoList,
         });
       }
       this.packageArr = packageArr;
-    },
-    // 获取单个基地
-    GetOneBase (baseId) {
-      this.mgop({
-        api: 'mgop.sz.hswsy.GetOneBase', // 必须
-        host: 'https://mapi.zjzwfw.gov.cn/',
-        dataType: 'JSON',
-        type: 'GET',
-        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
-        headers: {
-          //   'isTestUrl': '1'
-        },
-        data: {
-          "id": baseId,
-        },
-        onSuccess: res => {
-          if (res.data.data) {
-            this.baseData = res.data.data;
-          }
-        },
-        onFail: err => {
-          console.log('err', err)
-        }
-      });
-    },
-    // 设置第几天的课程表
-    getWeekCard (index) {
-      var data = this.detailData.courseScheduleList[index].courseScheduleList;
-      var morning = [];
-      var afternoon = [];
-      var night = [];
-      data.forEach(function (k, j) {
-        if (k.type == 1 && k.content != "") {
-          morning.push(k);
-        } else if (k.type == 2 && k.content != "") {
-          afternoon.push(k);
-        } else if (k.type == 3 && k.content != "") {
-          night.push(k);
-        }
-      });
-      if (morning.length == 0 && afternoon.length == 0 && night.length == 0) {
-        this.showCourseTable = false;
-      }
-      var strMorning = "",
-        strAfternoon = "",
-        strNight = "";
-      if (morning.length > 0) {
-        strMorning = `<tr>
-								<td class="td_left" rowspan="${morning.length}">上午</td>
-								<td style="text-align: left;">${morning[0].content ? morning[0].content : "无安排"
-          }</td>
-							</tr>`;
-        morning.forEach(function (k, j) {
-          if (j > 0) {
-            strMorning += `<tr>
-								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
-							</tr>`;
-          }
-        });
-      }
-      if (afternoon.length > 0) {
-        strAfternoon = `<tr>
-								<td class="td_left" rowspan="${afternoon.length}">下午</td>
-								<td style="text-align: left;">${afternoon[0].content ? afternoon[0].content : "无安排"
-          }</td>
-							</tr>`;
-        afternoon.forEach(function (k, j) {
-          if (j > 0) {
-            strAfternoon += `<tr>
-								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
-							</tr>`;
-          }
-        });
-      }
-      if (night.length > 0) {
-        strNight = `<tr>
-								<td class="td_left" rowspan="${night.length}">晚上</td>
-								<td style="text-align: left;">${night[0].content ? night[0].content : "无安排"
-          }</td>
-							</tr>`;
-        night.forEach(function (k, j) {
-          if (j > 0) {
-            strNight += `<tr>
-								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
-							</tr>`;
-          }
-        });
-      }
-      this.courseTable.push(strMorning + strAfternoon + strNight);
+      this.initPackageArr = true
     },
     // 联系客服
     contactService () {
@@ -635,707 +332,13 @@ export default {
     backHome () {
       this.$router.push({ name: "ServiceKQ" });
     },
-    // 点击评价进入评价详情页
-    handleEvaluate () {
-      this.$router.push({ name: "ServiceAbroadEvaluate", query: { courseId: this.courseId } });
-    },
-    //领券
-    toCoupons () {
-      this.$router.push({
-        name: "CardBoxXST",
-      });
-    },
   },
+  components: {
+    AbroadDes,
+    AbroadBase,
+    AbroadEvaluate,
+    CountDown,
+    AbroadCoupon
+  }
 };
 </script>
-<style lang="scss">
-.abroad_detail {
-  padding-bottom: 200px;
-  .header {
-    img {
-      width: 100%;
-    }
-  }
-  .countDown {
-    height: 130px;
-    width: 100%;
-    background-color: #201e2b;
-    .countDownTop {
-      height: 50%;
-      padding: 0 3vw;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      // color: blanchedalmond;
-      color: #ffffff;
-      font-size: 32px;
-      .countDownTime {
-        font-size: 24px;
-        .countDownFont {
-          line-height: 34px;
-          color: #333333;
-          border-radius: 5px;
-          margin: 0 8px;
-        }
-        div {
-          // color: red;
-          width: 34px;
-          text-align: center;
-          display: inline-block;
-          background-color: #ffe9b1;
-        }
-      }
-    }
-    .countDownBottom {
-      height: 50%;
-      padding: 0 3vw;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      // color: blanchedalmond;
-      color: #ffffff;
-      font-size: 24px;
-      .countDownBottomyellow {
-        display: inline-block;
-        // width: 10vw;
-        height: 33px;
-        margin-right: 12px;
-        padding: 0 8px;
-        color: #333333;
-        font-size: 24px;
-        background-color: #ffe9b1;
-        border-radius: 4px;
-      }
-      .countDownBottomTime {
-        font-size: 2.8vw;
-        color: #ffffff;
-        opacity: 0.85;
-      }
-      .countDownAbout {
-        text-decoration: underline;
-      }
-    }
-  }
-  .uni_text {
-    width: 100%;
-    background: #fff;
-    padding: 24px 34px;
-    box-sizing: border-box;
-    .course_price {
-      font-size: 38px;
-      font-weight: bold;
-      color: red;
-      .redmini {
-        font-size: 25px;
-      }
-      .tint {
-        font-size: 25px;
-        font-weight: normal;
-        color: #909399;
-        margin-left: 2vw;
-        text-decoration: line-through;
-      }
-    }
-    .course_price_free {
-      font-size: 34px;
-      font-weight: bold;
-      color: red;
-      display: flex;
-      justify-content: space-between;
-      .des {
-        color: #333;
-      }
-    }
-    .course_coupons {
-      height: 70px;
-      font-size: 27px;
-      // color: #4092FF;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .fontBlue {
-        color: #4092ff;
-      }
-    }
-    .course_name {
-      font-size: 34px;
-      font-weight: bold;
-    }
-    .course_info {
-      font-size: 24px;
-      color: #999;
-      margin-top: 16px;
-    }
-    .address {
-      font-size: 24px;
-      color: #999;
-      margin-top: 16px;
-      .icon {
-        color: #000;
-      }
-    }
-    .rate {
-      margin-top: 20px;
-      display: flex;
-      justify-content: space-between;
-      div > span {
-        font-size: 30px;
-        color: #ffcc00;
-        margin-left: 30px;
-      }
-      > span {
-        font-size: 26px;
-      }
-    }
-    .tag_box {
-      padding-top: 10px;
-      .tag {
-        display: inline-block;
-        margin-top: 10px;
-        margin-right: 12px;
-        color: #4092ff;
-        font-size: 24px;
-        border-radius: 8px;
-        border: 2px solid #4092ff;
-        padding: 2px 10px;
-      }
-    }
-  }
-  .package {
-    padding: 18px 22px;
-    .package_title {
-      font-size: 28px;
-      color: #999;
-    }
-    .package_box {
-      white-space: nowrap;
-      margin-top: 22px;
-      .package_item {
-        width: 128px;
-        height: 152px;
-        border-radius: 12px;
-        border: 2px solid #dde3ef;
-        box-sizing: border-box;
-        display: inline-flex;
-        align-content: center;
-        justify-content: center;
-        flex-wrap: wrap;
-        vertical-align: top;
-        margin-right: 16px;
-        p {
-          width: 100%;
-          margin: 0;
-          text-align: center;
-        }
-        .more_icon {
-          width: 36px;
-          margin-top: 10px;
-        }
-        .more_text {
-          font-size: 22px;
-          color: #fff;
-          margin-top: 22px;
-        }
-        .date {
-          font-size: 32px;
-          font-weight: bold;
-        }
-        .week {
-          font-size: 22px;
-          color: #999;
-        }
-        .price {
-          font-size: 28px;
-          color: #ff2b2b;
-          margin-top: 14px;
-          span {
-            font-size: 20px;
-          }
-        }
-      }
-      .package_item_more {
-        background: #3f92ff;
-        border: 2px solid #3f92ff;
-        box-shadow: 6px 12px 16px 0px rgba(63, 146, 255, 0.29);
-        margin-right: 0;
-      }
-    }
-  }
-  .notime {
-    width: 100%;
-  }
-  .content_box {
-    position: relative;
-
-    .content_all {
-      overflow: hidden;
-      height: 580px;
-      // font-size: 26px;
-      // line-height: 36px;
-      font-size: 31px !important;
-      line-height: 40px !important;
-      letter-spacing: 1.6px;
-      color: #666;
-      // padding-bottom: 130px;
-      img {
-        width: 100%;
-      }
-    }
-
-    /* 展开 */
-    .open {
-      height: auto;
-    }
-
-    .extend_wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 26px;
-      padding: 40px 0;
-      color: #4092ff;
-      margin-top: -40px;
-      background: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.3) 0%,
-        rgba(255, 255, 255, 0.8) 30%,
-        rgba(255, 255, 255, 1) 100%
-      );
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  .tag_item {
-    padding: 22px;
-    .tag_title {
-      font-size: 34px;
-      font-weight: bold;
-      margin-bottom: 32px;
-    }
-    .tag_text {
-      // font-size: 24px;
-      // line-height: 40px;
-      font-size: 28px !important;
-      line-height: 44px !important;
-      padding: 16px 0;
-    }
-  }
-  .cardCont {
-    // font-size: 24px;
-    font-size: 28px !important;
-    table {
-      border-radius: 5px;
-      width: 100%;
-      border: 1px solid #dde3ef;
-      td {
-        border: 1px solid #dde3ef;
-        text-align: center;
-        background: rgb(245, 246, 250);
-      }
-      .td_left {
-        width: 132px;
-        background: #fff;
-        box-sizing: border-box;
-      }
-    }
-  }
-  .courseContent {
-    li:not(:last-child) {
-      border-bottom: 1px solid #eee;
-    }
-    li:first-child {
-      .left {
-        color: #fa9b00;
-        border: 1px solid #fa9b00;
-        background-color: #fef4d9;
-      }
-    }
-    li:nth-child(3n + 1) {
-      .left {
-        color: #fa9b00;
-        border: 1px solid #fa9b00;
-        background-color: #fef4d9;
-      }
-    }
-    li:nth-child(3n-1) {
-      .left {
-        color: #fa008c;
-        border: 1px solid #fa008c;
-        background-color: #ffeffc;
-      }
-    }
-    li:nth-child(3n) {
-      .left {
-        color: #0076fa;
-        border: 1px solid #0076fa;
-        background-color: #efffff;
-      }
-    }
-    li {
-      position: relative;
-      margin-top: 20px;
-      padding-bottom: 10px;
-      .left {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 120px;
-        font-size: 26px;
-        text-align: center;
-        border-radius: 3px;
-        padding: 3px;
-        box-sizing: border-box;
-        font-weight: 600;
-      }
-      h3 {
-        color: #202228;
-        // font-size: 32px;
-        font-size: 30px !important;
-        font-weight: 400;
-        margin: 0;
-        padding-left: 160px;
-        word-break: break-all;
-      }
-      .item {
-        margin-top: 10px;
-        img {
-          width: 100%;
-        }
-        p {
-          margin: 0;
-          margin-top: 10px;
-          color: #a7a7aa;
-          // font-size: 28px;
-          font-size: 31px !important;
-          b {
-            // font-size: 32px;
-            font-size: 35px !important;
-            font-weight: 400;
-            color: #000000;
-            margin-right: 10px;
-          }
-          span {
-            // font-size: 24px;
-            font-size: 27px !important;
-          }
-        }
-      }
-    }
-  }
-  .base {
-    padding: 28px 24px;
-    img {
-      width: 98px;
-      height: 98px;
-      display: inline-block;
-      vertical-align: top;
-      border-radius: 12px;
-    }
-    .center {
-      width: 550px;
-      display: inline-block;
-      margin-left: 20px;
-      .basename {
-        // font-size: 32px;
-        font-size: 35px !important;
-        font-weight: bold;
-      }
-      .address {
-        // font-size: 24px;
-        font-size: 27px !important;
-        margin-top: 12px;
-      }
-      .tag {
-        display: inline-block;
-        // font-size: 24px;
-        font-size: 26px !important;
-        margin-top: 14px;
-        background: #f5f6fa;
-        border-radius: 6px;
-        padding: 6px 20px;
-      }
-    }
-  }
-  .top_border {
-    border-top: 16px solid #f6f7fa;
-    ::v-deep .van-tab {
-      .van-tab__text {
-        font-size: 34px !important;
-      }
-    }
-  }
-  .popup_content {
-    width: 408px;
-    height: 346px;
-    overflow: hidden;
-    img {
-      display: block;
-      width: 86px;
-      height: 86px;
-      margin: 0 auto;
-      margin-top: 64px;
-    }
-    p:first-of-type {
-      text-align: center;
-      margin-top: 46px;
-      // font-size: 36px;
-      font-size: 39px !important;
-    }
-    p:last-of-type {
-      text-align: center;
-      margin-top: 16px;
-      // font-size: 26px;
-      font-size: 29px !important;
-      color: #999;
-    }
-  }
-  .Collection {
-    background-color: white;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 28px 22px;
-    box-sizing: border-box;
-    padding-bottom: 50px;
-    z-index: 500;
-    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34);
-    .box1 {
-      width: 40%;
-    }
-    .box2 {
-      width: 60%;
-    }
-    .box {
-      display: inline-block;
-      vertical-align: middle;
-      color: #666666;
-      .icon {
-        display: inline-block;
-        width: 45%;
-        text-align: center;
-        // font-size: 24px;
-        font-size: 26px !important;
-        p {
-          // margin: 0;
-          color: #999999;
-          margin-top: 8px;
-        }
-        i {
-          font-size: 48px;
-          color: rgb(45, 45, 45);
-          font-weight: bold;
-        }
-      }
-      .icon.active {
-        color: 0ce39d;
-        i {
-          color: #0ce39d;
-        }
-      }
-      span {
-        display: inline-block;
-        width: 100%;
-        line-height: 92px;
-        box-sizing: border-box;
-        border-radius: 100px;
-        color: white;
-        // font-size: 32px;
-        font-size: 35px !important;
-        background: #4092ff;
-        text-align: center;
-        box-shadow: 0px 10px 40px 0px #a0c9ff;
-        b {
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: 20px;
-          color: white;
-        }
-        i {
-          vertical-align: middle;
-          font-size: 44px;
-          font-weight: bold;
-        }
-      }
-      .disabled {
-        color: #999;
-        background: #edeced;
-        box-shadow: none;
-      }
-    }
-  }
-  .pintuan_about {
-    width: 592px;
-    box-sizing: border-box;
-    padding: 0 50px;
-    .about_img {
-      width: 112px;
-      margin: 0 auto;
-      margin-top: 30px;
-      display: block;
-    }
-    .about_title {
-      font-size: 34px;
-      font-weight: bold;
-      text-align: center;
-    }
-    .about_content {
-      font-size: 30px;
-      margin-top: 20px;
-    }
-    .about_know {
-      font-size: 32px;
-      text-align: center;
-      color: #3385ff;
-      margin-top: 60px;
-      margin-bottom: 44px;
-    }
-  }
-  .show_tip_title {
-    img {
-      width: 112px;
-    }
-    p {
-      margin-top: -20px;
-      margin-bottom: 20px;
-    }
-  }
-  .show_tip {
-    padding: 0 20px;
-    font-size: 28px;
-    letter-spacing: 1px;
-    text-align: left;
-    line-height: 64px;
-    color: rgb(153, 153, 153);
-    b {
-      color: #000;
-    }
-  }
-  .tip_checkbox{
-    font-size: 26px;
-    margin-top: 24px;
-    margin-bottom: 60px;
-    margin-left: 50px;
-  }
-}
-</style>
-<style lang="scss">
-.elder {
-  .abroad_detail {
-    .countDown {
-      height: auto;
-      .countDownTop {
-        display: block;
-        font-size: 40px;
-        .countDownTime {
-          font-size: 40px;
-          padding: 10px 0;
-          div {
-            width: 60px;
-          }
-          .countDownFont {
-            line-height: 60px;
-          }
-        }
-      }
-      .countDownBottom {
-        display: block;
-        font-size: 40px;
-        .countDownBottomyellow {
-          height: 60px;
-          font-size: 40px;
-        }
-      }
-    }
-    .uni_text {
-      .course_price {
-        font-size: 48px;
-        .redmini,
-        .tint {
-          font-size: 36px;
-        }
-      }
-      .course_name {
-        font-size: 44px;
-      }
-      .course_info {
-        font-size: 40px;
-      }
-      .address {
-        font-size: 40px;
-      }
-      .rate > span {
-        font-size: 36px;
-      }
-      .tag_box .tag {
-        font-size: 40px;
-      }
-    }
-    .package {
-      .package_title {
-        font-size: 44px;
-      }
-      .package_item {
-        .date {
-          font-size: 40px;
-        }
-        .week {
-          font-size: 34px;
-        }
-        .price {
-          font-size: 34px;
-        }
-      }
-    }
-    .content_box .content_all {
-      font-size: 40px !important;
-      line-height: 60px !important;
-    }
-    .tag_item {
-      .tag_title {
-        font-size: 44px;
-      }
-      .tag_text {
-        font-size: 40px !important;
-        line-height: 60px !important;
-      }
-    }
-    .base .center {
-      .basename {
-        font-size: 44px !important;
-      }
-      .address {
-        font-size: 40px !important;
-      }
-    }
-    .Collection .box {
-      span {
-        font-size: 44px !important;
-      }
-      .icon {
-        font-size: 40px !important;
-      }
-    }
-    .pintuan_about {
-      .about_title {
-        font-size: 44px;
-      }
-      .about_box {
-        height: 600px;
-        overflow: auto;
-      }
-      .about_content {
-        font-size: 36px;
-      }
-      .about_know {
-        font-size: 40px;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/Service/CheckOrder.vue b/src/views/Service/CheckOrder.vue
index f11b24a..be482c5 100644
--- a/src/views/Service/CheckOrder.vue
+++ b/src/views/Service/CheckOrder.vue
@@ -6,7 +6,7 @@
         <div>
           <p class="goods_title">{{showCourseData.course_name}}</p>
           <p class="package_name">套餐名称：{{selectCombo.comboName}}</p>
-          <p class="count">数量：x{{count}}</p>
+          <p class="count">数量：x{{count}}{{selectComboUnitName}}</p>
         </div>
       </div>
       <div class="bottom">
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="top_border">
-      <contact-box :limit="count"></contact-box>
+      <contact-box :limit="count" :people="selectCombo.adultCount" :child="selectCombo.chilCount"></contact-box>
     </div>
     <div class="card top_border">
       <p>服务承诺和保障</p>
@@ -56,6 +56,7 @@ export default {
       useCard: '',
       orderDetail: '',
       selectCombo: '',//当前套餐信息
+      selectComboUnitName:'',//套餐单位 人或份
       showCourseData: '',//当前课程的信息
       selectCombo: '',//已选择的套餐
       userInfo: '',//支付用
@@ -76,6 +77,7 @@ export default {
     if (selectCombo) {
       this.selectCombo = JSON.parse(selectCombo)
     }
+    this.selectComboUnitName = sessionStorage.getItem('selectComboUnitName')
 
     // 如果有优惠券，就展示
     let useCard = localStorage.getItem('useCard')
@@ -117,11 +119,20 @@ export default {
        // 出行人数量判断
       let selectedContactArr = localStorage.getItem('selectedContactArr');
       selectedContactArr = JSON.parse(selectedContactArr);
-      if (selectedContactArr.length != this.count) {
-        this.$toast.fail('请选择与购买商品数量相同的出行人数');
+      let selAdult = 0;
+      let selChild = 0;
+      for(let i in selectedContactArr){
+        if(selectedContactArr[i].userType==2){
+          selAdult++
+        }else{
+          selChild++
+        }
+      }
+      // 判断选择成人和学生数量是否匹配
+      if(selAdult!=this.count*this.selectCombo.adultCount||selChild!=this.count*this.selectCombo.chilCount){
+        this.$toast.fail('请选择正确数量的出行人');
         return;
       }
-
       // 协议勾选
       if (!this.checked) {
         this.$toast.fail('请先阅读并同意用户协议');
@@ -163,7 +174,6 @@ export default {
               // 使用后移除优惠券，防止返回继续使用
               localStorage.removeItem('useCard')
               this.$router.push({ name: 'ServiceOrderXST', query: { active: 1, showChatGroupUrl: 1 } })
-
             } else {
               // 使用后移除优惠券，防止返回继续使用
               localStorage.removeItem('useCard')
diff --git a/src/views/Service/DatePackage.vue b/src/views/Service/DatePackage.vue
index 483ee22..b8b8ae6 100644
--- a/src/views/Service/DatePackage.vue
+++ b/src/views/Service/DatePackage.vue
@@ -1,32 +1,33 @@
 <template>
-  <div id="datePackage">
+  <div id="datePackage" v-if="comboList">
     <!-- <div class="tag_item">
       <p class="tag_title">商品名称</p>
       <p class="package_name">{{showCourseData.course_name}}</p>
     </div> -->
     <div class="tag_item">
-      <p class="tag_title">活动日期</p>
-      <p class="package_name" :class="date?'active':''" @click="showCalendar=true">{{date||'选择日期'}}</p>
+      <p class="tag_title">出行时间</p>
+      <p class="package_name" :class="date?'active':''" @click="showCalendar=true">{{date||'选择日期'}}<van-icon name="arrow" /></p>
       <van-calendar v-model="showCalendar" :default-date="defaultDate" @confirm="chooseDate" :show-confirm="false" color="#3F92FF" :formatter="formatCalendar" />
     </div>
-    <div class="tag_item" v-if="comboList[active]">
-      <p class="tag_title">成团情况<span class="pintuan_status" v-if="comboList[active].clusterName">{{comboList[active].clusterName}}</span></p>
-      <p class="package_name">最低拼团数 {{comboList[active].peopleCount}}人 已报名人数{{numOne}}/{{comboList[active].stockCount}}人</p>
+    <div class="tag_item" v-if="date">
+      <p class="tag_title">行程选择</p>
+      <div class="period">
+        <div class="period_item" :class="Index1==index?'active':''" v-for="(item,index) in comboList" :key="index" @click="choosePeriod(index)">行程{{index + 1}} ：{{item.dateComboName}}</div>
+      </div>
     </div>
-    <div class="tag_item">
-      <p class="tag_title">天数</p>
-      <p class="package_name">{{days}}天</p>
+    <div class="tag_item" v-if="comboList[Index1]">
+      <p class="tag_title">成团情况<span class="pintuan_status" v-if="comboList[Index1].clusterName">{{comboList[Index1].clusterName}}</span></p>
+      <p class="package_name">最低拼团数 {{comboList[Index1].peopleCount}}{{comboList[Index1].unitName}} 已报名{{comboList[Index1].unitName}}数{{numOne}}/{{comboList[Index1].stockCount}}{{comboList[Index1].unitName}}</p>
     </div>
     <div class="tag_item" v-if="date">
-      <p class="tag_title">套餐</p>
+      <p class="tag_title">套餐类型</p>
       <div class="period">
-        <!-- <span class="period_item" :class="active==index?'active':''" v-for="(item,index) in comboList" :key="index" @click="choosePeriod(index)">{{item.comboName}} ¥{{item.actualPrice}}</span> -->
-        <div class="period_item" :class="active==index?'active':''" v-for="(item,index) in comboList" :key="index" @click="choosePeriod(index)">套餐{{index + 1}} ：{{item.comboName}} ¥{{item.actualPrice}}</div>
+        <div class="period_item" :class="Index2==index?'active':''" v-for="(item,index) in comboList[Index1].comboInfoList" :key="index" @click="choosePeriod2(index)">套餐{{index + 1}} ：{{item.comboName}} ¥{{item.actualPrice}}</div>
       </div>
     </div>
     <div class="tag_item">
       <div class="tag_title tag_title_flex">
-        <span>数量</span>
+        <span>请选择套餐数量</span>
         <div class="tag_title_right">
           <span class="btn" @click="countReduce">-</span>
           <span class="count">{{count}}</span>
@@ -35,20 +36,26 @@
       </div>
       <div class="package_num">
         <span>库存数量({{numSecond}} /</span>
-        <span class="tint">{{numOne+numSecond}})</span>
+        <span class="tint">{{numOne+numSecond}}{{comboList[Index1].unitName}})</span>
       </div>
     </div>
+    <p class="package_des" v-if="comboList[Index1].comboInfoList[Index2].comboDescrption">套餐说明<br>{{comboList[Index1].comboInfoList[Index2].comboDescrption}}</p>
     <div class="Collection">
       <div class="box box1">
-        <p v-if="active>-1&&comboList[active]"><span>¥</span>{{comboList[active].actualPrice*1000*count/1000}} <del>{{comboList[active].productPrice*1000*count/1000}}</del></p>
+        <p><span>¥</span>{{comboList[Index1].comboInfoList[Index2].actualPrice*1000*count/1000}} <del>{{comboList[Index1].comboInfoList[Index2].productPrice*1000*count/1000}}</del></p>
       </div>
       <div class="box box2">
         <span @click="checkOrder()">去下单</span>
       </div>
     </div>
+
+    <van-popup style="background: transparent;" get-container="body" v-model="showSchool" @close='closeSchool'>
+      <school-add @closeAdd='closeAdd'></school-add>
+    </van-popup>
   </div>
 </template>
 <script>
+import schoolAdd from '@/views/Travel/component/schoolAdd'
 export default {
   name: 'ServiceDatePackage',
   data () {
@@ -58,12 +65,14 @@ export default {
       packageData: '',
       showCourseData: '',
       comboList: '',
-      active: 0,//选中的排期
+      Index1: 0,//选中的档期
+      Index2: 0,//选中的套餐
       showCalendar: false,
       count: 1,
       days: 1,
       numOne: 0,
       numSecond: 0,
+      showSchool: false
     }
   },
   mounted () {
@@ -93,7 +102,7 @@ export default {
   },
   methods: {
     // 获取库存
-    GetOrderPayCount () {
+    GetOrderPayCount (bindId) {
       let showCourseData = JSON.parse(localStorage.getItem('showCourseData'))
       this.mgop({
         api: 'mgop.sz.hswsy.OrderPayCount', // 必须
@@ -105,6 +114,7 @@ export default {
           //   'isTestUrl': '1'
         },
         data: {
+          "bindId":bindId,
           "productId": showCourseData.id,
           "startDate": this.date,
         },
@@ -147,12 +157,16 @@ export default {
     },
     // 选择排期
     choosePeriod (index) {
-      this.active = index;
-      this.days = this.packageData['0'].days ? this.packageData[index].days : 0
-      let bindId = this.packageData['0'].comboList[index].id ? this.packageData['0'].comboList[index].id : ''
-      let dateBindComboId = this.packageData['0'].comboList[index].dateBindComboId
+      this.Index1 = index;
+      this.Index2 = 0;
+      let bindId = this.comboList[index].id
+      console.log(this.comboList[index])
       this.GetOrderPayCount(bindId)
-      this.getSurplusComboCount(dateBindComboId)
+      this.getSurplusComboCount(bindId)
+    },
+    // 选择套餐
+    choosePeriod2 (index) {
+      this.Index2 = index;
     },
     // 选择日期
     chooseDate (date) {
@@ -167,7 +181,8 @@ export default {
         return;
       }
       this.date = this.Moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD')
-      this.active = 0;
+      this.Index1 = 0;
+      this.Index2 = 0;
       this.showCalendar = false;
       this.setComboList()
     },
@@ -176,21 +191,21 @@ export default {
       // console.log(day)
       for (let i in this.packageData) {
         if (this.Moment(day.date, 'YYYY-MM-DD').format('YYYY-MM-DD') == this.Moment(this.packageData[i].dayName, 'YYYY-MM-DD').format('YYYY-MM-DD')) {
-          day.bottomInfo = '¥' + this.packageData[i].comboList[0].actualPrice;
+          day.bottomInfo = '¥' + this.packageData[i].comboList[0].comboInfoList[0].actualPrice;
         }
       }
       return day;
     },
     // 根据日期设置套餐
     setComboList () {
-      let bindId = this.packageData['0'].comboList['0'].id ? this.packageData['0'].comboList['0'].id : ''
-      let dateBindComboId = this.packageData['0'].comboList['0'].dateBindComboId
-      this.days = this.packageData['0'].days ? this.packageData['0'].days : 0
-      this.GetOrderPayCount(bindId)
-      this.getSurplusComboCount(dateBindComboId)
       for (let i in this.packageData) {
         if (this.Moment(this.packageData[i].dayName, 'YYYY-MM-DD').format(('YYYY-MM-DD')) == this.date) {
-          this.comboList = this.packageData[i].comboList;
+          let comboList = this.packageData[i].comboList;
+          this.comboList = comboList
+          let bindId = comboList[this.Index1].id
+          this.days = this.packageData[i].days
+          this.GetOrderPayCount(bindId)
+          this.getSurplusComboCount(bindId)
           break;
         }
       }
@@ -206,20 +221,28 @@ export default {
       if (this.count > this.numSecond) {
         this.$toast('库存不足');
 
-      }
-      else if (!this.date) {
-        this.$toast('请选择日期');
-      } else if (this.active == -1) {
-        this.$toast('请选择时间段');
       } else {
         const query = {
           date: this.date,
           count: this.count
         }
-        localStorage.setItem('selectCombo', JSON.stringify(this.comboList[this.active]))
+        localStorage.setItem('selectCombo', JSON.stringify(this.comboList[this.Index1].comboInfoList[this.Index2]))
+        localStorage.setItem('selectComboBindId', JSON.stringify(this.comboList[this.Index1].id))
+        localStorage.setItem('selectComboUnitName', this.comboList[this.Index1].unitName)
         this.$router.push({ name: 'ServiceCheckOrder', query: query })
       }
     },
+    closeSchool () {
+      if (sessionStorage.getItem('schoolNames') == 'undefined' || !sessionStorage.getItem('schoolNames')) {
+        // this.showSchool = true
+      }
+    },
+    closeAdd () {
+      this.showSchool = false
+    }
+  },
+  components: {
+    schoolAdd
   }
 }
 </script>
@@ -244,6 +267,8 @@ export default {
       }
     }
     .package_name {
+      display: flex;
+      justify-content: space-between;
       font-size: 28px;
       width: 100%;
       background: #f5f6fa;
@@ -312,6 +337,15 @@ export default {
       }
     }
   }
+  .package_des {
+    margin: 0 24px;
+    margin-top: 28px;
+    padding: 20px 0;
+    font-size: 26px;
+    line-height: 40px;
+    color: #a9a9aa;
+    border-top: 1px solid #e2e7ee;
+  }
   .Collection {
     background-color: white;
     position: fixed;
diff --git a/src/views/Service/SelectContact.vue b/src/views/Service/SelectContact.vue
index cdd0572..9e01b0c 100644
--- a/src/views/Service/SelectContact.vue
+++ b/src/views/Service/SelectContact.vue
@@ -31,10 +31,11 @@
 </template>
 <script>
 import AddChildPopupGroup from '@/views/Home/component/AddChildPopupGroup'
+import IdentityCodeValid from '@/common/validateIdent'
 export default {
   data () {
     return {
-      limit: '',
+      limit: '',//数量
       hideParent: false,
       contactList: [],
       showAddChildPopupGroup: false
@@ -43,7 +44,6 @@ export default {
   mounted () {
     this.limit = this.$route.query.limit;
     this.hideParent = this.$route.query.hideParent ? true : false;
-    console.log(this.hideParent)
     this.getContactList()
   },
   methods: {
@@ -120,23 +120,21 @@ export default {
           if ((!contactList[i].travelerIdCard || !contactList[i].gender) && !this.hideParent) {
             this.$toast('请先完善您选择的出行人信息')
             return;
+          } else if (!IdentityCodeValid(contactList[i].travelerIdCard)) {
+            this.$toast(`${contactList[i].travelerName}的身份证有误，请重新完善修改`)
+            return;
           } else {
             selectedArr.push({
               travelerName: contactList[i].travelerName,
               travelerMobile: contactList[i].travelerMobile,
               travelerNum: contactList[i].travelerNum,
-              travelerIdCard:contactList[i].travelerIdCard,
+              travelerIdCard: contactList[i].travelerIdCard,
               userType: contactList[i].userType,
             })
           }
         }
       }
       console.log(this.limit, selectedArr.length)
-      // 判断出行人数是否符合
-      if (this.limit && this.limit != selectedArr.length) {
-        this.$toast(`请选择${this.limit}位出行人`)
-        return;
-      }
       // 判断是否选择学生
       let hasStudent = false;
       for (let i in selectedArr) {
diff --git a/src/views/Service/component/AbroadDetail/AbroadBase.vue b/src/views/Service/component/AbroadDetail/AbroadBase.vue
new file mode 100644
index 0000000..5f5777d
--- /dev/null
+++ b/src/views/Service/component/AbroadDetail/AbroadBase.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="base_box">
+    <div class="base top_border" v-if="baseData">
+      <img v-if="baseData.coverList.length > 0" :src="baseData.coverList[0].cover_url" alt="" />
+      <div class="center">
+        <p class="basename">{{ baseData.baseName }}</p>
+        <p class="address">
+          <van-icon name="location-o" />{{ baseData.city }}{{ baseData.area}}{{ baseData.address }}
+        </p>
+        <p class="tag">{{ baseData.baseLabel.join("/") }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['baseId'],
+  data () {
+    return {
+      baseData: "", //基地信息
+    }
+  },
+  mounted () {
+    this.GetOneBase()
+  },
+  methods: {
+    // 获取单个基地
+    GetOneBase (baseId) {
+      this.mgop({
+        api: 'mgop.sz.hswsy.GetOneBase', // 必须
+        host: 'https://mapi.zjzwfw.gov.cn/',
+        dataType: 'JSON',
+        type: 'GET',
+        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
+        headers: {
+          //   'isTestUrl': '1'
+        },
+        data: {
+          "id": baseId,
+        },
+        onSuccess: res => {
+          if (res.data.data) {
+            this.baseData = res.data.data;
+          }
+        },
+        onFail: err => {
+          console.log('err', err)
+        }
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Service/component/AbroadDetail/AbroadCoupon.vue b/src/views/Service/component/AbroadDetail/AbroadCoupon.vue
new file mode 100644
index 0000000..4e739a4
--- /dev/null
+++ b/src/views/Service/component/AbroadDetail/AbroadCoupon.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="course_coupons" v-if="proCoupon.length>0">
+    <div>
+      <van-tag v-for="(item,index) in proCoupon" :key="index" color="#ffffff" text-color="#FF2B2B">{{proCouponHas?'已领取：':''}}{{item.title}}</van-tag>
+    </div>
+    <div @click="toCoupons" class="fontBlue">领取 ></div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['detailDataId', 'centerNo'],
+  data () {
+    return {
+      proCoupon: [],//优惠券
+      proCouponHas: false,//优惠券已领取
+    }
+  },
+  mounted () {
+    this.getOrderCoupon()
+  },
+  methods: {
+    //获取产品可使用优惠券
+    getOrderCoupon () {
+      this.mgop({
+        api: 'mgop.sz.hswsy.orderCoupon', // 必须
+        host: 'https://mapi.zjzwfw.gov.cn/',
+        dataType: 'JSON',
+        type: 'POST',
+        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
+        headers: {
+          //   'isTestUrl': '1'
+        },
+        data: {
+          "proId": this.detailDataId,
+          "userId": this.centerNo,
+        },
+        onSuccess: res => {
+          if (res.data.data) {
+            if (res.data.data.has.length > 0) {
+              this.proCoupon = res.data.data.has
+              localStorage.setItem("proCoupon", JSON.stringify(this.proCoupon))
+              this.chooseDefaultUseCard(res.data.data.has)//设置默认选中的优惠券
+              this.proCouponHas = true;
+            } else if (res.data.data.get.length > 0) {
+              this.proCoupon = {
+                title: '您有可领优惠券'
+              }
+            }
+          }
+        },
+        onFail: err => {
+          console.log('err', err)
+        }
+      });
+    },
+    // 设置默认选中的优惠券
+    chooseDefaultUseCard (has) {
+      if (has.length > 1) {
+        let useCard = has[0];
+        for (let i in has) {
+          console.log(Number(has[i].couponPrice) > Number(useCard.couponPrice))
+          if (Number(has[i].couponPrice) > Number(useCard.couponPrice)) {
+            useCard = has[i]
+          }
+        }
+        // console.log('useCard', useCard)
+        this.proCoupon = [useCard]
+        sessionStorage.setItem('useCard', JSON.stringify(useCard))
+
+      } else {
+        sessionStorage.setItem('useCard', JSON.stringify(this.proCoupon[0]))
+      }
+    },
+    //领券
+    toCoupons () {
+      this.$router.push({
+        name: "CardBoxXST",
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Service/component/AbroadDetail/AbroadDes.vue b/src/views/Service/component/AbroadDetail/AbroadDes.vue
new file mode 100644
index 0000000..9f3a42f
--- /dev/null
+++ b/src/views/Service/component/AbroadDetail/AbroadDes.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="abroad_des">
+    <van-tabs class="tabs top_border" v-model="active" swipeable :ellipsis="false" color="#4092FF" scrollspy sticky>
+      <van-tab title="产品详情">
+        <div class="tag_item" v-if="detailData.productFeatures">
+          <p class="tag_title">产品特色</p>
+          <p class="tag_text" v-html="detailData.productFeatures"></p>
+        </div>
+        <div class="tag_item" v-if="detailData.productDescription">
+          <p class="tag_title">产品描述</p>
+          <div class="content_box">
+            <div class="content_all" :class="isOpen ? 'open' : ''">
+              <p v-html="detailData.productDescription"></p>
+            </div>
+          </div>
+        </div>
+        <div class="tag_item" v-if="
+            detailData.courseContentList &&
+            detailData.courseContentList[0].content != ''
+          ">
+          <p class="tag_title">服务内容</p>
+          <ul class="courseContent">
+            <li v-for="(n, i) in detailData.courseContentList" :key="n.id">
+              <span class="left" v-if="n.title">{{ n.title }}</span>
+              <h3>{{ n.content }}</h3>
+              <div class="item" v-for="(k, j) in n.courseFileList" :key="i + '' + j">
+                <div>
+                  <video v-if="k.url && k.url.indexOf('.mp4') > -1" id="video" :src="k.url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4"></video>
+                </div>
+                <div>
+                  <img v-if="k.url && k.url.indexOf('.mp4') == -1" :src="k.url" />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="tag_item" v-if="courseTable.length > 0 && showCourseTable">
+          <p class="tag_title">课程表</p>
+          <div class="cardCont" v-for="(item, index) in courseTable" :key="index">
+            <table cellspacing="0" cellpadding="8">
+              <tbody v-html="item"></tbody>
+            </table>
+          </div>
+        </div>
+        <div class="tag_item" v-if="detailData.extraService">
+          <p class="tag_title">附送服务</p>
+          <p class="tag_text" v-html="detailData.extraService"></p>
+        </div>
+        <div class="tag_item" v-if="detailData.serviceGuarantees">
+          <p class="tag_title">服务保障和承诺</p>
+          <p class="tag_text" v-html="detailData.serviceGuarantees"></p>
+        </div>
+      </van-tab>
+      <van-tab title="费用说明" v-if="detailData.feeDescription">
+        <div class="tag_item">
+          <p class="tag_title">费用说明</p>
+          <p class="tag_text" v-html="detailData.feeDescription"></p>
+        </div>
+      </van-tab>
+      <van-tab title="订购须知" v-if="detailData.notice">
+        <div class="tag_item">
+          <p class="tag_title">订购须知</p>
+          <p class="tag_text" v-html="detailData.notice"></p>
+        </div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+<script>
+export default {
+  props: ['detailData'],
+  data () {
+    return {
+      courseTable: [], //课程表
+      active: 0,
+      isOpen: true,
+      showCourseTable:true
+    }
+  },
+  mounted () {
+    for (let i in this.detailData.courseScheduleList) {
+      this.getWeekCard(i);
+    }
+  },
+  methods: {
+    // 设置第几天的课程表
+    getWeekCard (index) {
+      var data = this.detailData.courseScheduleList[index].courseScheduleList;
+      var morning = [];
+      var afternoon = [];
+      var night = [];
+      data.forEach(function (k, j) {
+        if (k.type == 1 && k.content != "") {
+          morning.push(k);
+        } else if (k.type == 2 && k.content != "") {
+          afternoon.push(k);
+        } else if (k.type == 3 && k.content != "") {
+          night.push(k);
+        }
+      });
+      if (morning.length == 0 && afternoon.length == 0 && night.length == 0) {
+        this.showCourseTable = false;
+      }
+      var strMorning = "",
+        strAfternoon = "",
+        strNight = "";
+      if (morning.length > 0) {
+        strMorning = `<tr>
+								<td class="td_left" rowspan="${morning.length}">上午</td>
+								<td style="text-align: left;">${morning[0].content ? morning[0].content : "无安排"
+          }</td>
+							</tr>`;
+        morning.forEach(function (k, j) {
+          if (j > 0) {
+            strMorning += `<tr>
+								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
+							</tr>`;
+          }
+        });
+      }
+      if (afternoon.length > 0) {
+        strAfternoon = `<tr>
+								<td class="td_left" rowspan="${afternoon.length}">下午</td>
+								<td style="text-align: left;">${afternoon[0].content ? afternoon[0].content : "无安排"
+          }</td>
+							</tr>`;
+        afternoon.forEach(function (k, j) {
+          if (j > 0) {
+            strAfternoon += `<tr>
+								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
+							</tr>`;
+          }
+        });
+      }
+      if (night.length > 0) {
+        strNight = `<tr>
+								<td class="td_left" rowspan="${night.length}">晚上</td>
+								<td style="text-align: left;">${night[0].content ? night[0].content : "无安排"
+          }</td>
+							</tr>`;
+        night.forEach(function (k, j) {
+          if (j > 0) {
+            strNight += `<tr>
+								<td style="text-align: left;">${k.content ? k.content : "无安排"}</td>
+							</tr>`;
+          }
+        });
+      }
+      this.courseTable.push(strMorning + strAfternoon + strNight);
+    },
+    // 展开关闭院校简介
+    extend_btn () {
+      this.isOpen = !this.isOpen;
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Service/component/AbroadDetail/AbroadEvaluate.vue b/src/views/Service/component/AbroadDetail/AbroadEvaluate.vue
new file mode 100644
index 0000000..f92cfcf
--- /dev/null
+++ b/src/views/Service/component/AbroadDetail/AbroadEvaluate.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="abroad_evaluate">
+    <div class="rate" @click="handleEvaluate">
+        <div>
+          <van-rate v-model="evaluationData.evaluationScore" color="#FFCC00" :size="16" readonly />
+          <span>{{ evaluationData.evaluationScore }}</span>
+        </div>
+        <span>共{{evaluationData.evaluationCount}}个客户评价
+          <van-icon name="arrow" />
+        </span>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  props:['courseId'],
+  data(){
+    return{
+      evaluationData: '',//评价
+    }
+  },
+  mounted(){
+    this.getEvaluationSummary()
+  },
+  methods:{
+    // 获取评价
+    getEvaluationSummary () {
+      this.mgop({
+        api: 'mgop.sz.hswsy.EvaluationSummary', // 必须
+        host: 'https://mapi.zjzwfw.gov.cn/',
+        dataType: 'JSON',
+        type: 'GET',
+        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
+        headers: {
+          //   'isTestUrl': '1'
+        },
+        data: {
+          "courseId": this.courseId,
+        },
+        onSuccess: res => {
+          if (res.data.data) {
+            this.evaluationData = res.data.data
+          }
+        },
+        onFail: err => {
+          console.log('err', err)
+        }
+      });
+    },
+    // 点击评价进入评价详情页
+    handleEvaluate () {
+      this.$router.push({ name: "ServiceAbroadEvaluate", query: { courseId: this.courseId } });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Service/component/AbroadDetail/CountDown.vue b/src/views/Service/component/AbroadDetail/CountDown.vue
new file mode 100644
index 0000000..0b57972
--- /dev/null
+++ b/src/views/Service/component/AbroadDetail/CountDown.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="count_down">
+    <div class="countDown" v-show="detailData.clusterTime ">
+      <div class="countDownTop">
+        <div>{{day}} {{detailData.applyCount>=detailData.minPeopleCount?'报名截止时间：':'团期截止倒计时'}}</div>
+        <div v-if="detailData.applyCount>=detailData.minPeopleCount||timeTamp * 1 < 0">{{detailData.periodOfValidity}}</div>
+        <div class="countDownTime" v-else>
+          <div class="countDownFont">{{ showTime.day }}</div>
+          天
+          <div class="countDownFont">{{ showTime.hour }}</div>
+          时
+          <div class="countDownFont">{{ showTime.minute }}</div>
+          分
+          <div class="countDownFont">{{ showTime.second }}</div>
+          秒
+        </div>
+      </div>
+      <!-- <div class="countDownTop" v-else>
+        <div>{{day}}</div>
+      </div> -->
+      <div class="countDownBottom">
+        <div>
+          <div class="countDownBottomyellow" v-show="detailData.minPeopleCount">
+            {{ detailData.clusterName }}
+          </div>
+          <span v-if="detailData.applyCount>=detailData.minPeopleCount">已报名 {{detailData.applyCount}}/{{detailData.stockCount}}{{detailData.unitName}}</span>
+          <span v-else>最低成团数{{detailData.minPeopleCount}}{{detailData.unitName}}/已报名{{detailData.applyCount}}{{detailData.unitName}}</span>
+          <!-- 已报名:<span>{{ detailData.applyCount }}</span><span>/{{ detailData.stockCount }}</span> -->
+        </div>
+        <div class="countDownAbout" @click="showPintuanAbout=true">关于拼团？</div>
+      </div>
+    </div>
+    <van-popup v-model="showPintuanAbout" round>
+      <div class="pintuan_about">
+        <img class="about_img" src="@/assets/service/tip.png" alt="">
+        <p class="about_title">拼团规则说明</p>
+        <p class="about_content">1、拼团展示默认为最近活动档期，选择其它档期请时刻注意成团动态。</p>
+        <p class="about_content">2、在限时截止后，报名人数未达最低成团数，则结束本团活动，系统将在72小时内，全额退还！</p>
+        <p class="about_content">3、报名人数达到最低成团要求后，则拼团成功，凡在报名截止时间内未达最大限团人数，则可放心参与。</p>
+        <p class="about_content">4、已成团的活动，除特殊情况等不可抗拒因素外，活动如期举行。</p>
+        <p class="about_know" @click="showPintuanAbout=false">我知道了</p>
+      </div>
+    </van-popup>
+  </div>
+</template>
+<script>
+export default {
+  props: ['day','productId', 'packageArr', 'bindId', 'comboId'],
+  data () {
+    return {
+      timeTamp: "",
+      showTime: {
+        day: "",
+        hour: "",
+        minute: "",
+        second: "",
+      },
+      showPintuanAbout: false,
+      detailData: ''
+    }
+  },
+  watch: {
+    bindId (oldVal, newVal) {
+      this.getDateInfoById()
+    },
+    comboId (oldVal, newVal) {
+      this.getDateInfoById()
+    },
+  },
+  mounted () {
+    // console.log(this.detailData)
+    // console.log(this.packageArr)
+    this.getDateInfoById()
+
+  },
+  methods: {
+    // 根据选择的档期显示成团状态
+    getDateInfoById () {
+      const productId = this.productId
+      const bindId = this.bindId
+      const comboId = this.comboId
+      // console.log(productId, bindId, comboId)
+      this.mgop({
+        api: 'mgop.sz.hswsy.DateInfoById', // 必须
+        host: 'https://mapi.zjzwfw.gov.cn/',
+        dataType: 'JSON',
+        type: 'GET',
+        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
+        headers: {
+          //   'isTestUrl': '1'
+        },
+        data: {
+          "productId": productId,
+          "bindId": bindId,
+          "comboId": comboId,
+        },
+        onSuccess: res => {
+          console.log('套餐列表:', res.data.data);
+          if (res.data.data) {
+            this.detailData = res.data.data
+            let timer = setInterval(() => {
+              this.timeDown(); //倒计时
+            }, 1000);
+            this.$once("hook:beforeDestroy", () => {
+              clearInterval(timer); //清理定时器
+              console.log('清理定时器')
+            });
+          }
+        },
+        onFail: err => {
+          console.log('err', err)
+        }
+      });
+    },
+    //倒计时计算
+    timeDown () {
+      var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000;
+      var nowTime = Date.parse(new Date());
+      let timeTamp = clusterTime / 1000 - nowTime / 1000;
+      // console.log(timeTamp)
+      this.timeTamp = timeTamp;
+      // console.log(timeTamp)
+      let k = this.calculateDiffTime(timeTamp);
+      // console.log(k)
+    },
+    calculateDiffTime (timeDiff) {
+      var day = parseInt(timeDiff / 86400);
+      var hour = parseInt((timeDiff % 86400) / 3600);
+      var minute = parseInt(((timeDiff % 86400) % 3600) / 60);
+      var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60);
+
+      this.showTime = {
+        day,
+        hour,
+        minute,
+        second,
+      };
+      day = day ? day + "天" : "";
+      hour = hour ? hour + "时" : "";
+      minute = minute ? minute + "分" : "";
+      second = second ? second + "秒" : "";
+      return day + hour + minute + second;
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Service/component/ContactBox.vue b/src/views/Service/component/ContactBox.vue
index 767ed2e..f7862f5 100644
--- a/src/views/Service/component/ContactBox.vue
+++ b/src/views/Service/component/ContactBox.vue
@@ -2,25 +2,26 @@
   <div class="contact_box">
     <div class="flex_box">
       <p class="contact_title">出行人</p>
-      <span class="contact_count">需添加{{limit}}位出行人</span>
+      <span class="contact_count" v-if="people*limit">需添加{{child*limit}}位学生,{{people*limit}}位家长</span>
+      <span class="contact_count" v-else>只需添加{{child*limit}}位学生</span>
       <span class="contact_btn" @click="enterSelectContact">选择出行人</span>
     </div>
     <p class="tip">
-        <van-icon class="icon" name="warning" />
+      <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 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}}<span>{{item.userType==1?"学生":"家长"}}</span></p>
+        <p class="cardid">身份证{{item.travelerIdCard}}</p>
       </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-  props: ["limit"],
+  props: ["limit", "people", "child"],
   data () {
     return {
       selectedContactArr: [],//选择的出行人
@@ -42,7 +43,7 @@ export default {
     // 删除联系人
     delContact (index) {
       this.selectedContactArr.splice(index, 1)
-      localStorage.setItem('selectedContactArr',JSON.stringify(this.selectedContactArr))
+      localStorage.setItem('selectedContactArr', JSON.stringify(this.selectedContactArr))
     }
   }
 }
@@ -71,19 +72,19 @@ export default {
     color: #4092ff;
     font-weight: normal;
   }
-  .tip{
+  .tip {
     padding: 0 22px;
     margin-bottom: 28px;
     color: #999;
-    .icon{
-      color: #FF9604;
+    .icon {
+      color: #ff9604;
     }
   }
   .contact_item {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-top: 2px solid #F2F4F9;
+    border-top: 2px solid #f2f4f9;
     width: 702px;
     margin: 0 auto;
     .close {
@@ -98,6 +99,15 @@ export default {
       .name {
         font-size: 30px;
         font-weight: bold;
+        span {
+          display: inline-block;
+          padding: 0 4px;
+          margin-left: 10px;
+          font-size: 22px;
+          font-weight: normal;
+          color: #4092ff;
+          border: 1px solid #e6e9ef;
+        }
       }
       .cardid {
         margin-top: 6px;
diff --git a/src/views/Service/component/ServiceListFour.vue b/src/views/Service/component/ServiceListFour.vue
index 0c523cd..1d0c385 100644
--- a/src/views/Service/component/ServiceListFour.vue
+++ b/src/views/Service/component/ServiceListFour.vue
@@ -30,7 +30,7 @@
           <div class="flex_box">
             <div>
               <p class="address">{{item.cityAddress}}{{item.cityAddress&&item.areaAddress?'·':''}}{{item.areaAddress}}</p>
-              <p class="price free"> <span class="limit">{{item.minPeopleCount}}人成团</span></p>
+              <p class="price free"> <span class="limit">{{item.minPeopleCount}}{{item.unitName}}成团</span></p>
             </div>
             <div class="pintuan" :class="item.applyCount>=item.stockCount?'disabled':''">
               <p>{{item.applyCount>=item.stockCount?'已满团':'拼团中'}}</p>
diff --git a/src/views/Service/component/ServiceListSecond.vue b/src/views/Service/component/ServiceListSecond.vue
index 28772e4..dcd3da3 100644
--- a/src/views/Service/component/ServiceListSecond.vue
+++ b/src/views/Service/component/ServiceListSecond.vue
@@ -28,7 +28,7 @@
               </template>
             </div>
             <div class="flex_box">
-              <p class="price" v-if="item.showPrice>0"><span class="icon">¥</span>{{item.showPrice}}<span class="tint">起 </span><span class="limit">/{{item.minPeopleCount}}人成团</span></p>
+              <p class="price" v-if="item.showPrice>0"><span class="icon">¥</span>{{item.showPrice}}<span class="tint">起 </span><span class="limit">/{{item.minPeopleCount}}{{item.unitName}}成团</span></p>
               <p class="price free" v-else>¥{{item.price}}</p>
               <span class="count">
                 <van-icon name="eye-o" /> {{item.read_count}}
--
libgit2 0.21.0