172 lines
3.6 KiB
Vue
172 lines
3.6 KiB
Vue
<template>
|
|
<view class="home-container">
|
|
<view class="header-row">
|
|
<Header
|
|
:left-width="140"
|
|
@animation="handleHeaderAnimation"
|
|
>
|
|
<template #left>
|
|
<view class="logo-col">
|
|
<image
|
|
class="logo"
|
|
src="@/static/images/logo.png"
|
|
alt=""
|
|
/>
|
|
</view>
|
|
</template>
|
|
<template #default>
|
|
<view
|
|
class="search-col"
|
|
:style="searchShadow"
|
|
@tap="toSearch"
|
|
>
|
|
<uv-icon
|
|
name="search"
|
|
size="40rpx"
|
|
/>
|
|
<view class="search-input">
|
|
搜索商品
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</Header>
|
|
</view>
|
|
|
|
<Banner />
|
|
|
|
<!-- 宫格菜单 -->
|
|
<GridMenu />
|
|
|
|
<!-- 商品 -->
|
|
<template v-if="homeData">
|
|
<!-- 新品首发 -->
|
|
<NewProduct :products="homeData.firstList" />
|
|
|
|
<!-- 超值拼团 -->
|
|
<Group
|
|
v-if="false"
|
|
:products="homeData.firstList"
|
|
/>
|
|
|
|
<!-- 限时秒杀 -->
|
|
<Seckill
|
|
v-if="false"
|
|
:products="homeData.firstList"
|
|
/>
|
|
|
|
<!-- 砍价专区 -->
|
|
<Bargain
|
|
v-if="false"
|
|
:products="homeData.firstList"
|
|
/>
|
|
|
|
<!-- 热门直播 -->
|
|
<Live v-if="false" />
|
|
<Recommend />
|
|
</template>
|
|
<!-- h5 tabbar 底部 -->
|
|
<view class="h5-tabbar-height"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, unref } from 'vue'
|
|
import Header from "@/components/Header/index.vue"
|
|
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import { getBanner, getHomeData } from '@/api/market'
|
|
import { useMainStore } from '@/store/store'
|
|
import { useRouter } from "@/hooks/useRouter";
|
|
import Banner from './components/Banner/index.vue'
|
|
import Bargain from './components/Bargain/index.vue'
|
|
import GridMenu from './components/GridMenu/index.vue'
|
|
import Group from './components/Group/index.vue'
|
|
import Live from './components/Live/index.vue'
|
|
import NewProduct from './components/NewProduct/index.vue'
|
|
import Seckill from './components/Seckill/index.vue'
|
|
import Recommend from "./components/Recommend/index.vue";
|
|
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
|
|
import { useScroll } from "@/hooks/useScroll";
|
|
|
|
const main = useMainStore()
|
|
const {push} = useRouter()
|
|
const homeData = ref({})
|
|
const recommendRef = ref(null)
|
|
|
|
|
|
async function doGetHomeData() {
|
|
homeData.value = await getHomeData()
|
|
}
|
|
|
|
function toSearch() {
|
|
push({
|
|
url: '/pages/search/search'
|
|
})
|
|
}
|
|
|
|
const searchShadow = ref({
|
|
boxShadow: '0 0 0 #000'
|
|
})
|
|
|
|
function handleHeaderAnimation(numericalValue) {
|
|
searchShadow.value = {
|
|
boxShadow: `0 0 ${ numericalValue * 15 }px #EFEFEF inset`
|
|
}
|
|
}
|
|
|
|
/*const scrollTop = ref(0)
|
|
onPageScroll((e) => {
|
|
scrollTop.value = e.scrollTop
|
|
})*/
|
|
|
|
onLoad(() => {
|
|
main.init()
|
|
doGetHomeData()
|
|
})
|
|
|
|
useScroll()
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home-container {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.header-row {
|
|
.logo-col {
|
|
@include useFlex(flex-start, center);
|
|
width: 126rpx;
|
|
aspect-ratio: 126 / 50;
|
|
|
|
.logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.search-col {
|
|
@include useFlex(flex-start, center);
|
|
@include usePadding(30, 15);
|
|
width: 320rpx;
|
|
height: 60rpx;
|
|
border-radius: 50rpx;
|
|
background: $white-color;
|
|
margin-left: 50rpx;
|
|
|
|
.search-input {
|
|
margin-left: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.goods-row {
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
|
|
</style>
|