secondRecommend.vue 3.2 KB

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