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://zfrmz.com/qOMwwPGF2hVWnNheXp3h"
        target="_target"
        v-if="isLogin && /\@promocollection.uk/.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="`/product-record/${productInfo.product_code}?version=${productInfo.record.version}`"
        v-if="shouldButtonRecordShow">
        <div class="flex btn-nav">
          <img
            src="@/assets/img/tick.png" /><span>Item Record</span>
        </div>
      </a>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    productInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      defaultURL: 'https://zfrmz.com/felY59ar2z3FaOTSRxmZ',
    }
  },
  computed: {
    isLogin() {
      return !!this.$store.state.userInfo?.email
    },
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    shouldButtonRecordShow() {
      return (
        this.isLogin &&
        /\@promocollection.uk/.test(this.userInfo.email) &&
        this.productInfo.record &&
        this.productInfo.record?.record_reason?.length
      )
    },
  },
  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.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)
    },
  },
}
</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;
      img {
        width: 20px;
        height: 20px;
      }
    }
    a {
      &:hover {
        div {
          background-color: #013269;
        }
      }
      span {
        display: inline-block;
        margin-left: 5px;
        text-align: center;
        flex:1;
      }
    }
  }
}
</style>