11

src/components/busManagement/BookAcar/components/Details.vue

@@ -7,16 +7,14 @@
       <div class="hotelDetails-infor">
         <div>
           <i class="el-icon-location"></i>
-                    <p v-if="t.CityList2&&t.CityList2.length>0&&t.CityList2[0]"><span>{{t.CityList2[0].CountryName }}{{t.CityList2[0].CityName}}</span></p>
+          <p v-if="t.CityList2&&t.CityList2.length>0&&t.CityList2[0]">
+            <span>{{t.CityList2[0].CountryName }}{{t.CityList2[0].CityName}}</span></p>
         </div>
       </div>
       <div class="hotelDetails-ImgMap">
         <div class="hotelDetails-Img">
           <div style="position: relative;">
-                        <el-image 
-                            v-if="images.length>0"
-                            style="width: 100%; height: 100%"
-                            :src="images[0]"
+            <el-image v-if="images.length>0" style="width: 100%; height: 100%" :src="images[0]"
               :preview-src-list="images" fit="cover">
               <div slot="placeholder" class="image-slot">
                 {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
@@ -28,10 +26,7 @@
           </div>
           <div v-if="images.length>1">
             <div class="Img-right-box" :style="{'height':images.length==2?'100%':'50%'}">
-                            <el-image 
-                            style="width: 100%; height: 100%"
-                            :src="images[1]"
-                            :preview-src-list="images" fit="cover">
+              <el-image style="width: 100%; height: 100%" :src="images[1]" :preview-src-list="images" fit="cover">
                 <div slot="placeholder" class="image-slot">
                   {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
                 </div>
@@ -45,10 +40,8 @@
                 <span class="fz20 text-weight-bold">+</span>
                 <span class="text-h5 text-weight-bold">{{ images.length - 3 }}</span>
               </div>
-                            <el-image 
-                            style="width: 100%; height: 100%"
-                            :src="images[2]"
-                            :preview-src-list="images" ref="images" fit="cover">
+              <el-image style="width: 100%; height: 100%" :src="images[2]" :preview-src-list="images" ref="images"
+                fit="cover">
                 <div slot="placeholder" class="image-slot">
                   {{$t('objFill.jiazazhong')}}<span class="dot">...</span>
                 </div>
@@ -69,13 +62,17 @@
         <div>{{ t.Description }}</div>
       </div>
       <div class="hotelDetails-service">
-                <div class="service"><span class="width120">{{$t('objFill.chanpinjiesao')}}</span><div>{{t.Introduce?t.Introduce:'-'}}</div></div>
-                <div class="service" v-if="t.TravelHours"><span class="width120">{{$t('objFill.baocheshichang')}}</span><div>{{t.TravelHours?t.TravelHours:'-'}}</div></div>
+        <div class="service"><span class="width120">{{$t('objFill.chanpinjiesao')}}</span>
+          <div>{{t.Introduce?t.Introduce:'-'}}</div>
+        </div>
+        <div class="service" v-if="t.TravelHours"><span class="width120">{{$t('objFill.baocheshichang')}}</span>
+          <div>{{t.TravelHours?t.TravelHours:'-'}}</div>
+        </div>
         <div class="service"><span class="width120">{{$t('objFill.feiyongbaohan')}}</span>
           <div>
             <template v-if="t.PriceIncludeList">
               <el-tag v-for="s in t.PriceIncludeList" :key="s" size="mini"
-                        style="margin-right: 10px;text-align: center;" >{{s}}</el-tag>
+                style="margin-right: 10px;text-align: center;">{{s}}</el-tag>
             </template>
             <template v-else>-</template>
           </div>
@@ -84,13 +81,17 @@
           <div>
             <template v-if="t.PriceNotIncludeList">
               <el-tag v-for="s in t.PriceNotIncludeList" :key="s" size="mini"
-                            style="margin-right: 10px;text-align: center;" >{{s}}</el-tag>
+                style="margin-right: 10px;text-align: center;">{{s}}</el-tag>
             </template>
             <template v-else>-</template>
           </div>
         </div>
-                <div class="service"><span class="width120">{{$t('objFill.ruheshiyong')}}</span><div>{{t.HowUse?t.HowUse:'-'}}</div></div>
-                <div class="service"><span class="width120">{{$t('objFill.quxiaozhengce')}}</span><div>{{t.CancelPolicy?t.CancelPolicy:'-'}}</div></div>
+        <div class="service"><span class="width120">{{$t('objFill.ruheshiyong')}}</span>
+          <div>{{t.HowUse?t.HowUse:'-'}}</div>
+        </div>
+        <div class="service"><span class="width120">{{$t('objFill.quxiaozhengce')}}</span>
+          <div>{{t.CancelPolicy?t.CancelPolicy:'-'}}</div>
+        </div>
       </div>
       <div class="hotelDetails-prompt prompt">
         <p>{{$t('objFill.yudinxuzhi')}}</p>
@@ -99,12 +100,14 @@
     </div>
 
   </div>
-  </template>
-  <script>
+</template>
+<script>
   import Map from "../../../public/echoMap.vue";
   export default {
     props: ['detailsObj'],
-      components: { Map },
+    components: {
+      Map
+    },
     data() {
       return {
         map: null,
@@ -112,9 +115,9 @@
         t: {},
         images: [],
         center: null,
-            ObjMap:{
-                lng:'',
-                lat:'',
+        ObjMap: {
+          lng: '',
+          lat: '',
           Range: '',
           Address: ''
         }
@@ -128,15 +131,14 @@
         deep: true
       },
     },
-      created() {
-      },
+    created() {},
     mounted() {
-        if(this.detailsObj){
+      if (this.detailsObj) {
         this.getInfo()
       }
     },
     methods: {
-        getInfo(){
+      getInfo() {
         let msg = {
           ProductId: this.detailsObj.Id,
         };
@@ -147,9 +149,9 @@
             this.t = res.data.data
             this.images = this.t.ImageList
             this.ObjMap = {
-                        lng:this.t.PlaceList[0].Lng,
-                        lat:this.t.PlaceList[0].Lat,
-                        Range:Number(this.t.PlaceList[0].Range),
+              lng: this.t.PlaceList[0].Lng,
+              lat: this.t.PlaceList[0].Lat,
+              Range: Number(this.t.PlaceList[0].Range),
               Address: this.t.PlaceList[0].Address
             }
             // this.initMap(this.t.PlaceList[0].Lng,this.t.PlaceList[0].Lat,this.t.Name)
@@ -157,20 +159,23 @@
           err => {}
         );
       },
-        initMap(lng,lat,name) {
-            if(this.map){
+      initMap(lng, lat, name) {
+        if (this.map) {
           this.map.clearOverlays()
         }
         var that = this;
-            this.map = new BMap.Map(`mapContainer_${this.detailsObj.Id}`, {enableMapClick:false,
+        this.map = new BMap.Map(`mapContainer_${this.detailsObj.Id}`, {
+          enableMapClick: false,
           minZoom: 3,
           maxZoom: 50,
         }) //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
-            var point = new BMap.Point(lng,lat);
-            this.map.centerAndZoom(new BMap.Point(lng, lat),15)
+        var point = new BMap.Point(lng, lat);
+        this.map.centerAndZoom(new BMap.Point(lng, lat), 15)
         this.map.enableScrollWheelZoom(false)
         var marker = new BMap.Marker(point); //标记点
-            var label = new BMap.Label(name,{offset:new BMap.Size(0,28)});//标签   
+        var label = new BMap.Label(name, {
+          offset: new BMap.Size(0, 28)
+        }); //标签   
         label.setStyle({
           color: "#FFF",
           fontSize: "10px",
@@ -186,173 +191,206 @@
         marker.setLabel(label)
         this.map.addOverlay(marker);
       },
-        showImageHandler(){
+      showImageHandler() {
         this.$refs.images.showViewer = true
       },
     }
   };
 
-  </script>
+</script>
 
-  <style scoped>
-    .image-slot{
+<style scoped>
+  .image-slot {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-    .hotelDetails-header{
+
+  .hotelDetails-header {
     display: flex;
     align-items: center;
   }
-    .hotelDetails-header span{
+
+  .hotelDetails-header span {
     font-size: 18px;
     font-weight: bold;
     margin-right: 10px;
     color: black;
   }
-    .hotelDetails-content{
 
-    }
-    .hotelDetails-infor{
+  .hotelDetails-content {}
+
+  .hotelDetails-infor {
     padding: 20px 0;
   }
-    .hotelDetails-infor div{
+
+  .hotelDetails-infor div {
     display: flex;
     align-items: center;
   }
-    .hotelDetails-infor>div:first-child{
+
+  .hotelDetails-infor>div:first-child {
     margin-bottom: 5px;
   }
-    .hotelDetails-infor div i{
+
+  .hotelDetails-infor div i {
     color: #BDBDBD;
     margin-right: 5px;
   }
-    .hotelDetails-infor div p{
+
+  .hotelDetails-infor div p {
     margin-right: 10px;
   }
-    .hotelDetails-infor div p span{
+
+  .hotelDetails-infor div p span {
     font-size: 13px;
     color: black;
   }
-    .hotelDetails-infor div p span:nth-child(2),.hotelDetails-infor div p a{
+
+  .hotelDetails-infor div p span:nth-child(2),
+  .hotelDetails-infor div p a {
     color: #2196F3;
     margin-left: 5px;
   }
-    .hotelDetails-infor div p a{
+
+  .hotelDetails-infor div p a {
     cursor: pointer;
-        text-decoration:underline
+    text-decoration: underline
   }
-    .hotelDetails-ImgMap{
+
+  .hotelDetails-ImgMap {
     height: 300px;
     display: flex;
     justify-content: space-between;
   }
-    .hotelDetails-Img{
+
+  .hotelDetails-Img {
     width: 60%;
   }
-    .hotelDetails-Map{
+
+  .hotelDetails-Map {
     flex: 1;
     flex-shrink: 0;
   }
-    .hotelDetails-Map{
+
+  .hotelDetails-Map {
     margin-left: 10px;
   }
-    .hotelDetails-Img{
+
+  .hotelDetails-Img {
     display: flex;
     /* overflow: hidden; */
   }
-    .hotelDetails-Img>div:first-child{
+
+  .hotelDetails-Img>div:first-child {
     flex-grow: 1;
   }
-    .hotelDetails-Img>div:nth-child(2){
+
+  .hotelDetails-Img>div:nth-child(2) {
     width: 50%;
     margin-left: 10px;
     display: flex;
     flex-direction: column;
   }
-    .Img-right-box:nth-child(2){
+
+  .Img-right-box:nth-child(2) {
     margin-top: 8px;
   }
-    .Img-right-box{
+
+  .Img-right-box {
     height: 50%;
     position: relative;
     overflow: hidden;
   }
-    .Img-right-num{
+
+  .Img-right-num {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-        background: rgba(23,23,23,.5);
+    background: rgba(23, 23, 23, .5);
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
   }
-    .Img-right-num span{
+
+  .Img-right-num span {
     color: #ffffff;
     font-size: 23px;
     font-weight: bold;
   }
-    .Img-right-num span:first-child{
+
+  .Img-right-num span:first-child {
     font-size: 20px;
     font-weight: bold;
     margin-right: 10px;
   }
-    .hotelDetails-prompt{
+
+  .hotelDetails-prompt {
     margin: 20px 0;
     border-radius: 3px;
     background: #E1F5FE;
     padding: 10px;
   }
-    .hotelDetails-prompt p{
+
+  .hotelDetails-prompt p {
     font-weight: 500;
     font-size: 13px;
     padding: 0 0 10px 0;
   }
-    .hotelDetails-prompt div{
+
+  .hotelDetails-prompt div {
     color: #5E5E5E;
     font-size: 12px;
     line-height: 25px;
   }
-    .hotelDetails-prompt.prompt{
+
+  .hotelDetails-prompt.prompt {
     background: #FFF3E0;
     border: 1px dashed #FFA500;
   }
-    .hotelDetails-service{
+
+  .hotelDetails-service {
     padding: 0 15px;
   }
-    .service{
+
+  .service {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
   }
-    .service span.width120{
+
+  .service span.width120 {
     color: #A8ABBC;
     font-size: 12px;
     width: 120px;
     flex-shrink: 0;
   }
-    .service div{
+
+  .service div {
     flex-grow: 1;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     color: black;
   }
-    .service div p{
+
+  .service div p {
     margin-right: 15px;
   }
-    .service div li{
+
+  .service div li {
     list-style-type: disc;
     list-style-position: outside;
     white-space: nowrap;
     margin-right: 15px;
   }
-    .Img-absolute{
+
+  .Img-absolute {
     position: absolute;
     padding: 5px;
     bottom: unset;
@@ -363,20 +401,26 @@
     font-size: 12px;
     background: #ffffff;
   }
-    .Img-absolute-box{
+
+  .Img-absolute-box {
     display: flex;
     flex-direction: row;
     align-items: center;
     overflow: hidden;
   }
-    .Img-absolute-box div:first-child{
-        padding: 0 4px; font-size: 12px;background: black;color: white;
-    }
-    .Img-absolute-box div:last-child{
-        padding: 0 4px; font-size: 12px; background: #f0bd86;color: black;
-    }
-    
 
+  .Img-absolute-box div:first-child {
+    padding: 0 4px;
+    font-size: 12px;
+    background: black;
+    color: white;
+  }
 
-  </style>
+  .Img-absolute-box div:last-child {
+    padding: 0 4px;
+    font-size: 12px;
+    background: #f0bd86;
+    color: black;
+  }
 
+</style>