列表

src/assets/css/common.css

@@ -7,12 +7,18 @@
 .commonF .f14{
     font-size: 14px;
 }
+.commonF .f16{
+    font-size: 16px;
+}
 .commonF .f18{
     font-size: 18px;
 }
 .commonF .f20{
     font-size: 20px;
 }
+.commonF .f24{
+    font-size: 24px;
+}
 .commonF .f26{
     font-size: 26px;
 }
@@ -64,6 +70,13 @@
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
 }
+.commonF .text4{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+}
 .commonF .cee{
     color: #EE4454
 }
@@ -93,4 +106,19 @@
 }
 .commonF .c99{
     color: #999999
+}
+.commonF .cff{
+    color: #ffffff
+}
+.del-text{
+    text-decoration: line-through
+}
+.bold{
+    font-weight: bold;
+}
+.PingFangR{
+    font-family: 'PingFangR'
+}
+.mg-r-10{
+    margin-right: 10px;
 }
\ No newline at end of file

src/components/FreeTravel/FreeDetail.vue

 <template>
-  <div class="commonF FreeDetail">
+  <div class="commonF FreeDetail" v-if="loading">
       <div class="w1200">
           <div class="bannerImg">
               <img style="width:100%;height:100%" src="../../assets/img/juan/banner.png" alt="">
@@ -11,16 +11,16 @@
           </div>
           <div class="Content basefix" style="margin-top:20px;margin-bottom:50px">
               <div class="left" style="width:795px;margin-right:47px">
-                <p class="pfR">【东京人气温泉】大江户温泉物语实体门票（台湾邮寄）</p>
-                <p class="f14 c99" style="margin:15px 0">东京旅行必去台场的大江户温泉物语，体验江户时代造景的主题乐园。在 KKday 购买比官网便宜的台场大江户门票，带你穿上浴衣漫步在江户时代街道，泡汤、美食、休閒娱乐一次满足，适合全家大小、三五好友一起来同乐！</p>
+                <p class="pfR">{{dataDetail.prod_name}}</p>
+                <p class="f14 c99" style="margin:15px 0">{{dataDetail.prod_desc}}</p>
                  <el-row class="titleEl f14">
                      <el-col :span="6">
                          <img src="../../assets/img/free/xc.png" alt="">
-                         <span>行程时间12小时</span>
+                         <span>行程时间{{dataDetail.hours}}小时</span>
                      </el-col>
                      <el-col :span="6">
                          <img src="../../assets/img/free/yy.png" alt="">
-                         <span>日语/English导游</span>
+                         <span v-for="(item, index) in dataDetail.guide_lang_list">{{item.lang_name}} <span v-if="index != dataDetail.guide_lang_list.length -1 ">/</span> </span>
                      </el-col>
                      <el-col :span="6">
                          <img src="../../assets/img/free/yxq.png" alt="">
@@ -171,13 +171,38 @@ export default {
             tomonth: moment().format("YYYY-MM"),
             classArray: [],
             num:1,
+            dataDetail: {},
+            loading: false,
         }
     },
     mounted() {
         let list=[];
+        let id = this.$route.query.id
+        this.getDetails(id)
         this.creatCalendar(list);
     },
     methods: {
+        getDetails(id){
+            // http://efficient.oytour.com/api/kkday/QueryProduct
+            this.apiJavaPost(
+                "/api/kkday/QueryProduct",
+                {
+                "prod_no": id ? id : "28474",
+                "locale":"zh-cn" 
+                },
+                res => {
+                if (res.data.resultCode === 1) {
+                    let data = res.data.data.prod
+                    console.log(data)
+                    this.loading = true
+                    this.dataDetail = data
+                } else {
+                    this.Error(res.data.message);
+                }
+                },
+                null
+            );
+        },
         handleChange(){},
         //   改变月份
         ChangeMonth(num){

src/router.js

@@ -546,6 +546,24 @@ export default new Router({
             title: "自由行"
           }
         },
+        {
+          path: "/FreeList2",
+          name: "FreeList2",
+          component: resolve =>
+            require(["@/components/FreeTravel/FreeList2"], resolve),
+          meta: {
+            title: "自由行"
+          }
+        },
+        {
+          path: "/FreeList",
+          name: "FreeList",
+          component: resolve =>
+            require(["@/components/FreeTravel/FreeList"], resolve),
+          meta: {
+            title: "自由行"
+          }
+        },
         {
           path: "/PersonalTailor",
           name: "PersonalTailor",