line_push/changepage/index.vue

<template lang="pug">
  v-container(fluid)
    v-card.elevation-0
      v-card-title 您好! 歡迎您來參加11/14 西湖渡假村《秋季也有趣》
      v-card-text
        p 這次我們活動採用line的報名機制
         br
         |*報名費用（含活動費+晚餐合菜）
         br
         |一日遊
         br
         |7歲以上--950元/人
         br
         |3-6歲----400元/人
         br
         |2歲以下--免費
         br
         |二日遊
         br
         |7歲以上--700元/人
         br
         |3-6歲----400元/人
         br
         |2歲以下--免費
         br
         |*住宿費用(含隔日早餐/門票)
         br
         |2人房:3100元
         br
         |4人房:4200元
         br
         |加床600元(含隔日早餐/門票)

         br
         |註:
         br
         |7歲以上:102年11月14日前出生
         br
         |3-6歲:102年11月13日~106年11月14日出生
         br
         |2歲以下:106年11月13日後出生
         br
         | 報名後您能憑此ＬＩＮＥ＠在現場參加遊戲
         | 若因故須取消已報名之活動，為便於作業流程之順暢，請於一個月前提出異動，於活動日一個月前提出可全額退費；之後提出者概不退還費用，煩請自行找其他車友替補。有任何困難之處可向管理群尋求協助，謝
        v-form(@submit.prevent="submit" v-model="isValid")
          v-select( v-model="form.yesorno" :items="yesorno"  label="社團活動報名表單的退費機制同意與否" :rules="[requireInput]")
          v-text-field(v-model="form.FBNAME" label="FB名稱" :rules="[requireInput]")
          v-text-field(v-model="form.NAME" label="姓名" :rules="[requireInput]")
          v-text-field(v-model="form.Phone" label="連絡電話" :rules="[requireInput, isPhone]" validate-on-blur type="tel")
          v-text-field(v-model="form.CARNUM" label="車號(ABC-1234)" :rules="[requireInput]")
          v-select( v-model="form.cartype" :items="cartype"  label="車型" :rules="[requireInput]")
          v-select( v-model="form.CARCOLOR" :items="CARCOLOR"  label="車色" :rules="[requireInput]")
          v-select( v-model="form.NumberOfPeople" :items="NumberOfPeople"  label="7歲(含)以上至成人" :rules="[requireInput]")
          p.grey--text 7歲以上 一日遊950元/人  二日遊700元/人         
          v-select( v-model="form.NumberOfChild" :items="NumberOfChild"  label="3-6歲" :rules="[requireInput]")
          p.grey--text 3-6歲----400元/人
          v-select( v-model="form.NumberOfBaby" :items="NumberOfBaby"  label="0~2歲" :rules="[requireInput]")   
          p.grey--text 2歲以下--免費       
          v-select( v-model="form.DAYS" :items="DAYS"  label="一日遊or二日遊" :rules="[requireInput]")
          v-select( v-model="form.HOTELROOM2" :items="HOTELROOM2"  label="訂飯店二人房(一大床)3100元/晚" :rules="[requireInput]")
          v-select( v-model="form.HOTELROOM4" :items="HOTELROOM4"  label="訂飯店四人房(二大床)4200元/晚，" :rules="[requireInput]")
          v-select( v-model="form.HALLROOM2" :items="HALLROOM2"  label="訂會館二人房(二小床)3100元/晚" :rules="[requireInput]")
          v-select( v-model="form.AddBED" :items="AddBED"  label="加床600元 \n" :rules="[requireInput]")          
          v-text-field(v-model="form.Charge" label="報名費總金額" :rules="[requireInput]")
          p.grey--text 註1: 計算方式: (報名人數*費用)+(房價*間數))
          v-text-field(v-model="form.BANKACCOUNT" label="匯款帳號後五碼" :rules="[requireInput]")
          p.grey--text 註2: 只是先填寫.不用急著匯款,請耐心等待通知~確定有報到名後再進行匯款動作即可
          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;
  NumberOfPeople = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "再多...請聯絡管理員"
  ];
  NumberOfChild = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "再多就變安親班了...請聯絡管理員"
  ];
  NumberOfBaby = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "再多變成幼稚園...請聯絡管理員"
  ];
  yesorno = ["同意", "不同意"];
  cartype = ["AT", "GT", "其他"];
  CARCOLOR = ["300標準白", "668標準黑","A89帝王藍","C09地中海藍","B39礦物灰","A96珍珠白","A83冰川銀","B53深棕","C08香檳金","C10寶藍","C06紅","B45M款藍","其他"];
  DAYS = ["一日遊", "二日遊"];
  AddBED = ["0", "1", "2", "3", "4", "5"];
  HOTELROOM2 = ["0", "1", "2", "3", "4", "5"];
  HOTELROOM4 = ["0", "1", "2", "3", "4", "5"];
  HALLROOM2 = ["0", "1", "2", "3", "4", "5"];
  form = {
    NAME: "",
    FBNAME: "",
    CARNUM: "",
    yesorno: "",
    CARCOLOR: "",
    Phone: "",
    LINEUserID: "",
    NumberOfPeople: "",
    NumberOfChild: "",
    NumberOfBaby: "",
    DAYS: "",
    HOTELROOM2: "",
    HOTELROOM4: "",
    HALLROOM2: "",
    AddBED: "",
    BANKACCOUNT: ""
  };

  liff: any;

  async mounted() {
    const liffId = "1654797836-k7jJLNP4";
    const liff = (this.liff = await initLIFF(liffId));
    if (!liff.isLoggedIn()) {
      liff.login();
    } else {
      const profile = await liff.getProfile();
      this.form.LINEUserID = profile.userId;
      console.log(this.form);
    }
  }

  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>