You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
422 lines
10 KiB
422 lines
10 KiB
<template> |
|
<view> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<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-wrapper" @change="handleChange(item)" :autoplay="true"> |
|
<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex"> |
|
<swiper-item @click="goBannerDetail(item)"> |
|
<!-- <view class="image">{{item}}</view> --> |
|
<!-- <image class="image" :src="item" class="slide-image" mode="aspectFill"/> --> |
|
<image class="image slide-image" :src="item.pic" mode="aspectFill"></image> |
|
</swiper-item> |
|
</block> |
|
</swiper> |
|
<view class="dots-box acea-row row-center"> |
|
<view class="dot" v-for="(item,index) in imgUrls" :key="index"> |
|
<view :class="(currents > index?'active2 ':'active ') + (currents == index?'on':(currents-1 == index?'on2':''))"></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="notice-box acea-row row-middle"> |
|
<view class="title"> |
|
<image src="../../../static/images/yanjie-logo.png" mode=""></image> |
|
</view> |
|
<view class="min-title acea-row row-between-wrapper"> |
|
<view class="">选品标准</view> |
|
<image src="../../../static/images/laba.png" mode="aspectFill"></image> |
|
</view> |
|
<view class="uni-notice-bar-box"> |
|
<uni-notice-bar color="#2DB5AE" backgroundColor="#F1F1F1" scrollable="true" single="true" :speed="60" text="热花今将机支物极十争才线来理始"></uni-notice-bar> |
|
</view> |
|
</view> |
|
|
|
<view class="brands-box"> |
|
<view class="title-box"> |
|
<view class="en-title">BRAND SELECTIONS</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="title">甄选品牌</view> |
|
<view class="more-box acea-row row-middle" @click.stop="goBrandAll"> |
|
<text>全部品牌</text> |
|
<view class="jiantou-right"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<scroll-view scroll-x="true" class="scroll-box"> |
|
<view class="scroll"> |
|
<view v-for="(item,index) in brandList" :key="index"> |
|
<image class="brand-img" :src="item.pic" mode="aspectFill" @click="goDetail(item)"></image> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
|
|
<view class="brands-box"> |
|
<view class="title-box"> |
|
<view class="en-title">NEW ARRIVALS</view> |
|
<view class="title">新品推荐</view> |
|
</view> |
|
|
|
<view class="newList"> |
|
<view class="item acea-row row-between" v-for="(item,index) in newList" :key="index" @click="goGoodsCon(item)"> |
|
<image class="img" :src="item.image" mode="aspectFill"></image> |
|
<view class="info-box"> |
|
<view class="name line1">{{item.storeName}}</view> |
|
<view class="tip line2">{{item.storeInfo}}</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="acea-row row-middle"> |
|
<image class="brand-img" src=""></image> |
|
<view class="brand-title one-t">小米有品</view> |
|
</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<text>查看详情</text> |
|
<view class="jiantou-right"></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
|
</view> |
|
|
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
import { getBrands, getProducts ,getBanner} from '@/api/store'; |
|
import Loading from '@/components/Loading'; |
|
export default { |
|
components: { |
|
UniNoticeBar, |
|
Loading |
|
}, |
|
data() { |
|
return { |
|
currents: 0, |
|
imgUrls: [], |
|
brandList: [], |
|
where: { |
|
page: 1, |
|
limit: 10, |
|
news: '1', |
|
priceOrder: '', |
|
salesOrder: '', |
|
}, |
|
newList: [], |
|
loaded: false, |
|
loading: false, |
|
}; |
|
}, |
|
onLoad() { |
|
this.getBrandList(); |
|
this.getNewProducts(); |
|
getBanner(1).then( |
|
res => { |
|
this.$set(this,'imgUrls',res.data.banner) |
|
}) |
|
|
|
}, |
|
onReachBottom() { |
|
!this.loading && this.getNewProducts(); |
|
}, |
|
methods: { |
|
goBrandAll(){ |
|
this.$yrouter.push({ |
|
path: '/pages/shop/brands/brandAll/index', |
|
}) |
|
}, |
|
handleChange(e) { |
|
this.currents = e.mp.detail.current; |
|
}, |
|
goBannerDetail(item){ |
|
if (item.uniapp_url) { |
|
this.$yrouter.push(item.uniapp_url) |
|
} |
|
}, |
|
goDetail(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/brands/brandDetail/index', |
|
query: { |
|
id: item.id, |
|
}, |
|
}) |
|
}, |
|
goGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.id, |
|
}, |
|
}) |
|
}, |
|
getBrandList() { |
|
uni.showLoading({ |
|
title: '加载中...' |
|
}) |
|
getBrands().then(res => { |
|
this.brandList = res.data; |
|
uni.hideLoading(); |
|
}) |
|
}, |
|
getNewProducts() { |
|
if (this.loaded) return |
|
this.loading = true; |
|
getProducts(this.where).then(res => { |
|
// uni.hideLoading(); |
|
this.newList.push.apply(this.newList, res.data); |
|
this.loaded = res.data.length < this.where.limit; //判断所有数据是否加载完成； |
|
this.loading = false; |
|
this.where.page = this.where.page + 1; |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.jiantou-right { |
|
width: 0; |
|
height: 0; |
|
border-top: 6rpx solid transparent; |
|
border-left: 10rpx solid #2DB5AE; |
|
border-bottom: 6rpx solid transparent; |
|
border-right: 0rpx solid transparent; |
|
margin-left: 8rpx; |
|
} |
|
|
|
.header { |
|
.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 { |
|
padding: 20rpx 32rpx; |
|
.swiper-wrapper { |
|
width: 686rpx; |
|
height: 398rpx; |
|
border-radius: 16rpx; |
|
.image { |
|
width: 686rpx; |
|
height: 398rpx; |
|
border-radius: 16rpx; |
|
} |
|
} |
|
.dots-box { |
|
padding-top: 26rpx; |
|
.dot { |
|
width: 92rpx; |
|
height: 4rpx; |
|
background: #CCEDEB; |
|
margin: 0rpx 6rpx; |
|
position: relative; |
|
.active { |
|
width: 0rpx; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
} |
|
.active2 { |
|
width: 0rpx; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
top: 0; |
|
left: 92rpx; |
|
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
} |
|
.active.on { |
|
width: 92rpx; |
|
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
} |
|
.active.on2 { |
|
width: 92rpx; |
|
left: 0; |
|
transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-webkit-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-moz-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
-o-transition: all .6s cubic-bezier(.18,.89,.17,.88); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.notice-box { |
|
margin: 0rpx 32rpx 48rpx; |
|
width: 686rpx; |
|
height: 62rpx; |
|
border-radius: 16rpx; |
|
border: 4rpx solid #2DB5AE; |
|
.title { |
|
padding-left: 16rpx; |
|
padding-right: 10rpx; |
|
height: 38rpx; |
|
border-right: 2rpx solid #2DB5AE; |
|
image { |
|
width: 124rpx; |
|
height: 30rpx; |
|
} |
|
} |
|
.min-title { |
|
width: 138rpx; |
|
padding-left: 12rpx; |
|
font-size: 24rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 32rpx; |
|
image { |
|
width: 26rpx; |
|
height: 26rpx; |
|
} |
|
} |
|
.uni-notice-bar-box { |
|
width: 388rpx; |
|
font-size: 24rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 500; |
|
color: #2DB5AE; |
|
line-height: 32rpx; |
|
} |
|
} |
|
|
|
.brands-box { |
|
padding-bottom: 32rpx; |
|
.title-box { |
|
padding: 0rpx 32rpx 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
.en-title { |
|
font-size: 20rpx; |
|
font-family: Futura; |
|
font-weight: 600; |
|
color: #999999; |
|
line-height: 22rpx; |
|
} |
|
.title { |
|
font-size: 50rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 68rpx; |
|
} |
|
.more-box { |
|
font-size: 20rpx; |
|
color: #2DB5AE; |
|
line-height: 26rpx; |
|
} |
|
} |
|
} |
|
|
|
.brands-box .scroll-box { |
|
width: 100%; |
|
overflow:hidden; |
|
white-space:nowrap; |
|
.scroll { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
padding-left: 32rpx; |
|
padding-bottom: 16rpx; |
|
.brand-img { |
|
width: 126rpx; |
|
height: 126rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
|
border-radius: 16rpx; |
|
margin-right: 8rpx; |
|
} |
|
view:last-child .brand-img { |
|
margin-right: 16rpx; |
|
} |
|
} |
|
} |
|
|
|
.newList { |
|
padding: 0rpx 32rpx; |
|
.item { |
|
width: 100%; |
|
height: 174rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
|
border-radius: 16rpx; |
|
margin-bottom: 20rpx; |
|
padding: 6rpx 24rpx 6rpx 6rpx; |
|
.img { |
|
width: 162rpx; |
|
height: 162rpx; |
|
border-radius: 16rpx; |
|
} |
|
.info-box { |
|
width: 472rpx; |
|
padding: 6rpx 0rpx; |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #2DB5AE; |
|
line-height: 26rpx; |
|
.name { |
|
font-size: 26rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
.tip { |
|
height: 58rpx; |
|
padding-top: 6rpx; |
|
margin-bottom: 18rpx; |
|
color: #999999; |
|
} |
|
.brand-img { |
|
width: 34rpx; |
|
height: 34rpx; |
|
border-radius: 50%; |
|
background-color: #CCEDEB; |
|
} |
|
.brand-title { |
|
width: 240rpx; |
|
padding-left: 10rpx; |
|
color: #999999; |
|
} |
|
} |
|
} |
|
} |
|
|
|
</style>
|
|
|