zsw-farm-bxg/pages/shop/brands/index.vue

<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">品牌馆</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="banner-box">
			<swiper class="swiper-wrapper" @change="handleChange(item)" :autoplay="true">
			  <block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
			    <swiper-item @click="goBannerDetail(item)">
						<!-- <view class="image">{{item}}</view> -->
			      <!-- <image class="image" :src="item" class="slide-image" mode="aspectFill"/> -->
				  <image  class="image slide-image" :src="item.pic" mode="aspectFill"></image>
			    </swiper-item>
			  </block>
			</swiper>
			<view class="dots-box acea-row row-center">
				<view class="dot" v-for="(item,index) in imgUrls" :key="index">
					<view :class="(currents > index?'active2 ':'active ') + (currents == index?'on':(currents-1 == index?'on2':''))"></view>
				</view>
			</view>
		</view>
		
		<view class="notice-box acea-row row-middle">
			<view class="title">
				<image src="../../../static/images/yanjie-logo.png" mode=""></image>
			</view>
			<view class="min-title acea-row row-between-wrapper">
				<view class="">选品标准</view>
				<image src="../../../static/images/laba.png" mode="aspectFill"></image>
			</view>
			<view class="uni-notice-bar-box">
				<uni-notice-bar color="#2DB5AE" backgroundColor="#F1F1F1" scrollable="true" single="true" :speed="60" text="热花今将机支物极十争才线来理始"></uni-notice-bar>
			</view>
		</view>
		
		<view class="brands-box">
			<view class="title-box">
				<view class="en-title">BRAND SELECTIONS</view>
				<view class="acea-row row-between-wrapper">
					<view class="title">甄选品牌</view>
					<view class="more-box acea-row row-middle">
						<text>全部品牌</text>
						<view class="jiantou-right"></view>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true" class="scroll-box">
				<view class="scroll">
					<view v-for="(item,index) in brandList" :key="index">
						<image class="brand-img" :src="item.pic" mode="aspectFill" @click="goDetail(item)"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="brands-box">
			<view class="title-box">
				<view class="en-title">NEW ARRIVALS</view>
				<view class="title">新品推荐</view>
			</view>
			
			<view class="newList">
				<view class="item acea-row row-between" v-for="(item,index) in newList" :key="index" @click="goGoodsCon(item)">
					<image class="img" :src="item.image" mode="aspectFill"></image>
					<view class="info-box">
						<view class="name line1">{{item.storeName}}</view>
						<view class="tip line2">{{item.storeInfo}}</view>
						<view class="acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<image class="brand-img" src=""></image>
								<view class="brand-title one-t">小米有品</view>
							</view>
							<view class="acea-row row-between-wrapper">
								<text>查看详情</text>
								<view class="jiantou-right"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<Loading :loaded="loaded" :loading="loading"></Loading>
		</view>
		
		
	</view>
</template>

<script>
	import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
	import { getBrands, getProducts ,getBanner} from '@/api/store';
	import Loading from '@/components/Loading';
	export default {
		components: {
			UniNoticeBar,
			Loading
		},
		data() {
			return {
				currents: 0,
				imgUrls: [],
				brandList: [],
				where: {
				  page: 1,
				  limit: 10,
				  news: '1',
				  priceOrder: '',
				  salesOrder: '',
				},
				newList: [],
				loaded: false,
				loading: false,
			};
		},
		onLoad() {
			this.getBrandList();
			this.getNewProducts();
			getBanner(1).then(
					res => {
						this.$set(this,'imgUrls',res.data.banner)
					})
			
		},
		onReachBottom() {
			!this.loading && this.getNewProducts();
		},
		methods: {
			handleChange(e) {
				this.currents = e.mp.detail.current;
			},
			goBannerDetail(item){
				if (item.uniapp_url) {
					this.$yrouter.push(item.uniapp_url)
				}
			},
			goDetail(item) {
				this.$yrouter.push({
				  path: '/pages/shop/brands/brandDetail/index',
				  query: {
				    id: item.id,
				  },
				})
			},
			goGoodsCon(item) {
				this.$yrouter.push({
				  path: '/pages/shop/GoodsCon/index',
				  query: {
				    id: item.id,
				  },
				})
			},
			getBrandList() {
				uni.showLoading({
					title: '加载中...'
				})
				getBrands().then(res => {
					this.brandList = res.data;
					uni.hideLoading();
				})
			},
			getNewProducts() {
				if (this.loaded) return
				this.loading = true;
				getProducts(this.where).then(res => {
					// uni.hideLoading();
					this.newList.push.apply(this.newList, res.data);
					this.loaded = res.data.length < this.where.limit; //判断所有数据是否加载完成；
					this.loading = false;
					this.where.page = this.where.page + 1;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.jiantou-right {
		width: 0;
		height: 0;
		border-top: 6rpx solid transparent;
		border-left: 10rpx solid #2DB5AE;
		border-bottom: 6rpx solid transparent;
		border-right: 0rpx solid transparent;
		margin-left: 8rpx;
	}
	
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.banner-box {
		padding: 20rpx 32rpx;
		.swiper-wrapper {
			width: 686rpx;
			height: 398rpx;
			border-radius: 16rpx;
			.image {
				width: 686rpx;
				height: 398rpx;
				border-radius: 16rpx;
				background-color: #FFFFFF;
			}
		}
		.dots-box {
			padding-top: 26rpx;
			.dot {
				width: 92rpx;
				height: 4rpx;
				background: #CCEDEB;
				margin: 0rpx 6rpx;
				position: relative;
				.active {
					width: 0rpx;
					height: 4rpx;
					background: #2DB5AE;
					position: absolute;
					top: 0;
					left: 0;
					transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-o-transition: all .6s cubic-bezier(.18,.89,.17,.88);
				}
				.active2 {
					width: 0rpx;
					height: 4rpx;
					background: #2DB5AE;
					position: absolute;
					top: 0;
					left: 92rpx;
					transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-o-transition: all .6s cubic-bezier(.18,.89,.17,.88);
				}
				.active.on {
					width: 92rpx;
					transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-o-transition: all .6s cubic-bezier(.18,.89,.17,.88);
				}
				.active.on2 {
					width: 92rpx;
					left: 0;
					transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88);
					-o-transition: all .6s cubic-bezier(.18,.89,.17,.88);
				}
			}
		}
	}
	
	.notice-box {
		margin: 0rpx 32rpx 48rpx;
		width: 686rpx;
		height: 62rpx;
		border-radius: 16rpx;
		border: 4rpx solid #2DB5AE;
		.title {
			padding-left: 16rpx;
			padding-right: 10rpx;
			height: 38rpx;
			border-right: 2rpx solid #2DB5AE;
			image {
				width: 124rpx;
				height: 30rpx;
			}
		}
		.min-title {
			width: 138rpx;
			padding-left: 12rpx;
			font-size: 24rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 32rpx;
			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
		.uni-notice-bar-box {
			width: 388rpx;
			font-size: 24rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 500;
			color: #2DB5AE;
			line-height: 32rpx;
		}
	}
	
	.brands-box {
		padding-bottom: 32rpx;
		.title-box {
			padding: 0rpx 32rpx 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			.en-title {
				font-size: 20rpx;
				font-family: Futura;
				font-weight: 600;
				color: #999999;
				line-height: 22rpx;
			}
			.title {
				font-size: 50rpx;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 68rpx;
			}
			.more-box {
				font-size: 20rpx;
				color: #2DB5AE;
				line-height: 26rpx;
			}
		}
	}
	
	.brands-box .scroll-box {
		width: 100%;
		overflow:hidden;
		white-space:nowrap;
		.scroll {
			display: flex;
			flex-wrap: nowrap;
			padding-left: 32rpx;
			padding-bottom: 16rpx;
			.brand-img {
				width: 126rpx;
				height: 126rpx;
				background: #F5F6F8;
				box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
				border-radius: 16rpx;
				margin-right: 8rpx;
			}
			view:last-child .brand-img {
				margin-right: 16rpx;
			}
		}
	}
	
	.newList {
		padding: 0rpx 32rpx;
		.item {
			width: 100%;
			height: 174rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 6rpx 24rpx 6rpx 6rpx;
			.img {
				width: 162rpx;
				height: 162rpx;
				border-radius: 16rpx;
				background-color: #CCEDEB;
			}
			.info-box {
				width: 472rpx;
				padding: 6rpx 0rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2DB5AE;
				line-height: 26rpx;
				.name {
					font-size: 26rpx;
					font-weight: 600;
					color: #3A3A3C;
					line-height: 38rpx;
				}
				.tip {
					height: 58rpx;
					padding-top: 6rpx;
					margin-bottom: 18rpx;
					color: #999999;
				}
				.brand-img {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					background-color: #CCEDEB;
				}
				.brand-title {
					width: 240rpx;
					padding-left: 10rpx;
					color: #999999;
				}
			}
		}
	}

</style>