recommend.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template name="recommend">
  2. <!-- 供应商信息 -->
  3. <view class="recommend clearfix">
  4. <view class="recommend-empty" v-if="isEmpty">暂无相关推荐商品</view>
  5. <view class="recommend-list" v-else>
  6. <scroll-view scroll-y="true" :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower">
  7. <view class="row-list" v-for="(item, index) in recommendList" :key="index" @click.stop="navToDetailPage(item.productID)">
  8. <view class="list-image"><image :src="item.mainImage" mode=""></image></view>
  9. <view class="list-name">{{item.name}}</view>
  10. </view>
  11. <!--加载loadding-->
  12. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  13. <tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
  14. <!--加载loadding-->
  15. </scroll-view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import authorize from '@/common/config/authorize.js'
  21. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  22. import tuiNomore from "@/components/tui-components/nomore/nomore"
  23. import { queryRelevant } from "@/api/product.js"
  24. export default{
  25. name:'recommend',
  26. props:{
  27. queryProductid: {
  28. // Unistars类型
  29. type: Number,
  30. default: 0
  31. }
  32. },
  33. components:{
  34. tuiLoadmore,
  35. tuiNomore,
  36. },
  37. data() {
  38. return{
  39. recommendList:[],
  40. isEmpty:false,
  41. pageNum:1,
  42. pageSize:10,
  43. hasNextPage:false,
  44. loadding: false,
  45. pullUpOn: true,
  46. pullFlag: true,
  47. nomoreText: '上拉显示更多',
  48. productID:'',
  49. scrollHeight: '',
  50. }
  51. },
  52. created() {
  53. // console.log(this.queryProductid)
  54. this.productID = this.queryProductid
  55. this.infoRecommend(this.queryProductid)
  56. this.setScrollHeight();
  57. },
  58. methods:{
  59. infoRecommend(id){
  60. queryRelevant({productID:id,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
  61. // console.log(response)
  62. let responseData = response.data
  63. if(responseData.results&&responseData.results.length > 0){
  64. this.isEmpty = false
  65. this.hasNextPage = responseData.hasNextPage
  66. this.recommendList =responseData.results
  67. this.pullFlag = false;
  68. setTimeout(()=>{this.pullFlag = true;},500)
  69. if(this.hasNextPage){
  70. this.pullUpOn = false
  71. this.nomoreText = '上拉显示更多'
  72. }else{
  73. this.pullUpOn = false
  74. this.loadding = false
  75. this.nomoreText = '已至底部'
  76. }
  77. }else{
  78. this.isEmpty = true
  79. }
  80. }).catch(response =>{
  81. this.$util.msg(response.msg,2000)
  82. })
  83. },
  84. getOnReachBottomData(){
  85. this.pageNum+=1
  86. queryRelevant({productID:this.productID,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
  87. let responseData = response.data
  88. if(responseData.results&&responseData.results.length > 0){
  89. this.hasNextPage = responseData.hasNextPage
  90. this.recommendList = this.recommendList.concat(responseData.results)
  91. this.pullFlag = false;// 防上拉暴滑
  92. setTimeout(()=>{this.pullFlag = true;},500)
  93. if(this.hasNextPage){
  94. this.pullUpOn = false
  95. this.nomoreText = '上拉显示更多'
  96. }else{
  97. this.pullUpOn = false
  98. this.loadding = false
  99. this.nomoreText = '已至底部'
  100. }
  101. }
  102. }).catch(response =>{
  103. this.$util.msg(response.msg,2000)
  104. })
  105. },
  106. scrolltolower() {
  107. if(this.hasNextPage){
  108. this.loadding = true
  109. this.pullUpOn = true
  110. this.getOnReachBottomData(this.currentTab);
  111. }
  112. },
  113. setScrollHeight() {
  114. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  115. this.windowHeight = windowHeight - 1;
  116. this.scrollHeight = windowHeight - 1;
  117. },
  118. navToDetailPage(id) {//跳转商品详情页
  119. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  120. }
  121. }
  122. }
  123. </script>
  124. <style lang="scss">
  125. .recommend{
  126. background: #FFFFFF;
  127. width: 100%;
  128. .recommend-empty{
  129. width: 702rpx;
  130. height: 100rpx;
  131. line-height: 100rpx;
  132. padding: 0 24rpx;
  133. font-size: $font-size-32;
  134. color: #999999;
  135. text-align: center;
  136. }
  137. .recommend-list{
  138. width: 702rpx;
  139. height: auto;
  140. padding: 24rpx;
  141. .row-list{
  142. width: 340rpx;
  143. height: auto;
  144. float: left;
  145. margin-right: 20rpx;
  146. margin-bottom: 30rpx;
  147. &:nth-child(2n){
  148. margin-right: 0;
  149. }
  150. .list-image{
  151. width: 100%;
  152. height: 340rpx;
  153. border-radius: 14rpx;
  154. image{
  155. width: 100%;
  156. height: 340rpx;
  157. border-radius: 14rpx;
  158. }
  159. }
  160. .list-name{
  161. font-size: $font-size-28;
  162. color: $text-color;
  163. line-height: 44rpx;
  164. overflow: hidden;
  165. white-space: nowrap;
  166. text-overflow: ellipsis;
  167. }
  168. }
  169. }
  170. }
  171. </style>