新版跟团游首页

src/assets/css/groupTour/index.css

+.GroupTour{
+  background:#F8F8F8;
+}
+.GroupTour ._list .w1180{
+  width: 1180px;
+  margin: 0 auto;
+}
+.GroupTour ._list>p.tit{
+  font-size: 24px;
+  color: rgba(102,102,102,1);
+  font-weight: 400;
+  text-align: center;
+  margin: 45px auto;
+}
\ No newline at end of file

src/components/GroupTour/block/diving.vue

+<style>
+.diving{
+  margin: 30px 0;
+}
+.diving>p{
+  font-size: 24px;
+  color: rgba(102,102,102,1);
+  font-weight: 400;
+  text-align: center;
+  margin: 40px 0 20px 0;
+}
+.diving .item {
+  position: relative;
+  padding: 8px 11px;
+  height: 198px;
+  transition: all linear .5s;
+  box-shadow: 0 0px 7px #eaeaea;
+  margin-bottom: 20px;
+  cursor: pointer;
+  background-color: rgba(245,245,245,1);
+  overflow: hidden;
+}
+.diving .item .label{
+  position: absolute;
+  left: 11px;
+  top: 8px;
+  z-index: 3;
+  font-size: 12px;
+  background:rgba(238,68,84,1);
+  color: white;
+  padding: 2px 6px;
+  transition: all ease-out .3s;
+}
+.diving .item:hover{
+  background-color: white;
+  box-shadow: none;
+}
+.diving .item:hover .line{
+  width: calc(100% - 42px);
+  height: calc(100% - 42px);
+  left: 20px;
+  top: 20px;
+}
+.diving .item:hover .label{
+  left: 0;
+  top: 0;
+}
+.diving .item .img img{
+  width: 100%;
+  height: 198px;
+}
+.diving .item .line{
+  position: absolute;
+  left: 10px;
+  top: 8px;
+  width: calc(100% - 22px);
+  height: calc(100% - 16px);
+  border: 1px solid rgba(232, 235, 239, 1);
+  transition: all  ease-out .3s;
+}
+.diving .item .info{
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 13px 0;
+  background:rgba(255,255,255,.9);
+}
+.diving .item .info p.tit{
+  font-size: 14px;
+  max-width: 240px;
+  padding: 0 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.diving .item .info .info_detail{
+  margin-top: 5px;
+  max-width: 240px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+.diving .item .info .info_detail .day{
+  color: #777777;
+}
+.diving .item .info .info_detail .money .num{
+  color: #EE4454;
+  font-size: 22px;
+}
+.diving .item .info .info_detail .money small.num{
+  font-size: 12px;
+}
+.diving .item .info .info_detail .money .qi{
+  color: #777777;
+}
+</style>
+<template>
+  <el-row class="diving">
+    <p>精品推荐-跳水特价</p>
+    <el-row :gutter="20">
+      <template v-for="(item, index) in data">
+        <el-col :span="6" v-if="index < 8">
+          <div class="item" >
+            <div class="label">
+              {{item.lineName.substr(0, 2)}}
+            </div>
+            <div class="img">
+              <img v-if='item.imgCover!=null&&item.imgCover.length' :src='compressImg(JSON.parse(item.imgCover)[0].Url, "filt", 245, "")' alt="">
+              <img class="notamin" src="../../../assets/img/bg_c2@3x.png" v-else />
+            </div>
+            <div class="line"></div>
+            <div class="info">
+              <p class="tit">
+                {{item.title}}
+              </p>
+              <div class="info_detail">
+                <span class="day">{{item.startDate}} 仅余{{item.surplus}}席</span>
+                <p class="money"><small class="num">￥</small><span class="num">{{isLogin!==1 ? item.b2CPrice : item.b2BPrice}}</span><span class="qi"> 起</span></p>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </template>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props:['data', 'isLogin'],
+  data () {
+    return {
+      
+    }
+  },
+  methods: {
+    
+  },
+  mounted () {
+
+  }
+}
+</script>

src/components/GroupTour/block/hot.vue

+<style>
+.hot{
+  position: relative;
+  height: 466px;
+  background: #ffffff url(../../../assets/img/groupTour/hot_bg.png) no-repeat 0 100%/100% auto;
+}
+.hot .box{
+  position: relative;
+  width: 1180px;
+  margin: 50px auto 0 auto;
+  height: 360px;
+}
+.hot .box img{
+  width: 595px;
+  height: 351px;
+  padding-left: 35px;
+  position: relative;
+  z-index: 2;
+}
+.hot .box>div{
+  width: 464px;
+  padding: 51px 69px 68px 84px;
+  background-color: #FFFFFF;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.hot .box div .tit{
+  color: #444444;
+  font-size: 20px;
+}
+.hot .box div .s_tit{
+  color: #999999;
+  font-size: 12px;
+}
+.hot .box div .info{
+  margin-top: 24px;
+  color: #999999;
+  font-size: 14px;
+}
+.hot .box div .see_detai span{
+  display: inline-block;
+  width:163px;
+  height:41px;
+  border:1px solid rgba(153,153,153,1);
+  margin-top: 32px;
+  color: #999999;
+  text-align: center;
+  line-height: 41px;
+}
+</style>
+<template>
+  <el-row class="hot">
+    <div class="box">
+      <img src="../../../assets/img/groupTour/hot_img.png" alt="">
+      <div>
+        <p class="tit" :title="data[0].title">{{data[0].lineName}}-{{data[0].ltName}}</p>
+        <p class="s_tit">{{'Japan Tour'.toUpperCase()}}</p>
+        <p class="info">
+          {{data[0].title}}
+        </p>
+        <div class="see_detai">
+          <span class="__cp" @click="goUrl(data[0].id, data[0])">查看详情</span>
+        </div>
+      </div>
+    </div>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    goUrl(id, obj){
+      let path = 'detailTwo'
+      path=`${path}/${encodeURIComponent(id)}/${obj.tcid}`;
+      this.$router.push({ path })
+    },
+  },
+  mounted () {
+
+  }
+}
+</script>

src/components/GroupTour/index.vue

+<style>
+  @import "../../assets/css/groupTour/index.css";
+</style>
+<template>
+  <el-row class="GroupTour">
+    <!-- 顶部图片 -->
+    <el-row class="GroupTour_top_bg">
+      <img src="../../assets/img/groupTour/top_bg.png" alt="">
+    </el-row>
+    <el-row class="_list" v-loading="loading">
+      <!-- 跳水特价 -->
+      <Vdiving :data="tiaoshui" :isLogin="isLogin" class="w1180"/>
+      <!-- 线路列表 -->
+      <p class="tit w1180">出境跟团游</p>
+      <template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index < 3 && (item.lineTeam && item.lineTeam.length > 0)">
+        <Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
+      </template>
+      <!-- 热门 -->
+      <Vhot :data="tehuis"/>
+      <!-- 线路列表 -->
+      <template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index > 2 && (item.lineTeam && item.lineTeam.length > 0)">
+        <Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
+      </template>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import diving from './block/diving'
+import list from './block/list'
+import hot from './block/hot'
+import moment from 'moment'
+export default {
+  components: {
+    Vlist: list,
+    Vdiving: diving,
+    Vhot: hot,
+  },
+  data () {
+    return {
+      VlistData: [],
+      VhotData: [],
+      site: 0,
+      companyId: -1,
+      recoItems: [],
+      tehuis: [],
+      tiaoshui: [],
+      recoItemList: {
+        line: []
+      },
+      imgs: [],
+      isLogin: 1,
+      loadingIndex: -1,
+      loading: true,
+    }
+  },
+  methods: {
+    loadModuleData(sno){
+      // console.log(this.recoItems.line)
+      if(sno < this.recoItems.line.length){
+        let msg={
+          pageIndex: 1,
+          pageSize: 5,
+          companyId: this.companyId,
+          lineId: this.recoItems.line[sno].id,
+          lineTeamId: 0
+        }
+        this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
+          this.recoItems.line[sno] = Object.assign({}, this.recoItems.line[sno], {pageData: r.data.data.pageData})
+          // console.log(this.recoItems.line[sno].pageData)
+          this.loadModuleData(sno+1)
+        },null)
+      } else {
+        // this.recoItemList = this.recoItems
+        this.loading = false
+      }
+    },
+    loadModuleDataNoLoop(tab, index){
+      let sno = tab.name.split('_')[1], ltId = tab.name.split('_')[0]
+      console.log(tab)
+      this.loadingIndex=sno
+      let msg={
+        pageIndex: 1,
+        pageSize: 5,
+        companyId: this.companyId,
+        lineId: this.recoItems.line[sno].id,
+        lineTeamId: ltId
+      }
+      this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
+        this.recoItems.line[sno].pageData=r.data.data.pageData
+        this.loadingIndex=-1
+        this.MsgBus.$emit('reloadList', index)
+      },null)
+    },
+    loadRecoItems(){
+      if (this.companyId!=-1) {
+        this.apipost('b2b_get_GetHomeSearchItem',{'companyId': this.companyId, lineDirection: 2,}, r=> {
+          r.data.data.line.forEach( x => {
+              x.chosenLineTeam = '0'
+          })
+          this.recoItems = r.data.data
+          this.activeName = r.data.data.recommend[0].id.toString()
+          this.loadModuleData(0)
+        },null)
+      }
+    },
+    loadTiaoshui(){
+      if (this.companyId!=-1 ){
+        let msg = {
+          pageIndex: 1,
+          pageSize: 12,
+          companyId: this.companyId,
+          recommendType: 2,
+        }
+        this.apipost('b2b_get_GetB2BHomeRecommendPageList', msg, r=>{
+          this.tiaoshui = r.data.data.pageData
+          this.tiaoshui.forEach(x=> {
+            x.dataStr = moment(x.startDate).format('M-D')
+          })
+        }, null)
+      }
+    },
+    loadTehuis(){
+      if(this.companyId!=-1){
+        let msg={
+          pageIndex: 1,
+          pageSize: 1,
+          companyId: this.companyId,
+          recommendType: 1,
+        }
+        this.apipost('b2b_get_GetB2BHomeRecommendPageList',msg,r=>{
+          this.tehuis = r.data.data.pageData
+          this.tehuis.forEach(x=>{
+            x.dataStr=moment(x.startDate).format('M-D')
+          })
+        },null)
+      }
+    },
+  },
+  mounted () {
+    this.companyId=localStorage.site
+    this.loadRecoItems();
+    this.loadTehuis();
+    this.loadTiaoshui();
+  }
+}
+</script>

src/router.js

@@ -84,11 +84,20 @@ export default new Router({
 						title: '团队详情-印象之旅~感动与世界同步'
 					}
         },
+        // {
+        //   path: "/heel",
+        //   name: "heel",
+        //   component: resolve =>
+        //     require(["@/components/mall/heeltour"], resolve),
+        //   meta: {
+        //     title: "跟团游-印象之旅~感动与世界同步"
+        //   }
+        // },
         {
           path: "/heel",
           name: "heel",
           component: resolve =>
-            require(["@/components/mall/heeltour"], resolve),
+            require(["@/components/GroupTour/index"], resolve),
           meta: {
             title: "跟团游-印象之旅~感动与世界同步"
           }

src/views/index.vue

@@ -4,8 +4,8 @@
 
 <template>
     <div class="home-box" v-if="isPhone">
-        <mallHead msg="" @forword='goUrl("2-1")' @siteCity="siteCity"/>
-        <!-- <newHead/> -->
+        <!-- <mallHead msg="" @forword='goUrl("2-1")' @siteCity="siteCity"/> -->
+        <newHead/>
         <div :style='{"min-height":minHeight+"px"}'>
             <transition name="slide">
             <router-view :changeCity='changeCity'></router-view>