11

pages.json

@@ -124,6 +124,12 @@
 			"style": {
 				"navigationBarTitleText": "详情"
 			}
+		},
+		{
+			"path": "pages/index/hot",
+			"style": {
+				"navigationBarTitleText": "热销推荐"
+			}
 		},
 		{
 			"path": "pages/public/forget",
@@ -370,6 +376,12 @@
 			"style": {
 				"navigationBarTitleText": "提现账号"
 			}
+		},
+		{
+			"path": "pages/index/jifenShop",
+			"style": {
+				"navigationBarTitleText": "分享有礼"
+			}
 		},
 		{
 			"path": "pages/money/withdrawal",
@@ -382,12 +394,28 @@
 			"style": {
 				"navigationBarTitleText": "充值"
 			}
+		},
+		{
+			"path": "pages/index/classify",
+			"style": {
+				"navigationBarTitleText": "分享有礼",
+				"navigationBarTextStyle": "white",
+				
+				"navigationBarBackgroundColor": "#52C696"
+				
+			}
 		},
 		{
 			"path": "pages/category/category",
 			"style": {
 				"navigationBarTitleText": "品牌故事"
 			}
+		},
+		{
+			"path": "pages/index/recommend",
+			"style": {
+				"navigationBarTitleText": "热销推荐"
+			}
 		},
 		{
 			"path": "pages/redirect/redirect",
@@ -404,7 +432,35 @@
 				"navigationBarTitleText": "邀请好友"
 			}
 		}
-	],
+	 
+        ,{
+            "path" : "pages/index/recommend",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/jifenShop",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/category/zjList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/category/zjList.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="content">
+		<view class="box">
+			<view class="img">
+				<image src="../../static/error/missing-face.png" mode=""></image>
+			</view>
+			<view class="title-box">
+				<view class="title-top">
+					<view class="title-left">
+						<text>古太医</text>
+						<text>精通药理学病理中医神经学</text>
+					</view>
+					<view class="zj">
+						专家
+					</view>
+				</view>
+				<view class="title-bottom">
+					<view class="img1">
+						<image src="../../static/error/emptyCart.png" mode=""></image>
+					</view>
+					<text>台州市椒江区市府大道120号</text>
+				</view>
+			</view>
+		</view>
+		<view class="contact">
+			<view class="contact-title">
+				<text></text>
+				<text>众赢集团</text>
+				<text></text>
+			</view>
+			<view class="contact-content">
+				<view class="img">
+					<image src="../../static/icon/appleIcon.png" mode=""></image>
+				</view>
+				<view class="phone">
+					专线电话：18252757278
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.box {
+		margin: 0 20rpx ;
+		display: flex;
+		width: 710rpx;
+		height: 210rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
+		border-radius: 10rpx;
+		.img {
+			width: 180rpx;
+			height: 180rpx;
+			border-radius: 10rpx;
+			margin-left: 10rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.title-box {
+			
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			margin-left: 20rpx;
+			.title-top {
+				display: flex;
+				
+				.title-left {
+					width: 400rpx;
+					display: flex;
+					flex-direction: column;
+					text:nth-child(1){
+						font-size: 30rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #333333;
+						margin-top: -20rpx;
+						line-height: 54rpx;
+					}
+					text:nth-child(2){
+						font-size: 22rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+					}
+				}
+
+				.zj {
+					text-align: center;
+					width: 66rpx;
+					height: 40rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #FFFFFF;
+					background: linear-gradient(120deg, #FFC063, #FFA163);
+					border-radius: 8rpx;
+					line-height: 40rpx;
+				}
+
+			}
+
+			.title-bottom {
+				display: flex;
+				.img1 {
+					width: 17rpx;
+					height: 24rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				text {
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
+				}
+			}
+		}
+
+		.contact {
+			.contact-title {
+				text:nth-child(1) {
+					width: 270px;
+					height: 2px;
+					background: #E5E5E5;
+				}
+
+				text:nth-child(2) {
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
+					line-height: 42rpx;
+				}
+
+				text:nth-child(3) {
+					width: 270px;
+					height: 2px;
+					background: #E5E5E5;
+				}
+			}
+
+			.contact-content {
+				.img {
+					width: 28rpx;
+					height: 25rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.phone {}
+			}
+		}
+
+	}
+</style>

pages/index/classify.vue

@@ -0,0 +1,367 @@
+<template>
+	<view class="container">
+		<!-- 头部轮播 -->
+		<!-- <view class="carousel-section">
+			<swiper class="carousel" autoplay="true" duration="400" interval="5000">
+				<swiper-item v-for="(item, index) in bannerImg" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
+					<image :src="item.img" mode=" scaleToFill" />
+				</swiper-item>
+			</swiper>
+		</view> -->
+		<view class="top">
+			<view class="bg"></view>
+			<view class="title-box">
+				<view class="title-one">
+					<text>555</text>
+					<text>推销得分</text>
+				</view>
+				<view class="title-one">
+					<text>555</text>
+					<text>推荐得分</text>
+				</view>
+				<view class="title-one">
+					<text>555</text>
+					<text>购买得分</text>
+				</view>
+			</view>
+			<view class="title-box1"  @click="navTo()">
+					<view class="title-bg">
+						<image src="../../static/img/libao.jpg" mode=""></image>
+					</view>
+					<view class="title-between">
+						<text>邀请有礼</text>
+						<text>转发海报邀请好友获得更多奖励</text>
+					</view>
+					<view class="title-right">
+						<image src="../../static/user/right01.png" mode=""></image>
+					</view>
+			</view>
+		</view>
+		<view class="goodsList-box">
+			<view class="goodsList-item flex" :key="ind" v-for="(ls, ind) in list">
+				<image :src="ls.image" mode=" scaleToFill"></image>
+				<view class="goodsList-content">
+					<view class="title">
+						<text class="clamp2">{{ ls.store_name }}</text>
+					</view>
+					<view class="goods-money flex">
+						<view class="money-box">
+							<text class="otMoney">￥{{ ls.ot_price }}</text>
+							<image src="../../static/icon/in2.png"></image>
+							<!-- <image src="../../static/error/errorImage.jpg"></image> -->
+							<text class="decline">直降{{ ls.ot_price - ls.price}}元</text>
+							<!-- <view class="otMoney-box"> -->
+								<view class="money">￥{{ ls.price }}</view>
+								<!-- <text class="sales">已售{{ ls.sales }}件</text> -->
+							<!-- </view> -->
+						</view>
+						<view class="button" @click="navTo(ls)">立即购买</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { loadIndexs,groom } from '@/api/index.js';
+export default {
+	data() {
+		return {
+			list: [],
+			bannerImg: [],
+			title: '',
+			goods: [],
+			page: 1,
+			limit: 10
+		};
+	},
+	onLoad(option) {
+		// 获取查询对象
+		this.type = option.type;
+		// 加载基础数据
+		// this.loadData();
+	},
+	methods: {
+		//动态改变标头
+		getTitle() {
+			let title = ''
+			if(this.type == 1) {
+				title = "精选好货"
+				// this.list = this.goods.bastList
+			}else if(this.type == 2) {
+				title = "热销专区"
+				// this.list = this.goods.likeInfo
+			}else if(this.type == 3) {
+				title = "收藏夹"
+			}else {
+				title = "促销单品"
+			}
+			uni.setNavigationBarTitle({
+				title: title
+			});
+		},
+		navTo: function(ls) {
+			uni.navigateTo({
+				url: '/pages/product/product?id=' + ls.id
+			});
+		},
+		// 请求载入数据
+		async loadData() {
+			// loadIndexs({})
+			// 	.then(({ data }) => {
+			// 		let goods = data.info;
+			// 		console.log(data)
+			// 		this.goods = goods
+			// 		this.goods.likeInfo = data.likeInfo
+			// 		// this.goodsList = goods.firstList; //最新商品
+			// 		// this.bastList = goods.bastList; //精品推荐
+			// 		this.getTitle()
+			// 		uni.stopPullDownRefresh();
+			// 	})
+			// 	.catch(e => {
+			// 		uni.stopPullDownRefresh();
+			// 	});
+			let data = {
+				page: this.page,
+				limit: this.limit
+			}
+			let type = this.type
+			groom(data,type).then(res => {
+				this.list = res.data.list
+				this.getTitle()
+				console.log(res.data)
+			})
+		},
+		// 轮播图跳转
+		// bannerNavToUrl(item) {
+		// 	// #ifdef H5
+		// 	if (item.wap_link.indexOf('http') > 0) {
+		// 		window.location.href = item.wap_link;
+		// 	}
+		// 	// #endif
+		// 	if (item.wap_link) {
+		// 		uni.navigateTo({
+		// 			url: item.wap_link
+		// 		});
+		// 	}
+		// }
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+}
+.top{
+	.bg{
+		width: 1000rpx;
+		height: 200rpx;
+		background: #52C696;
+		overflow: hidden;
+		text-align: center;
+		border-bottom-left-radius: 50%;
+		border-bottom-right-radius: 50%;
+		margin-left: -125rpx;
+		
+	}
+	.title-box{
+		position: relative;
+		z-index: 999;
+		margin: -100rpx auto;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		width: 702rpx;
+		height: 137rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		.title-one{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text:nth-child(2){
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+				
+			}
+		}
+	}
+	.title-box1{
+		margin: 120rpx auto;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		width: 702rpx;
+		height: 137rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		.title-bg{
+			width: 123rpx;
+			height: 123rpx;
+			image{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.title-between{
+			display: flex;
+			
+			flex-direction: column;
+			text:nth-child(1){
+				width: 131rpx;
+				font-size: 33rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				line-height: 34rpx;
+			
+			}
+			text:nth-child(2){
+				width: 350rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				line-height: 44rpx;
+			}
+		}
+		.title-right{
+			width: 16rpx;
+			height: 30rpx;
+			image{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		
+	}
+}
+.carousel-section {
+	padding: 0;
+	.titleNview-placing {
+		padding-top: 0;
+		height: 0;
+	}
+	.swiper-dots {
+		left: 45rpx;
+		bottom: 40rpx;
+	}
+	.carousel {
+		width: 100%;
+		height: 360rpx;
+		.carousel-item {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+		}
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+// 中间标题样式
+.type-title-box {
+	padding: 40rpx;
+	.title-content {
+		height: 100%;
+		width: 200rpx;
+		text-align: center;
+		font-size: $font-lg;
+		font-weight: 500;
+		color: $font-color-dark;
+	}
+	.title-border {
+		width: 250rpx;
+		height: 2rpx;
+		background-color: #e9e9e9;
+	}
+}
+// 商品列表
+.goodsList-box {
+	padding: 30rpx;
+	.goodsList-item {
+		box-shadow:0 0 20rpx 6rpx #f1f1f1;
+		border-radius: 10rpx;
+		margin-bottom: 30rpx;
+		background-color: #ffffff;
+		padding: 30rpx;
+		image {
+			flex-shrink: 0;
+			border-radius: $border-radius-sm;
+			height: 180rpx;
+			width: 180rpx;
+		}
+		.goodsList-content {
+			margin-left: 20rpx;
+			flex-grow: 1;
+			height: 180rpx;
+			position: relative;
+			.title {
+				font-size: $font-base;
+				color: $font-color-dark;
+				font-weight: bold;
+			}
+			.goods-money {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width:100%;
+				.money-box {
+					.otMoney {
+						color: #999999;
+						text-decoration: line-through;
+						margin-right: 15rpx;
+						font-size: 20rpx;
+					}
+					.money {
+						color: #FF6F0F;
+						font-weight: bold;
+						font-size: 35rpx;
+					}
+					image {
+						width: 20rpx;
+						height: 20rpx;
+						margin-right: 5rpx;
+					}
+					.decline {
+						color: #B59467;
+						font-size: 20rpx;
+					}
+					.sales {
+						color: $font-color-light;
+					}
+				}
+				.button {
+					background: #52C696;
+					height: 50rpx;
+					border-radius: 20rpx;
+					padding: 10rpx 15rpx;
+					color: #fff;
+					font-size: 25rpx;
+					position: relative;
+					top: 20rpx;
+				}
+				.cart {
+					border: 1px solid $color-red;
+					color: $color-red;
+					font-size: $font-base;
+					font-weight: bold;
+					border-radius: 99px;
+					width: 55rpx;
+					height: 55rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+	}
+}
+</style>

pages/index/hot.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="content">
+		<view class="box" v-for=" item in shopList" @click="navTo()">
+			<view class="img">
+				<image :src=item.img mode=""></image>
+			</view>
+			<view class="title">
+				{{item.title}}
+			</view>
+			<view class="right">
+				<image src="../../static/user/right01.png" mode=""></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				shopList:[
+					{
+						title:'商品1',
+						img:'../../static/error/missing-face.png'
+					},
+					{
+						title:'商品2',
+						img:'../../static/error/missing-face.png'
+					},
+					{
+						title:'商品3',
+						img:'../../static/error/missing-face.png'
+					},
+					{
+						title:'商品4',
+						img:'../../static/error/missing-face.png'
+					}
+				]
+			}
+		},
+		methods:{
+			navTo(){
+				uni.navigateTo({
+					url:'./classify'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		margin: 0;
+		padding: 0;
+	}
+	.content{
+		color: #F8F8F8;
+		// margin: 0 30rpx;
+		margin: 0;
+		padding: 0;
+	}
+	.box{
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
+		border-radius: 10px;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		margin: 20rpx 30rpx;
+		padding: 20rpx 0;
+		.img{
+			width: 125rpx;
+			height: 125rpx;
+			border-radius: 10rpx;
+			image{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.title{
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			line-height: 42rpx;
+		}
+		.right{
+			width: 21rpx;
+			height: 36rpx;
+			
+			image{
+			width: 100%;
+			height: 100%;
+			}
+		}
+	}
+</style>

pages/index/jifenShop.vue

@@ -0,0 +1,177 @@
+<template>
+	<view class="container">
+		<view class="goodsList-box">
+			<view class="goodsList-item flex" >
+				<image src="" mode=" scaleToFill"></image>
+				<view class="goodsList-content">
+					<view class="title">
+						<text class="clamp2"></text>
+					</view>
+					<view class="goods-money flex">
+						<view class="money-box">
+							<text class="otMoney">￥</text>
+							<image src="../../static/icon/in2.png"></image>
+							<!-- <image src="../../static/error/errorImage.jpg"></image> -->
+							<text class="decline">直降元</text>
+							<!-- <view class="otMoney-box"> -->
+								<view class="money">￥</view>
+								<!-- <text class="sales">已售{{ ls.sales }}件</text> -->
+							<!-- </view> -->
+						</view>
+						<view class="button" @click="navTo(ls)">立即购买</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { loadIndexs,groom } from '@/api/index.js';
+export default {
+	data() {
+		return {
+			list: [],
+			bannerImg: [],
+			title: '',
+			goods: [],
+			page: 1,
+			limit: 10
+		};
+	},
+	onLoad(option) {
+	},
+	methods: {
+		}
+	
+	}
+
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+}
+.carousel-section {
+	padding: 0;
+	.titleNview-placing {
+		padding-top: 0;
+		height: 0;
+	}
+	.swiper-dots {
+		left: 45rpx;
+		bottom: 40rpx;
+	}
+	.carousel {
+		width: 100%;
+		height: 360rpx;
+		.carousel-item {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+		}
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+// 中间标题样式
+.type-title-box {
+	padding: 40rpx;
+	.title-content {
+		height: 100%;
+		width: 200rpx;
+		text-align: center;
+		font-size: $font-lg;
+		font-weight: 500;
+		color: $font-color-dark;
+	}
+	.title-border {
+		width: 250rpx;
+		height: 2rpx;
+		background-color: #e9e9e9;
+	}
+}
+// 商品列表
+.goodsList-box {
+	padding: 30rpx;
+	.goodsList-item {
+		box-shadow:0 0 20rpx 6rpx #f1f1f1;
+		border-radius: 10rpx;
+		margin-bottom: 30rpx;
+		background-color: #ffffff;
+		padding: 30rpx;
+		image {
+			flex-shrink: 0;
+			border-radius: $border-radius-sm;
+			height: 180rpx;
+			width: 180rpx;
+		}
+		.goodsList-content {
+			margin-left: 20rpx;
+			flex-grow: 1;
+			height: 180rpx;
+			position: relative;
+			.title {
+				font-size: $font-base;
+				color: $font-color-dark;
+				font-weight: bold;
+			}
+			.goods-money {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width:100%;
+				.money-box {
+					.otMoney {
+						color: #999999;
+						text-decoration: line-through;
+						margin-right: 15rpx;
+						font-size: 20rpx;
+					}
+					.money {
+						color: #FF6F0F;
+						font-weight: bold;
+						font-size: 35rpx;
+					}
+					image {
+						width: 20rpx;
+						height: 20rpx;
+						margin-right: 5rpx;
+					}
+					.decline {
+						color: #B59467;
+						font-size: 20rpx;
+					}
+					.sales {
+						color: $font-color-light;
+					}
+				}
+				.button {
+					background: #52C696;
+					height: 50rpx;
+					border-radius: 20rpx;
+					padding: 10rpx 15rpx;
+					color: #fff;
+					font-size: 25rpx;
+					position: relative;
+					top: 20rpx;
+				}
+				.cart {
+					border: 1px solid $color-red;
+					color: $color-red;
+					font-size: $font-base;
+					font-weight: bold;
+					border-radius: 99px;
+					width: 55rpx;
+					height: 55rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+	}
+}
+</style>

pages/index/recommend.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>