|
|
@@ -6,21 +6,10 @@
|
|
|
<text>暂无相关推荐商品</text>
|
|
|
</view>
|
|
|
<view class="recommend-list" v-else>
|
|
|
- <swiper class="tui-banner-swiper" :autoplay="false" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
|
|
|
- <swiper-item v-for="(item,index) in recommendList" :key="index">
|
|
|
- <view class="row-list" v-for="(pros, idx) in item" :key="idx" @click.stop="navToDetailPage(pros.productID)">
|
|
|
+ <view class="row-list" v-for="(pros, idx) in recommendList" :key="idx" @click.stop="navToDetailPage(pros.productID)">
|
|
|
<view class="list-image"><image :src="pros.mainImage" mode=""></image></view>
|
|
|
<view class="list-name">{{pros.name}}</view>
|
|
|
</view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__recommenddots-box" v-if="recommendList.length > 1">
|
|
|
- <view v-for="(item,idx) in recommendList"
|
|
|
- :key="idx"
|
|
|
- :class="[idx===current?'swiper__dots-long':'none']"
|
|
|
- :data-index="current" class="swiper__dots-item">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -60,9 +49,10 @@
|
|
|
this.SellerService.ProductRecommend({productId:id}).then(response =>{
|
|
|
if( response.data && response.data.length > 0){
|
|
|
this.isEmpty = false
|
|
|
- for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
|
|
|
- this.recommendList.push(response.data.slice(i, i + this.pageSize));
|
|
|
- }
|
|
|
+ this.recommendList = response.data
|
|
|
+ // for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
|
|
|
+ // this.recommendList.push(response.data.slice(i, i + this.pageSize));
|
|
|
+ // }
|
|
|
}else{
|
|
|
this.isEmpty = true
|
|
|
}
|
|
|
@@ -106,45 +96,37 @@
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
position: relative;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- .tui-banner-swiper {
|
|
|
- width: 702rpx;
|
|
|
- margin: 0 auto;
|
|
|
- background: #F7F7F7;
|
|
|
- padding: 20rpx 24rpx;
|
|
|
- height: 900rpx;
|
|
|
- overflow: hidden;
|
|
|
- transform: translateY(0);
|
|
|
- .row-list{
|
|
|
- width: 340rpx;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- margin-right: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- &:nth-child(2n){
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .list-image{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0rpx 24rpx;
|
|
|
+ .row-list{
|
|
|
+ width: 340rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 2rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ &:nth-child(2n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .list-image{
|
|
|
+ width: 100%;
|
|
|
+ height: 340rpx;
|
|
|
+ border-radius: 2rpx 2rpx 0 0;
|
|
|
+ image{
|
|
|
width: 100%;
|
|
|
height: 340rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 340rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-name{
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- line-height:88rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ border-radius: 2rpx 2rpx 0 0;
|
|
|
}
|
|
|
+ }
|
|
|
+ .list-name{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height:88rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
}
|
Administrator