517 lines
11 KiB
Vue
517 lines
11 KiB
Vue
|
<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>
|