classifyProductList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <!-- 金刚区商品模块 -->
  2. <template>
  3. <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
  4. <list-skeleton v-if="showSkeleton" :listType='0'></list-skeleton>
  5. <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="toLower" scroll-y v-if="listData.length > 0">
  6. <view v-for="(item,index) in listData" :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. <view class="list-details-specs" v-if="item.productCode!=''&&item.productCode!=null">商品编码:{{item.productCode}}</view>
  12. <view class="list-details-price">
  13. <view class="floor-item-act" v-if="item.actStatus==1">
  14. <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
  15. {{item.promotions.name}}<text v-if="hasLogin && item.price1TextFlag != '1'">:¥{{ item.price | NumFormat }}</text>
  16. </view>
  17. <view class="floor-tags" v-else>{{item.promotions.name}}</view>
  18. </view>
  19. <view class="floor-item-act" v-if="item.actStatus ==0 && item.ladderPriceFlag==1">
  20. <view class="floor-tags">阶梯价格</view>
  21. </view>
  22. <view v-if="hasLogin" class="list-price">
  23. <view v-if="userIdentity == 1">
  24. <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  25. ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
  26. </text>
  27. </view>
  28. <view v-if="userIdentity == 4">
  29. <view class="price-larger" v-if="item.price1TextFlag == '1'">
  30. <text class="txt">¥未公开价格</text>
  31. </view>
  32. <view v-else>
  33. <view class="price-larger" v-if="item.price1TextFlag == '2'">
  34. <text class="txt">¥价格仅会员可见</text>
  35. </view>
  36. <template v-else>
  37. <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  38. ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
  39. </text>
  40. </template>
  41. </view>
  42. </view>
  43. <view v-if="userIdentity == 2">
  44. <view class="price-larger" v-if="item.price1TextFlag == '1'">
  45. <text class="txt">¥未公开价格</text>
  46. </view>
  47. <template v-else>
  48. <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
  49. ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
  50. </text>
  51. </template>
  52. </view>
  53. </view>
  54. <view v-else class="list-login-now">
  55. <text class="p-no">¥</text>
  56. <uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view v-if="showLoading && listData.length > 4">
  62. <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
  63. <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
  64. </view>
  65. </scroll-view>
  66. <view class="empty-container" v-if="showEmpty">
  67. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
  68. <text class="error-text">{{emptyText}}</text>
  69. </view>
  70. <!-- 透明模态层 -->
  71. <modal-layer v-if='isModallayer'></modal-layer>
  72. </view>
  73. </template>
  74. <script>
  75. import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
  76. import modalLayer from "@/components/modal-layer"
  77. import uniStars from '@/components/uni-stars/uni-stars.vue'
  78. import { mapState,mapMutations } from 'vuex';
  79. export default{
  80. name:'CommodityList',
  81. components:{
  82. listSkeleton,
  83. modalLayer,
  84. uniStars
  85. },
  86. props: {
  87. emptyText: {
  88. type: String
  89. },
  90. serverUrl: {
  91. type: String
  92. },
  93. classifyID: {
  94. type:Number
  95. }
  96. },
  97. data(){
  98. return{
  99. clubStatus:'',
  100. isModallayer:false,
  101. windowHeight: '',
  102. showSkeleton: true,
  103. showEmpty: false,
  104. userID: 0,
  105. userIdentity:'',
  106. scrollHeight: '',
  107. listData: [],
  108. showLoading: false,
  109. loadingNow: true,
  110. loadingText: '上拉加载更多',
  111. pageSize: 20,
  112. pageNum: 1,
  113. totalPage: 1,
  114. hasNextPage:false,
  115. pullFlag: true,
  116. cartNum: 0,
  117. }
  118. },
  119. created() {
  120. // console.log(this.typeId)
  121. this.setScrollHeight();
  122. this.$api.getComStorage('userInfo').then((resolve) =>{
  123. this.clubStatus = resolve.clubStatus
  124. this.userID = resolve.userID ? resolve.userID :0;
  125. this.userIdentity = resolve.userIdentity
  126. this.getListFromServer();
  127. }).catch(error =>{
  128. this.getListFromServer();
  129. })
  130. },
  131. filters: {
  132. NumFormat:function(text) {//处理金额
  133. return Number(text).toFixed(2);
  134. },
  135. },
  136. computed: {
  137. ...mapState(['hasLogin','userInfo'])
  138. },
  139. methods:{
  140. toLower() {
  141. if(this.hasNextPage && this.pullFlag) {
  142. this.getListFromServer(true);
  143. }
  144. },
  145. setScrollHeight() {
  146. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  147. this.windowHeight = windowHeight - 1;
  148. this.scrollHeight = windowHeight - 1;
  149. },
  150. getListFromServer(loadMore) {
  151. this.getQueryGoodslist(loadMore)
  152. },
  153. getQueryGoodslist(loadMore){
  154. this.showLoading = true;
  155. this.loadingNow = true;
  156. this.loadingText = '加载中';
  157. if(loadMore) { this.pageNum += 1; }
  158. let params ={
  159. classifyId:this.classifyID,
  160. userId:this.userID,
  161. pageNum:this.pageNum,
  162. pageSize:this.pageSize,
  163. }
  164. this.CommonService.GetHomeClassify(params).then(response =>{
  165. const resList = response.data.results;
  166. if(resList && resList.length > 0){
  167. this.showEmpty = false
  168. this.hasNextPage = response.data.hasNextPage;
  169. if(loadMore) {
  170. this.listData = [...this.listData,...resList];
  171. this.getProductPrice()
  172. this.showSkeleton = false
  173. } else {
  174. this.listData = [...resList];
  175. this.getProductPrice()
  176. this.showSkeleton = false
  177. }
  178. // 防上拉暴滑
  179. this.pullFlag = false;
  180. setTimeout(()=>{ this.pullFlag = true; },500)
  181. // 底部提示文案
  182. if(this.hasNextPage) {
  183. this.loadingText = '上拉加载更多';
  184. } else {
  185. this.showLoading = true;
  186. this.loadingNow = false;
  187. this.loadingText = '已至底部';
  188. }
  189. } else {
  190. if(!loadMore) { this.showEmpty = true; }
  191. }
  192. }).catch(error =>{
  193. this.$util.msg(error.msg,2000);
  194. })
  195. },
  196. getProductPrice(){//获取价格
  197. let productIdArr = [];
  198. this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
  199. productIdArr.push(item.productID)
  200. })
  201. this.productIds = productIdArr.join(",");
  202. this.ProductService.querySearchProductPrice({userId: this.userID,productIds:this.productIds}).then(response =>{
  203. if (response.data) {
  204. this.listData = this.ReturnNewProducts(this.listData,response.data);
  205. }
  206. this.priceLoading = false;
  207. }).catch(error =>{
  208. this.$util.msg(error.msg,2000)
  209. })
  210. },
  211. ReturnNewProducts(Array,list){//处理对应商品ID的商品价格
  212. let NewArray = []
  213. Array.map(item=>{
  214. for (let i = 0; i < list.length; i++) {
  215. if( item.productID == list[i].productId ){
  216. NewArray.push(Object.assign(item,list[i]))
  217. }
  218. }
  219. });
  220. return NewArray
  221. },
  222. navToDetailPage(id) {
  223. this.isModallayer = true;
  224. this.$api.navigateTo(`/pages/goods/product?id=${id}`);
  225. this.isModallayer = false;
  226. },
  227. PromotionsFormat(promo){//促销活动类型数据处理
  228. if(promo!=null){
  229. if(promo.type == 1 && promo.mode == 1){
  230. return true
  231. }else{
  232. return false
  233. }
  234. }
  235. return false
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="scss">
  241. .commodity-list-wrapper {
  242. scroll-view {
  243. height: 100%;
  244. border-top: 2rpx solid rgba(0,0,0,0.07);
  245. }
  246. .empty-container-image {
  247. margin-top: -300rpx;
  248. }
  249. .toIndexPage {
  250. bottom: 390rpx;
  251. }
  252. .show-more-btn {
  253. width: 276rpx;
  254. height: 52rpx;
  255. line-height: 52rpx;
  256. border: 2rpx solid #D8D8D8;
  257. background: #F7F7F7;
  258. font-size: 26rpx;
  259. margin: 26rpx 0;
  260. position: absolute;
  261. left: 50%;
  262. margin-left: -138rpx;
  263. }
  264. }
  265. .all-type-list-content {
  266. height: 216rpx;
  267. padding: 24rpx;
  268. background: #fff;
  269. margin-bottom: 2rpx;
  270. display: flex;
  271. flex-direction: row;
  272. box-sizing: content-box;
  273. .list-img {
  274. width: 210rpx;
  275. height: 218rpx !important;
  276. margin-right: 26rpx;
  277. border-radius: 10rpx;
  278. border: 2rpx solid #f3f3f3;
  279. }
  280. }
  281. .list-details-info {
  282. width: 466rpx;
  283. display: flex;
  284. flex-direction: column;
  285. font-size: 26rpx;
  286. position: relative;
  287. .list-details-title {
  288. line-height: 38rpx;
  289. text-overflow: ellipsis;
  290. overflow: hidden;
  291. display: -webkit-box;
  292. -webkit-line-clamp: 2;
  293. line-clamp: 2;
  294. -webkit-box-orient: vertical;
  295. }
  296. .list-details-specs {
  297. margin-top: 8rpx;
  298. color: #666666;
  299. }
  300. .list-details-miniQuantity {
  301. margin-top: 7rpx;
  302. }
  303. }
  304. .list-details-price {
  305. width: 100%;
  306. height: 54rpx;
  307. line-height: 54rpx;
  308. position: absolute;
  309. bottom: -10rpx;
  310. right: 0;
  311. .floor-item-act{
  312. height: 54rpx;
  313. text-align: center;
  314. box-sizing: border-box;
  315. float: right;
  316. .floor-tags{
  317. height: 36rpx;
  318. border-radius: 6rpx;
  319. background-color: #FFFFFF;
  320. line-height: 36rpx;
  321. color: $color-system;
  322. text-align: center;
  323. display: inline-block;
  324. padding:0 16rpx;
  325. font-size: $font-size-20;
  326. margin-left: 15rpx;
  327. border: 1px solid #E15616;
  328. }
  329. }
  330. .price-icon {
  331. width: 22rpx;
  332. height: 28rpx;
  333. vertical-align: middle;
  334. margin-right: 10rpx;
  335. }
  336. .price-icon + text {
  337. font-size: 25rpx;
  338. vertical-align: middle;
  339. }
  340. .list-login-now {
  341. color: #F8C499;
  342. float: left;
  343. line-height: 54rpx;
  344. .p-no{
  345. float: left;
  346. font-size: $font-size-24;
  347. color: $text-color;
  348. }
  349. }
  350. .login-now {
  351. padding: 10rpx 10rpx 10rpx 0;
  352. }
  353. .list-price {
  354. color: #FF2A2A;
  355. height: 44rpx;
  356. float: left;
  357. .price-larger {
  358. width: 100%;
  359. height: 44rpx;
  360. font-size: 32rpx;
  361. &.none{
  362. text-decoration: line-through;
  363. color: #999999;
  364. }
  365. &.small{
  366. font-size: $font-size-24;
  367. }
  368. .txt{
  369. font-size: $font-size-24;
  370. display: inline-block;
  371. line-height: 44rpx;
  372. text-align: left;
  373. float: left;
  374. }
  375. }
  376. }
  377. .add-cart-btn {
  378. width: 156rpx;
  379. height: 64rpx;
  380. line-height: 64rpx;
  381. border-radius: 32rpx;
  382. color: #fff;
  383. font-size: 26rpx;
  384. margin-right: 0;
  385. background:linear-gradient(45deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
  386. }
  387. }
  388. .cart-icon {
  389. width: 92rpx;
  390. height: 92rpx;
  391. border-radius: 50%;
  392. background: rgba(255, 147, 0, 0.5);
  393. position: fixed;
  394. right: 24rpx;
  395. bottom: 30%;
  396. display: flex;
  397. align-items: center;
  398. justify-content: center;
  399. cursor: pointer;
  400. image {
  401. width: 58rpx;
  402. height: 58rpx;
  403. }
  404. text {
  405. font-size: 28rpx;
  406. position: absolute;
  407. top: -10rpx;
  408. right: 0;
  409. }
  410. }
  411. </style>