mlh/pages/index/index.vue

<template>
	<view class="container">
		<!-- 背景 -->
		<view class="bg"><image src="../../static/img/index-bg.png" mode="widthFix"></image></view>
		<!-- 商品1 -->
		<view class="good-wrap">
			<view class="good-tit">
				<view class="good-tit-bg"><image src="../../static/img/index-title.png" mode=""></image></view>
				<view class="good-tit-font">美盟汇·盟主礼包</view>
			</view>
			<view class="item-wrap" v-for="(item, index) in productList">
				<view class="item-wrap-bg"><image src="../../static/img/index-product.png" mode=""></image></view>
				<view class="item-title">{{ item.store_name }}</view>
				<view class="item-img"><image :src="item.image" mode=""></image></view>
				<view class="item-btm">
					<view class="item-price flex">
						<view class="price-tit">特惠价</view>
						<view class="price-logo">¥</view>
						<view class="price-val">{{ item.price }}</view>
					</view>
					<view class="item-btn" @click="navToLevelDetailPage(item)">立刻购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import seckill from '../../components/seckill/seckill.vue';
import { getUserInfo } from '@/api/user.js';
import { upgrade } from '@/api/product.js';
import { interceptor } from '@/utils/loginUtils';
import { mapState } from 'vuex';
import weixinObj from '@/plugin/jweixin-module/index.js';
// #ifdef H5
import { weixindata, weixinlocation, shareLoad } from '@/utils/wxAuthorized';
// #endif

export default {
	components: {
		seckill
	},
	watch: {
		//自适应swiper高度
		checkid(newValue, oldValue) {
			let obj = this;
			if (newValue == 0) {
				let bHeight = Math.ceil(obj.bastList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
			if (newValue == 1) {
				let bHeight = Math.ceil(obj.goodsList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
			if (newValue == 2) {
				let bHeight = Math.ceil(obj.bastBanner.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
			}
		}
	},
	data() {
		return {
			productList: [], //常规商品
			shareShow: false, //分享海报
			pageProportion: 0, //保存页面基于750宽度的比例
			swiperHeight: 0,
			checkid: 0,
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			carouselList: [], //轮播列表
			page: 1,
			limit: 5,
			userServant: [
				{
					image: ''
				}
			], //用户推广服务
			actTime: new Date()
		};
	},
	computed: {
		...mapState(['loginInterceptor', 'baseURL']),
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onLoad: function(option) {
		// #ifndef MP
		if (option.spread) {
			// 存储其他邀请人
			uni.setStorageSync('spread', option.spread);
		}
		// #endif
		// #ifdef MP
		if (option.scene) {
			// 存储小程序邀请人
			uni.setStorage({
				key: 'spread_code',
				data: option.scene
			});
		}
		// #endif
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}
		weixinObj.hideAllNonBaseMenuItem();
		this.getProducts();
		if (this.userInfo) {
			weixinObj.showAllNonBaseMenuItem();
			console.log('fx');
			this.IndexShare();
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
	},
	methods: {
		IndexShare() {
			let obj = this;
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/#/pages/index/index' + '?';
			// 保存传值
			// for (let i in page.options) {
			// 	path += i + '=' + page.options[i] + '&';
			// }
			// console.log(obj.Path)
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				link: this.baseURL + path,
				title: this.userInfo.nickname + '邀请您进入科粉社',
				desc: '欢迎加入科粉社',
				imgUrl: this.baseURL + '/static/icon/logo.jpg'
			};
			console.log(data, '分享数据');
			shareLoad(data);
		},
		getProducts() {
			upgrade({ pages: 1, limit: 10 }).then(({ data }) => {
				this.productList = data;
			});
		},
		openSubscribe: function(e) {
			let page = e;
			// #ifndef MP
			uni.navigateTo({
				url: page
			});
			// #endif
			// #ifdef MP
			uni.showLoading({
				title: '正在加载'
			});
			openBargainSubscribe()
				.then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: page
					});
				})
				.catch(err => {
					uni.hideLoading();
				});
			// #endif
		},
		Mask() {
			this.MaskShow = false;
			this.shareShow = true;
			uni.setStorage({
				key: 'FirstEntry',
				data: true,
				success: function() {
					console.log(uni.getStorageSync('FirstEntry'), 'Mask');
				}
			});
		},
		Toshare() {
			if (this.userInfo == '') {
				getUserInfo({})
					.then(({ data }) => {
						this.setUserInfo(data);
						this.userInfo = data;
					})
					.catch(e => {});
			} else {
				this.shareShow = false;
				uni.navigateTo({
					url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
				});
			}
		},
		Tocancel() {
			this.shareShow = false;
		},
		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		// 请求载入数据
		async loadData() {
			loadIndexs({})
				.then(({ data }) => {
					let goods = data.info;
					this.carouselList = data.banner;
					this.swiperLength = this.carouselList.length;
					this.menusList = data.menus;
					this.goodsList = goods.firstList; //最新商品
					this.bastList = goods.bastList; //精品推荐
					this.bastBanner = data.benefit; //促销单品
					this.$set(this, 'couponArray', data.couponList); //保存卡包券

					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		navToGiftDetailPage(item) {
			let id = item.id;
			console.log(item);
			uni.navigateTo({
				url: '/pages/product/product?id=' + id + '&gtype=0'
			});
		},
		navToLevelDetailPage(item) {
			let id = item.id;
			console.log(item);
			uni.navigateTo({
				url: '/pages/product/product?id=' + id + '&gtype=1'
			});
		},
		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			if (item.wap_url.indexOf('http') > 0) {
				window.location.href = item.wap_url;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.wap_url
			});
		}
	}
};
</script>

<style lang="scss">
.Mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	image {
		width: 100%;
		height: 100vh;
	}
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 750rpx;
	height: 1654rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
page {
	background: #9e7457;
}
.m-t {
	margin-top: 16rpx;
}
/*公用边框样式*/
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	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;
	}
}

// 列表
.list-box-h {
	height: 1550rpx;
}
.good-wrap {
	padding-top: 898rpx;
	.good-tit {
		position: relative;
		.good-tit-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 86rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.good-tit-font {
			text-align: center;
			line-height: 86rpx;
			position: relative;
			z-index: 2;
			font-size: 36rpx;
			font-family: Source Han Serif SC;
			font-weight: 800;
			color: #fff4e5;
		}
	}
	.item-wrap {
		margin: 20rpx auto;
		width: 708rpx;
		height: 606rpx;
		border-radius: 12rpx;
		padding: 26rpx;
		position: relative;
		z-index: 2;
		.item-wrap-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 708rpx;
			height: 606rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-title {
			padding-top: 20rpx;
			text-align: center;
			position: relative;
			z-index: 2;
			font-size: 36rpx;
			font-family: Source Han Serif SC;
			font-weight: 600;
			color: #653600;
			text-shadow: 0px 2rpx 2rpx rgba(206, 173, 129, 0.75);
		}
		.item-img {
			position: relative;
			z-index: 2;
			margin-top: 20rpx;
			width: 665rpx;
			height: 339rpx;
			background: #f0d4ac;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 98%;
				height: 96%;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
			}
		}
		.item-btm {
			position: relative;
			z-index: 2;
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			// position: relative;
			.item-price {
				font-size: 27rpx;
				font-family: Source Han Serif SC;
				font-weight: bold;
				color: rgba(153, 0, 0, 1);
				justify-content: flex-start;
				align-items: flex-end;
				.price-tit {
					color: rgba(84, 50, 11, 1);
				}
				.price-logo {
					display: inline-block;
					padding: 0 5rpx 0 15rpx;
				}
				.price-val {
					font-size: 54rpx;
					position: relative;
					top: 8rpx;
				}
			}
			.item-btn {
				width: 154rpx;
				height: 50rpx;
				background: #910704;
				border-radius: 25rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
</style>