v1.0
This commit is contained in:
hupeng
516
pages/index/index.vue
Normal file
516
pages/index/index.vue
Normal file
@ -0,0 +1,516 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-sticky
|
||||
bg-color="#F5F5F5"
|
||||
offset-top="0"
|
||||
customNavHeight="0"
|
||||
>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:safeAreaInsetTop="true"
|
||||
height="0"
|
||||
bgColor="transparent"
|
||||
leftIcon=""
|
||||
/>
|
||||
<!-- #ifndef MP -->
|
||||
<blank size="10"></blank>
|
||||
<!-- #endif -->
|
||||
<view class="search">
|
||||
<view class="search-logo">
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/logo.png"
|
||||
alt=""
|
||||
mode="widthFix"
|
||||
>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="y-search"
|
||||
@click="$yrouter.navigateTo({ url: '/pages/search/search' })"
|
||||
>
|
||||
<view class="y-search-content">
|
||||
<uv-search
|
||||
placeholder="搜索商品"
|
||||
disabled
|
||||
bgColor="#fff"
|
||||
:showAction="false"
|
||||
></uv-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-action">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<blank size="5"></blank>
|
||||
</uv-sticky>
|
||||
|
||||
<blank size="10"></blank>
|
||||
<scroll-view>
|
||||
<container>
|
||||
|
||||
<view class="swiper">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
indicator-dots
|
||||
autoplay
|
||||
>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
class="image"
|
||||
src="@/static/images/banner.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
class="image"
|
||||
src="@/static/images/banner.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
class="image"
|
||||
src="@/static/images/banner.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!--
|
||||
<uv-swipe
|
||||
class="my-swipe"
|
||||
:autoplay="3000"
|
||||
indicator-color="white"
|
||||
:list="[
|
||||
'@/static/images/banner.png',
|
||||
'@/static/images/banner.png',
|
||||
'@/static/images/banner.png',
|
||||
]"
|
||||
> -->
|
||||
<!-- </uv-swipe> -->
|
||||
</view>
|
||||
</container>
|
||||
<blank size="
|
||||
15"></blank>
|
||||
|
||||
<container>
|
||||
<card>
|
||||
<view class="menu">
|
||||
<view
|
||||
class="menu-item"
|
||||
@tap="$yrouter.navigateTo({ url: '/pages/goodsList/goodsList' })"
|
||||
>
|
||||
<view class="menu-item-icon">
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/sp.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="menu-item-name">
|
||||
全部商品
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<view class="menu-item-icon">
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/pt.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="menu-item-name">
|
||||
|
||||
拼团专区
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<view class="menu-item-icon">
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/ms.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="menu-item-name">
|
||||
秒杀专区
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="menu-item"
|
||||
@tap="$toAuth()"
|
||||
>
|
||||
<view class="menu-item-icon">
|
||||
<img
|
||||
class="image"
|
||||
src="@/static/images/kj.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="menu-item-name">
|
||||
|
||||
砍价专区
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</card>
|
||||
</container>
|
||||
<blank size="15"></blank>
|
||||
|
||||
<activity
|
||||
title="新品首发"
|
||||
subtitle="超多人想要"
|
||||
more="更多新品"
|
||||
@moreClick="$yrouter.navigateTo({ url: '/pages/newGoods/newGoods' })"
|
||||
>
|
||||
<card class="goods-row">
|
||||
<uv-grid
|
||||
:border="false"
|
||||
:col="3"
|
||||
:gutter="0"
|
||||
v-if="homeData.firstList"
|
||||
>
|
||||
<uv-grid-item
|
||||
v-for="(item, index) in homeData.firstList"
|
||||
:key="index"
|
||||
>
|
||||
<first-goods
|
||||
:data="item"
|
||||
card
|
||||
surplus="200"
|
||||
/>
|
||||
</uv-grid-item>
|
||||
</uv-grid>
|
||||
</card>
|
||||
|
||||
</activity>
|
||||
<blank size="15"></blank>
|
||||
|
||||
<!-- <activity
|
||||
title="超值拼团"
|
||||
subtitle="拼着买更划算"
|
||||
more="查看更多"
|
||||
>
|
||||
<scroll-view
|
||||
@scroll="scroll"
|
||||
scroll-x="true"
|
||||
scroll-y="false"
|
||||
>
|
||||
<view class="scroll-view-H">
|
||||
<space>
|
||||
|
||||
<card width="290">
|
||||
<goods
|
||||
card
|
||||
interval="true"
|
||||
desc="3"
|
||||
showAction="true"
|
||||
>
|
||||
<template #action>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
立即拼团
|
||||
</uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
</card>
|
||||
|
||||
<card width="290">
|
||||
|
||||
<goods
|
||||
card
|
||||
interval="true"
|
||||
desc="3"
|
||||
showAction="true"
|
||||
>
|
||||
<template #action>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
立即拼团
|
||||
</uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
</card>
|
||||
<card width="290">
|
||||
|
||||
<goods
|
||||
card
|
||||
interval="true"
|
||||
desc="3"
|
||||
showAction="true"
|
||||
>
|
||||
<template #action>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
立即拼团
|
||||
</uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
</card>
|
||||
</space>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</activity>
|
||||
<blank size="15"></blank>
|
||||
|
||||
<activity
|
||||
title="限时秒杀"
|
||||
subtitle="13点场"
|
||||
more="查看更多"
|
||||
>
|
||||
<card class="goods-row">
|
||||
<uv-grid
|
||||
:border="false"
|
||||
:column-num="3"
|
||||
:gutter="0"
|
||||
>
|
||||
<uv-grid-item>
|
||||
<goods
|
||||
card
|
||||
surplus="200"
|
||||
priceMode="primary"
|
||||
/>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<goods
|
||||
card
|
||||
surplus="200"
|
||||
groupNum="200"
|
||||
priceMode="primary"
|
||||
/>
|
||||
</uv-grid-item>
|
||||
<uv-grid-item>
|
||||
<goods
|
||||
card
|
||||
surplus="200"
|
||||
priceMode="primary"
|
||||
/>
|
||||
</uv-grid-item>
|
||||
</uv-grid>
|
||||
</card>
|
||||
</activity>
|
||||
<blank size="15"></blank>
|
||||
|
||||
<activity
|
||||
title="砍价专区"
|
||||
more="查看更多"
|
||||
>
|
||||
<space
|
||||
direction="vertical"
|
||||
fill
|
||||
>
|
||||
<card>
|
||||
<goods
|
||||
interval="true"
|
||||
desc="3"
|
||||
showAction="true"
|
||||
list
|
||||
>
|
||||
<template #action>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
立即拼团
|
||||
</uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
</card>
|
||||
<card>
|
||||
<goods
|
||||
card
|
||||
interval="true"
|
||||
desc="3"
|
||||
showAction="true"
|
||||
list
|
||||
>
|
||||
<template #action>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
>
|
||||
立即拼团
|
||||
</uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
</card>
|
||||
</space>
|
||||
</activity>
|
||||
<blank size="15"></blank> -->
|
||||
|
||||
<!-- <activity
|
||||
title="热门直播"
|
||||
more="查看更多"
|
||||
>
|
||||
|
||||
</activity> -->
|
||||
</scroll-view>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import {
|
||||
getBanner,
|
||||
getHomeData
|
||||
} from '@/api/market'
|
||||
import { useMainStore } from '@/store/store'
|
||||
const main = useMainStore()
|
||||
|
||||
const homeData = ref({})
|
||||
console.log("--> % homeData:\n", homeData.value)
|
||||
|
||||
const handleGetBanner = async () => {
|
||||
|
||||
const banner = await getBanner()
|
||||
if (banner) {
|
||||
bannerData.value = banner
|
||||
}
|
||||
|
||||
}
|
||||
const handleGetHomeData = async () => {
|
||||
const home = await getHomeData()
|
||||
console.log("--> % handleGetHomeData % home:\n", home)
|
||||
if (home) {
|
||||
homeData.value = home
|
||||
console.log("--> % handleGetHomeData % homeData.value:\n", homeData.value.firstList)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
handleGetBanner()
|
||||
handleGetHomeData()
|
||||
|
||||
const navigatorToSearch = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
main.init()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.search {
|
||||
margin-top: 5rpx;
|
||||
padding: 0 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.y-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.y-search-content {
|
||||
width: 320rpx;
|
||||
height: 60rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 35rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 126rpx;
|
||||
|
||||
.image {
|
||||
width: 126rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
width: 126rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 63px;
|
||||
height: 25px;
|
||||
|
||||
.image {
|
||||
width: 63px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 144rpx;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin-top: 18rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-row {
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user