buyagainList.vue 11 KB

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