From 29b69d5138782090e1db42353c187c76a9341569 Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Thu, 28 Sep 2023 03:30:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E9=A6=96=E9=A0=81=E5=BB=A3?=
 =?UTF-8?q?=E5=91=8A=E5=BD=88=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development             |   2 +-
 src/main.js                  |  20 +-
 src/utils/liff.js            |  11 +
 src/views/Home/index.vue     | 324 +++++++++++----------
 src/views/Register/index.vue | 525 ++++++++++++++++++-----------------
 5 files changed, 473 insertions(+), 409 deletions(-)
 create mode 100644 src/utils/liff.js

diff --git a/.env.development b/.env.development
index d25b245..ab9b223 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ VUE_ENV = stage
 
 VUE_APP_BASE_URL = https://utel.zltest.com.tw 
 
-VUE_APP_LINE_LIFF_ID = 1656948609-xMp7dWAz
+VUE_APP_LINE_LIFF_ID = 1656907652-p38ddKzQ
 
 VUE_APP_SEND_URL = https://liff.line.me/1656948609-BYr8Nynp
 
diff --git a/src/main.js b/src/main.js
index 634cc1d..2a231c4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 
+import liff from '@line/liff';
 import { vant } from "@/plugins/vant";
 import { VueClipboard } from "@soerenmartius/vue3-clipboard";
 
@@ -10,8 +11,19 @@ import "@/assets/css/normalize.css";
 import "@/assets/css/common.less";
 // import './registerServiceWorker'
 
-const vue = createApp(App);
+liff.init({
+    liffId: process.env.VUE_APP_LINE_LIFF_ID
+  }).then(() => {
 
-vant(vue);
-vue.use(VueClipboard);
-vue.use(store).use(router).mount("#app");
+    window.liff = liff;
+    
+    const vue = createApp(App);
+
+    // 將LIFF實例提供給應用
+    vant(vue);
+    vue.use(VueClipboard);
+    vue.use(store).use(router).mount("#app");
+  
+  }).catch((error) => {
+    console.error('初始化 LIFF 時出錯:', error);
+  });
diff --git a/src/utils/liff.js b/src/utils/liff.js
new file mode 100644
index 0000000..ec10cb1
--- /dev/null
+++ b/src/utils/liff.js
@@ -0,0 +1,11 @@
+import liff from "@line/liff";
+
+async function initLiff(app) {
+    await liff.init({ liffId: process.env.VUE_APP_LINE_LIFF_ID });
+    if (!liff.isLoggedIn()){
+        liff.login({ redirectUri: window.location.href });
+    }
+    app.provide('liff', liff);
+}
+
+export default initLiff;
\ No newline at end of file
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 5942881..09c4a02 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,151 +1,10 @@
-<template>
-  <div class="home" v-cloak>
-    <div class="my-account">
-      <div class="account-bg set_up">
-        <img src="@/assets/images/topbg.png" />
-      </div>
-      <div class="avatar_box set_up">
-        <img class="avater" :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
-      </div>
-      <div class="user-info">
-        <p class="uname set_up">UTel電子名片系統</p>
-        <a href="javascript:;">
-          <p class="umoney phone">歡迎來到會員中心</p>
-        </a>
-      </div>
-      <div class="set" @click="handleLogout">
-        <a href="javascript:void(0)">登出</a>
-      </div>
-    </div>
-    <div class="recommend">
-      <ul>
-        <li @click="router.push('/member')">
-          <p>修改資料</p>
-          <span>修改名片資料</span>
-        </li>
-        <li @click="goCardEdit">
-          <p>商務卡片</p>
-          <span>設計專屬名片</span>
-        </li>
-        <li @click="router.push('/shop')">
-          <p>立即購買</p>
-          <span>付費開通方案</span>
-        </li>
-        <li @click="handleShowNfc">
-          <p>展示二維碼</p>
-          <span>提供好友掃描</span>
-        </li>
-      </ul>
-    </div>
-    <dl class="dl02" v-if="userInfo">
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-01.png" />
-          <div class="left">建立日期</div>
-          <div class="right">{{ userInfo.create_time }}</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-02.png" />
-          <div class="left">會員編號</div>
-          <div class="right">{{ userInfo.user_id }}
-            <span class="cp-btn" @click="doCopyUid">複製</span>
-          </div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-02.png" />
-          <div class="left">公司名稱</div>
-          <div class="right">{{ userInfo.company }}</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-03.png" />
-          <div class="left">姓名</div>
-          <div class="right">{{ userInfo.real_name }}</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-04.png" />
-          <div class="left">會員等級</div>
-          <div class="right">{{ userInfo.level_name }}</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-05.png" />
-          <div class="left">使用期限</div>
-          <div class="right">{{ overdue }}</div>
-
-          <!-- <div class="right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
-          <div class="right input-sn" @click="router.push('/shop/inputsn')" v-else>已到期,<br/>點此輸入購買序號</div> -->
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-06.png" />
-          <div class="left">名片連結</div>
-          <div class="right" style="color: #fe6867" @click="doCopy">
-            點擊複製您的連結
-          </div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;">
-        <div class="menu" @click="$router.push('/auth/auth')">
-          <img class="titleImg" src="@/assets/images/icon-04.png" />
-          <div class="left">授權商務卡片編輯</div>
-          <div class="right">授權</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;" @click="$router.push('/auth/getauth')">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-04.png" />
-          <div class="left">代客編輯商務卡片</div>
-          <div class="right">編輯</div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-      <a href="javascript:;" v-if="userInfo.uniqid">
-        <div class="menu">
-          <img class="titleImg" src="@/assets/images/icon-06.png" />
-          <div class="left">綁定UTel淘金購會員</div>
-          <div class="right" style="color: #fe6867" @click="bindTggo">
-            點擊後前往綁定
-          </div>
-          <div style="clear: both"></div>
-        </div>
-      </a>
-    </dl>
-    <Footer />
-    <van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
-      :show-confirm-button="false">
-      <div class="qrcode">
-        <qrcode-vue :value="userInfo.nfcurl" size="200" level="M" />
-      </div>
-    </van-dialog>
-  </div>
-</template>
-
 <script setup>
-import liff from "@line/liff"
 import moment from 'moment'
 import QrcodeVue from 'qrcode.vue'
-
+import { useCountDown } from '@vant/use';
 import { toClipboard } from '@soerenmartius/vue3-clipboard'
 
-import { ref, computed, onBeforeMount, nextTick } from "vue";
+import { ref, computed, onBeforeMount, nextTick, inject } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
@@ -156,13 +15,12 @@ import Footer from '@/components/Footer'
 
 import { login, bindCard } from '@/api'
 
-
 const router = useRouter()
 const route = useRoute()
 const store = useStore()
 
+const popShow = ref(true)
 const showShare = ref(false)
-
 const showNfcQrcode = ref(false)
 
 const imageUrl = ref(process.env.VUE_APP_IMAGE_URL)
@@ -176,9 +34,14 @@ const userLevel = {
 
 const is_due = ref(false)
 
+// 使用useCountDown做倒數計時
+const countDown = useCountDown({time: 10 * 1000});
+const current = countDown.current;
+countDown.start();
+
 onBeforeMount(async () => {
+  const liff = window.liff;
   try {
-    await liff.init({ liffId: process.env.VUE_APP_LINE_LIFF_ID });
     if (!liff.isLoggedIn())
       liff.login({ redirectUri: window.location.href });
   } catch (err) {
@@ -187,13 +50,11 @@ onBeforeMount(async () => {
     router.push('/login')
   }
 
-
   if (!sessionStorage.getItem('token')) {
     const profile = await liff.getProfile()
 
     const id_token = liff.getIDToken()
 
-
     let loginRes = await login({ line_id: profile.userId, token: id_token })
 
     if (loginRes.code === 200) {
@@ -338,6 +199,155 @@ const handleLogout = () => {
 
 </script>
 
+<template>
+  <div class="home" v-cloak>
+    <div class="my-account">
+      <div class="account-bg set_up">
+        <img src="@/assets/images/topbg.png" />
+      </div>
+      <div class="avatar_box set_up">
+        <img class="avater" :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
+      </div>
+      <div class="user-info">
+        <p class="uname set_up">UTel電子名片系統</p>
+        <a href="javascript:;">
+          <p class="umoney phone">歡迎來到會員中心</p>
+        </a>
+      </div>
+      <div class="set" @click="handleLogout">
+        <a href="javascript:void(0)">登出</a>
+      </div>
+    </div>
+    <div class="recommend">
+      <ul>
+        <li @click="router.push('/member')">
+          <p>修改資料</p>
+          <span>修改名片資料</span>
+        </li>
+        <li @click="goCardEdit">
+          <p>商務卡片</p>
+          <span>設計專屬名片</span>
+        </li>
+        <li @click="router.push('/shop')">
+          <p>立即購買</p>
+          <span>付費開通方案</span>
+        </li>
+        <li @click="handleShowNfc">
+          <p>展示二維碼</p>
+          <span>提供好友掃描</span>
+        </li>
+      </ul>
+    </div>
+    <dl class="dl02" v-if="userInfo">
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-01.png" />
+          <div class="left">建立日期</div>
+          <div class="right">{{ userInfo.create_time }}</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-02.png" />
+          <div class="left">會員編號</div>
+          <div class="right">{{ userInfo.user_id }}
+            <span class="cp-btn" @click="doCopyUid">複製</span>
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-02.png" />
+          <div class="left">公司名稱</div>
+          <div class="right">{{ userInfo.company }}</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-03.png" />
+          <div class="left">姓名</div>
+          <div class="right">{{ userInfo.real_name }}</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-04.png" />
+          <div class="left">會員等級</div>
+          <div class="right">{{ userInfo.level_name }}</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-05.png" />
+          <div class="left">使用期限</div>
+          <div class="right">{{ overdue }}</div>
+
+          <!-- <div class="right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
+          <div class="right input-sn" @click="router.push('/shop/inputsn')" v-else>已到期,<br/>點此輸入購買序號</div> -->
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-06.png" />
+          <div class="left">名片連結</div>
+          <div class="right" style="color: #fe6867" @click="doCopy">
+            點擊複製您的連結
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;">
+        <div class="menu" @click="$router.push('/auth/auth')">
+          <img class="titleImg" src="@/assets/images/icon-04.png" />
+          <div class="left">授權商務卡片編輯</div>
+          <div class="right">授權</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;" @click="$router.push('/auth/getauth')">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-04.png" />
+          <div class="left">代客編輯商務卡片</div>
+          <div class="right">編輯</div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+      <a href="javascript:;" v-if="userInfo.uniqid">
+        <div class="menu">
+          <img class="titleImg" src="@/assets/images/icon-06.png" />
+          <div class="left">綁定UTel淘金購會員</div>
+          <div class="right" style="color: #fe6867" @click="bindTggo">
+            點擊後前往綁定
+          </div>
+          <div style="clear: both"></div>
+        </div>
+      </a>
+    </dl>
+    <Footer />
+    <van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
+      :show-confirm-button="false">
+      <div class="qrcode">
+        <qrcode-vue :value="userInfo.nfcurl" :size="200" level="M" />
+      </div>
+    </van-dialog>
+    <van-overlay :show="popShow" z-index="100" :style="{background:'rgba(0, 0, 0, .85)'}">      
+      <div class="wrapper" @click.stop>
+        <div class="block"> 
+          <span class="van-icon van-icon-cross" @click="popShow = false" v-show="current.seconds == 0"></span>
+          {{ current.seconds }} 秒 
+        </div>
+        <iframe width="100%" style="aspect-ratio: 16/9;" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
 <style src="@/assets/css/style.css"></style>
 <style lang="less" scoped>
 [ v-cloak] {
@@ -415,4 +425,22 @@ const handleLogout = () => {
   padding: 2px;
   color: rgb(254, 104, 103);
 }
+
+.wrapper{
+  display: flex;
+  align-items: center;
+  height: 100%;
+  .block{
+    position:absolute;
+    color:#ffffff;
+    border-radius:50%;
+    top:10px;
+    right:10px;
+    margin-left:auto;
+    .van-icon{
+      cursor: pointer;
+    }
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/views/Register/index.vue b/src/views/Register/index.vue
index 72c45fb..8ee72f5 100644
--- a/src/views/Register/index.vue
+++ b/src/views/Register/index.vue
@@ -1,330 +1,343 @@
 <template>
   <div class="reg-container">
-<van-nav-bar :title="title" />
-<van-form @submit="onSubmit">
-  <van-cell-group inset>
-    <van-field
-      v-model="form.real_name"
-      label="姓名"
-      name="pattern"
-      required
-      placeholder="請輸入您的姓名"
-     :rules="[{ required: true, message: '姓名為必填' }]"
-    />
-    <van-field
-      v-model="form.company"
-      label="公司名稱"
-      name=""
-      required
-      placeholder="請輸入您的公司名稱"
-     :rules="[{ required: true, message: '公司名稱必填' }]"
-    />
-    <van-field
-      v-model="form.title"
-      label="職稱"
-      name=""
-      placeholder="請輸入您的職稱"
-    />
-    <van-field
-      v-model="form.phone"
-      label="手機"
-      name=""
-      required
-      placeholder="Ex. 0900000001 不要有空格"
-     :rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
-    />
-    <van-field
-      v-model="form.tel"
-      label="市話"
-      name=""
-      placeholder="請輸入您的市話"
-    />
-    <van-field
-      v-model="form.email"
-      label="Email"
-      name=""
-      required
-      placeholder="請輸入您的Email"
-     :rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
-    />
-    <van-field
-      v-model="form.address"
-      label="住址"
-      name=""
-      placeholder="請輸入您的地址"
-    />
-    <van-field
-      v-model="form.url"
-      label="網址"
-      name=""
-      placeholder="請輸入您的網址"
-      :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"      
-    />
-    <van-field
-      v-model="form.line"
-      label="Line"
-      name=""
-      placeholder="請輸入您的Line ID"
-    />
-    <van-field
-      v-model="form.facebook"
-      label="Facebook"
-      name=""
-      placeholder="請輸入您的臉書連結"
-    />
-    <van-field
-      v-model="form.ig"
-      label="IG"
-      name=""
-      placeholder="請輸入您的IG ID"
-    />
-    <van-field
-      v-model="form.youtube"
-      label="YouTube"
-      name=""
-      placeholder="請輸入您的Youtube連結"
-    />
-    <van-uploader
-      :after-read="afterRead"
-      :max-count="1"
-      name="averter"
-      >
-    <div class="upload-main">
-          <img class="upload-img" :src="form.avatar" alt="" v-if="form.avatar">
-          <img class="upload-img" src="@/assets/images/upload.jpg" alt="" v-else>
-          <p>上傳圖片,預設為Line頭像</p>
-    </div>    
-    </van-uploader>
-  </van-cell-group>
-  <div style="margin: 16px;">
-    <van-button round block type="primary" native-type="submit">
-      送出註冊
-    </van-button>
-    <br/>
-    <van-button round block type="default" @click="leaveReg">
-      以後在說
-    </van-button>
-  </div>
-</van-form>
+    <van-nav-bar :title="title" />
+    <van-form @submit="onSubmit">
+      <van-cell-group inset>
+        <van-field
+          v-model="form.real_name"
+          label="姓名"
+          name="pattern"
+          required
+          placeholder="請輸入您的姓名"
+          :rules="[{ required: true, message: '姓名為必填' }]"
+        />
+        <van-field
+          v-model="form.company"
+          label="公司名稱"
+          name=""
+          required
+          placeholder="請輸入您的公司名稱"
+          :rules="[{ required: true, message: '公司名稱必填' }]"
+        />
+        <van-field
+          v-model="form.title"
+          label="職稱"
+          name=""
+          placeholder="請輸入您的職稱"
+        />
+        <van-field
+          v-model="form.phone"
+          label="手機"
+          name=""
+          required
+          placeholder="Ex. 0900000001 不要有空格"
+          :rules="[
+            { required: true, message: '手機號必填' },
+            { pattern: /\d{10}/, message: '手機號格式錯誤' },
+          ]"
+        />
+        <van-field
+          v-model="form.tel"
+          label="市話"
+          name=""
+          placeholder="請輸入您的市話"
+        />
+        <van-field
+          v-model="form.email"
+          label="Email"
+          name=""
+          required
+          placeholder="請輸入您的Email"
+          :rules="[
+            { required: true, message: 'Email必填' },
+            {
+              pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/,
+              message: 'Email格式錯誤',
+            },
+          ]"
+        />
+        <van-field
+          v-model="form.address"
+          label="住址"
+          name=""
+          placeholder="請輸入您的地址"
+        />
+        <van-field
+          v-model="form.url"
+          label="網址"
+          name=""
+          placeholder="請輸入您的網址"
+          :rules="[
+            { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
+          ]"
+        />
+        <van-field
+          v-model="form.line"
+          label="Line"
+          name=""
+          placeholder="請輸入您的Line ID"
+        />
+        <van-field
+          v-model="form.facebook"
+          label="Facebook"
+          name=""
+          placeholder="請輸入您的臉書連結"
+        />
+        <van-field
+          v-model="form.ig"
+          label="IG"
+          name=""
+          placeholder="請輸入您的IG ID"
+        />
+        <van-field
+          v-model="form.youtube"
+          label="YouTube"
+          name=""
+          placeholder="請輸入您的Youtube連結"
+        />
+        <van-uploader :after-read="afterRead" :max-count="1" name="averter">
+          <div class="upload-main">
+            <img
+              class="upload-img"
+              :src="form.avatar"
+              alt=""
+              v-if="form.avatar"
+            />
+            <img
+              class="upload-img"
+              src="@/assets/images/upload.jpg"
+              alt=""
+              v-else
+            />
+            <p>上傳圖片,預設為Line頭像</p>
+          </div>
+        </van-uploader>
+      </van-cell-group>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">
+          送出註冊
+        </van-button>
+        <br />
+        <van-button round block type="default" @click="leaveReg">
+          以後在說
+        </van-button>
+      </div>
+    </van-form>
     <van-overlay :show="crop.show" @click="crop.show = false" />
     <div class="cropper-section" v-if="crop.show">
       <div class="crop-area">
-            <cropper
-                class="cropper"
-                ref="myCrop"
-                :src="crop.img"
-                :stencil-props="{
-                    aspectRatio: 1/1
-                }"
-                :auto-zoom="true"
-            />          
+        <cropper
+          class="cropper"
+          ref="myCrop"
+          :src="crop.img"
+          :stencil-props="{
+            aspectRatio: 1 / 1,
+          }"
+          :auto-zoom="true"
+        />
       </div>
       <div class="crop-btn">
-        <van-button type="primary" size="small" plain @click="onClose">取消</van-button>
-        <van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>    
+        <van-button type="primary" size="small" plain @click="onClose"
+          >取消</van-button
+        >
+        <van-button type="success" size="small" plain @click="onCrop"
+          >剪裁</van-button
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import axios from 'axios'
+import axios from "axios";
 
+import { ref, inject } from "vue";
 
-import { ref } from 'vue'
+import store from "@/store";
+import router from "@/router";
+import { useRoute } from "vue-router";
 
-import store from '@/store'
-import router from '@/router'
-import { useRoute } from 'vue-router'
+import { Toast } from "vant";
 
-import {Toast} from 'vant'
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
 
-import { Cropper } from 'vue-advanced-cropper';
-import 'vue-advanced-cropper/dist/style.css';
-
-import { register , checkLineId } from '@/api'
+import { register, checkLineId } from "@/api";
 
 const URL = window.URL || window.webkitURL;
 
-const route = useRoute()
+const route = useRoute();
 
 const form = ref({
   verify: route.query.verify || null,
-  aid: route.query.aid || undefined
-})
+  aid: route.query.aid || undefined,
+});
 
-const title = ref('註冊成為會員')
+const title = ref("註冊成為會員");
 
-const myCrop = ref(null)
+const myCrop = ref(null);
 
 const crop = ref({
   show: false,
   img: null,
-})
-
+});
 
-if(route.query.verify){
-  title.value = '會員開通'
+if (route.query.verify) {
+  title.value = "會員開通";
 }
 
 const validatorUrl = (val) => {
-  if(val.length>0){
-    return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val)
-  }else{
-    return true
+  if (val.length > 0) {
+    return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val);
+  } else {
+    return true;
+  }
+};
+
+const leaveReg = () => {
+  window.location.replace("/error.html");
+};
+
+const onCrop = () => {
+  const { canvas } = myCrop.value.getResult();
+  if (canvas) {
+    const imgFile = new FormData();
+    canvas.toBlob(async (blob) => {
+      let ufile = new File([blob], "image.jpg");
+      imgFile.append("user_id", form.value.user_id);
+      imgFile.append("fileType", "IMAGE");
+      imgFile.append("file", ufile);
+
+      crop.value.show = false;
+
+      Toast.loading({
+        duration: 0,
+        message: "圖片上傳中...",
+        forbidClick: true,
+      });
+
+      let res = await axios.post(
+        `${process.env.VUE_APP_API_URL}/user/uploadAvatar`,
+        imgFile,
+        {}
+      );
+
+      if (res.data.code == 200) {
+        form.value.avatar = res.data.data;
+        Toast.success("上傳成功");
+      } else {
+        Toast.fail("上傳失敗");
+      }
+    }, "image/jpeg");
   }
-}
 
+  return;
+};
 
-const leaveReg = ()=>{
-  window.location.replace('/error.html')
-}
+const onClose = () => {
+  crop.value.show = false;
+};
 
+const afterRead = async (file, name) => {
+  crop.value.show = true;
 
-        const onCrop = () => {
-          const { canvas } = myCrop.value.getResult();
-          if (canvas) {
-            const imgFile = new FormData();
-            canvas.toBlob(async (blob) => {
-              let ufile  = new File([blob], "image.jpg");
-              imgFile.append("user_id", form.value.user_id)
-              imgFile.append("fileType", "IMAGE")
-              imgFile.append('file', ufile)
-
-              crop.value.show = false
-
-              Toast.loading({
-                duration: 0,
-                message: '圖片上傳中...',
-                forbidClick: true,
-              });
-
-              let res = await axios.post(
-                `${process.env.VUE_APP_API_URL}/user/uploadAvatar`,
-                imgFile,
-                {
-                }
-              )
-
-              if (res.data.code == 200) {
-                  form.value.avatar =  res.data.data
-                  Toast.success('上傳成功');
-              }else{
-                  Toast.fail('上傳失敗');                
-              }
-
-            }, 'image/jpeg');
-          }          
-            
-          return
-		    }
-
-        const onClose = () =>{
-          crop.value.show = false
-        }
-
-const afterRead = async(file, name) => {
-  crop.value.show = true
-
-  const ofile = file.file
+  const ofile = file.file;
 
   crop.value.img = URL.createObjectURL(ofile);
-  return
-}
-
+  return;
+};
 
 const onSubmit = async () => {
-    try{
-      if(!liff){
-        console.log('liff is undefined')
-        Toast('系統錯誤,請重新登入')
-        router.push('/login')
-      }
-    }catch(e){
-        console.log(e.message)
-        Toast('系統錯誤,請重新登入')
-        router.push('/login')
-
-    }
-
-    const profile = await liff.getProfile()
+  const liff = window.liff;
+  try {
+    if (!liff.isLoggedIn()) liff.login({ redirectUri: window.location.href });
+  } catch (err) {
+    console.log(`liff.state init error ${err}`);
+    Toast("登入失敗。請聯絡管理員");
+    router.push("/login");
+  }
 
-    let checkRes = await checkLineId(profile.userId)
-    
-    if(checkRes.code!==200){
-      Toast('您已是我們的會員，請直接登入')
-      router.push('/login')
-    }
+  const profile = await liff.getProfile();
 
-    const id_token = liff.getIDToken()
-            
-    Toast.loading({
-      duration: 0,
-      message: '資料傳送中...',
-      forbidClick: true,
-    });
+  let checkRes = await checkLineId(profile.userId);
 
-    let regRes = await register({line_id: profile.userId, token: id_token , ...form.value})
+  if (checkRes.code !== 200) {
+    Toast("您已是我們的會員，請直接登入");
+    router.push("/login");
+  }
 
-    if(regRes.code === 500){
-      if (liff.isLoggedIn()) {
-        liff.logout();
-      }
-      Toast('line 登入已過期')
-      // return router.push('/login')
-    }else if(regRes.code === 200){
-      Toast('註冊成功')
-      sessionStorage.setItem('token',regRes.data.token)
-      sessionStorage.setItem('uid',regRes.data.uid)
-      return router.push('/')
-    }else{
-      Toast('註冊失敗')
-      // return router.push('/login')
+  const id_token = liff.getIDToken();
+
+  Toast.loading({
+    duration: 0,
+    message: "資料傳送中...",
+    forbidClick: true,
+  });
+
+  let regRes = await register({
+    line_id: profile.userId,
+    line_name: profile.displayName,
+    line_picture: profile.pictureUrl,
+    token: id_token,
+    ...form.value,
+  });
+
+  if (regRes.code === 500) {
+    if (liff.isLoggedIn()) {
+      liff.logout();
     }
-}
-
+    Toast("line 登入已過期");
+    return;
+  } else if (regRes.code === 200) {
+    Toast("註冊成功");
+    sessionStorage.setItem("token", regRes.data.token);
+    sessionStorage.setItem("uid", regRes.data.uid);
+    return router.push("/");
+  } else {
+    Toast("註冊失敗");
+    return;
+  }
+};
 </script>
 
-
-
 <style lang="less" scoped>
-.container{
-    padding-bottom: 30px;
+.container {
+  padding-bottom: 30px;
 }
-.title{
-    font-size: 20px;
-    text-align: center;
+.title {
+  font-size: 20px;
+  text-align: center;
 }
 
-.upload-img{
+.upload-img {
   width: 80px;
 }
 
 .cropper {
-	height: 300px;
-	// width: 300px;
-	background: #DDD;
+  height: 300px;
+  // width: 300px;
+  background: #ddd;
 }
 
-.cropper-section{
+.cropper-section {
   margin: 0 auto;
   position: fixed;
   text-align: center;
   top: 50px;
   // left: 0;
-	height: 350px;
-	width: 100%;
+  height: 350px;
+  width: 100%;
   max-width: 500px;
-  background: #DDD;
+  background: #ddd;
   z-index: 8888;
-  .crop-area{
+  .crop-area {
     margin: 5 auto;
     width: 100%;
     height: 330px;
   }
-  .crop-btn{
+  .crop-btn {
     background-color: #666;
     text-align: center;
   }
-}  
-</style>
\ No newline at end of file
+}
+</style>