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.
331 lines
7.8 KiB
331 lines
7.8 KiB
<template> |
|
<view> |
|
<view class="header"> |
|
<cu-custom :isBack="true" bgColor="''"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
<view class="bg"> |
|
<image :src="brandInfo.backgroundImage" mode="aspectFill"></image> |
|
</view> |
|
<view :style="[{height:CustomBar + 'px'}]"></view> |
|
|
|
<view class="brand-info-box"> |
|
<view class="brand-img"> |
|
<image :src="brandInfo.pic" mode=""></image> |
|
</view> |
|
<view class="info-box"> |
|
<view class="name-info"> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="name">{{brandInfo.brandName}}</view> |
|
<view class="brand-tips acea-row"> |
|
<view class="tip">甄选品牌</view> |
|
</view> |
|
</view> |
|
<view class="tips">{{''||'1314款商品 | 5w+人已购'}}</view> |
|
</view> |
|
<view class="info line2">{{brandInfo.brandDescription}}</view> |
|
</view> |
|
</view> |
|
|
|
<view class="wrapper" :style="'min-height:calc(100vh - '+ topHeight +'px)'"> |
|
<view class="nav acea-row row-around"> |
|
<view class="item" @click="set_where(0)"> |
|
<view :class="'title ' + (stock === 0 && price === 0? 'active' : '')">综合</view> |
|
</view> |
|
<view class="item" @click="set_where(2)"> |
|
<view :class="'title ' + (stock === 2 ? 'active' : '')">销量</view> |
|
</view> |
|
<view class="item" @click="set_where(1)"> |
|
<view :class="'title acea-row row-middle ' + (stock === 0 && price ? 'active' : '')"> |
|
<view class="">价格</view> |
|
<view :class="'jiantou ' + (price?price === 1?'up':'down':'')"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<PromotionGood :benefit="productList" /> |
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
|
</view> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getBrandDetail, getProducts } from '@/api/store'; |
|
import PromotionGood from '@/components/PromotionGood'; |
|
import Loading from '@/components/Loading'; |
|
export default { |
|
components: { |
|
PromotionGood, |
|
Loading |
|
}, |
|
data() { |
|
return { |
|
CustomBar: this.CustomBar, |
|
topHeight: 0, |
|
id: 0, |
|
brandInfo: {}, |
|
where: { |
|
page: 1, |
|
limit: 10, |
|
bid: 0, |
|
priceOrder: '', |
|
salesOrder: '', |
|
}, |
|
stock: 0, |
|
price: 0, |
|
productList: [], |
|
loaded: false, |
|
loading: false, |
|
}; |
|
}, |
|
onLoad() { |
|
this.topHeight = this.CustomBar + 126; |
|
this.id = this._route.query.id; |
|
this.where.bid = this.id; |
|
this.getBrandInfo(this.id); |
|
this.getProductList(); |
|
}, |
|
methods: { |
|
getBrandInfo(id) { |
|
uni.showLoading({ |
|
title: '加载中...', |
|
mask: true |
|
}) |
|
getBrandDetail(id).then(res => { |
|
this.brandInfo = res.data; |
|
uni.hideLoading(); |
|
}).catch(err => { |
|
uni.hideLoading(); |
|
}) |
|
}, |
|
//点击事件处理 |
|
set_where(index) { |
|
switch (index) { |
|
case 0: |
|
// if(this.stock !== 0 || this.price !== 0) { |
|
this.price = 0; |
|
this.stock = 0; |
|
// } |
|
break |
|
case 1: |
|
if (this.price === 0) this.price = 1; |
|
else if (this.price === 1) this.price = 2; |
|
else if (this.price === 2) this.price = 1; |
|
this.stock = 0; |
|
break |
|
case 2: |
|
if (this.stock === 0) this.stock = 2; |
|
this.price = 0; |
|
break |
|
default: |
|
break |
|
} |
|
this.productList = []; |
|
this.where.page = 1; |
|
this.loaded = false |
|
this.getProductList(); |
|
}, |
|
//设置where条件 |
|
setWhere() { |
|
if (this.price === 0) { |
|
this.where.priceOrder = '' |
|
} else if (this.price === 1) { |
|
this.where.priceOrder = 'asc' |
|
} else if (this.price === 2) { |
|
this.where.priceOrder = 'desc' |
|
} |
|
if (this.stock === 0) { |
|
this.where.salesOrder = '' |
|
} else if (this.stock === 1) { |
|
this.where.salesOrder = 'asc' |
|
} else if (this.stock === 2) { |
|
this.where.salesOrder = 'desc' |
|
} |
|
// this.where.news = this.nows ? '1' : '0' |
|
}, |
|
getProductList() { |
|
if (this.loaded) return |
|
this.loading = true; |
|
this.setWhere(); |
|
getProducts(this.where).then(res => { |
|
this.productList.push.apply(this.productList, res.data); |
|
this.loaded = res.data.length < this.where.limit; //判断所有数据是否加载完成； |
|
console.log('this.loaded', this.loaded) |
|
this.loading = false; |
|
this.where.page = this.where.page + 1; |
|
}).catch(err => { |
|
// uni.hideLoading(); |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.header { |
|
position: fixed; |
|
top:0; |
|
left:0; |
|
right:0; |
|
z-index: 99; |
|
width: 750rpx; |
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.bg { |
|
width: 100vw; |
|
height: 508rpx; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
// background: linear-gradient(135deg, rgba(57, 211, 150, 1), rgba(27, 141, 204, 1)); |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.brand-info-box { |
|
padding: 62rpx 32rpx 32rpx; |
|
position: relative; |
|
.brand-img { |
|
position: absolute; |
|
top: 14rpx; |
|
left: 64rpx; |
|
width: 138rpx; |
|
height: 138rpx; |
|
border-radius: 16rpx; |
|
padding: 4rpx; |
|
background: linear-gradient(135deg, rgba(57, 211, 150, 1), rgba(27, 141, 204, 1)); |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
background: #F5F6F8; |
|
border-radius: 16rpx; |
|
} |
|
} |
|
.info-box { |
|
width: 686rpx; |
|
height: 158rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
|
border-radius: 16rpx; |
|
padding: 14rpx 32rpx; |
|
.name-info { |
|
padding-left: 152rpx; |
|
font-size: 34rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: bold; |
|
color: #3A3A3C; |
|
line-height: 50rpx; |
|
.brand-tips { |
|
.tip { |
|
width: 76rpx; |
|
height: 26rpx; |
|
background: #2DB5AE; |
|
border-radius: 6rpx; |
|
margin-right: 4rpx; |
|
font-size: 16rpx; |
|
font-family: PingFang SC; |
|
color: #FFFFFF; |
|
line-height: 26rpx; |
|
text-align: center; |
|
} |
|
} |
|
.tips { |
|
height: 28rpx; |
|
padding-top: 6rpx; |
|
font-size: 16rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 22rpx; |
|
} |
|
} |
|
.info { |
|
height: 56rpx; |
|
padding-top: 14rpx; |
|
font-size: 16rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #2DB5AE; |
|
line-height: 22rpx; |
|
} |
|
} |
|
} |
|
|
|
.wrapper { |
|
width: 750rpx; |
|
background: #FFFFFF; |
|
border-radius: 28rpx; |
|
.nav { |
|
width: 100vw; |
|
height: 104rpx; |
|
padding: 32rpx 32rpx 26rpx; |
|
.item { |
|
min-width: 66rpx; |
|
text-align: center; |
|
position: relative; |
|
.title { |
|
font-size: 26rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 38rpx; |
|
.jiantou { |
|
width: 0rpx; |
|
height: 0rpx; |
|
border-top: 0rpx solid transparent; |
|
border-left: 6rpx solid transparent; |
|
border-bottom: 10rpx solid transparent; |
|
border-right: 6rpx solid transparent; |
|
margin-left: 4rpx; |
|
} |
|
.up { |
|
border-top: 0rpx solid transparent; |
|
border-bottom: 10rpx solid #999999; |
|
} |
|
.down { |
|
border-top: 10rpx solid #999999; |
|
border-bottom: 0rpx solid transparent; |
|
} |
|
} |
|
.active { |
|
color: #3A3A3C; |
|
font-weight: 500; |
|
} |
|
.title::after { |
|
display: block; |
|
content: ''; |
|
width: 100%; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 0; |
|
transform:scaleX(0); |
|
transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease; |
|
} |
|
.active::after { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|