Kobus 5年前
コミット
c74be16a0a

+ 127
- 7
src/components/timeshare/resort/resortPage.vue ファイルの表示

13
           </div>
13
           </div>
14
           <br />
14
           <br />
15
         </div>
15
         </div>
16
-        <div class="row mb-4">
16
+        <div class="col-md-6 col-lg-6">
17
+          <div id="images" style="background-color:#efefef;padding:10px;">
18
+            <div style="float:left;width:100%;height:70%" id="mainImage">
19
+              <img
20
+                class="img-fluid"
21
+                :src="largeImg !== undefined ? largeImg : image1"
22
+                alt="Resort Image"
23
+                style="width: inherit;max-width:550px;max-height:412px;"
24
+              />
25
+            </div>
26
+            <div
27
+              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;"
28
+            >
29
+              <div style="float:left;margin-left:7px;cursor:pointer;cursor:hand;width:24%">
30
+                <a @click="changeImage(1)">
31
+                  <img class="productThumbnail" :src="image1" alt="Resort Image" />
32
+                </a>
33
+              </div>
34
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
35
+                <a @click="changeImage(2)">
36
+                  <img :src="image2" alt="Resort Image" class="productThumbnail" />
37
+                </a>
38
+              </div>
39
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
40
+                <a @click="changeImage(3)">
41
+                  <img :src="image3" alt="Resort Image" class="productThumbnail" />
42
+                </a>
43
+              </div>
44
+              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
45
+                <a @click="changeImage(4)">
46
+                  <img :src="image4" alt="Resort Image" class="productThumbnail" />
47
+                </a>
48
+              </div>
49
+            </div>
50
+            <div style="clear:both"></div>
51
+          </div>
52
+          <div id="unit" style="display: none;">
53
+            <div id="unit" style="border: 1px solid #dbdbdb;background-color:#efefef;padding:10px;"></div>
54
+          </div>
55
+        </div>
56
+
57
+        <!-- <div class="row mb-4">
17
           <div class="col-md-4">
58
           <div class="col-md-4">
18
             <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
59
             <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
19
           </div>
60
           </div>
23
           <div class="col-md-4">
64
           <div class="col-md-4">
24
             <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
65
             <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
25
           </div>
66
           </div>
67
+        </div>-->
68
+        <!-- <div class="row"> -->
69
+        <!-- <div class="col-md-6 col-lg-6"> -->
70
+        <ul class="nav nav-tabs" id="myTab" role="tablist">
71
+          <li class="nav-item">
72
+            <a
73
+              class="nav-link active"
74
+              id="directions-tab"
75
+              data-toggle="tab"
76
+              href="#directions"
77
+              role="tab"
78
+              aria-controls="directions"
79
+              aria-selected="false"
80
+            >Directions</a>
81
+          </li>
82
+          <li class="nav-item">
83
+            <a
84
+              class="nav-link"
85
+              id="resort-layout-tab"
86
+              data-toggle="tab"
87
+              href="#resort-layout"
88
+              role="tab"
89
+              aria-controls="resort-layout"
90
+              aria-selected="true"
91
+            >Resort Layout</a>
92
+          </li>
93
+        </ul>
94
+        <div class="tab-content" id="myTabContent">
95
+          <div
96
+            class="tab-pane fade show active"
97
+            id="directions"
98
+            role="tabpanel"
99
+            aria-labelledby="directions-tab"
100
+          >
101
+            <iframe
102
+              :src="mapUrl"
103
+              width="150%"
104
+              height="300"
105
+              frameborder="0"
106
+              style="border:0"
107
+              allowfullscreen
108
+            ></iframe>
109
+            <br />
110
+
111
+            <small>
112
+              <a :href="mapUrl" style="color:#60CBEB;text-align:left" target="_blank">See map bigger</a>
113
+            </small>
114
+          </div>
115
+          <div
116
+            class="tab-pane fade"
117
+            id="resort-layout"
118
+            role="tabpanel"
119
+            aria-labelledby="resort-layout-tab"
120
+          >
121
+            <img class="img-fluid" :src="layout" alt="Resort Layout" />
122
+          </div>
26
         </div>
123
         </div>
124
+        <!-- </div>
125
+        </div>-->
27
       </div>
126
       </div>
28
     </div>
127
     </div>
128
+
29
     <div class="myMargin">
129
     <div class="myMargin">
30
       <div class="row">
130
       <div class="row">
31
-        <div class="col-md-3">
131
+        <div class="col-md-4">
32
           <h4>Filter Resort</h4>
132
           <h4>Filter Resort</h4>
33
           <FilterComponent :hideTop="true" />
133
           <FilterComponent :hideTop="true" />
34
         </div>
134
         </div>
35
-        <div class="col-md-9">
135
+        <div class="col-md-8">
36
           <WeekList :resortCode="resortCode" />
136
           <WeekList :resortCode="resortCode" />
37
           <div>
137
           <div>
38
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
138
             <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
40
           </div>
140
           </div>
41
           {{description}}
141
           {{description}}
42
           <hr />
142
           <hr />
43
-          <div class="row">
44
-            <div class="col-md-10 mb-4">
143
+          <!-- <div class="row">
144
+            <div class="col-md-8">
45
               <ul class="nav nav-tabs" id="myTab" role="tablist">
145
               <ul class="nav nav-tabs" id="myTab" role="tablist">
46
                 <li class="nav-item">
146
                 <li class="nav-item">
47
                   <a
147
                   <a
101
                 </div>
201
                 </div>
102
               </div>
202
               </div>
103
             </div>
203
             </div>
104
-          </div>
204
+          </div>-->
105
         </div>
205
         </div>
106
       </div>
206
       </div>
107
     </div>
207
     </div>
116
   props: {
216
   props: {
117
     resortCode: {},
217
     resortCode: {},
118
   },
218
   },
219
+  data() {
220
+    return {
221
+      largeImg: undefined,
222
+    };
223
+  },
119
   components: {
224
   components: {
120
     WeekList,
225
     WeekList,
121
     FilterComponent,
226
     FilterComponent,
122
   },
227
   },
123
   mounted() {
228
   mounted() {
124
     this.initResort(this.resortCode);
229
     this.initResort(this.resortCode);
230
+    this.largeImg = this.image1;
125
   },
231
   },
126
   computed: {
232
   computed: {
127
     ...mapState('resort', [
233
     ...mapState('resort', [
130
       'image1',
236
       'image1',
131
       'image2',
237
       'image2',
132
       'image3',
238
       'image3',
239
+      'image4',
133
       'layout',
240
       'layout',
134
     ]),
241
     ]),
135
     mapUrl() {
242
     mapUrl() {
143
     routerGoTo(goto) {
250
     routerGoTo(goto) {
144
       this.$router.push(goto);
251
       this.$router.push(goto);
145
     },
252
     },
253
+
254
+    changeImage(number) {
255
+      console.log(number);
256
+      if (number === 2) {
257
+        this.largeImg = this.image2;
258
+      } else if (number === 3) {
259
+        this.largeImg = this.image3;
260
+      } else if (number === 4) {
261
+        this.largeImg = this.image4;
262
+      } else {
263
+        this.largeImg = this.image1;
264
+      }
265
+    },
146
   },
266
   },
147
 };
267
 };
148
 </script>
268
 </script>
149
-<style>
269
+<style scoped>
150
 .myMargin {
270
 .myMargin {
151
   margin-left: 2%;
271
   margin-left: 2%;
152
   margin-right: 2%;
272
   margin-right: 2%;

+ 0
- 1
src/components/user/loginPage.vue ファイルの表示

6
         <div class="form">
6
         <div class="form">
7
           <div>
7
           <div>
8
             <h4>Login</h4>
8
             <h4>Login</h4>
9
-            <br />
10
           </div>
9
           </div>
11
           <div v-if="this.$store.state.authentication.status === 'error'">
10
           <div v-if="this.$store.state.authentication.status === 'error'">
12
             <alert
11
             <alert

+ 45
- 37
src/store/modules/timeshare/resort.js ファイルの表示

9
     image1: '',
9
     image1: '',
10
     image2: '',
10
     image2: '',
11
     image3: '',
11
     image3: '',
12
+    image4: '',
12
     layout: '',
13
     layout: '',
13
     description: '',
14
     description: '',
14
   },
15
   },
24
       state.image1 = '';
25
       state.image1 = '';
25
       state.image2 = '';
26
       state.image2 = '';
26
       state.image3 = '';
27
       state.image3 = '';
28
+      state.image4 = '';
27
       state.layout = '';
29
       state.layout = '';
28
     },
30
     },
29
     setImage1(state, image) {
31
     setImage1(state, image) {
35
     setImage3(state, image) {
37
     setImage3(state, image) {
36
       state.image3 = `data:image/jpeg;base64,${image}`;
38
       state.image3 = `data:image/jpeg;base64,${image}`;
37
     },
39
     },
40
+    setImage4(state, image) {
41
+      state.image4 = `data:image/jpeg;base64,${image}`;
42
+    },
38
     setLayout(state, image) {
43
     setLayout(state, image) {
39
       state.layout = `data:image/jpeg;base64,${image}`;
44
       state.layout = `data:image/jpeg;base64,${image}`;
40
     },
45
     },
41
   },
46
   },
42
   getters: {},
47
   getters: {},
43
   actions: {
48
   actions: {
44
-    initResort({
45
-      commit,
46
-      dispatch,
47
-    }, resortCode) {
49
+    initResort({ commit, dispatch }, resortCode) {
48
       commit('clear');
50
       commit('clear');
49
       dispatch('getResort', resortCode);
51
       dispatch('getResort', resortCode);
50
       dispatch('getDescription', resortCode);
52
       dispatch('getDescription', resortCode);
51
       dispatch('getImage1', resortCode);
53
       dispatch('getImage1', resortCode);
52
       dispatch('getImage2', resortCode);
54
       dispatch('getImage2', resortCode);
53
       dispatch('getImage3', resortCode);
55
       dispatch('getImage3', resortCode);
56
+      dispatch('getImage4', resortCode);
54
       dispatch('getLayout', resortCode);
57
       dispatch('getLayout', resortCode);
55
     },
58
     },
56
-    getDescription({
57
-      commit,
58
-    }, resortCode) {
59
-      axios.get(
60
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
61
-      )
59
+    getDescription({ commit }, resortCode) {
60
+      axios
61
+        .get(
62
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
63
+        )
62
         .then((result) => {
64
         .then((result) => {
63
           commit('setDescription', result.data);
65
           commit('setDescription', result.data);
64
         })
66
         })
65
         .catch(console.error);
67
         .catch(console.error);
66
     },
68
     },
67
-    getResort({
68
-      commit,
69
-    }, resortCode) {
70
-      axios.get(
71
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
72
-          resortCode}`,
73
-      )
69
+    getResort({ commit }, resortCode) {
70
+      axios
71
+        .get(
72
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${resortCode}`,
73
+        )
74
         .then((result) => {
74
         .then((result) => {
75
           commit('setResort', result.data);
75
           commit('setResort', result.data);
76
         })
76
         })
77
         .catch(console.error);
77
         .catch(console.error);
78
     },
78
     },
79
-    getImage1({
80
-      commit,
81
-    }, resortCode) {
82
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
83
-        resortCode}/image/1`)
79
+    getImage1({ commit }, resortCode) {
80
+      axios
81
+        .get(
82
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/1`,
83
+        )
84
         .then(result => commit('setImage1', result.data))
84
         .then(result => commit('setImage1', result.data))
85
         .catch(console.error);
85
         .catch(console.error);
86
     },
86
     },
87
-    getImage2({
88
-      commit,
89
-    }, resortCode) {
90
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
91
-        resortCode}/image/2`)
87
+    getImage2({ commit }, resortCode) {
88
+      axios
89
+        .get(
90
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/2`,
91
+        )
92
         .then(result => commit('setImage2', result.data))
92
         .then(result => commit('setImage2', result.data))
93
         .catch(console.error);
93
         .catch(console.error);
94
     },
94
     },
95
-    getImage3({
96
-      commit,
97
-    }, resortCode) {
98
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
99
-        resortCode}/image/3`)
95
+    getImage3({ commit }, resortCode) {
96
+      axios
97
+        .get(
98
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/3`,
99
+        )
100
         .then(result => commit('setImage3', result.data))
100
         .then(result => commit('setImage3', result.data))
101
         .catch(console.error);
101
         .catch(console.error);
102
     },
102
     },
103
-    getLayout({
104
-      commit,
105
-    }, resortCode) {
106
-      axios.get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${
107
-        resortCode}/layout`)
103
+    getImage4({ commit }, resortCode) {
104
+      axios
105
+        .get(
106
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
107
+        )
108
+        .then(result => commit('setImage4', result.data))
109
+        .catch(console.error);
110
+    },
111
+    getLayout({ commit }, resortCode) {
112
+      axios
113
+        .get(
114
+          `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/layout`,
115
+        )
108
         .then(result => commit('setLayout', result.data))
116
         .then(result => commit('setLayout', result.data))
109
         .catch(console.error);
117
         .catch(console.error);
110
     },
118
     },

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