line_push/pages/index.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);
    }
  }


  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": "-----下面就是驗證碼喔-----"
                                                              }])
                                await this.liff.sendMessages([{
                                "type": "text",
                                "text": this.form.VerifyNUM
                                                              }])                   
        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>