liveShop/pages/index/index.vue

<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view style="width: 750rpx;">
			<official-account></official-account>
		</view>
		<!-- #endif -->
		<!-- 兼容小程序搜索 -->
		<!-- #ifdef MP -->
		<navigator url="/pages/product/search">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input disabled placeholder="请输入搜索内容" /></view>
				</view>
			</view>
		</navigator>
		<!-- #endif -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="carousel-box">
				<swiper class="carousel" autoplay="true" duration="400" interval="5000" style="height: 312rpx;">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
						@click="nav(item)">
						<image :src="item.pic" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 新手教程 -->
		<view class="award-box" @click="navTo('/pages/index/study')">
			<image src="../../static/img/study.png" mode=""></image>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="navTo('/pages/category/category')">
				<image src="https://zhibo.liuniu946.com/img/cate003.png"></image>
				<text>全部分类</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/recommend/hotgoods')">
				<image src="https://zhibo.liuniu946.com/img/cate001.png"></image>
				<text>热销产品</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/freeShop/apply')">
				<image src="https://zhibo.liuniu946.com/img/cate004.png"></image>
				<text>免费网店</text>
			</view>
			<view class="cate-item" @click="navTo('/pages/user/share')">
				<image src="https://zhibo.liuniu946.com/img/cate002.png"></image>
				<text>邀请好友</text>
			</view>
		</view>
		<!-- 正价商品 -->
		<view class="recommend-box">
			<view class="f-header">
				<view class="f-left-icon">为你推荐</view>
				<view class="tit-box"><text class="tit">超级好物 立即抢购</text></view>
				<view @click="navTo('/pages/recommend/recommend')"><text class="iconfont iconenter">更多</text></view>
			</view>
			<view class="guess-section">
				<view v-for="(item, index) in commgoods" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="info-wrapper">
						<text class="title">{{ item.store_name }}</text>
						<view class="price-box">
							<view class="price-left">
								<view class="ot_price">
									<text class="price-tip">￥</text>
									{{ item.ot_price }}
								</view>
								<view class="price">
									<text class="price-tip">￥</text>
									{{ item.price }}
								</view>
							</view>
							<view class="price-right">
								<!-- <view class="people">{{item.sales}}人购买</view> -->
								<view class="buyNow">马上购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热销产品 -->
		<view class="hotgoodsheader">
			<image src="https://zhibo.liuniu946.com/img/img001.png" mode=""></image>
		</view>
		<view class="hotgoods" style="padding-bottom: 0;">
			<view class="hotgoods-item" v-for="item in firstList" :key="item.id" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.image" mode="scaleToFill"></image>
				</view>
				<view class="title clamp margin-c-20">{{ item.store_name }}</view>
				<view class="hot-price">
					<view class="price">
						<text class="font-size-sm">￥</text>
						{{ item.price }}
					</view>
					<view class="cart-icon">
						<image src="https://zhibo.liuniu946.com/img/img002.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 热销推荐 -->
		<u-tabbar v-if="mystore" v-model="current" :list="tabbar" active-color="#FF0000"
			inactive-color="#f19c99"></u-tabbar>
		<u-tabbar v-else v-model="current" :list="tabbar1" active-color="#FF0000" inactive-color="#f19c99"></u-tabbar>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		tabbar,
		tabbar1
	} from '@/utils/tabbar.js';
	export default {
		// #ifdef MP
		onShareAppMessage: function(res) {
			console.log(res);
			console.log('是否从按钮进入');
			if (res.from === 'button' || res.from === 'menu') {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					path: path,
					imageUrl: 'http://zhibo.liuniu946.com/uploads/attach/2021/06/20210621/f24e2d3028d95db57944e1816ec464fc.jpg',
					title: this.userInfo.nickname + '邀请您进入台州智播项目'
				};
				return data;
			} else {
				console.log('else');
			}
		},
		// #endif
		data() {
			return {
				mystore: '',
				tabbar: tabbar,
				tabbar1: tabbar1,
				current: 0,
				carouselList: [],
				swiperLength: 0,
				swiperCurrent: 0,
				commgoods: [], // 为你推荐
				firstList: [], // 热销产品
				indexTop: 0, // 顶部缩进
				contentTop: 0, //	缩进
				pzTop: 0, // 拼中顶部缩进
				searchHeight: 0, //搜索框高度
				searchBoxHei: 0 // 高度
			};
		},
		onShow() {
			let value = uni.getStorageSync('mystore');
			console.log(value);
			// if (value) {
			this.mystore = value;
			console.log('首页this.mystore', this.mystore);
			// }
		},
		onLoad(option) {
			let res = uni.getSystemInfoSync();
			// #ifdef MP
			let menuButtonObject = wx.getMenuButtonBoundingClientRect();
			let navBarHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2; // 导航栏高度
			this.searchBoxHei = navBarHeight; // 搜索框外框高度
			this.searchHeight = menuButtonObject.height; // 搜索框高度
			// #endif
			this.indexTop = res.statusBarHeight + 40; // 状态栏高度
			this.contentTop = this.searchBoxHei + this.indexTop + 40; // content padding-top 高度
			this.pzTop = this.contentTop + 10; // 拼中top高度
			// console.log('--option--', option);
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
			if (option.scene) {
				// 存储邀请人
				this.spread = option.scene;
				uni.setStorageSync('spread_code', option.scene);
			}
			if (option.bingding) {
				this.bingding = option.bingding;
				uni.setStorageSync('bingding', option.bingding);
			}
			this.loadData();
		},

		computed: {
			...mapState(['userInfo', 'baseURL', 'hasLogin', 'urlFile'])
		},
		methods: {
			// openQr(){
			// 	uni.scanCode({
			// 		success(e){
			// 			uni.showModal({
			// 				title: '掃碼內容',
			// 				content: JSON.stringify(e),
			// 			});
			// 		}
			// 	})
			// },
			// 获取首页数据

			loadData() {
				loadIndexs({}).then(({
					data
				}) => {
					// uni.setStorageSync('mystore',userInfo.store_info.id);
					console.log('--store_switch---', data.store_switch);
					// if( data.store_switch == 0){
					// 	console.log('== 0');
					// 	uni.setStorageSync('mystore','');
					// 	const value = uni.getStorageSync('mystore');
					// 	this.mystore = value;
					// 	console.log('请求数据mystore', this.mystore);
					// } else {
					// 	console.log('== 1');
					// }
					this.carouselList = data.banner;
					this.commgoods = data.info.bastList; // 为你推荐
					this.firstList = data.info.firstList; // 热销产品
				});
			},
			//轮播图跳转页面
			nav(item) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '登录',
						content: '您未登录，是否马上登陆?',
						success: e => {
							if (e.confirm) {
								interceptor();
							}
						},
						fail: e => {
							console.log(e);
						}
					});
					return;
				}
				console.log(item);
				if (item.url != '/') {
					console.log('11111');
					uni.navigateTo({
						url: '/' + item.url,
						fail(error) {
							console.log(error);
						}
					});
				}
			},
			// 点击跳转页面
			navTo(url) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '登录',
						content: '您未登录，是否马上登陆?',
						success: e => {
							if (e.confirm) {
								interceptor();
							}
						},
						fail: e => {
							console.log(e);
						}
					});
					return;
				}
				uni.navigateTo({
					url,
					fail(error) {
						uni.switchTab({
							url
						});
					}
				});
			},

			// 监听导航栏输入框点击事件
			onNavigationBarSearchInputClicked(e) {
				//跳转到搜索页面
				this.clickSearch();
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},

			// 跳转普通商品
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				});
			},
			IndexShare() {
				let obj = this;
				let data = obj.onShareAppMessage();
				let item = {
					link: data.path, // 分享链接
					imgUrl: data.imgUrl,
					title: data.title
				};
				console.log('分享加', item);
				weixindata(item);
			}
		}
	};
</script>

<style lang="scss">
	/* #ifdef MP || APP-PLUS*/
	.input-box {
		padding: 25rpx;
		/* #ifdef APP-PLUS */
		margin-top: var(--status-bar-height);
		/* #endif */
		background-color: #fe8119;
		height: 44px;

		.iconsearch {
			font-size: 50rpx;
		}

		.input-content {
			border-radius: 99rpx;
			flex-grow: 1;
			padding: 5rpx 30rpx;
			// background-color: rgba(231, 231, 231, 0.7);
			background: #ffffff;

			.input {
				flex-grow: 1;

				input {
					font-size: $font-base;
				}
			}
		}

		.input-button {
			padding-left: 20rpx;
			font-size: $font-base;
			height: 100%;
		}
	}

	/* #endif */
	/* 头部 轮播图 */
	.carousel-section {
		background-color: #ffffff;
		width: 100%;
		height: 320rpx;

		.carousel-box {
			display: flex;
			justify-content: center;
			background-color: #fe8119;
			width: 100%;
			height: 260rpx;
			border-radius: 0 0 100rpx 100rpx;
		}

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.carousel {
			width: 92%;
			height: 240rpx;

			.carousel-item {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: $border-radius-sm;
			}
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx 22rpx;
		background-color: #ffffff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
			opacity: 0.7;
		}
	}

	// 为你推荐
	.recommend-box {
		background: linear-gradient(180deg, #ffffff, #f8f8f8);
		width: 100%;
		padding: 0 32rpx;
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 92rpx;
		padding: 6rpx 30rpx 8rpx;
		border-radius: 12rpx 12rpx 0 0;
		color: #ffffff;
		background: linear-gradient(180deg, #fd4646, #ff3535);

		.tit-box {
			@extend %font-title-box;
			font-size: 20rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}

		.iconenter {
			font-size: $font-lg + 2rpx;
			color: #ffffff;
		}

		.f-left-icon {
			font-size: 34rpx;
			border-right: 1rpx solid #ffffff;
			padding-right: 18rpx;
		}

		.iconfont {
			font-size: 26rpx;
		}
	}

	.guess-section {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 0 0 12rpx 12rpx;

		.guess-item {
			display: flex;
			width: 100%;
			padding: 24rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:nth-last-child(1) {
				border-bottom: none;
			}
		}

		.image-wrapper {
			width: 168rpx;
			height: 168rpx;
			border-radius: 3px;

			image {
				width: 168rpx;
				height: 168rpx;
				opacity: 1;
			}
		}

		.info-wrapper {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
		}

		.title {
			font-size: 32rpx;
			color: $font-color-dark;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.price-box {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;

			.price-left {
				display: flex;
				flex-direction: column;

				.price {
					margin-top: 8rpx;
					line-height: 30rpx;
					color: #ff0000;
					font-size: 40rpx;
					font-weight: 700;

					.price-tip {
						font-size: 28rpx;
					}
				}

				.ot_price {
					margin-top: 50rpx;
					line-height: 24rpx;
					font-size: 28rpx;
					margin-left: 4rpx;
					text-decoration: line-through;
					color: #aaaaaa;

					.price-tip {
						font-size: 22rpx;
					}
				}
			}

			.price-right {
				display: flex;
				flex-direction: column;

				.people {
					margin-top: 32rpx;
					font-weight: 700;
					color: #999999;
					font-size: 22rpx;
					text-align: right;
					margin-right: 4rpx;
				}

				.buyNow {
					margin-top: 68rpx;
					background: linear-gradient(180deg, #fd4646, #ff3535);
					border-radius: 26rpx;
					padding: 6rpx 18rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
	}

	// 热销产品
	.hotgoodsheader {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 32rpx 0 24rpx;

		image {
			width: 374rpx;
			height: 34rpx;
		}
	}

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

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

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

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

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

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

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

				.price {
					font-size: 40rpx;
					color: #ff0000;
					font-weight: 500;
				}

				.cart-icon {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}

	.award-box {
		width: 100%;
		padding: 24rpx 24rpx 0;
		background: #ffffff;

		image {
			width: 100%;
			height: 170rpx;
		}
	}
</style>