no message

zhaojs

2023-07-26 eb4d171a50e4940d4822ec57641ba24be7747afa

 uniapp/components/colGoodsImg.vue

@@ -1,192 +1,52 @@
<template>
   <view class="items-container borderBox colCen">
      <view class="image-container defIcon">
         <image style="border-radius: 8rpx 8rpx 0px 0px;" :src="items.mainPic" mode="aspectFill"></image>
      </view>
      <view class="goodsInfo colCenBet borderBox">
         <view class="topgoodsname-box colCen">
            <view class="goodsName-box rowCen">
               <view class="typeIcon-content defIcon">
                  <image :src="items.labelImg" mode="heightFix"></image>
               </view>
               <view style="white-space: inherit;" class="goodsText">
                  {{items.dtitle}}
               </view>
            </view>
				
   <swiper style="height: 100%;" class="swiper-box" :autoplay="true" :interval="3000" :duration="300" :indicator-active-color="'#fff'" :indicator-dots="true" circular>
      <swiper-item v-for="(items,index) in popBannerSList" :key='index'>
         <view class="swiper-item defIcon" style="width: 100%;height: 100%;" @click="goUrl(items)">
            <image :src="items.image" mode="aspectFit"></image>
         </view>
         <view class="goodsPrice-goodSale colCen borderBox">
            <view class="couponInfo-bar rowCen">
               <view class="couponbox rowCenCen" v-if="items.couponPrice>0 || items.faction=='w'">
                  <view>
                     {{items.faction=='w' ?(items.discount+'折'):items.couponPrice+'元券'}}
                  </view>
               </view>
               <view class="backPrice rowCenCen">
                  <view>返{{items.fanli}}元</view>
               </view>
            </view>

            <view class="card-bottom-info rowCenBet">
               <view class="goods-price rowEnd">
                  <view class="font">
                     券后
                  </view>
                  <view class="rmb">
                     ￥
                  </view>
                  <view class="price">
                     {{items.actualPrice}}
                  </view>
               </view>
               <view class="saleNum-box" v-if="items.monthSales!=''">
                  已售{{items.monthSales}}
               </view>
            </view>
				
             <view class="shopname">{{items.shopName}}</view>
         </view>
      </view>
   </view>
      </swiper-item>
   </swiper>
   <!-- <view class="swiper-container swiper-box swiper-item">
		
    </view> -->
</template>

<script>
   import utils from '@/utils/utils.js'
   export default {
      props: {
         items: Object
         popBannerSList: Array
      },
      data() {
         return {

	
         }
      },
      created()
      {
         console.log(this.popBannerSList);
      },
      methods:
      {
         goUrl(info)
         {
            console.log(info);
            utils.goUrl(info, this)
         }
      }
   }
}
</script>

<style lang="scss">
   .shopname{
          font-size: 11px;
          display: flex;
          align-items: flex-start;
          width: 100%;
          color: #999999;
          margin: 2px 0;
		
   }
   .items-container {
      width: 346rpx;
      height: 100%;
      overflow: hidden;
      border-radius: 8rpx;
      background-color: #FFFFFF;
<style>

      .image-container {
      .swiper-box {
         width: 100%;
         height: 336rpx;
      }

      .goodsInfo {
         width: 100%;
         height: 190rpx;
         margin-top: 10rpx;
         padding: 0 10rpx 10rpx 10rpx;

         .topgoodsname-box {
         height: 100%;
					
         .swiper-item {
            width: 100%;

            .goodsName-box {
               width: 100%;
               position: relative;

               .typeIcon-content {
                  width: 60rpx;
                  height: 24rpx;
                  position: absolute;
                  top: 6rpx;
               }

               .goodsText {
                  flex: 1;
                  font-size: 26rpx;
                  line-height: 34rpx;
                  font-weight: 500;
                  text-indent: 2.5em;
                  color: #333333;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
               }
            }
         }

         .goodsPrice-goodSale {
            width: 100%;

            .couponInfo-bar {
               width: 100%;
               margin: 5rpx 0;

               .couponbox {
                  height: 30rpx;
                  background: linear-gradient(255deg, #FF437E, #FF7755);
                  border-radius: 5rpx;
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #FFFFFF;
                  margin-right: 10rpx;
                  padding: 0 10rpx;
               }

               .backPrice {
                  padding: 0 10rpx;
                  height: 30rpx;
                  background: linear-gradient(-90deg, #7619EC, #A429F3);
                  border-radius: 5rpx;
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #FFFFFF;
               }
            }

            .card-bottom-info {
               width: 100%;
               margin-top: 15rpx;

               .goods-price {
                  line-height: 34rpx;

                  .font {
                     font-size: 24rpx;
                     font-weight: 500;
                     color: #999999;
                  }

                  .rmb {
                     font-weight: 500;
                     font-size: 24rpx;
                     color: #FF4242;
                     line-height: 34rpx;
                  }

                  .price {
                     color: #FF4242;
                     font-weight: bold;
                     font-size: 28rpx;
                     line-height: 34rpx;
                  }
               }

               .saleNum-box {
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #999999;
               }
            }
            height: 100%;
         }
      }
   }
</style>
	
</style>