432 lines
20 KiB
Vue
432 lines
20 KiB
Vue
<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() {
|
|
//組資料，信眾資料，報名資料，功德資料
|
|
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> |