commodityList.vue 10 KB

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