Browse Source

service/id 增加輸入攤位數量樣式

Dev
Janie 2 years ago
parent
commit
8eb51e3ab7
  1. 109
      FrontEnd/components/service/content/selectExhibitionBooth.vue
  2. 33
      FrontEnd/pages/service/_id.vue

109
FrontEnd/components/service/content/selectExhibitionBooth.vue

@ -0,0 +1,109 @@
<template>
<div class="group">
<div class="tw-text-[16px] tw-text-[#9c9c9c] tw-mb-[20px]">
大大會提供每實收攤位(贈攤不計列)單件 7 噸內至多 3 件免費服務請詳實填寫逾期申請或現場追加恕不受理
</div>
<div class="tw-grid tw-grid-cols-[199px_auto] tw-gap-[15px]">
<div class="tw-text-[16px] tw-text-black">
實收攤位數 <span class="tw-text-[12px]">(9平方米/攤位)</span><span class="tw-text-[#ef5a5a]">*</span>
</div>
<div class="tw-flex tw-justify-between tw-items-center tw-max-w-[165px]">
<!-- <div class="t12 tw-mr-[35px] tw-text-neutrals-900 tw-hidden md:tw-block md:t16 md:tw-font-normal">
${{ price.toLocaleString() }} {{ currency }}
</div> -->
<button :class="[
'custom-button button-reduce tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-mr-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-mr-[42px]',
value == 0 ? 'tw-bg-neutrals-200' : 'tw-bg-primary-default',
]" @click="reduce()">
reduce
</button>
<div class="tw-min-w-[24px] tw-text-center md:t18 md:tw-font-normal">
{{ value }}
</div>
<button :class="[
'custom-button button-add tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-ml-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-text-medium md:tw-ml-[42px]',
]" @click="add()">
add
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'selectExhibitionBooth',
components: {
},
props: {
},
data() {
return {
value: 0,
};
},
watch: {
value: {
handler: function () {
if (this.value) {
console.log(this.value);
this.$emit('booth-select', this.value);
}
},
},
},
methods: {
add() {
this.value += 1;
},
reduce() {
if (this.value !== 0) {
this.value -= 1;
}
},
},
};
</script>
<style lang="scss" scoped>
.custom-button {
background-position: center;
background-repeat: no-repeat;
background-size: 12px;
}
.button {
&-reduce {
background-image: url("~/assets/svg/reduce.svg");
background-color: #e5e5e5;
}
&-add {
background-image: url("~/assets/svg/add.svg");
background-color: #f48800;
}
}
.bounce-enter-active {
animation: bounce-in 0.3s ease-out;
}
.bounce-leave-active {
animation: bounce-in 0.3s reverse;
}
@keyframes bounce-in {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>

33
FrontEnd/pages/service/_id.vue

@ -32,6 +32,12 @@
</div>
<div class="tw-w-full tw-bg-neutrals-100 tw-px-[20px] tw-py-[30px] md:tw-p-[30px] tw-rounded-[20px]">
<div class="">
<div class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
<h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
輸入攤位數量
</h3>
<selectExhibitionBooth @booth-select="getBoothSelect"></selectExhibitionBooth>
</div>
<div class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
<h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
{{ $t("Select Exhibition") }}
@ -284,6 +290,7 @@ import slideshow from "@/components/swiper/serviceContent.vue";
import detailsModal from "@/components/service/contentModal/DetailsModal.vue";
import cancellationPolicyModal from "@/components/service/contentModal/cancellationPolicyModal.vue";
import selectExhibition from "@/components/service/content/selectExhibition.vue";
import selectExhibitionBooth from "@/components/service/content/selectExhibitionBooth.vue";
import selectExhibitionService from "@/components/service/content/selectExhibitionService.vue";
import quantitySelectGroup from "@/components/service/content/quantitySelectGroup.vue";
import pickupInformation from "@/components/service/content/pickupInformation.vue";
@ -308,6 +315,7 @@ export default {
detailsModal,
cancellationPolicyModal,
selectExhibition,
selectExhibitionBooth,
selectExhibitionService,
quantitySelectGroup,
pickupInformation,
@ -431,6 +439,7 @@ export default {
previewFile: '',
countdown: 15,
rulesShow: false,
boothSelect: 0,
};
},
async created() {
@ -689,7 +698,6 @@ export default {
})
.catch((error) => console.log(error));
},
// async getFaq() {
// await this.$axios
// .get(
@ -797,6 +805,11 @@ export default {
})
.catch((error) => console.log(error));
},
//
getBoothSelect(value){
this.boothSelect = value;
console.log("攤位數:" + this.boothSelect);
},
//
async getInfoItem() {
await this.$axios
@ -805,7 +818,7 @@ export default {
if(response && response.data && response.data.DATA && response.data.DATA.rel){
let data = response.data.DATA.rel
console.log(data)
console.log(data);
if(data.length>0){
this.expenseRules = data;
@ -847,7 +860,7 @@ export default {
bookNow() {
let validators = this.$refs.ref_selectExhibition.validators();
console.log(this.$refs.ref_selectExhibition);
console.log("this.$refs.ref_selectExhibition:" + this.$refs.ref_selectExhibition);
if(validators==false){
return false;
@ -941,7 +954,9 @@ export default {
this.$refs.ref_quantitySelectGroup.clearAll();
}
},
//()
ChangeCosts(data){
console.log("展館服務數量:" + JSON.stringify(data.value.quantity));
let totalPrice = 0;
this.totalPrice = 0;
this.rulesShow = false;
@ -994,7 +1009,17 @@ export default {
//
stackerCostRules(data1,data2){
console.log(this.expenseRules)
//
console.log(this.expenseRules);
console.log(data1);
console.log(data2);
if(this.expenseRules.ItemType == "01"){
}
let price = 0;

Loading…
Cancel
Save