ShowEasyFrontEnd/FrontEnd/components/service/content/selectExhibitionService.vue

<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>&nbsp;({{ $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>