|
|
|
|
@ -1,27 +1,90 @@
|
|
|
|
|
<template> |
|
|
|
|
<view class="quality-recommend"> |
|
|
|
|
<view class="title acea-row row-center-wrapper"> |
|
|
|
|
<view class="header"> |
|
|
|
|
<cu-custom :isBack="true" :isCenter="true" bgColor="''"> |
|
|
|
|
<block slot="backText"> |
|
|
|
|
<view class="backImg"> |
|
|
|
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
|
|
|
</view> |
|
|
|
|
</block> |
|
|
|
|
<block slot="content"> |
|
|
|
|
<view class="tab-title">热门榜单</view> |
|
|
|
|
</block> |
|
|
|
|
</cu-custom> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="banner-box"> |
|
|
|
|
<swiper class="swiper" circular @change="swiperChange" :autoplay="true"> |
|
|
|
|
<swiper-item v-for="(item, index) in banner" :key="index" class="swiper-item" @click="goBannerDetail"> |
|
|
|
|
<image class="swiper-image " :src="item" mode="aspectFill" lazy-load> |
|
|
|
|
</image> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
<!-- <view class="dots acea-row"> |
|
|
|
|
<view :class="'dot ' + (swiperCurrent === index ? 'dot-active' : '')" v-for="(dot, index) in banner.length" :key="index"></view> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="content-box"> |
|
|
|
|
<scroll-view scroll-x="true"> |
|
|
|
|
<view class="classify-box"> |
|
|
|
|
<view v-for="(item,index) in 4" :key="index" @click="changeClassify(index)"> |
|
|
|
|
<image :class="'classify-item ' + (classifyType == index?'on':'')" :src="item.listImage" mode=""></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
<view class="nav-box acea-row"> |
|
|
|
|
<view class="item on">全部</view> |
|
|
|
|
<view class="item acea-row row-middle"> |
|
|
|
|
<view class="">2022年10月</view> |
|
|
|
|
<view class="jiantou-down"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="notice-box acea-row row-middle"> |
|
|
|
|
<image src="@/static/images/laba.png" mode="aspectFill"></image> |
|
|
|
|
<view class="uni-notice-bar-box"> |
|
|
|
|
榜单每月30号统计，下月1号左右更新 |
|
|
|
|
<!-- <uni-notice-bar color="#999999" backgroundColor="#F5F6F8" scrollable="true" single="true" :speed="60" text="热花今将机支物极十争才线来理始"></uni-notice-bar> --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="list-box"> |
|
|
|
|
<view class="item"> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="title acea-row row-center-wrapper"> |
|
|
|
|
<view class="line"></view> |
|
|
|
|
<view class="name"> |
|
|
|
|
<text class="iconfont" :class="icon"></text>{{ name }} |
|
|
|
|
</view> |
|
|
|
|
<view class="line"></view> |
|
|
|
|
</view> |
|
|
|
|
<GoodList :good-list="goodsList" :is-sort="false"></GoodList> |
|
|
|
|
<GoodList :good-list="goodsList" :is-sort="false"></GoodList> --> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
|
|
|
import GoodList from "@/components/GoodList"; |
|
|
|
|
import { getGroomList } from "@/api/store"; |
|
|
|
|
import { getBanner, getHotList, getGroomList } from "@/api/store"; |
|
|
|
|
export default { |
|
|
|
|
name: "HotNewGoods", |
|
|
|
|
components: { |
|
|
|
|
UniNoticeBar, |
|
|
|
|
GoodList |
|
|
|
|
}, |
|
|
|
|
props: {}, |
|
|
|
|
data: function() { |
|
|
|
|
return { |
|
|
|
|
banner: [], |
|
|
|
|
classifyType: 0, |
|
|
|
|
imgUrls: [], |
|
|
|
|
goodsList: [], |
|
|
|
|
name: "", |
|
|
|
|
@ -45,8 +108,31 @@ export default {
|
|
|
|
|
mounted: function() { |
|
|
|
|
this.titleInfo(); |
|
|
|
|
this.getIndexGroomList(); |
|
|
|
|
getBanner(3).then(res => { |
|
|
|
|
this.$set(this,'banner',res.data.banner) |
|
|
|
|
}) |
|
|
|
|
this.getHotList(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goBannerDetail(item){ |
|
|
|
|
if (item.uniapp_url) { |
|
|
|
|
this.$yrouter.push(item.uniapp_url) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
swiperChange(e) { |
|
|
|
|
this.swiperCurrent = e.detail.current; |
|
|
|
|
}, |
|
|
|
|
getHotList() { |
|
|
|
|
let mouth = '2022-10' |
|
|
|
|
getHotList(mouth),then(res => { |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
changeClassify(i) { |
|
|
|
|
if(this.classifyType == i) return |
|
|
|
|
this.classifyType = i; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
titleInfo: function() { |
|
|
|
|
let type = this.$yroute.query.type; |
|
|
|
|
if (type === "1") { |
|
|
|
|
@ -82,3 +168,161 @@ export default {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
.header { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 20; |
|
|
|
|
width: 750rpx; |
|
|
|
|
.tab-title { |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
line-height: 42rpx; |
|
|
|
|
} |
|
|
|
|
.backImg { |
|
|
|
|
width: 88rpx; |
|
|
|
|
height: 62rpx; |
|
|
|
|
padding-left: 26rpx; |
|
|
|
|
image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.banner-box { |
|
|
|
|
width: 750rpx; |
|
|
|
|
height: 472rpx; |
|
|
|
|
.swiper { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
.swiper-item { |
|
|
|
|
.swiper-image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* .dots { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 82rpx; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
z-index: 1; |
|
|
|
|
.dot { |
|
|
|
|
width: 8rpx; |
|
|
|
|
height: 8rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
border-radius: 6rpx; |
|
|
|
|
margin: 0rpx 8rpx; |
|
|
|
|
transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
|
|
|
} |
|
|
|
|
.dot-active { |
|
|
|
|
width: 34rpx; |
|
|
|
|
background: #3A3A3C; |
|
|
|
|
transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
|
|
|
} |
|
|
|
|
} */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content-box { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100vw; |
|
|
|
|
height: calc(100vh - 412rpx); |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.1); |
|
|
|
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
|
|
|
scroll-view { |
|
|
|
|
position: relative; |
|
|
|
|
top: -60rpx; |
|
|
|
|
margin-bottom: -60rpx; |
|
|
|
|
height: 120rpx; |
|
|
|
|
overflow:hidden; |
|
|
|
|
white-space:nowrap; |
|
|
|
|
.classify-box { |
|
|
|
|
padding-left: 32rpx; |
|
|
|
|
padding-right: 12rpx; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
align-items: center; |
|
|
|
|
.classify-item { |
|
|
|
|
width: 176rpx; |
|
|
|
|
height: 96rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%); |
|
|
|
|
} |
|
|
|
|
.classify-item.on { |
|
|
|
|
width: 220rpx; |
|
|
|
|
height: 120upx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content-box .nav-box { |
|
|
|
|
padding: 20rpx 32rpx; |
|
|
|
|
.item { |
|
|
|
|
// width: 87px; |
|
|
|
|
height: 40rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
border: 2rpx solid #2EB5AE; |
|
|
|
|
padding: 0rpx 18rpx; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
line-height: 36rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
} |
|
|
|
|
.item.on { |
|
|
|
|
width: 124rpx; |
|
|
|
|
background: #2DB5AE; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.notice-box { |
|
|
|
|
margin: 0rpx 32rpx 18rpx; |
|
|
|
|
padding: 0rpx 16rpx; |
|
|
|
|
height: 38rpx; |
|
|
|
|
background: #F5F6F8; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
image { |
|
|
|
|
width: 26rpx; |
|
|
|
|
height: 26rpx; |
|
|
|
|
} |
|
|
|
|
.uni-notice-bar-box { |
|
|
|
|
padding-left: 8rpx; |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #999999; |
|
|
|
|
line-height: 26rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-box { |
|
|
|
|
height: calc(100% - 196rpx); |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
.item { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.jiantou-down { |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
border-top: 10rpx solid #2EB5AE; |
|
|
|
|
border-bottom: 0rpx; |
|
|
|
|
border-left: 6rpx solid transparent; |
|
|
|
|
border-right: 6rpx solid transparent; |
|
|
|
|
margin-left: 2rpx; |
|
|
|
|
} |
|
|
|
|
</style> |
