productList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  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 v-if="showSkeleton" :listType="0"></list-skeleton>
  7. <view class="product-container" v-if="!isShowEmpty">
  8. <scroll-view
  9. :style="{ height: scrollHeight + 'px' }"
  10. @scrolltolower="scrolltolower"
  11. scroll-y
  12. v-if="productList.length > 0"
  13. >
  14. <view
  15. v-for="(item, index) in productList"
  16. :key="index"
  17. :id="item.id"
  18. class="all-type-list-content commodity-list"
  19. @click.stop="navToDetailPage(item.productId)"
  20. >
  21. <image mode="widthFix" :src="item.image" class="list-img" alt="list-img"></image>
  22. <view class="list-details-info">
  23. <text class="list-details-title">{{ item.name }}</text>
  24. <text class="list-details-specs">规格:{{ item.unit != null ? item.unit : '' }}</text>
  25. <text class="list-details-miniQuantity"
  26. >起订量:{{ item.ladderPriceFlag == '1' ? item.maxBuyNumber : item.minBuyNumber }}</text
  27. >
  28. <view class="list-details-price" v-if="item.priceFlag == 1">
  29. <view class="list-none"><view class="price-small">未公开价格</view></view>
  30. </view>
  31. <view class="list-details-price" v-else>
  32. <view class="list-shop">
  33. <view class="list-price-none" v-if="item.repurchaseFlag == 1">
  34. <text class="price-none">¥{{ item.originalPrice }}</text>
  35. <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
  36. </view>
  37. <view class="list-price" v-else>
  38. <text
  39. class="price-larger"
  40. :class="
  41. PromotionsFormat(item.promotions) || item.svipProductFlag == 1 ? 'none' : ''
  42. "
  43. >
  44. ¥{{
  45. (PromotionsFormat(item.promotions) ? item.originalPrice : item.price)
  46. | NumFormat
  47. }}
  48. </text>
  49. </view>
  50. </view>
  51. <button class="add-cart-btn" @click.stop="operationHanld(item)">数量</button>
  52. </view>
  53. <view class="list-details-price">
  54. <view class="floor-item-act">
  55. <view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
  56. <template v-if="item.actStatus == 1">
  57. <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
  58. {{ item.promotions.name }}<text>:¥{{ item.price | NumFormat }}</text>
  59. </view>
  60. <view class="floor-tags" v-else>{{ item.promotions.name }}</view>
  61. </template>
  62. <template v-if="item.svipProductFlag == 1">
  63. <view class="svip-tags">
  64. <view class="tags">SVIP</view>
  65. <view class="price">{{ item.svipPriceTag }}</view>
  66. </view>
  67. </template>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <button class="show-more-btn" v-if="showRegularBtn" @click="getListFromServer(true)">查看更多</button>
  73. <view v-if="showLoading && productList.length > 4 && !showRegularBtn">
  74. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
  75. >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
  76. >
  77. <view class="loading-wrapper loading-wrapper-btm" v-else
  78. >———<text class="btm-text">已至底部</text>———</view
  79. >
  80. </view>
  81. </scroll-view>
  82. </view>
  83. <view class="empty-container" v-else>
  84. <image
  85. class="empty-container-image"
  86. src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png"
  87. mode="aspectFit"
  88. ></image>
  89. <text class="error-text">您还没有购买过任何商品哟~</text>
  90. <button class="submit-btn toIndexPage" @click="toIndexPage">去逛逛</button>
  91. </view>
  92. <!-- 可拖动悬浮按钮 -->
  93. <cm-drag
  94. v-if="!isShowEmpty"
  95. :cartNum="cartQuantity"
  96. :isDock="true"
  97. :existTabBar="true"
  98. @btnClick="btnClick"
  99. @btnTouchstart="btnTouchstart"
  100. @btnTouchend="btnTouchend"
  101. >
  102. </cm-drag>
  103. <!-- 透明模态层 -->
  104. <modal-layer v-if="isModallayer"></modal-layer>
  105. </view>
  106. </template>
  107. <script>
  108. import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
  109. import modalLayer from '@/components/modal-layer'
  110. import uniStars from '@/components/uni-stars/uni-stars.vue'
  111. import cmDrag from '@/components/cm-custom/cm-drag.vue'
  112. import { mapState, mapMutations } from 'vuex'
  113. export default {
  114. name: 'productList',
  115. components: {
  116. listSkeleton,
  117. modalLayer,
  118. uniStars,
  119. cmDrag
  120. },
  121. props: {
  122. emptyText: {
  123. type: String
  124. }
  125. },
  126. data() {
  127. return {
  128. isModallayer: false,
  129. windowHeight: '',
  130. showSkeleton: true,
  131. isShowEmpty: false,
  132. userId: 0,
  133. actasFlag: 0,
  134. scrollHeight: '',
  135. productList: [],
  136. showLoading: false,
  137. loadingNow: true,
  138. loadingText: '上拉加载更多',
  139. pageSize: 10,
  140. pageNum: 1,
  141. hasNextPage: false,
  142. pullFlag: true,
  143. fromRegularPurchasePage: false,
  144. cartQuantity: 0,
  145. showRegularBtn: false,
  146. isPrecedence: false
  147. }
  148. },
  149. created() {
  150. this.setScrollHeight()
  151. this.initGetStotage()
  152. },
  153. filters: {
  154. NumFormat: function(text) {
  155. //处理金额
  156. return Number(text).toFixed(2)
  157. }
  158. },
  159. computed: {
  160. ...mapState(['hasLogin', 'userInfo', 'identity'])
  161. },
  162. methods: {
  163. async initGetStotage() {
  164. // 初始化
  165. const userInfo = await this.$api.getStorage()
  166. this.userId = userInfo.clubId ? userInfo.clubId : 0
  167. if (userInfo.userIdentity == 1) {
  168. this.actasFlag = userInfo.userIdentity
  169. } else {
  170. this.actasFlag = 2
  171. }
  172. this.getProductAgainInfo()
  173. this.GetUserCartNumber()
  174. },
  175. scrolltolower() {
  176. if (this.hasNextPage && this.pullFlag) {
  177. this.getProductAgainInfo(true)
  178. }
  179. },
  180. setScrollHeight() {
  181. const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
  182. this.windowHeight = windowHeight - 1
  183. this.scrollHeight = windowHeight - 1
  184. },
  185. getProductAgainInfo(loadMore) {
  186. this.showLoading = true
  187. this.loadingNow = true
  188. this.loadingText = '加载中'
  189. this.isShowEmpty = false
  190. if (loadMore) {
  191. this.pageNum += 1
  192. }
  193. this.ProductService.GetRepeatBuyAgainProductList({
  194. flag: this.actasFlag, //查询促销标记 1协销 2机构 3供应商
  195. userId: this.userId,
  196. identity: this.identity,
  197. pageNum: this.pageNum,
  198. pageSize: this.pageSize
  199. })
  200. .then(response => {
  201. this.isShowWrapper = true
  202. this.cartQuantity = response.data.cartQuantity
  203. const listData = response.data.results
  204. if (listData && listData.length > 0) {
  205. this.hasNextPage = response.data.hasNextPage
  206. this.isShowEmpty = false
  207. if (loadMore) {
  208. this.productList = [...this.productList, ...listData]
  209. } else {
  210. this.productList = listData
  211. this.showSkeleton = false
  212. }
  213. //价格显示处理
  214. let isActFlg,
  215. newProductList = []
  216. this.productList.map((item, index) => {
  217. if (item.actStatus == 1) {
  218. isActFlg = true
  219. } else if (item.actStatus == 1 && item.ladderPriceFlag == '1') {
  220. isActFlg = true
  221. } else {
  222. isActFlg = false
  223. }
  224. newProductList.push(Object.assign({}, item, { isShowActFlg: isActFlg }))
  225. })
  226. this.productList = newProductList
  227. // 防上拉暴滑
  228. this.pullFlag = false
  229. setTimeout(() => {
  230. this.pullFlag = true
  231. }, 500)
  232. // 底部提示文案
  233. if (this.hasNextPage) {
  234. this.loadingText = '上拉加载更多'
  235. } else {
  236. this.showLoading = true
  237. this.loadingNow = false
  238. }
  239. } else {
  240. if (!loadMore) {
  241. this.isShowEmpty = true
  242. }
  243. }
  244. })
  245. .catch(response => {
  246. this.$util.msg(response.msg, 2000)
  247. })
  248. },
  249. GetUserCartNumber() {
  250. this.OrderService.ShoppingCartCount({ userId: this.userId })
  251. .then(response => {
  252. this.cartQuantity = response.data
  253. })
  254. .catch(error => {
  255. console.log('查询用户购物车数量失败')
  256. })
  257. },
  258. operationHanld(prop) {
  259. this.$emit('operationConfim', prop)
  260. },
  261. navToDetailPage(id) {
  262. this.isModallayer = true
  263. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  264. this.isModallayer = false
  265. },
  266. toIndexPage() {
  267. uni.switchTab({
  268. url: '/pages/tabBar/home/index'
  269. })
  270. },
  271. repurchModel() {
  272. this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
  273. },
  274. PromotionsFormat(promo) {
  275. //促销活动类型数据处理
  276. if (promo != null) {
  277. if (promo.type == 1 && promo.mode == 1) {
  278. return true
  279. } else {
  280. return false
  281. }
  282. }
  283. return false
  284. },
  285. btnClick() {
  286. this.$api.navigateTo('/pages/goods/cart')
  287. },
  288. btnTouchstart() {
  289. // console.log('btnTouchstart');
  290. },
  291. btnTouchend() {
  292. // console.log('btnTouchend');
  293. }
  294. }
  295. }
  296. </script>
  297. <style lang="scss">
  298. .commodity-list-wrapper {
  299. scroll-view {
  300. height: 100%;
  301. border-top: 2rpx solid rgba(0, 0, 0, 0.07);
  302. }
  303. .empty-container-image {
  304. margin-top: -300rpx;
  305. }
  306. .toIndexPage {
  307. bottom: 390rpx;
  308. }
  309. .show-more-btn {
  310. width: 276rpx;
  311. height: 52rpx;
  312. line-height: 52rpx;
  313. border: 2rpx solid #d8d8d8;
  314. background: #f7f7f7;
  315. font-size: 26rpx;
  316. margin: 26rpx 0;
  317. position: absolute;
  318. left: 50%;
  319. margin-left: -138rpx;
  320. }
  321. }
  322. .all-type-list-content {
  323. height: auto;
  324. padding: 24rpx;
  325. background: #fff;
  326. margin-bottom: 2rpx;
  327. display: flex;
  328. flex-direction: row;
  329. box-sizing: content-box;
  330. .list-img {
  331. width: 240rpx;
  332. height: 240rpx !important;
  333. margin-right: 26rpx;
  334. border-radius: 10rpx;
  335. border: 2rpx solid #f3f3f3;
  336. }
  337. }
  338. .list-details-info {
  339. width: 442rpx;
  340. flex-direction: column;
  341. font-size: 26rpx;
  342. position: relative;
  343. .list-details-title {
  344. line-height: 38rpx;
  345. text-overflow: ellipsis;
  346. overflow: hidden;
  347. display: -webkit-box;
  348. -webkit-line-clamp: 2;
  349. line-clamp: 2;
  350. -webkit-box-orient: vertical;
  351. }
  352. .list-details-specs {
  353. width: 100%;
  354. display: inline-block;
  355. margin-top: 8rpx;
  356. color: #999999;
  357. }
  358. .list-details-miniQuantity {
  359. width: 100%;
  360. display: inline-block;
  361. margin-top: 7rpx;
  362. }
  363. }
  364. .list-details-price {
  365. width: 100%;
  366. line-height: 54rpx;
  367. float: left;
  368. .floor-item-act {
  369. height: 54rpx;
  370. text-align: center;
  371. box-sizing: border-box;
  372. float: left;
  373. padding: 11rpx 0;
  374. }
  375. .price-icon {
  376. width: 22rpx;
  377. height: 28rpx;
  378. vertical-align: middle;
  379. margin-right: 10rpx;
  380. }
  381. .price-icon + text {
  382. font-size: 25rpx;
  383. vertical-align: middle;
  384. }
  385. .list-login-now {
  386. width: 375rpx;
  387. color: #f8c499;
  388. position: absolute;
  389. bottom: 0;
  390. .p-no {
  391. float: left;
  392. font-size: $font-size-24;
  393. color: $color-system;
  394. margin-right: 10rpx;
  395. }
  396. }
  397. .login-now {
  398. padding: 10rpx 10rpx 10rpx 0;
  399. }
  400. .list-none {
  401. margin-top: 30rpx;
  402. .price-small {
  403. font-size: $font-size-24;
  404. line-height: 40rpx;
  405. color: #ff2a2a;
  406. }
  407. }
  408. .list-shop {
  409. height: auto;
  410. float: left;
  411. .list-price {
  412. width: 100%;
  413. color: #ff2a2a;
  414. float: left;
  415. line-height: 54rpx;
  416. align-items: center;
  417. justify-content: center;
  418. .price-larger {
  419. font-size: $font-size-30;
  420. display: inline-block;
  421. &.none {
  422. text-decoration: line-through;
  423. color: #999999;
  424. }
  425. }
  426. }
  427. .list-price-none {
  428. width: 100%;
  429. .price-none {
  430. text-decoration: line-through;
  431. color: #999999;
  432. display: inline-block;
  433. }
  434. .icon-wenhao {
  435. font-size: $font-size-32;
  436. color: #0091ff;
  437. margin-left: 6rpx;
  438. }
  439. }
  440. }
  441. .add-cart-btn {
  442. float: right;
  443. width: 140rpx;
  444. height: 54rpx;
  445. line-height: 54rpx;
  446. border-radius: 27rpx;
  447. color: #fff;
  448. font-size: 24rpx;
  449. margin-right: 0;
  450. background: #ffffff;
  451. border: 1px solid #c9c9c9;
  452. color: $text-color;
  453. }
  454. }
  455. </style>