beizhu

package-lock.json

@@ -14189,6 +14189,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewer": {
+      "version": "0.10.11",
+      "resolved": "https://registry.npmjs.org/viewer/-/viewer-0.10.11.tgz",
+      "integrity": "sha1-3yR20nxfxZFKGVOQG7P1RdlRyxs="
+    },
     "viewerjs": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.3.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "lodash.get": "^4.4.2",
     "moment": "^2.22.2",
     "vant": "^1.3.10",
+    "viewer": "^0.10.11",
     "vue": "^2.5.17",
     "vue-amap": "^0.5.8",
     "vue-awesome-swiper": "^3.1.3",

src/App.vue

@@ -57,6 +57,7 @@ export default {
 </script>
 
 <style>
+.viewer-backdrop{background-color:rgba(0,0,0,0.8)!important}
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/components/bigimages.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="images" @click="close">
-    <!-- <img class="modal_content" :src="fileurl" preview /> -->
-    <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;" >
-      <swiper-slide class="swiper-zoom-container">
-        <!-- <div class="swiper-zoom-container"> -->
+  <div class="images">
+     <!-- <slot :images="images" :options="options">
+       <img :src="fileurl" alt="" >
+    </slot> -->
+    <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;" @click="close">
+      <swiper-slide class="swiper-zoom-container"> 
           <img :src="fileurl" alt="" >
-        <!-- </div> -->
       </swiper-slide>
     </swiper>
   </div>
@@ -26,6 +26,7 @@ export default {
 },
   methods: {
     close() {
+      // alert(1)
       this.$emit("close");
     },
   }

src/main.js

@@ -11,6 +11,8 @@ import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 import AMap from "vue-amap";
 import myTouch from "./touch/myTouch";
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
 AMap.initAMapApiLoader({
   key: "73df496773bd9a021d44d32d6e272fb5", //自己申请
   plugin: [
@@ -29,7 +31,14 @@ AMap.initAMapApiLoader({
 
 
 
+Viewer.setDefaults({
+  zIndexInline: 2017,
+  toolbar:false,
+  navbar:false,
+  title:false,
+  // movable:false,
 
+})
 
 
 Vue.filter('moment', function (value, formatString) {
@@ -43,6 +52,7 @@ Vue.use(Vant)
 Vue.use(VueAwesomeSwiper)
 Vue.use(preview)
 Vue.use(myTouch)
+Vue.use(Viewer)
 
 Vue.config.productionTip = false
 

src/pages/building/buildingimage.vue

@@ -6,7 +6,7 @@
         <swiper :options="swiperOption" ref="mySwiper" class="slidewrapper">
           <swiper-slide class="slideimg" v-for="(list1, index1) in detail.imageLst1" :key="index1" >
             <div  class="selsectimg">
-              <img class="lazyimage" :src="list1.fileurl" @click="viewpicture1(list1)"/>
+              <img class="lazyimage" :src="list1.fileurl" v-viewer/>
               <div class="houseindex">
                 <span class="imagetype">{{list1.name}}</span>
                 <div class="imageindex" >
@@ -32,7 +32,7 @@
           </swiper-slide>
           <swiper-slide class="slideimg" v-for="(list2, index2) in detail.imageLst2" :key="index2" >
             <div class="selsectimg">
-              <img class="lazyimage" :src="list2.fileurl"  @click="viewpicture2(list2)"/>
+              <img class="lazyimage" :src="list2.fileurl"  v-viewer/>
               <div class="houseindex">
                 <span class="imagetype">{{list2.name}}</span>
                 <div class="imageindex">
@@ -58,7 +58,7 @@
           </swiper-slide>
           <swiper-slide class="slideimg" v-for="(list3, index3) in detail.imageLst3" :key="index3" >
             <div class="selsectimg">
-              <img class="lazyimage" :src="list3.fileurl" @click="viewpicture3(list3)"/>
+              <img class="lazyimage" :src="list3.fileurl" v-viewer/>
               <div class="houseindex">
                 <span class="imagetype">{{list3.name}}</span>
                 <div class="imageindex">
@@ -84,7 +84,7 @@
           </swiper-slide>
           <swiper-slide class="slideimg" v-for="(list4, index4) in detail.imageLst4" :key="index4" >
             <div class="selsectimg">
-              <img class="lazyimage" :src="list4.fileurl" @click="viewpicture4(list4)"/>
+              <img class="lazyimage" :src="list4.fileurl" v-viewer/>
               <div class="houseindex">
                 <span class="imagetype">{{list4.name}}</span>
                 <div class="imageindex">
@@ -110,7 +110,7 @@
           </swiper-slide>
           <swiper-slide class="slideimg" v-for="(list5, index5) in detail.imageLst5" :key="index5">
             <div class="selsectimg">
-              <img class="lazyimage" :src="list5.fileurl" @click="viewpicture5(list5)"/>
+              <img class="lazyimage" :src="list5.fileurl" v-viewer/>
               <div class="houseindex">
                 <span class="imagetype">{{list5.name}}</span>
                 <div class="imageindex">
@@ -142,16 +142,14 @@
         <span class="boxcharacters" :class='{active:list.active}'>{{list.imagetypename}}</span>
       </div>
     </div>
-  <!-- <div class="bigimages"> -->
-   <big-images v-if="imgLook.state" :fileurl='imgLook.fileurl' @close='imgLook.state=false'></big-images>
-  <!-- </div> -->
+   <!-- <big-images v-if="imgLook.state" :fileurl='imgLook.fileurl' @close='imgLook.state=false'></big-images> -->
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
 import bottomDrawing from "../../img/bottomdrawing.jpg";
-import BigImages from '../../components/bigimages.vue'
+// import BigImages from '../../components/bigimages.vue'
 
 export default {
   name: "BuildingImage",
@@ -169,29 +167,24 @@ export default {
         preloadImages:false,
         speed: 500,
       },
-      // selected:true,
       isactive: false,
-      imgLook:{
-        state:false,
-        fileurl:''
-      }
+      // imgLook:{
+      //   state:false,
+      //   fileurl:''
+      // }
     };
   },
   components: {
     "vue-headful": () => import("vue-headful"),
-    'BigImages':BigImages,
+    // 'BigImages':BigImages,
   },
   computed: {
     ...mapState({
       detail: s => s.buildingimage.detail
     })
-    // swiper() {
-    //     return this.$refs.mySwiper.swiper;
-    //   }
   },
   created() {
     this.getBuildingimage({ buildingid: this.$route.query.id }).then(() => {
-      // this.$previewRefresh()
       this.showPage = true;
       this.lists = this.detail.imageTypeLst;
       this.lists.forEach((curr, index) => {
@@ -205,8 +198,6 @@ export default {
       on: {
         slideChangeTransitionEnd: () => {
           let swiper = this.$refs.mySwiper.swiper;
-          //  let selected=swiper.activeIndex;
-          // window.console.log(selected)
           if (swiper.activeIndex < parseInt(this.detail.imageLstCount1)) {
             let list = [];
             this.lists.forEach((curr, index) => {
@@ -291,26 +282,26 @@ export default {
     this.swiperOption = { ...config };
   },
   methods: {
-    viewpicture1(list1){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list1.fileurl
-    },
-    viewpicture2(list2){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list2.fileurl
-    },
-      viewpicture3(list3){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list3.fileurl
-    },
-      viewpicture4(list4){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list4.fileurl
-    },
-      viewpicture5(list5){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list5.fileurl
-    },
+    // viewpicture1(list1){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list1.fileurl
+    // },
+    // viewpicture2(list2){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list2.fileurl
+    // },
+    //   viewpicture3(list3){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list3.fileurl
+    // },
+    //   viewpicture4(list4){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list4.fileurl
+    // },
+    //   viewpicture5(list5){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list5.fileurl
+    // },
     ...mapActions(["getBuildingimage"]),
     toggle(ind, detail) {
       let list = [];

src/pages/building/buildingtype.vue

@@ -4,8 +4,12 @@
         <div class="typeheader">
             <swiper class="slidewrapper" >
                 <swiper-slide class="slideimg" v-for="(list, index) in detail.buildingModelLst" :key="index">
-                    <!-- <img class="typeimg" :src="noHouse" v-if="!detail.buildingModelLst.modelurl"/> -->
-                    <img class="typeimg" :src="list.modelurl" @click="viewpicture(list)"/>
+                  <!-- <slot :images="images" :options="options">
+                   <img class="typeimg" :src="list.modelurl" v-if="detail.buildingModelLst[index].modelurl" @click="viewpicture(list)"/>
+                    <img class="typeimg" :src="noHouse" v-else/>
+                  </slot> -->
+                    <img class="typeimg" :src="list.modelurl" v-if="detail.buildingModelLst[index].modelurl" v-viewer/>
+                    <img class="typeimg" :src="noHouse" v-else/>
                     <div class="typeindex">
                         <span class="typename">{{list.name}}</span>
                         <div class="imageindex" >
@@ -46,16 +50,15 @@
                 </swiper-slide>
             </swiper>
         </div>
-    <big-images v-if="imgLook.state" :fileurl='imgLook.fileurl' @close='imgLook.state=false'></big-images>
+    <!-- <big-images v-if="imgLook.state" :fileurl='imgLook.fileurl' @close='imgLook.state=false'></big-images> -->
     </div>
 </template>
 
 <script>
-// import noHouse from "../../img/nohouse.jpg";
+import noHouse from "../../img/nohouse.jpg";
 import noHouseType from "../../img/nohousetype.png";
 import { mapState, mapActions } from "vuex";
-// import TypeImages from '../../components/typeimage.vue'
-import BigImages from '../../components/bigimages.vue'
+// import BigImages from '../../components/bigimages.vue'
 
 export default {
   name: "BuildingType",
@@ -63,22 +66,18 @@ export default {
     return {
       activeName2: "id",
       showPage:false,
-      // noHouse,
+      noHouse,
       noHouseType,
-      // imgTypeLook:{
+      //  imgLook:{
       //   state:false,
-      //   modelurl:''
+      //   fileurl:''
       // }
-       imgLook:{
-        state:false,
-        fileurl:''
-      }
     };
   },
   components: {
     "vue-headful": () => import("vue-headful"),
     // 'TypeImages':TypeImages
-    'BigImages':BigImages,
+    // 'BigImages':BigImages,
   },
   computed: {
     ...mapState({
@@ -91,10 +90,10 @@ export default {
     });
   },
   methods: {
-    viewpicture(list){
-      this.imgLook.state = true
-      this.imgLook.fileurl = list.modelurl
-    },
+    // viewpicture(list){
+    //   this.imgLook.state = true
+    //   this.imgLook.fileurl = list.modelurl
+    // },
     ...mapActions(["getBuildingtype"]),
     gotobuilding(){
       this.$router.go(-1)
@@ -128,12 +127,15 @@ export default {
 
       .slideimg {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         /* height: 225px; */
 
         .noslideimg{
           height:100%;
           width:100%;
-           display: flex;
+          display: flex;
           flex-direction: column;
           align-items: center;
 
@@ -157,8 +159,8 @@ export default {
         }
         
         .typeimg {
-          width: 100%;
-          height: 225px;
+          max-width: 100%;
+          max-height: 225px;
         }
 
         .typeindex {

src/pages/building/perimetertype.vue

@@ -96,7 +96,8 @@ export default {
       new AMap.Marker({
         position: [routerParams.lng, routerParams.lat],
         title: "routerParams.buildingname",
-        map: map
+        map: map,
+        icon:"https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
       });
       this.searchAround(routerParams.tag);
       if (routerParams.tag == "学校") {
@@ -142,7 +143,8 @@ export default {
       new AMap.Marker({
         position: [routerParams.lng, routerParams.lat],
         title: "routerParams.buildingname",
-        map: map
+        map: map,
+        icon:"https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
       });
       this.searchAround(val);
       if (val == "学校") {
@@ -175,7 +177,7 @@ export default {
     border-radius:50%;
     background: rgba(255,255,255,1);
     position:absolute;
-    top: 63%;
+    top: 55%;
     right: 4%;
     z-index: 4;
     border: 1px solid rgba(59,153,252,1);

src/pages/reservation/lookhouse.vue

@@ -309,7 +309,7 @@ export default {
         width: 90%;
         height: 125px;
         position: relative;
-        margin: 8px 0 0 15px;
+        margin: 10px 0 0 15px;
 
         .content_txt {
           width: 100%;