home.vue

<template>
	<skeleton
		:loading="loading"
		:avatarSize="skeleton1.avatarSize"
		:row="skeleton1.row"
		:showTitle="skeleton1.showTitle"
		:imgTitle='skeleton1.imgTitle'
		:categoryRow= 'skeleton1.categoryRow'
		:flexType='skeleton1.flexType'
		:categorySize='skeleton1.categorySize'
		:avatarShape='skeleton1.avatarShape'
		:titleWidth='skeleton1.titleWidth'
	>
		<view class="homeContent" style="padding: 100rpx 0 110rpx;background-color: #f8f8f8;">
			<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin" :ref="item.name"></component>
			<BottomBar />
			<uni-popup ref="popup" type="center" :maskClick="true">
				<view class='coupon_dialog'>
					<img class='coupon_dialog_img' src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/global/coupon_dialog.png">
					<view class="coupon_dialog_btn" @click="receive_coupon">立即领取</view>
				</view>
			</uni-popup>
		</view>
	</skeleton>
</template>

<script>
	import SearchBar from './components/searchbar.vue';
	import Navigation from './components/navigation.vue';
	import Slide from './components/slide.vue';
	import MainTitle from './components/maintitle.vue';
	import GoodsList from './components/goodslist.vue';
	import FunctionMenu from './components/functionmenu.vue';
	import Promotion from './components/promotion.vue';
	import HotRecommd from './components/hotrecommd.vue';
	import CustomStyle from './components/custowstyle.vue';
	import MultImage from './components/multimage.vue';
	import BottomBar from "@/components/BottomBar/BottomBar.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import Skeleton from '@/components/J-skeleton/J-skeleton.vue';
	export default {
		data() {
			return {
				data: [],
				isLogin: 0,
				fixFlag: false,
				loading: true,
				skeleton1 : {
				  avatarSize: '160rpx',
				  row: 2,
				  showTitle: true,
					imgTitle: true,
					flexType: 'space-between',
					categoryRow: 4,
					categorySize: '110rpx',
					avatarShape: 'square',
					titleWidth: '100%'
				},
				COUPON_ID: '185' //优惠券ID
			}
		},
		onLoad() {
			this.loading = true;
			this.getData();
			// uni.showLoading({
			//   title: '加载中'
			// });
			// #ifdef H5
			//默认请求微信分享
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({titie: this.$getNavigationBarTitle()});
			}
			this.postData();
			// #endif
		},
		onPageScroll() {
			const top = this.$refs.HotRecommd[0].$refs.fix.$el.getBoundingClientRect().top;
			if(top <= 50  && !this.fixFlag) {
				this.fixFlag = true;
				this.$refs.HotRecommd[0].fixFlag = true;
			} else if(top > 50  && this.fixFlag) {
				this.fixFlag = false;
				this.$refs.HotRecommd[0].fixFlag = false;
			}
		},
		methods: {
			getData() {
				uni.request({
					url: '/uni/api/index/style_info',
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if(res && res.data && res.data.code === 0){
							this.data = res.data.data;
							this.isLogin = res.data.login_flg;
							// uni.hideLoading();
							this.loading = false;
							// 获取是否领取优惠券
							if(res.data.login_flg === 1){
								this.get_coupon(res.data.reg_time);
							}
						}else{
							uni.showToast({
								title: '获取数据失败，请重试~',
								duration: 2000,
								icon: 'none'
							});
						}	
					},
					fail: () => {
						uni.showToast({
						    title: '获取数据失败，请重试~',
						    duration: 2000,
								icon: 'none'
						});
					}
				});
			},
			receive_coupon(){
				const { origin } = location;
				this.$jump(`${origin}/mobile/index.php?app=coupon&act=view&id=${this.COUPON_ID}`);
				this.$refs.popup.close();
			},
			// 向小程序发送数据
			postData(){
				jWeixin.miniProgram.getEnv(function (res) {
					//获取当前环境
					if(res.miniprogram){ 
						// this.$wechat.postData('谛宝多多商城-首页');
						const postData = {
							link: window.location.href,
							title: '谛宝多多商城-首页'
						}
						jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) });
					}
				});
			},
			get_coupon(reg_time){
				// 打开广告弹窗
				const timestamp = new Date('2020/05/19 00:00:00').getTime() / 1000;
				const end_timestamp = new Date('2020/06/18 23:59:59').getTime() / 1000;
				uni.request({
					url: '/uni/api/coupon/GetCoupon',
					method: 'GET',
					data:{
						coupon_id: this.COUPON_ID
					},
					dataType: 'json',
					success: (res) => {
						const {code, data} = res.data;
						if(code === 0 && !data){
							if(reg_time > timestamp && reg_time < end_timestamp){
								// this.$refs.popup.open();
							}
						}
					}
				})
			}
		},
		components: {
			BottomBar,
			SearchBar,
			Navigation,
			Slide,
			MainTitle,
			GoodsList,
			FunctionMenu,
			Promotion,
			HotRecommd,
			CustomStyle,
			MultImage,
			uniPopup,
			Skeleton
		}
	}
</script>

<style lang="scss" scoped>
	.homeContent{
		padding: 100rpx 0 110rpx;
		background-color: #f8f8f8;
	}
	.coupon_dialog{
		width: 600rpx;
		height: 786rpx;
		position: relative;
		.coupon_dialog_img{
			width: 100%;
		}
		.coupon_dialog_btn{
			position: absolute;
			bottom: 125rpx;
			left: 50%;
			width: 520rpx;
			height: 84rpx;
			line-height: 84rpx;
			margin-left: -260rpx;
			background-color: #3E322B;
			font-size: 30rpx;
			font-family: PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			color: rgba(255,255,255,1);
			text-align: center;
			border-radius: 84rpx;
		}
	}
</style>