快速報名
This commit is contained in:
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card>
|
||||
<v-card-title class ="bg-primary white--text text-center">
|
||||
<h4>快速報名</h4>
|
||||
<div class="ms-auto">
|
||||
<v-btn @click.prevent="addOrderWithDetail()">儲存</v-btn>
|
||||
<v-btn @click.prevent="back01()">返回</v-btn>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="2" md="2">
|
||||
<v-text-field v-model="follower.u_name" :rules="requiredrules"
|
||||
label="*姓名"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-text-field v-model="follower.phone" :rules="phonerules"
|
||||
label="*電話"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-text-field v-model="follower.cellphone" :rules="cellrules"
|
||||
label="*行動電話"></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="2" md="2">
|
||||
<v-select :items="countrys" :rules="requiredrules"
|
||||
label="*國籍"
|
||||
item-text="name_zh"
|
||||
item-value="id" v-model="follower.country">
|
||||
</v-select>
|
||||
<!--<v-text-field v-model="follower.country" :rules="requiredrules"
|
||||
label="*國籍"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-text-field v-model="follower.id_code"
|
||||
label="身分證號碼"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-text-field v-model="follower.passport"
|
||||
label="旅行證件號碼"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-select :items="sex_items" :rules="requiredrules"
|
||||
label="*性別"
|
||||
item-text="text"
|
||||
item-value="val" v-model="follower.sex">
|
||||
</v-select>
|
||||
<!--<v-text-field v-model="follower.sex" :rules="[rules.required]"
|
||||
label="*性別"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-select :items="identity_items" :rules="requiredrules"
|
||||
label="*身分別"
|
||||
item-text="text"
|
||||
item-value="val" v-model="follower.identity_type">
|
||||
</v-select>
|
||||
<!--<v-text-field v-model="follower.identity_type" :rules="[rules.required]"
|
||||
label="*身分別"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-menu v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field v-model="follower.birthday"
|
||||
label="生日"
|
||||
prepend-icon="mdi-calendar"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="follower.birthday"
|
||||
@input="menu = false"></v-date-picker>
|
||||
</v-menu>
|
||||
<!--<v-date-picker v-model="follower.birthday"
|
||||
label="生日"></v-date-picker>-->
|
||||
<!--<v-text-field v-model="follower.birthday"
|
||||
label="生日"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-checkbox v-model="follower.send_receipt"
|
||||
label="寄送收據"></v-checkbox>
|
||||
</v-col>
|
||||
<v-col cols="4" md="4">
|
||||
<v-text-field v-model="follower.receipt_title"
|
||||
label="收據抬頭"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field v-model="follower.address"
|
||||
label="地址"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<hr class="hr-text" data-content="功德項目">
|
||||
<v-row>
|
||||
<v-col cols="3" md="3">
|
||||
<v-select :items="act_items"
|
||||
label="功德項目"
|
||||
item-text="act_item_selected.text"
|
||||
item-value="act_item_selected.val" v-model="select_act_item">
|
||||
</v-select>
|
||||
</v-col>
|
||||
<v-col cols="2" md="2">
|
||||
<v-btn @click.prevent="newTablet()">新增</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel v-for="(item,i) in tablets"
|
||||
:key="i">
|
||||
<v-expansion-panel-header>
|
||||
<h2>{{ item.actItem_subject }}</h2>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col col="12" md="1">
|
||||
標題
|
||||
</v-col>
|
||||
<v-col col="12" md="11">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field v-model="title_new.name"
|
||||
label="姓名"></v-text-field>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select :items="live_select"
|
||||
label="存/歿"
|
||||
item-text="text"
|
||||
item-value="val" v-model="title_new.islive">
|
||||
</v-select>
|
||||
<!--<v-text-field v-model="title_new.islive"
|
||||
label="存/歿"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn @click.prevent="addTitle(item)">加入</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
{{ renderContent( item.tablet.title) }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="checkType(item)">
|
||||
<v-col col="12" md="1">
|
||||
陽上
|
||||
</v-col>
|
||||
<v-col col="12" md="11">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field v-model="alive_new.name"
|
||||
label="姓名"></v-text-field>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select :items="live_select"
|
||||
label="存/歿"
|
||||
item-text="text"
|
||||
item-value="val" v-model="alive_new.islive">
|
||||
</v-select>
|
||||
<!--<v-text-field v-model="alive_new.islive"
|
||||
label="存/歿"></v-text-field>-->
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn @click.prevent="addLive(item)">加入</v-btn>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
{{ renderContent( item.tablet.alive) }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
num: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
follower: {
|
||||
u_name: "", sex: "", identity_type: "", phone: "",
|
||||
cellphone: "", country: "", address: "",
|
||||
birthday: "", send_recript: "", receipt_title: "",
|
||||
id_code:"",passport:""
|
||||
},
|
||||
act_items: [],
|
||||
search: {},
|
||||
date: new Date().toISOString().substr(0, 10),
|
||||
menu: false,
|
||||
tablets: [],
|
||||
select_act_item: {},
|
||||
title_new: { name: "", islive: true },
|
||||
alive_new: { name: "", islive: true },
|
||||
live_select: [
|
||||
{ val: true, text: '存' },
|
||||
{ val: false, text: '歿' },
|
||||
],
|
||||
requiredrules: [
|
||||
v=>!!v||'必須填寫',
|
||||
],
|
||||
cellrules: [
|
||||
v => (!!v||!!this.follower.phone) || '行動電話或電話為必須擇一填寫',
|
||||
v => /^09\d{2}-?\d{3}-?\d{3}$/.test(v) || '行動電話必須為09xx-xxx-xxx',
|
||||
],
|
||||
phonerules: [
|
||||
v => (!!v || !!this.follower.cellphone) || '行動電話或電話為必須擇一填寫',
|
||||
],
|
||||
sex_items: [
|
||||
{ text: "男眾", val: "男眾" },
|
||||
{ text: "女眾", val: "女眾" },
|
||||
],
|
||||
identity_items: [
|
||||
{ text: "出家眾", val: "1" },
|
||||
{ text: "個人", val: "2" },
|
||||
{ text: "法人", val: "3" },
|
||||
{ text: "往生菩薩", val: "4" },
|
||||
{ text: "蓮友", val: "10" },
|
||||
],
|
||||
countrys:[]
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.getActItem();
|
||||
this.getCountrys();
|
||||
},
|
||||
methods: {
|
||||
back01() {
|
||||
this.$emit('custom-event', { action: 'signup1', item: this.num });
|
||||
},
|
||||
addOrderWithDetail() {
|
||||
//組資料，信眾資料，報名資料，功德資料
|
||||
console.log("addOrderWithDetail:",this.follower);
|
||||
console.log("addOrderWithDetail:", this.tablets);
|
||||
let details = []
|
||||
|
||||
|
||||
this.tablets.forEach(x => {
|
||||
let mid_items = []
|
||||
let left_items = []
|
||||
if (x.tablet.title) {
|
||||
x.tablet.title.forEach(y => {
|
||||
mid_items.push(
|
||||
{
|
||||
num: 0,
|
||||
follower_num: 0,
|
||||
fam_name: y.name,
|
||||
deceased: !y.islive,
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
if (x.tablet.alive) {
|
||||
x.tablet.alive.forEach(y => {
|
||||
left_items.push(
|
||||
{
|
||||
num: 0,
|
||||
follower_num: 0,
|
||||
fam_name: y.name,
|
||||
deceased: !y.islive,
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
//let f_num_tablet = {
|
||||
// mid_items: mid_items,
|
||||
// left_items:left_items
|
||||
//}//這應該只存名字跟存歿，因為還要先存親友資料取得num
|
||||
details.push({
|
||||
num: 0,
|
||||
actItem_num: x.actItem_num,
|
||||
price: x.price,
|
||||
qty: x.qty,
|
||||
printed_files: x.files.val,
|
||||
style: x.style,
|
||||
mid_items: mid_items,
|
||||
left_items: left_items,
|
||||
})
|
||||
})
|
||||
|
||||
let order = {
|
||||
order_no: "",
|
||||
f_num: 0,
|
||||
u_name: "",
|
||||
activity_num: this.num,
|
||||
phone: this.follower.phone,
|
||||
address: this.follower.address,
|
||||
send_recript: this.follower.send_recript,
|
||||
receipt_title: this.follower.receipt_title,
|
||||
f_user: this.follower,
|
||||
details:details
|
||||
}
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/order/AddOrderWithDetail', order)
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
})
|
||||
},
|
||||
renderContent(titles) {
|
||||
return titles.map(title => title.name).join('、');
|
||||
//return title.join("、")
|
||||
},
|
||||
checkType(item) {
|
||||
if (item.actItem_subject.startsWith("超")) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
addTitle(item) {
|
||||
item.tablet.title.push({
|
||||
name: this.title_new.name, islive: this.title_new.islive
|
||||
});
|
||||
this.title_new = { name: "", islive: this.title_new.islive }
|
||||
},
|
||||
addLive(item) {
|
||||
item.tablet.alive.push({
|
||||
name: this.alive_new.name, islive: this.alive_new.islive
|
||||
});
|
||||
this.alive_new = { name: "", islive: this.alive_new.islive }
|
||||
},
|
||||
newTablet() {
|
||||
console.log(this.act_items);
|
||||
console.log(this.select_act_item);
|
||||
let item = this.act_items.find(x => x.act_item_selected.val == this.select_act_item);
|
||||
this.tablets.push({
|
||||
actItem_num: item.act_item_selected.val,
|
||||
actItem_subject: item.act_item_selected.text,
|
||||
f_num_tablet: [],
|
||||
num: this.tablets.length,
|
||||
qty: 1,
|
||||
price: item.price,
|
||||
files: item.files,
|
||||
style: item.act_item_selected.style,
|
||||
tablet: {
|
||||
title: [],
|
||||
alive: []
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
getCountrys() {
|
||||
let search = {}
|
||||
let params = { sortBy: 'ID', sortDesc: false, page: 1, pageSize: -1 };
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/country/GetList', this.search, { params: params })
|
||||
.then(response => {
|
||||
|
||||
if (response.data.list) {
|
||||
this.countrys = response.data.list
|
||||
}
|
||||
else
|
||||
console.log("查無資料");
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
getActItem() {//抓法會可用功德項目
|
||||
this.act_items.length = 0
|
||||
this.search = { num: this.num }
|
||||
let params = { sortBy: 'num', sortDesc: false, page: 1, pageSize: -1 };
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/activity/GetActRelaList', this.search, { params: params })
|
||||
.then(response => {
|
||||
|
||||
if (response.data.list) {
|
||||
this.act_items = response.data.list
|
||||
console.log(this.act_items);
|
||||
}
|
||||
else
|
||||
console.log("查無資料");
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hr-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.hr-text::before,
|
||||
.hr-text::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-top: 1px solid #ccc; /* 分隔線樣式 */
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.hr-text::before {
|
||||
content: attr(data-content);
|
||||
padding: 0 50px;
|
||||
color: black;
|
||||
font-size: 28px;
|
||||
}
|
||||
/* 当 checkbox 被禁用时，改变鼠标状态 */
|
||||
input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.4; /* 控制反灰程度 */
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.disabled-checkbox {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8; /* 控制反灰程度 */
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.enabled-checkbox {
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user