uk_front/components/Project.vue

<template>
  <section class="project-wrap">
    <div class="project">
      <div
        v-show="false"
        @click="toProductBuilder"
        class="flex btn-nav">
        <img src="@/assets/img/builder.png" /><span>Product builder</span>
      </div>
      <!-- <div
        @click="handleAdd"
        class="flex btn-nav">
        <img src="@/assets/img/add.png" /><span>Add to my Project</span>
      </div>
      <div @click="openZoho" class="flex">
        <img src="@/assets/img/question.png" /><span>Quick Question</span>
      </div> -->
      <a
        :href="
          'https://forms.zohopublic.com/promocollection/form/ClientDetails/formperma/1Xq9qhTYZd3EuGJarUVql1FUXi096vI60BnG-lQ0Gh4?email=' +
          encodeURIComponent(userInfo.email) +
          '&product_code=' +
          encodeURIComponent(productInfo.product_code)
        "
        target="_target"
        v-if="isLogin && domainList.some(i=> i.test(userInfo.email))">
        <div class="flex btn-nav">
          <img src="@/assets/img/tick.png" /><span>Ticket</span>
        </div>
      </a>
      <a
        id="quickEnqriryLink"
        target="_blank">
        <div
          class="flex btn-nav"
          v-if="isLogin">
          <img
            src="@/assets/img/xunjia.png"
            style="opacity: 0.8"
            alt="" /><span>Quick Enquiry</span>
        </div>
      </a>
      <a
        target="_blank"
        :href="shouldButtonRecordDisabled ? 'javascript:void(0)' : `/product-record/${productInfo.product_code}?version=${productInfo.record?.version || recordData?.version}`"
        @click="shouldButtonRecordDisabled && $event.preventDefault()"
        v-show="btnShow">
        <div class="flex btn-nav" :class="{ disabled: shouldButtonRecordDisabled }">
          <img
            src="@/assets/img/tick.png" /><span>Item Record</span>
        </div>
      </a>
      <div v-if="productInfo.carbon?.length"
        class="flex btn-nav" @click="openFootprint">
        <img src="@/assets/img/esg/co2.png" />
        <span>Carbon Footprint</span>
      </div>
    </div>
  </section>
</template>
<script>

export default {
  props: {
    productInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      domainList: [
        /\@promocollection/,
        /\@primepac/,
        /\@pangea/,
        /\@phonelocker/,
        /\@phoenixexhibit/,
      ],
      defaultURL: 'https://zfrmz.com/2IuJGuGLCRBROyJXZetQ',
      recordData: null
    }
  },
  computed: {
    isLogin() {
      return !!this.$store.state.userInfo?.email
    },
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    btnShow() {
      return (
        this.isLogin &&
        /@promocollection(.com.au|.uk)/.test(this.userInfo.email)
      )
    },
    shouldButtonRecordDisabled() {
      if(this.productInfo.record && this.productInfo.record?.record_reason?.length) {
        return false
      }
      return !(this.recordData?.record_reason?.length)
    },
  },
  watch: {
    isLogin: {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.$axios.get(`/uk-api/uk/goods/detail?product_code=${this.productInfo.product_code}`).then(res => {
            if (res.code === 1) {
              this.recordData = res.result.record
            }
          })
        }
      },
    }
  },
  mounted() {
    this.generateLink()
  },
  methods: {
    generateLink() {
      const target = document.getElementById('quickEnqriryLink')
      const config = {
        name: this.userInfo.contacts,
        phone: this.userInfo.phone,
        email: this.userInfo.email,
        company: this.userInfo.company,
        product: `${this.productInfo.alias_name||this.productInfo.product_name} & ${this.productInfo.product_code}`,
      }

      let query = ''
      for (const key in config) {
        if (config[key]) {
          query += `&${key}=${encodeURIComponent(config[key])}`
        }
      }
      query = query.slice(1)
      target.href = this.defaultURL + '?' + query
    },
    handleAdd() {
      this.$emit('handleAdd')
    },
    openZoho() {
      document.querySelector('#zsiq_float').click()
    },
    toProductBuilder() {
      if (!this.$utils.checkLogin()) return
      this.$emit('save-selected-data')
      setTimeout(() => {
        location.href =
          location.origin + `/product-builder/${this.$route.params.code}`
      }, 0)
    },
    openTicket(){
      this.$emit('handleOpenTicket')
    },
    openFootprint(){
      this.$emit('handleOpenFootprint')
    }
  },
}
</script>

<style lang="scss" scoped>
// $width: 100px;
@media screen and (max-width: 1400px) {
  .btn-nav {
    span {
      display: none !important;
    }
  }
}
// @media screen and (min-width:1401px){
//   .project-wrap{
//     right:10px;
//   }
// }
.project-wrap {
  position: fixed;
  right: 10px;
  top: 172px;
  z-index: 1;
  background-color: transparent;
  font-size: 14px;
  .project {
    .btn-nav {
      text-align: center;
      height: 40px;
      border-radius: 40px;
      padding: 0 10px;
      cursor: pointer;
      border: none;
      color: #fff;
      margin-bottom: 15px;
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
      background-color: #004a97;
      &:hover {
          background-color: #013269;
      }
      img {
        width: 20px;
        height: 20px;
      }
    }
    .disabled {
      background-color: #797979;
      cursor: not-allowed;
      &:hover {
        background-color: #797979;
      }
    }
    a {
      &:hover {
        div {
          background-color: #013269;
        }
      }
      span {
        display: inline-block;
        margin-left: 5px;
        text-align: center;
        flex:1;
      }
    }
  }
}
</style>