immediatelyList.vue 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160
  1. <template>
  2. <view
  3. class="container commodity-list-wrapper"
  4. :style="{ overflow: showSkeleton ? 'hidden' : 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
  5. >
  6. <list-skeleton :listType="0" v-if="showSkeleton" />
  7. <template v-else>
  8. <view class="good-search clearfix" v-if="searchStatus">
  9. <view class="nav-tab-bar u-f-ajc">
  10. <block v-for="(tab, index) in tabBars" :key="tab.id" :class="{ current: tabIndex === index }">
  11. <view class="tabstyle u-f-ajc" :class="{ addstyle: tabIndex == index }" @tap="changeTab(index)">
  12. {{ tab.name }}<i v-if="tabIndex == index" class="nav-tab-line iconfont icon-gou"></i>
  13. </view>
  14. </block>
  15. </view>
  16. <view class="search-from name">
  17. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  18. <input
  19. class="input"
  20. type="text"
  21. :focus="isFocus"
  22. confirm-type="search"
  23. v-model="searchInputVal"
  24. placeholder="请输入商品关键词"
  25. @input="onShowClose"
  26. @confirm="searchOpertor(tabIndex)"
  27. maxlength="20"
  28. />
  29. <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText(tabIndex)"></text>
  30. </view>
  31. </view>
  32. <view class="empty-container" v-if="isShowEmpty">
  33. <image
  34. class="empty-container-image"
  35. src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
  36. ></image>
  37. <text class="error-text">{{ isShowEmptyText }}</text>
  38. </view>
  39. <!-- 单一商品 -->
  40. <view class="product-container" v-else>
  41. <view :class="tabIndex" v-if="tabIndex === 0" :style="{ paddingTop: searchStatus ? '128rpx' : '' }">
  42. <scroll-view
  43. :style="{ height: scrollHeight + 'px' }"
  44. @scrolltolower="scrolltolower(tabIndex)"
  45. scroll-y
  46. v-if="listData.length > 0"
  47. >
  48. <view
  49. v-for="(pros, index) in listData"
  50. :key="index"
  51. :id="pros.productId"
  52. class="all-type-list-content commodity-list"
  53. @click.stop="navToDetailPage(pros.productId)"
  54. >
  55. <view class="list-details-image">
  56. <image mode="widthFix" :src="pros.image" class="list-img" alt="list-img"></image>
  57. <view class="list-details-type" v-if="pros.productType == 2">医疗器械</view>
  58. </view>
  59. <view class="list-details-info">
  60. <text class="list-details-title">{{ isInterceptHtmlFn(pros.name) }}</text>
  61. <text class="list-details-specs">规格:{{ pros.unit ? pros.unit : '' }}</text>
  62. <text class="list-details-miniQuantity list-details-specs"
  63. >起订量:{{ pros.minBuyNumber }}</text
  64. >
  65. <view class="list-details-specs" v-if="pros.code != '' && pros.code != null">
  66. <view>商品编码:{{ pros.code }}</view>
  67. </view>
  68. <view class="list-details-price">
  69. <template v-if="priceLoading">
  70. <view class="list-price-loding">正在获取价格...</view>
  71. </template>
  72. <template v-else>
  73. <view class="list-shop">
  74. <view class="list-price">
  75. <text
  76. class="price-larger"
  77. :class="
  78. PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
  79. ? 'none'
  80. : ''
  81. "
  82. >
  83. ¥{{
  84. (PromotionsFormat(pros.promotions) || pros.svipProductFlag == 1
  85. ? pros.originalPrice
  86. : pros.price) | NumFormat
  87. }}
  88. </text>
  89. </view>
  90. </view>
  91. <button class="add-cart-btn" @click.stop="operationHanld(pros)">数量</button>
  92. </template>
  93. </view>
  94. <view class="list-details-price">
  95. <view class="floor-item-act">
  96. <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
  97. <template v-if="pros.actStatus == 1">
  98. <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
  99. {{ pros.promotions.name }}<text>:¥{{ pros.price | NumFormat }}</text>
  100. </view>
  101. <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
  102. </template>
  103. <template v-if="pros.svipProductFlag == 1">
  104. <view class="svip-tags">
  105. <view class="tags">SVIP</view>
  106. <view class="price">{{ pros.svipPriceTag }}</view>
  107. </view>
  108. </template>
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. <view v-if="showLoading && listData.length > 4 && !showRegularBtn">
  114. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
  115. >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
  116. >
  117. <view class="loading-wrapper loading-wrapper-btm" v-else
  118. >———<text class="btm-text">已至底部</text>———</view
  119. >
  120. </view>
  121. </scroll-view>
  122. </view>
  123. <!-- 组合商品 -->
  124. <view :class="tabIndex" v-if="tabIndex === 1">
  125. <scroll-view
  126. :style="{ height: scrollHeight + 'px', paddingTop: searchStatus ? '112rpx' : '' }"
  127. @scrolltolower="scrolltolower(tabIndex)"
  128. scroll-y
  129. >
  130. <view class="all-zuhe-list" v-for="(item, index) in combinationProduct" :key="index" :id="item.id">
  131. <view class="zuhe_title" :class="index % 2 == 0 ? 'active' : ''">{{ item.name }}</view>
  132. <view
  133. v-for="(pros, proIndex) in item.combinationProductList"
  134. :class="index % 2 == 0 ? 'stylecontent' : ''"
  135. :key="proIndex"
  136. :id="pros.productId"
  137. class="zuhe-list-content commodity-list"
  138. >
  139. <view class="list-details-info">
  140. <text class="list-details-title zuhe_list_text">商品编码:{{ pros.code }}</text>
  141. <text
  142. class="list-details-specs zuhe_list_text"
  143. @click.stop="navToDetailPage(pros.productId)"
  144. >{{ pros.name }}</text
  145. >
  146. <view class="list-details-price zuhe_list_price">
  147. <view class="list-shop com">
  148. <view class="list-price zuhe_list_price">
  149. <view class="zuhe_price-larger zuhe_list_text">
  150. <text class="price-larger">规格:{{ pros.unit }}</text>
  151. <text
  152. class="price-btn"
  153. @click.stop="handleShowUnitPopup(pros, proIndex)"
  154. >重选</text
  155. >
  156. </view>
  157. <view class="zuhe_price-larger zuhe_list_text">
  158. <view class="list-price-none" v-if="pros.repurchaseFlag == 1">
  159. <text class="price-none">价格:¥{{ pros.originalPrice }}</text>
  160. <text
  161. class="iconfont icon-wenhao"
  162. @click.stop="repurchModel"
  163. ></text>
  164. </view>
  165. <view class="price-larger">价格:¥{{ pros.price | NumFormat }}</view>
  166. </view>
  167. <view class="zuhe_price-larger zuhe_list_text">
  168. <view class="floor-item-act">
  169. <view class="coupon-tags" v-if="pros.couponsLogo">优惠券</view>
  170. <template v-if="pros.actStatus == 1">
  171. <view
  172. class="floor-tags"
  173. v-if="PromotionsFormat(pros.promotions)"
  174. >
  175. {{ pros.promotions.name
  176. }}<text>:¥{{ pros.price | NumFormat }}</text>
  177. </view>
  178. <view class="floor-tags" v-else>{{
  179. pros.promotions.name
  180. }}</view>
  181. </template>
  182. <template v-if="pros.svipProductFlag == 1">
  183. <view class="svip-tags">
  184. <view class="tags">SVIP</view>
  185. <view class="price">{{ pros.svipPriceTag }}</view>
  186. </view>
  187. </template>
  188. </view>
  189. <view class="count">
  190. <view class="number-box">
  191. <view
  192. class="iconfont icon-jianhao"
  193. @click.stop="changeCountSub(item, pros)"
  194. ></view>
  195. <input
  196. class="btn-input"
  197. type="number"
  198. maxlength="6"
  199. v-model="pros.initProductNum"
  200. @blur="changeNnmber($event, item, pros)"
  201. />
  202. <view
  203. class="iconfont icon-jiahao"
  204. @click.stop="changeCountAdd(item, pros)"
  205. ></view>
  206. </view>
  207. </view>
  208. </view>
  209. <view class="list-price-all" :style="{ overflow: 'hidden' }">
  210. <view class="price-two zuhe_list_text"
  211. >总价:<text class="zuhe_list_zj"
  212. >¥ {{ pros.totalPrice | NumFormat }}</text
  213. ></view
  214. >
  215. </view>
  216. </view>
  217. </view>
  218. </view>
  219. </view>
  220. </view>
  221. <view class="foot_conten">
  222. <view class="zuhe_foot-box">
  223. <view class="">
  224. <text>种类:{{ item.productKind }}</text>
  225. <text>总数:{{ item.productTotalNum }}</text>
  226. </view>
  227. <text
  228. >总额:<text class="foot_text">{{
  229. item.productTotalAmount | NumFormat
  230. }}</text></text
  231. >
  232. </view>
  233. <button type="default" class="buycart" @click.stop="operationHanld(item)">
  234. 加入购物车
  235. </button>
  236. </view>
  237. </view>
  238. <view v-if="showLoading && combinationProduct.length > 4 && !showRegularBtn">
  239. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
  240. >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
  241. >
  242. <view class="loading-wrapper loading-wrapper-btm" v-else
  243. >———<text class="btm-text">已至底部</text>———</view
  244. >
  245. </view>
  246. </scroll-view>
  247. </view>
  248. </view>
  249. </template>
  250. <!-- 组合商品规格弹窗 -->
  251. <cmUnitSupporPopup
  252. v-if="popupShow"
  253. :popupShow="popupShow"
  254. :skuProduct="handleProsData"
  255. @handleUnitConfirm="hanldeSupporUnitConfirm"
  256. @skuClick="handleSkuClick"
  257. />
  258. <!-- 可拖动悬浮按钮 -->
  259. <cm-drag
  260. v-if="!showSkeleton"
  261. :cartNum="cartQuantity"
  262. :isDock="true"
  263. :existTabBar="true"
  264. @btnClick="btnClick"
  265. @btnTouchstart="btnTouchstart"
  266. @btnTouchend="btnTouchend"
  267. />
  268. <!-- 透明模态层 -->
  269. <modal-layer v-if="isModallayer" />
  270. </view>
  271. </template>
  272. <script>
  273. import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
  274. import modalLayer from '@/components/modal-layer'
  275. import uniStars from '@/components/uni-stars/uni-stars.vue'
  276. import cmDrag from '@/components/cm-custom/cm-drag.vue'
  277. import cmUnitSupporPopup from './cm-unit-suppor-popup'
  278. import { mapState, mapMutations } from 'vuex'
  279. export default {
  280. name: 'productList',
  281. components: {
  282. listSkeleton,
  283. modalLayer,
  284. uniStars,
  285. cmUnitSupporPopup,
  286. cmDrag
  287. },
  288. props: {
  289. searchStatus: {
  290. type: Boolean,
  291. default: false
  292. }
  293. },
  294. data() {
  295. return {
  296. popupShow: false,
  297. handleProsData: {},
  298. isShowClose: false,
  299. searchInputVal: '',
  300. isModallayer: false,
  301. windowHeight: '',
  302. showSkeleton: true,
  303. priceLoading: true,
  304. isShowEmpty: false,
  305. isShowEmptyText: '搜索相关商品',
  306. userId: 0,
  307. clubUserId: '',
  308. identity: 0,
  309. isFocus: false,
  310. scrollHeight: '',
  311. listData: [],
  312. combinationProduct: [],
  313. zuheProductList: [], //组合商品列表
  314. showLoading: false,
  315. loadingNow: true,
  316. loadingText: '上拉加载更多',
  317. pageSize: 20,
  318. zuhepageSize: 5,
  319. pageNum: 1,
  320. totalPage: 1,
  321. hasNextPage: false,
  322. pullFlag: true,
  323. fromRegularPurchasePage: false,
  324. cartQuantity: 0,
  325. showRegularBtn: false,
  326. isPrecedence: false,
  327. ladderPriceList: [], //是否 阶梯,
  328. tabIndex: 0,
  329. goodsList: [],
  330. tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
  331. isShow: false
  332. }
  333. },
  334. created() {
  335. this.setScrollHeight()
  336. this.initGetStotage()
  337. this.isFocus = true
  338. },
  339. filters: {
  340. NumFormat: function(text) {
  341. //处理金额
  342. return Number(text).toFixed(2)
  343. }
  344. },
  345. computed: {
  346. ...mapState(['hasLogin', 'userInfo'])
  347. },
  348. methods: {
  349. async initGetStotage() {
  350. // 初始化
  351. const userInfo = await this.$api.getStorage()
  352. const clubInfo = await this.$api.getComStorage('orderUserInfo')
  353. this.userId = userInfo.userId ? userInfo.userId : 0
  354. this.identity = userInfo.userIdentity ? userInfo.userIdentity : 0
  355. this.clubUserId = clubInfo.userId ? clubInfo.userId : 0
  356. this.getProductAgainInfo()
  357. },
  358. scrolltolower(tabIndex) {
  359. if (tabIndex == 0) {
  360. if (this.totalPage > this.listData.length && this.pullFlag) {
  361. this.getProductAgainInfo(true)
  362. }
  363. } else if (tabIndex == 1) {
  364. if (this.hasNextPage && this.pullFlag) {
  365. this.getcombinationProduct(true)
  366. }
  367. }
  368. },
  369. setScrollHeight() {
  370. const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
  371. this.windowHeight = windowHeight - 1
  372. this.scrollHeight = windowHeight - 1
  373. },
  374. getProductAgainInfo(loadMore) {
  375. this.showLoading = true
  376. this.priceLoading = true
  377. this.loadingNow = true
  378. this.loadingText = '加载中'
  379. this.isShowEmpty = false
  380. if (loadMore) {
  381. this.pageNum += 1
  382. }
  383. this.ProductService.GetProductSearchList({
  384. identity: this.identity,
  385. keyword: this.searchInputVal,
  386. pageNum: this.pageNum,
  387. pageSize: this.pageSize,
  388. sortField: '',
  389. sortType: ''
  390. })
  391. .then(response => {
  392. this.isShowWrapper = true
  393. const resData = JSON.parse(response.data)
  394. if(resData){
  395. const resList = resData.items
  396. this.totalPage = resData.total
  397. this.showEmpty = false
  398. if (loadMore) {
  399. this.listData = [...this.listData, ...resList]
  400. this.getProductPrice()
  401. } else {
  402. this.listData = [...resList]
  403. this.getProductPrice()
  404. }
  405. // 防上拉暴滑
  406. this.pullFlag = false
  407. setTimeout(() => {
  408. this.pullFlag = true
  409. }, 500)
  410. // 底部提示文案
  411. if (this.totalPage > this.listData.length) {
  412. this.loadingText = '上拉加载更多'
  413. } else {
  414. this.showLoading = true
  415. this.loadingNow = false
  416. }
  417. }else{
  418. this.isShowEmpty = true
  419. this.isShowEmptyText = '暂无相关商品'
  420. }
  421. this.showSkeleton = false
  422. })
  423. .catch(error => {
  424. this.$util.msg(error.msg, 2000)
  425. })
  426. },
  427. getProductPrice() {
  428. //获取商品或者活动价格
  429. let productIdArr = []
  430. let productIds = ''
  431. this.listData.map(item => {
  432. // 0公开价格 1不公开价格 2仅对资质机构公开
  433. productIdArr.push(item.productId)
  434. })
  435. productIds = productIdArr.join(',')
  436. this.ProductService.querySearchProductPrice({
  437. flag: this.identity, //查询促销标记 1协销 2机构 3供应商
  438. userId: this.userId,
  439. productIds: productIds,
  440. source: 2
  441. })
  442. .then(response => {
  443. this.listData = this.ReturnNewProducts(this.listData, response.data)
  444. this.priceLoading = false
  445. setTimeout(() => {
  446. this.showSkeleton = false
  447. }, 500)
  448. })
  449. .catch(error => {
  450. this.$util.msg(error.msg, 2000)
  451. })
  452. },
  453. ReturnNewProducts(Array, list) {
  454. //合并字段
  455. let NewArray = []
  456. Array.map(item => {
  457. for (let i = 0; i < list.length; i++) {
  458. if (item.productId == list[i].productId) {
  459. NewArray.push(Object.assign(item, list[i]))
  460. }
  461. }
  462. })
  463. return NewArray
  464. },
  465. searchOpertor(tabIndex) {
  466. //搜索商品
  467. if (tabIndex == 0) {
  468. if (this.searchInputVal == '') {
  469. this.$util.msg('请输入商品关键词', 2000)
  470. } else {
  471. this.pageNum = 1
  472. this.showSkeleton = true
  473. this.getProductAgainInfo()
  474. this.isFocus = false
  475. }
  476. } else {
  477. this.pageNum = 1
  478. this.showSkeleton = true
  479. this.getcombinationProduct()
  480. this.isFocus = false
  481. }
  482. },
  483. getcombinationProduct(loadMore) {
  484. //组合搜索商品
  485. this.showLoading = true
  486. this.loadingNow = true
  487. this.loadingText = '加载中'
  488. this.isShowEmpty = false
  489. if (loadMore) {
  490. this.pageNum += 1
  491. }
  492. this.ProductService.GetSearchCombinationProduct({
  493. clubUserId: this.clubUserId,
  494. pageNum: this.pageNum,
  495. pageSize: this.zuhepageSize,
  496. searchWord: this.searchInputVal
  497. })
  498. .then(response => {
  499. this.isShowWrapper = true
  500. const responseData = response.data
  501. console.log(responseData)
  502. if (responseData.results && responseData.results.length > 0) {
  503. this.hasNextPage = responseData.hasNextPage
  504. this.isShowEmpty = false
  505. if (loadMore) {
  506. this.combinationProduct = [...this.combinationProduct, ...responseData.results]
  507. } else {
  508. this.combinationProduct = [...responseData.results]
  509. this.showSkeleton = false
  510. }
  511. // 防上拉暴滑
  512. this.pullFlag = false
  513. setTimeout(() => {
  514. this.pullFlag = true
  515. }, 500)
  516. // 底部提示文案
  517. if (this.hasNextPage) {
  518. this.loadingText = '上拉加载更多'
  519. } else {
  520. this.showLoading = true
  521. this.loadingNow = false
  522. }
  523. } else {
  524. this.isShowEmpty = true
  525. this.showSkeleton = false
  526. this.isShowEmptyText = '暂无相关商品'
  527. }
  528. })
  529. .catch(error => {
  530. this.$util.msg(error.msg, 2000)
  531. })
  532. },
  533. changeCountAdd(item, pros) {
  534. //商品数量加加
  535. if (pros.initProductNum == 0) {
  536. pros.initProductNum = pros.minBuyNumber
  537. this.processActivityPrice(pros)
  538. } else if (pros.initProductNum >= pros.minBuyNumber) {
  539. pros.initProductNum++
  540. this.processActivityPrice(pros)
  541. }
  542. this.totalPeice(item)
  543. this.totalCount(item)
  544. this.totalKind(item)
  545. },
  546. changeCountSub(item, pros) {
  547. //商品数量减减
  548. if (pros.initProductNum == 0) {
  549. this.$util.msg('采购数量不能小于0', 2000)
  550. return
  551. } else if (pros.initProductNum == pros.minBuyNumber) {
  552. pros.initProductNum = 0
  553. this.processActivityPrice(pros)
  554. } else {
  555. pros.initProductNum--
  556. this.processActivityPrice(pros)
  557. }
  558. this.totalPeice(item)
  559. this.totalCount(item)
  560. this.totalKind(item)
  561. },
  562. changeNnmber(e, item, pros) {
  563. //输入商品数量更新
  564. let _value = e.detail.value
  565. if (!this.$api.isNumber(_value)) {
  566. pros.initProductNum = pros.minBuyNumber
  567. } else if (_value < pros.minBuyNumber) {
  568. this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
  569. pros.initProductNum = pros.minBuyNumber
  570. } else {
  571. pros.initProductNum = parseInt(e.detail.value)
  572. this.processActivityPrice(pros)
  573. }
  574. this.totalPeice(item)
  575. this.totalCount(item)
  576. this.totalKind(item)
  577. },
  578. totalPeice(item) {
  579. //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
  580. let prosPrice = 0
  581. let productsList = []
  582. productsList = item.combinationProductList
  583. productsList.forEach(pros => {
  584. prosPrice += pros.price * pros.initProductNum
  585. item.productTotalAmount = prosPrice
  586. })
  587. // console.log(prosPrice)
  588. },
  589. totalCount(item) {
  590. //计算总数量
  591. let prosAllCount = 0
  592. let productsList = []
  593. productsList = item.combinationProductList
  594. productsList.forEach(pros => {
  595. prosAllCount += parseInt(pros.initProductNum)
  596. item.productTotalNum = prosAllCount
  597. })
  598. // console.log(prosAllCount)
  599. },
  600. totalKind(item) {
  601. //计算商品种类
  602. let productsList = []
  603. let checkList = []
  604. productsList = item.combinationProductList
  605. productsList.forEach(pros => {
  606. if (pros.initProductNum > 0) {
  607. checkList.push(pros)
  608. item.productKind = checkList.length
  609. } else {
  610. item.productKind = checkList.length
  611. }
  612. })
  613. },
  614. processActivityPrice(pros) {
  615. //单独处理活动价格和阶梯价格
  616. pros.totalPrice = pros.initProductNum * pros.price
  617. },
  618. operationHanld(prop) {
  619. this.$emit('operationConfim', prop)
  620. },
  621. alertjieti(pros) {
  622. this.$emit('alertjietiConfim', pros)
  623. },
  624. changeTab(index) {
  625. this.tabIndex = index
  626. if (index == 0) {
  627. this.pageNum = 1
  628. this.getProductAgainInfo()
  629. } else {
  630. this.getcombinationProduct()
  631. }
  632. // this.$emit('changetab',index);
  633. },
  634. navToDetailPage(id) {
  635. this.isModallayer = true
  636. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  637. this.isModallayer = false
  638. },
  639. repurchModel() {
  640. this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
  641. },
  642. onShowClose() {
  643. //输入框失去焦点时触发
  644. if (this.searchInputVal != '') {
  645. this.isShowClose = true
  646. } else {
  647. this.isShowClose = false
  648. }
  649. },
  650. delInputText(tabIndex) {
  651. //清除输入框内容
  652. if (tabIndex == 0) {
  653. this.searchInputVal = ''
  654. this.listData = []
  655. this.isFocus = true
  656. this.isShowClose = false
  657. this.loadingNow = false
  658. this.isShowEmpty = true
  659. this.isShowEmptyText = '暂无相关商品'
  660. this.getProductAgainInfo()
  661. } else {
  662. this.searchInputVal = ''
  663. this.isShowClose = false
  664. this.isFocus = true
  665. this.getcombinationProduct()
  666. }
  667. },
  668. isInterceptHtmlFn(text) {
  669. let name = this.$reg.interceptHtmlFn(text)
  670. return name
  671. },
  672. PromotionsFormat(promo) {
  673. //促销活动类型数据处理
  674. if (promo != null) {
  675. if (promo.type == 1 && promo.mode == 1) {
  676. return true
  677. } else {
  678. return false
  679. }
  680. }
  681. return false
  682. },
  683. handleShowUnitPopup(pros, index) {
  684. // 组合商品规格弹窗
  685. this.handleProsData = pros
  686. this.popupShow = true
  687. },
  688. hanldeSupporUnitConfirm(data) {
  689. console.log('data', data)
  690. this.handleProsData.skuId = data.skuId
  691. this.handleProsData.unit = data.unit
  692. this.handleProsData.initProductNum = data.minBuyNumber
  693. },
  694. handleSkuClick(sku){//选择Sku
  695. this.handleProsData.unit = sku.unit
  696. this.handleProsData.price = sku.price
  697. this.handleProsData.originalPrice = sku.originalPrice
  698. this.handleProsData.initProductNum = sku.minBuyNumber
  699. },
  700. btnClick() {
  701. this.$emit('goCartPage')
  702. },
  703. btnTouchstart() {
  704. // console.log('btnTouchstart');
  705. },
  706. btnTouchend() {
  707. // console.log('btnTouchend');
  708. }
  709. }
  710. }
  711. </script>
  712. <style lang="scss">
  713. .all-zuhe-list {
  714. background: #ffffff;
  715. }
  716. .foot_conten {
  717. width: 655rpx;
  718. background: #fff;
  719. font-size: 28rpx;
  720. height: 80rpx;
  721. // line-height: 80rpx;
  722. display: inherit;
  723. padding: 10px;
  724. overflow: hidden;
  725. margin: 20rpx auto;
  726. }
  727. .zuhe_foot-box {
  728. float: left;
  729. overflow: hidden;
  730. white-space: nowrap;
  731. // text-overflow: ellipsis;
  732. width: 490rpx;
  733. }
  734. .zuhe_foot-box text {
  735. margin-right: 36rpx;
  736. }
  737. .foot_text {
  738. color: #ff2a2a;
  739. }
  740. .foot_conten .buycart {
  741. width: 162rpx;
  742. height: 64rpx;
  743. background: #efaf00 !important;
  744. color: #fff;
  745. font-size: 26rpx;
  746. border-radius: 36rpx;
  747. text-align: center;
  748. line-height: 64rpx;
  749. float: right;
  750. }
  751. .price-none {
  752. font-size: 24rpx;
  753. color: #666666;
  754. }
  755. .zuhe_title {
  756. background: #ffffff;
  757. height: 76rpx;
  758. font-size: 28rpx;
  759. color: #1675e1;
  760. border-bottom: 4rpx solid #1675e1;
  761. line-height: 76rpx;
  762. padding-left: 30rpx;
  763. &.active {
  764. color: #FF5B00;
  765. border-bottom: 4rpx solid #FF5B00;
  766. }
  767. }
  768. .tabstyle {
  769. width: 128rpx;
  770. height: 76rpx;
  771. font-size: 26rpx;
  772. display: inline-block;
  773. border-radius: 10rpx;
  774. text-align: center;
  775. line-height: 76rpx;
  776. border: 2rpx solid #eeeeee;
  777. position: relative;
  778. margin-right: 12rpx;
  779. &.addstyle {
  780. background: $btn-confirm;
  781. color: #ffffff;
  782. &::before {
  783. content: '';
  784. width: 0;
  785. height: 0;
  786. border-top: 20rpx solid transparent;
  787. border-right: 20rpx solid #ffffff;
  788. border-left: 20rpx solid transparent;
  789. border-bottom: 20rpx solid #ffffff;
  790. position: absolute;
  791. right: 0;
  792. bottom: 0;
  793. }
  794. }
  795. .icon-gou {
  796. width: 36rpx;
  797. height: 36rpx;
  798. line-height: 36rpx;
  799. text-align: center;
  800. color: #FF5B00;
  801. position: absolute;
  802. bottom: -5rpx;
  803. right: -5rpx;
  804. font-weight: bold;
  805. font-size: $font-size-28;
  806. }
  807. }
  808. .commodity-list-wrapper {
  809. scroll-view {
  810. height: 100%;
  811. }
  812. .show-more-btn {
  813. width: 276rpx;
  814. height: 52rpx;
  815. line-height: 52rpx;
  816. border: 2rpx solid #d8d8d8;
  817. background: #f7f7f7;
  818. font-size: 26rpx;
  819. margin: 26rpx 0;
  820. position: absolute;
  821. left: 50%;
  822. margin-left: -138rpx;
  823. }
  824. }
  825. .good-search {
  826. height: 80rpx;
  827. width: 100%;
  828. padding: 24rpx;
  829. background: #ffffff;
  830. display: flex;
  831. align-items: center;
  832. margin-bottom: 20rpx;
  833. position: fixed;
  834. top: 0;
  835. left: 0;
  836. z-index: 19;
  837. .search-from {
  838. width: 420rpx;
  839. height: 80rpx;
  840. background: #f7f7f7;
  841. border-radius: 40rpx;
  842. float: left;
  843. position: relative;
  844. .input {
  845. width: 340rpx;
  846. height: 80rpx;
  847. float: left;
  848. line-height: 80rpx;
  849. color: $text-color;
  850. font-size: $font-size-24;
  851. }
  852. .icon-iconfonticonfontsousuo1 {
  853. width: 64rpx;
  854. height: 80rpx;
  855. line-height: 80rpx;
  856. text-align: center;
  857. display: block;
  858. font-size: $font-size-38;
  859. float: left;
  860. color: #999999;
  861. }
  862. .icon-shanchu1 {
  863. font-size: $font-size-32;
  864. color: #999999;
  865. position: absolute;
  866. width: 120rpx;
  867. height: 80rpx;
  868. line-height: 80rpx;
  869. top: 0;
  870. right: 0;
  871. text-align: center;
  872. z-index: 10;
  873. }
  874. }
  875. .search-btn {
  876. // width: 120rpx;
  877. line-height: 64rpx;
  878. text-align: center;
  879. font-size: $font-size-28;
  880. color: $color-system;
  881. float: left;
  882. background: #ffffff;
  883. margin-left: 10rpx;
  884. }
  885. }
  886. .all-type-list-content {
  887. // height: 240rpx;
  888. padding: 24rpx;
  889. background: #fff;
  890. margin-bottom: 2rpx;
  891. display: flex;
  892. flex-direction: row;
  893. box-sizing: content-box;
  894. .list-details-image {
  895. width: 218rpx;
  896. height: 218rpx !important;
  897. margin-right: 26rpx;
  898. border-radius: 10rpx;
  899. border: 2rpx solid #f3f3f3;
  900. position: relative;
  901. .list-img {
  902. width: 218rpx;
  903. height: 218rpx !important;
  904. }
  905. .list-details-type {
  906. width: 64rpx;
  907. height: 64rpx;
  908. text-align: justify;
  909. box-sizing: border-box;
  910. padding: 10rpx;
  911. border-radius: 0 0 8rpx 8rpx;
  912. background-color: #33ccbf;
  913. font-size: $font-size-22;
  914. color: #ffffff;
  915. line-height: 25rpx;
  916. position: absolute;
  917. top: 0;
  918. right: 10rpx;
  919. }
  920. }
  921. }
  922. .zuhe-list-content {
  923. width: 655rpx;
  924. // height: 214rpx;
  925. background: #fff;
  926. border: 2rpx solid #def4ff;
  927. display: flex;
  928. flex-direction: row;
  929. box-sizing: content-box;
  930. margin-top: 10rpx;
  931. border-radius: 14rpx;
  932. margin: 10rpx auto;
  933. padding: 20rpx;
  934. &.stylecontent {
  935. border: 2rpx solid #fff0de;
  936. }
  937. }
  938. .list-details-info {
  939. width: 100%;
  940. flex-direction: column;
  941. font-size: 26rpx;
  942. position: relative;
  943. .list-details-title {
  944. line-height: 38rpx;
  945. text-overflow: ellipsis;
  946. overflow: hidden;
  947. display: -webkit-box;
  948. -webkit-line-clamp: 2;
  949. line-clamp: 2;
  950. -webkit-box-orient: vertical;
  951. }
  952. .list-details-specs {
  953. width: 100%;
  954. display: inline-block;
  955. margin: 5rpx 0;
  956. color: #666666;
  957. }
  958. .list-details-miniQuantity {
  959. width: 100%;
  960. display: inline-block;
  961. margin-top: 7rpx;
  962. }
  963. }
  964. .list-details-price {
  965. width: 100%;
  966. .floor-item-act {
  967. height: 54rpx;
  968. text-align: center;
  969. box-sizing: border-box;
  970. float: left;
  971. padding: 11rpx 0;
  972. }
  973. .price-icon {
  974. width: 22rpx;
  975. height: 28rpx;
  976. vertical-align: middle;
  977. margin-right: 10rpx;
  978. }
  979. .price-icon + text {
  980. font-size: 25rpx;
  981. vertical-align: middle;
  982. }
  983. .list-login-now {
  984. width: 375rpx;
  985. color: #f8c499;
  986. .p-no {
  987. float: left;
  988. font-size: $font-size-24;
  989. color: $color-system;
  990. margin-right: 10rpx;
  991. }
  992. }
  993. .login-now {
  994. padding: 10rpx 10rpx 10rpx 0;
  995. }
  996. .list-none {
  997. margin-top: 15rpx;
  998. .price-small {
  999. font-size: $font-size-24;
  1000. line-height: 40rpx;
  1001. color: #ff2a2a;
  1002. }
  1003. }
  1004. .list-price-loding {
  1005. font-size: $font-size-24;
  1006. line-height: 54rpx;
  1007. color: #ff2a2a;
  1008. }
  1009. .list-shop {
  1010. float: left;
  1011. overflow: hidden;
  1012. &.com {
  1013. width: 100%;
  1014. }
  1015. .list-price {
  1016. color: #ff2a2a;
  1017. float: left;
  1018. line-height: 54rpx;
  1019. align-items: center;
  1020. justify-content: center;
  1021. .price-larger {
  1022. font-size: $font-size-26;
  1023. display: inline-block;
  1024. &.none {
  1025. text-decoration: line-through;
  1026. color: #999999;
  1027. }
  1028. }
  1029. .list-price-all {
  1030. width: 100%;
  1031. float: left;
  1032. }
  1033. .zuhe_price-larger {
  1034. width: 100%;
  1035. float: left;
  1036. height: 54rpx;
  1037. color: #666666;
  1038. .price-larger {
  1039. float: left;
  1040. margin-right: 20rpx;
  1041. }
  1042. .price-btn {
  1043. display: inline-block;
  1044. padding: 0 16rpx;
  1045. line-height: 32rpx;
  1046. border-radius: 16rpx;
  1047. text-align: center;
  1048. box-sizing: border-box;
  1049. border: 1px solid #FF5B00;
  1050. font-size: 24rpx;
  1051. color: #FF5B00;
  1052. margin-left: 30rpx;
  1053. }
  1054. }
  1055. .price-two {
  1056. color: #666666;
  1057. float: left;
  1058. }
  1059. .zuhe_list_zj {
  1060. color: #ff2a2a;
  1061. }
  1062. .price-view {
  1063. display: inline-block;
  1064. width: 40rpx;
  1065. border-radius: 10rpx;
  1066. font-size: $font-size-22;
  1067. text-align: center;
  1068. color: #ffffff;
  1069. height: 36rpx;
  1070. line-height: 36rpx;
  1071. margin-right: 8rpx;
  1072. &.ladder {
  1073. background: linear-gradient(135deg, rgba(255, 0, 0, 1) 0%, rgba(242, 143, 49, 1) 100%);
  1074. }
  1075. &.activity {
  1076. background: linear-gradient(135deg, rgba(128, 0, 255, 1) 0%, rgba(242, 49, 153, 1) 100%);
  1077. }
  1078. }
  1079. }
  1080. .zuhe_list_price .price-view {
  1081. margin-left: 20rpx;
  1082. float: left;
  1083. margin-top: 5rpx;
  1084. }
  1085. .zuhe_list_price {
  1086. width: 100%;
  1087. overflow: hidden;
  1088. margin-top: 10rpx;
  1089. }
  1090. .count {
  1091. float: right;
  1092. border: 1px solid #eeeeee;
  1093. border-radius: 10rpx;
  1094. .number-box {
  1095. display: flex;
  1096. justify-content: center;
  1097. align-items: center;
  1098. .iconfont {
  1099. font-size: $font-size-24;
  1100. padding: 0 16rpx;
  1101. color: $text-color;
  1102. text-align: center;
  1103. line-height: 48rpx;
  1104. font-weight: bold;
  1105. }
  1106. .btn-input {
  1107. width: 100rpx;
  1108. height: 48rpx;
  1109. line-height: 48rpx;
  1110. background: #f8f8f8;
  1111. border-radius: 4rpx;
  1112. text-align: center;
  1113. font-size: $font-size-24;
  1114. border-right: 1px solid #eeeeee;
  1115. border-left: 1px solid #eeeeee;
  1116. }
  1117. }
  1118. }
  1119. .list-price-none {
  1120. width: 100%;
  1121. .price-none {
  1122. text-decoration: line-through;
  1123. color: #999999;
  1124. display: inline-block;
  1125. }
  1126. .icon-wenhao {
  1127. font-size: $font-size-32;
  1128. color: #0091ff;
  1129. margin-left: 6rpx;
  1130. }
  1131. }
  1132. }
  1133. .add-cart-btn {
  1134. flex: 4;
  1135. width: 140rpx;
  1136. height: 54rpx;
  1137. line-height: 54rpx;
  1138. border-radius: 27rpx;
  1139. color: #fff;
  1140. font-size: 24rpx;
  1141. margin-right: 0;
  1142. background: #ffffff;
  1143. border: 1px solid #c9c9c9;
  1144. color: $text-color;
  1145. }
  1146. .zuhe_btn {
  1147. float: right;
  1148. }
  1149. }
  1150. .zuhe_list_price {
  1151. display: block !important;
  1152. }
  1153. .zuhe_list_text {
  1154. margin-top: 0;
  1155. }
  1156. </style>