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://wechat.hnthee.com/ceres-local-file/image/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: 20upx;
							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: 24upx;
							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>