ceres-uniapp-v2.0/components/canvasShow/basics/classifyHeader/app/index.vue

<template>
  <view class="header">
    <view class="tabs-nav-warp">
      <scroll-view class="tabs-nav" scroll-x="true">
        <view class="ul">
          <view class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" v-if="componentContent.firstClassify">
			{{ componentContent.firstClassify }}
		  </view>
          <view class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" :key="index" @click="tabChange(index+beginIndex,item.id)">
            {{item.categoryName}}
          </view>
        </view>
      </scroll-view>
    </view>
	<div class="hom-pro-list" v-if="productData.length>0">
	    <div class="product-swiper">
	      <div class="product-swiper-box">
	        <div class="product-swiper-warp" v-for="(item,index) in productData" :key="index">
	          <div class=" product-swiper-item" @click="jumpProductDetail(item)">
	            <div class="product-swiper-img">
	              <img class="img pic-img default-img" :src="item.image" onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
	            </div>
	            <div class="product-swiper-info">
					<div class="product-info-content">
						<div class="product-name-row">
					  <label class="product-name">{{item.productName}}</label>
						<image class="product-star" src="https://wechat.hnthee.com/ceres-local-file/image/icon_star.png"></image>
					  <label class="product-star-text">3.5</label>
					  </div>
					  <div class="product-sku-row" v-if="false">
						  <label class="product-sku-name">规格</label>
						  </div>
						  <div class="product-price-row">
					  <div class="price-warp">
						<!-- #ifdef MP-WEIXIN -->
						<img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
						<img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
						<img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
						<img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
						<img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
						<img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png">
						<img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
						<!-- #endif -->
						<!-- #ifdef H5 || APP-PLUS -->
						<image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"></image>
						<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image>
						<!-- #endif -->
						<div class="price">
						  ¥ {{item.price}}
						</div>
		<!--                <div class="original-price">-->
		<!--                  ¥ {{item.originalPrice}}-->
		<!--                </div>-->
		
		
		
					  </div>
							<image class="product-add" src="https://wechat.hnthee.com/ceres-local-file/image/icon_add.png"></image>
					  </div>
				  </div>
	            </div>
	          </div>
	        </div>
	      </div>
	      <div class="pagination new-pagination"></div>
	    </div>
	    <button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
	  </div>
  </view>
</template>

<script>
import {commonMixin} from '../mixin'
export default {
  mixins: [commonMixin],
  data () {
    return {
      
    }
  },
  computed: {

  },
  methods:{
    
  }
}
</script>

<style lang="scss" scoped>
  .header {
    .top-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 30upx;
      width: 100%;
      .logo {
        // width: 280upx;
        height: 70upx;
        margin-top: 0upx;
      }

      .search-btn {
        height: 66upx;
        background: rgba(255, 255, 255, 1);
        border-radius: 33upx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 30upx;
        .search-icon {
          width: 60upx;
          height: 60upx;
        }
      }
    }
  }
  .tabs-nav-warp{
    margin-top: 20upx;
    padding:0 30upx;
    overflow: hidden;
    .tabs-nav{
      .ul{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
		padding-left: 20upx;
		padding-right: 20upx;
        .li{
          flex: 1 0 auto;
          margin-left: 5upx;
		  margin-right: 5upx;
          font-size: 30upx;
          color: #252744;
          position: relative;
          padding-bottom: 15upx;
		  padding-left: 27upx;
		  padding-right: 27upx;
		  padding-top: 15upx;
          text-align: center;
          &:first-child{
            margin-left: 0;
          }
          &.on{
            // &:after{
            //   content: '';
            //   width: 100%;
            //   height: 4upx;
            //   background: #252744;
            //   position: absolute;
            //   left: 0;
            //   bottom: 0;
            // }
			background: #252744;
			box-shadow: 0upx 7upx 14upx 0upx #C5C8ED;
			border-radius: 40upx;
			color: white;
          }
        }
      }
    }
  }
  .hom-pro-list{
    ::v-deep .swiper-wrapper{
      position: static;
    }
    /**横向滑动**/
    .product-swiper{
      height: auto;
	  overflow: hidden;
	  margin: 5upx 34upx;
      
	  &+.btn-more{
        margin-top: 20upx;
      }
      .title{
        padding: 22upx 0upx 0 0;
        label{
          background-image: none;
          color: #A56C4C;
          font-style: italic;
          padding: 0;
        }
      }
      &-box {
		  margin-top: 18upx;
		  margin-bottom: 18upx;
		  margin-left: 18upx;
		  margin-right: 18upx;
        height: 100%;
		width: 100%;
        display: flex;
		overflow-x: auto;
      }
      &-warp{
		height: 540upx;
		width: 386upx !important;
		margin-left: 18upx;
		margin-right: 18upx;
      }
      &-item {
        height: 540upx;
        width: 386upx !important;
        position: relative;
      }
	  
      &-img {
		  width: 286upx;
		  height: 306upx;
		  margin-left: auto;
		  margin-right: auto;	
		  background: #F6F6F8;
		  border: 2upx solid #FFFFFF;
		  border-radius: 30upx;
			position: relative;
			padding: 20upx;
			z-index: 2;
        
        .img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      &-info {
       width: 386upx;
       height: 430upx;
	      position: absolute;
	      top: 110upx;
       background: #FDFDFD;
       box-shadow: 0upx 15upx 30upx 0upx #F6F6F6;
       border-radius: 30upx;
       text-align: center;
	   
	   .product-info-content {
		   margin-top: 270upx;
		   
		   .product-name-row{
			   width: 100%;
			   height: 33upx;
			   line-height: 33upx;
			   display: flex;
			       flex-direction: row;
			       flex-wrap: nowrap;
			       align-content: center;
			       justify-content: flex-start;
			       align-items: center;
			   
			   .product-name{
			   			width: 100%;
			   			height: auto;
			   			font-size: 28upx;
			   			font-family: Source Han Sans CN;
			   			font-weight: bold;
			   			color: #252744;
			   			
			       display: block;
			       overflow: hidden;
			       text-overflow:ellipsis;
			       white-space: nowrap;
			       line-height: 28upx;
				   margin-left: 30upx;
				   text-align: left;
			     }
					 
				 .product-star{
					 width: 33upx;
					 height: 33upx;
				 }
				 
				 .product-star-text{
					 width: auto;
					 height: 28upx;
					 line-height: 28upx;
					 font-size: 20rpx;
					 font-family: Source Han Sans CN;
					 font-weight: bold;
					 color: #A5A5AD;
					 margin-right: 30upx;
					 margin-left: 5upx;
				 }
			}
			.product-sku-row{
				 width: 100%;
				 height: 28upx;
				 line-height: 28upx;
				 margin-top: 15upx;
				     display: flex;
				     flex-direction: row;
				     flex-wrap: nowrap;
				     align-content: center;
				     justify-content: flex-start;
				     align-items: center;
					 .product-sku-name{
						 font-size: 24rpx;
						 font-family: Source Han Sans CN;
						 font-weight: 400;
						 color: #90919C;
						 margin-left: 30upx;
					 }
			}
			.product-price-row{
				 width: 100%;
				 height: 76upx;
				 line-height: 76upx;
				     display: flex;
				     flex-direction: row;
				     flex-wrap: nowrap;
				     align-content: center;
				     justify-content: space-between;
				     align-items: center;
					 margin-top: 20upx;
				 
				.price-warp{
				  display: flex;
				  
				  align-items: center;
				  line-height: 28upx;
				  margin-left: 30upx;
				      justify-content: flex-start;
				      width: auto;
				      flex-direction: row;
				      flex-wrap: nowrap;

				  .iconImg {
				    width: 58rpx;
				    height: 36rpx;
				    margin-right: 10rpx;
				  }
				  .price{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #252744;
				    margin-right: 10upx;
				  }
				  .original-price{
				    font-size: 16upx;
				    color: #ccc;
				    text-decoration: line-through;
				  }
				  
				}
				.product-add{
									  width: 76upx;
									  height: 76upx;
									  margin-right: 30upx;
				}
			}
		   
		     
		   }
		}
        
    }
  }
  
</style>