football/pages/index/index.vue

<template>
    <app-layout :haveBackground="haveBackground">
       <app-my-app></app-my-app>

        <view v-if="type === 'mall'">
            <app-index v-if="destroy"
                       :page-hide="pageHide"
                       :home-pages="homePages"
                       :scrollTop="scrollTop"
                       :is_storage="is_storage"
            ></app-index>
        </view>

        <view v-else-if="type === 'diy'">
            <app-diy-page v-if="destroy"
                          :page-hide="pageHide"
                          :home-pages="homePages"
                          :scrollTop="scrollTop"
                          :is_storage="is_storage"
            ></app-diy-page>
        </view>
<!-- 	<view class="course">
		<view class="custom-header-container">
			<view class="header-bg" :style="{height:headerBgHeight}">
				<image src="../../static/image/course/bg.png"/>
			</view>
			<view class="custom-header-status-bar" :style="{height:getStausBarHeight}"></view>
			<view class="custom-header-top-container">
				<view class="custom-header-title">课程报名</view>
			</view>
		</view>
		
		<view class="banner">
			<swiper class="swipe" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item :url="item.url" v-for="(item, index) in bannerImg" :key="index">
					<image :src="item.img" mode="aspectFill" :title="item.title" class="banner-img"/>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="course-list-icon">
			<view class="img">
				<image src="../../static/image/course/creation.png" mode=""></image>
			</view>
			<text>课程报名</text>
		</view>
		<view class="course-list">
			<view class="course-list-item" v-for="(item, index) in courseListData" :key="index">
				<view class="course-item-left">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="course-item-right">
					<view class="course-item-title">
						{{item.title}}
					</view>
					<view class="course-item-content">
						{{item.content}}
					</view>
					<view class="course-item-moneyAndBtn">
						<view class="moneyAndBtn-money">
						   <text>￥</text> 30.00
						</view>
						<view class="moneyAndBtn-btn" @click="navTo">
							立即报名
						</view>
					</view>
				</view>
			</view>
			<view class="placeholder-view">
				
			</view>
		</view>
	</view> -->
        <app-buy-prompt v-if="config.is_purchase_frame === `1`"></app-buy-prompt>
    </app-layout>
</template>

<script>
    import appIndex from '../../components/page-component/index/app-index.vue';
    import appDiyPage from '../../components/page-component/index/app-diy-page.vue';
    import appBuyPrompt from '../../components/page-component/app-buy-prompt/app-buy-prompt.vue';
    import {getStorageSync, setStorageSync} from '../../core/cache.js';
    import {mapGetters, mapState} from 'vuex';
    import appMyApp from '../../components/page-component/app-my-app/app-my-app.vue';

    let page_id = 0;

    export default {
        name: 'index',
        components: {
            'app-index': appIndex,
            'app-diy-page': appDiyPage,
            appBuyPrompt,
            appMyApp
        },
        data() {
            return {
                scrollTop: 0,
                homePages: [],
                type: '',
                is_storage: false,
                haveBackground: true,
                // newHomePages: [],
                destroy: true,
                // page_id: 152,
                pageHide: false,
				courseListData:[
					{
						img:'../../static/image/course/img1.png',
						title: '4-6岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../static/image/course/img2.png',
						title: '7-9岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../static/image/course/img3.png',
						title: '9-12岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
					{
						img:'../../static/image/course/img4.png',
						title: '12-15岁幼儿兴趣班',
						content: '适合4岁至6岁的小朋友学习开发运动潜力',
					},
				
				],
				bannerImg:[
					{img:'../../static/image/course/banner.png'}
				]
            }
        },
        onShow(e) {
            console.log('page onShow--->'); // 公众号文章进小程序无底部导航调试，请勿删除
            console.log(e);                 // 公众号文章进小程序无底部导航调试，请勿删除
            console.log('<---page onShow'); // 公众号文章进小程序无底部导航调试，请勿删除
            uni.hideNavigationBarLoading();
            // #ifdef MP-TOUTIAO
            this.destroy = true;
            // #endif
            this.pageHide = false;
        },
        onHide() {
            // #ifdef MP-TOUTIAO
            this.destroy = false;
            // #endif
            this.pageHide = true;
        },
        onLoad(options) {
            console.log('page onLoad--->'); // 公众号文章进小程序无底部导航调试，请勿删除
            console.log(options);           // 公众号文章进小程序无底部导航调试，请勿删除
            console.log('<---page onLoad'); // 公众号文章进小程序无底部导航调试，请勿删除
            if (typeof options.scene !== 'undefined') {
                if (options.scene === 'share') {
                    this.share(options);
                } else {
                    this.qrcode(options);
                }
            } else {
                this.$showLoading();
            }

            // #ifdef MP-ALIPAY
            let query = this.$store.state.page.query;
            if (query && typeof query.scene !== 'undefined') this.qrcode(query);
            // #endif


            if (typeof options.user_id !== 'undefined') {
                this.$store.dispatch('user/setTempParentId', options.user_id)
            }

            page_id = typeof options.page_id !== 'undefined' ? options.page_id : 0;
            // let index_data = getStorageSync('__index_data');
            //
            // if (index_data && page_id == 0) {
            //     this.is_storage = true;
            //     this.type = index_data.type;
            //     this.homePages = index_data.home_pages;
            // }
            this.loadData();
        },
        /* #ifdef MP_WEIXIN || MP_BAIDU */
        onPageScroll(e) {
            this.$store.dispatch('page/actionSetScrollTop', e.scrollTop);
        },
        /* #endif */
        methods: {
			navTo(){
				uni.navigateTo({
					url: '/pages/goods/goods'
				})
			},
            loadData() {
                let that = this;
                uni.showNavigationBarLoading();
                that.$request({
                    url: that.$api.index.index,
                    method: 'get',
                    data: {
                        page_id: page_id,
                        longitude: '',
                        latitude: '',
                    }
                }).then(response => {
                    uni.hideNavigationBarLoading();
                    this.$hideLoading();
                    let {code, data} = response;
                    if (code === 0) {
                        that.is_storage = false;
                        that.$popupAd.show = null;
                        that.homePages = data.home_pages;
                        if(that.homePages.navs && that.homePages.navs.length > 0) {
                            that.homePages.navs.forEach(function(row,inedx){
                                row.template.data.forEach(function(v,idx){
                                    if(v.id == 'background') {
                                        that.haveBackground = false;
                                        return false;
                                    }
                                })
                            })
                        }
                        that.type = data.type;
                        // if (page_id == 0) setStorageSync('__index_data', data);
                    } else {
                    }
                })
            },
            share(options) {
                if (typeof options.params !== 'undefined') {
                    let params = JSON.parse(options.params);
                    this.$jump({
                        url: params.path + '?' + this.$utils.objectToUrlParams(params),
                        open_type: 'navigate'
                    });
                }
            },
            qrcode(options) {
                this.$request({
                    url: this.$api.default.qrcode_parameter,
                    data: {
                        token: options.scene
                    }
                }).then(response => {
                    if (response.code === 0) {
                        this.$store.dispatch('page/actionSetQeury', null);
                        let {data, path} = response.data.detail;
                        let url = `/${path}`;
                        if (data) {
                            url += '?' + this.$utils.objectToUrlParams(data);
                            if (typeof data.user_id !== 'undefined') {
                                this.$store.dispatch('user/setTempParentId', data.user_id)
                            }
                        }
                        if (`/${path}` != '/pages/index/index') {
                            this.$jump({
                                url: url,
                                open_type: 'navigate'
                            });
                        }
                    }
                }).catch(() => {
                });
            }
        },
        onShareAppMessage() {
            let args = {
                path: '/pages/index/index',
                params: {}
            };
            if (page_id == 0) {
                args.title = this.mall.setting.share_title ? this.mall.setting.share_title : this.mall.name;
                args.imageUrl = this.mall.setting.share_pic
            } else {
                args.title = this.homePages.title;
                args.params.page_id = page_id;
            }
            return this.$shareAppMessage(args);
        },
        computed: {
            ...mapGetters('mallConfig', {
                tabBarNavs: 'getNavBar',
            }),
            ...mapState('mallConfig', {
                config: state => state.mall.setting,
                mall: state => state.mall,
            }),
			getStausBarHeight(){
				try {
					const res = uni.getSystemInfoSync();
					return res.statusBarHeight + 'px';
				} catch (err) {
					console.log(err)
				}
			},
			headerBgHeight(){
				try {
					const res = uni.getSystemInfoSync();
					return 120+44+res.statusBarHeight + 'px';
				} catch (err) {
					console.log(err)
				}
			}
        },
    };
</script>
<style lang="scss">
	.custom-header-container{
		width: 100%;
		top: 0;
		z-index: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		font-size: 26upx;
		background: transparent;
		.header-bg{
			width: 100%;
			position: absolute;
			overflow: hidden;
			z-index: 0;
			image{
				width: 100%;
				height: 230px;
			}
		}
		.custom-header-status-bar{
			width: 100%;
			top: 0;
			position: sticky;
			z-index: 100;
		}
		.custom-header-top-container{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 15upx;
			.custom-header-title{
				height: 44px;
				line-height: 44px;
				font-size: 36upx;
				font-weight:400;
				font-family:Source Han Sans CN;
				color: #FBF9F9;
				z-index: 1;
			}
		}
		.cu-bar{
			width: 100%;
			height: 55px;
		}
		.head-search{
			width: 100%;
			height: 60upx;
			.head-search-item{
				width: 690upx;
				height: 65upx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}	
	
	.banner{
		width: 94vw;
		height: auto;
		margin: 0 3vw;
		padding: 5vw 0;
		z-index: 1;
		.swipe {
			width: 100%;
			height: 42vw;
			/* background: #eee; */
			border-radius: 10px;
			overflow: hidden;
			z-index: 1;
			.banner-img{
				width: 100%;
				height: 100%;
			}
		}
	}
		
	.course-list-icon{
		width: 100%;
		height: 60upx;
		padding-left: 20upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 30upx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		.img{
			width: 29upx;
			height: 31upx;
			margin-right: 10upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		text{
			font-size:34upx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color:rgba(61,61,61,1);
		}
	}
	.placeholder-view{
		width: 100%;
		height: 100upx;
	}
	.course-list-item{
		width: 100%;
		height: 242upx;
		padding: 15upx;
		border-bottom: 1rpx solid #E5E5E5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.course-item-left{
		width: 251upx;
		height: 200upx;
		margin-right: 20upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.course-item-right{
		.course-item-title{
			width: 430upx;
			font-size:34upx;
			font-family:Source Han Sans CN;
			font-weight:500;
			color:rgba(61,61,61,1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.course-item-content{
			width: 430upx;
			height: 35upx;
			margin: 15upx 0 20upx 0;
			font-size:26upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(112,112,112,1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.course-item-moneyAndBtn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.moneyAndBtn-money{
				font-size:34upx;
				font-family:Source Han Sans CN;
				font-weight:500;
				color: #FF4800;
				text{
					font-size:34upx;
					font-family:Source Han Sans CN;
					font-weight:500;
					color: #FF4800;
					margin: 0 8upx;
				}
			}
			.moneyAndBtn-btn{
				font-size:34upx;
				font-family:Source Han Sans CN;
				font-weight:500;
				color: #fff;
				background: #F09A21;
				padding: 10upx 22upx;
				text-align: center;
				box-shadow: 0 4px 10px #999;
				border-radius: 8upx;
			}
		}
	}
</style>