首页

App.vue

@@ -102,6 +102,13 @@ image,
 video {
 	box-sizing: border-box;
 }
+.nowarp {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+}
 /* 骨架屏替代方案 */
 .Skeleton {
 	background: #f3f3f3;

components/datalist.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="dataList">
+		<view class="list">
+			<view class="item" v-for="d in data">
+				<view class="img">
+					<image :src="d.image" mode=""></image>
+				</view>
+				<view class="name nowarp">
+					{{ d.store_name }}
+				</view>
+				<view class="about">
+					
+				</view>
+				<view class="allprice">
+					<text class="price">￥{{ d.price }}</text>
+					<text class="ot-price">￥{{ d.ot_price }}</text>
+				</view>
+			</view>
+		</view>
+		<view class="load"> 
+		 ---------{{ data.loadingType == 'loadmore'?'加载中': '加载完成'}}---------
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['data']
+	}
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+	.dataList {
+		.list {
+			padding: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			.item {
+				background-color: #fff;
+				border-radius: 10rpx;
+				overflow: hidden;
+				// box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
+				margin: 10rpx 0;
+				width: 48%;
+				height: 0;
+				padding-bottom: calc(48% + 120rpx);
+				.img {
+					border-radius: 10rpx;
+					overflow: hidden;
+					width: 100%;
+					height: 0;
+					padding-bottom: 100%;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.name {
+					margin: 0 10rpx;
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+				.allprice {
+					padding: 20rpx 0;
+					.price {
+						color: $red;
+					}
+					.ot-price {
+						color: $grey;
+						text-decoration: line-through;
+						font-size: 26rpx;
+					}
+				}
+			}
+		}
+		.load {
+			text-align: center;
+			color: $grey;
+			font-size: 28rpx;
+		}
+	}
+</style>

pages.json

@@ -17,23 +17,23 @@
 							"disabled": true,
 							"placeholderColor": "#606266",
 							"align": "left"
-						},
-						"buttons": [{
-								"fontSrc": "/static/yticon.ttf",
-								"text": "\ue60d",
-								"fontSize": "26",
-								"color": "#303133",
-								"float": "left",
-								"background": "rgba(0,0,0,0)"
-							},
-							{
-								"fontSrc": "/static/yticon.ttf",
-								"text": "\ue744",
-								"fontSize": "27",
-								"color": "#303133",
-								"background": "rgba(0,0,0,0)"
-							}
-						]
+						}
+						// "buttons": [{
+						// 		"fontSrc": "/static/yticon.ttf",
+						// 		"text": "\ue60d",
+						// 		"fontSize": "26",
+						// 		"color": "#303133",
+						// 		"float": "left",
+						// 		"background": "rgba(0,0,0,0)"
+						// 	},
+						// 	{
+						// 		"fontSrc": "/static/yticon.ttf",
+						// 		"text": "\ue744",
+						// 		"fontSize": "27",
+						// 		"color": "#303133",
+						// 		"background": "rgba(0,0,0,0)"
+						// 	}
+						// ]
 					}
 				},
 				// #endif
@@ -93,6 +93,31 @@
 				}
 			}
 		},
+		{
+			"path": "pages/product/newPeople",
+			"style": {
+				"navigationBarTitleText": "新人专区"
+			}
+		},
+		{
+			"path": "pages/product/exchange",
+			"style": {
+				"navigationBarBackgroundColor": "transparent",
+				"navigationBarTextStyle": "white",
+					"app-plus": {
+						"titleNView": {
+							"type": "float",
+							"titleText": "兑换专区"
+						}
+					}
+			}
+		},
+		{
+			"path": "pages/product/store",
+			"style": {
+				"navigationBarTitleText": "附近门店"
+			}
+		},
 		{
 			"path": "pages/product/groupBooking/index",
 			"style": {

pages/index/child/goldenBean.vue

@@ -0,0 +1,155 @@
+<template>
+	<view class="goldenBean">
+		<view class="title">
+			<image src="@/static/img/list1.png"></image>
+			<view class="title-t"> 金豆专区 </view>
+			<text class="about">超值体验</text>
+		</view>
+		<view class="box">
+			<view class="header">
+				<view class="left">
+					<view class="title">
+						购买商品赠送金豆
+					</view>
+					<view class="about">
+						买到就是赚到
+					</view>
+				</view>
+				<view class="right">
+					<image src="@/static/img/right.png" @click="navto('/pages/product/exchange')"></image>
+				</view>
+			</view>
+			<view class="footer">
+				<view class="list">
+					<view class="item" v-for="d in data">
+						<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>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+export default {
+	props: ['data'],
+	mounted() {
+		console.log(this.data);
+	},
+	methods: {
+		navto(url) {
+			uni.navigateTo({
+				url: url
+			});
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+// 金豆专区
+.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;
+			background: linear-gradient(90deg, #FF8F44 0%,  #FFBD70 100%);
+			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: 40rpx;
+					height: 40rpx;
+				}
+			}
+		}
+		.footer {
+			height: 300rpx;
+			background-color: $page-color-base;
+			padding: 20rpx;
+			margin-bottom: -50rpx;
+			.list {
+				display: flex;
+				overflow: auto;
+				border-radius: 10rpx;
+				position: relative;
+				top: -90rpx;
+				background-color: #fff;
+				.item {
+					padding: 30rpx;
+					border-right: solid 1rpx $page-color-base;
+					.name {
+						font-size: 24rpx;
+						color: #3F3F3F;
+						width: 150rpx;
+						overflow: hidden;
+						text-overflow:ellipsis;
+					}
+					.price {
+						font-size: 28rpx;
+						color: $red;
+						font-weight: bold;
+					}
+					.img {
+						image {
+							width: 150rpx;
+							height: 150rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages/index/child/recommend.vue

@@ -0,0 +1,114 @@
+<template>
+	<view class="recommend">
+		<view class="title">
+			<image src="@/static/img/recommend.png" mode=""></image>
+		</view>
+		<view class="list">
+			<view class="item" v-for="d in data">
+				<view class="img">
+					<image :src="d.image" mode=""></image>
+				</view>
+				<view class="name nowarp">
+					{{ d.store_name }}
+				</view>
+				<view class="about">
+					
+				</view>
+				<view class="allprice">
+					<text class="price">￥{{ d.price }}</text>
+					<text class="ot-price">￥{{ d.ot_price }}</text>
+				</view>
+			</view>
+		</view>
+		<view class="load"> 
+		 ---------{{ loadingType == 'loadmore'?'加载中': '加载完成'}}---------
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['data'],
+		data() {
+			return {
+				page: 1,
+				limit: 10,
+				sum: 0,
+				loadingType: 'loadmore',
+				
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+	.recommend {
+		background-color: #fff;
+		padding: 30rpx;
+		.title {
+			text-align: center;
+			image {
+				width: 350rpx;
+				height: 30rpx;
+			}
+		}
+		.list {
+			padding: 20rpx 0;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			.item {
+				// background-color: #fff;
+				border-radius: 10rpx;
+				overflow: hidden;
+				box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
+				margin: 10rpx 0;
+				width: 48%;
+				height: 0;
+				padding-bottom: calc(48% + 120rpx);
+				.img {
+					border-radius: 10rpx;
+					overflow: hidden;
+					width: 100%;
+					height: 0;
+					padding-bottom: 100%;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.name {
+					margin: 0 10rpx;
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+				.allprice {
+					padding: 20rpx 0;
+					.price {
+						color: $red;
+					}
+					.ot-price {
+						color: $grey;
+						text-decoration: line-through;
+						font-size: 26rpx;
+					}
+				}
+			}
+		}
+		.load {
+			text-align: center;
+			color: $grey;
+			font-size: 28rpx;
+		}
+	}
+		
+</style>

pages/index/child/wholesale.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="wholesale">
+		<view class="title">
+			<view class="img">
+				<image src="../../../static/img/list1.png" mode=""></image>
+			</view>
+			<view class="title-t"> 批发专区 </view>
+			<view class="about"> 限时抢购 </view>
+		</view>
+		<view class="date">
+				<image src="@/static/error/errorImage.jpg"></image>
+				<image src="@/static/error/errorImage.jpg"></image>
+				<image src="@/static/error/errorImage.jpg"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+.wholesale {
+	padding: 20rpx;
+	background-color: #fff;
+	margin : 20rpx 0;
+	.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;
+		}
+	}
+	.date {
+		padding: 30rpx 0;
+		display: flex;
+		justify-content: space-between;
+		image {
+			border-radius: 20rpx;
+			max-width: 32%;
+			width: 220rpx;
+			height: 300rpx;
+		}
+	}
+}
+</style>

pages/index/index.vue

@@ -28,306 +28,44 @@
 		</view>
 		<!-- 分类 -->
 		<view class="cate-section">
+			<navigator url="/pages/product/newPeople">
 			<view class="cate-item">
-				<image src="/static/icon/c3.png"></image>
-				<text>联盟礼包</text>
+				<image src="/static/img/index-nav1.png"></image>
+				<text>新人专区</text>
 			</view>
-			<navigator url="/pages/product/groupBooking/index">
+			</navigator>
+			<navigator url="/pages/product/exchange">
 				<view class="cate-item">
-					<image src="/static/icon/c5.png"></image>
-					<text>超值拼团</text>
+				<image src="/static/img/index-nav2.png"></image>
+					<text>兑换专区</text>
 				</view>
 			</navigator>
-			<navigator url="/pages/product/seckill">
+			<navigator url="/pages/product/store">
 				<view class="cate-item">
-					<image src="/static/icon/c7.png"></image>
-					<text>限时秒杀</text>
+				<image src="/static/img/index-nav3.png"></image>
+					<text>附近门店</text>
 				</view>
 			</navigator>
 			<navigator url="/pages/index/sign">
 				<view class="cate-item">
-					<image src="/static/icon/c8.png"></image>
-					<text>每日签到</text>
+				<image src="/static/img/index-nav4.png"></image>
+					<text>邀请有礼</text>
 				</view>
 			</navigator>
 		</view>
-		
-		<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
-		<!-- 可领取优惠券 -->
-		<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
-			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
-				<view class="row flex">
-					<view class="list-money flex">
-						<image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
-						<view class="list-money-text">
-							<view class="tit" :class="{ noAction: item.is_use }">
-								<text>{{ item.coupon_price }}</text>
-							</view>
-						</view>
-					</view>
-					<view class="list-interval position-relative">
-						<view class="bottom"></view>
-						<view class="top"></view>
-					</view>
-					<view class="row_list_right">
-						<view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
-						<view class="right_time">
-							<text>满{{ item.use_min_price }}使用</text>
-						</view>
-					</view>
-					<view class="right_use" :class="{ noAction: item.is_use }" @click="setCoupons(item)">
-						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
-					</view>
-				</view>
-			</view>
-		</scroll-view> -->
-
-		<!-- 秒杀楼层 -->
-		<seckill></seckill>
-		<!-- 砍价 -->
-		<view class="hot-goods">
-			<view class="hot-headers flex-upDown-center">
-				<!-- <image class="img" src="../../static/img/img44.png"></image> -->
-				<view class="hot-title">超值砍价</view>
-				<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
-			</view>
-			<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
-				<view class="hot-produce">
-					<view class="produce-image"><image :src="baritem.image"></image></view>
-					<view class="produce-content">
-						<view class="produce-price1 ">
-							<view class="produce-name line2">{{ baritem.title }}</view>
-							<!-- <view class="produce-info">
-								已抢
-								<text style="color: #FF383E">{{ baritem.sales }}</text>
-								箱/仅剩
-								<text style="color:#FF383E">{{ baritem.stock }}</text>
-								箱
-							</view> -->
-							<view class="produce-center">
-								<view class="kanjia_word">
-									<view class="word-1">原价:￥{{ baritem.price }}</view>
-									<view class="word-2">
-										砍后价
-										<text style="font-size: 24rpx;">￥</text>
-										<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
-									</view>
-								</view>
-								<view
-									class="kanjia_button flex-center"
-									@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
-								>
-									<view>查看详情</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 拼团楼层 -->
-
-		<view class="recommend flex">
-			<view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
-				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
-				<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
-				<image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
-			</view>
-		</view>
-		<swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
-			<swiper-item>
-				<!-- <scroll-view scroll-y="true" class="list-box-h"> -->
-				<view class="guess-section">
-					<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-						<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-						<view class="cmy-hr"></view>
-						<view class="price margin-c-20 flex">
-							<view>
-								<text class="font-size-sm ">￥</text>
-								{{ item.price }}
-							</view>
-							<view class="font-size-sm">
-								<text class="font-color-gray">{{ item.sales }}人购买</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<!-- </scroll-view> -->
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true" class="list-box-h">
-					<view class="guess-section">
-						<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-							<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-							<view class="cmy-hr"></view>
-							<view class="price margin-c-20 flex">
-								<view>
-									<text class="font-size-sm ">￥</text>
-									{{ item.price }}
-								</view>
-								<view class="font-size-sm">
-									<text class="font-color-gray">{{ item.sales }}人购买</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true">
-					<view class="guess-section">
-						<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<navigator :url="item.link">
-								<view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
-								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-								<view class="cmy-hr"></view>
-								<view class="price margin-c-20 flex">
-									<view>
-										<text class="font-size-sm ">￥</text>
-										{{ item.price }}
-									</view>
-									<view class="font-size-sm">
-										<text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
-									</view>
-								</view>
-							</navigator>
-						</view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
-
-		<!-- 精品 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<navigator url="/pages/product/classify?type=1"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 最新 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">最新商品</text></view>
-			<navigator url="/pages/product/classify?type=3"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 促销 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">促销商品</text></view>
-			<navigator url="/pages/product/classify?type=4"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 会员升级专区 -->
-		<!-- <view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">会员升级专区</text></view>
-			<text class="iconfont iconenter">更多</text>
-		</view> -->
-		<!-- <view class="uservip flex">
-			<image @error="onImageError('userServant', 0)" lazy-load :src="userServant[0].image" mode="aspectFill"></image>
-			<view class="detail">
-				<view class="title">满园春1999元会员升级礼包</view>
-				<view class="icon">自营</view>
-				<view class="flex price-box">
-					<view class="price">
-						<text class="font-size-sm">￥</text>
-						18888
-					</view>
-					<view class="text">115人购买</view>
-				</view>
-			</view>
-		</view> -->
-
-		<!-- 精品推荐 -->
-		<!-- <view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<text class="iconfont iconenter">更多</text>
-		</view> -->
-		<!-- <view class="guess-section">
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image @error="onImageError('goodsList', index)" lazy-load :src="item.image" mode="aspectFill"></image></view>
-				<text class="title clamp margin-c-20">
-					<text class="icon">自营</text>
-					{{ item.title }}
-				</text>
-				<view class="hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<view class='detail'>
-							<text class="icon">代理价</text>
-							<text></text>
-						</view>
-						<view class="detail">
-							<text class="font-color-yellow">会员价</text>
-							<text class="font-color-yellow">7.5折</text>
-						</view>
-					</view>
-				</view>
-				<view class="tip">兑换价￥44+44积分</view>
-			</view>
-		</view> -->
-		<view class="Mask" v-show="shareShow">
-			<image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
-			<view class="Toshare" @click="Toshare"></view>
-			<view class="Tocancel" @click="Tocancel"></view>
-		</view>
+		<!-- 金豆专区 -->
+		<golden-bean :data='bastList'></golden-bean>
+		<!-- 批发专区 -->
+		<wholesale></wholesale>
+		<!-- 为你推荐 -->
+		<recommend :data='bastList'></recommend>
 	</view>
 </template>
 
 <script>
+import goldenBean from './child/goldenBean.vue'
+import wholesale from './child/wholesale.vue'
+import recommend from './child/recommend.vue'
 import seckill from '../../components/seckill/seckill.vue';
 import { loadIndexs } from '@/api/index.js';
 import { getUserInfo } from '@/api/user.js';
@@ -338,7 +76,10 @@ import { mapState } from 'vuex';
 
 export default {
 	components: {
-		seckill
+		seckill,
+		goldenBean,
+		wholesale,
+		recommend
 	},
 	watch: {
 		//自适应swiper高度
@@ -667,130 +408,6 @@ export default {
 		height: 100vh;
 	}
 }
-// 热销商品
-	.hot-goods {
-		margin: 0 25rpx;
-		padding: 5rpx 25rpx 30rpx 25rpx;
-		background-color: #fff;
-		border-radius: 10rpx;
-		.hot-headers {
-			margin: 25rpx 0;
-			width: 100%;
-			display: flex;
-			.img {
-				width: 32rpx;
-				height: 32rpx;
-				margin-right: 10rpx;
-			}
-			.hot-title {
-				font-size: 30rpx;
-				margin-right: 15rpx;
-			}
-			.more {
-				line-height: 1;
-				padding: 5rpx 10rpx 5rpx 15rpx;
-				text-align: center;
-				font-size: 20rpx;
-				border-radius: 15rpx;
-				color: #ffffff;
-				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
-				image {
-					width: 20rpx;
-					height: 20rpx;
-				}
-			}
-		}
-		.hot-lists {
-			line-height: 1;
-			display: flex;
-			.hot-produce {
-				width: 100%;
-				height: 260rpx;
-				border-top: 1px solid #f0f0f0;
-				display: flex;
-				padding-top: 28rpx;
-				.produce-image {
-					width: 200rpx;
-					height: 200rpx;
-					image {
-						width: 200rpx;
-						height: 200rpx;
-						border: 1px solid #f0f0f0;
-					}
-				}
-				.produce-content {
-					// flex-direction: column;
-					margin-left: 30rpx;
-					height: 200rpx;
-					position: relative;
-					width: calc(100% - 200rpx - 30rpx);
-					.produce-name {
-						font-size: 28rpx;
-						font-weight: bold;
-						line-height: 35rpx;
-						color: #343434;
-					}
-					.produce-info {
-						font-size: 20rpx;
-						margin-top: 25rpx;
-					}
-					.produce-price {
-						display: flex;
-						align-items: flex-end;
-						color: #ff383e;
-						font-size: 24rpx;
-						margin-top: 70rpx;
-						font-weight: bold;
-						text {
-							font-size: 36rpx;
-						}
-						.produce-price-1 {
-							font-size: 22rpx;
-							font-weight: 500;
-							text-decoration: line-through;
-							color: rgba(170, 170, 170, 1);
-							margin-left: 20rpx;
-						}
-					}
-					.produce-price1 {
-						height: 100%;
-						letter-spacing: 3rpx;
-						color: #ff383e;
-						font-size: 24rpx;
-						font-weight: bold;
-						.produce-center {
-							width: 100%;
-							position: absolute;
-							bottom: 0;
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							.kanjia_word {
-								.word-1 {
-									font-size: 22rpx;
-									color: #666666;
-								}
-								.word-2 {
-									font-size: 28rpx;
-									color: #ff383e;
-									margin-top: 10rpx;
-								}
-							}
-							.kanjia_button {
-								height: 50rpx;
-								width: 150rpx;
-								border-radius: 25rpx;
-								font-size: 26rpx;
-								font-weight: 500;
-								color: #ff383e;
-								border: 1px solid rgba(255, 56, 62, 1);
-							}
-						}
-					}
-				}
-			}
-		}
-	}
 /* #ifdef MP */
 .mp-height {
 	height: 44px;
@@ -925,6 +542,7 @@ page {
 }
 /* 分类 */
 .cate-section {
+	background-color: #fff;
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
@@ -939,24 +557,13 @@ page {
 	}
 	/* 原图标颜色太深,不想改图了,所以加了透明度 */
 	image {
-		width: 88rpx;
-		height: 88rpx;
-		margin-bottom: 14rpx;
+		width: 140rpx;
+		height: 140rpx;
+		// margin-bottom: 5rpx;
 		border-radius: 50%;
 		opacity: 0.7;
 	}
 }
-// 中间广告图片
-.ad-1 {
-	width: 100%;
-	height: 210rpx;
-	padding: 10rpx 0;
-	background: #fff;
-	image {
-		width: 100%;
-		height: 100%;
-	}
-}
 /*公用边框样式*/
 %icon {
 	margin-right: 10rpx;
@@ -968,277 +575,5 @@ page {
 	font-size: $font-base;
 	border-radius: 10rpx;
 }
-.f-header {
-	display: flex;
-	align-items: center;
-	height: 92rpx;
-	padding: 6rpx 30rpx 8rpx;
-	image {
-		flex-shrink: 0;
-		width: 80rpx;
-		height: 80rpx;
-		margin-right: 20rpx;
-	}
-	.tit-box {
-		@extend %font-title-box;
-	}
-	.tit {
-		@extend %font-title;
-	}
-	.iconenter {
-		font-size: $font-lg + 2rpx;
-		color: $font-color-light;
-	}
-	.f-left-icon {
-		@extend %f-left-icon;
-	}
-	.iconfont {
-		font-size: $font-sm - 2rpx;
-	}
-}
-// 会员升级礼包
-.uservip {
-	border-radius: $border-radius-sm;
-	background-color: white;
-	box-shadow: $box-shadow;
-	height: 300rpx;
-	margin: 0 30rpx;
-	image {
-		height: 100%;
-		width: 300rpx;
-	}
-	.detail {
-		position: relative;
-		padding: 20rpx;
-		height: 100%;
-		.icon {
-			@extend %icon;
-		}
-		.price-box {
-			position: absolute;
-			bottom: 20rpx;
-			width: calc(100% - 40rpx);
-			.price {
-				font-size: $font-lg + 2rpx;
-				font-weight: bold;
-				color: $font-color-base;
-			}
-			.text {
-				color: $color-gray;
-				font-size: $font-sm;
-			}
-		}
-		.title {
-			font-size: $font-lg;
-			font-weight: bold;
-		}
-	}
-}
-
-/* 猜你喜欢 */
-.guess-section {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 0 30rpx;
-	.guess-item {
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		width: 48%;
-		margin-bottom: 4%;
-		border-radius: $border-radius-sm;
-		background-color: white;
-		box-shadow: $box-shadow;
-		&:nth-child(2n + 1) {
-			margin-right: 4%;
-		}
-	}
-	.image-wrapper {
-		width: 100%;
-		height: 330rpx;
-		border-radius: 3px;
-		overflow: hidden;
-		image {
-			width: 100%;
-			height: 100%;
-			opacity: 1;
-		}
-	}
-	.title {
-		font-size: $font-base;
-		color: $font-color-dark;
-		font-weight: bold;
-		line-height: 80rpx;
-	}
-	.price {
-		font-size: $font-lg;
-		color: $font-color-base;
-		font-weight: bold;
-		line-height: 1;
-		line-height: 80rpx;
-	}
-
-	.icon {
-		@extend %icon;
-	}
-
-	.detail {
-		line-height: 1;
-	}
-	.tip {
-		color: white;
-		background-color: $color-yellow;
-		line-height: 1.5;
-		font-size: $font-sm;
-		padding-left: 20rpx;
-	}
-}
-
-// 推荐
-.recommend {
-	width: 95%;
-	height: 155rpx;
-	margin: 0rpx auto;
-	padding-top: 30rpx;
-	font-size: 26rpx;
-	text-align: center;
-	color: #333333;
-	align-items: flex-start;
-
-	.recommend_list {
-		width: 33%;
-	}
-	.re_title {
-		font-size: 32rpx;
-		font-weight: bold;
-	}
-	.re_name {
-		color: #999999;
-		padding-top: 10rpx;
-	}
-	.selected_icon {
-		width: 25rpx;
-		height: 10rpx;
-		margin: 0px auto;
-		display: none;
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.active {
-		display: block;
-	}
-	.active_color {
-		color: #dc4d46 !important;
-	}
-}
 
-// 列表
-.list-box-h {
-	height: 1550rpx;
-}
-// 优惠券
-.coupon-list {
-	display: inline-block;
-}
-.row {
-	border-radius: 15rpx;
-	margin: 25rpx;
-	height: 155rpx;
-	// width: 552rpx;
-	overflow: hidden;
-	background-color: #ffffff;
-	padding-right: 25rpx;
-	.list-interval {
-		border: 1px dashed $border-color-light;
-		height: 100%;
-		.top,
-		.bottom {
-			border-radius: 100rpx;
-			width: 30rpx;
-			height: 30rpx;
-			position: absolute;
-			background-color: $page-color-base;
-			right: -15rpx;
-		}
-		.top {
-			top: -18rpx;
-		}
-		.bottom {
-			bottom: -18rpx;
-		}
-	}
-	.list-money {
-		height: 100%;
-		min-width: 155rpx;
-		text-align: center;
-		image {
-			height: 100%;
-			width: 20rpx;
-		}
-		.list-money-text {
-			flex-grow: 1;
-			padding: 0 25rpx;
-			.tit {
-				text-align: center;
-				padding: 15rpx 0rpx;
-				font-size: 55rpx;
-				color: $color-red;
-				font-weight: bold;
-				&.noAction {
-					color: $font-color-light;
-				}
-			}
-			.price {
-				padding-bottom: 25rpx;
-				color: $font-color-light;
-			}
-		}
-	}
-	.row_list_right {
-		// flex-grow: 1;
-		min-width: 200rpx;
-		padding-left: 25rpx;
-		line-height: 1;
-		.right_time {
-			padding: 10rpx 0rpx;
-			color: $font-color-light;
-			font-size: $font-sm;
-		}
-		.right_top {
-			margin: 15rpx 0;
-			.right_name {
-				font-size: $font-base;
-				color: #bc253a;
-				font-weight: bold;
-			}
-			.right_title {
-				font-size: $font-base;
-				color: $font-base;
-				font-weight: bold;
-				&.noAction {
-					color: $font-color-light;
-				}
-			}
-		}
-	}
-	.right_use {
-		margin: 15rpx 0;
-		padding: 10rpx;
-		width: 160rpx;
-		text-align: center;
-		color: #fff;
-		background-color: #bc253a;
-		border-radius: 50rpx;
-		font-size: $font-sm;
-		&.noAction {
-			background-color: $font-color-light;
-		}
-	}
-	.iconlocation {
-		font-size: 36rpx;
-		color: $font-color-light;
-	}
-}
 </style>

pages/product/exchange.vue

@@ -0,0 +1,124 @@
+<template>
+	<view class="exchange">
+		<view class="bg">
+			<!-- <image src="@/static/img/bargainBg.jpg" mode=""></image> -->
+		</view>
+		<view class="header">
+			<view class="data">
+				<view class="title">
+					我的金豆
+				</view>
+				<view class="quantity">
+					8
+				</view>
+				<view class="button">
+					查看明细
+				</view>
+			</view>
+		</view>
+		<view class="line">
+			热门兑换
+		</view>
+		<view class="dataList">
+			<data-list :data='data'></data-list>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+import { loadIndexs } from '@/api/index.js';
+import dataList from '@/components/datalist.vue'
+	export default {
+		data() {
+			return {
+				data: {
+					page: 1,
+					limit: 10,
+					sum: 0,
+					loadingType: 'loadmore',
+					data: []
+				}
+				
+			}
+		},
+		components: {
+			dataList
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			// 點擊搜索框
+			clickSearch() {
+				uni.navigateTo({
+					url: '/pages/product/search'
+				});
+			},
+			init() {
+				this.getData()
+			},
+			getData() {
+				loadIndexs().then(res => {
+					this.data = res.data.info.bastList
+					this.loadingType = 'nomore'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+	.exchange {
+		.bg {
+			width: 100%;
+			height: 400rpx;
+			background-color: $red;
+			image {
+				width: 100%;
+			}
+		}
+		.header {
+			.data {
+				padding-top: 120rpx;
+				width: 100%;
+				text-align: center;
+				position: absolute;
+				top: 0;
+				color: #fff;
+				height: 400rpx;
+				.quantity,.title,.button {
+					margin: 10rpx auto;
+				}
+				.title {
+					font-size: 24rpx;
+				}
+				.quantity {
+					font-size: 54rpx;
+					font-weight: bold;
+				}
+				.button {
+					padding: 10rpx;
+					border: solid 1rpx #fff;
+					border-radius: 40rpx;
+					font-size: 24rpx;
+					width: 160rpx;
+				}
+			}
+		}
+		.line {
+			background-color: #fff;
+			font-size: 28rpx;
+			padding: 30rpx;
+			color: $red;
+			font-weight: bold;
+			text-align: center;
+		}
+		.dataList {
+			background-color: #fff;
+		}
+	}
+</style>

pages/product/newPeople.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="newPeople">
+		<view class="header">
+			<view class="inputSearch" @click="clickSearch">
+				<image src="@/static/img/search.png"></image>
+				请输入关键词
+			</view>
+		</view>
+		<data-list :data='data'></data-list>
+	</view>
+</template>
+
+<script>
+import { loadIndexs } from '@/api/index.js';
+import dataList from '@/components/datalist.vue'
+	export default {
+		data() {
+			return {
+				data: {
+					page: 1,
+					limit: 10,
+					sum: 0,
+					loadingType: 'loadmore',
+					data: []
+				}
+			}
+		},
+		components: {
+			dataList
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			// 點擊搜索框
+			clickSearch() {
+				uni.navigateTo({
+					url: '/pages/product/search'
+				});
+			},
+			init() {
+				this.getData()
+			},
+			getData() {
+				loadIndexs().then(res => {
+					this.data = res.data.info.bastList
+					this.loadingType = 'nomore'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+	.newPeople {
+		.header {
+			background-color: #fff;
+			padding: 30rpx;
+			.inputSearch {
+				line-height: 35rpx;
+				text-align: center;
+				color: $grey;
+				padding: 10rpx 20rpx;
+				border-radius: 50rpx;
+				background-color: $page-color-base;
+				image {
+					width: 32rpx;
+					height: 32rpx;
+					margin: 0 20rpx;
+					margin-bottom: -3rpx;
+				}
+			}
+		}
+		.list {
+			padding: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			.item {
+				background-color: #fff;
+				border-radius: 10rpx;
+				overflow: hidden;
+				// box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
+				margin: 10rpx 0;
+				width: 48%;
+				height: 0;
+				padding-bottom: calc(48% + 120rpx);
+				.img {
+					border-radius: 10rpx;
+					overflow: hidden;
+					width: 100%;
+					height: 0;
+					padding-bottom: 100%;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.name {
+					margin: 0 10rpx;
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+				.allprice {
+					padding: 20rpx 0;
+					.price {
+						color: $red;
+					}
+					.ot-price {
+						color: $grey;
+						text-decoration: line-through;
+						font-size: 26rpx;
+					}
+				}
+			}
+		}
+		.load {
+			text-align: center;
+			color: $grey;
+			font-size: 28rpx;
+		}
+	}
+</style>

pages/product/store.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="store">
+		<view class="list">
+			<view class="item">
+				
+				<view class="left">
+					<view class="img">
+						<image src="@/static/error/errorImage.jpg" mode=""></image>
+					</view>
+					<view class="middle">
+						<view class="name">
+							<text class="storeName">陀罗台州店</text><br>
+							<text class="address">台州市椒江区市府大道120号</text>
+						</view>
+						<view class="distance">
+							<image src="@/static/icon/img01.png" mode=""></image>
+							距离1.5KM
+						</view>
+					</view>
+				</view>
+				<view class="about">
+					门店
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+$grey: #95A0B1;
+$text: #333333;
+$red: #FF4C4C;
+	.store {
+		.list {
+			.item {
+				box-shadow: 2rpx 2rpx 10rpx #e1e1e1;
+				height: 220rpx;
+				border-radius: 20rpx;
+				background-color: #fff;
+				margin: 20rpx;
+				padding: 20rpx;
+				display: flex;
+				justify-content: space-between;
+				.left {
+					display: flex;
+					.img {
+						margin-right: 20rpx;
+						image {
+							border-radius: 20rpx;
+							width: 180rpx;
+							height: 180rpx;
+						}
+					}
+					.middle {
+						display: grid;
+						align-content: space-between;
+						.name {
+							.storeName {
+								font-weight: bold;
+								font-size: 32rpx;
+								color: #333333;
+							}
+							.address {
+								font-size: 20rpx;
+								color: #6c6c6c;
+							}
+						}
+						.distance {
+							font-size: 26rpx;
+							color: $grey;
+							image {
+								width: 20rpx;
+								height: 25rpx;
+								margin-right: 10rpx;
+							}
+						}
+					}
+				}
+				.about {
+					font-size: 26rpx;
+					padding: 0 10rpx;
+					border-radius: 10rpx;
+					height: 50rpx;
+					line-height: 50rpx;
+					color: #fff;
+					background: linear-gradient(90deg,  #FFBD70 0%, #FF8F44 100%);
+				}
+			}
+		}
+	}
+</style>