pc_shop_site/components/product/ProductRight.vue

<template>
  <div class="product-right">
    <div class="product-right-top">
      <div class="title">
        <span
          class="title-1"
          ref="title">{{ pageData.product_name }}</span>
        <span class="title-2">{{ pageData.product_code }}</span>
        <img
          :src="item.images"
          v-for="item of pageData.cycle"
          :key="item.images"
          class="title-3" />
        <img
          :src="item.url"
          v-for="item of pageData.icon"
          :key="item.url" class="title-4" />
      </div>
      <ul class="color" v-if="pageData.main.image_color?.length">
        <li  
            v-for="(item,i) of pageData.main.image_color"
            :key="item.id">
            <div class="color-item" v-if="item.color?.img">
              <div @click="setSmImgUlIdx(computedIndex(i))" :class="currentPre == (computedIndex(i)) ? 'slip' : ''">
                <el-tooltip
                :content="item.color?.name"
                placement="top"
                effect="dark">
                  <img
                  :src="item.color?.img && !$mediaRegExp.test(item.color?.img) ? $OSS_PREFIX + item.color?.img : item.color?.img" />
                </el-tooltip>
              </div>
            </div>
        </li>
      </ul>
      <tab-nav 
        :tabList="tabList"
        :currTab.sync="typeTab"
        :marginTop="15"  :fontSize="16"
        :liWidth="130" :liHeight="40"
        :marginRight="5" :marginBottom="25"
        @handle="clickNav" />
    </div>
    <div class="product-right-bottom">
      <div 
        class="details"
        v-show="typeTab == 0">
        <div class="details-1" v-if="pageData.feature_data">
          <h3>Features</h3>
          <ul>
            <li v-for="(i, key) in pageData.feature_data" :key="key">{{ i }}</li>
          </ul>
        </div>
        <div class="details-1" v-if="comInfo.description">
          <h3>Description</h3>
          <p v-html="comInfo.description"></p>
        </div>
        <div class="details-2" v-if="pageData.pbo">
          <h3>Product Branding Information</h3>
          <p v-html="pageData.pbo"></p>
        </div>
        <div class="details-3">
          <ul
            v-if="
              comInfo.product_size ||
              comInfo.product_material ||
              comInfo.moq ||
              comInfo.included_packaging ||
              comInfo.optional_packaging ||
              comInfo.print_size_area ||
              comInfo.product_dimensions ||
              comInfo.additional_info
            ">
            <li>
              <div class="title">Product Info</div>
            </li>
            <li v-if="comInfo.product_size">
              <div class="point">Product Size</div>
              <div
                class="info"
                v-html="comInfo.product_size"></div>
            </li>
            <li v-if="pageData.main?.colors_text">
              <div class="point">Colour</div>
              <div
                class="info"
                v-html="pageData.main?.colors_text"></div>
            </li>
            <li v-if="comInfo.product_material">
              <div class="point">Material</div>
              <div
                class="info"
                v-html="comInfo.product_material"></div>
            </li>
            <li v-if="pageData.moq">
              <div class="point">MOQ</div>
              <div
                class="info"
                v-html="pageData.moq"></div>
            </li>
            <li v-if="comInfo.included_packaging">
              <div class="point">Included Packaging</div>
              <div
                class="info blue"
                v-for="(item, i) in comIncluded_packaging"
                :key="item">
                <nuxt-link
                  v-if="isProduct(item.trim())"
                  :to="{ name: 'product-code', params: { code: item.trim() } }"
                  ><span
                    >{{ item
                    }}<em v-if="i < comIncluded_packaging.length - 1">,</em></span
                  ></nuxt-link
                >
                <span v-else
                  >{{ item
                  }}<em v-if="i < comIncluded_packaging.length - 1">,</em></span
                >
              </div>
            </li>
            <li v-if="comInfo.optional_packaging">
              <div class="point">Optional Packaging</div>
              <div
                class="info blue"
                v-for="(item, i) in comOptional_packaging"
                :key="item">
                <nuxt-link
                  v-if="isProduct(item.trim())"
                  :to="{ name: 'product-code', params: { code: item.trim() } }"
                  ><span
                    >{{ item
                    }}<em v-if="i < comOptional_packaging.length - 1">,</em></span
                  ></nuxt-link
                >
                <span v-else
                  >{{ item
                  }}<em v-if="i < comOptional_packaging.length - 1">,</em></span
                >
              </div>
            </li>
            <li v-if="comInfo.optional_attachments">
              <div class="point">Optional Attachments</div>
              <div class="info">
                <nuxt-link
                  :to="{ name: 'product-code', params: { code: item } }"
                  v-for="(item, i) in comOptional_attachments"
                  :key="item"
                  ><span
                    >{{ item
                    }}<em v-if="i < comOptional_attachments.length - 1"
                      >,</em
                    ></span
                  ></nuxt-link
                >
              </div>
            </li>
            <li v-if="comInfo.product_dimensions">
              <div class="point">Product dimensions</div>
              <div
                class="info"
                v-html="comInfo.product_dimensions"></div>
            </li>
            <li v-if="comInfo.additional_info">
              <div class="point">Additional Info</div>
              <div
                class="info"
                v-html="comInfo.additional_info"></div>
            </li>
          </ul>
          <!-- <el-button @click="ticketFormVisible = true"
          v-if="isLogin && /\@promocollection.com.au/.test(userInfo.email)">Ticket</el-button> -->
          <ul
            v-if="
              comInfo.print_position ||
              comInfo.print_size_area ||
              comInfo.print_marketing
            ">
            <li>
              <div class="title">Print Info</div>
            </li>
            <li v-if="comInfo.print_position">
              <div class="point">Print Position</div>
              <div
                class="info"
                v-html="comInfo.print_position"></div>
            </li>
            <li v-if="comInfo.print_size_area">
              <div class="point">Print Size Area</div>
              <div
                class="info"
                v-html="comInfo.print_size_area"></div>
            </li>
            <li v-if="comInfo.print_marketing">
              <div class="point">Print Marketing</div>
              <div
                class="info"
                v-html="comInfo.print_marketing"></div>
            </li>
          </ul>
          <ul
            v-if="
              comInfo.data_services ||
              comInfo.chip_grade ||
              comInfo.certifications ||
              comInfo.capacity ||
              comInfo.warranty ||
              comInfo.battery_type ||
              comInfo.additional_description
            ">
            <li>
              <div class="title">Functional Info</div>
            </li>
            <li v-if="comInfo.data_services">
              <div class="point">Data Services</div>
              <div
                class="info"
                v-html="comInfo.data_services"></div>
            </li>
            <li v-if="comInfo.chip_grade">
              <div class="point">Chip Grade</div>
              <div
                class="info"
                v-html="comInfo.chip_grade"></div>
            </li>
            <li v-if="comInfo.certifications">
              <div class="point">Certifications</div>
              <div
                class="info"
                v-html="comInfo.certifications"></div>
            </li>
            <li v-if="comInfo.capacity">
              <div class="point">Capacity</div>
              <div
                class="info"
                v-html="comInfo.capacity"></div>
            </li>
            <li v-if="comInfo.warranty">
              <div class="point">Warranty</div>
              <div
                class="info"
                v-html="comInfo.warranty"></div>
            </li>
            <li v-if="comInfo.battery_type">
              <div class="point">Battery Type</div>
              <div
                class="info"
                v-html="comInfo.battery_type"></div>
            </li>
            <li v-if="comInfo.additional_description">
              <div class="point">Additional Info</div>
              <div
                class="info"
                v-html="comInfo.additional_description"></div>
            </li>
          </ul>
        </div>
        <p class="details-1">
          Due to differences between production batches, product sizes may vary
          slightly. The above Colours and measurements are approximate, and for
          guidance only.
        </p>
        <!-- <div v-for="(item,index) in pageData.showcase" :key="index" class="showcase">
            <a :href="item.url">
							<el-image lazy  :src="item.images" fit="cover" style="width: 100%; height: 100%"></el-image>
            </a>
          </div> -->
      </div>
      <div
        class="quote"
        v-show="typeTab == 1">
        <quote
          ref="quote"
          :pageData="pageData"
          :id="id" />
      </div>
      <div
        class="stock"
        v-show="typeTab == 2">
        <div v-if="stockData.length > 0">
          <stock-table
          :data="stockData"></stock-table>
          <p class="quote-tips">For quantities over available stock levels, please contact us for pricing and timing</p>  
        </div>
        <div class="quote-tips" v-else>
          This product is made offshore, and is available for any quantity equal to, or above the listed MOQ
        </div>
      </div>
      <div
        v-show="typeTab == 3">
        <h5>Maketing Resource</h5>
        <div class="resources maketing">
          <p
            @click="download(comInfo.line_artwork)"
            v-if="comInfo.line_artwork">
            <img src="@/assets/img/lineart.png" />Lineart Download
          </p>
          <p
            @click="openLink(pageData.edm_url)"
            v-if="pageData.edm_url">
            <img src="@/assets/img/email.png" />Email Digital Marketing
          </p>
          <p
            @click="onPreview"
            v-if="productImgArr?.length">
            <img src="@/assets/img/product.png" />Product Image
          </p>
          <p
            @click="openLink(pageData.cataloque_url)"
            v-if="pageData.cataloque_url">
            <img src="@/assets/img/cataloque.png" />Catalogue
          </p>
          <p
            @click="download(comInfo.product_instruction)"
            v-if="comInfo.product_instruction">
            <img src="@/assets/img/instruction.png" />Product Instruction
          </p>
        </div>
        <h5 v-if="pageData.goodsCompliance?.length">Compliance Resource</h5>
        <div class="resources compliance">
          <img :src="item.filter?.img" v-for="(item,i) in pageData.goodsCompliance" :key=i @click="download(item.pic)">
        </div>
      </div>
      <div
        class="change"
        v-show="typeTab == 4">
        <change-table :data="pageData.change"></change-table>
      </div>
    </div>
    <no-ssr>
      <!-- Ticket浮动框 -->
      <form-dialog
          title="网页产品问题反馈"
          sendbtnCext="提交"
          cancelbtnCext="取消"
          :labelWidth=90
          :marginBottom=0
          :emailForm="ticketForm"
          :enquiryConfig="ticketConfig"
          :visible.sync="ticketFormVisible"
          @handleSend="sendTicket"
          :rules="rules"></form-dialog>
      <!-- 右侧project浮动框 -->
      <project
        :productInfo="pageData"
        @handleAdd="openProjectdDialog"
        @save-selected-data="saveUserSelected"></project>
      <!-- 加入project弹框 -->
      <project-dialog
        :visible.sync="projectdDialogVisible"
        :id="pageData.id"
        :projectObj="projectObj"
        :isCopy="false"></project-dialog>
      <ElImageViewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="productImgArr" />
    </no-ssr>
  </div>
</template>

<script>
/*eslint-disable*/
import Quote from './Quote'
import StockTable from '@/components/table/StockTable'
import ChangeTable from '@/components/table/ChangeTable'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { mapMutations, mapActions } from 'vuex'

export default {
  components: { StockTable, ChangeTable, Quote, ElImageViewer },
  props: {
    pageData: {},
    id: Number,
  },
  // head(){
  //   return {
  //     meta: [{ 'http-equiv': "Content-Security-Policy", content: "upgrade-insecure-requests" }]
  //   }
  // },
  data() {
    return {
      tabList: [
        {
          name: 'Details',
          isClick: false,
          isShow: true,
        },
        {
          name: 'Quick Quote',
          isClick: false,
          isShow: true,
        },
        // {
        //   name: 'Stock',
        //   isClick: false,
        //   isShow: true,
        // },
        // {
        //   name: 'Resources',
        //   isClick: false,
        //   isShow: true,
        // },
        // {
        //   name: 'Changes',
        //   isClick: false,
        //   isShow: false,
        // },
      ],
      typeTab: 0,
      stockData: [],
      showViewer: false,
      projectdDialogVisible: false,
      projectObj: {
        decoration_id: '',
      },
      ticketFormVisible:false,
      ticketForm:{
        英文品名: this.pageData.product_name,
        SKU: this.pageData.product_code,
        问题类型: [],
        反馈详情: '',
      },
      ticketConfig: [
        { prop: '英文品名', type: 'text' },
        { prop: 'SKU', type: 'text' },
        {
          prop: '问题类型',
          type: 'checkbox',
          selectlist: ['网页信息','供应商质量','样品管理','产品部管理'],
        },
        { prop: '反馈详情', type: 'textarea' },
      ],
      rules: {
        '问题类型': [{ required: true, message: 'Please select', trigger: 'change' }],
        '反馈详情': [{ required: true, message: 'Please enter', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.$store.dispatch('getShopInfo').then(res => {
      console.log(res.hide_prices)
      console.log(typeof res.hide_prices)
      this.tabList[1].isShow = [0, '0'].includes(res.hide_prices)
    })
  },
  computed: {
    currentPre(){
      return this.$store.state.product.smImgUlIdx
    },
    isLogin() {
      return !!this.$store.state.userInfo?.email
    },
    comInfo() {
      return this.pageData?.main
    },
    productImgArr() {
      return this.comInfo.mergeImages
    },
    userInfo() {
      return this.$store.state.userInfo
    },
    comIncluded_packaging() {
      return this.comInfo.included_packaging.split(',')
    },
    comOptional_packaging() {
      return this.comInfo.optional_packaging.split(',')
    },
    comOptional_attachments() {
      return this.comInfo.optional_attachments.split(',')
    },
  },
  watch:{
    //登陆立即显示Quick Quote和Changes选项
    // isLogin:{
    //   handler(val){
    //     if(val){
    //       this.tabList[1].isShow = true
    //       this.tabList[4].isShow = true
    //     }
    //   },
    //   immediate: true
    // }
  },
  mounted() {
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations({ openDialog: 'openDialog', setSmImgUlIdx: 'product/setSmImgUlIdx', setLoading: 'product/setLoading' }),
    // 判断字符串是否符合商品code规律
    isProduct(str) {
      return /^[A-z]{1,4}\d{1,4}[A-z]?$/.test(str)
    },
    computedIndex(i) {
      return this.pageData.main?.image ? 1 + i : i;
    },
    // 保存一下用户选择的周期、型号、打印服务、addon、packaging, product builder页面要用到
    saveUserSelected() {
      let result = {
        addon: [],
        packaging: [],
        printService: {},
      }
      for (let key in this.allSelData) {
        if (key === 'addon') {
          result.addon = this.allSelData[key].map(item => item.id)
        }
        if (key === 'packaging') {
          result.packaging = this.allSelData[key].map(item => item.id)
        }
      }
      // 周期
      if (this.priceList[this.currTab].cycle_id) {
        result.cycle = this.priceList[this.currTab].cycle_id
      }
      // 型号
      if (this.priceList[this.currTab].undecoratedSelectId) {
        result.model = this.priceList[this.currTab].undecoratedSelectId
      }
      // 打印服务
      const printService = this.priceList[this.currTab][2]
      console.log(printService, 'printService')
      if (Array.isArray(printService) && printService.length) {
        printService.forEach(item => {
          if (item.decorationSelectId) {
            const temp = item.decorationList.filter(
              i => i.id === item.decorationSelectId
            )
            result.printService[`${item.id}`] = {
              id: item.decorationSelectId,
              num: temp[0].num,
            }
          }
        })
      }
      localStorage.setItem(
        `product-user-select-${this.$route.params.code}`,
        JSON.stringify(result)
      )
    },
    getStock() {
      this.$axios.get('/quote/stock_new', { params: {id: this.id} }).then(res => {
        this.stockData = res.result
      })
    },
    openProjectdDialog() {
      if (!isLogin) {
        this.openDialog()
        return
      }
      this.projectdDialogVisible = true
      this.projectObj.cycle_id = this.comCurrPriceList.cycle_id
      this.projectObj.price_unit_id = this.comCurrPriceList.undecoratedSelectId
      //获取Decoration Method
      this.projectObj.decoration_methods = this.comDecoration.map(item => {
        let temp = {}
        temp.decoration_id = item.id
        temp.price_unit_id = item.parentId
        temp.colours_number = item.num
        return temp
      })

      this.projectObj.addition_ids = this.allSelData.addon
        .map(item => {
          return item.id
        })
        .join()
      this.projectObj.packaging_addition_ids = this.allSelData.packaging
        .map(item => {
          return item.id
        })
        .join()
    },
    download(url) {
      var urlStr = url.match('[^/]+(?!.*/)')[0]
      const repaceDomainUrl = this.$utils.repaceDomain(url)
      if (url.endsWith(".pdf")) {
        this.$utils.handleFileDownload(repaceDomainUrl, urlStr, false)
      } else {
        this.$utils.downloadBlob(url, urlStr)
      }
    },
    onPreview() {
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    clickNav(i) {
      if (this.typeTab == 1 && !this.tabList[1].isClick) {
        if (this.tabList[1].isShow) {
          this.$refs.quote.getQuote()
          this.$refs.quote.getWeight()
          this.tabList[1].isClick = true
        }
        // this.checkNav(1)
      } else if (this.typeTab == 2 && !this.tabList[2].isClick) {
        this.checkNav(2)
      }
    },
    checkNav(i) {
      if (this.isLogin) {
        this.getUserInfo()
        if (this.userInfo.audit_status == 1) {
          if (i == 1 && this.tabList[1].isShow) {
            this.$refs.quote.getQuote()
            this.$refs.quote.getWeight()
            this.tabList[1].isClick = true
          } else if (i == 2) {
            this.getStock()
            this.tabList[2].isClick = true
          }
        } else {
          this.typeTab = 0
          this.$message({
            message: 'Your account has not been audited',
            type: 'warning',
          })
        }
      } else {
        this.openDialog()
        this.typeTab = 0
      }
    },
    openLink(url) {
      let a = url.indexOf('http') > -1 ? url : 'http://' + url
      window.open(a, '_blank')
    },
    sendTicket() {
      this.$axios.post('/ticket/add', { product_code: this.pageData.product_code,ticket_type: this.ticketForm['问题类型'].join(),content: this.ticketForm['反馈详情']  }).then(res => {
        this.setLoading(false)
        this.$notify({
              title: "success",
              message: "提交成功",
              type: "success",
              duration: 3000,
            });
      }).catch(() => {
          this.setLoading(false)
        })
    }
  },
}
</script>

<style lang="scss" scoped>
@import './product.scss';
</style>