support for alipay

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

@@ -23,6 +23,7 @@
     "unhead": "^1.1.30",
     "vue": "^3.0.0",
     "vue-image-crop-upload": "^3.0.3",
+    "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.0.0",
     "vue3-country-region-select": "^1.0.0",
     "vuejs3-datepicker": "^1.0.19"

hichina-main-front-mobile-first/src/boot/globalMixin.js

@@ -41,11 +41,20 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
     router.push(val);
   };
 
+  const checkEmpty = (val) => {
+    if (val == null || val.length < 1) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   app.config.globalProperties.$testGlobal2 = testGlobal2;
   app.config.globalProperties.$normalizeMultiImageUrl = normalizeMultiImageUrl;
   app.config.globalProperties.$removeHtmlTag = removeHtmlTag;
   app.config.globalProperties.$generalNotify = generalNotify;
   app.config.globalProperties.$goPage = goPage;
+  app.config.globalProperties.$checkEmpty = checkEmpty;
 
   app.mixin({
     methods: {
@@ -57,6 +66,7 @@ export default boot(async (/* { app, router, ... } */ { app, router }) => {
         window.location = url;
       },
       goPage,
+      checkEmpty,
     },
   });
 });

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

@@ -0,0 +1,40 @@
+<template>
+  <q-page>
+    <div v-html="htmlContent" ref="pay"></div>
+  </q-page>
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+import { orderPaymentParamStore } from "stores/orderPaymentParamStore";
+export default {
+  name: "AlipayPage",
+  setup() {
+    const orderPaymentParamStore = orderPaymentParamStore();
+
+    const codeUrl = ref("");
+    const orderId = ref("");
+    const price = ref("");
+
+    const htmlContent = ref("");
+
+    function b64_to_utf8(str) {
+      return window.atob(str);
+    }
+
+    onMounted(() => {
+      var allParamsFromPreviousPage = orderPaymentParamStore.getPaymentDetail;
+      console.log("what I got from book form:");
+      console.log(allParamsFromPreviousPage);
+      codeUrl.value = allParamsFromPreviousPage.codeUrl;
+      console.log("decoded");
+      htmlContent.value = b64_to_utf8(codeUrl.value);
+      console.log(htmlContent.value);
+      orderId.value = allParamsFromPreviousPage.orderId;
+      price.value = allParamsFromPreviousPage.price;
+
+      document.write(htmlContent.value);
+    });
+  },
+};
+</script>

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

@@ -171,7 +171,7 @@
         color="blue-6"
         label="Pay with Alipay"
         class="q-ma-sm"
-        @click="payWithAlipay"
+        @click="submitOrder('alipay')"
       />
       <q-btn
         icon="lab la-weixin"
@@ -179,7 +179,7 @@
         color="green-6"
         label="Pay with Wechat Pay"
         class="q-ma-sm"
-        @click="payWithWechatPay"
+        @click="submitOrder('wechatpay')"
       />
     </div>
   </q-page>
@@ -191,10 +191,13 @@ import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { api } from "boot/axios";
 import { bookParamStore } from "stores/bookParamStore";
+import { orderPaymentParamStore } from "stores/orderPaymentParamStore";
+
 export default {
   name: "BookPage",
   setup() {
-    const store = bookParamStore();
+    const bookParamStore = bookParamStore();
+    const orderPaymentParamStore = orderPaymentParamStore();
 
     const instance = getCurrentInstance();
     const app = instance.appContext.app;
@@ -219,6 +222,125 @@ export default {
     const peopleform = reactive([]);
     const contactform = ref({});
 
+    function checkPassenger(passenger) {
+      if (
+        gp.$checkEmpty(passenger.birthday) ||
+        gp.$checkEmpty(passenger.gender) ||
+        gp.$checkEmpty(passenger.givenName) ||
+        gp.$checkEmpty(passenger.surName) ||
+        gp.$checkEmpty(passenger.nationality) ||
+        gp.$checkEmpty(passenger.passportExpireDate) ||
+        gp.$checkEmpty(passenger.passportNo) ||
+        gp.$checkEmpty(passenger.surName)
+      ) {
+        return false;
+      }
+      return true;
+    }
+
+    function validatePreOrderParams(finalParams) {
+      console.log("validating finalParams");
+      console.log(finalParams);
+      // must have CNY value valid
+      if (
+        gp.$checkEmpty(finalParams.productInfo["totalPrice"]) ||
+        !Number.isInteger(parseInt(finalParams.productInfo["totalPrice"]))
+      ) {
+        gp.$generalNotify($q, false, "something wrong with price");
+        return false;
+      }
+      // must have full contact info
+      if (
+        gp.$checkEmpty(finalParams.contactInfo["email"]) ||
+        gp.$checkEmpty(finalParams.contactInfo["phone"]) ||
+        gp.$checkEmpty(finalParams.contactInfo["name"]) ||
+        gp.$checkEmpty(finalParams.contactInfo["address"])
+      ) {
+        gp.$generalNotify(
+          $q,
+          false,
+          "Please check your contact info is filled correctly"
+        );
+        return false;
+      }
+      // must have full product info
+      if (gp.$checkEmpty(finalParams.productInfo)) {
+        gp.$generalNotify(
+          $q,
+          false,
+          "Please check your product info is correct"
+        );
+        return false;
+      }
+      // must have full passenger info if not localspecialty type, if no passenger , no check
+      for (var index in finalParams.passengerInfo) {
+        if (!checkPassenger(finalParams.passengerInfo[index])) {
+          gp.$generalNotify(
+            $q,
+            false,
+            "Please check your passenger info has been filled correctly"
+          );
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+    function submitOrder(paymethod) {
+      var finalParams = {};
+      if (LOCALSPECIALTYPRODUCTTYPE != productTypeId.value) {
+        finalParams.passengerInfo = peopleform.value;
+      }
+      finalParams.contactInfo = contactform.value;
+      finalParams.coupon = coupon.value;
+      finalParams.productInfo = bookParamStore.getOrderDetail;
+      console.log("finalParams");
+      console.log(finalParams);
+      if (validatePreOrderParams(finalParams)) {
+        // do submit
+        var params = {};
+        params.meta = JSON.stringify(finalParams);
+        params.skuId = productSkuId.value;
+        params.status = "SUBMITTED";
+        params.price = totalPrice.value;
+        params.payMethod = paymethod;
+        api
+          .post("/api/v1/order", params)
+          .then((res) => {
+            gp.$generalNotify($q, true, "Succeed creating order");
+            if (paymethod == "wechatpay") {
+              alert("not available, will be on line soon");
+              return;
+              // go to we chat pay page
+              // go to alipay page
+              console.log(res.data.data);
+              var param2Pass = {};
+              param2Pass.price = res.data.data.price;
+              param2Pass.orderId = res.data.data.orderId;
+              param2Pass.codeUrl = res.data.data.codeUrl;
+              param2Pass.productName = productName.value;
+
+              orderPaymentParamStore.setPaymentDetail(param2Pass);
+              gp.$goPage("/wechatpay");
+            } else if (paymethod == "alipay") {
+              // go to alipay page
+              console.log(res.data.data);
+              var param2Pass = {};
+              param2Pass.price = res.data.data.price;
+              param2Pass.orderId = res.data.data.orderId;
+              param2Pass.codeUrl = res.data.data.codeUrl;
+
+              orderPaymentParamStore.setPaymentDetail(param2Pass);
+              gp.$goPage("/alipay");
+            }
+          })
+          .catch((err) => {
+            gp.$generalNotify($q, false, "Fail creating order" + err);
+          });
+      }
+    }
+
     function whoami() {
       api
         .get("/api/v1/user/whoami")
@@ -265,7 +387,7 @@ export default {
       whoami();
 
       console.log("allParamsFromPreviousPage");
-      var allParamsFromPreviousPage = store.getOrderDetail;
+      var allParamsFromPreviousPage = bookParamStore.getOrderDetail;
       console.log(allParamsFromPreviousPage);
       productName.value = allParamsFromPreviousPage.productName;
       packageCategory.value = allParamsFromPreviousPage.packageCategory;
@@ -331,6 +453,7 @@ export default {
       contactform,
       coupon,
       totalPrice,
+      submitOrder,
     };
   },
 };

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

@@ -0,0 +1,52 @@
+<template>
+  <q-page class="flex flex-center">
+    Redirecting... <vue-json-pretty :data="route.query" />
+  </q-page>
+</template>
+
+<script>
+import { useQuasar } from "quasar";
+import { onMounted, getCurrentInstance } from "vue";
+import { useRoute } from "vue-router";
+import { api } from "boot/axios";
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+export default {
+  name: "FinishpayPage",
+  components: {
+    VueJsonPretty: VueJsonPretty,
+  },
+  setup() {
+    const instance = getCurrentInstance();
+    const app = instance.appContext.app;
+    const gp = app.config.globalProperties;
+    const $q = useQuasar();
+
+    const route = useRoute();
+    onMounted(() => {
+      if (
+        route.query.out_trade_no != null &&
+        route.query.out_trade_no.length > 0
+      ) {
+        var params = {};
+        params.tradeNo = route.query.trade_no;
+        params.method = route.query.method;
+        api
+          .put("/api/v1/order/succeed/" + route.query.out_trade_no, params)
+          .then((res) => {
+            gp.$generalNotify($q, true, "Succeed finishing pay");
+            var params2pass = {};
+            params2pass.active = 2;
+            gp.$goPage("/my-orders");
+          })
+          .catch((err) => {
+            gp.$generalNotify($q, false, "Fail creating order" + err);
+          });
+      }
+    });
+    return {
+      route,
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+  <q-page> wechatpay </q-page>
+</template>
+
+<script>
+export default {
+  name: "WechatpayPage",
+};
+</script>

hichina-main-front-mobile-first/src/router/routes.js

@@ -106,6 +106,28 @@ const routes = [
     component: () => import("layouts/MainLayout.vue"),
     children: [{ path: "", component: () => import("pages/BookPage.vue") }],
   },
+  {
+    name: "alipay",
+    path: "/alipay",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [{ path: "", component: () => import("pages/AlipayPage.vue") }],
+  },
+  {
+    name: "wechatpay",
+    path: "/wechatpay",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [
+      { path: "", component: () => import("pages/WechatpayPage.vue") },
+    ],
+  },
+  {
+    name: "finishpay",
+    path: "/finishpay",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [
+      { path: "", component: () => import("pages/FinishpayPage.vue") },
+    ],
+  },
   {
     path: "/regsuccess",
     component: () => import("layouts/MainLayout.vue"),

hichina-main-front-mobile-first/src/stores/orderPaymentParamStore.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const orderPaymentParamStore = defineStore("orderPaymentParam", {
+  state: () => ({
+    paymentDetail: {},
+  }),
+
+  getters: {
+    getPaymentDetail: (state) => state.paymentDetail,
+  },
+
+  actions: {
+    setPaymentDetail(val) {
+      this.paymentDetail = val;
+    },
+  },
+});

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

@@ -6065,6 +6065,11 @@ vue-image-crop-upload@^3.0.3:
   dependencies:
     babel-runtime "^6.11.6"
 
+vue-json-pretty@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-2.2.4.tgz#4c82fa78aeb987460c727c3b31e45a58f58d9c95"
+  integrity sha512-JX80b3QDrspcH43C53CdtYeq/froApQGSV5y43bEMWFj2LGOxB96aH1VmvrFA21nD1WTP6nwfFMQqGXuS4jyFQ==
+
 vue-loader@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.1.tgz#c0ee8875e0610a0c2d13ba9b4d50a9c8442e7a3a"