2023-4-25

pages.json

@@ -7,6 +7,7 @@
 				"app-plus": {
 					"titleNView": false
 				},
+				
 				// #endif
 				"navigationBarTitleText": "母婴界严选"
 			}
@@ -311,9 +312,9 @@
 		]
 	}],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
+		"navigationBarTextStyle": "#FFFFFF",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#FFFFFF",
+		"navigationBarBackgroundColor": "#ff629f",
 		"backgroundColor": "#f8f8f8"
 	},
 	"tabBar": {

pages/index/index.vue

@@ -1,30 +1,13 @@
 <template>
 	<view class="indexBox">
-		<!-- 引导图 -->
-		<view class="alertMap" v-if='showAlertMap' @touchmove.stop.prevent="()=>{}">
-			<swiper class="alertMapBox" :indicator-dots='true'>
-				<swiper-item v-for="(item,index) in alertImgMapList">
-					<image class="alertImgMap" :src="item.image" mode="heightFix">
-					</image>
-				</swiper-item>
-			</swiper>
-			<view class="postionbuttom" @click="alertClick">
-				关闭
-			</view>
-		</view>
-		<!-- #ifndef APP -->
-		<view class="follow flex" @click="navTo('./follow')" v-if="follow==2">
-			<view class="">
-				请关注微信“母婴界严选”公众号
-			</view>
-			<view class="flex">
-				<text>
-					前往关注
-				</text>
-				<image class="followIcon" src="../../static/icon/next2.png" mode="widthFix"></image>
-			</view>
-		</view>
-		<!-- #endif -->
+		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
+			<swiper-item v-for="item in imagelist" class="carousel-item" @click="navTo(item)">
+				<image :src="item" />
+			</swiper-item>
+		</swiper>
+
+
+		<uni-load-more :status="navList.loadingType"></uni-load-more>
 	</view>
 </template>
 
@@ -37,11 +20,9 @@
 		share
 	} from '@/api/wx';
 	import {
-		loadIndexs,
-		articleList,
-		notify,
-		guide_map
-	} from '@/api/index.js';
+		getBannerList,
+		getShowTemplateList
+	} from '@/api/model.js';
 	// #ifdef MP-WEIXIN
 	import {
 		openGetAddress
@@ -50,19 +31,20 @@
 	export default {
 		data() {
 			return {
-				alertImgMapIndex: 0, //引导图流程次数
-				showAlertMap: false, //是否显示引导图
-				userOn: 0, //加载显示页面0不加载1加载已购买车辆页面2加载未购买商品页面
-				articleNum: 0, //消息数
-				notifyNum: 0, //警报数
-				follow: 0, //0为未查询1为关注，2为未关注
-				// #ifndef APP
-				loadFollow: false, //判断是否已经提示过关注公众号
-				// #endif
-				loadShopData: false, //是否已经加载过商家信息
-				alertImgMapList: [], //引导图列表
-				notifyTime: '', //定时器获取消息
-				shareData: {}, //分享数据
+				//轮播图
+				imagelist: [],
+				// 推荐商品
+				navList: {
+					state: 1,
+					text: '通知',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10, //每次信息条数
+					count: 0, //总消息条数
+				},
+				// 热门商品
+				rmList: []
 			};
 		},
 		computed: {
@@ -73,18 +55,6 @@
 				return this.notifyNum + this.articleNum
 			}
 		},
-		// 切换或显示后变动tabbar颜色
-		onHide() {
-			console.log('隐藏');
-			uni.setTabBarStyle({
-				backgroundColor: '#FFFFFF'
-			})
-			if (this.userOn == 1) {
-				this.$refs.onuser.outGetCartInfo()
-			}
-			// 关闭消息定时器
-			clearInterval(this.notifyTime)
-		},
 		onLoad: function(option) {
 			// #ifndef MP
 			if (option.spread) {
@@ -101,26 +71,17 @@
 				});
 			}
 			// #endif
-			// 获取定位数据
-			// this.getlocation();
 			// 加载分享信息
 			this.share()
 		},
 		onShow() {
 			this.loadIndexs();
-			// 判断是否有用户如果是则显示
-			if (this.userOn == 1) {
-				this.$refs.onuser.setTabbar()
-				this.$refs.onuser.onStartGetCartInfo()
-			}
 		},
 		onReady() {
-			// 判断是否为用户首次加载
-			if (!this.firstUse) {
-				// this.showAlertMap = true;
-				this.guide_map();
-				uni.hideTabBar();
-			}
+		},
+		// 滚动到底部
+		onReachBottom() {
+			this.getShowTemplateList();
 		},
 		// #ifdef MP
 		onShareAppMessage(options) {
@@ -155,12 +116,6 @@
 		},
 		// #endif
 		methods: {
-			...mapMutations('user', ['setAddress']),
-			// #ifdef APP
-			...mapMutations(['setFx']),
-			// #endif
-			...mapMutations(['setFirstUse']),
-			...mapMutations('shop', ['setShopInfo']),
 			share() {
 				// console.log('加载分享');
 				const that = this;
@@ -172,174 +127,97 @@
 					that.shareData = data.data
 				});
 			},
-			// 获取引导图
-			guide_map() {
-				guide_map().then((e) => {
-					this.alertImgMapList = e.data;
-					console.log(e);
-				}).catch((e) => {
-					console.log(e);
-				})
-			},
-			showcartAlert() {
-				console.log(this.myCartList[this.chickedMyCart]);
-			},
-			// 首次加载点击事件
-			alertClick(e) {
-				// 关闭弹窗
-				this.showAlertMap = false
-				uni.showTabBar()
-				// 设置已经加载过引导图
-				this.setFirstUse(true)
-			},
 
-			// 获取经纬度
-			getlocation() {
-				let obj = this;
-				// #ifdef H5 || APP
-				uni.getLocation({
-					type: 'gcj02',
-					success(e) {
-						obj.getlocationSetInit(e)
-					},
-					fail(e) {
-						if(e.errCode==22){
-							uni.showModal({
-								title: '定位开启错误',
-								content: '请查看是否已经开启定位服务',
-								showCancel: false,
-							});
-						}
-						console.log(e, 'cw');
-					}
-				})
-				// #endif
-				// #ifdef MP-WEIXIN
-				openGetAddress().then((e) => {
-					console.log("授权");
-					wx.startLocationUpdateBackground({
-						type: 'gcj02',
-						success: (e) => {
-							console.log(e);
-							// 调用鉴定位置变化事件
-							wx.onLocationChange((data) => {
-								obj.getlocationSetInit(data)
-							})
-						},
-						fail() {
-							// uni.getLocation({
-							// 	type: 'gcj02',
-							// 	success(e) {
-							// 		obj.getlocationSetInit(e)
-							// 	},
-							// 	fail(e) {
-							// 		console.log(e, 'cw');
-							// 	}
-							// })
-						}
-					})
-				})
-				// #endif
-			},
-			// 获取经纬度完毕后回调处理
-			getlocationSetInit(data) {
-				const obj = this;
-				try {
-					console.log(data, '位置数据');
-					// 保存当前经纬度
-					obj.setAddress({
-						latitude: data.latitude,
-						longitude: data.longitude
-					})
-					// 判断是否已经加载过最近商家信息
-				} catch (e) {
-					console.log(e, 'cww');
-				}
-			},
 			// 首页初始化
 			loadIndexs() {
 				const that = this;
-				// 获取首页数据
-				loadIndexs({
-					store_id: that.shopDetail.id
-				}).then((e) => {
-					
-					// #ifdef APP
-					if(+e.data.app_auth==0){
-						that.setFx(true)
+				// 轮播图
+				getBannerList().then(
+					(res) => {
+						that.imagelist = res.data.list
+						console.log(res);
 					}
-					// #endif
-					
-					// #ifdef H5 || MP
-					// 判断是否已经关注了公众号
-					if (e.data.subscribe) {
-						that.follow = 1
-					} else {
-						// 设置已经提示过
-						that.follow = 2
-						// 判断是否未提示过
-						if (!that.loadFollow) {
-							that.loadFollow = true;
-							uni.showModal({
-								title: '提示',
-								content: '您未关注公众号是否马上关注',
-								cancelText: '取消',
-								confirmText: '关注',
-								success: res => {
-									if (res.confirm) {
-										uni.navigateTo({
-											url: './follow',
-										});
-									}
-								},
-							});
-						}
+				).catch(
+					(res) => {
+						console.log(res);
 					}
-					// #endif
-					// 用户车辆大于0则显示用户车辆信息
-					if (e.data.is_car > 0) {
-						that.userOn = 1;
-						// 完成加载后再加载方法防止节点未渲染完成无法找到节点对象
-						that.$nextTick(function() {
-							// 刷新用户数据
-							that.$refs.onuser.loadCard();
-							that.$refs.onuser.setTabbar();
-						})
-					} else {
-						that.userOn = 2;
-						that.$nextTick(function() {
-							// 刷新用户数据
-							that.$refs.nouser.init()
-						})
+				)
+				// 获取热门
+				getShowTemplateList({
+					is_hot: 1
+				}).then(
+					(res) => {
+						that.rmList = res.data.list
+						console.log(res);
 					}
-				}).catch((e) => {
-					console.log(e);
-				})
-				// 判断是否已经用户登录
-				if (that.hasLogin) {
-					if (that.notifyTime) {
-						clearInterval(that.notifyTime)
+				).catch(
+					(res) => {
+						console.log(res);
 					}
-					that.getNotfyNum();
-					that.notifyTime = setInterval(() => {
-						that.getNotfyNum();
-					}, 60000)
-				}
+				)
 			},
-			getNotfyNum() {
-				const that = this;
-				// 查询消息数量
-				articleList({}, 1).then((e) => {
-					that.articleNum = +e.data.not_read_count
-				})
-				notify().then((e) => {
-					that.notifyNum = +e.data.not_read_count
-				})
+			// 获取模板列表
+			getShowTemplateList() {
+				//这里是将订单挂载到tab列表下
+				let navItem = this.navList;
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				getShowTemplateList({
+						is_recommend: 1,
+						page: navItem.page,
+						pageSize: navItem.limit
+					})
+					.then(({
+						data
+					}) => {
+						let arr = data.data.map(e => {
+							return e;
+						});
+						navItem.orderList = navItem.orderList.concat(arr);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+
 			},
 			navTo(url) {
-				uni.navigateTo({
-					url: url
-				})
+				if (url) {
+					if (url.indexOf('http') > -1) {
+						// #ifdef H5
+						window.location.href = url
+						// #endif
+					} else {
+						window.location.href = 'baidu.com'
+						// uni.navigateTo({
+						// 	url: url
+						// })
+					}
+				}
+
 			}
 		},
 
@@ -347,120 +225,9 @@
 </script>
 
 <style lang="scss">
-	$paddingJg:40rpx;
-
 	page,
 	.indexBox {
 		height: 0;
 		min-height: 100%;
 	}
-
-	.follow {
-		z-index: 9999;
-		font-size: $font-base;
-		color: #FFFFFF;
-		padding: 20rpx 30rpx;
-		line-height: 1;
-		position: fixed;
-		bottom: 0;
-		/* #ifdef H5 */
-		bottom: 50px;
-		/* #endif */
-		left: 0;
-		right: 0;
-		text-align: center;
-		background-color: rgba($color: #0BBB62, $alpha: 0.75);
-
-		.followIcon {
-			width: 36rpx;
-			height: 36rpx;
-		}
-	}
-
-	// 弹窗引导页
-	.alertMap {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba($color: #000000, $alpha: 0.75);
-		text-align: center;
-		z-index: 9999999;
-
-		.postionbuttom {
-			position: absolute;
-			bottom: 20rpx;
-			left: 150rpx;
-			right: 150rpx;
-			background-color: $color-green;
-			border-radius: 99rpx;
-			color: #FFFFFF;
-			padding: 26rpx 0;
-
-		}
-
-		.alertMapBox {
-			height: 100%;
-			padding-top: 10rpx;
-			padding-bottom: 120rpx;
-		}
-
-		.alertImgMap {
-			height: 100%;
-		}
-	}
-
-	/deep/ .itemTitleBox {
-		padding: 30rpx $paddingJg;
-
-		.itemTitle {
-			font-size: 32rpx;
-
-		}
-
-		.itemIcon {
-			width: 20rpx;
-			margin-left: 10rpx;
-		}
-
-		.tager {
-			font-size: 24rpx;
-			font-weight: 400;
-		}
-	}
-
-	.container {
-		line-height: 1;
-		font-weight: bold;
-	}
-
-
-	.topIconBox {
-		padding: 0 $paddingJg;
-		position: relative;
-
-		.topIconNum {
-			position: absolute;
-			top: -10rpx;
-			right: 20rpx;
-			font-size: $font-sm;
-			color: #FFFFFF;
-			min-width: 30rpx;
-			min-height: 30rpx;
-			border-radius: 100rpx;
-			background-color: $color-red;
-			padding: 5rpx;
-			justify-content: center;
-		}
-
-		.topIcon {
-			width: 45rpx;
-			height: 45rpx;
-		}
-	}
-
-	.greenText {
-		color: $color-green;
-	}
 </style>