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.
332 lines
7.8 KiB
332 lines
7.8 KiB
2 years ago
|
<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>
|