productList.vue 10 KB

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