JannekeDL 5 years ago
parent
commit
ac8ab7d3dd

+ 20
- 11
src/components/shared/navBar.vue View File

17
           <span></span>
17
           <span></span>
18
           <span></span>
18
           <span></span>
19
         </button>
19
         </button>
20
-        <a class="navbar-brand text-brand" @click="routerGoTo('/')">
20
+        <div class="navbar-brand text-brand" style="cursor: pointer;" @click="routerGoTo('/')">
21
           <img
21
           <img
22
             class="img-fluid"
22
             class="img-fluid"
23
             src="/img/logos/UVProp.png"
23
             src="/img/logos/UVProp.png"
26
           />
26
           />
27
           Uni-Vate
27
           Uni-Vate
28
           <span class="color-b">Properties</span>
28
           <span class="color-b">Properties</span>
29
-        </a>
29
+        </div>
30
         <button
30
         <button
31
           type="button"
31
           type="button"
32
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
32
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
41
       <div class="col-md-8">
41
       <div class="col-md-8">
42
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
42
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
43
           <ul class="navbar-nav">
43
           <ul class="navbar-nav">
44
-            <!-- <li class="nav-item">
45
-            <a class="nav-link active" @click="routerGoTo('/')">Home</a>
46
-            </li>-->
47
             <li class="nav-item dropdown">
44
             <li class="nav-item dropdown">
48
               <a
45
               <a
49
                 class="nav-link dropdown-toggle"
46
                 class="nav-link dropdown-toggle"
61
                   @click="routerGoTo('/timeshare/sell')"
58
                   @click="routerGoTo('/timeshare/sell')"
62
                 >To Sell</a>
59
                 >To Sell</a>
63
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
60
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
64
-                <hr />
65
-                <a
66
-                  v-if="isLoggedIn"
67
-                  class="dropdown-item cursor-pointer"
68
-                  @click="routerGoTo('/timeshare/sell')"
69
-                >My Timeshare Weeks</a>
61
+                <div v-if="isLoggedIn">
62
+                  <hr />
63
+                  <a
64
+                    v-if="isLoggedIn"
65
+                    class="dropdown-item cursor-pointer"
66
+                    @click="routerGoTo('/timeshare/sell')"
67
+                  >My Timeshare Weeks</a>
68
+                </div>
70
               </div>
69
               </div>
71
             </li>
70
             </li>
72
             <li class="nav-item dropdown">
71
             <li class="nav-item dropdown">
263
   },
262
   },
264
 };
263
 };
265
 </script>
264
 </script>
265
+<style scoped>
266
+a {
267
+  border: transparent thin solid;
268
+}
269
+a:hover {
270
+  background-color: #a9e0ff;
271
+  border-radius: 5px;
272
+  border: silver thin solid;
273
+}
274
+</style>

+ 14
- 0
src/components/timeshare/faqPage.vue View File

32
               class="collapse show color-text-a"
32
               class="collapse show color-text-a"
33
               aria-labelledby="heading1"
33
               aria-labelledby="heading1"
34
               data-parent="#accordion"
34
               data-parent="#accordion"
35
+              style="background-color:#E3E3E3"
35
             >
36
             >
36
               <div class="card-body" style="text-align:left">
37
               <div class="card-body" style="text-align:left">
37
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
38
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
57
               class="collapse"
58
               class="collapse"
58
               aria-labelledby="heading2"
59
               aria-labelledby="heading2"
59
               data-parent="#accordion"
60
               data-parent="#accordion"
61
+              style="background-color:#E3E3E3"
60
             >
62
             >
61
               <div class="card-body" style="text-align:left">
63
               <div class="card-body" style="text-align:left">
62
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
64
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
81
               class="collapse"
83
               class="collapse"
82
               aria-labelledby="heading3"
84
               aria-labelledby="heading3"
83
               data-parent="#accordion"
85
               data-parent="#accordion"
86
+              style="background-color:#E3E3E3"
84
             >
87
             >
85
               <div class="card-body" style="text-align:left">
88
               <div class="card-body" style="text-align:left">
86
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
89
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
104
               class="collapse"
107
               class="collapse"
105
               aria-labelledby="heading4"
108
               aria-labelledby="heading4"
106
               data-parent="#accordion"
109
               data-parent="#accordion"
110
+              style="background-color:#E3E3E3"
107
             >
111
             >
108
               <div class="card-body" style="text-align:left">
112
               <div class="card-body" style="text-align:left">
109
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
113
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
126
               class="collapse"
130
               class="collapse"
127
               aria-labelledby="heading5"
131
               aria-labelledby="heading5"
128
               data-parent="#accordion"
132
               data-parent="#accordion"
133
+              style="background-color:#E3E3E3"
129
             >
134
             >
130
               <div class="card-body" style="text-align:left">
135
               <div class="card-body" style="text-align:left">
131
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
136
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
149
               class="collapse"
154
               class="collapse"
150
               aria-labelledby="heading6"
155
               aria-labelledby="heading6"
151
               data-parent="#accordion"
156
               data-parent="#accordion"
157
+              style="background-color:#E3E3E3"
152
             >
158
             >
153
               <div class="card-body" style="text-align:left">
159
               <div class="card-body" style="text-align:left">
154
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
160
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
173
               class="collapse"
179
               class="collapse"
174
               aria-labelledby="heading7"
180
               aria-labelledby="heading7"
175
               data-parent="#accordion"
181
               data-parent="#accordion"
182
+              style="background-color:#E3E3E3"
176
             >
183
             >
177
               <div class="card-body" style="text-align:left">
184
               <div class="card-body" style="text-align:left">
178
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
185
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
195
               class="collapse"
202
               class="collapse"
196
               aria-labelledby="heading8"
203
               aria-labelledby="heading8"
197
               data-parent="#accordion"
204
               data-parent="#accordion"
205
+              style="background-color:#E3E3E3"
198
             >
206
             >
199
               <div class="card-body" style="text-align:left">
207
               <div class="card-body" style="text-align:left">
200
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
208
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
218
               class="collapse"
226
               class="collapse"
219
               aria-labelledby="heading9"
227
               aria-labelledby="heading9"
220
               data-parent="#accordion"
228
               data-parent="#accordion"
229
+              style="background-color:#E3E3E3"
221
             >
230
             >
222
               <div class="card-body" style="text-align:left">
231
               <div class="card-body" style="text-align:left">
223
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
232
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
240
               class="collapse"
249
               class="collapse"
241
               aria-labelledby="heading10"
250
               aria-labelledby="heading10"
242
               data-parent="#accordion"
251
               data-parent="#accordion"
252
+              style="background-color:#E3E3E3"
243
             >
253
             >
244
               <div class="card-body" style="text-align:left">
254
               <div class="card-body" style="text-align:left">
245
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
255
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
264
               class="collapse"
274
               class="collapse"
265
               aria-labelledby="heading"
275
               aria-labelledby="heading"
266
               data-parent="#accordion"
276
               data-parent="#accordion"
277
+              style="background-color:#E3E3E3"
267
             >
278
             >
268
               <div class="card-body" style="text-align:left">
279
               <div class="card-body" style="text-align:left">
269
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
280
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
293
               class="collapse"
304
               class="collapse"
294
               aria-labelledby="heading12"
305
               aria-labelledby="heading12"
295
               data-parent="#accordion"
306
               data-parent="#accordion"
307
+              style="background-color:#E3E3E3"
296
             >
308
             >
297
               <div class="card-body" style="text-align:left">
309
               <div class="card-body" style="text-align:left">
298
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
310
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
320
               class="collapse"
332
               class="collapse"
321
               aria-labelledby="heading13"
333
               aria-labelledby="heading13"
322
               data-parent="#accordion"
334
               data-parent="#accordion"
335
+              style="background-color:#E3E3E3"
323
             >
336
             >
324
               <div class="card-body" style="text-align:left">
337
               <div class="card-body" style="text-align:left">
325
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
338
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
344
               class="collapse"
357
               class="collapse"
345
               aria-labelledby="heading14"
358
               aria-labelledby="heading14"
346
               data-parent="#accordion"
359
               data-parent="#accordion"
360
+              style="background-color:#E3E3E3"
347
             >
361
             >
348
               <div class="card-body" style="text-align:left">
362
               <div class="card-body" style="text-align:left">
349
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The
363
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The

+ 76
- 0
src/components/timeshare/resort/resortImage.vue View File

1
+<template>
2
+  <div class="outer">
3
+    <div id="mainImage">
4
+      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
5
+    </div>
6
+    <div class="list-images">
7
+      <div class="scrolling-wrapper-flexbox row inner">
8
+        <div v-for="(image, i) in images" :key="i" :class="myClass">
9
+          <a @click="changeImage(i)">
10
+            <img class="small-image" :src="image" alt="Resort Image" />
11
+          </a>
12
+        </div>
13
+      </div>
14
+    </div>
15
+  </div>
16
+</template>
17
+
18
+<script>
19
+import { mapState } from 'vuex';
20
+
21
+export default {
22
+  props: {
23
+    images: [],
24
+  },
25
+  data() {
26
+    return {
27
+      largeImg: 0,
28
+    };
29
+  },
30
+  computed: {
31
+    myClass() {
32
+      if (this.images && this.images.length === 3) {
33
+        return 'col-md-4';
34
+      }
35
+      return 'col-md-3 nopadding';
36
+    },
37
+    imageX() {
38
+      return this.images[this.largeImg];
39
+    },
40
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
41
+  },
42
+  methods: {
43
+    changeImage(number) {
44
+      this.largeImg = number;
45
+    },
46
+  },
47
+};
48
+</script>
49
+<style scoped>
50
+.outer {
51
+  background-color: #efefef;
52
+  padding: 10px;
53
+}
54
+.inner {
55
+  padding-left: 15px;
56
+  padding-right: 15px;
57
+}
58
+.main-image {
59
+  max-width: 80%;
60
+  max-height: 412px;
61
+}
62
+.list-images {
63
+  padding: 5px;
64
+  float: left;
65
+  border-top: 1px solid #dedede;
66
+  border-right: 1px solid #dedede;
67
+  border-bottom: 1px solid #dedede;
68
+  background-color: white;
69
+  width: 100%;
70
+  text-align: center;
71
+}
72
+.small-image {
73
+  width: 100%;
74
+  height: 125px;
75
+}
76
+</style>

+ 31
- 42
src/components/timeshare/resort/resortPage.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
-  <section>
4
-    <div style="padding-left:200px;padding-right:200px;">
3
+  <section class="my-top">
4
+    <div class="my-container">
5
       <div class="row">
5
       <div class="row">
6
         <div class="col-md-12 col-lg-8">
6
         <div class="col-md-12 col-lg-8">
7
           <div class="title-box-d">
7
           <div class="title-box-d">
8
-            <h1 class="title-d" style="text-align:left; font-size: 250%">{{resort.prName}}</h1>
8
+            <h1 class="title-d my-title">{{resort.prName}}</h1>
9
           </div>
9
           </div>
10
           <br />
10
           <br />
11
         </div>
11
         </div>
12
-        <div class="col-md-6 col-lg-6" v-if="images && images.length > 0">
13
-          <div id="images" style="background-color:#efefef;padding:10px;">
14
-            <div style="float:left;width:100%;height:70%" id="mainImage">
15
-              <img
16
-                class="img-fluid"
17
-                :src="imageX"
18
-                alt="Resort Image"
19
-                style="width: inherit;max-width:550px;max-height:412px;"
20
-              />
21
-            </div>
22
-            <div
23
-              style="padding:5px;float:left;border-top:1px solid #dedede;border-right:1px solid #dedede;border-bottom:1px solid #dedede;background-color:white;width:100%;text-align:center;"
24
-            >
25
-              <div
26
-                style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%"
27
-                v-for="(image, i) in images"
28
-                :key="i"
29
-              >
30
-                <a @click="changeImage(i)">
31
-                  <img class="productThumbnail" :src="image" alt="Resort Image" />
32
-                </a>
33
-              </div>
34
-            </div>
35
-            <div style="clear:both"></div>
36
-          </div>
37
-          <div id="unit" style="display: none;">
38
-            <div id="unit" style="border: 1px solid #dbdbdb;background-color:#efefef;padding:10px;"></div>
39
-          </div>
12
+        <div class="col-md-6 col-lg-6">
13
+          <ResortImages :images="images" />
40
         </div>
14
         </div>
41
         <div class="col-md-6">
15
         <div class="col-md-6">
42
           <ul class="nav nav-tabs" id="myTab" role="tablist">
16
           <ul class="nav nav-tabs" id="myTab" role="tablist">
99
         </div>
73
         </div>
100
       </div>
74
       </div>
101
     </div>
75
     </div>
76
+    <hr />
102
     <div class="myMargin">
77
     <div class="myMargin">
103
       <div class="row">
78
       <div class="row">
104
         <div class="col-md-4">
79
         <div class="col-md-4">
122
 import { mapState, mapActions } from 'vuex';
97
 import { mapState, mapActions } from 'vuex';
123
 import WeekList from '../buy/weekListComponent.vue';
98
 import WeekList from '../buy/weekListComponent.vue';
124
 import FilterComponent from '../searchTimeshare.vue';
99
 import FilterComponent from '../searchTimeshare.vue';
100
+import ResortImages from './resortImage.vue';
125
 
101
 
126
 export default {
102
 export default {
127
   props: {
103
   props: {
128
     resortCode: {},
104
     resortCode: {},
129
   },
105
   },
130
-  data() {
131
-    return {
132
-      largeImg: 0,
133
-    };
134
-  },
135
   components: {
106
   components: {
136
     WeekList,
107
     WeekList,
137
     FilterComponent,
108
     FilterComponent,
109
+    ResortImages,
138
   },
110
   },
139
   mounted() {
111
   mounted() {
140
     this.initResort(this.resortCode);
112
     this.initResort(this.resortCode);
141
   },
113
   },
142
   computed: {
114
   computed: {
143
-    imageX() {
144
-      return this.images[this.largeImg];
145
-    },
146
     ...mapState('resort', ['resort', 'description', 'images', 'layout']),
115
     ...mapState('resort', ['resort', 'description', 'images', 'layout']),
147
     mapUrl() {
116
     mapUrl() {
148
       return this.resort
117
       return this.resort
155
     routerGoTo(goto) {
124
     routerGoTo(goto) {
156
       this.$router.push(goto);
125
       this.$router.push(goto);
157
     },
126
     },
158
-    changeImage(number) {
159
-      this.largeImg = number;
160
-    },
161
   },
127
   },
162
 };
128
 };
163
 </script>
129
 </script>
164
 <style scoped>
130
 <style scoped>
131
+.my-top {
132
+  padding-top: 25px;
133
+}
134
+.my-container {
135
+  padding-left: 200px;
136
+  padding-right: 200px;
137
+}
138
+.my-title {
139
+  text-align: left;
140
+  font-size: 250%;
141
+}
142
+.scrolling-wrapper-flexbox {
143
+  display: flex;
144
+  flex-wrap: nowrap;
145
+  overflow-x: auto;
146
+}
147
+.scrolling-wrapper-flexbox .card {
148
+  flex: 0 0 auto;
149
+}
150
+.nopadding {
151
+  padding: 1px !important;
152
+  margin: 0 !important;
153
+}
165
 .myMargin {
154
 .myMargin {
166
   margin-left: 2%;
155
   margin-left: 2%;
167
   margin-right: 2%;
156
   margin-right: 2%;

+ 140
- 138
src/components/timeshare/resort/unitPage.vue View File

1
 <template>
1
 <template>
2
   <!-- eslint-disable max-len -->
2
   <!-- eslint-disable max-len -->
3
-  <div class="container">
3
+  <div class="my-container my-top">
4
     <div class="row">
4
     <div class="row">
5
       <div class="col-md-12 col-lg-8">
5
       <div class="col-md-12 col-lg-8">
6
         <div class="title-box-d">
6
         <div class="title-box-d">
7
-          <h1
8
-            class="title-d"
9
-            style="text-align:left; font-size: 250%"
10
-          >{{week ? week.resortName : ''}}</h1>
7
+          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
11
         </div>
8
         </div>
12
         <br />
9
         <br />
13
       </div>
10
       </div>
14
       <div class="row mb-4">
11
       <div class="row mb-4">
15
-        <div class="col-md-4">
16
-          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
17
-        </div>
18
-        <div class="col-md-4">
19
-          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
20
-        </div>
21
-        <div class="col-md-4">
22
-          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
23
-        </div>
24
-      </div>
25
-    </div>
26
-    <br />
27
-    <div class="container col-md-12" style="text-align:left;">
28
-      <div class="row">
29
         <div class="col-md-6">
12
         <div class="col-md-6">
30
-          <div class="title-box-d">
31
-            <h3 class="title-d">Property Description</h3>
32
-          </div>
33
-          <p>{{description}}</p>
34
-          <div>
35
-            <div class="title-box-d">
36
-              <h3 class="title-d">Facilities</h3>
37
-            </div>
38
-            <div class="row" v-if="resort.prUnitFacilities">
39
-              <div
40
-                class="col-md-4"
41
-                v-for="(item, i) in resort.prUnitFacilities.split('\n')"
42
-                :key="i"
43
-              >{{item}}</div>
44
-            </div>
45
-          </div>
13
+          <ResortImages :images="images" />
46
         </div>
14
         </div>
47
-        <div class="col-md-6" v-if="week">
48
-          <form
49
-            id="mainForm"
50
-            method="POST"
51
-            action="/interested-timeshare/"
52
-            accept-charset="UTF-8"
53
-            enctype="multipart/form-data"
54
-          >
55
-            <div class="title-box-d">
56
-              <h3 class="title-d">Summary</h3>
57
-            </div>
58
-            <div class="form-row">
59
-              <div class="col-md-6">
60
-                <label for="resortunit">Unit</label>
61
-                <div class="input-group mb-3">
62
-                  <div class="input-group-prepend">
63
-                    <span class="input-group-text" style="color: #60CBEB">
64
-                      <b>U#</b>
65
-                    </span>
15
+        <div class="col-md-6">
16
+          <hr />
17
+          <div v-if="week">
18
+            <form
19
+              id="mainForm"
20
+              method="POST"
21
+              action="/interested-timeshare/"
22
+              accept-charset="UTF-8"
23
+              enctype="multipart/form-data"
24
+            >
25
+              <div class="title-box-d">
26
+                <h3 class="title-d">Summary</h3>
27
+              </div>
28
+              <div class="form-row">
29
+                <div class="col-md-6">
30
+                  <label for="resortunit">Unit</label>
31
+                  <div class="input-group mb-3">
32
+                    <div class="input-group-prepend">
33
+                      <span class="input-group-text" style="color: #60CBEB">
34
+                        <b>U#</b>
35
+                      </span>
36
+                    </div>
37
+                    <input
38
+                      class="form-control"
39
+                      type="text"
40
+                      id="resort"
41
+                      name="resortunit"
42
+                      :value="week ? week.unitNumber : ''"
43
+                      disabled
44
+                    />
66
                   </div>
45
                   </div>
67
-                  <input
68
-                    class="form-control"
69
-                    type="text"
70
-                    id="resort"
71
-                    name="resortunit"
72
-                    :value="week ? week.unitNumber : ''"
73
-                    disabled
74
-                  />
75
                 </div>
46
                 </div>
76
-              </div>
77
-              <div class="col-md-6">
78
-                <label for="resortWeek">Module / Week Number</label>
79
-                <div class="input-group mb-3">
80
-                  <div class="input-group-prepend">
81
-                    <span class="input-group-text" style="color: #60CBEB">
82
-                      <b>M</b>
83
-                    </span>
47
+                <div class="col-md-6">
48
+                  <label for="resortWeek">Module / Week Number</label>
49
+                  <div class="input-group mb-3">
50
+                    <div class="input-group-prepend">
51
+                      <span class="input-group-text" style="color: #60CBEB">
52
+                        <b>M</b>
53
+                      </span>
54
+                    </div>
55
+                    <input
56
+                      class="form-control"
57
+                      type="text"
58
+                      id="week"
59
+                      name="resortWeek"
60
+                      :value="week ? week.weekNumber : ''"
61
+                      disabled
62
+                    />
84
                   </div>
63
                   </div>
85
-                  <input
86
-                    class="form-control"
87
-                    type="text"
88
-                    id="week"
89
-                    name="resortWeek"
90
-                    :value="week ? week.weekNumber : ''"
91
-                    disabled
92
-                  />
93
                 </div>
64
                 </div>
94
-              </div>
95
 
65
 
96
-              <div class="col-md-6">
97
-                <label for="resortModule">Current Year Levy</label>
98
-                <div class="input-group mb-3">
99
-                  <div class="input-group-prepend">
100
-                    <span class="input-group-text" style="color: #60CBEB">
101
-                      <b>R</b>
102
-                    </span>
66
+                <div class="col-md-6">
67
+                  <label for="resortModule">Current Year Levy</label>
68
+                  <div class="input-group mb-3">
69
+                    <div class="input-group-prepend">
70
+                      <span class="input-group-text" style="color: #60CBEB">
71
+                        <b>R</b>
72
+                      </span>
73
+                    </div>
74
+                    <input
75
+                      class="form-control"
76
+                      type="text"
77
+                      id="levy"
78
+                      name="levy"
79
+                      :value="formatPrice(week ? week.levyAmount : 0)"
80
+                      disabled
81
+                    />
103
                   </div>
82
                   </div>
104
-                  <input
105
-                    class="form-control"
106
-                    type="text"
107
-                    id="levy"
108
-                    name="levy"
109
-                    :value="formatPrice(week ? week.levyAmount : 0)"
110
-                    disabled
111
-                  />
112
                 </div>
83
                 </div>
113
-              </div>
114
-              <div class="col-md-6">
115
-                <label for="price">Price</label>
116
-                <div class="property-price d-flex">
117
-                  <div class="price-border">
118
-                    <div class="price-label">
119
-                      <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
84
+                <div class="col-md-6">
85
+                  <label for="price">Price</label>
86
+                  <div class="property-price d-flex">
87
+                    <div class="price-border">
88
+                      <div class="price-label">
89
+                        <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
90
+                      </div>
120
                     </div>
91
                     </div>
121
                   </div>
92
                   </div>
122
                 </div>
93
                 </div>
123
               </div>
94
               </div>
124
-            </div>
125
-            <br />
126
-          </form>
127
-          <br />
128
-          <div class="d-flex justify-content-between">
129
-            <div class="p-1">
130
-              <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
131
-            </div>
132
-            <div class="p-1">
133
-              <button
134
-                type="button"
135
-                class="btn btn-lg btn-b-n even-width mr-auto"
136
-                data-toggle="modal"
137
-                data-target="#myModal"
138
-              >Make an Offer</button>
139
-              <div class="col-md-12">
140
-                <div id="myModal" class="modal fade" role="dialog">
141
-                  <div class="modal-dialog modal-lg">
142
-                    <!-- Modal content-->
143
-                    <div class="modal-content">
144
-                      <div class="modal-header">
145
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
146
-                      </div>
147
-                      <div padding-left="20px">
148
-                        <makeOffer
149
-                          name="MakeOffer"
150
-                          :isMakeOffer="true"
151
-                          :isProperty="false"
152
-                          :item="week"
153
-                        />
95
+            </form>
96
+            <hr />
97
+            <div class="d-flex justify-content-between">
98
+              <div class="p-1">
99
+                <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
100
+              </div>
101
+              <div class="p-1">
102
+                <button
103
+                  type="button"
104
+                  class="btn btn-lg btn-b-n even-width mr-auto"
105
+                  data-toggle="modal"
106
+                  data-target="#myModal"
107
+                >Make an Offer</button>
108
+                <div class="col-md-12">
109
+                  <div id="myModal" class="modal fade" role="dialog">
110
+                    <div class="modal-dialog modal-lg">
111
+                      <!-- Modal content-->
112
+                      <div class="modal-content">
113
+                        <div class="modal-header">
114
+                          <button type="button" class="close" data-dismiss="modal">&times;</button>
115
+                        </div>
116
+                        <div padding-left="20px">
117
+                          <makeOffer
118
+                            name="MakeOffer"
119
+                            :isMakeOffer="true"
120
+                            :isProperty="false"
121
+                            :item="week"
122
+                          />
123
+                        </div>
154
                       </div>
124
                       </div>
155
                     </div>
125
                     </div>
156
                   </div>
126
                   </div>
157
                 </div>
127
                 </div>
158
               </div>
128
               </div>
159
             </div>
129
             </div>
130
+            <hr />
131
+          </div>
132
+        </div>
133
+        <hr />
134
+        <div class="col-md-12">
135
+          <hr />
136
+        </div>
137
+        <div class="col-md-6">
138
+          <div class="title-box-d">
139
+            <h3 class="title-d">Facilities</h3>
160
           </div>
140
           </div>
141
+          <div class="row" v-if="resort.prUnitFacilities">
142
+            <div
143
+              class="col-md-4"
144
+              v-for="(item, i) in resort.prUnitFacilities.split('\n')"
145
+              :key="i"
146
+            >{{item}}</div>
147
+          </div>
148
+        </div>
149
+        <div class="col-md-6">
150
+          <div class="title-box-d">
151
+            <h3 class="title-d">Property Description</h3>
152
+          </div>
153
+          <p>{{description}}</p>
161
         </div>
154
         </div>
162
       </div>
155
       </div>
163
     </div>
156
     </div>
167
 <script>
160
 <script>
168
 import { mapState, mapActions } from 'vuex';
161
 import { mapState, mapActions } from 'vuex';
169
 import makeOffer from '../../processFlow/makeOffer.vue';
162
 import makeOffer from '../../processFlow/makeOffer.vue';
163
+import ResortImages from './resortImage.vue';
170
 
164
 
171
 export default {
165
 export default {
172
   name: 'unit',
166
   name: 'unit',
173
   components: {
167
   components: {
174
     makeOffer,
168
     makeOffer,
169
+    ResortImages,
175
   },
170
   },
176
   props: {
171
   props: {
177
     resortCode: {},
172
     resortCode: {},
182
     this.initWeek(this.weekId);
177
     this.initWeek(this.weekId);
183
   },
178
   },
184
   computed: {
179
   computed: {
185
-    ...mapState('resort', [
186
-      'resort',
187
-      'description',
188
-      'image1',
189
-      'image2',
190
-      'image3',
191
-    ]),
180
+    ...mapState('resort', ['resort', 'description', 'images']),
192
     ...mapState('week', ['week']),
181
     ...mapState('week', ['week']),
193
   },
182
   },
194
   methods: {
183
   methods: {
205
 };
194
 };
206
 </script>
195
 </script>
207
 <style scoped>
196
 <style scoped>
197
+.my-top {
198
+  padding-top: 25px;
199
+}
200
+.my-container {
201
+  padding-left: 15%;
202
+  padding-right: 15%;
203
+}
204
+.my-title {
205
+  text-align: left;
206
+  font-size: 250%;
207
+}
208
 .btn.btn-b-c {
208
 .btn.btn-b-c {
209
   background-color: #ffffff;
209
   background-color: #ffffff;
210
   color: #60cbeb;
210
   color: #60cbeb;
215
   color: #ffffff;
215
   color: #ffffff;
216
 }
216
 }
217
 .price-border {
217
 .price-border {
218
+  background-color: #a9e0ff;
219
+  width: 100%;
218
   border: solid #60cbeb medium;
220
   border: solid #60cbeb medium;
219
   padding: 0px 20px;
221
   padding: 0px 20px;
220
 }
222
 }

+ 5
- 1
src/store/modules/timeshare/resort.js View File

105
         .get(
105
         .get(
106
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
106
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
107
         )
107
         )
108
-        .then(result => commit('addImage', result.data))
108
+        .then((result) => {
109
+          if (result.data && result.data.length > 0) {
110
+            commit('addImage', result.data);
111
+          }
112
+        })
109
         .catch(console.error);
113
         .catch(console.error);
110
     },
114
     },
111
     getLayout({
115
     getLayout({

Loading…
Cancel
Save