个人页面路由冲突

App.vue

@@ -21,4 +21,11 @@ export default {
 	src: url('/static/uni.ttf');
 }
 /* #endif */
+::-webkit-scrollbar {  
+    display: none;  
+    width: 0 !important;  
+    height: 0 !important;  
+    -webkit-appearance: none;  
+    background: transparent;  
+}
 </style>

components/k-scroll-view/animate.scss

@@ -0,0 +1,114 @@
+/**
+ * 自定义动画
+ */
+
+@keyframes rotation {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(359deg);
+	}
+}
+
+/* 旋转 */
+.xuanzhun {
+	animation: rotation 1s linear infinite;
+}
+
+
+/* 加载动画 */
+@keyframes translate-line1 {
+
+	30%,
+	50% {
+		height: 20rpx;
+		transform: translateY(-10rpx);
+	}
+
+	75%,
+	100% {
+		height: 10rpx;
+		transform: translateY(0);
+	}
+}
+
+@keyframes translate-line2 {
+
+	30%,
+	50% {
+		height: 40rpx;
+		transform: translateY(-20rpx);
+	}
+
+	75%,
+	100% {
+		height: 10rpx;
+		transform: translateY(0);
+	}
+
+}
+
+@keyframes translate-line3 {
+
+	30%,
+	50% {
+		height: 60rpx;
+		transform: translateY(-30rpx);
+	}
+
+	75%,
+	100% {
+		height: 10rpx;
+		transform: translateY(0);
+	}
+}
+
+.translate-line {
+	width: 60rpx;
+	height: 30rpx;
+
+	display: flex;
+
+	.line {
+		flex: 1;
+		margin: 2rpx;
+		height: 10rpx;
+
+		&:nth-child(1) {
+			background-color: #52A63A;
+			animation: translate-line1 2s infinite;
+		}
+
+		&:nth-child(2) {
+			background-color: #52A63A;
+			animation: translate-line2 2s infinite;
+			animation-delay: 0.15s;
+		}
+
+		&:nth-child(3) {
+			background-color: #52A63A;
+			animation: translate-line3 2s infinite;
+			animation-delay: 0.3s;
+		}
+
+		&:nth-child(4) {
+			background-color: #52A63A;
+			animation: translate-line3 2s infinite;
+			animation-delay: 0.45s;
+		}
+
+		&:nth-child(5) {
+			background-color: #52A63A;
+			animation: translate-line2 2s infinite;
+			animation-delay: 0.6s;
+		}
+
+		&:nth-child(6) {
+			background-color: #52A63A;
+			animation: translate-line1 2s infinite;
+			animation-delay: 0.75s;
+		}
+	}
+}

components/k-scroll-view/k-scroll-view.vue

@@ -0,0 +1,513 @@
+<template>
+	<view class="k-scroll-view" ref="k-scroll-view" :style="[scrollContainerStyle]" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel">
+		<view v-if="refreshType === 'native' && showPullDown" class="native-refresh-icon" :style="[{ top: `${moveY}px` }]" :class="[{ xuanzhun: doRefreshing }]">
+			<text class="my-icons-custom icon-jiantou-refresh" style="color: #52A63A;font-size: 14px;"></text>
+		</view>
+		<view class="scroll-load-refresh" v-if="refreshType === 'custom' && showPullDown">
+			<text class="my-icons-custom icon-jiazai xuanzhun" v-if="refreshText === loadingTip" style="color: #52A63A;font-size: 60rpx;"></text>
+			{{ refreshText }}
+		</view>
+		<view class="go-to-top-icon" v-if="old.scrollTop > 20" @tap="goTop"><text class="my-icons-custom icon-jiantou-up" style="color: #4cd964;font-size: 40rpx;"></text></view>
+		<view class="scroll-load-more" v-if="showPullUp">
+			<view class="translate-line" v-if="onPullUpText === loadingTip">
+				<view class="line"></view>
+				<view class="line"></view>
+				<view class="line"></view>
+				<view class="line"></view>
+				<view class="line"></view>
+				<view class="line"></view>
+			</view>
+			{{ onPullUpText }}
+		</view>
+
+		<scroll-view
+			class="scroll-Y"
+			scroll-y="true"
+			:style="[scrollContentStyle]"
+			:scroll-top="scrollTop"
+			:lower-threshold="bottom"
+			@scrolltoupper="upper"
+			@scrolltolower="lower"
+			@scroll="scroll"
+		>
+			<view class="scroll-content">
+				<slot></slot>
+				<view class="empty-tips" v-if="showEmpty">{{ emptyTip }}</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+/**
+ * 封装 下拉刷新，上拉加载
+ */
+
+export default {
+	name: 'k-scroll-view',
+	components: {},
+	props: {
+		refreshType: {
+			type: String,
+			default: 'custom'
+		},
+		refreshTip: {
+			type: String,
+			default: '正在下拉'
+		},
+		loadTip: {
+			type: String,
+			default: '获取更多数据'
+		},
+		loadingTip: {
+			type: String,
+			default: '正在加载中...'
+		},
+		emptyTip: {
+			type: String,
+			default: '--我是有底线的--'
+		},
+		touchHeight: {
+			type: Number,
+			default: 50
+		},
+		height: Number,
+		bottom: {
+			// 和底部距离多远，执行触底方法（用来预加载）
+			type: Number,
+			default: 50
+		},
+		autoPullUp: {
+			// 是否自动上拉
+			type: [String, Boolean],
+			default: true
+		},
+		stopPullDown: {
+			// 禁用下拉
+			type: [String, Boolean],
+			default: true
+		}
+	},
+	data() {
+		return {
+			scrollTop: 0,
+			old: {
+				scrollTop: 0
+			},
+
+			touch_start: {
+				x: '',
+				y: ''
+			}, // 手指起始位置
+			touch_end: {
+				x: '',
+				y: ''
+			}, // 手指位置
+			touch_direction: '', // 手指移动方向
+
+			isInTop: true, // 是否在顶部
+			isInBottom: false, // 是否在底部
+
+			showPullDown: false, // 是否显示下拉刷新
+			showPullUp: false, // 是否显示上拉加载
+
+			showEmpty: false, // 显示无数据
+
+			refreshText: '下拉刷新', // 下拉刷新提示文字
+			onPullUpText: '上拉加载', // 上拉加载 提示文字
+
+			pullDownCanDo: false, // 是否可以调用刷新
+			pullUpCanDo: false, // 是否可以调用加载
+
+			moveY: 0,
+			doRefreshing: false, // 开始刷新
+			doLoadmore: false, // 开始上拉加载
+
+			isCloseTip: true, // 是否关闭了提示
+
+			hasMove: false
+		};
+	},
+	computed: {
+		scrollContainerStyle() {
+			return {
+				height: `${this.height || this.height_}rpx`
+			};
+		},
+		scrollContentStyle() {
+			return {
+				// height: `${this.height || this.height_}rpx`
+			};
+		}
+	},
+	watch: {},
+	created() {
+		const that = this;
+		uni.getSystemInfo({
+			success: function(e) {
+				that.height_ = (750 / e.windowWidth) * e.windowHeight;
+			}
+		});
+	},
+	mounted() {},
+	destroyed() {},
+	methods: {
+		scroll: function(e) {
+			this.touch_direction = '';
+			this.pullDownCanDo = false;
+			this.pullUpCanDo = false;
+			this.hasMove = true;
+
+			this.old.scrollTop = e.detail.scrollTop;
+
+			this.$emit('@onScroll', this.old.scrollTop);
+
+			if (this.old.scrollTop === 0) {
+				this.isInTop = true;
+			} else {
+				this.isInTop = false;
+			}
+		},
+		upper: function(e) {
+			// console.log("到达顶部")
+			this.isInBottom = false;
+			this.isInTop = true;
+		},
+		lower: function(e) {
+			// console.log("到达底部")
+			this.isInBottom = true;
+			this.isInTop = false;
+
+			// 开启自动上拉
+			if (this.autoPullUp && this.autoPullUp !== 'false') {
+				this.onPullUp();
+			}
+		},
+		goTop: function(e) {
+			// 回到顶部
+			this.scrollTop = this.old.scrollTop;
+			this.$nextTick(function() {
+				this.scrollTop = 0;
+			});
+		},
+		touchstart: function(event) {
+			// 手指按下
+			// console.log('start');
+			this.touch_start.x = event.changedTouches[0].pageX;
+			this.touch_start.y = event.changedTouches[0].pageY;
+
+			this.hasMove = false;
+		},
+		touchmove: function(event) {
+			// console.log('move');
+			const end_move_page_x = event.changedTouches[0].pageX;
+			const end_move_page_y = event.changedTouches[0].pageY;
+
+			const moveX = this.touch_start.x - end_move_page_x;
+			const moveY = this.touch_start.y - end_move_page_y;
+
+			if (moveX === 0) {
+				// console.log('回到原位置');
+				this.stopTips();
+			}
+			if (moveX > 0) {
+				// console.log('向左滑动');
+				if (Math.abs(moveX) > Math.abs(moveY)) {
+					this.touch_direction = 'left';
+				}
+			}
+			if (moveX < 0) {
+				// console.log('向右滑动');
+				if (Math.abs(moveX) > Math.abs(moveY)) {
+					this.touch_direction = 'right';
+				}
+			}
+
+			if (moveY === 0) {
+				// console.log('回到原位置');
+				this.stopTips();
+			}
+			if (moveY > 0) {
+				// console.log('向上滑动');
+				if (Math.abs(moveY) > Math.abs(moveX)) {
+					this.touch_direction = 'top';
+				}
+			}
+			if (moveY < 0) {
+				// console.log('向下滑动');
+				if (Math.abs(moveY) > Math.abs(moveX)) {
+					this.touch_direction = 'bottom';
+				}
+			}
+
+			if (this.old.scrollTop === 0) {
+				this.isInBottom = true;
+				this.isInTop = true;
+			}
+
+			this.hasMove = true;
+
+			this.checkTouchY(moveY);
+		},
+
+		checkTouchY: function(moveY) {
+			// console.log('move_check');
+			const hk = this;
+
+			hk.pullDownCanDo = false;
+			hk.pullUpCanDo = false;
+
+			hk.showPullUp = false;
+			hk.showPullDown = false;
+
+			// hk.showEmpty = false;
+			// hk.isCloseTip = false;
+
+			hk.moveY = Math.abs(moveY);
+
+			// 上拉 并且 在底部
+			if (hk.touch_direction === 'top' && hk.isInBottom) {
+				// console.log("我在底部上拉")
+				hk.showPullUp = true; // 显示上拉加载
+				hk.onPullUpText = hk.loadTip;
+
+				if (hk.moveY > hk.touchHeight) {
+					hk.onPullUpText = '释放加载';
+					hk.pullUpCanDo = true; // 执行加载
+				}
+			}
+			// 下拉 并且在 顶部
+			else if (hk.touch_direction === 'bottom' && hk.isInTop && hk.stopPullDown) {
+				// console.log("我在顶部下拉")
+				hk.showPullDown = true; // 显示下拉刷新
+				hk.refreshText = hk.refreshTip;
+
+				if (hk.moveY > hk.touchHeight) {
+					hk.refreshText = '释放刷新';
+					hk.pullDownCanDo = true; // 执行刷新
+					hk.moveY = Math.abs(hk.touchHeight);
+				}
+			}
+		},
+		touchend: function(event) {
+			// console.log("end")
+			const hk = this;
+
+			hk.doRefreshing = false;
+			hk.doLoadmore = false;
+
+			this.touch_end.x = event.changedTouches[0].pageX;
+			this.touch_end.y = event.changedTouches[0].pageY;
+
+			if (!hk.hasMove) {
+				const moveX = this.touch_start.x - this.touch_end.x;
+				const moveY = this.touch_start.y - this.touch_end.y;
+
+				hk.touch_direction = 'top';
+
+				hk.checkTouchY(hk.touchHeight + 10);
+			}
+
+			// console.log("hk.touch_direction", hk.touch_direction)
+			// console.log("hk.isInBottom", hk.isInBottom)
+			// console.log("hk.isInTop", hk.isInTop)
+			// console.log("hk.pullUpCanDo", hk.pullUpCanDo)
+			// console.log("hk.pullDownCanDo", hk.pullDownCanDo)
+
+			if (hk.pullUpCanDo) {
+				hk.onPullUpText = hk.loadingTip; // 正在加载
+				// 调用加载更多
+				hk.doLoadmore = true;
+
+				hk.onPullUp();
+			} else if (hk.pullDownCanDo) {
+				// 执行刷新
+				hk.refreshText = hk.loadingTip; // 正在刷新
+				// 调用刷新
+				hk.doRefreshing = true;
+
+				hk.onPullDown();
+			} else {
+				hk.stopTips();
+			}
+		},
+		touchcancel: function(event) {
+			// console.log('cancel');
+		},
+		onPullDown: function() {
+			// 刷新
+			const hk = this;
+
+			this.goTop(); // 回到顶部
+
+			// console.log('下拉刷新');
+			hk.$emit('onPullDown', hk.stopTips);
+
+			// 隐藏刷新文字提示
+			hk.clearTimer = setTimeout(function() {
+				hk.stopTips();
+			}, 4000);
+		},
+		onPullUp: function() {
+			// 加载更多
+			const hk = this;
+
+			// console.log('上拉加载');
+			hk.$emit('onPullUp', hk.stopTips);
+
+			// 隐藏上拉提示
+			hk.clearTimer = setTimeout(function() {
+				hk.stopTips();
+			}, 4000);
+		},
+		stopTips(config) {
+			config = config || {};
+			const hk = this;
+
+			hk.isCloseTip = false;
+
+			// 如果提示没关闭，则关闭
+			if (!hk.isCloseTip) {
+				if (hk.clearTimer) {
+					clearTimeout(hk.clearTimer);
+				}
+
+				hk.clearTimer = setTimeout(function() {
+					hk.showPullDown = false;
+					hk.showPullUp = false;
+
+					hk.pullUpCanDo = false;
+					hk.pullDownCanDo = false;
+
+					hk.doRefreshing = false;
+
+					if (config.isEnd && config.isEnd !== 'false') {
+						hk.showEmpty = true;
+					}
+
+					hk.isCloseTip = true;
+
+					if (hk.clearTimer) {
+						clearTimeout(hk.clearTimer);
+					}
+				}, 1000);
+			}
+		}
+	}
+};
+</script>
+<style>
+@font-face {
+	font-family: 'my-icons-custom';
+	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQ8AAsAAAAACLQAAAPwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEaIN5ATYCJAMQCwoABCAFhG0HTxtyB8gOJRHBwMBgYGNAPNSP/e/svfvNHKg+ncR0lY5HErREJUEpntTym2rTNkeVUHWaM1XIiUWWiA6hdVIRi5xYXX4n74qTE7NX7X+OmS6fz4b51zaX7MAB7Y2TB1R5VXjvQA40APEW2DkEatWJ5wm0m7YE79S+I2eAkxTsC8R1hUwEnFoGOYMLrermkaspngJ7reXxrF4APMn/Pr6CVeFE0VQFLzp9ca8U7PiAfESRhzOJLtZskHg4G7SbqNgEJHF51HEWUiY2IdqdXDtHAK3hTwofkA/UR3RmhkS3omglha3/eIVoFig6EXsoVPkQC2olhWyCj6hBYXRub0U3ngG+m06TggNF6BhH/J0xOHpn/M2ZURsx9lrIcUJ0dLSBHyfHn97/NSE86xIFy3Lqk3yp8mxvaWlibY6fzK4svX89L6bMdK+qzlpfeaa0JruOx3tUn1MbQJb2qyx+qyuqa83eNVfJtvoJKyrNJlxWXpdU78evrE2smQPLLNZqH6LMXHPP90K2rrLe6kuWV9WYhNbNOmA6kDZQiIhK6RlE1Eklmc1UW7lLwFpXRbAOreJvMn/jG9XZW3viGzfV76xZLuhY2OYz2OXU7f7vv1v3Dlfr4LDVzer8q2FBuaAi2Tl/R8GmIJJMMnJTaxcB7IW3tylAEJh16BDTmYhTWYGCD4QGv8M8gjxcwO57B9Y4wGHsA9uzq25kOBz5NBhOgF/ueR/v57PD7KcHrNGm5D5NaD8eXfphfNLI3er5RYQTv2JBen9w9PdHzeSnjylHbCzGcf6OF2/m2R5ojBcIwRm+755X9FD2r9w8biAvf1SwX60f7+ZFLp/PfcjmWcy2+4doNbgNaEw17tQZJLuMParnkDV5KjFBffAHeJ3Zl45eV9y2/G/lJ3hFp/UibxtfxkPhtygUC79uWR50iHTFgSHTNjamcqG8RXqEz/tW2a4dDfT0e3EI1ZBTSmg1VEPRYgqqVovIxG5Ckw6HoFmro9Buw/6bOwygISLbsC4NIPRqhqLbc6h69SET+xyaDPsOzXoDgXZnwuueHZZDge6moYiBUlwcgyskOi0VmRm0KD8FZRFqEd0U5wQS0gZFGF+5bEU3vR9qIX2IE4ZI2SqGoXCK1mnwffAyqFbrcD2tU0IJs0zOMPpNy5dTY1+0TKLTANRJNEiEAUnhxGLgFCR0tKh0NAPt/f4pkEwENRF6pq/DSYJoBorFcSsts0KA3K/QivpeymqDSDKrMBgU76LQdDRw+9AGqcOEDk4/vkkJkmAsI98Q09tkOQ2ipIplp1dp3uExaBfcM6NEjYwmPVcVIi2ji1hKQypyG+Ro2xahd6jisSIFAA==')
+		format('woff2');
+}
+
+.my-icons-custom {
+	font-family: 'my-icons-custom' !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-jiantou-refresh:before {
+	content: '\e666';
+}
+
+.icon-jiantou-up:before {
+	content: '\e70a';
+}
+
+.icon-jiazai:before {
+	content: '\e603';
+}
+</style>
+<style lang="scss" scoped>
+@import './animate.scss';
+
+.image {
+	width: 100%;
+	height: 100%;
+}
+
+.k-scroll-view {
+	width: 100%;
+	position: relative;
+	overflow-y: hidden;
+
+	.scroll-Y {
+		width: 100%;
+		height: 100%;
+	}
+
+	.scroll-load-refresh,
+	.scroll-load-more {
+		text-align: center;
+		color: #000;
+		font-size: 25rpx;
+		position: absolute;
+		line-height: 60rpx;
+		z-index: 1;
+		background-color: rgba($color: #ffffff, $alpha: 0.7);
+		border-bottom: 1px solid #eee;
+		width: 100%;
+	}
+
+	.scroll-load-refresh {
+		top: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.scroll-load-more {
+		bottom: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		/deep/ .translate-line {
+			height: 0;
+			margin-right: 5px;
+		}
+	}
+
+	.go-to-top-icon {
+		position: absolute;
+		right: 20rpx;
+		bottom: calc(20rpx + 60rpx + 10rpx);
+		width: 60rpx;
+		height: 60rpx;
+		background-color: #eee;
+		border-radius: 50%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.native-refresh-icon {
+		position: fixed;
+		top: 0;
+		left: calc(50% - 30rpx);
+		width: 60rpx;
+		height: 60rpx;
+		z-index: 999;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.empty-tips {
+		width: 100%;
+		line-height: 50rpx;
+		text-align: center;
+		color: #657575;
+		font-size: 30rpx;
+	}
+}
+</style>

config/api.js

@@ -3,4 +3,19 @@ const WX_API_BASE = 'https://hubw.jihengcc.cn/'
 module.exports = {
 	//  微信登录
 	WxLogin: WX_API_BASE + 'app/auth/user/wx/login',
+	//  获取广告
+	getAdvert: WX_API_BASE + '/app/product/user/homePage',
+	//  获取今日特惠商品列表
+	getPreferentialGoods: WX_API_BASE + '/app/product/user/homePage/indulgenceProductList',
+	//  获取猜你喜欢商品列表
+	getPreferGoods: WX_API_BASE + '/app/product/user/homePage/guessLike/getProductList',
+	//  获取直播列表
+	getLiveTelecast: WX_API_BASE + '/app/liveAndVideo/user/homePage/liveList',
+	//  获取短视频列表
+	getShortVideo: WX_API_BASE + '/app/liveAndVideo/user/homePage/videoList',
+	
+	//  获取分类
+	getSortList: WX_API_BASE + '/app/productCategory/categoryInitialization',
+	//  获取分类下商品
+	getGoodsBySort: WX_API_BASE + '/app/productCategory/selectProductCategory',
 }

pages.json

@@ -1,35 +1,53 @@
 {
-	"pages": [
-		{
+	"pages": [{
 			"path": "pages/index/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "首页"
 			}
 		},
 		{
 			"path": "pages/shop/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "商城"
 			}
 		},
 		{
 			"path": "pages/cart/cart",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "购物车"
 			}
 		},
 		{
 			"path": "pages/user/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "个人"
 			}
 		}
 	],
-	"subPackages": [],
+	"subPackages": [{
+		"root": "pagesGood",
+		"pages": [{
+			"path": "goodDetails",
+			"style": {
+				"navigationBarTitleText": "商品详情"
+			}
+		}, {
+			"path": "goodList",
+			"style": {
+				"navigationBarTitleText": "商品列表"
+			}
+		}, {
+			"path": "shopDetails",
+			"style": {
+				"navigationBarTitleText": "商铺详情"
+			}
+		}]
+	}],
 	"globalStyle": {
+		"navigationStyle": "default",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "千家地",
-		"navigationBarBackgroundColor": "#fff",
+		"navigationBarBackgroundColor": "#ffffff",
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {

pages/index/index.vue

@@ -1,17 +1,17 @@
 <template>
 	<view class="container">
 		<view class="search">
-			<uni-search-bar radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#ffffff" @confirm="search" />
+			<uni-search-bar radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#ffffff" @confirm="goToGoodList" />
 		</view>
 		<view>
 			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
 				<swiper-item>
-					<view>A</view>
+					<cover-image class="" v-for="(item,index) in advertList" :key="index" :src="item.imgPath"></cover-image>
 				</swiper-item>
 			</swiper>
 		</view>
 		<view class="entrance">
-			<view class="entrance-col">
+			<view class="entrance-col" @click="goToGoodList">
 				<view class="entrance-button caizhai">自助采摘</view>
 			</view>
 			<view class="entrance-col">
@@ -26,15 +26,23 @@
 			<view class="title-tip">直播带货，视频推荐</view>
 		</view>
 		<view class="content-box video-box">
-			<view class="video-col" style="margin-right: 11px;">
-				<view class="video-title">直播大厅</view>
-				<cover-image class="video-img" @click="" src="@/static/images/caizhai.png"></cover-image>
-				<view class="video-name">短视频名称</view>
+			<view class="video-col" style="margin-right: 11px;" v-if="liveTelecast">
+				<view class="video-title">直播大厅
+					<view class="circular">
+						<text class="iconfont iconfangxiang"></text>
+					</view>
+				</view>
+				<cover-image class="video-img" :src="liveTelecast.imgUrl"></cover-image>
+				<view class="video-name">{{liveTelecast.liveName}}</view>
 			</view>
-			<view class="video-col" style="margin-left: 11px;">
-				<view class="video-title">短视频推荐</view>
-				<cover-image class="video-img" @click="" src="@/static/images/caizhai.png"></cover-image>
-				<view class="video-name">直播名称</view>
+			<view class="video-col" style="margin-left: 11px;" v-if="shortVideo">
+				<view class="video-title">短视频推荐
+					<view class="circular">
+						<text class="iconfont iconfangxiang"></text>
+					</view>
+				</view>
+				<cover-image class="video-img" :src="shortVideo.coverUrl"></cover-image>
+				<view class="video-name">{{shortVideo.videoName}}</view>
 			</view>
 		</view>
 		<view class="index-title">
@@ -42,35 +50,34 @@
 			<view class="title-tip">精品特价，限量抢购</view>
 		</view>
 		<view class="content-box" style="display: flex;justify-content: space-between;">
-			<view class="discount-col" v-for="item in discountList">
-				<cover-image class="discount-img" @click="" :src="item.url"></cover-image>
-				<view class="discount-name">{{item.name}}</view>
-				<text class="discount-price">
+			<view class="discount-col" v-for="(item,index) in discountList" :key="index" @click="goToGoodDetails(item)">
+				<cover-image class="discount-img" :src="item.imgPath"></cover-image>
+				<view class="discount-name">{{item.productName}}</view>
+				<view class="discount-price">
 					<text class="sale-icon">￥</text>
-					<text class="sale-price">{{item.salePrice}}</text>
-					<text class="price">原价:{{item.price}}</text>
-				</text>
+					<text class="sale-price">{{item.bizPrice}}</text>
+					<text class="price">原价:{{item.originalPrice}}</text>
+				</view>
 			</view>
 		</view>
 		<view class="index-title">
 			<view class="title-text">猜你喜欢</view>
 		</view>
-		<view class="content-box">
-			<view class="goods-row" v-for="item in goodsList">
-				<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
+		<scroll-view class="content-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
+		 @refresherrefresh="onRefresh" @refresherrestore="onRestore">
+			<view class="goods-row" v-for="(item,index) in goodsList" :key="index" @click="goToGoodDetails(item)">
+				<cover-image class="goods-img" :src="item.imgPath"></cover-image>
 				<view class="goods-info">
-					<view class="goods-name">{{item.name}}</view>
-					<view class="goods-number">{{item.number}}人付款</view>
+					<view class="goods-name">{{item.productName}}</view>
+					<view class="goods-number">{{item.sellCount}}人付款</view>
 					<text class="goods-price">
 						<text class="sale-icon">￥</text>
-						<text class="sale-price">{{item.salePrice}}</text>
-						<text class="price">原价:{{item.price}}</text>
+						<text class="sale-price">{{item.bizPrice}}</text>
+						<text class="price">原价:{{item.originalPrice}}</text>
 					</text>
 				</view>
 			</view>
-		</view>
-		<view class="iconfont iconfangxiang"></view>
-		<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">小程序授权</button>
+		</scroll-view>
 	</view>
 </template>
 
@@ -80,38 +87,62 @@
 	export default {
 		data() {
 			return {
-				discountList: [{
-						url: '',
-						name: '礼盒装精选黑珍珠车厘子',
-						price: '196.9',
-						salePrice: '65.9'
-					},
-					{
-						url: '',
-						name: '礼盒装精选黑珍珠车厘子',
-						price: '196.9',
-						salePrice: '65.9'
-					}
-				],
-				goodsList: [{
-						url: '',
-						name: '礼盒装精选黑珍珠车厘子',
-						price: '196.9',
-						salePrice: '65.9',
-						number: 700
-					},
-					{
-						url: '',
-						name: '礼盒装精选黑珍珠车厘子',
-						price: '196.9',
-						salePrice: '65.9',
-						number: 700
-					}
-				],
+				liveTelecast: null,
+				shortVideo: null,
+				advertList: [],
+				discountList: [],
+				triggered: false,
+				goodsList: [],
 			}
 		},
-		onLoad(options) {},
+		onLoad(options) {
+			// this.appLoginWx()
+			NET.request(API.getAdvert, {}, 'GET').then(res => {
+				if (res.code == 0) {
+					this.advertList = res.data
+				} else {
+					uni.showToast({
+						title: "获取广告列表失败",
+						icon: "none"
+					});
+				}
+			})
+			NET.request(API.getLiveTelecast + '/1/1', {}, 'GET').then(res => {
+				if (res.code == 0) {
+					this.liveTelecast = res.data.list.length ? res.data.list[0] : null
+				} else {
+					uni.showToast({
+						title: "获取直播列表失败",
+						icon: "none"
+					});
+				}
+			})
+			NET.request(API.getShortVideo + '/1/1', {}, 'GET').then(res => {
+				if (res.code == 0) {
+					this.shortVideo = res.data.list.length ? res.data.list[0] : null
+				} else {
+					uni.showToast({
+						title: "获取短视频列表失败",
+						icon: "none"
+					});
+				}
+			})
+			NET.request(API.getPreferentialGoods, {}, 'GET').then(res => {
+				if (res.code == 0) {
+					this.discountList = res.data
+				} else {
+					uni.showToast({
+						title: "获取今日特惠商品列表失败",
+						icon: "none"
+					});
+				}
+			})
+			setTimeout(() => {
+				this.triggered = true;
+			}, 1000)
+		},
 		methods: {
+			//  获取登录权限
 			appLoginWx() {
 				uni.getProvider({
 					service: 'oauth',
@@ -130,20 +161,22 @@
 												rawData: info.rawData,
 												signature: info.signature,
 											}, 'POST').then(res3 => {
-												uni.showToast({
-													title: res3,
-													icon: "none"
-												});
+												if (res.code == 0) {
+													uni.setStorage({
+														key: 'token',
+														data: res3.data.token
+													});
+												}
 											}).catch(res3 => {
 												uni.showToast({
-													title: "微信登录授权失败1"+res3,
+													title: "微信登录授权失败",
 													icon: "none"
 												});
 											})
 										},
 										fail: () => {
 											uni.showToast({
-												title: "微信登录授权失败2",
+												title: "微信登录授权失败",
 												icon: "none"
 											});
 										}
@@ -151,7 +184,7 @@
 								},
 								fail: () => {
 									uni.showToast({
-										title: "微信登录授权失败3",
+										title: "微信登录授权失败",
 										icon: "none"
 									});
 								}
@@ -166,12 +199,53 @@
 					}
 				});
 			},
+			//  下拉刷新
+			onRefresh() {
+				this.getPreferGoodsList()
+			},
+			//  刷新终止
+			onRestore() {
+				this.triggered = 'restore'
+			},
+			//  获取猜你喜欢商品列表
+			getPreferGoodsList() {
+				NET.request(API.getPreferGoods, {}, 'GET').then(res => {
+					if (res.code == 0) {
+						this.triggered = false;
+						this.goodsList = res.data
+					} else {
+						uni.showToast({
+							title: "获取猜你喜欢商品列表失败",
+							icon: "none"
+						})
+					}
+				})
+			},
+			//  跳转商品列表
+			goToGoodList(data) {
+				switch (data) {
+					case 0:
+						uni.navigateTo({
+							url: '/pagesGood/goodList?search=' + data
+						});
+						break;
+					default:
+						uni.navigateTo({
+							url: '/pagesGood/goodList?search=' + data.value
+						});
+				}
+			},
+			//  跳转商品详情
+			goToGoodDetails(item) {
+				uni.navigateTo({
+					url: '/pagesGood/goodDetails?goodId=' + item.productId
+				});
+			}
 		}
 	}
 </script>
 
 <style lang="less" scoped>
-	
 	.container {
 		background-size: 128px 124px;
 		background-position: center;
@@ -293,14 +367,18 @@
 				}
 
 				.discount-price {
+					width: calc(100% - 12px);
+					margin-left: 6px;
 					height: 18px;
 					line-height: 18px;
 					font-family: PingFang SC;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
 
 					.sale-icon {
 						font-size: 12px;
 						color: #6CA63A;
-						margin-left: 6px;
 					}
 
 					.sale-price {
@@ -404,6 +482,23 @@
 					font-size: 15px;
 					font-family: PingFang SC;
 					color: #343434;
+					white-space: nowrap;
+
+					.circular {
+						width: 16px;
+						height: 16px;
+						background-color: #6BA539;
+						border-radius: 50%;
+						margin-left: 6px;
+						text-align: right;
+						display: inline-grid;
+
+						.iconfont {
+							font-size: 14px;
+							color: #FFFFFF;
+							font-weight: bold;
+						}
+					}
 				}
 
 				.video-img {

pages/shop/index.vue

@@ -1,112 +1,167 @@
 <template>
 	<view class="container">
 		<view class="search-box">
-			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search" class="search-bar"/>
+			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search"
+			 class="search-bar" />
 		</view>
-		<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="sort-left-box">
-			<view class="sort-left-row" :class="sortFirstCode == item.code ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList" @click="checkFirstSort(item)" :key="index">
-				<text>{{item.label}}</text>
+		<scroll-view show-scrollbar="true" scroll-y="true" class="sort-left-box">
+			<view class="sort-left-row" :class="sortFirstCode == item.cateCode ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList"
+			 @click="checkFirstSort(item)" :key="index">
+				<text>{{item.cateValue}}</text>
 			</view>
 		</scroll-view>
 		<view class="sort-right-box">
-			<scroll-view :scroll-left="0" show-scrollbar="true" scroll-x="true" class="sort-right-row">
-				<view class="sort-right-col" :class="sortSecondCode == item.code ? 'sort-right-col-active' : ''" 
-				v-for="(item,index) in sortSecondList" :key="index" @click="checkSecondSort(item)">{{item.label}}</view>
+			<scroll-view show-scrollbar="true" scroll-x="true" class="sort-right-row">
+				<view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
+				 :key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
 			</scroll-view>
-			<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="goods-box">
+			<k-scroll-view @onPullDown="handlePullDown" @onPullUp="handleLoadMore" class="goods-box">
 				<view class="goods-row" v-for="item in goodsList" @click="">
-					<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
+					<cover-image class="goods-img" :src="item.imgPath"></cover-image>
 					<view class="goods-info">
-						<view class="goods-name">{{item.name}}</view>
+						<view class="goods-name">{{item.productName}}</view>
 						<view class="goods-details">{{item.details}}</view>
 						<view class="goods-number">
-							<!-- <text class="goods-icon">￥</text> -->
-							<text class="goods-spec">{{item.spec}}</text>
-							<text class="goods-sales">{{item.sales}}人付款</text>
+							<text class="goods-icon">￥</text>
+							<text class="goods-spec">{{item.bizPrice}}/{{item.spec}}</text>
+							<text class="goods-sales">{{item.sellCount}}人付款</text>
+						</view>
+					</view>
+					<view class="goods-cart">
+						<view class="cart-button">
+							<view class="iconfont icongouwuche"></view>
 						</view>
 					</view>
-					<view class="goods-cart"></view>
 				</view>
-			</scroll-view>
+			</k-scroll-view>
 		</view>
 	</view>
 </template>
 
 <script>
+	const NET = require('../../utils/request')
+	const API = require('../../config/api')
+	import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue'
 	export default {
+		components: {
+			kScrollView
+		},
 		data() {
 			return {
-				sortFirstCode: '1',
-				sortFirstList: [
-					{label: '有机蔬菜有蔬菜', code: 1},
-					{label: '有机蔬菜', code: 2},
-					{label: '有机蔬菜', code: 3}
-				],
-				sortSecondCode: '1',
-				sortSecondList: [
-					{label: '叶菜类', code: 1},
-					{label: '叶菜类', code: 2},
-					{label: '叶菜类', code: 3}
-				],
-				goodsList: [
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
-					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10}
-				],
+				pageIndex: 1,
+				isOver: false,
+				goodName: '',
+				sortFirstCode: '',
+				sortFirstList: [],
+				sortSecondCode: '',
+				sortSecondList: [],
+				goodsList: [],
 			}
 		},
-		onLoad(){
-			
+		onLoad() {
+			NET.request(API.getSortList, {}, 'POST').then(res => {
+				if (res.code == 0) {
+					this.sortFirstList = res.data
+					if (res.data.length) {
+						this.checkFirstSort(res.data[0])
+					}
+				}
+			}).catch(res => {})
 		},
 		methods: {
 			//  切换一级分类
 			checkFirstSort(item) {
-				this.sortFirstCode = item.code
-				this.sortSecondList = this.sortSecondList
-				this.sortSecondCode = this.sortSecondList.length ? this.sortSecondList[0].code : ''
-				this.goodsList = this.goodsList
+				this.sortFirstCode = item.cateCode
+				this.sortSecondList = []
+				if (item.oneCategory.length) {
+					this.sortSecondList = item.oneCategory
+					this.checkSecondSort(item.oneCategory[0])
+				}
 			},
 			//  切换二级分类
 			checkSecondSort(item) {
-				this.sortSecondCode = item.code
-				this.goodsList = this.goodsList
+				this.sortSecondCode = item.cateCode
+				this.goodsList = []
+				if (this.triggered = 'restore') {
+					this.getGoodsList()
+				}
 			},
+			//  搜索商品
 			search(data) {
-				
+				this.goodName = data.value
+				this.goodsList = []
+				this.getGoodsList()
 			},
+			//  下拉刷新
+			handlePullDown(stopLoad) {
+				this.goodsList = []
+				this.getGoodsList(stopLoad)
+				stopLoad ? stopLoad() : '';
+			},
+			//  懒加载
+			handleLoadMore(stopLoad) {
+				if (!this.isOver) {
+					this.getGoodsList()
+				} else{
+					stopLoad ? stopLoad({ isEnd: true }) : '';
+				}
+			},
+			//  获取商品
+			getGoodsList(stopLoad) {
+				NET.request(API.getGoodsBySort, {
+					name: this.goodName,
+					oneId: this.sortFirstCode,
+					twoId: this.sortSecondCode,
+					pageIndex: this.pageIndex,
+					pageSize: 10,
+				}, 'POST').then(res => {
+					if (res.code == 0) {
+						for (let i = 0; i < 8; i++) {
+							res.data.list.push({
+								...res.data.list[0],
+								productName: res.data.list[i].productName + 1
+							})
+						}
+						this.isOver = res.data.list.length != 10
+						this.goodsList = this.goodsList.concat(res.data.list)
+					}
+				}).catch(res => {})
+			}
 		}
 	}
 </script>
 
 <style lang="less" scoped>
-	page{
+	page {
 		width: 100%;
 		height: 100%;
 	}
-	.container{
+
+	.container {
 		width: 100%;
 		height: 100%;
-		.search-box{
+
+		.search-box {
 			width: 100%;
 			height: 58px;
 			box-sizing: border-box;
 			padding: 2px 12px 1px 12px;
 			border-bottom: 1px solid #DDDDDD;
-			/deep/.search-bar{
-				.uni-searchbar__box{
+
+			/deep/.search-bar {
+				.uni-searchbar__box {
 					border-color: #F8F8F8;
 				}
 			}
 		}
-		.sort-left-box{
+
+		.sort-left-box {
 			width: 80px;
 			height: calc(100% - 58px);
 			border-right: 1px solid #DDDDDD;
 			float: left;
-			.sort-left-row{
+
+			.sort-left-row {
 				width: 100%;
 				height: 45px;
 				box-sizing: border-box;
@@ -119,22 +174,26 @@
 				align-items: center;
 				display: flex;
 			}
-			.sort-left-row-active{
+
+			.sort-left-row-active {
 				color: #51A539;
 				border-left: 3px solid #51A539;
 			}
 		}
-		.sort-right-box{
+
+		.sort-right-box {
 			width: calc(100% - 81px);
 			height: calc(100% - 58px);
 			float: left;
-			.sort-right-row{
+
+			.sort-right-row {
 				width: 100%;
 				height: 44px;
 				padding: 9px 2px 0px 7px;
 				box-sizing: border-box;
 				white-space: nowrap;
-				.sort-right-col{
+
+				.sort-right-col {
 					height: 26px;
 					margin-right: 10px;
 					display: inline-block;
@@ -147,18 +206,22 @@
 					color: #666666;
 					line-height: 24px;
 				}
-				.sort-right-col-active{
+
+				.sort-right-col-active {
 					color: #FFFFFF;
 					background: #52A63A;
 					border: 1px solid #51A539;
 				}
 			}
-			.goods-box{
+
+			.goods-box {
 				width: 100%;
-				height: calc(100% - 44px);
+				height: calc(100% - 44px)!important;
 				padding: 6px 0 0px 0;
 				box-sizing: border-box;
-				.goods-row{
+				overflow-y: auto;
+
+				.goods-row {
 					width: calc(100% - 24px);
 					height: 104px;
 					padding: 11px 11px 11px 7px;
@@ -167,16 +230,19 @@
 					background: #FFFFFF;
 					box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
 					border-radius: 15px;
-					.goods-img{
+
+					.goods-img {
 						width: 84px;
 						height: 84px;
 						float: left;
 					}
-					.goods-info{
-						width: calc(100% - 104px);
+
+					.goods-info {
+						width: calc(100% - 108px);
 						height: 84px;
 						float: left;
-						.goods-name{
+
+						.goods-name {
 							height: 18px;
 							font-size: 15px;
 							font-family: PingFang SC;
@@ -186,7 +252,8 @@
 							text-overflow: ellipsis;
 							overflow: hidden;
 						}
-						.goods-details{
+
+						.goods-details {
 							height: 28px;
 							font-size: 12px;
 							font-family: PingFang SC;
@@ -200,29 +267,47 @@
 							word-wrap: break-word;
 							margin: 4px 0 12px 0;
 						}
-						.goods-number{
+
+						.goods-number {
 							height: 16px;
 							font-family: PingFang SC;
 							line-height: 16px;
-							.goods-icon{
+
+							.goods-icon {
 								font-size: 12px;
 								color: #52A63A;
 							}
-							.goods-spec{
+
+							.goods-spec {
 								font-size: 15px;
 								color: #52A63A;
 								margin-right: 15px;
 							}
-							.goods-sales{
-								font-size: 12px;					
+
+							.goods-sales {
+								font-size: 12px;
 								color: #999999;
 							}
 						}
 					}
-					.goods-cart{
-						width: 20px;
+
+					.goods-cart {
+						width: 24px;
 						height: 84px;
 						float: left;
+						.cart-button{
+							width: 24px;
+							height: 24px;
+							margin-top: 30px;
+							background-color: #52A63A;
+							border-radius: 50%;
+							text-align: center;
+							.iconfont{
+								color: #FFFFFF;
+								font-size: 18px;
+								line-height: 24px;
+							}
+						}
 					}
 				}
 			}

pagesGood/goodDetails.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pagesGood/goodList.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style lang="less" scoped>
+</style>

pagesGood/shopDetails.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

static/iconfont.css

@@ -1,13 +1,12 @@
 @font-face {
   font-family: 'iconfont';  /* project id 2119167 */
-  src: url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.eot');
-  src: url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_2119167_niiwf8dzp8q.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.eot');
+  src: url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_2119167_yyvtw5fd2t.svg#iconfont') format('svg');
 }
-
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -16,6 +15,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfeigouxuan:before {
+  content: "\e646";
+}
+
 .iconfangxiang:before {
   content: "\e622";
 }

utils/request.js

@@ -3,12 +3,9 @@ const request = (url, data, method = 'GET') => {
 		let header = {
 			'Content-Type': 'application/json',
 		}
-		const res = uni.getStorageSync('storage_key');
-		// const token = res.token
-		const token = 'eyJ0eXAiOiJKc29uV2ViVG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiTEJZIiwidG9rZW5fdHlwZSI6InRva2VuIiwidXNlcmlkIjoiMTMxNDc2OTM4MjQ5NjI3MjM4NCIsImFjY291bnQiOiJvQm56ODRoR3g3QTh2VVBqakNLWEJnQUhLb29nIiwiZXhwIjoxNjAyMzM5NDc3LCJuYmYiOjE2MDIzMTA2Nzd9.TyrNEt6F_tY36xtiLULCiExV2LaS7n_TUO-fb578Ae4'
-		if (token) {
-			header['token'] = 'Bearer ' + token
-		}
+		// if (uni.getStorageSync('token')) {
+		// 	header['token'] = 'Bearer ' + uni.getStorageSync('token')
+		// }
 		uni.request({
 			url: url,
 			data: data,