category.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929
  1. import axios from 'axios'
  2. import algoliasearch from 'algoliasearch'
  3. import cloneDeep from 'lodash.clonedeep'
  4. const defaultSortFunc = (a, b) => {
  5. if (a.hasBestSeller !== b.hasBestSeller) {
  6. return b.hasBestSeller - a.hasBestSeller
  7. }
  8. if (a.hasNewProduct !== b.hasNewProduct) {
  9. return b.hasNewProduct - a.hasNewProduct
  10. }
  11. if (a.ranking !== b.ranking) {
  12. return b.ranking - a.ranking
  13. }
  14. return b.icon.length - a.icon.length
  15. }
  16. export default {
  17. computed: {
  18. computedProductList() {
  19. return this.productsList.filter(item => {
  20. let moqFlag = true
  21. // moq 过滤. 要筛出1到最大输入quantities范围的. 直接进入页面忽视这个值, 只有手动更改moq才会触发enableQuantity验证.
  22. if (this.enableQuantity && (!item.moq || item.moq > this.quantity)) {
  23. moqFlag = false
  24. }
  25. // 筛选基础价格, 只要有一个价格符合价格区间都算符合条件.
  26. let priceFlag = true
  27. const min = Number(item.price_min)
  28. const max = Number(item.price_max)
  29. if (max < this.priceMin || min > this.priceMax) {
  30. priceFlag = false
  31. }
  32. // 筛选颜色
  33. let colorFlag = true
  34. if (this.checkedColor.length) {
  35. if (Array.isArray(item.color) && item.color.length) {
  36. colorFlag = item.color.some(i => this.checkedColor.includes(i.id))
  37. } else {
  38. colorFlag = false
  39. }
  40. }
  41. // collection
  42. let collectionFlag = true
  43. if (this.checkedCollection.length) {
  44. if (Array.isArray(item.collections) && item.collections.length) {
  45. collectionFlag = item.collections.some(i =>
  46. this.checkedCollection.includes(i)
  47. )
  48. } else {
  49. collectionFlag = false
  50. }
  51. }
  52. // compliance flag
  53. let complianceFlag = true
  54. if (this.checkedCompliance.length) {
  55. if (Array.isArray(item.compliance) && item.compliance.length) {
  56. complianceFlag = item.compliance.some(i =>
  57. this.checkedCompliance.includes(i.id)
  58. )
  59. } else {
  60. complianceFlag = false
  61. }
  62. }
  63. let featureFlag = true
  64. if (this.checkedFeature.length) {
  65. if (Array.isArray(item.filter) && item.filter.length) {
  66. featureFlag = item.filter.some(i =>
  67. this.checkedFeature.includes(i.id)
  68. )
  69. } else {
  70. featureFlag = false
  71. }
  72. }
  73. const decorationFlag = true
  74. // if (this.checkedDecoration.length && item.pricePoint.length) {
  75. // decorationFlag = item.pricePoint.some(i => {
  76. // return i.decorationList.some(j =>
  77. // this.checkedDecoration.includes(j.id)
  78. // )
  79. // })
  80. // }
  81. let leadtimeFlag = true
  82. if (this.checkedLeadtime) {
  83. const cycleMap = Array.from(
  84. new Set(item.cycle.map(i => Number(i.id)))
  85. )
  86. const currentLeadtimeValue = this.leadTimeList.filter(
  87. i => i.id === this.checkedLeadtime
  88. )[0].value
  89. leadtimeFlag = currentLeadtimeValue.some(id => cycleMap.includes(id))
  90. }
  91. // console.log(moqFlag)
  92. // console.log(priceFlag)
  93. // console.log(leadtimeFlag)
  94. // console.log(colorFlag)
  95. // console.log(collectionFlag)
  96. // console.log(featureFlag)
  97. return (
  98. moqFlag &&
  99. priceFlag &&
  100. leadtimeFlag &&
  101. colorFlag &&
  102. collectionFlag &&
  103. complianceFlag &&
  104. featureFlag &&
  105. decorationFlag
  106. )
  107. })
  108. },
  109. },
  110. watch: {
  111. $route: {
  112. immediate: true,
  113. handler(to) {
  114. if (to.query.lead_time) {
  115. const temp = Number(to.query.lead_time)
  116. this.checkedLeadtime = typeof temp === 'number' ? temp : ''
  117. } else {
  118. this.checkedLeadtime = ''
  119. }
  120. if (to.query.pricetype) {
  121. this.priceId = Number(to.query.pricetype)
  122. } else {
  123. this.priceId = ''
  124. }
  125. if (to.query.feature) {
  126. this.checkedFeature = [Number(to.query.feature)]
  127. } else {
  128. this.checkedFeature = []
  129. }
  130. if (to.query.qty) {
  131. const qty = Number(to.query.qty)
  132. if (typeof qty === 'number') {
  133. this.quantity = qty
  134. }
  135. } else {
  136. this.quantity = 1000
  137. }
  138. // 刷新浏览器, 获得的参数是字符串类型, 点页面上的链接, 跳转过来取到的参数是数字类型...
  139. if (to.query.feature && Number(to.query.feature) === 54) {
  140. this.order_name = ''
  141. this.order_type = ''
  142. // this.command = 'Released: Newest to Oldest'
  143. }
  144. if (this.index) {
  145. this.getList()
  146. }
  147. },
  148. },
  149. computedProductList: {
  150. immediate: true,
  151. handler() {
  152. this.featureList = this.featureList.map(item => {
  153. return { ...item, count: 0 }
  154. })
  155. this.collectionsList = this.collectionsList.map(item => {
  156. return { ...item, count: 0 }
  157. })
  158. this.colourList = this.colourList.map(item => {
  159. return { ...item, count: 0 }
  160. })
  161. this.decorationList = this.decorationList.map(item => {
  162. return { ...item, count: 0 }
  163. })
  164. if (!this.leadtimeComputedFlag) {
  165. this.leadTimeList.forEach(item => {
  166. item.count = 0
  167. })
  168. }
  169. this.computedProductList.forEach(item => {
  170. // color 颜色
  171. // console.log(item.color, 'color')
  172. item.color.forEach(color => {
  173. const idx = this.colourList.findIndex(i => i.id === color.id)
  174. if (idx > -1) {
  175. this.colourList[idx].count++
  176. }
  177. })
  178. // collection
  179. item.collections.forEach(collection => {
  180. const idx = this.collectionsList.findIndex(
  181. i => i.name === collection
  182. )
  183. if (idx > -1) {
  184. this.collectionsList[idx].count++
  185. }
  186. })
  187. // filter / feature
  188. item.filter.forEach(filter => {
  189. const idx = this.featureList.findIndex(i => i.id === filter.id)
  190. if (idx > -1) {
  191. this.featureList[idx].count++
  192. }
  193. })
  194. // 打印服务
  195. item.pricePoint.forEach(decoration => {
  196. const idx = this.decorationList.findIndex(
  197. i => i.id === decoration.id
  198. )
  199. if (idx > -1) {
  200. this.decorationList[idx].count++
  201. }
  202. })
  203. // 周期 / leadtime
  204. if (!this.leadtimeComputedFlag) {
  205. const cycleMap = Array.from(
  206. new Set(item.cycle.map(i => Number(i.id)))
  207. )
  208. for (const i of this.leadTimeList) {
  209. if (i.id === 0) i.count++
  210. let flag = false
  211. cycleMap.forEach(cycle => {
  212. if (i.value.includes(cycle)) {
  213. flag = true
  214. }
  215. })
  216. if (flag) {
  217. i.count++
  218. }
  219. }
  220. }
  221. })
  222. this.cardList = this.computedProductList.slice(0, 12)
  223. this.total = this.computedProductList.length
  224. this.listQuery = {
  225. page: 1,
  226. limit: 12,
  227. }
  228. this.leadtimeComputedFlag = true
  229. },
  230. },
  231. categoryList() {
  232. const keyword =
  233. this.$route.params.secondCategory ||
  234. this.$route.params.firstCategory ||
  235. ''
  236. if (
  237. !this.$route.fullPath.includes('searchResult') &&
  238. !this.$route.params.thirdCategory &&
  239. this.categoryList.length &&
  240. keyword.length
  241. ) {
  242. const currentCate = this.getCategoryFromTree(
  243. { name: keyword },
  244. this.categoryList
  245. )
  246. this.cate = Array.isArray(currentCate.child) ? currentCate.child : []
  247. }
  248. },
  249. },
  250. async fetch() {
  251. const res = await this.$axios.post('/uk-api/common/shopProductList')
  252. this.categoryList = res.code === 1 ? res.result : []
  253. return true
  254. },
  255. data() {
  256. return {
  257. command: 'Default',
  258. commandList: [
  259. {
  260. label: 'Default',
  261. value: 'Default',
  262. },
  263. {
  264. label: 'Price: Low to high',
  265. value: 'Price: Low to high',
  266. },
  267. {
  268. label: 'Price: High to low',
  269. value: 'Price: High to low',
  270. },
  271. {
  272. label: 'Name: A to Z',
  273. value: 'Product Name:A-Z',
  274. },
  275. {
  276. label: 'Name: Z to A',
  277. value: 'Product Name:Z-A',
  278. },
  279. {
  280. label: 'Released: Newest to Oldest',
  281. value: 'create_time',
  282. },
  283. ],
  284. total: 0,
  285. listQuery: {
  286. page: 1,
  287. limit: 12,
  288. },
  289. blackList: ['111', '111.00', '999', '999.00', 111, 999],
  290. // 筛选器数据
  291. leadTimeList: [],
  292. // 非实体数据. 里面包含虚拟字段, 可能不会跟数据表一一对应, 用来做lead times集合筛选的.
  293. fakeLeadTimeList: [
  294. {
  295. name: '1 Week or less',
  296. id: 1,
  297. value: [34, 40, 24, 22, 41, 28],
  298. },
  299. {
  300. name: '2 Weeks or less',
  301. id: 2,
  302. value: [34, 40, 24, 22, 41, 16, 35, 28],
  303. },
  304. {
  305. name: '3 Weeks or less',
  306. id: 3,
  307. value: [34, 40, 24, 22, 41, 16, 35, 23, 42, 28],
  308. },
  309. {
  310. name: '4 Weeks or less',
  311. id: 4,
  312. value: [34, 40, 24, 22, 41, 16, 35, 23, 42, 18, 33, 28],
  313. },
  314. {
  315. name: '5 Weeks or less',
  316. id: 5,
  317. value: [34, 40, 24, 22, 41, 16, 35, 23, 42, 18, 33, 26, 28],
  318. },
  319. {
  320. name: '6 Weeks or less',
  321. id: 6,
  322. value: [34, 40, 24, 22, 41, 16, 35, 23, 42, 18, 33, 26, 21, 28],
  323. },
  324. {
  325. name: '6 Weeks or more',
  326. id: 7,
  327. value: [20, 19, 29, 31, 30, 32, 36, 37, 38, 39, 25],
  328. },
  329. ],
  330. colourList: [],
  331. collectionsList: [],
  332. featureList: [],
  333. decorationList: [],
  334. complianceList: [],
  335. // 筛选器数据 end
  336. productsList: [],
  337. cardList: [],
  338. // 顶部分类数据总和, 未筛选过的
  339. cate: [],
  340. order_name: '',
  341. order_type: '',
  342. enableQuantity: false,
  343. quantity: 1000,
  344. priceMin: 1000,
  345. priceMax: 0.01,
  346. priceRange1: 1,
  347. priceRange2: 1,
  348. checkedLeadtime: '',
  349. checkedColor: [],
  350. checkedDecoration: [],
  351. checkedFeature: [],
  352. checkedCollection: [],
  353. checkedCompliance: [],
  354. priceId: '',
  355. cancelSource: null,
  356. loaded: false,
  357. // leadtime的计数仅每次请求接口后重新计算一次
  358. leadtimeComputedFlag: false,
  359. index: null,
  360. categoryList: [],
  361. }
  362. },
  363. beforeMount() {
  364. const CancelToken = axios.CancelToken
  365. this.cancelSource = CancelToken.source()
  366. if (process.env.NODE_ENV === 'development') {
  367. const client = algoliasearch(
  368. '7KGEFE6I2Z',
  369. 'e39e202ace0a2fa12ea61095e6ede35d'
  370. )
  371. this.index = client.initIndex('test_uk')
  372. } else {
  373. const client = algoliasearch(
  374. '2340OWI595',
  375. '2d4c53cdcf2bab0c361e589c2c2272fa'
  376. )
  377. this.index = client.initIndex('product_uk')
  378. }
  379. this.getList()
  380. },
  381. methods: {
  382. getList() {
  383. let sortFunc = defaultSortFunc
  384. let keyword =
  385. this.$route.params.thirdCategory ||
  386. this.$route.params.secondCategory ||
  387. this.$route.params.firstCategory ||
  388. ''
  389. const config = {
  390. hitsPerPage: 1000,
  391. restrictSearchableAttributes: [
  392. 'name',
  393. 'keywords',
  394. 'colour',
  395. 'moq',
  396. 'collection',
  397. 'filter',
  398. ],
  399. // attributesToRetrieve: ['cat_name'], // 限定只返回某个属性
  400. }
  401. if (
  402. this.$route.query.keyword &&
  403. this.$route.fullPath.includes('searchResult')
  404. ) {
  405. keyword = decodeURIComponent(this.$route.query.keyword).trim() || ''
  406. }
  407. this.listLoading = true
  408. this.productsList = []
  409. if (!this.$route.fullPath.includes('searchResult')) {
  410. const t = this.fakeLeadTimeList.slice()
  411. t.pop()
  412. t.push({
  413. // 用id 0 是会导致 checkedLeadtime 勾选all时值为0, 巧妙避开 computedProductList 中 leadTime相关的计算,
  414. // 让 leadtimeFlag 永远都是true, 从而顺利筛选出所有商品(筛选全部通过).
  415. id: 0,
  416. name: 'All',
  417. value: [],
  418. })
  419. this.leadTimeList = t
  420. if (
  421. this.$route.query.feature &&
  422. Number(this.$route.query.feature) === 54
  423. ) {
  424. keyword = 'new product'
  425. // config.facetFilters = ['filter:New product']
  426. config.restrictSearchableAttributes = 'filter'
  427. sortFunc = (a, b) => {
  428. if (a.hasNewProduct !== b.hasNewProduct) {
  429. return b.hasNewProduct - a.hasNewProduct
  430. }
  431. if (a.ranking !== b.ranking) {
  432. return b.ranking - a.ranking
  433. }
  434. }
  435. } else {
  436. config.restrictSearchableAttributes = 'cat_name'
  437. }
  438. } else {
  439. this.leadTimeList = this.fakeLeadTimeList.slice()
  440. }
  441. const p = this.index.search(keyword, config)
  442. p.then(({ hits }) => {
  443. this.leadtimeComputedFlag = false
  444. this.priceMin = 1000
  445. this.priceMax = 0.01
  446. // 这几个是临时数据
  447. const temp = []
  448. const filterList = []
  449. const colorList = []
  450. const collectionsList = []
  451. // 临时数据 end
  452. if (hits.length) {
  453. hits
  454. .filter(i => i.status === 1 || i.status === '1' || i.status)
  455. .forEach(item => {
  456. let colorImg = ''
  457. item.colour_imgs = JSON.parse(item.colour_imgs)
  458. item.colour_imgs.sort((a, b) => a.name.length - b.name.length)
  459. if (
  460. this.$route.fullPath.includes('searchResult') &&
  461. Array.isArray(item.colour_imgs) &&
  462. item.colour_imgs.length
  463. ) {
  464. item.colour_imgs.forEach(colorItem => {
  465. if (colorItem.name && colorItem.name.length) {
  466. if (
  467. new RegExp(colorItem.name.toLowerCase(), 'i').test(
  468. keyword
  469. )
  470. ) {
  471. console.log(item.product_code, colorItem.name, 'replace')
  472. colorImg = colorItem.img
  473. } else if (
  474. /\s/.test(colorItem.name) &&
  475. colorItem.name
  476. .split(' ')
  477. .filter(a => a.length > 0)
  478. .some(b =>
  479. new RegExp(b.toLowerCase(), 'i').test(keyword)
  480. )
  481. ) {
  482. console.log(
  483. item.product_code,
  484. colorItem.name,
  485. 'advance replace'
  486. )
  487. colorImg = colorItem.img
  488. }
  489. }
  490. })
  491. item.colour_imgs.forEach(i => {
  492. if (i.name && i.name.length) {
  493. if (keyword.toLowerCase().includes(i.name.toLowerCase())) {
  494. console.log(item.product_code, i.name, 'complete replace')
  495. colorImg = i.img
  496. }
  497. }
  498. })
  499. console.log('---')
  500. }
  501. const result = {
  502. // img: item.img || '',
  503. // colour_imgs: item.colour_imgs,
  504. price_min: parseFloat(item.price_min),
  505. price_max: parseFloat(item.price_max),
  506. product_code: item.product_code,
  507. icon: Array.isArray(item.icon)
  508. ? item.icon.filter(i => i.id)
  509. : typeof item.icon === 'string'
  510. ? JSON.parse(item.icon)
  511. : [],
  512. moq: item.moq,
  513. cycle:
  514. (typeof item.cycle === 'string'
  515. ? JSON.parse(item.cycle)
  516. : item.cycle) || [],
  517. cycle_icon:
  518. (typeof item.cycle === 'string'
  519. ? JSON.parse(item.cycle)
  520. : item.cycle) || [],
  521. collection_detail:
  522. (typeof item.collection_detail === 'string'
  523. ? JSON.parse(item.collection_detail)
  524. : item.collection_detail) || [],
  525. product_name: item.name || '',
  526. info: {
  527. image: colorImg || item.img || '',
  528. id: item.id,
  529. },
  530. main: {
  531. image: colorImg || item.img || '',
  532. id: item.id,
  533. },
  534. color: [],
  535. filter: [],
  536. // 不一定有
  537. collections: [],
  538. pricePoint: [],
  539. compliance: [],
  540. create_time: item.create_time
  541. ? new Date(item.create_time).getTime()
  542. : new Date().getTime(),
  543. ranking: item.rank
  544. ? parseInt(item.rank)
  545. : Math.floor(Math.random() * 10000),
  546. }
  547. const min = Number(item.price_min)
  548. const max = Number(item.price_max)
  549. if (min < this.priceMin && min !== 0) {
  550. this.priceMin = min
  551. }
  552. if (max > this.priceMax) {
  553. this.priceMax = max
  554. }
  555. this.priceRange1 = this.priceMin
  556. this.priceRange2 = this.priceMax
  557. if (item.colour) {
  558. try {
  559. item.colour_detail = JSON.parse(item.colour_detail)
  560. } catch (e) {
  561. console.log('解析 colour_detail 出错')
  562. }
  563. if (!Array.isArray(item.colour_detail)) {
  564. // 部分数据异常, 额外添加处理逻辑
  565. item.colour_detail = [item.colour_detail]
  566. }
  567. result.color = item.colour_detail
  568. item.colour_detail.forEach(a => {
  569. if (!colorList.some(i => i.id === a.id)) {
  570. colorList.push(a)
  571. }
  572. })
  573. }
  574. if (item.filter.length) {
  575. try {
  576. item.filter_detail = JSON.parse(item.filter_detail)
  577. } catch (e) {
  578. console.log('解析 filter_detail 出错')
  579. }
  580. result.filter = item.filter_detail
  581. item.filter_detail.forEach(a => {
  582. if (!filterList.some(i => i.id === a.id)) {
  583. filterList.push(a)
  584. }
  585. })
  586. }
  587. if (item.collection.length) {
  588. try {
  589. item.collection = JSON.parse(item.collection)
  590. } catch (e) {
  591. console.log('解析 collection 出错')
  592. }
  593. item.collection.forEach(a => {
  594. result.collections.push(a)
  595. if (!collectionsList.some(i => a === i.name)) {
  596. collectionsList.push({ name: a })
  597. }
  598. })
  599. }
  600. result.hasNewProduct = result.filter.some(i => i.id === 54)
  601. result.hasBestSeller = result.collection_detail.some(
  602. i => i.id === 209
  603. )
  604. temp.push(result)
  605. })
  606. }
  607. this.featureList = filterList
  608. this.collectionsList = collectionsList
  609. this.colourList = colorList
  610. // this.decorationList = []
  611. // this.complianceList = []
  612. if (!this.$route.fullPath.includes('searchResult')) {
  613. if (
  614. this.$route.query.feature &&
  615. Number(this.$route.query.feature) === 54
  616. ) {
  617. temp.sort((a, b) => b.create_time - a.create_time)
  618. } else {
  619. temp.sort(sortFunc)
  620. }
  621. }
  622. this.productsList = temp
  623. this.loaded = true
  624. this.listLoading = false
  625. }).catch(() => {
  626. this.listLoading = false
  627. this.productsList = []
  628. })
  629. },
  630. getListold() {
  631. const params = {
  632. order_name: this.order_name,
  633. order_type: this.order_type,
  634. first_cat: this.$route.params.firstCategory,
  635. second_cat: this.$route.params.secondCategory,
  636. third_cat: this.$route.params.thirdCategory,
  637. }
  638. if (this.loaded || this.$route.query.qty) {
  639. params.moq = this.quantity
  640. }
  641. if (this.priceId) {
  642. params.price_id = this.priceId
  643. }
  644. if (this.checkedLeadtime) {
  645. params.filter_id = this.checkedLeadtime
  646. }
  647. if (
  648. this.$route.query.keyword &&
  649. this.$route.fullPath.includes('searchResult')
  650. ) {
  651. params.keyword =
  652. decodeURIComponent(this.$route.query.keyword).trim() || ''
  653. }
  654. const config = {}
  655. if (this.cancelSource) {
  656. this.cancelSource.cancel()
  657. config.cancelToken = this.cancelSource?.token
  658. }
  659. this.listLoading = true
  660. this.productsList = []
  661. if (!this.$route.fullPath.includes('searchResult')) {
  662. const t = this.fakeLeadTimeList.slice()
  663. t.pop()
  664. t.push({
  665. // 用id 0 是会导致 checkedLeadtime 勾选all时值为0, 巧妙避开 computedProductList 中 leadTime相关的计算,
  666. // 让 leadtimeFlag 永远都是true, 从而顺利筛选出所有商品(筛选全部通过).
  667. id: 0,
  668. name: 'All',
  669. value: [],
  670. })
  671. this.leadTimeList = t
  672. } else {
  673. this.leadTimeList = this.fakeLeadTimeList.slice()
  674. }
  675. this.$axios
  676. .get(
  677. '/goods_au/list',
  678. {
  679. params,
  680. },
  681. config
  682. )
  683. .then(res => {
  684. if (res.code === 1) {
  685. this.leadtimeComputedFlag = false
  686. this.priceMin = 1000
  687. this.priceMax = 0.01
  688. this.featureList = res.result.filter || []
  689. this.collectionsList = res.result.collections || []
  690. this.complianceList = res.result.compliance || []
  691. this.colourList = res.result.color || []
  692. this.decorationList = res.result.decorations || []
  693. // this.leadTimeList =
  694. // res.result.lead_time
  695. // .sort((a, b) => a.rank - b.rank)
  696. // .map(i => {
  697. // return {
  698. // ...i,
  699. // value: this.fakeLeadTimeList.filter(f => f.id === i.id)[0]
  700. // .value,
  701. // }
  702. // }) || []
  703. this.productsList =
  704. res.result.list.map(item => {
  705. const min = Number(item.price_min)
  706. const max = Number(item.price_max)
  707. if (min < this.priceMin && min !== 0) {
  708. this.priceMin = min
  709. }
  710. if (max > this.priceMax) {
  711. this.priceMax = max
  712. }
  713. this.priceRange1 = this.priceMin
  714. this.priceRange2 = this.priceMax
  715. return {
  716. ...item,
  717. cycle_icon: item.cycle,
  718. lead_time_id: item.lead_time_id || '',
  719. info: {
  720. image: item.main?.image,
  721. id: item.main?.id,
  722. },
  723. }
  724. }) || []
  725. // 排序是为了保证一级分类考前. 分类页面直接就取他的child展示, 即列出二级分类.
  726. // 二级分类页面大概率搜不出三级子分类, 一言难尽.
  727. this.cate = res.result.cate.sort((a, b) => a.pid - b.pid)
  728. // console.log(this.cate, 'this.cate')
  729. this.listLoading = false
  730. }
  731. // this.$nextTick(() => {
  732. // window.scroll(0, 0);
  733. // });
  734. this.loaded = true
  735. })
  736. .catch(() => {
  737. this.listLoading = false
  738. this.productsList = []
  739. })
  740. },
  741. handleChangeQuantity(value) {
  742. if (value) {
  743. this.quantity = value
  744. this.enableQuantity = true
  745. // this.$router.replace({
  746. // path: this.$route.path,
  747. // query: {
  748. // ...this.$route.query,
  749. // qty: value,
  750. // t: new Date().getTime(),
  751. // },
  752. // })
  753. // this.getList()
  754. }
  755. },
  756. handleChangePrice(arr) {
  757. console.log('price change', arr)
  758. this.priceMin = arr[0]
  759. this.priceMax = arr[1]
  760. },
  761. handleChangeLeadtime(value) {
  762. this.checkedLeadtime = value
  763. // this.$router.replace({
  764. // path: this.$route.path,
  765. // query: {
  766. // ...this.$route.query,
  767. // lead_time: value,
  768. // t: new Date().getTime(),
  769. // },
  770. // })
  771. },
  772. handleChangeColor(value) {
  773. this.checkedColor = value
  774. },
  775. handleChangeFeature(value) {
  776. this.checkedFeature = value
  777. },
  778. handleChangeCollection(value) {
  779. this.checkedCollection = value
  780. },
  781. handleChangeDecoration(value) {
  782. this.checkedDecoration = value
  783. },
  784. handleChangeCompliance(value) {
  785. this.checkedCompliance = value
  786. },
  787. handleCommand(command) {
  788. let func = defaultSortFunc
  789. if (command === 'Default') {
  790. this.order_name = ''
  791. this.order_type = ''
  792. this.command = command
  793. } else if (command === 'Product Name:A-Z') {
  794. this.order_name = 'product_name'
  795. this.order_type = 'asc'
  796. func = (a, b) => a.product_name.localeCompare(b.product_name)
  797. this.command = command
  798. } else if (command === 'Product Name:Z-A') {
  799. this.order_name = 'product_name'
  800. this.order_type = 'desc'
  801. func = (a, b) => b.product_name.localeCompare(a.product_name)
  802. this.command = command
  803. } else if (command === 'Price: Low to high') {
  804. this.order_name = 'price_min'
  805. this.order_type = 'asc'
  806. func = (a, b) => a.price_min - b.price_min
  807. this.command = command
  808. } else if (command === 'Price: High to low') {
  809. this.order_name = 'price_min'
  810. this.order_type = 'desc'
  811. func = (a, b) => b.price_max - a.price_max
  812. this.command = command
  813. } else if (command === 'create_time') {
  814. this.order_name = 'create_time'
  815. this.order_type = 'desc'
  816. func = (a, b) => b.create_time - a.create_time
  817. this.command = command
  818. }
  819. this.productsList.sort(func)
  820. },
  821. reset() {
  822. if (!this.$route.query.qty) {
  823. this.quantity = 1000
  824. }
  825. this.priceMin = 1000
  826. this.priceMax = 0.01
  827. this.checkedCollection = []
  828. this.checkedCompliance = []
  829. this.checkedLeadtime = ''
  830. this.checkedColor = []
  831. this.checkedDecoraiton = []
  832. this.checkedFeature = []
  833. this.getList()
  834. },
  835. infiniteHandler($state) {
  836. if (this.total > 12) {
  837. const temp = this.computedProductList.slice(
  838. this.listQuery.page * this.listQuery.limit,
  839. this.listQuery.page * this.listQuery.limit + this.listQuery.limit
  840. )
  841. this.listQuery.page += 1 // 下一页
  842. setTimeout(() => {
  843. if (temp.length) {
  844. this.cardList = this.cardList.concat(temp)
  845. $state.loaded()
  846. } else {
  847. $state.loaded()
  848. $state.complete()
  849. }
  850. }, 800)
  851. } else {
  852. $state.loaded()
  853. $state.complete()
  854. }
  855. },
  856. transName(str) {
  857. return str.replace(/\s+/g, '-').replace('-&', '').toLowerCase()
  858. },
  859. // 从分类树数据里面找到对应分类
  860. getCategoryFromTree(p, tree) {
  861. let result = {}
  862. if (!tree.length) return result
  863. tree.forEach(i => {
  864. if (i.id === p.id || this.transName(i.name) === p.name) {
  865. result = cloneDeep(i)
  866. result.lev = 1
  867. }
  868. if (!Array.isArray(i.child)) return
  869. i.child.forEach(secondCate => {
  870. if (
  871. secondCate.id === p.id ||
  872. this.transName(secondCate.name) === p.name
  873. ) {
  874. result = cloneDeep(secondCate)
  875. result.parentName = i.name
  876. result.lev = 2
  877. result.root = {
  878. name: i.name,
  879. id: i.id,
  880. pid: 0,
  881. }
  882. }
  883. })
  884. })
  885. return result
  886. },
  887. },
  888. }