ProductRight.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. <template>
  2. <div class="product-right">
  3. <div class="product-right-top">
  4. <div class="title">
  5. <span
  6. class="title-1"
  7. ref="title">{{ pageData.product_name }}</span>
  8. <span class="title-2">{{ pageData.product_code }}</span>
  9. <img
  10. :src="item.images"
  11. v-for="item of pageData.cycle"
  12. :key="item.images"
  13. class="title-3" />
  14. <img
  15. :src="item.url"
  16. v-for="item of pageData.icon"
  17. :key="item.url" class="title-4" />
  18. </div>
  19. <ul class="color" v-if="pageData.main.image_color?.length">
  20. <li
  21. v-for="(item,i) of pageData.main.image_color"
  22. :key="item.id">
  23. <div class="color-item" v-if="item.color?.img">
  24. <div @click="setSmImgUlIdx(computedIndex(i))" :class="currentPre == (computedIndex(i)) ? 'slip' : ''">
  25. <el-tooltip
  26. :content="item.color?.name"
  27. placement="top"
  28. effect="dark">
  29. <img
  30. :src="item.color?.img && !$mediaRegExp.test(item.color?.img) ? $OSS_PREFIX + item.color?.img : item.color?.img" />
  31. </el-tooltip>
  32. </div>
  33. </div>
  34. </li>
  35. </ul>
  36. <tab-nav
  37. :tabList="tabList"
  38. :currTab.sync="typeTab"
  39. :marginTop="15" :fontSize="16"
  40. :liWidth="130" :liHeight="40"
  41. :marginRight="5" :marginBottom="25"
  42. @handle="clickNav" />
  43. </div>
  44. <div class="product-right-bottom">
  45. <div
  46. class="details"
  47. v-show="typeTab == 0">
  48. <div class="details-1" v-if="pageData.feature_data">
  49. <h3>Features</h3>
  50. <ul>
  51. <li v-for="(i, key) in pageData.feature_data" :key="key">{{ i }}</li>
  52. </ul>
  53. </div>
  54. <div class="details-1" v-if="comInfo.description">
  55. <h3>Description</h3>
  56. <p v-html="comInfo.description"></p>
  57. </div>
  58. <div class="details-2" v-if="pageData.pbo">
  59. <h3>Product Branding Information</h3>
  60. <p v-html="pageData.pbo"></p>
  61. </div>
  62. <div class="details-3">
  63. <ul
  64. v-if="
  65. comInfo.product_size ||
  66. comInfo.product_material ||
  67. comInfo.moq ||
  68. comInfo.included_packaging ||
  69. comInfo.optional_packaging ||
  70. comInfo.print_size_area ||
  71. comInfo.product_dimensions ||
  72. comInfo.additional_info
  73. ">
  74. <li>
  75. <div class="title">Product Info</div>
  76. </li>
  77. <li v-if="comInfo.product_size">
  78. <div class="point">Product Size</div>
  79. <div
  80. class="info"
  81. v-html="comInfo.product_size"></div>
  82. </li>
  83. <li v-if="pageData.main?.colors_text">
  84. <div class="point">Colour</div>
  85. <div
  86. class="info"
  87. v-html="pageData.main?.colors_text"></div>
  88. </li>
  89. <li v-if="comInfo.product_material">
  90. <div class="point">Material</div>
  91. <div
  92. class="info"
  93. v-html="comInfo.product_material"></div>
  94. </li>
  95. <li v-if="pageData.moq">
  96. <div class="point">MOQ</div>
  97. <div
  98. class="info"
  99. v-html="pageData.moq"></div>
  100. </li>
  101. <li v-if="comInfo.included_packaging">
  102. <div class="point">Included Packaging</div>
  103. <div
  104. class="info blue"
  105. v-for="(item, i) in comIncluded_packaging"
  106. :key="item">
  107. <nuxt-link
  108. v-if="isProduct(item.trim())"
  109. :to="{ name: 'product-code', params: { code: item.trim() } }"
  110. ><span
  111. >{{ item
  112. }}<em v-if="i < comIncluded_packaging.length - 1">,</em></span
  113. ></nuxt-link
  114. >
  115. <span v-else
  116. >{{ item
  117. }}<em v-if="i < comIncluded_packaging.length - 1">,</em></span
  118. >
  119. </div>
  120. </li>
  121. <li v-if="comInfo.optional_packaging">
  122. <div class="point">Optional Packaging</div>
  123. <div
  124. class="info blue"
  125. v-for="(item, i) in comOptional_packaging"
  126. :key="item">
  127. <nuxt-link
  128. v-if="isProduct(item.trim())"
  129. :to="{ name: 'product-code', params: { code: item.trim() } }"
  130. ><span
  131. >{{ item
  132. }}<em v-if="i < comOptional_packaging.length - 1">,</em></span
  133. ></nuxt-link
  134. >
  135. <span v-else
  136. >{{ item
  137. }}<em v-if="i < comOptional_packaging.length - 1">,</em></span
  138. >
  139. </div>
  140. </li>
  141. <li v-if="comInfo.optional_attachments">
  142. <div class="point">Optional Attachments</div>
  143. <div class="info">
  144. <nuxt-link
  145. :to="{ name: 'product-code', params: { code: item } }"
  146. v-for="(item, i) in comOptional_attachments"
  147. :key="item"
  148. ><span
  149. >{{ item
  150. }}<em v-if="i < comOptional_attachments.length - 1"
  151. >,</em
  152. ></span
  153. ></nuxt-link
  154. >
  155. </div>
  156. </li>
  157. <li v-if="comInfo.product_dimensions">
  158. <div class="point">Product dimensions</div>
  159. <div
  160. class="info"
  161. v-html="comInfo.product_dimensions"></div>
  162. </li>
  163. <li v-if="comInfo.additional_info">
  164. <div class="point">Additional Info</div>
  165. <div
  166. class="info"
  167. v-html="comInfo.additional_info"></div>
  168. </li>
  169. </ul>
  170. <!-- <el-button @click="ticketFormVisible = true"
  171. v-if="isLogin && /\@promocollection.uk/.test(userInfo.email)">Ticket</el-button> -->
  172. <ul
  173. v-if="
  174. comInfo.print_position ||
  175. comInfo.print_size_area ||
  176. comInfo.print_marketing
  177. ">
  178. <li>
  179. <div class="title">Print Info</div>
  180. </li>
  181. <li v-if="comInfo.print_position">
  182. <div class="point">Print Position</div>
  183. <div
  184. class="info"
  185. v-html="comInfo.print_position"></div>
  186. </li>
  187. <li v-if="comInfo.print_size_area">
  188. <div class="point">Print Size Area</div>
  189. <div
  190. class="info"
  191. v-html="comInfo.print_size_area"></div>
  192. </li>
  193. <li v-if="comInfo.print_marketing">
  194. <div class="point">Print Marketing</div>
  195. <div
  196. class="info"
  197. v-html="comInfo.print_marketing"></div>
  198. </li>
  199. </ul>
  200. <ul
  201. v-if="
  202. comInfo.data_services ||
  203. comInfo.chip_grade ||
  204. comInfo.certifications ||
  205. comInfo.capacity ||
  206. comInfo.warranty ||
  207. comInfo.battery_type ||
  208. comInfo.additional_description
  209. ">
  210. <li>
  211. <div class="title">Functional Info</div>
  212. </li>
  213. <li v-if="comInfo.data_services">
  214. <div class="point">Data Services</div>
  215. <div
  216. class="info"
  217. v-html="comInfo.data_services"></div>
  218. </li>
  219. <li v-if="comInfo.chip_grade">
  220. <div class="point">Chip Grade</div>
  221. <div
  222. class="info"
  223. v-html="comInfo.chip_grade"></div>
  224. </li>
  225. <li v-if="comInfo.certifications">
  226. <div class="point">Certifications</div>
  227. <div
  228. class="info"
  229. v-html="comInfo.certifications"></div>
  230. </li>
  231. <li v-if="comInfo.capacity">
  232. <div class="point">Capacity</div>
  233. <div
  234. class="info"
  235. v-html="comInfo.capacity"></div>
  236. </li>
  237. <li v-if="comInfo.warranty">
  238. <div class="point">Warranty</div>
  239. <div
  240. class="info"
  241. v-html="comInfo.warranty"></div>
  242. </li>
  243. <li v-if="comInfo.battery_type">
  244. <div class="point">Battery Type</div>
  245. <div
  246. class="info"
  247. v-html="comInfo.battery_type"></div>
  248. </li>
  249. <li v-if="comInfo.additional_description">
  250. <div class="point">Additional Info</div>
  251. <div
  252. class="info"
  253. v-html="comInfo.additional_description"></div>
  254. </li>
  255. </ul>
  256. </div>
  257. <p class="details-1">
  258. Due to differences between production batches, product sizes may vary
  259. slightly. The above Colours and measurements are approximate, and for
  260. guidance only.
  261. </p>
  262. <!-- <div v-for="(item,index) in pageData.showcase" :key="index" class="showcase">
  263. <a :href="item.url">
  264. <el-image lazy :src="item.images" fit="cover" style="width: 100%; height: 100%"></el-image>
  265. </a>
  266. </div> -->
  267. </div>
  268. <div
  269. class="quote"
  270. v-show="typeTab == 1">
  271. <quote
  272. ref="quote"
  273. :pageData="pageData"
  274. :id="id" />
  275. </div>
  276. <div
  277. class="stock"
  278. v-show="false">
  279. <div v-if="stockData.length > 0">
  280. <stock-table
  281. :data="stockData"></stock-table>
  282. <p class="quote-tips">For quantities over available stock levels, please contact us for pricing and timing</p>
  283. </div>
  284. <div class="quote-tips" v-else>
  285. This product is made offshore, and is available for any quantity equal to, or above the listed MOQ
  286. </div>
  287. </div>
  288. <div
  289. v-show="typeTab == 3">
  290. <h5>Maketing Resource</h5>
  291. <div class="resources maketing">
  292. <p
  293. @click="download(comInfo.line_artwork)"
  294. v-if="comInfo.line_artwork">
  295. <img src="@/assets/img/lineart.png" />Lineart Download
  296. </p>
  297. <p
  298. @click="openLink(pageData.edm_url)"
  299. v-if="pageData.edm_url">
  300. <img src="@/assets/img/email.png" />Email Digital Marketing
  301. </p>
  302. <p
  303. @click="onPreview"
  304. v-if="productImgArr?.length">
  305. <img src="@/assets/img/product.png" />Product Image
  306. </p>
  307. <p
  308. @click="openLink(pageData.cataloque_url)"
  309. v-if="pageData.cataloque_url">
  310. <img src="@/assets/img/cataloque.png" />Catalogue
  311. </p>
  312. <p
  313. @click="download(comInfo.product_instruction)"
  314. v-if="comInfo.product_instruction">
  315. <img src="@/assets/img/instruction.png" />Product Instruction
  316. </p>
  317. </div>
  318. <h5 v-if="pageData.goodsCompliance?.length">Compliance Resource</h5>
  319. <div class="resources compliance">
  320. <img :src="item.filter?.img" v-for="(item,i) in pageData.goodsCompliance" :key=i @click="download(item.pic)">
  321. </div>
  322. </div>
  323. <!-- <div
  324. class="change"
  325. v-show="typeTab == 4">
  326. <change-table :data="pageData.change"></change-table>
  327. </div> -->
  328. </div>
  329. <no-ssr>
  330. <!-- Ticket浮动框 -->
  331. <!-- <form-dialog
  332. title="网页产品问题反馈"
  333. sendbtnCext="提交"
  334. cancelbtnCext="取消"
  335. :labelWidth="90"
  336. :marginBottom="0"
  337. :emailForm="ticketForm"
  338. :enquiryConfig="ticketConfig"
  339. :visible.sync="ticketFormVisible"
  340. @handleSend="sendTicket"
  341. :rules="rules"></form-dialog> -->
  342. <ElImageViewer
  343. v-if="showViewer"
  344. :on-close="closeViewer"
  345. :url-list="productImgArr" />
  346. </no-ssr>
  347. </div>
  348. </template>
  349. <script>
  350. /*eslint-disable*/
  351. import Quote from './Quote'
  352. import StockTable from '@/components/table/StockTable'
  353. import ChangeTable from '@/components/table/ChangeTable'
  354. import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  355. import { mapMutations, mapActions } from 'vuex'
  356. export default {
  357. components: { StockTable, ChangeTable, Quote, ElImageViewer },
  358. props: {
  359. pageData: {},
  360. id: Number,
  361. },
  362. // head(){
  363. // return {
  364. // meta: [{ 'http-equiv': "Content-Security-Policy", content: "upgrade-insecure-requests" }]
  365. // }
  366. // },
  367. data() {
  368. return {
  369. tabList: [
  370. {
  371. name: 'Details',
  372. isClick: false,
  373. isShow: true,
  374. },
  375. {
  376. name: 'Quick Quote',
  377. isClick: false,
  378. isShow: false,
  379. },
  380. {
  381. name: 'Stock',
  382. isClick: false,
  383. isShow: false,
  384. },
  385. {
  386. name: 'Resources',
  387. isClick: false,
  388. isShow: true,
  389. },
  390. {
  391. name: 'Changes',
  392. isClick: false,
  393. isShow: false,
  394. },
  395. ],
  396. typeTab: 0,
  397. stockData: [],
  398. showViewer: false,
  399. projectdDialogVisible: false,
  400. projectObj: {
  401. decoration_id: '',
  402. },
  403. // ticketFormVisible:false,
  404. ticketForm:{
  405. 英文品名: this.pageData.product_name,
  406. SKU: this.pageData.product_code,
  407. 问题类型: [],
  408. 反馈详情: '',
  409. },
  410. ticketConfig: [
  411. { prop: '英文品名', type: 'text' },
  412. { prop: 'SKU', type: 'text' },
  413. {
  414. prop: '问题类型',
  415. type: 'checkbox',
  416. selectlist: ['网页信息','供应商质量','样品管理','产品部管理'],
  417. },
  418. { prop: '反馈详情', type: 'textarea' },
  419. ],
  420. rules: {
  421. '问题类型': [{ required: true, message: 'Please select', trigger: 'change' }],
  422. '反馈详情': [{ required: true, message: 'Please enter', trigger: 'blur' }]
  423. }
  424. }
  425. },
  426. computed: {
  427. currentPre(){
  428. return this.$store.state.product.smImgUlIdx
  429. },
  430. isLogin() {
  431. return !!this.$store.state.userInfo?.email
  432. },
  433. comInfo() {
  434. return this.pageData?.main
  435. },
  436. productImgArr() {
  437. return this.comInfo.mergeImages
  438. },
  439. userInfo() {
  440. return this.$store.state.userInfo
  441. },
  442. comIncluded_packaging() {
  443. return this.comInfo.included_packaging.split(',')
  444. },
  445. comOptional_packaging() {
  446. return this.comInfo.optional_packaging.split(',')
  447. },
  448. comOptional_attachments() {
  449. return this.comInfo.optional_attachments.split(',')
  450. },
  451. },
  452. watch:{
  453. //登陆立即显示Quick Quote和Changes选项
  454. isLogin:{
  455. handler(val){
  456. if(val){
  457. this.tabList[1].isShow = true
  458. // this.tabList[4].isShow = true
  459. }
  460. },
  461. immediate: true
  462. }
  463. },
  464. mounted() {
  465. },
  466. methods: {
  467. ...mapActions(['getUserInfo']),
  468. ...mapMutations({ openDialog: 'openDialog', setSmImgUlIdx: 'product/setSmImgUlIdx', setLoading: 'product/setLoading' }),
  469. // 判断字符串是否符合商品code规律
  470. isProduct(str) {
  471. return /^[A-z]{1,4}\d{1,4}[A-z]?$/.test(str)
  472. },
  473. computedIndex(i) {
  474. return this.pageData.main?.image ? 1 + i : i;
  475. },
  476. // 保存一下用户选择的周期、型号、打印服务、addon、packaging, product builder页面要用到
  477. saveUserSelected() {
  478. let result = {
  479. addon: [],
  480. packaging: [],
  481. printService: {},
  482. }
  483. for (let key in this.allSelData) {
  484. if (key === 'addon') {
  485. result.addon = this.allSelData[key].map(item => item.id)
  486. }
  487. if (key === 'packaging') {
  488. result.packaging = this.allSelData[key].map(item => item.id)
  489. }
  490. }
  491. // 周期
  492. if (this.priceList[this.currTab].cycle_id) {
  493. result.cycle = this.priceList[this.currTab].cycle_id
  494. }
  495. // 型号
  496. if (this.priceList[this.currTab].undecoratedSelectId) {
  497. result.model = this.priceList[this.currTab].undecoratedSelectId
  498. }
  499. // 打印服务
  500. const printService = this.priceList[this.currTab][2]
  501. console.log(printService, 'printService')
  502. if (Array.isArray(printService) && printService.length) {
  503. printService.forEach(item => {
  504. if (item.decorationSelectId) {
  505. const temp = item.decorationList.filter(
  506. i => i.id === item.decorationSelectId
  507. )
  508. result.printService[`${item.id}`] = {
  509. id: item.decorationSelectId,
  510. num: temp[0].num,
  511. }
  512. }
  513. })
  514. }
  515. localStorage.setItem(
  516. `product-user-select-${this.$route.params.code}`,
  517. JSON.stringify(result)
  518. )
  519. },
  520. // getStock() {
  521. // this.$axios.get('/api/quote/stock_new', { params: {id: this.id} }).then(res => {
  522. // this.stockData = res.result
  523. // })
  524. // },
  525. openProjectdDialog() {
  526. if (!isLogin) {
  527. this.openDialog()
  528. return
  529. }
  530. this.projectdDialogVisible = true
  531. this.projectObj.cycle_id = this.comCurrPriceList.cycle_id
  532. this.projectObj.price_unit_id = this.comCurrPriceList.undecoratedSelectId
  533. //获取Decoration Method
  534. this.projectObj.decoration_methods = this.comDecoration.map(item => {
  535. let temp = {}
  536. temp.decoration_id = item.id
  537. temp.price_unit_id = item.parentId
  538. temp.colours_number = item.num
  539. return temp
  540. })
  541. this.projectObj.addition_ids = this.allSelData.addon
  542. .map(item => {
  543. return item.id
  544. })
  545. .join()
  546. this.projectObj.packaging_addition_ids = this.allSelData.packaging
  547. .map(item => {
  548. return item.id
  549. })
  550. .join()
  551. },
  552. download(url) {
  553. var urlStr = url.match('[^/]+(?!.*/)')[0]
  554. const repaceDomainUrl = this.$utils.repaceDomain(url)
  555. if (url.endsWith(".pdf")) {
  556. this.$utils.handleFileDownload(repaceDomainUrl, urlStr, false)
  557. } else {
  558. this.$utils.downloadBlob(url, urlStr)
  559. }
  560. },
  561. onPreview() {
  562. this.showViewer = true
  563. },
  564. closeViewer() {
  565. this.showViewer = false
  566. },
  567. clickNav(i) {
  568. if (this.typeTab == 1 && !this.tabList[1].isClick) {
  569. this.checkNav(1)
  570. } else if (this.typeTab == 2 && !this.tabList[2].isClick) {
  571. this.checkNav(2)
  572. }
  573. },
  574. checkNav(i) {
  575. if (this.isLogin) {
  576. this.getUserInfo()
  577. if (this.userInfo.audit_status == 1) {
  578. if (i == 1) {
  579. this.$refs.quote.getQuote()
  580. // this.$refs.quote.getWeight()
  581. this.tabList[1].isClick = true
  582. } else if (i == 2) {
  583. // uk 没有这个
  584. // this.getStock()
  585. // this.tabList[2].isClick = true
  586. }
  587. } else {
  588. this.typeTab = 0
  589. this.$message({
  590. message: 'Your account has not been audited',
  591. type: 'warning',
  592. })
  593. }
  594. } else {
  595. this.openDialog()
  596. this.typeTab = 0
  597. }
  598. },
  599. openLink(url) {
  600. let a = url.indexOf('http') > -1 ? url : 'http://' + url
  601. window.open(a, '_blank')
  602. },
  603. // sendTicket() {
  604. // this.$axios.post('/api/ticket/add', { product_code: this.pageData.product_code,ticket_type: this.ticketForm['问题类型'].join(),content: this.ticketForm['反馈详情'] }).then(res => {
  605. // this.setLoading(false)
  606. // this.$notify({
  607. // title: "success",
  608. // message: "提交成功",
  609. // type: "success",
  610. // duration: 3000,
  611. // });
  612. // }).catch(() => {
  613. // this.setLoading(false)
  614. // })
  615. // }
  616. },
  617. }
  618. </script>
  619. <style lang="scss" scoped>
  620. @import './product.scss';
  621. </style>