secondRecommend.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template name="recommend">
  2. <!-- 供应商信息 -->
  3. <view class="recommend clearfix">
  4. <view class="recommend-empty" v-if="isEmpty">
  5. <image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/recmmmd.png"></image>
  6. <text>暂无相关推荐商品</text>
  7. </view>
  8. <view class="recommend-list" v-else>
  9. <swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
  10. <swiper-item v-for="(item,index) in recommendList" :key="index">
  11. <view class="row-list" v-for="(pros, idx) in item" :key="idx" @click.stop="navToDetailPage(pros.productID)">
  12. <view class="list-image"><image :src="pros.mainImage" mode=""></image></view>
  13. <view class="list-name">{{pros.name}}</view>
  14. </view>
  15. </swiper-item>
  16. </swiper>
  17. <view class="swiper__recommenddots-box" v-if="recommendList.length > 1">
  18. <view v-for="(item,idx) in recommendList"
  19. :key="idx"
  20. :class="[idx===current?'swiper__dots-long':'none']"
  21. :data-index="current" class="swiper__dots-item">
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import authorize from '@/common/config/authorize.js'
  29. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  30. import tuiNomore from "@/components/tui-components/nomore/nomore"
  31. export default{
  32. name:'recommend',
  33. props:{
  34. queryProductid: {
  35. // Unistars类型
  36. type: String,
  37. }
  38. },
  39. components:{
  40. tuiLoadmore,
  41. tuiNomore,
  42. },
  43. data() {
  44. return{
  45. current:0,
  46. recommendList:[],
  47. isEmpty:false,
  48. pageSize:4,
  49. productID:'',
  50. }
  51. },
  52. created() {
  53. this.productID = this.queryProductid
  54. this.infoRecommend(this.queryProductid)
  55. },
  56. methods:{
  57. infoRecommend(id){
  58. this.SellerService.ProductRecommend({productId:id}).then(response =>{
  59. if( response.data && response.data.length > 0){
  60. this.isEmpty = false
  61. for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
  62. this.recommendList.push(response.data.slice(i, i + this.pageSize));
  63. }
  64. }else{
  65. this.isEmpty = true
  66. }
  67. }).catch(error =>{
  68. this.$util.msg(error.msg,2000)
  69. })
  70. },
  71. //轮播图切换修改背景色
  72. swiperChange(e) {
  73. const index = e.detail.current;
  74. this.current = index;
  75. },
  76. navToDetailPage(id) {//跳转商品详情页
  77. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="scss">
  83. .recommend{
  84. background: #FFFFFF;
  85. width: 100%;
  86. .recommend-empty{
  87. width: 702rpx;
  88. // height: 100rpx;
  89. line-height: 100rpx;
  90. padding: 80rpx 24rpx;
  91. font-size: $font-size-28;
  92. color: #999999;
  93. text-align: center;
  94. image{
  95. width: 360rpx;
  96. height: 360rpx;
  97. }
  98. text{
  99. display: block;
  100. }
  101. }
  102. .recommend-list{
  103. width: 100%;
  104. height: auto;
  105. position: relative;
  106. padding-bottom: 20rpx;
  107. .tui-banner-swiper {
  108. width: 702rpx;
  109. margin: 0 auto;
  110. background: #F7F7F7;
  111. padding: 20rpx 24rpx;
  112. height: 900rpx;
  113. overflow: hidden;
  114. transform: translateY(0);
  115. .row-list{
  116. width: 340rpx;
  117. height: auto;
  118. float: left;
  119. margin-right: 20rpx;
  120. margin-bottom: 20rpx;
  121. border-radius: 20rpx;
  122. background: #FFFFFF;
  123. &:nth-child(2n){
  124. margin-right: 0;
  125. }
  126. .list-image{
  127. width: 100%;
  128. height: 340rpx;
  129. border-radius: 20rpx 20rpx 0 0;
  130. image{
  131. width: 100%;
  132. height: 340rpx;
  133. border-radius: 20rpx 20rpx 0 0;
  134. }
  135. }
  136. .list-name{
  137. font-size: $font-size-28;
  138. color: $text-color;
  139. line-height:88rpx;
  140. padding: 0 10rpx;
  141. overflow: hidden;
  142. white-space: nowrap;
  143. text-overflow: ellipsis;
  144. }
  145. }
  146. }
  147. }
  148. .swiper__recommenddots-box{
  149. position: absolute;
  150. bottom: -20rpx;
  151. left: 0;
  152. right: 0;
  153. /* #ifndef APP-NVUE */
  154. display: flex;
  155. /* #endif */
  156. flex: 1;
  157. flex-direction: row;
  158. justify-content: center;
  159. align-items: center;
  160. height: 60rpx;
  161. background: #FFFFFF;
  162. .swiper__dots-item{
  163. width: 8rpx;
  164. height: 8rpx;
  165. border-radius: 100%;
  166. margin-left: 6px;
  167. background-color:rgba(0,0,0,.3);
  168. }
  169. .swiper__dots-long{
  170. width: 32rpx;
  171. height: 8rpx;
  172. border-radius: 4rpx;
  173. background-color: #000;
  174. transition: all 0.4s;
  175. }
  176. }
  177. }
  178. </style>