smartcase
/
auto-sales-wechat
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Activity
Selaa lähdekoodia

beizhu

陈冉 6 vuotta sitten
vanhempi
9d427ec099
commit
8559436159
11 muutettua tiedostoa jossa 363 lisäystä ja 99 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 8
    0
      package-lock.json
  2. 1
    0
      package.json
  3. 2
    1
      public/index.html
  4. 40
    25
      src/components/bigimages.vue
  5. 55
    0
      src/components/typeimage.vue
  6. 2
    1
      src/main.js
  7. 92
    64
      src/pages/building/buildingimage.vue
  8. 19
    3
      src/pages/building/buildingtype.vue
  9. 45
    2
      src/pages/building/perimetertype.vue
  10. 7
    3
      src/pages/reservation/lookhouse.vue
  11. 92
    0
      src/touch/myTouch.js

+ 8
- 0
package-lock.json Näytä tiedosto 

@@ -15491,6 +15491,14 @@
15491 15491 
         }
15492 15492 
       }
15493 15493 
     },
15494 
+    "vue-preview": {
15495 
+      "version": "1.1.3",
15496 
+      "resolved": "https://registry.npmjs.org/vue-preview/-/vue-preview-1.1.3.tgz",
15497 
+      "integrity": "sha512-ko/W1vxgmngiDTL/cMSc36Hq2k7ZPynKBdPoRGupNMlESGkjSdo1RTJcHmYDZZgtSbm10OBJPuPYmzdW1N76xQ==",
15498 
+      "requires": {
15499 
+        "photoswipe": "^4.1.2"
15500 
+      }
15501 
+    },
15494 15502 
     "vue-router": {
15495 15503 
       "version": "3.0.1",
15496 15504 
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",

+ 1
- 0
package.json Näytä tiedosto 

@@ -19,6 +19,7 @@
19 19 
     "vue-headful": "^2.0.1",
20 20 
     "vue-mobile-calendar": "^2.2.0",
21 21 
     "vue-photo-preview": "^1.1.0",
22 
+    "vue-preview": "^1.1.3",
22 23 
     "vue-router": "^3.0.1",
23 24 
     "vuex": "^3.0.1"
24 25 
   },

+ 2
- 1
public/index.html Näytä tiedosto 

@@ -3,7 +3,8 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
6 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
7 
+
7 8 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 9 
     <link rel="stylesheet" href="//at.alicdn.com/t/font_666494_3y8olbksjs5.css"/>
9 10 
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.1&key=73df496773bd9a021d44d32d6e272fb5"></script>

+ 40
- 25
src/components/bigimages.vue Näytä tiedosto 

@@ -1,40 +1,55 @@
1 1 
 <template>
2 
-<div class="images" @click="close">
3 
-  <img  :src="fileurl"/>
4 
-</div>
2 
+  <div class="images" @click="close">
3 
+    <!-- <img class="modal_content" :src="fileurl" preview /> -->
4 
+    <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;" >
5 
+      <swiper-slide class="swiper-zoom-container">
6 
+        <!-- <div class="swiper-zoom-container"> -->
7 
+          <img :src="fileurl" alt="" >
8 
+        <!-- </div> -->
9 
+      </swiper-slide>
10 
+    </swiper>
11 
+  </div>
5 12 
 </template>
6 13
7 14 
 <script>
8 15 
 export default {
9 
-    name:'BigImages',
10 
-    props:['fileurl'],
11 
-    methods:{
12 
-        close(){
13 
-            this.$emit('close')
14 
-        }
15 
-    }
16 
+  name: "BigImages",
17 
+  props: ["fileurl"],
18 
+  data() {
19 
+  return {
20 
+    swiperOption: {
21 
+      width: window.innerWidth,
22 
+      zoom : true,
23 
+      initialSlide: 0,
24 
+    },
25 
+  };
26 
+},
27 
+  methods: {
28 
+    close() {
29 
+      this.$emit("close");
30 
+    },
31 
+  }
16 32 
 }
17 33 
 </script>
18 34
19 35 
 <style lang="postcss" scoped>
20 
-.images{
36 
+.images {
37 
+  width: 100%;
38 
+  height: 100%;
39 
+  z-index: 15;
40 
+  position: fixed;
41 
+  top: 0;
42 
+  left: 0;
43 
+  display: flex;
44 
+  justify-content: center;
45 
+  align-items: center;
46 
+  background-color: rgba(0, 0, 0, 1);
47 
+  img {
21 48 
     width: 100%;
22 49 
     height: 100%;
23 
-    z-index: 15;
24 
-    position: fixed;
25 
-    top:0;
26 
-    left: 0;
27 
-    display: flex;
28 
-    justify-content: center;
29 
-    align-items: center;
30 
-    background-color: rgba(0,0,0,1);
31 
-    img{
32 
-        width: 100%;
33 
-        height: 100%;
34 
-        object-fit:contain;
35 
-    }
50 
+    object-fit: contain;
51 
+  }
36 52 
 }
37 
-
38 53 
 </style>
39 54
40 55

+ 55
- 0
src/components/typeimage.vue Näytä tiedosto 

@@ -0,0 +1,55 @@
1 
+<template>
2 
+  <div class="images" @click="closetype">
3 
+    <!-- <img class="modal_content" :src="fileurl" preview /> -->
4 
+    <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
5 
+      <swiper-slide >
6 
+        <div class="swiper-zoom-container">
7 
+          <img :src="modelurl" alt="">
8 
+        </div>
9 
+      </swiper-slide>
10 
+</swiper>
11 
+  </div>
12 
+</template>
13 
+
14 
+<script>
15 
+export default {
16 
+  name: "TypeImages",
17 
+  props: ["modelurl"],
18 
+  data() {
19 
+  return {
20 
+    swiperOption: {
21 
+      width: window.innerWidth,
22 
+      zoom : true,
23 
+      initialSlide: 0,
24 
+    },
25 
+  };
26 
+},
27 
+  methods: {
28 
+    closetype() {
29 
+      this.$emit("closetype");
30 
+    },
31 
+  }
32 
+}
33 
+</script>
34 
+
35 
+<style lang="postcss" scoped>
36 
+.images {
37 
+  width: 100%;
38 
+  height: 100%;
39 
+  z-index: 15;
40 
+  position: fixed;
41 
+  top: 0;
42 
+  left: 0;
43 
+  display: flex;
44 
+  justify-content: center;
45 
+  align-items: center;
46 
+  background-color: rgba(0, 0, 0, 1);
47 
+  img {
48 
+    width: 100%;
49 
+    height: 100%;
50 
+    object-fit: contain;
51 
+  }
52 
+}
53 
+</style>
54 
+
55 
+

+ 2
- 1
src/main.js Näytä tiedosto 

@@ -10,6 +10,7 @@ import moment from 'moment/moment'
10 10 
 import preview from 'vue-photo-preview'
11 11 
 import 'vue-photo-preview/dist/skin.css'
12 12 
 import AMap from "vue-amap";
13 
+import myTouch from "./touch/myTouch";
13 14 
 AMap.initAMapApiLoader({
14 15 
   key: "73df496773bd9a021d44d32d6e272fb5", //自己申请
15 16 
   plugin: [
 
@@ -37,11 +38,11 @@ Vue.filter('moment', function (value, formatString) {
37 38 
 });
38 39
39 40
40 
-
41 41 
 Vue.use(AMap)
42 42 
 Vue.use(Vant)
43 43 
 Vue.use(VueAwesomeSwiper)
44 44 
 Vue.use(preview)
45 
+Vue.use(myTouch)
45 46
46 47 
 Vue.config.productionTip = false
47 48

+ 92
- 64
src/pages/building/buildingimage.vue Näytä tiedosto 

@@ -5,28 +5,33 @@
5 5 
       <div class="houseimage">
6 6 
         <swiper :options="swiperOption" ref="mySwiper" class="slidewrapper">
7 7 
           <swiper-slide class="slideimg" v-for="(list1, index1) in detail.imageLst1" :key="index1" >
8 
-            <img class="lazyimage" :src="list1.fileurl" @click="viewpicture1(list1)"/>
9 
-            <div class="houseindex">
10 
-              <span class="imagetype">{{list1.name}}</span>
11 
-              <div class="imageindex" >
12 
-                <span class="countimage countindex" >{{index1+1}}</span>
13 
-                <span class="countimage">/</span>
14 
-                <span class="countimage totalcount">{{detail.imageLstCount1}}</span>
8 
+            <div  class="selsectimg">
9 
+              <img class="lazyimage" :src="list1.fileurl" @click="viewpicture1(list1)"/>
10 
+              <div class="houseindex">
11 
+                <span class="imagetype">{{list1.name}}</span>
12 
+                <div class="imageindex" >
13 
+                  <span class="countimage countindex" >{{index1+1}}</span>
14 
+                  <span class="countimage">/</span>
15 
+                  <span class="countimage totalcount">{{detail.imageLstCount1}}</span>
16 
+                </div>
15 17 
               </div>
16 18 
             </div>
17 19 
           </swiper-slide>
18 20 
           <swiper-slide class="slideimg"  v-if='detail.imageLst1==""||detail.imageLst1==null'>
19 
-            <img class="lazyimage" :src="bottomDrawing" />
20 
-            <div class="houseindex">
21 
-              <span class="imagetype">图片正在采集中...</span>
22 
-              <div class="imageindex">
23 
-                <span class="countimage countindex">1</span>
24 
-                <span class="countimage">/</span>
25 
-                <span class="countimage totalcount">1</span>
21 
+            <div class="selsectimg">
22 
+              <img class="lazyimage" :src="bottomDrawing" />
23 
+              <div class="houseindex">
24 
+                <span class="imagetype">图片正在采集中...</span>
25 
+                <div class="imageindex">
26 
+                  <span class="countimage countindex">1</span>
27 
+                  <span class="countimage">/</span>
28 
+                  <span class="countimage totalcount">1</span>
29 
+                </div>
26 30 
               </div>
27 31 
             </div>
28 32 
           </swiper-slide>
29 33 
           <swiper-slide class="slideimg" v-for="(list2, index2) in detail.imageLst2" :key="index2" >
34 
+            <div class="selsectimg">
30 35 
               <img class="lazyimage" :src="list2.fileurl"  @click="viewpicture2(list2)"/>
31 36 
               <div class="houseindex">
32 37 
                 <span class="imagetype">{{list2.name}}</span>

@@ -36,81 +41,96 @@
36 41 
                   <span class="countimage totalcount">{{detail.imageLstCount2}}</span>
37 42 
                 </div>
38 43 
               </div>
44 
+            </div>
39 45 
           </swiper-slide>
40 46 
           <swiper-slide class="slideimg"  v-if='detail.imageLst2==""||detail.imageLst2==null'>
41 
-            <img class="lazyimage" :src="bottomDrawing" />
42 
-            <div class="houseindex">
43 
-              <span class="imagetype">图片正在采集中...</span>
44 
-              <div class="imageindex">
45 
-                <span class="countimage countindex">1</span>
46 
-                <span class="countimage">/</span>
47 
-                <span class="countimage totalcount">1</span>
47 
+            <div class="selsectimg">
48 
+              <img class="lazyimage" :src="bottomDrawing" />
49 
+              <div class="houseindex">
50 
+                <span class="imagetype">图片正在采集中...</span>
51 
+                <div class="imageindex">
52 
+                  <span class="countimage countindex">1</span>
53 
+                  <span class="countimage">/</span>
54 
+                  <span class="countimage totalcount">1</span>
55 
+                </div>
48 56 
               </div>
49 57 
             </div>
50 58 
           </swiper-slide>
51 59 
           <swiper-slide class="slideimg" v-for="(list3, index3) in detail.imageLst3" :key="index3" >
52 
-            <img class="lazyimage" :src="list3.fileurl" @click="viewpicture3(list3)"/>
53 
-            <div class="houseindex">
54 
-              <span class="imagetype">{{list3.name}}</span>
55 
-              <div class="imageindex">
56 
-                <span class="countimage countindex">{{index3+1}}</span>
57 
-                <span class="countimage">/</span>
58 
-                <span class="countimage totalcount">{{detail.imageLstCount3}}</span>
60 
+            <div class="selsectimg">
61 
+              <img class="lazyimage" :src="list3.fileurl" @click="viewpicture3(list3)"/>
62 
+              <div class="houseindex">
63 
+                <span class="imagetype">{{list3.name}}</span>
64 
+                <div class="imageindex">
65 
+                  <span class="countimage countindex">{{index3+1}}</span>
66 
+                  <span class="countimage">/</span>
67 
+                  <span class="countimage totalcount">{{detail.imageLstCount3}}</span>
68 
+                </div>
59 69 
               </div>
60 70 
             </div>
61 71 
           </swiper-slide>
62 72 
           <swiper-slide class="slideimg"  v-if='detail.imageLst3==""||detail.imageLst3==null'>
63 
-            <img class="lazyimage" :src="bottomDrawing" />
64 
-            <div class="houseindex">
65 
-              <span class="imagetype">图片正在采集中...</span>
66 
-              <div class="imageindex">
67 
-                <span class="countimage countindex">1</span>
68 
-                <span class="countimage">/</span>
69 
-                <span class="countimage totalcount">1</span>
73 
+            <div class="selsectimg">
74 
+              <img class="lazyimage" :src="bottomDrawing" />
75 
+              <div class="houseindex">
76 
+                <span class="imagetype">图片正在采集中...</span>
77 
+                <div class="imageindex">
78 
+                  <span class="countimage countindex">1</span>
79 
+                  <span class="countimage">/</span>
80 
+                  <span class="countimage totalcount">1</span>
81 
+                </div>
70 82 
               </div>
71 83 
             </div>
72 84 
           </swiper-slide>
73 85 
           <swiper-slide class="slideimg" v-for="(list4, index4) in detail.imageLst4" :key="index4" >
74 
-            <img class="lazyimage" :src="list4.fileurl" @click="viewpicture4(list4)"/>
75 
-            <div class="houseindex">
76 
-              <span class="imagetype">{{list4.name}}</span>
77 
-              <div class="imageindex">
78 
-                <span class="countimage countindex">{{index4+1}}</span>
79 
-                <span class="countimage">/</span>
80 
-                <span class="countimage totalcount">{{detail.imageLstCount4}}</span>
86 
+            <div class="selsectimg">
87 
+              <img class="lazyimage" :src="list4.fileurl" @click="viewpicture4(list4)"/>
88 
+              <div class="houseindex">
89 
+                <span class="imagetype">{{list4.name}}</span>
90 
+                <div class="imageindex">
91 
+                  <span class="countimage countindex">{{index4+1}}</span>
92 
+                  <span class="countimage">/</span>
93 
+                  <span class="countimage totalcount">{{detail.imageLstCount4}}</span>
94 
+                </div>
81 95 
               </div>
82 96 
             </div>
83 97 
           </swiper-slide>
84 98 
           <swiper-slide class="slideimg" v-if='detail.imageLst4==""||detail.imageLst4==null' >
85 
-            <img class="lazyimage" :src="bottomDrawing" />
86 
-            <div class="houseindex">
87 
-              <span class="imagetype">图片正在采集中...</span>
88 
-              <div class="imageindex">
89 
-                <span class="countimage countindex">1</span>
90 
-                <span class="countimage">/</span>
91 
-                <span class="countimage totalcount">1</span>
99 
+            <div class="selsectimg">
100 
+              <img class="lazyimage" :src="bottomDrawing" />
101 
+              <div class="houseindex">
102 
+                <span class="imagetype">图片正在采集中...</span>
103 
+                <div class="imageindex">
104 
+                  <span class="countimage countindex">1</span>
105 
+                  <span class="countimage">/</span>
106 
+                  <span class="countimage totalcount">1</span>
107 
+                </div>
92 108 
               </div>
93 109 
             </div>
94 110 
           </swiper-slide>
95 111 
           <swiper-slide class="slideimg" v-for="(list5, index5) in detail.imageLst5" :key="index5">
96 
-            <img class="lazyimage" :src="list5.fileurl" @click="viewpicture5(list5)"/>
97 
-            <div class="houseindex">
98 
-              <span class="imagetype">{{list5.name}}</span>
99 
-              <div class="imageindex">
100 
-                <span class="countimage countindex">{{index5+1}}</span>
101 
-                <span class="countimage">/</span>
102 
-                <span class="countimage totalcount">{{detail.imageLstCount5}}</span>
112 
+            <div class="selsectimg">
113 
+              <img class="lazyimage" :src="list5.fileurl" @click="viewpicture5(list5)"/>
114 
+              <div class="houseindex">
115 
+                <span class="imagetype">{{list5.name}}</span>
116 
+                <div class="imageindex">
117 
+                  <span class="countimage countindex">{{index5+1}}</span>
118 
+                  <span class="countimage">/</span>
119 
+                  <span class="countimage totalcount">{{detail.imageLstCount5}}</span>
120 
+                </div>
103 121 
               </div>
104 122 
             </div>
105 123 
           </swiper-slide>
106 124 
           <swiper-slide class="slideimg"  v-if='detail.imageLst5==""||detail.imageLst5==null'>
107 
-            <img class="lazyimage" :src="bottomDrawing" />
108 
-            <div class="houseindex">
109 
-              <span class="imagetype">图片正在采集中...</span>
110 
-              <div class="imageindex">
111 
-                <span class="countimage countindex">1</span>
112 
-                <span class="countimage">/</span>
113 
-                <span class="countimage totalcount">1</span>
125 
+            <div class="selsectimg">
126 
+              <img class="lazyimage" :src="bottomDrawing" />
127 
+              <div class="houseindex">
128 
+                <span class="imagetype">图片正在采集中...</span>
129 
+                <div class="imageindex">
130 
+                  <span class="countimage countindex">1</span>
131 
+                  <span class="countimage">/</span>
132 
+                  <span class="countimage totalcount">1</span>
133 
+                </div>
114 134 
               </div>
115 135 
             </div>
116 136 
           </swiper-slide>

@@ -149,6 +169,7 @@ export default {
149 169 
         preloadImages:false,
150 170 
         speed: 500,
151 171 
       },
172 
+      // selected:true,
152 173 
       isactive: false,
153 174 
       imgLook:{
154 175 
         state:false,

@@ -184,6 +205,8 @@ export default {
184 205 
       on: {
185 206 
         slideChangeTransitionEnd: () => {
186 207 
           let swiper = this.$refs.mySwiper.swiper;
208 
+          //  let selected=swiper.activeIndex;
209 
+          // window.console.log(selected)
187 210 
           if (swiper.activeIndex < parseInt(this.detail.imageLstCount1)) {
188 211 
             let list = [];
189 212 
             this.lists.forEach((curr, index) => {

@@ -379,7 +402,11 @@ export default {
379 402 
           width: 100%;
380 403 
           height: 211px;
381 404
382 
-          .lazyimage {
405 
+          .selsectimg{
406 
+            width:100%;
407 
+            height: 100%;
408 
+
409 
+                     .lazyimage {
383 410 
             width: 100%;
384 411 
             height: 100%;
385 412 
           }

@@ -417,6 +444,7 @@ export default {
417 444 
               }
418 445 
             }
419 446 
           }
447 
+          }
420 448 
         }
421 449 
       }
422 450 
     }

+ 19
- 3
src/pages/building/buildingtype.vue Näytä tiedosto 

@@ -5,7 +5,7 @@
5 5 
             <swiper class="slidewrapper" >
6 6 
                 <swiper-slide class="slideimg" v-for="(list, index) in detail.buildingModelLst" :key="index">
7 7 
                     <!-- <img class="typeimg" :src="noHouse" v-if="!detail.buildingModelLst.modelurl"/> -->
8 
-                    <img class="typeimg" :src="list.modelurl"/>
8 
+                    <img class="typeimg" :src="list.modelurl" @click="viewpicture(list)"/>
9 9 
                     <div class="typeindex">
10 10 
                         <span class="typename">{{list.name}}</span>
11 11 
                         <div class="imageindex" >

@@ -46,7 +46,7 @@
46 46 
                 </swiper-slide>
47 47 
             </swiper>
48 48 
         </div>
49 
-
49 
+    <big-images v-if="imgLook.state" :fileurl='imgLook.fileurl' @close='imgLook.state=false'></big-images>
50 50 
     </div>
51 51 
 </template>
52 52 
 

@@ -54,6 +54,8 @@
54 54 
 // import noHouse from "../../img/nohouse.jpg";
55 55 
 import noHouseType from "../../img/nohousetype.png";
56 56 
 import { mapState, mapActions } from "vuex";
57 
+// import TypeImages from '../../components/typeimage.vue'
58 
+import BigImages from '../../components/bigimages.vue'
57 59
58 60 
 export default {
59 61 
   name: "BuildingType",

@@ -63,10 +65,20 @@ export default {
63 65 
       showPage:false,
64 66 
       // noHouse,
65 67 
       noHouseType,
68 
+      // imgTypeLook:{
69 
+      //   state:false,
70 
+      //   modelurl:''
71 
+      // }
72 
+       imgLook:{
73 
+        state:false,
74 
+        fileurl:''
75 
+      }
66 76 
     };
67 77 
   },
68 78 
   components: {
69 
-    "vue-headful": () => import("vue-headful")
79 
+    "vue-headful": () => import("vue-headful"),
80 
+    // 'TypeImages':TypeImages
81 
+    'BigImages':BigImages,
70 82 
   },
71 83 
   computed: {
72 84 
     ...mapState({

@@ -79,6 +91,10 @@ export default {
79 91 
     });
80 92 
   },
81 93 
   methods: {
94 
+    viewpicture(list){
95 
+      this.imgLook.state = true
96 
+      this.imgLook.fileurl = list.modelurl
97 
+    },
82 98 
     ...mapActions(["getBuildingtype"]),
83 99 
     gotobuilding(){
84 100 
       this.$router.go(-1)

+ 45
- 2
src/pages/building/perimetertype.vue Näytä tiedosto 

@@ -7,6 +7,11 @@
7 7 
           </div> -->
8 8 
             <div class="mapId">
9 9 
                 <div id="mapcointainer"></div>
10 
+            </div>
11 
+            <div class="ambitus" @click="goBackCenter()">
12 
+              <div class="ambitus_map">
13 
+
14 
+              </div>
10 15 
             </div>
11 16 
              <van-row class="user-links">
12 17 
           <van-col span="6" >

@@ -62,7 +67,21 @@ export default {
62 67 
     this.init();
63 68 
   },
64 69 
   methods: {
65 
-    //    ...mapareaActions(["getMap"]),
70 
+    goBackCenter() {
71 
+      if(this.shows === 1){
72 
+        this.searchContent("学校");
73 
+        return
74 
+      }else if(this.shows === 2){
75 
+        this.searchContent("医院");
76 
+        return
77 
+      }else if(this.shows === 3){
78 
+        this.searchContent("交通");
79 
+        return
80 
+      }else if(this.shows === 4){
81 
+        this.searchContent("商业");
82 
+        return
83 
+      }
84 
+      },
66 85 
     init() {
67 86 
       map = new AMap.Map("mapcointainer", {
68 87 
         resizeEnable: true,

@@ -107,7 +126,7 @@ export default {
107 126 
           5000,
108 127 
           () => {}
109 128 
         );
110 
-      });
129 
+      })
111 130 
     },
112 131 
     searchContent(val) {
113 132 
       map = new AMap.Map("mapcointainer", {

@@ -150,6 +169,30 @@ export default {
150 169 
   display: flex;
151 170 
   flex-direction: column;
152 171
172 
+  .ambitus{
173 
+    width:30px;
174 
+    height: 30px;
175 
+    border-radius:50%;
176 
+    background: rgba(255,255,255,1);
177 
+    position:absolute;
178 
+    top: 63%;
179 
+    right: 4%;
180 
+    z-index: 4;
181 
+    border: 1px solid rgba(59,153,252,1);
182 
+
183 
+    .ambitus_map{
184 
+      width: 16px;
185 
+      height: 16px;
186 
+      border-radius: 50%;
187 
+      background:rgba(59,153,252,1);
188 
+      z-index: 10;
189 
+      position:absolute;
190 
+      top: 22%;
191 
+      right: 24%;
192 
+      }
193 
+    }
194 
+
195 
+
153 196 
   .mapId {
154 197 
     width: 100%;
155 198 
     /* height: 587px; */

+ 7
- 3
src/pages/reservation/lookhouse.vue Näytä tiedosto 

@@ -18,8 +18,8 @@
18 18 
               </van-popup>
19 19 
           </van-cell>
20 20 
           <van-cell class="field_name">楼盘地址：<span class="buildingaddress">{{detail.buildingAddress}}</span></van-cell>
21 
-          <van-switch-cell size="20px" v-model="checked" title="马上去"  @change="onChange" />
22 
-          <van-field class="field_name" @click="showDatePicker()" label="预约时间："  v-model="formdata.booktime" v-if='appointment' readonly="true"/>
21 
+          <van-switch-cell size="20px" v-model="checked" title="短信预约地址"  @change="onChange" />
22 
+          <van-field class="field_name" @click="showDatePicker()" label="微信预约时间："  v-model="formdata.booktime" v-if='appointment' readonly="true"/>
23 23 
           <van-popup v-model="show" position="bottom" :overlay="true">
24 24 
             <van-datetime-picker v-model="currentDate" :formatter="formatter" type="datetime"  @cancel="cancel" @confirm="confirm"/>
25 25 
           </van-popup>

@@ -127,7 +127,7 @@ export default {
127 127 
         // this.date=  new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
128 128 
         this.$dialog.alert({
129 129 
           message:
130 
-            "使用马上去功能，我们将以短信形式发送楼盘地址给您，您可以选择使用滴滴、美团打车、或乘坐出租车等方式到达售楼中心，联系置业顾问后即可报销车票！   部分售楼处可能通过发放礼品等形式抵扣车费，也可能此售楼处报销车费活动已经结束，具体解释权归售楼处所有，可提前通过上方电话咨询。"
130 
+            "使用短信预约地址功能，我们将以短信形式发送楼盘地址给您，您可以选择使用滴滴、美团打车、或乘坐出租车等方式到达售楼中心！"
131 131 
         });
132 132 
       }else{
133 133 
         this.appointment=true

@@ -239,6 +239,10 @@ export default {
239 239 
 .van-cell-group{
240 240 
   background-color: rgba(255,255,255,0)
241 241 
 }
242 
+
243 
+.van-field .van-cell__title{
244 
+  max-width: 100px;
245 
+}
242 246 
 </style>
243 247
244 248 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

+ 92
- 0
src/touch/myTouch.js Näytä tiedosto 

@@ -0,0 +1,92 @@
1 
+export default(Vue) => {
2 
+    Vue.directive('touch', {
3 
+        bind: function (el, binding) {
4 
+            let type = binding.arg; // 传入点击的类型
5 
+            let coordinate = {} // 记录坐标点的对象
6 
+            let timeOutTap;
7 
+            let timeOutLong;
8 
+            let scaleSize; // 缩放尺寸
9 
+            let displacement = {}; //移动的位移
10 
+            // 勾股定理计算距离
11 
+            function getDistance(bg, end){
12 
+                return Math.sqrt(Math.pow((end.x - bg.x),2 ) + Math.pow((end.y - bg.y),2 ));
13 
+            }
14 
+            // 点击开始的时候
15 
+            el.addEventListener('touchstart', function(e){
16 
+                // 获取第一个手指点击的坐标
17 
+                let x = e.touches[0].pageX;
18 
+                let y = e.touches[0].pageY;
19 
+                // 如果点击的时间很长，那么点击的类型就是长按 --- longTouch
20 
+                timeOutLong = setTimeout(() => {
21 
+                    timeOutLong = 0;
22 
+                    if(type === 'longTouch'){
23 
+                         binding.value.func(binding.value.param)
24 
+                    }
25 
+                }, 2000)
26 
+                timeOutTap = setTimeout(() => {
27 
+                    timeOutTap = 0;
28 
+                    if(type === 'tap' && e.touches.length === 1){
29 
+                         binding.value.func(binding.value.param)
30 
+                    }
31 
+                }, 200)
32 
+                // 如果是两个手指，而且类型是缩放 --- scaleTocuh
33 
+                if(e.touches.length > 1 && type === 'scaleTouch'){
34 
+                    // 记录双指的间距长度
35 
+                    coordinate.start =  getDistance({
36 
+                        x: e.touches[0].pageX,
37 
+                        y: e.touches[0].pageY,
38 
+                    },{
39 
+                        x: e.touches[1].pageX,
40 
+                        y: e.touches[1].pageY,
41 
+                    })
42 
+
43 
+                }
44 
+                // 如果是移动的话，还要记录下来最开始的位置,只能一个手指位移
45 
+                if(type === 'slideTouch' && e.touches.length == 1){
46 
+                    // debugger
47 
+                    displacement.start = {
48 
+                        x: e.touches[0].pageX,
49 
+                        y: e.touches[0].pageY,
50 
+                    }
51 
+                }
52 
+            }, false)
53 
+            el.addEventListener('touchmove', function(e){
54 
+                clearTimeout(timeOutTap)
55 
+                clearTimeout(timeOutLong)
56 
+                timeOutTap = 0; timeOutLong = 0;
57 
+                // 如果是缩放类型
58 
+                if(type == 'scaleTouch' && e.touches.length === 2){
59 
+                    // 计算移动过程中的两个手指的距离
60 
+                    coordinate.stop = getDistance({
61 
+                        x: e.touches[0].pageX,
62 
+                        y: e.touches[0].pageY,
63 
+                    },{
64 
+                        x: e.touches[1].pageX,
65 
+                        y: e.touches[1].pageY,
66 
+                    })
67 
+                    // 设置缩放尺寸
68 
+                    scaleSize = (coordinate.stop / coordinate.start)  - 1;
69 
+                    // 这里设置图片不能无限放大与缩小
70 
+                    // 这里设置放大缩小速度慢一点，所以 /4一下
71 
+                    binding.value.func(scaleSize / 2, false)
72 
+                }
73 
+                // 如果是移动类型
74 
+                if(type == 'slideTouch' && e.touches.length === 1 ){
75 
+                    displacement.end = {
76 
+                        x: e.changedTouches[0].pageX,
77 
+                        y: e.changedTouches[0].pageY,
78 
+                    }
79 
+                    binding.value.func({x:displacement.end.x - displacement.start.x, y: displacement.end.y - displacement.start.y, is_endMove : false})
80 
+                }
81 
+            }, false)
82 
+            el.addEventListener('touchend', function(e){
83 
+                if(type === 'scaleTouch'){
84 
+                    binding.value.func(0, true)
85 
+                }
86 
+                if(type === 'slideTouch'){
87 
+                    binding.value.func({x:0, y: 0, is_endMove : true})
88 
+                }
89 
+            }, false)
90 
+        }
91 
+    })
92 
+}