yihuo/pages/index/index.vue

<template>
    <page :nav="false" ref="pageRef">
        <view
            class="pagae-nav"
            :style="{
                paddingTop: statusBarHeight + 'px',
                background: headerBg
            }"
        >
            <view class="nav-title">
                <image
                    class="nav-logo"
                    v-show="scrollTop > 0"
                    mode="widthFix"
                    :src="ossurl.logoBlack"
                />
                <image
                    class="nav-logo"
                    v-show="scrollTop == 0"
                    mode="widthFix"
                    :src="ossurl.logoWhite"
                />
            </view>
        </view>

        <view class="operation">
            <view
                class="searchTab"
                :style="{
                    top: statusBarHeight + 40 + 'px'
                }"
            >
                <view class="searchInput">
                    <input
                        type="text"
                        confirm-type="search"
                        placeholder="搜索你感兴趣的～"
                        v-model.trim="searchForm.keyword"
                        placeholder-style="font-size:12px;"
                        @confirm="search()"
                    />
						<view class="inputSubmit fx-c-c" @click="search()">
							<image src="https://file.supermarts.cn/file/yi_huo_man_yu/images/index/i3.png" style="width: 48rpx;" mode="widthFix">
							</image>
						</view>
                </view>
                <view class="messageBtn" @click="showKefu">
                    <image :src="ossurl.home.message" />
                </view>
            </view>
            <view class="moli-wrapper">
				<view class="headerSection" :style="'background:url(' + ossurl.home.headbj + ')no-repeat'">
					
				</view>
            </view>
        </view>
		
		<view class="p30 header">
			<view class="head fx-c-c">
				<view class="banner">
					<image :src="ossurl.home.banner" style="width: 100%;" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="tab fx-c-s" :style="'background: url(' + ossurl.home.tabTypebj + ')no-repeat'">
				<view class="item" v-for="(item,index) in tabList.slice(0,4)" :key="index" @click="gotoRoute(item)">
					<image :src="item.img" style="width:96rpx;" mode="widthFix" />
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		
		<view class="mall p30">
			<image :src="ossurl.home.typeTop" style="width: 100%;" mode="widthFix">
			<view class="section">
				<scroll-view scroll-x="true" class="nav" scroll-left="0" :scroll-with-animation="true">
					<view class="imgAll" :style="{width: 750 + 'rpx'}">
						<image @click="changeworksId('')" :src="ossurl.home.type1" style="width: 324rpx;" mode="widthFix">
						<!-- <image @click="changeworksId('')" :src="ossurl.home.type2" style="width: 118rpx;" mode="widthFix"> -->
						<image @click="changeworksId(4)" :src="ossurl.home.type3" style="width: 118rpx;" mode="widthFix">
						<image @click="changeworksId(6)" :src="ossurl.home.type4" style="width: 118rpx;" mode="widthFix">
					</view>
				</scroll-view>
			</view>
		</view>
		
        <view style="margin: 20rpx 7px 0" v-if="tableData" class="flex-wrap">
            <goods-cell
                v-for="(item, index) in tableData"
                :key="index"
                :data="item"
                @click="showDetail"
            ></goods-cell>
        </view>
    </page>
</template>

<script>
    import goodsCell from '@/components/goods-cell'
    import ossurl from '@/utils/ossurl'
    import indexBanner from './components/indexBanner'
    export default {
        components: { goodsCell, indexBanner },
        data() {
            return {
                ossurl,
                luckGoodsList: [],
                tableData: [],
                requesing: false,
                requestTime: null,
                scrollTop: 0,
                ipList: [],
                searchForm: {
                    worksId: '',
                    current: 1,
                    size: 15,
                    keyword: ''
                }
            }
        },
        computed: {
            user() {
                return this.$store.state.userInfo
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            bottomHeight() {
                let systemInfo = this.$store.state.systemInfo
                if (!systemInfo) return 64 - 12
                let height = systemInfo.screenHeight - systemInfo.safeArea.bottom
                if (height > 10) {
                    return 64 + 10 - 12
                }
                return 64 - 12
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },

            tabList() {
				let arr = this.$store.state.pageConfig['index_icon'].components[0].elements;
				for (let i in arr) {
					if(arr[i].title == '领福利') {
						arr[i].img = this.ossurl.home.tab1;
					}else if(arr[i].title == '开宝箱') {
						arr[i].img = this.ossurl.home.tab2;
					}else if(arr[i].title == '攻略') {
						arr[i].img = this.ossurl.home.tab3;
					}else if(arr[i].title == '邀请好友') {
						arr[i].img = this.ossurl.home.tab4;
					}
				}
                return arr
            },
            bannerList() {
                return this.$store.state.pageConfig['index_banner'].components[0].elements
            },
            hide() {
                return !this.$store.state.hide
            }
        },
        mounted() {
            // this.getData()
        },
        onShow() {
            this.getData()
        },
        onShareAppMessage(res) {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力',
                path: '/pages/award/index'
            }
        },
        onShareTimeline() {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力'
            }
        },
        onReady() {
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#000000'
            })
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
            if (this.scrollTop > 0) {
                uni.setNavigationBarColor({
                    frontColor: '#000000',
                    backgroundColor: '#ffffff'
                })
            } else {
                uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#000000'
                })
            }
        },
        onPullDownRefresh() {
            this.search()
        },
        onReachBottom() {
            let allData = this.tableData
            if (allData.length > 0 && allData.length % this.searchForm.size === 0) {
                this.searchForm.current += 1
				// 首页隐藏
                // this.search(true)
            }
        },
        methods: {
            showKefu() {
                this.$common.showKefu()
            },
            changeworksId(id) {
                this.searchForm.worksId = id
                this.search()
            },
            async getData() {
                this.search()
                const ipres = await this.$service.award.ipList()
                if (ipres) {
                    this.ipList = [
                        {
                            name: '所有IP',
                            id: '',
                            cover: ossurl.home.allIp
                        },
                        ...ipres
                    ]
                }
            },
            async search(append) {
                if (!append) {
                    this.searchForm.current = 1
                }
                if (this.requesing) return
                this.requesing = true
                const res = await this.$service.mall.list(
                    {
                        ...this.searchForm,
                        categoryId: '',
                        sellType: ''
                    },
                    true
                )
                if (append) {
                    this.tableData = [...this.tableData, ...res]
                } else {
                    this.tableData = res
                }

                uni.stopPullDownRefresh()
                this.requesing = false
            },
            showDetail(item) {
                this.$router.push('product', {
                    id: item.id
                })
            },
            gotoRoute(item) {
                this.$common.showNext(item)
            },
            showLuckGoods(item) {
                // this.$router.switchTab('award')
                this.$router.push('award_detail', {
                    poolId: item.id
                })
                return
            },
            bannerChange(e) {
                let index = e.detail.current
            },
            test() {
                this.$message.showLoading()
            },
            getImg(index) {
                return this.ossurl['index_tab' + (index + 1)]
            }
        }
    }
</script>
<style lang="scss">
    .middle-banner-group {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        view {
            height: 240rpx !important;
        }
    }
</style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .scroll-wrapper {
        height: calc(100% - 64px);
    }
    .pagae-nav {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 100;
        transition: 0.2s;
        .back {
            position: absolute;
            left: 28rpx;
            width: 48rpx;
            height: 48rpx;
        }
    }
    .banner-bg {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 440rpx;
    }
    .nav-title {
        height: 80rpx;
        display: flex;
        align-items: center;
        padding-left: 30rpx;
        .nav-logo {
            width: 180rpx;
        }
    }
    .screen-swiper {
        height: 680rpx;
    }
    .operation {
        position: relative;
    }
    .middle-banner {
        height: 240rpx;
        width: 100%;
        border-radius: 16rpx;
    }

    .item {
        padding: 16rpx 20rpx 20rpx;
    }
    .tag {
        height: 26rpx;
        line-height: 26rpx;
        padding: 0 10rpx;
        background: #e7d5ff;
        border-radius: 13rpx;
        font-size: 20rpx;
    }
    .moli-swiper {
        height: calc(100vh - 180rpx);
    }
    .moli-wrapper {
        flex: 1;
        overflow: hidden;
		.headerSection{
			width: 100%; 
			height: 500rpx; 
			background-size: 100% 100%;
		}
    }
    .index_logan_img {
        width: 100%;
    }
	.mall{
		margin-top: 40rpx;
		.section{
			background: #fff;
			.nav{
				width: 680rpx;
				overflow: hidden;
				.imgAll{
					padding: 34rpx;
					width: 910rpx;
					image{
						display: inline-block;
						margin-right: 58rpx;
					}
				}
			}
			
		}
	}
	.header{
		margin-top: -240rpx;
		position: relative;
		z-index: 10;
		.tab {
			background-size: 100% 100%;
			height: 304rpx;
			padding: 0 56rpx;
		
			.item {
				text {
					display: block;
					margin-top: 26rpx;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}
		.head {
			background: #fff;
			width: 100%;
			border-radius: 30rpx 30rpx 0 0;
			padding: 24rpx;
			margin-top: 32rpx;
			box-sizing: border-box;
		
			.banner {
				width: 100%;
		
				image {
					max-width: 100%;
					display: inline-block;
					position: relative;
					z-index: 0;
				}
			}
		
		}
	}
	
    .indexTab {
        margin-top: -160rpx;
        padding: 10rpx;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 90;
    }
    .tabItem {
        min-width: 50%;

        padding: 10rpx;
    }
    .itemBox {
        padding: 28rpx 32rpx;
        background-color: #fff;
        border-radius: 18rpx;
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: 700;
        color: #000000;
        .tip {
            font-size: 24rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 300;
            color: #666666;
            line-height: 44rpx;
        }
    }
    .index_tab_img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
    }
    .ipList {
        overflow-x: auto;
        word-break: keep-all;
        white-space: nowrap;
        padding: 28rpx 20rpx;
        background: #ffffff;
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        .ipItem {
            display: inline-block;
            margin-right: 28rpx;
            .ipImg {
                width: 96rpx;
                height: 138rpx;
                border-radius: 12rpx;
                width: border-box;
                border: 0rpx solid #f0cd49;
                transition: 0.1s;
            }
            .ipTitle {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 300;
                color: rgba(0, 0, 0, 0.85);
                margin-top: 14rpx;
                transition: 0.1s;
                text-align: center;
            }
            &.active {
                .ipImg {
                    border: 6rpx solid #f0cd49;
                }
                .ipTitle {
                    color: #f0cd49;
                }
            }
        }
    }
    .searchTab {
        display: flex;
        padding: 16rpx 22rpx;
        position: absolute;
        z-index: 90;
        width: 100%;
        .avatar {
            .avatarImg {
                width: 64rpx;
                height: 64rpx;
                border: 2rpx solid #e47813;
                border-radius: 50%;
            }
        }
        .searchInput {
            height: 74rpx;
            background: #fff;
			border: 6rpx solid #000000;
            border-radius: 640rpx 640rpx 640rpx 640rpx;
            display: flex;
            flex: 1;
            align-items: center;
            padding: 0 10rpx 0 24rpx;
			.inputSubmit {
				width: 114rpx;
				height: 56rpx;
				background: #000000;
				border-radius: 582rpx 582rpx 582rpx 582rpx;
				border: 4rpx solid #000000;
			}
            input {
                flex: 1;
            }
        }
        .messageBtn {
            image {
                width: 64rpx;
                height: 64rpx;
            }
        }
    }
</style>