ソースを参照

Wait Animation added to the properties loading

master
George Williams 4年前
コミット
f53b9d5dde

+ 7
- 4
src/components/property/commercial/singleView/carouselSection.vue ファイルの表示

30
 import carousel from "vue-owl-carousel";
30
 import carousel from "vue-owl-carousel";
31
 export default {
31
 export default {
32
   components: {
32
   components: {
33
-    carousel
33
+    carousel,
34
   },
34
   },
35
   data() {
35
   data() {
36
     return {
36
     return {
37
-      images: []
37
+      images: [],
38
     };
38
     };
39
   },
39
   },
40
   props: {
40
   props: {
41
-    propertyImages: {}
42
-  }
41
+    propertyImages: {},
42
+  },
43
+  created() {
44
+    this.$emit("Loaded", true);
45
+  },
43
 };
46
 };
44
 </script>
47
 </script>
45
 
48
 

+ 32
- 21
src/components/property/commercial/singleView/contentSection.vue ファイルの表示

50
               <p v-if="field.name === 'Rates & Taxes'">
50
               <p v-if="field.name === 'Rates & Taxes'">
51
                 Rates & Taxes: R{{ field.value | toCurrency }}
51
                 Rates & Taxes: R{{ field.value | toCurrency }}
52
               </p>
52
               </p>
53
-            </div> -->
53
+            </div>-->
54
             <p>{{ property.shortDescription }}</p>
54
             <p>{{ property.shortDescription }}</p>
55
             <p>{{ property.price | toCurrency }}</p>
55
             <p>{{ property.price | toCurrency }}</p>
56
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
56
+            <div class="btn-white-border">
57
+              <i class="fa fa-search"></i>BOOK A VIEWING
58
+            </div>
57
           </div>
59
           </div>
58
           <div class="panel-left px-5 pb-5 text-center">
60
           <div class="panel-left px-5 pb-5 text-center">
59
             <h4 class="text-white">Share this Property</h4>
61
             <h4 class="text-white">Share this Property</h4>
60
             <a
62
             <a
61
               href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
63
               href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
62
               target="_blank"
64
               target="_blank"
63
-              ><img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1"
64
-            /></a>
65
+            >
66
+              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
67
+            </a>
65
             <a
68
             <a
66
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
69
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
67
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
68
-            /></a>
70
+            >
71
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
72
+            </a>
69
             <a
73
             <a
70
               href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
74
               href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
71
               data-action="share/whatsapp/share"
75
               data-action="share/whatsapp/share"
72
               target="_blank"
76
               target="_blank"
73
             >
77
             >
74
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
75
-            /></a>
78
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
79
+            </a>
76
           </div>
80
           </div>
77
         </div>
81
         </div>
78
         <div class="col-md-8 p-5 resort-profile">
82
         <div class="col-md-8 p-5 resort-profile">
79
           <h2 v-if="property.showAddress">
83
           <h2 v-if="property.showAddress">
80
-            <div style="display:inline" v-if="property.propertyName !== null">
81
-              {{ property.propertyName }} /
82
-            </div>
84
+            <div
85
+              style="display:inline"
86
+              v-if="property.propertyName !== null"
87
+            >{{ property.propertyName }} /</div>
83
             {{ property.streetNumber }} {{ property.streetName }}
88
             {{ property.streetNumber }} {{ property.streetName }}
84
           </h2>
89
           </h2>
85
           <h2 v-else>{{ property.propertyName }}</h2>
90
           <h2 v-else>{{ property.propertyName }}</h2>
89
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
94
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
90
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
95
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
91
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
96
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
92
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
97
+                  <i class="fa fa-check-circle"></i>
98
+                  {{ field.value }} {{ field.name }}
99
+                </div>
100
+                <div v-else>
101
+                  <i class="fa fa-check-circle"></i>
102
+                  {{ field.name }}
93
                 </div>
103
                 </div>
94
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
95
               </div>
104
               </div>
96
             </div>
105
             </div>
97
           </div>
106
           </div>
101
             style="float:right"
110
             style="float:right"
102
             class="btn-solid-blue mt-3"
111
             class="btn-solid-blue mt-3"
103
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
112
             :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
104
-            >MORE INFO...</router-link
105
-          >
113
+          >MORE INFO...</router-link>
106
           <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
114
           <h4 v-if="property.video !== null" class="mt-5">Video Tour</h4>
107
           <iframe
115
           <iframe
108
             v-if="property.video !== null"
116
             v-if="property.video !== null"
146
                 </tr>
154
                 </tr>
147
               </tbody>
155
               </tbody>
148
             </table>
156
             </table>
149
-          </div> -->
157
+          </div>-->
150
 
158
 
151
           <!-- <div class="d-flex mt-3">
159
           <!-- <div class="d-flex mt-3">
152
             <iframe
160
             <iframe
171
 import gallery from "../../../shared/gallerySlideShow";
179
 import gallery from "../../../shared/gallerySlideShow";
172
 export default {
180
 export default {
173
   components: {
181
   components: {
174
-    gallery
182
+    gallery,
175
   },
183
   },
176
   props: {
184
   props: {
177
     property: {},
185
     property: {},
178
-    propertyImages: {}
186
+    propertyImages: {},
179
   },
187
   },
180
   mounted() {
188
   mounted() {
181
     console.log(this.property);
189
     console.log(this.property);
183
   data() {
191
   data() {
184
     return {
192
     return {
185
       index: null,
193
       index: null,
186
-      date: new Date()
194
+      date: new Date(),
187
     };
195
     };
188
   },
196
   },
189
   computed: {
197
   computed: {
193
         list.push(this.propertyImages[i].image);
201
         list.push(this.propertyImages[i].image);
194
       }
202
       }
195
       return list;
203
       return list;
196
-    }
197
-  }
204
+    },
205
+  },
206
+  created() {
207
+    this.$emit("Loaded", true);
208
+  },
198
 };
209
 };
199
 </script>
210
 </script>
200
 
211
 

+ 29
- 10
src/components/property/commercial/singleView/singleCommercialPage.vue ファイルの表示

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :propertyImages="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4
     <main id="main" style="margin-top:-20px">
8
     <main id="main" style="margin-top:-20px">
5
       <contentSection
9
       <contentSection
6
         v-if="propertyImages.length > 0"
10
         v-if="propertyImages.length > 0"
7
         :property="property"
11
         :property="property"
8
         :propertyImages="propertyImages"
12
         :propertyImages="propertyImages"
13
+        @Loaded="ContentDone"
9
       />
14
       />
10
     </main>
15
     </main>
16
+    <div v-if="Wait" id="preloader"></div>
11
   </div>
17
   </div>
12
   <!-- #intro -->
18
   <!-- #intro -->
13
 </template>
19
 </template>
31
     return {
37
     return {
32
       index: null,
38
       index: null,
33
       date: new Date(),
39
       date: new Date(),
40
+      wait: false,
41
+      carouselLoaded: false,
42
+      contentloaded: false,
34
     };
43
     };
35
   },
44
   },
36
-  async mounted() {
37
-    await this.getProperty(this.$route.params.id);
45
+  mounted() {
46
+    this.wait = true;
47
+    this.carouselLoaded = false;
48
+    this.contentloaded = false;
49
+    this.clearPropertyImages();
50
+    this.getDisplayProperty(this.$route.params.id);
38
     // await this.getPropertyImages(this.$route.params.id);
51
     // await this.getPropertyImages(this.$route.params.id);
39
     // this.mayEditProperty(this.$route.params.id);
52
     // this.mayEditProperty(this.$route.params.id);
40
   },
53
   },
41
   computed: {
54
   computed: {
42
     ...mapState("property", ["property", "propertyImages"]),
55
     ...mapState("property", ["property", "propertyImages"]),
43
-    ...mapState("propertyEdit", ["mayEdit"]),
56
+    Wait() {
57
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
58
+        return true;
59
+      }
60
+      return false;
61
+    },
44
   },
62
   },
45
   methods: {
63
   methods: {
46
-    ...mapActions("property", [
47
-      "getProperty",
48
-      "getPropertyImages",
49
-      "clearPropertyImages",
50
-    ]),
51
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
64
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
52
     formatPrice(value) {
65
     formatPrice(value) {
53
       const val = (value / 1).toFixed(2);
66
       const val = (value / 1).toFixed(2);
54
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
67
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
59
       }
72
       }
60
       return "";
73
       return "";
61
     },
74
     },
75
+    CarouselDone() {
76
+      this.carouselLoaded = true;
77
+    },
78
+    ContentDone() {
79
+      this.contentloaded = true;
80
+    },
62
   },
81
   },
63
   beforeDestroy() {
82
   beforeDestroy() {
64
     this.clearPropertyImages();
83
     this.clearPropertyImages();

+ 7
- 4
src/components/property/enquireNow/carouselSection.vue ファイルの表示

20
       style="margin-top:-50px"
20
       style="margin-top:-50px"
21
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
21
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
22
     >
22
     >
23
-      <img class="item" v-for="(image, i) in images" :key="i" :src="image" />
23
+      <img class="item" v-for="(image, i) in images" :key="i" :src="image.image" />
24
     </carousel>
24
     </carousel>
25
 
25
 
26
     <div id="intro-carousel" class="owl-carousel"></div>
26
     <div id="intro-carousel" class="owl-carousel"></div>
33
 import carousel from "vue-owl-carousel";
33
 import carousel from "vue-owl-carousel";
34
 export default {
34
 export default {
35
   components: {
35
   components: {
36
-    carousel
36
+    carousel,
37
   },
37
   },
38
   props: {
38
   props: {
39
-    images: {}
40
-  }
39
+    images: {},
40
+  },
41
+  created() {
42
+    this.$emit("Loaded", true);
43
+  },
41
 };
44
 };
42
 </script>
45
 </script>
43
 
46
 

+ 13
- 8
src/components/property/enquireNow/contentSection.vue ファイルの表示

4
       <div class="col-md-6">
4
       <div class="col-md-6">
5
         <h3>{{ property.propertyName }}</h3>
5
         <h3>{{ property.propertyName }}</h3>
6
         <p v-html="property.description"></p>
6
         <p v-html="property.description"></p>
7
-        <p><strong>View by Appointment only!</strong></p>
7
+        <p>
8
+          <strong>View by Appointment only!</strong>
9
+        </p>
8
         <br />
10
         <br />
9
         <p></p>
11
         <p></p>
10
         <!-- To arrange a viewing contact Mynie:
12
         <!-- To arrange a viewing contact Mynie:
11
         <div class="col-md-4">
13
         <div class="col-md-4">
12
           <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
14
           <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
13
           <a href="tel:0124921238">+27 (0) 12 492 1238</a>
15
           <a href="tel:0124921238">+27 (0) 12 492 1238</a>
14
-        </div> -->
16
+        </div>-->
15
       </div>
17
       </div>
16
       <div class="col-md-6">
18
       <div class="col-md-6">
17
         <div class="form-group row">
19
         <div class="form-group row">
143
 
145
 
144
 export default {
146
 export default {
145
   components: {
147
   components: {
146
-    alert
148
+    alert,
147
   },
149
   },
148
   data() {
150
   data() {
149
     return {
151
     return {
153
       contactNumber: null,
155
       contactNumber: null,
154
       property: null,
156
       property: null,
155
       message: null,
157
       message: null,
156
-      boolSent: false
158
+      boolSent: false,
157
     };
159
     };
158
   },
160
   },
159
   mounted() {
161
   mounted() {
160
     this.boolSent = false;
162
     this.boolSent = false;
161
   },
163
   },
162
   props: {
164
   props: {
163
-    property: {}
165
+    property: {},
164
   },
166
   },
165
   methods: {
167
   methods: {
166
     async sendMail() {
168
     async sendMail() {
171
         email: this.email,
173
         email: this.email,
172
         phone: this.contactNumber,
174
         phone: this.contactNumber,
173
         property: this.property.id.toString(),
175
         property: this.property.id.toString(),
174
-        message: this.message
176
+        message: this.message,
175
       };
177
       };
176
 
178
 
177
       const response = await axios.post("/api/mail/1", mailObj);
179
       const response = await axios.post("/api/mail/1", mailObj);
184
     },
186
     },
185
     countDownChanged(dismissCountDown) {
187
     countDownChanged(dismissCountDown) {
186
       this.dismissCountDown = dismissCountDown;
188
       this.dismissCountDown = dismissCountDown;
187
-    }
188
-  }
189
+    },
190
+  },
191
+  created() {
192
+    this.$emit("Loaded", true);
193
+  },
189
 };
194
 };
190
 </script>
195
 </script>
191
 
196
 

+ 34
- 11
src/components/property/enquireNow/enquirenow.vue ファイルの表示

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :images="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :images="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4
     <main id="main" style="margin-top:-20px;padding-bottom:50px">
8
     <main id="main" style="margin-top:-20px;padding-bottom:50px">
5
-      <contentSection :property="property" />
9
+      <contentSection :property="property" @Loaded="ContentDone" />
6
     </main>
10
     </main>
11
+    <div v-if="Wait" id="preloader"></div>
7
   </div>
12
   </div>
8
 </template>
13
 </template>
9
 
14
 
15
 export default {
20
 export default {
16
   components: {
21
   components: {
17
     carouselSection,
22
     carouselSection,
18
-    contentSection
23
+    contentSection,
24
+  },
25
+  data() {
26
+    return {
27
+      wait: false,
28
+      carouselLoaded: false,
29
+      contentloaded: false,
30
+    };
19
   },
31
   },
20
   async mounted() {
32
   async mounted() {
21
-    await this.getProperty(this.$route.params.id);
22
-    await this.getPropertyImages(this.$route.params.id);
23
-    this.mayEditProperty(this.$route.params.id);
33
+    this.wait = true;
34
+    this.carouselLoaded = false;
35
+    this.contentloaded = false;
36
+    await this.getDisplayProperty(this.$route.params.id);
24
   },
37
   },
25
   computed: {
38
   computed: {
26
     ...mapState("property", ["property", "propertyImages"]),
39
     ...mapState("property", ["property", "propertyImages"]),
27
-    ...mapState("propertyEdit", ["mayEdit"])
40
+    Wait() {
41
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
42
+        return true;
43
+      }
44
+      return false;
45
+    },
28
   },
46
   },
29
   methods: {
47
   methods: {
30
-    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
31
-    ...mapActions("propertyEdit", ["mayEditProperty"]),
48
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
32
     formatPrice(value) {
49
     formatPrice(value) {
33
       const val = (value / 1).toFixed(2);
50
       const val = (value / 1).toFixed(2);
34
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
51
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
38
         return `${value}<br/>`;
55
         return `${value}<br/>`;
39
       }
56
       }
40
       return "";
57
       return "";
41
-    }
42
-  }
58
+    },
59
+    CarouselDone() {
60
+      this.carouselLoaded = true;
61
+    },
62
+    ContentDone() {
63
+      this.contentloaded = true;
64
+    },
65
+  },
43
 };
66
 };
44
 </script>
67
 </script>
45
 
68
 

+ 7
- 4
src/components/property/residential/singleView/carouselSection.vue ファイルの表示

30
 import carousel from "vue-owl-carousel";
30
 import carousel from "vue-owl-carousel";
31
 export default {
31
 export default {
32
   components: {
32
   components: {
33
-    carousel
33
+    carousel,
34
   },
34
   },
35
   data() {
35
   data() {
36
     return {
36
     return {
37
-      images: []
37
+      images: [],
38
     };
38
     };
39
   },
39
   },
40
   props: {
40
   props: {
41
-    propertyImages: {}
42
-  }
41
+    propertyImages: {},
42
+  },
43
+  created() {
44
+    this.$emit("Loaded", true);
45
+  },
43
 };
46
 };
44
 </script>
47
 </script>
45
 
48
 

+ 27
- 17
src/components/property/residential/singleView/contentSection.vue ファイルの表示

45
               </div>
45
               </div>
46
             </div>
46
             </div>
47
 
47
 
48
-            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
48
+            <div class="btn-white-border">
49
+              <i class="fa fa-search"></i>BOOK A VIEWING
50
+            </div>
49
           </div>
51
           </div>
50
           <div class="panel-left px-5 pb-5 text-center">
52
           <div class="panel-left px-5 pb-5 text-center">
51
             <h4 class="text-white">Share this Property</h4>
53
             <h4 class="text-white">Share this Property</h4>
63
 
65
 
64
             <a
66
             <a
65
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
67
               href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
66
-              ><img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1"
67
-            /></a>
68
+            >
69
+              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
70
+            </a>
68
             <a
71
             <a
69
               href="whatsapp://send?text=Check out this property!"
72
               href="whatsapp://send?text=Check out this property!"
70
               data-action="share/whatsapp/share"
73
               data-action="share/whatsapp/share"
71
               target="_blank"
74
               target="_blank"
72
             >
75
             >
73
-              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1"
74
-            /></a>
76
+              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
77
+            </a>
75
           </div>
78
           </div>
76
         </div>
79
         </div>
77
         <div></div>
80
         <div></div>
78
         <div class="col-md-8 p-5 resort-profile">
81
         <div class="col-md-8 p-5 resort-profile">
79
           <h2 v-if="property.showAddress">
82
           <h2 v-if="property.showAddress">
80
-            <div style="display:inline" v-if="property.propertyName !== null">
81
-              {{ property.propertyName }} /
82
-            </div>
83
+            <div
84
+              style="display:inline"
85
+              v-if="property.propertyName !== null"
86
+            >{{ property.propertyName }} /</div>
83
             {{ property.streetNumber }} {{ property.streetName }}
87
             {{ property.streetNumber }} {{ property.streetName }}
84
           </h2>
88
           </h2>
85
           <h2 v-else>{{ property.propertyName }}</h2>
89
           <h2 v-else>{{ property.propertyName }}</h2>
96
               style="float:right"
100
               style="float:right"
97
               class="btn-solid-blue mt-3"
101
               class="btn-solid-blue mt-3"
98
               :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
102
               :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
99
-              >MORE INFO...</router-link
100
-            >
103
+            >MORE INFO...</router-link>
101
             <h4>Property Features</h4>
104
             <h4>Property Features</h4>
102
 
105
 
103
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
106
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
104
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
107
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
105
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
108
                 <div v-if="field.value.toUpperCase() != 'TRUE'">
106
-                  <i class="fa fa-check-circle"></i> {{ field.value }} {{ field.name }}
109
+                  <i class="fa fa-check-circle"></i>
110
+                  {{ field.value }} {{ field.name }}
111
+                </div>
112
+                <div v-else>
113
+                  <i class="fa fa-check-circle"></i>
114
+                  {{ field.name }}
107
                 </div>
115
                 </div>
108
-                <div v-else><i class="fa fa-check-circle"></i> {{ field.name }}</div>
109
               </div>
116
               </div>
110
             </div>
117
             </div>
111
           </div>
118
           </div>
147
 export default {
154
 export default {
148
   components: {
155
   components: {
149
     gallery,
156
     gallery,
150
-    ShareFacebook
157
+    ShareFacebook,
151
   },
158
   },
152
   props: {
159
   props: {
153
     property: {},
160
     property: {},
154
-    propertyImages: {}
161
+    propertyImages: {},
155
   },
162
   },
156
   created() {
163
   created() {
157
     //this.getListsForPropertyEdit(this.property.id);
164
     //this.getListsForPropertyEdit(this.property.id);
163
     return {
170
     return {
164
       index: null,
171
       index: null,
165
       date: new Date(),
172
       date: new Date(),
166
-      currentUrl: ""
173
+      currentUrl: "",
167
     };
174
     };
168
   },
175
   },
169
   methods: {
176
   methods: {
192
         list.push(this.propertyImages[i].image);
199
         list.push(this.propertyImages[i].image);
193
       }
200
       }
194
       return list;
201
       return list;
195
-    }
196
-  }
202
+    },
203
+  },
204
+  created() {
205
+    this.$emit("Loaded", true);
206
+  },
197
 };
207
 };
198
 </script>
208
 </script>
199
 
209
 

+ 28
- 8
src/components/property/residential/singleView/singleResidentialPage.vue ファイルの表示

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
3
+    <carouselSection
4
+      v-if="propertyImages.length > 0"
5
+      :propertyImages="propertyImages"
6
+      @Loaded="CarouselDone"
7
+    />
4
     <main id="main" style="margin-top:-20px">
8
     <main id="main" style="margin-top:-20px">
5
       <contentSection
9
       <contentSection
6
         v-if="propertyImages.length > 0"
10
         v-if="propertyImages.length > 0"
7
         :property="property"
11
         :property="property"
8
         :propertyImages="propertyImages"
12
         :propertyImages="propertyImages"
13
+        @Loaded="ContentDone"
9
       />
14
       />
10
     </main>
15
     </main>
16
+    <div v-if="Wait" id="preloader"></div>
11
   </div>
17
   </div>
12
 </template>
18
 </template>
13
 
19
 
31
       index: null,
37
       index: null,
32
       date: new Date(),
38
       date: new Date(),
33
       boolLoaded: false,
39
       boolLoaded: false,
40
+      wait: false,
41
+      carouselLoaded: false,
42
+      contentloaded: false,
34
     };
43
     };
35
   },
44
   },
36
   async mounted() {
45
   async mounted() {
37
-    await this.getProperty(this.$route.params.id);
46
+    this.wait = true;
47
+    this.carouselLoaded = false;
48
+    this.contentloaded = false;
49
+    this.clearPropertyImages();
50
+    await this.getDisplayProperty(this.$route.params.id);
38
 
51
 
39
     // await this.getPropertyImages(this.$route.params.id);
52
     // await this.getPropertyImages(this.$route.params.id);
40
     // setTimeout(() => {
53
     // setTimeout(() => {
47
   },
60
   },
48
   computed: {
61
   computed: {
49
     ...mapState("property", ["property", "propertyImages"]),
62
     ...mapState("property", ["property", "propertyImages"]),
50
-    ...mapState("propertyEdit", ["mayEdit"]),
63
+    Wait() {
64
+      if (this.wait && !this.carouselLoaded && !this.contentloaded) {
65
+        return true;
66
+      }
67
+      return false;
68
+    },
51
   },
69
   },
52
   methods: {
70
   methods: {
53
-    ...mapActions("property", [
54
-      "getProperty",
55
-      "getPropertyImages",
56
-      "clearPropertyImages",
57
-    ]),
71
+    ...mapActions("property", ["getDisplayProperty", "clearPropertyImages"]),
58
     ...mapActions("propertyEdit", ["mayEditProperty"]),
72
     ...mapActions("propertyEdit", ["mayEditProperty"]),
59
 
73
 
60
     formatPrice(value) {
74
     formatPrice(value) {
67
       }
81
       }
68
       return "";
82
       return "";
69
     },
83
     },
84
+    CarouselDone() {
85
+      this.carouselLoaded = true;
86
+    },
87
+    ContentDone() {
88
+      this.contentloaded = true;
89
+    },
70
   },
90
   },
71
   beforeDestroy() {
91
   beforeDestroy() {
72
     this.clearPropertyImages();
92
     this.clearPropertyImages();

+ 12
- 0
src/store/modules/property/property.js ファイルの表示

75
           .catch(error => reject(new Error(error.message)));
75
           .catch(error => reject(new Error(error.message)));
76
       });
76
       });
77
     },
77
     },
78
+    getDisplayProperty({ commit, dispatch }, id) {
79
+      return new Promise((resolve, reject) => {
80
+        axios
81
+          .get(`/api/Property/getDetailed/${id}`)
82
+          .then(result => {
83
+            commit("setProperty", result.data);
84
+            dispatch("getSavedPropertyImages", result.data.id);
85
+            resolve();
86
+          })
87
+          .catch(error => reject(new Error(error.message)));
88
+      });
89
+    },
78
     getPropertyImages({ commit }, id) {
90
     getPropertyImages({ commit }, id) {
79
       axios
91
       axios
80
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
92
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)

読み込み中…
キャンセル
保存