finish booking page all elements

hichina-main-front-mobile-first/package.json

@@ -13,7 +13,7 @@
     "build": "quasar build"
   },
   "dependencies": {
-    "@quasar/extras": "^1.0.0",
+    "@quasar/extras": "^1.16.5",
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.4.0",
     "core-js": "^3.6.5",

hichina-main-front-mobile-first/quasar.config.js

@@ -7,7 +7,6 @@
 
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
-
 const ESLintPlugin = require("eslint-webpack-plugin");
 
 const { configure } = require("quasar/wrappers");
@@ -40,6 +39,7 @@ module.exports = configure(function (ctx) {
 
       "roboto-font", // optional, you are not bound to it
       "material-icons", // optional, you are not bound to it
+      "line-awesome",
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build

hichina-main-front-mobile-first/src/pages/BookPage.vue

@@ -30,6 +30,158 @@
         Purchase Count: {{ buyCount }}
       </div>
     </div>
+    <div class="row">
+      <div
+        class="q-pa-md col-12"
+        v-for="index in parseInt(adultCount) +
+        parseInt(childCount) +
+        parseInt(infantCount)"
+        :key="index"
+      >
+        <div class="text-weight-bold text-h6">Traveler: {{ index }}</div>
+        <div class="row">
+          <q-input
+            class="col-12 col-sm-6 col-md-4"
+            rounded
+            dense
+            outlined
+            v-model="peopleform.value[index - 1]['surName']"
+            label="Surname*"
+            :rules="[(val) => !!val || 'Field is required']"
+          />
+        </div>
+        <div class="row">
+          <q-input
+            class="col-12 col-sm-6 col-md-4"
+            rounded
+            dense
+            outlined
+            v-model="peopleform.value[index - 1]['givenName']"
+            label="Given Name*"
+            :rules="[(val) => !!val || 'Field is required']"
+          />
+        </div>
+        <div>
+          <div class="q-pb-sm text-weight-bold">Birthday</div>
+          <q-date v-model="peopleform.value[index - 1]['birthday']" />
+        </div>
+        <div class="row q-mt-md">
+          <q-select
+            outlined
+            dense
+            class="col-12 col-sm-6 col-md-4"
+            v-model="peopleform.value[index - 1]['gender']"
+            :options="genderOption"
+            label="Gender"
+          />
+        </div>
+        <div class="row q-mt-md">
+          Nationality:
+          <country-select
+            v-model="peopleform.value[index - 1]['nationality']"
+            :country="country"
+            topCountry="US"
+          />
+        </div>
+        <div class="row q-mt-md">
+          <q-input
+            class="col-12 col-sm-6 col-md-4"
+            rounded
+            dense
+            outlined
+            v-model="peopleform.value[index - 1]['passportNo']"
+            label="Passport Number*"
+            :rules="[(val) => !!val || 'Field is required']"
+          />
+        </div>
+        <div>
+          <div class="q-pb-sm text-weight-bold">Expiry date of Passport</div>
+          <q-date v-model="peopleform.value[index - 1]['passportExpireDate']" />
+        </div>
+      </div>
+    </div>
+    <div class="row text-h6 text-weight-bold q-pa-md">Contact Info</div>
+    <div class="row">
+      <q-input
+        class="q-pa-md col-12 col-sm-6 col-md-4"
+        dense
+        outlined
+        v-model="contactform['name']"
+        label="Name*"
+        :rules="[(val) => !!val || 'Field is required']"
+      />
+    </div>
+    <div class="row">
+      <q-input
+        class="q-pa-md col-12 col-sm-6 col-md-4"
+        dense
+        outlined
+        v-model="contactform['email']"
+        label="Email Address*"
+        :rules="[(val) => !!val || 'Field is required']"
+      />
+    </div>
+    <div class="row">
+      <q-input
+        class="q-pa-md col-12 col-sm-6 col-md-4"
+        dense
+        outlined
+        v-model="contactform['phone']"
+        label="Phone Number*"
+        :rules="[(val) => !!val || 'Field is required']"
+      />
+    </div>
+    <div class="row">
+      <q-input
+        class="q-pa-md col-12 col-sm-6 col-md-4"
+        dense
+        outlined
+        v-model="contactform['address']"
+        label="Address in China*"
+        :rules="[(val) => !!val || 'Field is required']"
+      />
+    </div>
+    <div class="row text-h6 text-weight-bold q-pa-md">Coupon Code</div>
+    <div class="row">
+      <q-input
+        class="q-px-md col-12 col-sm-6 col-md-4"
+        dense
+        outlined
+        v-model="coupon"
+        label="Have Coupon? Enter code here"
+      />
+    </div>
+    <div class="row q-pa-md">
+      <div class="row col-6">
+        <div
+          class="col-6 col-sm-4 text-blue-6 text-h5 q-py-md"
+          style="border-bottom: 1px solid black"
+        >
+          Payment CNY:
+        </div>
+        <div class="col-6 col-sm-8 text-red text-h3 q-py-md">
+          {{ totalPrice }}￥
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <q-btn
+        icon="lab la-alipay"
+        glossy
+        color="blue-6"
+        label="Pay with Alipay"
+        class="q-ma-sm"
+        @click="payWithAlipay"
+      />
+      <q-btn
+        icon="lab la-weixin"
+        glossy
+        color="green-6"
+        label="Pay with Wechat Pay"
+        class="q-ma-sm"
+        @click="payWithWechatPay"
+      />
+    </div>
   </q-page>
 </template>
 
@@ -78,6 +230,37 @@ export default {
           gp.$goPage("/auth/login");
         });
     }
+
+    function todayString() {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, "0");
+      const day = String(today.getDate()).padStart(2, "0");
+      return `${year}/${month}/${day}`;
+    }
+
+    function initPeopleform() {
+      peopleform.value = [];
+
+      for (
+        let index = 0;
+        index <
+        parseInt(adultCount.value) +
+          parseInt(childCount.value) +
+          parseInt(infantCount.value);
+        index++
+      ) {
+        peopleform.value.push({
+          surName: "",
+          givenName: "",
+          birthday: ref(todayString()),
+          gender: "",
+          nationality: "",
+          passportNo: "",
+          passportExpireDate: ref(todayString()),
+        });
+      }
+    }
     onMounted(() => {
       whoami();
 
@@ -91,17 +274,18 @@ export default {
       childCount.value = allParamsFromPreviousPage.childCount;
       infantCount.value = allParamsFromPreviousPage.infantCount;
       buyCount.value = allParamsFromPreviousPage.buyCount;
+      totalPrice.value = allParamsFromPreviousPage.totalPrice;
 
       console.log("productName.value");
       console.log(productName.value);
 
-      // peopleform.value = [];
-      // contactform.value = {
-      //   name: "",
-      //   email: "",
-      //   phone: "",
-      //   address: "",
-      // };
+      initPeopleform();
+      contactform.value = {
+        name: "",
+        email: "",
+        phone: "",
+        address: "",
+      };
       // if (
       //   route.params.productName == null ||
       //   route.params.productName.length < 1 ||
@@ -128,24 +312,6 @@ export default {
       //   route.params.buyCount == null ? 0 : route.params.buyCount;
 
       // productTypeId.value = route.params.productTypeId;
-      // for (
-      //   let index = 0;
-      //   index <
-      //   parseInt(adultCount.value) +
-      //     parseInt(childCount.value) +
-      //     parseInt(infantCount.value);
-      //   index++
-      // ) {
-      //   peopleform.value.push({
-      //     surName: "",
-      //     givenName: "",
-      //     birthday: "",
-      //     gender: "",
-      //     nationality: "",
-      //     passportNo: "",
-      //     passportExpireDate: "",
-      //   });
-      // }
     });
 
     return {
@@ -156,6 +322,15 @@ export default {
       childCount,
       infantCount,
       buyCount,
+      peopleform,
+      genderOption: [
+        { label: "Male", value: 1 },
+        { label: "Female", value: 0 },
+      ],
+      country,
+      contactform,
+      coupon,
+      totalPrice,
     };
   },
 };

hichina-main-front-mobile-first/yarn.lock

@@ -1350,10 +1350,10 @@
     core-js "^3.6.5"
     core-js-compat "^3.6.5"
 
-"@quasar/extras@^1.0.0":
-  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.4.tgz#34fc2517fffecb5c27e4cea1b69b62aaf890ff73"
-  integrity sha512-q2kPTNHI5aprgE2yQfRIf6aud+qSXH3YTNmhcfRp/rENh7kRjoM+b5BBPxgHlO1si1ARddbmr+Fxu/L05hfXnQ==
+"@quasar/extras@^1.16.5":
+  version "1.16.5"
+  resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.5.tgz#77fd7b8e77e45a2798067a1e4aeafb39a95daf51"
+  integrity sha512-3VAJS9NECr1OSHX674+3YvEMIlHclr81aZrEkoBtVqr+sX4In22Up44toua+qNFsxnoATPqzpwKOJxA3iAF71Q==
 
 "@quasar/render-ssr-error@^1.0.1":
   version "1.0.1"