weekPage

src/components/timeshare/resort/unitPage.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="container">
+    <div class="row mb-4">
+      <div class="col-md-12">
+        <h1 class="my-4">{{resort.prName}}</h1>
+      </div>
+      <div class="col-md-6">
+        <p>{{description}}</p>
+      </div>
+      <div class="col-md-6">
+        <form
+          id="mainForm"
+          method="POST"
+          action="/interested-timeshare/"
+          accept-charset="UTF-8"
+          enctype="multipart/form-data"
+        >
+          <div class="form-row">
+            <div class="col-md-6">
+              <label for="resortName">Unit</label>
+              <input
+                class="form-control"
+                type="text"
+                id="resort"
+                name="resortName"
+                :value="week.unit"
+                disabled
+              />
+            </div>
+            <div class="col-md-6">
+              <label for="resortWeek">Week</label>
+              <input
+                class="form-control"
+                type="text"
+                id="week"
+                name="resortWeek"
+                :value="week.week"
+                disabled
+              />
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-6">
+              <label for="resortModule">Module</label>
+              <input
+                class="form-control"
+                type="text"
+                id="module"
+                name="resortModule"
+                :value="week.module"
+                disabled
+              />
+            </div>
+            <div class="col-md-6">
+              <label for="price">Price</label>
+              <input
+                class="form-control"
+                type="text"
+                name="price"
+                id="price"
+                :value="'R ' + week.price"
+                disabled
+              />
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-6">
+              <label for="resortModule">Current Year Levy</label>
+              <input
+                class="form-control"
+                type="text"
+                id="levy"
+                name="levy"
+                :value="'R ' + week.currentLevy"
+                disabled
+              />
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-12">
+              <input class="form-control" type="text" name="name" placeholder="Name" />
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-12">
+              <input class="form-control" type="text" name="mobile" placeholder="Contact Number" />
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-12">
+              <input class="form-control" type="email" name="email" placeholder="Email" />
+            </div>
+          </div>
+
+          <button class="btn btn-blue even-width mr-auto" type="submit">ENQUIRE NOW</button>
+
+          <a
+            class="btn btn-blue even-width mr-auto"
+            href="/share-transfer-initiation-for-purchaser/"
+          >MAKE AN OFFER</a>
+          <a
+            class="btn btn-blue even-width mr-auto"
+            href="#"
+            data-toggle="modal"
+            data-target="#loginOrRegister"
+          >MAKE AN OFFER</a>
+
+          <a class="btn btn-blue even-width mr-auto" href="javascript:history.back()">BACK</a>
+        </form>
+      </div>
+    </div>
+    <div class="row mb-4">
+      <div class="col-md-4">
+        <img class="img-fluid" :src="image1" alt="Resort Image" />
+      </div>
+      <div class="col-md-4">
+        <img class="img-fluid" :src="image2" alt="Resort Image" />
+      </div>
+      <div class="col-md-4">
+        <img class="img-fluid" :src="image3" alt="Resort Image" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    resortCode: {},
+    weekId: {},
+  },
+  mounted() {
+    this.initResort(this.resortCode);
+    this.initWeek(this.weekId);
+  },
+  computed: {
+    ...mapState('resort', [
+      'resort',
+      'description',
+      'image1',
+      'image2',
+      'image3',
+    ]),
+    ...mapState('week', ['week', 'contactDetails']),
+  },
+  methods: {
+    ...mapActions('resort', ['initResort']),
+    ...mapActions('week', ['initWeek']),
+  },
+};
+</script>

src/router/index.js

@@ -22,6 +22,7 @@ import Status from '../components/admin/status/statusPage.vue';
 import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
 
 import ResortPage from '../components/timeshare/resort/resortPage.vue';
+import UnitPage from '../components/timeshare/resort/unitPage.vue';
 
 import ContactUs from '../components/misc/contactUs.vue';
 
@@ -114,5 +115,11 @@ export default new Router({
     component: ResortPage,
     props: true,
   },
+  {
+    path: '/resort/:resortCode/:weekId',
+    name: 'UnitPage',
+    component: UnitPage,
+    props: true,
+  },
   ],
 });

src/store/index.js

@@ -8,6 +8,7 @@ import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
 import TimeshareBuyModule from './modules/timeshare/buyPage';
 import SearchTabModule from './modules/searchTab';
 import ResortModule from './modules/timeshare/resort';
+import WeekModule from './modules/timeshare/week';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -20,5 +21,6 @@ export default new Vuex.Store({
     timeshareBuy: TimeshareBuyModule,
     searchTab: SearchTabModule,
     resort: ResortModule,
+    week: WeekModule,
   },
 });

src/store/modules/timeshare/week.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    week: {
+      id: '',
+      unit: '',
+      week: '',
+      module: '',
+      price: '',
+      currentLevy: '',
+    },
+    contactDetails: {
+      name: '',
+      number: '',
+      email: '',
+    },
+  },
+  mutations: {
+    setWeek(state, week) {
+      state.week = week;
+    },
+  },
+  getters: {},
+  actions: {
+    initWeek({
+      commit,
+    }, weekId) {
+      commit('setWeek', {
+        id: weekId,
+        unit: '359',
+        week: 'N18',
+        module: '359/N18 River View',
+        price: 85000,
+        currentLevy: 5455,
+      });
+    },
+  },
+};