change: 商品详情.右侧增加ticket.quickenquiry.itemrecord按钮.

components/Project.vue

@@ -0,0 +1,205 @@
+<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/2IuJGuGLCRBROyJXZetQ"
+        target="_target"
+        v-if="isLogin && /\@promocollection(.com.au|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="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>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    productInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      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.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;
+      &: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>

components/product/ProductRight.vue

@@ -339,6 +339,8 @@
           :visible.sync="ticketFormVisible"
           @handleSend="sendTicket"
           :rules="rules"></form-dialog> -->
+      <!-- 右侧project浮动框 -->
+      <project :productInfo="pageData"></project>
       <ElImageViewer
         v-if="showViewer"
         :on-close="closeViewer"