6.6 KiB
<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>