forked from daren.hsu/line_push
97 lines
2.8 KiB
Vue
97 lines
2.8 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: ""
|
|
};
|
|
|
|
liff: any;
|
|
|
|
async mounted() {
|
|
const liffId = "1657251293-4DpLENpm";
|
|
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;
|
|
this.autofill(profile.userId);
|
|
console.log(this.form);
|
|
}
|
|
}
|
|
|
|
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() {
|
|
try {
|
|
await this.$axios.$post(`//${window.location.host}/submit`, this.form);
|
|
this.liff.closeWindow();
|
|
} 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
|
|
: "電話號碼不正確， 市話記得加區碼喔";
|
|
}
|
|
}
|
|
</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>
|