You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
12 KiB
359 lines
12 KiB
<template>
|
|
<div class="tw-mb-[20px] tw-rounded-[20px] tw-px-[20px] tw-py-[30px] tw-border tw-border-solid tw-border-slate-200">
|
|
<div class="element collapse tw-my-[12px]">
|
|
<div
|
|
:class="[
|
|
'label',
|
|
'tw-cursor-pointer',
|
|
'service-info',
|
|
show ? 'show' : 'hide',
|
|
]"
|
|
@click="show = !show"
|
|
>
|
|
<div class="t-w-full tw-grid tw-grid-cols-[30px_auto_80px]">
|
|
<div class="tw-w-[30px] tw-h-[30px] tw-rounded-[30px] tw-bg-black tw-text-white tw-flex tw-justify-center tw-items-center t14 md:t16">{{ sort }}</div>
|
|
<div class="tw-flex tw-justify-center tw-items-center"><span class="tw-text-neutrals-600 tw-font-normal t14 md:t16">[{{ $t("Length") }} {{formData.length}}cm x {{ $t("Width") }} {{formData.width}}cm x {{ $t("Height") }} {{formData.height}}cm , {{ $t("Weight") }} {{ formData.weight }}kg] , {{ $t("Quantity") }}：{{ formData.quantity }}</span></div>
|
|
<v-img max-width="18" max-height="19" class="tw-ml-[10px]" @click="delService" :src="require('@/assets/svg/delete_default.svg')"></v-img>
|
|
</div>
|
|
</div>
|
|
<Transition name="bounce">
|
|
<div v-show="show">
|
|
<div class="tw-pr-24 tw-mt-[20px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[122px_auto] xl:tw-grid-cols-[122px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal tw-mb-[10px] md:tw-mb-0 t14 md:t16">
|
|
<span>{{ $t("Package")}}：</span><span class="required t12 md:t14">*</span>
|
|
</label>
|
|
</div>
|
|
<elementSelectNew
|
|
:select="{
|
|
id: 'Package',
|
|
label: 'Package',
|
|
required: true,
|
|
}"
|
|
:isRow="true"
|
|
:itemsCenter="true"
|
|
:labelWidth="0"
|
|
:selectWidth="200"
|
|
:selectList="selectPackageList"
|
|
:default="formData.package"
|
|
:validation="validation.package"
|
|
@change="updatePackape($event)"
|
|
></elementSelectNew>
|
|
</div>
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[122px_auto_auto_auto] xl:tw-grid-cols-[122px_auto_auto_auto] tw-gap-[10px] tw-mt-[20px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal tw-mb-[10px] md:tw-mb-0 t14 md:t16">
|
|
<span>{{ $t("Size (cm)")}}：</span><span class="required t12 md:t14">*</span>
|
|
</label>
|
|
</div>
|
|
<elementInputNew
|
|
:input="{
|
|
id: 'Length',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: 'Length',
|
|
}"
|
|
:maxlength="11"
|
|
:validation="validation.length"
|
|
@change="updateLength($event)"
|
|
></elementInputNew>
|
|
<elementInputNew
|
|
:input="{
|
|
id: 'Width',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: 'Width',
|
|
}"
|
|
:maxlength="11"
|
|
:validation="validation.width"
|
|
@change="updateWidth($event)"
|
|
></elementInputNew>
|
|
<elementInputNew
|
|
:input="{
|
|
id: 'Height',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: 'Height',
|
|
}"
|
|
:maxlength="11"
|
|
:validation="validation.height"
|
|
@change="updateHeight($event)"
|
|
></elementInputNew>
|
|
</div>
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-2 tw-gap-[10px] tw-mt-[20px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[122px_auto] xl:tw-grid-cols-[122px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal tw-mb-[10px] md:tw-mb-0 t14 md:t16">
|
|
<span>{{ $t("Weight (kg)")}}：</span><span class="required t12 md:t14">*</span>
|
|
</label>
|
|
</div>
|
|
<elementInputNew
|
|
:input="{
|
|
id: 'Weight',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: '',
|
|
}"
|
|
:maxlength="11"
|
|
:validation="validation.weight"
|
|
@change="updateWeight($event)"
|
|
></elementInputNew>
|
|
</div>
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[122px_auto] xl:tw-grid-cols-[122px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center md:tw-justify-end">
|
|
<label class="tw-font-normal tw-mb-[10px] md:tw-mb-0 t14 md:t16">
|
|
<span>{{ $t("Quantity")}}：</span><span class="required t12 md:t14">*</span>
|
|
</label>
|
|
</div>
|
|
<elementSelectNew
|
|
:select="{
|
|
id: 'Quantity',
|
|
label: 'Quantity',
|
|
required: true,
|
|
}"
|
|
:isRow="true"
|
|
:itemsCenter="true"
|
|
:labelWidth="0"
|
|
:selectWidth="200"
|
|
:selectList="selectQuantityList"
|
|
:default="formData.quantity"
|
|
:validation="validation.quantity"
|
|
@change="updateQuantity($event)"
|
|
></elementSelectNew>
|
|
</div>
|
|
</div>
|
|
<div class="tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-200 tw-mt-[20px]"></div>
|
|
<div class="group tw-mt-[20px]">
|
|
<h3 class="t14 tw-font-bold tw-mb-[20px] md:t16">
|
|
{{ $t("Service Type") }}<span class="required tw-font-normal t12 md:t14">*</span> ({{ $t("Multiple choices") }})
|
|
<span v-if="validation.typeShow==false" class="required md:tw-ml-[20px] tw-font-normal t12 md:t14">{{ $t("Required.") }}</span>
|
|
</h3>
|
|
<typeMultigroup :packages="typeGroupList" @type="changeType($event)"></typeMultigroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";
|
|
import elementInputNew from "@/components/newComponent/form/ElementInputNew";
|
|
import typeMultigroup from "@/components/service/content/typeMultigroup.vue";
|
|
import is from "is_js";
|
|
import { IsNumber } from "~/utils/common";
|
|
export default {
|
|
name: 'selectExhibitionService',
|
|
components: {
|
|
elementSelectNew,
|
|
elementInputNew,
|
|
typeMultigroup
|
|
},
|
|
props: {
|
|
selectPackageList: {
|
|
type: Array,
|
|
},
|
|
selectLengthList: {
|
|
type: Array,
|
|
},
|
|
selectWidthList: {
|
|
type: Array,
|
|
},
|
|
selectHeightList: {
|
|
type: Array,
|
|
},
|
|
selectQuantityList: {
|
|
type: Array,
|
|
},
|
|
typeGroupList:{
|
|
type: Array,
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
sort:{
|
|
type: Number,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
typeLength: 0,
|
|
// show: true,
|
|
formData: {
|
|
package: "0",
|
|
selectPackape:{id: "0",name:""},
|
|
length: "",
|
|
width: "",
|
|
height: "",
|
|
weight: "",
|
|
quantity: "0",
|
|
selectServiceItems: [],
|
|
},
|
|
validation: {
|
|
package: true,
|
|
length: true,
|
|
width: true,
|
|
height: true,
|
|
weight: true,
|
|
quantity: true,
|
|
typeShow: true,
|
|
},
|
|
errors: null,
|
|
};
|
|
},
|
|
// watch: {
|
|
// showServiceItem: {
|
|
// handler: function () {
|
|
// this.show = this.showServiceItem;
|
|
// },
|
|
// },
|
|
// },
|
|
methods: {
|
|
validators() {
|
|
if (is.empty(this.formData.package) || this.formData.package=="0") {
|
|
this.validation.package = false;
|
|
} else {
|
|
this.validation.package = true;
|
|
}
|
|
if (is.empty(this.formData.length) || IsNumber(this.formData.length)==false) {
|
|
this.validation.length = false;
|
|
} else {
|
|
this.validation.length = true;
|
|
}
|
|
if (is.empty(this.formData.width) || IsNumber(this.formData.width)==false) {
|
|
this.validation.width = false;
|
|
} else {
|
|
this.validation.width = true;
|
|
}
|
|
if (is.empty(this.formData.height) || IsNumber(this.formData.height)==false) {
|
|
this.validation.height = false;
|
|
} else {
|
|
this.validation.height = true;
|
|
}
|
|
if (is.empty(this.formData.weight) || IsNumber(this.formData.weight)==false) {
|
|
this.validation.weight = false;
|
|
} else {
|
|
this.validation.weight = true;
|
|
}
|
|
if (is.empty(this.formData.quantity) || this.formData.quantity=="0") {
|
|
this.validation.quantity = false;
|
|
} else {
|
|
this.validation.quantity = true;
|
|
}
|
|
if(this.typeLength<=0){
|
|
this.validation.typeShow = false;
|
|
}else{
|
|
this.validation.typeShow = true;
|
|
}
|
|
|
|
this.errors = Object.entries(this.validation).filter(
|
|
(e) => e[1] == false
|
|
);
|
|
if (this.errors.length > 0) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
changeType(serviceItems) {
|
|
// this.validation.typeShow = serviceItems.length > 0 ? false : true;
|
|
this.typeLength = serviceItems.length;
|
|
this.formData.selectServiceItems = serviceItems;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
delService(){
|
|
this.$emit('delExhibitionService')//第一个参数是方法名，第二个为传递的参数
|
|
},
|
|
updateLength(value){
|
|
this.formData.length = value;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
updateWidth(value){
|
|
this.formData.width = value;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
updateHeight(value){
|
|
this.formData.height = value;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
updateWeight(value){
|
|
this.formData.weight = value;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
updateQuantity(value){
|
|
this.formData.quantity = value;
|
|
this.$emit("ChangeCosts",{type: 'stacker',value: this.formData});
|
|
},
|
|
updatePackape(value){
|
|
if(this.selectPackageList.length>0){
|
|
for(let i=0;i<this.selectPackageList.length;i++){
|
|
if(this.selectPackageList[i].id == value){
|
|
this.formData.selectPackape = this.selectPackageList[i];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
this.formData.package = value;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
select {
|
|
-moz-appearance: none;
|
|
/* Firefox */
|
|
-webkit-appearance: none;
|
|
/* Safari and Chrome */
|
|
appearance: none;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-size: 9px 6px;
|
|
background-position: right 20px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.service-info {
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 5px;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-size: 100%;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
width: 16px;
|
|
height: 10px;
|
|
transition: all 0.2s linear;
|
|
}
|
|
&.show {
|
|
&::after {
|
|
transition: all 0.2s linear;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
|
|
}
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
|