wayne
/
utel_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

加入首頁廣告彈窗

Browse Source
dev
Wayne 3 years ago
parent f1bda3fd50
commit 29b69d5138
5 changed files with 473 additions and 409 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -4,7 +4,7 @@ VUE_ENV = stage
VUE_APP_BASE_URL = https://utel.zltest.com.tw 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 VUE_APP_SEND_URL = https://liff.line.me/1656948609-BYr8Nynp

20
src/main.js
Unescape View File

@ -3,6 +3,7 @@ import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import liff from '@line/liff';
import { vant } from "@/plugins/vant"; import { vant } from "@/plugins/vant";
import { VueClipboard } from "@soerenmartius/vue3-clipboard"; import { VueClipboard } from "@soerenmartius/vue3-clipboard";
@ -10,8 +11,19 @@ import "@/assets/css/normalize.css";
import "@/assets/css/common.less"; import "@/assets/css/common.less";
// import './registerServiceWorker' // import './registerServiceWorker'
const vue = createApp(App); liff.init({
liffId: process.env.VUE_APP_LINE_LIFF_ID
}).then(() => {
vant(vue); window.liff = liff;
vue.use(VueClipboard);
vue.use(store).use(router).mount("#app"); const vue = createApp(App);
// 將LIFF實例提供給應用
vant(vue);
vue.use(VueClipboard);
vue.use(store).use(router).mount("#app");
}).catch((error) => {
console.error('初始化 LIFF 時出錯:', error);
});

11
src/utils/liff.js
Unescape View File

@ -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;

324
src/views/Home/index.vue
Unescape View File

@ -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> <script setup>
import liff from "@line/liff"
import moment from 'moment' import moment from 'moment'
import QrcodeVue from 'qrcode.vue' import QrcodeVue from 'qrcode.vue'
import { useCountDown } from '@vant/use';
import { toClipboard } from '@soerenmartius/vue3-clipboard' 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 { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
@ -156,13 +15,12 @@ import Footer from '@/components/Footer'
import { login, bindCard } from '@/api' import { login, bindCard } from '@/api'
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const store = useStore() const store = useStore()
const popShow = ref(true)
const showShare = ref(false) const showShare = ref(false)
const showNfcQrcode = ref(false) const showNfcQrcode = ref(false)
const imageUrl = ref(process.env.VUE_APP_IMAGE_URL) const imageUrl = ref(process.env.VUE_APP_IMAGE_URL)
@ -176,9 +34,14 @@ const userLevel = {
const is_due = ref(false) const is_due = ref(false)
// 使用useCountDown做倒數計時
const countDown = useCountDown({time: 10 * 1000});
const current = countDown.current;
countDown.start();
onBeforeMount(async () => { onBeforeMount(async () => {
const liff = window.liff;
try { try {
await liff.init({ liffId: process.env.VUE_APP_LINE_LIFF_ID });
if (!liff.isLoggedIn()) if (!liff.isLoggedIn())
liff.login({ redirectUri: window.location.href }); liff.login({ redirectUri: window.location.href });
} catch (err) { } catch (err) {
@ -187,13 +50,11 @@ onBeforeMount(async () => {
router.push('/login') router.push('/login')
} }
if (!sessionStorage.getItem('token')) { if (!sessionStorage.getItem('token')) {
const profile = await liff.getProfile() const profile = await liff.getProfile()
const id_token = liff.getIDToken() const id_token = liff.getIDToken()
let loginRes = await login({ line_id: profile.userId, token: id_token }) let loginRes = await login({ line_id: profile.userId, token: id_token })
if (loginRes.code === 200) { if (loginRes.code === 200) {
@ -338,6 +199,155 @@ const handleLogout = () => {
</script> </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 src="@/assets/css/style.css"></style>
<style lang="less" scoped> <style lang="less" scoped>
[ v-cloak] { [ v-cloak] {
@ -415,4 +425,22 @@ const handleLogout = () => {
padding: 2px; padding: 2px;
color: rgb(254, 104, 103); 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> </style>

521
src/views/Register/index.vue
Unescape View File

@ -1,328 +1,341 @@
<template> <template>
<div class="reg-container"> <div class="reg-container">
<van-nav-bar :title="title" /> <van-nav-bar :title="title" />
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-cell-group inset> <van-cell-group inset>
<van-field <van-field
v-model="form.real_name" v-model="form.real_name"
label="姓名" label="姓名"
name="pattern" name="pattern"
required required
placeholder="請輸入您的姓名" placeholder="請輸入您的姓名"
:rules="[{ required: true, message: '姓名為必填' }]" :rules="[{ required: true, message: '姓名為必填' }]"
/> />
<van-field <van-field
v-model="form.company" v-model="form.company"
label="公司名稱" label="公司名稱"
name="" name=""
required required
placeholder="請輸入您的公司名稱" placeholder="請輸入您的公司名稱"
:rules="[{ required: true, message: '公司名稱必填' }]" :rules="[{ required: true, message: '公司名稱必填' }]"
/> />
<van-field <van-field
v-model="form.title" v-model="form.title"
label="職稱" label="職稱"
name="" name=""
placeholder="請輸入您的職稱" placeholder="請輸入您的職稱"
/> />
<van-field <van-field
v-model="form.phone" v-model="form.phone"
label="手機" label="手機"
name="" name=""
required required
placeholder="Ex. 0900000001 不要有空格" placeholder="Ex. 0900000001 不要有空格"
:rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]" :rules="[
/> { required: true, message: '手機號必填' },
<van-field { pattern: /\d{10}/, message: '手機號格式錯誤' },
v-model="form.tel" ]"
label="市話" />
name="" <van-field
placeholder="請輸入您的市話" v-model="form.tel"
/> label="市話"
<van-field name=""
v-model="form.email" placeholder="請輸入您的市話"
label="Email" />
name="" <van-field
required v-model="form.email"
placeholder="請輸入您的Email" label="Email"
:rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]" name=""
/> required
<van-field placeholder="請輸入您的Email"
v-model="form.address" :rules="[
label="住址" { required: true, message: 'Email必填' },
name="" {
placeholder="請輸入您的地址" pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/,
/> message: 'Email格式錯誤',
<van-field },
v-model="form.url" ]"
label="網址" />
name="" <van-field
placeholder="請輸入您的網址" v-model="form.address"
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]" label="住址"
/> name=""
<van-field placeholder="請輸入您的地址"
v-model="form.line" />
label="Line" <van-field
name="" v-model="form.url"
placeholder="請輸入您的Line ID" label="網址"
/> name=""
<van-field placeholder="請輸入您的網址"
v-model="form.facebook" :rules="[
label="Facebook" { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
name="" ]"
placeholder="請輸入您的臉書連結" />
/> <van-field
<van-field v-model="form.line"
v-model="form.ig" label="Line"
label="IG" name=""
name="" placeholder="請輸入您的Line ID"
placeholder="請輸入您的IG ID" />
/> <van-field
<van-field v-model="form.facebook"
v-model="form.youtube" label="Facebook"
label="YouTube" name=""
name="" placeholder="請輸入您的臉書連結"
placeholder="請輸入您的Youtube連結" />
/> <van-field
<van-uploader v-model="form.ig"
:after-read="afterRead" label="IG"
:max-count="1" name=""
name="averter" placeholder="請輸入您的IG ID"
> />
<div class="upload-main"> <van-field
<img class="upload-img" :src="form.avatar" alt="" v-if="form.avatar"> v-model="form.youtube"
<img class="upload-img" src="@/assets/images/upload.jpg" alt="" v-else> label="YouTube"
<p>上傳圖片,預設為Line頭像</p> name=""
</div> placeholder="請輸入您的Youtube連結"
</van-uploader> />
</van-cell-group> <van-uploader :after-read="afterRead" :max-count="1" name="averter">
<div style="margin: 16px;"> <div class="upload-main">
<van-button round block type="primary" native-type="submit"> <img
送出註冊 class="upload-img"
</van-button> :src="form.avatar"
<br/> alt=""
<van-button round block type="default" @click="leaveReg"> v-if="form.avatar"
以後在說 />
</van-button> <img
</div> class="upload-img"
</van-form> 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" /> <van-overlay :show="crop.show" @click="crop.show = false" />
<div class="cropper-section" v-if="crop.show"> <div class="cropper-section" v-if="crop.show">
<div class="crop-area"> <div class="crop-area">
<cropper <cropper
class="cropper" class="cropper"
ref="myCrop" ref="myCrop"
:src="crop.img" :src="crop.img"
:stencil-props="{ :stencil-props="{
aspectRatio: 1/1 aspectRatio: 1 / 1,
}" }"
:auto-zoom="true" :auto-zoom="true"
/> />
</div> </div>
<div class="crop-btn"> <div class="crop-btn">
<van-button type="primary" size="small" plain @click="onClose">取消</van-button> <van-button type="primary" size="small" plain @click="onClose"
<van-button type="success" size="small" plain @click="onCrop">剪裁</van-button> >取消</van-button
>
<van-button type="success" size="small" plain @click="onCrop"
>剪裁</van-button
>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import axios from 'axios' import axios from "axios";
import { ref } from 'vue' import { ref, inject } from "vue";
import store from '@/store' import store from "@/store";
import router from '@/router' import router from "@/router";
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
import {Toast} from 'vant' import { Toast } from "vant";
import { Cropper } from 'vue-advanced-cropper'; import { Cropper } from "vue-advanced-cropper";
import 'vue-advanced-cropper/dist/style.css'; import "vue-advanced-cropper/dist/style.css";
import { register , checkLineId } from '@/api' import { register, checkLineId } from "@/api";
const URL = window.URL || window.webkitURL; const URL = window.URL || window.webkitURL;
const route = useRoute() const route = useRoute();
const form = ref({ const form = ref({
verify: route.query.verify || null, 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({ const crop = ref({
show: false, show: false,
img: null, img: null,
}) });
if(route.query.verify){ if (route.query.verify) {
title.value = '會員開通' title.value = "會員開通";
} }
const validatorUrl = (val) => { const validatorUrl = (val) => {
if(val.length>0){ if (val.length > 0) {
return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val) return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val);
}else{ } else {
return true 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");
} }
}
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 return;
} };
const onClose = () =>{ const onClose = () => {
crop.value.show = false crop.value.show = false;
} };
const afterRead = async(file, name) => { const afterRead = async (file, name) => {
crop.value.show = true crop.value.show = true;
const ofile = file.file const ofile = file.file;
crop.value.img = URL.createObjectURL(ofile); crop.value.img = URL.createObjectURL(ofile);
return return;
} };
const onSubmit = async () => { const onSubmit = async () => {
try{ const liff = window.liff;
if(!liff){ try {
console.log('liff is undefined') if (!liff.isLoggedIn()) liff.login({ redirectUri: window.location.href });
Toast('系統錯誤,請重新登入') } catch (err) {
router.push('/login') console.log(`liff.state init error ${err}`);
} Toast("登入失敗。請聯絡管理員");
}catch(e){ router.push("/login");
console.log(e.message) }
Toast('系統錯誤,請重新登入')
router.push('/login')
}
const profile = await liff.getProfile()
let checkRes = await checkLineId(profile.userId)
if(checkRes.code!==200){
Toast('您已是我們的會員，請直接登入')
router.push('/login')
}
const id_token = liff.getIDToken() const profile = await liff.getProfile();
Toast.loading({ let checkRes = await checkLineId(profile.userId);
duration: 0,
message: '資料傳送中...',
forbidClick: true,
});
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){ const id_token = liff.getIDToken();
if (liff.isLoggedIn()) {
liff.logout(); Toast.loading({
} duration: 0,
Toast('line 登入已過期') message: "資料傳送中...",
// return router.push('/login') forbidClick: true,
}else if(regRes.code === 200){ });
Toast('註冊成功')
sessionStorage.setItem('token',regRes.data.token) let regRes = await register({
sessionStorage.setItem('uid',regRes.data.uid) line_id: profile.userId,
return router.push('/') line_name: profile.displayName,
}else{ line_picture: profile.pictureUrl,
Toast('註冊失敗') token: id_token,
// return router.push('/login') ...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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container{ .container {
padding-bottom: 30px; padding-bottom: 30px;
} }
.title{ .title {
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
} }
.upload-img{ .upload-img {
width: 80px; width: 80px;
} }
.cropper { .cropper {
height: 300px; height: 300px;
// width: 300px; // width: 300px;
background: #DDD; background: #ddd;
} }
.cropper-section{ .cropper-section {
margin: 0 auto; margin: 0 auto;
position: fixed; position: fixed;
text-align: center; text-align: center;
top: 50px; top: 50px;
// left: 0; // left: 0;
height: 350px; height: 350px;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
background: #DDD; background: #ddd;
z-index: 8888; z-index: 8888;
.crop-area{ .crop-area {
margin: 5 auto; margin: 5 auto;
width: 100%; width: 100%;
height: 330px; height: 330px;
} }
.crop-btn{ .crop-btn {
background-color: #666; background-color: #666;
text-align: center; text-align: center;
} }

Write Preview
Loading…
Cancel
Save