330 lines
8.7 KiB
Vue
330 lines
8.7 KiB
Vue
<template lang="pug">
|
||
v-container(fluid)
|
||
v-card.elevation-0
|
||
v-card-title 您好!
|
||
v-card-text
|
||
p 請填入您所要綁定的以太錢包地址
|
||
br
|
||
| Enter your Ethereum address below
|
||
v-form(@submit.prevent="submit" v-model="isValid")
|
||
v-text-field(v-model="form.WalletAddress" label="錢包地址" :rules="[requireInput]")
|
||
p.grey--text 註1: 以太網錢包地址 Ethereum address
|
||
v-text-field(v-model="form.VerifyRemarks" label="備註")
|
||
v-btn.airplug(type="submit" dark block depressed large :disabled="!isValid") {{ isValid ? '填好送出完成報到' : '您還沒填好喔' }}
|
||
</template>
|
||
<script lang="ts">
|
||
import { Vue, Component } from "nuxt-property-decorator";
|
||
import querystring from "querystring";
|
||
import { initLIFF } from "~/plugins/liff";
|
||
import { IForm } from "~/models/submit";
|
||
|
||
@Component
|
||
export default class Home extends Vue {
|
||
isValid = true;
|
||
|
||
form = {
|
||
WalletAddress: "",
|
||
VerifyRemarks: "",
|
||
LINEUserID: "",
|
||
LINEdisplayName: "",
|
||
LINEpictureUrl: "",
|
||
LINEstatusMessage: "",
|
||
VerifyNUM: "",
|
||
VerifySys: "",
|
||
Veify_Checked: ""
|
||
|
||
};
|
||
|
||
liff: any;
|
||
|
||
async mounted() {
|
||
const liffId = "1657251293-7LagMEa1";
|
||
const liff = (this.liff = await initLIFF(liffId));
|
||
if (!liff.isLoggedIn()) {
|
||
liff.login();
|
||
} else {
|
||
const profile = await liff.getProfile();
|
||
this.form.LINEUserID = profile.userId;
|
||
this.form.LINEdisplayName = profile.displayName;
|
||
this.form.LINEpictureUrl = profile.pictureUrl;
|
||
this.form.LINEstatusMessage = profile.statusMessage;
|
||
await this.autofill(profile.userId);
|
||
console.log(this.form);
|
||
console.log("---------------------------------------------");
|
||
console.log(this.form.Veify_Checked)
|
||
console.log("---------------------------------------------");
|
||
if(this.form.Veify_Checked == "OK")
|
||
{
|
||
console.log("---------------------------------------------");
|
||
alert('您已經綁定過囉，如重新綁定需24小時解綁時間');
|
||
console.log("---------------------------------------------")
|
||
}
|
||
}
|
||
}
|
||
|
||
async autofill(uid: string) {
|
||
const response = await this.$axios.get(`//${window.location.host}/autofill`, { params: { LINEUserID: uid } });
|
||
const object = response.data[0];
|
||
if (!object) {
|
||
return;
|
||
}
|
||
for (const key in this.form) {
|
||
this.form[key] = object[key];
|
||
}
|
||
}
|
||
|
||
async submit() {
|
||
this.form.VerifyNUM = "Contree-" + Math.floor(Math.random()*999) + "-" + Math.floor(Math.random()*999);
|
||
try {
|
||
await this.$axios.$post(`//${window.location.host}/submit`, this.form);
|
||
if (this.liff.isInClient()) {
|
||
await this.liff.sendMessages([{
|
||
"type": "flex",
|
||
"altText": "this is a carousel template",
|
||
"contents": {
|
||
"type": "carousel",
|
||
"contents": [
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/walletadd.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.1",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "輸入錢包位置",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/biono.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.1",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "獲得Bio驗證碼",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/opensea.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.3",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "進入錢包位置",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/contect.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.4",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "完成opensea簽署",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/bio.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.5",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "在Account的Bio 填入驗證碼 ",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"type": "bubble",
|
||
"direction": "ltr",
|
||
"hero": {
|
||
"type": "image",
|
||
"url": "https:/web.gsct.tw/Contree/verify/fin.png",
|
||
"size": "full",
|
||
"aspectRatio": "1:1",
|
||
"aspectMode": "cover"
|
||
},
|
||
"body": {
|
||
"type": "box",
|
||
"layout": "vertical",
|
||
"contents": [
|
||
{
|
||
"type": "text",
|
||
"text": "Step.6",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
},
|
||
{
|
||
"type": "text",
|
||
"text": "綁定完成",
|
||
"weight": "bold",
|
||
"align": "center",
|
||
"contents": []
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
|
||
|
||
}])
|
||
await this.liff.sendMessages([{
|
||
"type": "text",
|
||
"text": this.form.VerifyNUM
|
||
}])
|
||
await this.liff.sendMessages([{
|
||
"type": "text",
|
||
"text": "下面就是驗證碼喔"
|
||
}])
|
||
this.liff.closeWindow();
|
||
} else {
|
||
if (this.liff.isLoggedIn()) {
|
||
alert('您使用的是外部瀏覽器');
|
||
window.location.assign("https://api.contree.io/posts/1");
|
||
}
|
||
}
|
||
} catch (error) {
|
||
alert("送出失敗");
|
||
}
|
||
}
|
||
|
||
requireInput(value) {
|
||
value = value || '';
|
||
return !!value.trim() ? true : "這個欄位也要填喔";
|
||
}
|
||
|
||
isEmail(value) {
|
||
return !!value.match(/.+@.+[.].+/g) ? true : "email 格式不正確";
|
||
}
|
||
|
||
isPhone(value) {
|
||
return value.replace(/[^0-9]/g, "").length >= 9
|
||
? true
|
||
: "電話號碼不正確， 市話記得加區碼喔";
|
||
}
|
||
isWeb3Address(value) {
|
||
return value.replace(/[^a-z0-9]/g, "").length >= 9
|
||
? true
|
||
: "只能打英文數字喔";
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
button.airplug.theme--dark.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
|
||
background-color: #44d62c !important;
|
||
color: white !important;
|
||
}
|
||
|
||
button.airplug.theme--dark.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
|
||
opacity: 0.3;
|
||
}
|
||
</style>
|