qygg/pages/product/new.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/top-bg.png" mode=""></image>
			<!-- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
					@click="bannerNavToUrl(item)">
					<image class="top-bg" :src="item.pic" />
				</swiper-item>
			</swiper> -->
			<view class="title">新品专区</view>
		</view>
		<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item class="carousel-item" v-for="(item,index) in carouselList "  @click="bannerNavToUrl(item)"><image :src="item.pic" mode=""></image> </swiper-item>
		</swiper>
		<view class="">
			<view class="goldenBean" v-for="(item,index) in leibieList" v-if="item.loaded && item.list.length != 0">
				<view class="title">
					<image src="@/static/img/list1.png"></image>
					<view class="title-t"> {{item.cate_name}} </view>
					<text class="about">超值体验</text>
				</view>
				<view class="box">
					<view class="header" :style="index%2!=1?bgColor[0]:bgColor[1]">
						<view class="left">
							<view class="title">
								热门好物推荐
							</view>
							<view class="about">
								买到就是赚到
							</view>
						</view>
						<view class="right">
							<image src="@/static/img/right.png" @click="navToDetailPage('/pages/product/fenlei?id=' + item.id)"></image>
						</view>
					</view>
					<view class="footer">
						<view class="list">
							<view class="item" v-for="d in item.list" 
								@click="navToDetailPage('/pages/product/product?id='+d.id)">
								<view class="img">
									<image :src="d.image" mode=""></image>
								</view>
								<view class="name nowarp" :title='d.store_name'>
									{{d.store_name}}
								</view>
								<view class="price">
									￥{{d.price}}
								</view>
								<view class="name" style="font-size: 22rpx;color: #999;">
									已售 {{ d.sales || '0'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import {
		loadIndexs,
		store_list
	} from '@/api/index.js';
	// import {
	// 	getProducts
	// } from '@/api/product.js';
import { tabbar1 } from '@/utils/tabbar.js';
// import goldenBean from '@/pages/index/goldenBean.vue'
import goldenBean from '@/pages/index/goldenBean.vue'
import { groomList,getProducts,getCategorylist,goodsDetail } from '@/api/product.js';
export default {
	components: {
		goldenBean
		// wholesale,
		// recommend,
		// topTitle
	},
	data() {
		return {
			carouselList: [], //轮播图列表
			bgColor: [{background: "linear-gradient(43deg, #FFBD70, #FF8F44)"},
				{background: "linear-gradient(90deg, #F75022, #FF8B6C)"},
			],
			indexLoad: '',
			current: 3,
			tabbar: tabbar1,
			firstList: [],
			type: 2,
			page: 1,
			limit: 20,
			loaded: false,
			loadingType: 'more',
			jdList: [], //金豆商品
			leibieList:[],//'类别'
			id:0,
			swiperCurrent: 0,
			swiperLength: 0,
		};
	},
	onLoad() {
		this.get()
		// this.getProducts()
		this.loadData();
		this.getBargainList();
	},
	onShow() {
		this.getGoodList()
		// this.getProducts()
		// this.loadData();
		// this.getBargainList();
	},
	onReachBottom() {
		// this.loadData();
	},
	methods: {
		nav(url){
			uni.navigateTo({
				url
			})
		},
		get(){
			loadIndexs({})
				.then(({
					data
				}) => {
					let goods = data.info;
					// this.dataList = goods.bastList; //精品推荐
					this.carouselList = data.banner;
					console.log(this.carouselList,'banner');
				})
				.catch(e => {});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		getProducts() {
			let obj = this;
			console.log(obj.id,'id');
			getProducts({sid:obj.id} ).then(function({ data }) {
				console.log(data,'data');
				obj.jdList = data
			});
		},
		getProductss(item) {
			let obj = this;
			getProducts({sid:item.id}).then(function({ data }) {
				obj.$set(item,'list',data)
				obj.$set(item,'loaded',true)
				// item.loaded = true
				console.log(item.list,'data+++++++');
				
			});
		},
		getBargainList() {
			let that = this;
			getProducts({
					page: that.page,
					limit: that.limit,
					
				})
				.then(function(res) {
					that.jdList = res.data
					// console.log(that.jdList,'jdlist');
				})
				.catch(res => {});
		},
		loadData() {
			let obj = this;
			if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return;
			}
			obj.loadingType = 'loading';
			groomList(
				{
					page: obj.page,
					limit: obj.limit
				},
				obj.id
			)
				.then(({ data }) => {
					// 保存轮播图
					obj.bannerImg = data.banner;
					// 保存商品信息
					obj.firstList = this.firstList.concat(data.list);
					obj.loaded = true;
					obj.page++;
					if (obj.limit == data.list.length) {
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'noMore';
					}
				})
				.catch(e => {
					console.log(e);
				});
				
		},
		getGoodList() {
			let obj = this
			getCategorylist().then(res=>{
				
				this.leibieList = res.data[1].children
				console.log(this.leibieList,'徐浩岚')
				this.leibieList.forEach(item => {
					obj.getProductss(item)
				})
			})
		},
		navToDetailPage(e) {
			uni.navigateTo({
				url:e
			});
		}
	}
};
</script>

<style lang="scss">
	$grey: #95A0B1;
	$text: #333333;
	$red: #FF4C4C;
page,
.center {
	min-height: 100%;
	height: auto;
	background: #ffffff;
}

.top {
	position: relative;
	width: 100%;
	height: 400rpx;

	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.title {
		position: relative;
		z-index: 2;
		padding: 30rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
	}
}

.carousel {
	width: 700rpx;
	height: 300rpx;
	margin: -280rpx auto 0;

	image {
		width: 700rpx;
		height: 300rpx;
	}
}

.hotgoods {
	margin-top: 38rpx;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 32rpx;

	.hotgoods-item {
		width: 48%;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;

		&:nth-child(2n + 1) {
			margin-right: 24rpx;
		}

		.image-wrapper {
			width: 100%;
			height: 330rpx;
			// background: red;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
				border-radius: 12rpx 12rpx 0 0;
			}
		}

		.title {
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
			line-height: 80rpx;
		}

		.hot-price {
			display: flex;
			justify-content: space-between;
			padding: 0 16rpx 12rpx;

			.price {
				font-size: 36rpx;
				font-weight: bold;
				color: #fd3b39;
			}

			.cart-icon {
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
}
.goldenBean {
		font-family: PingFang-SC-Bold;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;

		.title {
			display: flex;
			line-height: 40rpx;

			.title-t {
				color: $text;
				font-weight: bold;
				margin: 0 20rpx;
				font-size: 34rpx;
			}

			.about {
				font-size: 24rpx;
				color: $grey;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.box {
			margin: 20rpx 0;
			border-radius: 10rpx;
			overflow: hidden;

			.header {
				padding: 20rpx;

				padding-bottom: 80rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #fff;

				.left {
					line-height: 40rpx;

					.title {
						font-size: 32rpx;
					}

					.about {
						opacity: 0.9;
						font-size: 24rpx;
					}
				}

				.right {
					margin: auto 0;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.footer {
				height: 300rpx;
				background-color: $page-color-base;
				padding: 20rpx;
				margin-bottom: -50rpx;
				.list {
					display: flex;
					// justify-content: space-between;
					overflow: auto;
					border-radius: 10rpx;
					position: relative;
					top: -90rpx;
					background-color: #fff;

					.item {
						padding: 35rpx;
						border-right: solid 1rpx $page-color-base;

						.name {

							font-size: 24rpx;
							color: #3F3F3F;
							width: 150rpx;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							border-radius: 10rpx;
							text-overflow: ellipsis;
						}

						.price {
							font-size: 28rpx;
							color: $red;
							font-weight: bold;
						}

						.img {
							overflow: hidden;
							border-radius: 20rpx;

							image {
								width: 150rpx;
								height: 150rpx;
							}
						}
					}
				}
			}
		}
	}
</style>