From cf10b86c77def703f054c9665bb7e64d57a72855 Mon Sep 17 00:00:00 2001
From: Wayne Hsu <wwayne.hsu@gmail.com>
Date: Wed, 31 May 2023 07:26:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5ws=20=E6=AA=A2=E6=9F=A5?=
 =?UTF-8?q?=E5=84=AA=E6=83=A0=E7=A2=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development            |  2 ++
 .env.h888                   |  2 ++
 .env.slash                  |  4 ++-
 src/pages/Cart/Checkout.vue | 64 +++++++++++++++++++++++++++++++++----
 4 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/.env.development b/.env.development
index e6ab711..6290185 100644
--- a/.env.development
+++ b/.env.development
@@ -9,3 +9,5 @@ VITE_APP_SSO_URL = 'https://sso.h888.fun/api/v1'
 VITE_APP_LINE_CLIENT_ID = '1661025693'
 
 VITE_APP_LINE_CLIENT_SECRET = '914cc067cb11ffbd47640de8f3f4a00a'
+
+VITE_APP_WS_URL = 'ws://108.61.223.162:9501'
\ No newline at end of file
diff --git a/.env.h888 b/.env.h888
index 66a4fec..200075d 100644
--- a/.env.h888
+++ b/.env.h888
@@ -7,3 +7,5 @@ VITE_APP_SSO_URL = 'https://sso.h888.fun/api/v1'
 VITE_APP_LINE_CLIENT_ID = '1657876696'
 
 VITE_APP_LINE_CLIENT_SECRET = '2a7930d6143a00ff421812b942cde200'
+
+VITE_APP_WS_URL = 'ws://108.61.223.162:9501'
\ No newline at end of file
diff --git a/.env.slash b/.env.slash
index a01540d..45b8252 100644
--- a/.env.slash
+++ b/.env.slash
@@ -8,4 +8,6 @@ VITE_APP_SSO_URL = 'https://sso.slash1000.com/api/v1'
 
 VITE_APP_LINE_CLIENT_ID = '1661025693'
 
-VITE_APP_LINE_CLIENT_SECRET = '914cc067cb11ffbd47640de8f3f4a00a'
\ No newline at end of file
+VITE_APP_LINE_CLIENT_SECRET = '914cc067cb11ffbd47640de8f3f4a00a'
+
+VITE_APP_WS_URL = 'ws://167.179.106.36:9501'
\ No newline at end of file
diff --git a/src/pages/Cart/Checkout.vue b/src/pages/Cart/Checkout.vue
index 5b08c8a..0aa2842 100644
--- a/src/pages/Cart/Checkout.vue
+++ b/src/pages/Cart/Checkout.vue
@@ -208,8 +208,8 @@
                             </div>
                             <div class="bonus-desc">
                                 {{ bonus.name }}
-                                <span v-if="bonus.number > 0"
-                                    >數量: {{ bonus.number }} 剩下: {{ bonus.remain }} 張</span
+                                <span v-if="bonus.number > 1"
+                                    >數量: {{ bonus.number }} 剩下: <span v-html="remainDesc"></span> 張</span
                                 >
                             </div>
                         </div>
@@ -268,7 +268,7 @@
 
 <script setup>
 import _ from "lodash";
-import { ref, reactive, onMounted, computed, watch } from "vue";
+import { ref, reactive, onMounted,onUnmounted, computed, watch } from "vue";
 import { useCartStore } from "@/store/Cart";
 import { useOrderStore } from "@/store/Order";
 import { storeToRefs } from "pinia";
@@ -290,6 +290,31 @@ import mastericon from "/src/assets/icons/png/mastercard1.png";
 
 const img_url = import.meta.env.VITE_APP_IMG_URL
 
+// 建構websocket
+const ws = new WebSocket(import.meta.env.VITE_APP_WS_URL);
+
+ws.onopen = function(evt) { 
+  console.log("Connection open ..."); 
+};
+
+ws.onmessage = function(evt) {
+    console.log( "Received Message: " + evt.data);
+    let data = JSON.parse(evt.data);
+    if(data.action === 'use'){
+        console.log('use')
+        bonus.remain -= 1;
+        if(bonus.remain === 0){
+            showToast('優惠券已被搶完');
+            Object.assign(bonus, bonusInit);
+        }
+    }
+};
+
+ws.onclose = function(evt) {
+  console.log("Connection closed.");
+};
+
+
 const cartStore = useCartStore();
 const orderStore = useOrderStore();
 
@@ -328,12 +353,14 @@ onMounted(async () => {
     }
 });
 
-const bonus = reactive({
+const bonusInit = {
     name: "沒有優惠劵",
     sn: "",
     number: 0,
     remain: 0,
-});
+}
+
+const bonus = reactive({...bonusInit});
 //檢查優惠代碼
 
 const handleCheckBonusSn = async () => {
@@ -351,11 +378,25 @@ const handleCheckBonusSn = async () => {
         } else {
             orderStore.discount = res.data;
         }
+
+        if(bonus.number > 1){
+            ws.send(JSON.stringify({
+                "action":"init",
+                "payload":bonus.sn,
+            }));
+        }
     } else {
         showToast(res.data);
     }
 };
 
+const remainDesc = computed(() => {
+    if (bonus.remain > 3) {
+        return bonus.remain;
+    } else {
+        return '<font color=red>'+bonus.remain+'</font>';
+    }
+});
 //將購物車商品資料轉換成訂單商品資料
 const cartToOrder = () => {
     if (cartStore.cartItems.length === 0) {
@@ -385,7 +426,6 @@ const selectShipping = async (value) => {
     switch (value.shipping_code) {
         case "shipping":
             let resAddr = await getUserDefaultAddress();
-            console.log(resAddr.data);
 
             if (resAddr.code === 200) {
                 orderStore.shipping = {
@@ -501,6 +541,14 @@ const handleFinish = async () => {
         let res = await addOrder(order);
 
         if (res.code === 200) {
+            if(bonus.sn.length > 0){
+                ws.send(JSON.stringify({
+                    "action":"use",
+                    "payload":bonus.sn,
+                }));
+
+                ws.close()
+            }
             // 清空購物車
             cartStore.clearCart();
             orderStore.$reset();
@@ -532,6 +580,10 @@ const detail = computed(() => {
     let total_amount = orderStore.total_amount;
     return { sum_amount, discount, shipping_fee, pay_fee, total_amount };
 });
+
+onUnmounted(()=>{
+    ws.close()
+})
 </script>
 
 <style lang="less" scoped>