no message

src/components/Hotel/singleProduct/components/hotelDetails.vue

+<template>
+    <div>
+       <div class="hotelDetails-header">
+         <span>{{ h.Name }}</span>
+         <el-rate v-model="h.Star" disabled text-color="#ff9900"></el-rate>
+       </div>
+       <div class="hotelDetails-content">
+            <div class="hotelDetails-infor">
+                <div>
+                    <i class="el-icon-location"></i>
+                    <p><span>{{ h.Address }}</span></p>
+                </div>
+                <div>
+                    <i class="el-icon-phone"></i>
+                    <p><span>座机:</span><span>{{ h.Tel }}</span></p>
+                    <p><span>傳真:</span><span>{{ h.Fax == '' ? '无' : h.Fax }}</span></p>
+                    <p><span>官网:</span><a :href="h.URL" target="_blank">{{ h.URL }}</a></p>
+                </div>
+            </div>
+            <div class="hotelDetails-ImgMap">
+                <div class="hotelDetails-Img">
+                    <div style="position: relative;">
+                        <div v-if="h.ChainBrand" class="Img-absolute">
+                            <div class="Img-absolute-box">
+                              <div>品牌</div>
+                              <div>{{ h.ChainBrand }}</div>
+                            </div>
+                        </div>
+                        <el-image 
+                            style="width: 100%; height: 100%"
+                            :src="images[0]"
+                            :preview-src-list="images">
+                        </el-image>
+                    </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">
+                        </el-image>
+                        </div>
+                        <div class="Img-right-box" v-if="images.length>2">
+                            <div class="Img-right-num" v-if="images.length>3" @click="showImageHandler">
+                                <span class="fz20 text-weight-bold">+</span>
+                                <span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
+                            </div>
+                            <el-image 
+                            style="width: 100%; height: 100%"
+                            :src="images[2]"
+                            :preview-src-list="images" ref="images">
+                        </el-image>
+                        </div>
+                    </div>
+                </div>
+                <div class="hotelDetails-Map">
+                    <div :style="{height:'100%',width:'100%'}" id="mapContainer"></div>
+                </div>
+            </div>
+            <div class="hotelDetails-prompt">
+                <p>酒店详情</p>
+                <div>{{ h.Descriptions }}</div>
+            </div>
+            <div class="hotelDetails-service">
+                <div class="service"><span>入汤税</span><div>{{ moneyFormat(h.InTangTax) }}</div></div>
+                <div class="service"><span>城市税</span><div>{{ moneyFormat(h.CityTax) }}</div></div>
+                <div class="service"><span>停车场</span><div><p>{{ h.IsHavearking == 0 ? '无' : '有' }}</p><li>{{ h.ParkFee == 0 ? '免費' : moneyFormat(h.ParkFee) + '元' }}</li></div></div>
+                <div class="service"><span>预约截止天数</span><div>提前{{ h.DieLine }}天</div></div>
+                <div class="service"><span>是否含餐</span><div><p>{{ !h.isDinner ? '无' : '有' }}</p><li  v-if="h.isDinner" v-for="x in h.Dinners">{{ x.Name }}</li></div></div>
+                <div class="service"><span>酒店类型</span><div><p>{{ h.HotelTypeInfo?h.HotelTypeInfo.Name:'-' }}</p></div></div>
+                <div class="service"><span>设施服务</span><div><li v-for="(x, i) in h.CheckHotelService">{{ x.Content }}</li></div></div>
+            </div>
+            <div class="hotelDetails-prompt prompt">
+                <p>溫馨提醒</p>
+                <div>{{ h.WarmTip }}</div>
+            </div>
+       </div>
+       
+    </div>
+  </template>
+  <script>
+    export default {
+      props: {
+        hotelId: {
+            type: Number,
+            require: false
+        },
+      },
+      data() {
+        return {
+            map: null,
+            loading: true,
+            h: {},
+            dinners: [
+                {Id:1,Name:'早餐'},
+                {Id:2,Name:'无午'},
+                {Id:3,Name:'晚餐'},
+            ],
+            hotelTyps: [
+                {Id:1,Name:'商务酒店'},
+                {Id:2,Name:'豪华酒店'},
+                {Id:3,Name:'溫泉酒店'},
+                {Id:4,Name:'海滩度假酒店'},
+            ],
+            images: [],
+            currentImage: '',
+            center: null
+        };
+      },
+      watch: {
+        hotelId: {
+            handler: function (val, oldVal) {
+                this.initHotel()
+            },
+            deep: true
+        },
+      },
+      created() {
+        
+      },
+      mounted() {
+        this.initHotel()
+        
+      },
+      methods: {
+        initMap(lng,lat,name) {
+            if(this.map){
+                this.map.clearOverlays()
+            }
+            var that = this;
+            this.map = new BMap.Map("mapContainer", {enableMapClick:false,
+                minZoom: 3,
+                maxZoom: 50,
+            })  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
+            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)});//标签   
+                label.setStyle({
+                color: "#FFF",
+                fontSize: "10px",
+                height: "24px",
+                lineHeight: "20px",
+                padding: "2px 5px",
+                border: "1px solid rgba(230, 0, 0, 0.7)",
+                background: "rgba(230, 0, 0, 0.7)",
+                fontWeight: "bold",
+                transform: 'translateX(-50%)',
+                fontFamily: "微软雅黑"
+            })   
+            marker.setLabel(label)
+            this.map.addOverlay(marker);
+            
+        },
+        initHotel() {
+            this.loading = true
+            this.apipost("hotel_post_GetAll", {
+                hotelID: this.hotelId
+            },r=> {
+                if (r.data.resultCode == 1) {
+                    let temp = r.data.data
+                    temp.isDinner = temp.UseDinnerType && temp.UseDinnerType != ''
+                    if (temp.isDinner) {
+                        temp.Dinners = this.dinners.filter((x) => {
+                        return temp.UseDinnerType.split(',').indexOf(x.Id.toString()) != -1
+                        })
+                    }
+                    temp.HotelTypeInfo = this.hotelTyps.find((x) => x.Id == temp.HotelType)
+                    let tempService = JSON.parse(temp.FacilityServices)[0]?JSON.parse(temp.FacilityServices)[0]: {}
+                    temp.CheckHotelService = tempService.list.filter((x) => tempService.checked.indexOf(x.ID) != -1)
+                    this.h = temp
+                    this.h.List.forEach((x) => {
+                        this.images.push(`http://imgfile.oytour.com${x.Path}`)
+                    })
+                    this.initMap(this.h.Lng, this.h.Lat, this.h.Name)
+                }else{
+                    this.Error(r.data.message);
+                }
+                this.loading = false
+            },null)
+        },
+        showImageHandler(){
+            this.$refs.images.showViewer = true
+        },
+      }
+    };
+  
+  </script>
+  
+  <style scoped>
+    .hotelDetails-header{
+        display: flex;
+        align-items: center;
+    }
+    .hotelDetails-header span{
+        font-size: 18px;
+        font-weight: bold;
+        margin-right: 10px;
+        color: black;
+    }
+    .hotelDetails-content{
+        
+    }
+    .hotelDetails-infor{
+        padding: 20px 0;
+    }
+    .hotelDetails-infor div{
+        display: flex;
+        align-items: center;
+    }
+    .hotelDetails-infor>div:first-child{
+        margin-bottom: 5px;
+    }
+    .hotelDetails-infor div i{
+        color: #BDBDBD;
+        margin-right: 5px;
+    }
+    .hotelDetails-infor div p{
+        margin-right: 10px;
+    }
+    .hotelDetails-infor div p span{
+        font-size: 13px;
+        color: black;
+    }
+    .hotelDetails-infor div p span:nth-child(2),.hotelDetails-infor div p a{
+        color: #2196F3;
+        margin-left: 5px;
+    }
+    .hotelDetails-infor div p a{
+        cursor: pointer;
+        text-decoration:underline
+    }
+    .hotelDetails-ImgMap{
+        display: flex;
+        justify-content: space-between;
+    }
+    .hotelDetails-Img,.hotelDetails-Map{
+        flex: 1;
+        flex-shrink: 0;
+    }
+    .hotelDetails-Map{
+        margin-left: 10px;
+    }
+    .hotelDetails-Img{
+        display: flex;
+        /* overflow: hidden; */
+    }
+    .hotelDetails-Img>div:first-child{
+        flex-grow: 1;
+    }
+    .hotelDetails-Img>div:nth-child(2){
+        width: 50%;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+    .Img-right-box:nth-child(2){
+        margin-top: 8px;
+    }
+    .Img-right-box{
+        height: 50%;
+        position: relative;
+        overflow: hidden;
+    }
+    .Img-right-num{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(23,23,23,.5);
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+    .Img-right-num span{
+        color: #ffffff;
+        font-size: 23px;
+        font-weight: bold;
+    }
+    .Img-right-num span:first-child{
+        font-size: 20px;
+        font-weight: bold;
+        margin-right: 10px;
+    }
+    .hotelDetails-prompt{
+        margin: 20px 0;
+        border-radius: 3px;
+        background: #E1F5FE;
+        padding: 10px;
+    }
+    .hotelDetails-prompt p{
+        font-weight: 500;
+        font-size: 13px;
+        padding: 0 0 10px 0;
+    }
+    .hotelDetails-prompt div{
+        color: #5E5E5E;
+        font-size: 12px;
+        line-height: 25px;
+    }
+    .hotelDetails-prompt.prompt{
+        background: #FFF3E0;
+        border: 1px dashed #FFA500;
+    }
+    .hotelDetails-service{
+        padding: 0 15px;
+    }
+    .service{
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 0;
+    }
+    .service span{
+        color: #A8ABBC;
+        font-size: 12px;
+        width: 120px;
+        flex-shrink: 0;
+    }
+    .service div{
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: black;
+    }
+    .service div p{
+        margin-right: 15px;
+    }
+    .service div li{
+        list-style-type: disc;
+        list-style-position: outside;
+        white-space: nowrap;
+        margin-right: 15px;
+    }
+    .Img-absolute{
+        position: absolute;
+        padding: 5px; 
+        bottom: unset; 
+        z-index: 1; 
+        border-bottom-right-radius: 4px;
+        left: 0;
+        top: 0;
+        font-size: 12px;
+        background: #ffffff;
+    }
+    .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;
+    }
+    
+    
+  
+  </style>
+  
\ No newline at end of file