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

<template>
    <div class="group tw-mb-[20px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[156px_200px_auto] xl:tw-grid-cols-[156px_200px_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("Place of delivery")}}：
                  <span class="required t12 md:t14">*</span></span>
              </label>
          </div>
        <elementSelectNew
          :select="{
            id: 'address1',
            label: '',
            required: true,
          }"
          :isRow="true"
          :itemsCenter="true"
          :labelWidth="0"
          :selectWidth="200"
          :selectList="selectAddressList"
          :default="formData.address1"
          :validation="validation.address1"
          @change="updateAddress($event)"
        ></elementSelectNew>
        <elementInputNew
            :input="{
            id: 'address2',
            required: true,
            type: 'text',
            placeholder: ''
            }"
            :maxlength="500"
            :validation="validation.address2"
            @change="formData.address2 = $event"
        >
        </elementInputNew>
      </div>
      <div class="element tw-my-[16px]">
        <div class="md:tw-flex tw-items-center">
            <label class="tw-block tw-mb-[20px] md:tw-mb-0 md:tw-mr-[10px] tw-min-w-[156px] t14 md:t16"><span>{{ $t('Date of delivery') }}：
            <span class="required  t12 md:t14">*</span></span></label>
            <selectDate @selected="selecteDateTime($event)"></selectDate>
            <span v-if="validation.select_date==false" class="required md:tw-ml-[20px]  t12 md:t14">{{ $t("Required.") }}</span>
        </div>
      </div>
      <div class="md:tw-flex tw-flex-col">
        <label class="tw-block tw-mb-[20px] md:tw-mr-[10px] tw-min-w-[156px] t14 md:t16"><span>{{ $t('Time of delivery') }}：
          <span class="required  t12 md:t14">*</span></span>
          <span v-if="validation.delivery_type==false" class="required md:tw-ml-[20px]  t12 md:t14">{{ $t("Required.") }}</span>
        </label>
        <div class="element tw-flex tw-items-center">
          <input
            id="Delivered1"
            type="radio"
            value="1"
            v-model="method"
            @change="selectRadio()"
          />
          <label for="Delivered1" class=" tw-font-normal t14 md:t16"
            ><span>{{ $t("Delivered to the exhibition hall on the same day") }}</span></label
          >
        </div>
        <div class="element md:tw-flex tw-items-center tw-mt-[15px]">
          <div class="tw-flex tw-items-center">
            <input
              id="Delivered2"
              type="radio"
              value="2"
              v-model="method"
              @change="selectRadio()"
            />
            <label for="Delivered2" class="t14 md:t16 tw-font-normal"
              ><span>{{ $t("Delivered to the exhibition site next day") }}</span></label
            >
          </div>
          <div class="tw-flex tw-ml-[35px] tw-mt-[5px] md:tw-ml-[20px] md:tw-mt-[0px]"><v-img max-width="20" :src="require('@/assets/svg/tip.svg')"></v-img><span class="tw-ml-[5px]">{{ $t("Must pay extra pressing fee") }}</span></div>
        </div>
      </div>
    </div>
  </template>
    <script>
  import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";
  import elementInputNew from "@/components/newComponent/form/ElementInputNew";
  import selectDate from "@/components/service/content/selectDate";
  import is from "is_js";
  export default {
    components: {
      elementSelectNew,
      elementInputNew,
      selectDate,
    },
    props: {
      selectAddressList: {
        type: Array,
      },
    },
    data() {
      return {
        method: null,
        // selectDates: '',
        formData: {
          address1: "0",
          address2: "",
          delivery_type: "",
          select_date: "",
        },
        validation: {
          address1: true,
          address2: true,
          delivery_type: true,
          select_date: true,
        },
        errors: null,
      };
    },
    methods: {
      reset() {
        this.formData = {
          address1: "0",
          address2: "",
          delivery_type: "",
          select_date: "",
        };
      },
      validators() {
        if (is.empty(this.formData.address1) || this.formData.address1 =="0") {
          this.validation.address1 = false;
        } else {
          this.validation.address1 = true;
        }
        if (is.empty(this.formData.address2)) {
          this.validation.address2 = false;
        } else {
          this.validation.address2 = true;
        }
        if (is.empty(this.formData.delivery_type)) {
          this.validation.delivery_type = false;
        } else {
          this.validation.delivery_type = true;
        }
        if (is.empty(this.formData.select_date)) {
          this.validation.select_date = false;
        } else {
          this.validation.select_date = true;
        }
  
        this.errors = Object.entries(this.validation).filter(
          (e) => e[1] == false
        );
        if (this.errors.length > 0) {
          return false;
        } else {
          return true;
        }
      },
      selectRadio(){
        this.formData.delivery_type = this.method;
        this.validation.delivery_type = true;
        this.$emit("ChangeCosts",{type: 'address',value: this.formData});
      },
      selecteDateTime(value){
        if(is.empty(value)){
          this.validation.select_date = false;
          this.formData.select_date = "";
        }else{
          this.validation.select_date = true;
          this.formData.select_date = value;
        }
        this.$emit("ChangeCosts",{type: 'address',value: this.formData});
      },
      updateAddress(value){
        this.formData.address1 = value;
        this.$emit("ChangeCosts",{type: 'address',value: this.formData});
      }
    },
  };
  </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;
    }
  </style>