绑定列表数据

src/assets/css/common.css

@@ -121,4 +121,22 @@
 }
 .mg-r-10{
     margin-right: 10px;
+}
+.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar{
+			/*滚动条整体样式*/
+			width: 4px;
+			/*高宽分别对应横竖滚动条的尺寸*/
+			height: 8px;
+}
+.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-thumb ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-thumb{
+			/*滚动条里面小方块*/
+			border-radius: 4px;
+			-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+			background: #c9c9c9;
+}
+.inputActive .el-row .el-col.el-col-6::-webkit-scrollbar-track ,.inputActive2 .el-row .el-col.el-col-6::-webkit-scrollbar-track{
+			/*滚动条里面轨道*/
+            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+            border-radius: 4px;
+            background: #EDEDED;
 }
\ No newline at end of file

src/components/FreeTravel/FreeHome.vue

@@ -57,6 +57,10 @@
   z-index: 3;
   background-color: white;
 }
+.inputActive .el-row .el-col.el-col-6{
+  height: 400px;
+  overflow: auto;
+}
 .fh-search-box .fh-search-box-input div:nth-child(2){
   width: 77px;
   justify-content: center;
@@ -82,7 +86,7 @@
 .city-tag{
   padding: 13px 20px;
   color: #333;
-  width: 100%;
+  width: 99%;
   box-sizing: border-box;
   position: relative;
 }
@@ -121,11 +125,13 @@
   font-size:14px;
   color: #333;
   font-weight:bold;
+  flex: 1;
 }
 .city-list>p{
   color: #888888;
   cursor: pointer;
   font-size: 12px;
+  flex: 6;
 }
 .city-list>p span{
   display: inline-block;
@@ -641,19 +647,19 @@
         <div v-show="inputActive" class="inputActive" @click.stop>
           <el-row v-if="CCList.length>0 ">
             <el-col :span="6">
-              <div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index">
-                <p @click="goListPage(1, item.short, item.name, index)">{{item.name}}</p>
+              <div class="city-tag __cp" v-for="(item, index) in CCList" @click="CCListActive = index" :class="{'active': CCListActive == index}" :key="index" >
+                <p >{{item.Country_Name}}</p>
                 <div class="f12 text2">
-                  <span @click="goListPage(2, s.number, s.name, sIndex)" v-for="(s, sIndex) in item.cities" :key="sIndex">{{s.name}}</span>
+                  <span v-for="(s, sIndex) in item.Cities" :key="sIndex">{{s.City_Name}}</span>
                 </div>
                 <div class="triangle-up"></div>
               </div>
             </el-col>
             <el-col :span="18">
               <div class="city-list">
-                <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].short, CCList[CCListActive].name)">{{CCList[CCListActive].name}}</span>
+                <span class="PingFangR __cp" @click="goListPage(1, CCList[CCListActive].Country_Code, CCList[CCListActive].Country_Name)">{{CCList[CCListActive].Country_Name}}</span>
                 <p>
-                  <span @click="goListPage(2, CCList[CCListActive].number, item.name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].cities" :key="index">{{item.name}}</span>
+                  <span @click="goListPage(2, item.City_Code, item.City_Name, index)" class="f14 __cp" v-for="(item, index) in CCList[CCListActive].Cities" :key="index">{{item.City_Name}}</span>
                 </p>
               </div>
             </el-col>
@@ -665,10 +671,10 @@
           <div :style="`background-image: url(${item.src})`">
             <span>{{item.name}}</span>
             <div class="city-m-b">
-              <span>门票</span>
-              <span>餐食</span>
-              <span>一日游</span>
-              <img src="../../assets/img/freeHome/more_s.png" alt="">
+              <span @click.stop="goList2(item, 'menpiao')">门票</span>
+              <span @click.stop="goList2(item, 'canshi')">餐食</span>
+              <span @click.stop="goList2(item, 'yiri')">一日游</span>
+              <img @click.stop="goList2(item)" src="../../assets/img/freeHome/more_s.png" alt="">
             </div>
           </div>
         </div>
@@ -934,22 +940,28 @@ export default {
         name: '东京',
         src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335633.jpg",
         id: 1,
+        number: "A01-003-00001"
       },{
         name: '京都',
         src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335636.jpg",
         id: 2,
+        number: "A01-003-00003",
       },{
         name: '大阪',
         src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335628.jpg",
         id: 3,
+        number: "A01-003-00002"
+
       },{
         name: '首尔',
         src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335683.jpg",
         id: 0,
+        number: 'A01-004-00001'
       },{
         name: '曼谷',
         src: "http://imgfile.oytour.com/New/Upload/Cloud/2019-08/20190821052335631.jpg",
         id: 4,
+        number: "A01-010-00001"
       }],
       KkdayDomain: "",
       CCList: [],
@@ -963,6 +975,17 @@ export default {
     this.getCCList()
   },
   methods: {
+    goList2(obj, type){
+      this.$router.push({ 
+        name: "FreeList2",
+        query: {
+          id: obj.number,
+          type: 2,
+          name: obj.name,
+          CCListActive: 0,
+        }
+      });
+    },
     goListPage(type, id, name, index){
       this.inputActive = false;
       let url = type == 1 ? "FreeList" : "FreeList2"
@@ -990,8 +1013,14 @@ export default {
         {},
         res => {
           if (res.data.resultCode === 1) {
-            let data = res.data.data.countries
-            this.CCList = data
+            let data = res.data.data.Countries
+            let deleteIdiot = []
+            data.map(x=>{
+              if(x.Country_Name !== "台湾" && x.Country_Name !== "香港" && x.Country_Name !== "澳门") {
+                deleteIdiot.push(x)
+              }
+            })
+            this.CCList = deleteIdiot
           } else {
             this.Error(res.data.message);
           }