|
|
|
|
@ -27,11 +27,11 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="shop-info"> |
|
|
|
|
<image :src="shopDetail.logo" mode="aspectFill" class="logo"></image> |
|
|
|
|
<image :src="shopDetail.logoImage && shopDetail.logoImage[0].external_url" mode="aspectFill" class="logo"></image> |
|
|
|
|
<view class="info-box"> |
|
|
|
|
<view class="name">{{ shopDetail.name }}</view> |
|
|
|
|
<view class="name">{{ shopDetail.shop_name }}</view> |
|
|
|
|
<view class="intro"> |
|
|
|
|
<text class="label">{{ shopDetail.label }}</text> |
|
|
|
|
<text class="label">{{ shopDetail.shop_label }}</text> |
|
|
|
|
<view @click="toCer"> |
|
|
|
|
<image src="/static/cer.png" mode="aspectFill"></image> |
|
|
|
|
证书 |
|
|
|
|
@ -39,10 +39,10 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="shop-goods"> |
|
|
|
|
<view v-if="goodsCate.filter(v => v.name === firstCate)[0].children.length > 0" class="second-cate"> |
|
|
|
|
<view v-if="firstCate" class="shop-goods"> |
|
|
|
|
<view v-if="goodsCate.filter(v => v.category_id === firstCate)[0].children.length > 0" class="second-cate"> |
|
|
|
|
<scroll-view class="second-cate-tabs" scroll-x> |
|
|
|
|
<view v-for="(item, index) in goodsCate.filter(v => v.name === firstCate)[0].children" :key="index" class="cate-item" :class="{active: secondCate === item.name}" @click="secondCate = item.name"> |
|
|
|
|
<view v-for="(item, index) in goodsCate.filter(v => v.category_id === firstCate)[0].children" :key="index" class="cate-item" :class="{active: secondCate === item.category_id}" @click="secondCate = item.category_id"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
@ -50,7 +50,7 @@ |
|
|
|
|
<view class="goods-content"> |
|
|
|
|
<view class="first-cate"> |
|
|
|
|
<scroll-view class="first-cate-tabs" scroll-y> |
|
|
|
|
<view v-for="(item, index) in goodsCate" :key="index" class="cate-item" :class="{active: firstCate === item.name}" @click="firstCate = item.name;secondCate = '';"> |
|
|
|
|
<view v-for="(item, index) in goodsCate" :key="index" class="cate-item" :class="{active: firstCate === item.category_id}" @click="firstCate = item.category_id;secondCate = '';"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
@ -81,6 +81,9 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="toCart" @click="toCart"> |
|
|
|
|
<image :src="$picUrl+'/static/tabbar/cart.png'"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="toTop" v-if="isTop" @click="openScrollTo()"> |
|
|
|
|
<image :src="$picUrl+'/static/toTop.png?=1'"></image> |
|
|
|
|
</view> |
|
|
|
|
@ -91,6 +94,8 @@ |
|
|
|
|
<script> |
|
|
|
|
import styleColor from '../styleColor'; |
|
|
|
|
import * as Api from '@/api/shop/index'; |
|
|
|
|
import * as cstegory from '@/api/category' |
|
|
|
|
import * as GoodsApi from '@/api/goods' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
@ -113,8 +118,8 @@ |
|
|
|
|
{ id: 1, name: '电脑', children: [{ id: 1, name: '二级分类1'}, { id: 1, name: '二级分类2'}, { id: 1, name: '二级分类3'}, { id: 1, name: '二级分类4'}, { id: 1, name: '二级分类5'}]}, |
|
|
|
|
{ id: 1, name: '冰箱', children: [{ id: 1, name: '二级分类1'}, { id: 1, name: '二级分类2'}, { id: 1, name: '二级分类3'}, { id: 1, name: '二级分类4'}, { id: 1, name: '二级分类5'}]}, |
|
|
|
|
], |
|
|
|
|
firstCate: '手机', |
|
|
|
|
secondCate: '二级分类2', |
|
|
|
|
firstCate: '', |
|
|
|
|
secondCate: '', |
|
|
|
|
activeFilter: '综合', |
|
|
|
|
filterDirection: 'ASC', |
|
|
|
|
filterList: ['综合', '价格', '折扣', '销量'], |
|
|
|
|
@ -125,66 +130,66 @@ |
|
|
|
|
loading: false, |
|
|
|
|
finished: true, |
|
|
|
|
goods: [ |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pic: '', |
|
|
|
|
name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
price: 208.00, |
|
|
|
|
originPrice: 809, |
|
|
|
|
}, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// pic: '', |
|
|
|
|
// name: '小米耳机最新版小米耳机最新版', |
|
|
|
|
// price: 208.00, |
|
|
|
|
// originPrice: 809, |
|
|
|
|
// }, |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
@ -197,6 +202,16 @@ |
|
|
|
|
// return this.styleIndex ? (styleColor.shopNavBgColor[this.styleIndex - 1] || '#FFA3B2') : '#FFA3B2' |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
watch: { |
|
|
|
|
secondCate() { |
|
|
|
|
console.log(this.secondCate); |
|
|
|
|
this.goods = []; |
|
|
|
|
this.page = 1; |
|
|
|
|
this.loading = false; |
|
|
|
|
this.finished = false; |
|
|
|
|
this.getGoodsList(); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true |
|
|
|
|
this.isTop = false |
|
|
|
|
@ -207,6 +222,10 @@ |
|
|
|
|
onLoad({ id }) { |
|
|
|
|
this.id = id; |
|
|
|
|
this.getShopDetail() |
|
|
|
|
this.getGoodsTypeList(); |
|
|
|
|
}, |
|
|
|
|
onReachBottom() { |
|
|
|
|
this.getGoodsList(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
back() { |
|
|
|
|
@ -242,9 +261,57 @@ |
|
|
|
|
}) |
|
|
|
|
.then(result => { |
|
|
|
|
console.log(result); |
|
|
|
|
this.shopDetail = result.data.detail; |
|
|
|
|
}) |
|
|
|
|
.finally(() => this.loading = false) |
|
|
|
|
}, |
|
|
|
|
getGoodsTypeList() { |
|
|
|
|
const that = this; |
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
cstegory.list({ |
|
|
|
|
// merchantId: this.id |
|
|
|
|
}) |
|
|
|
|
.then(res => { |
|
|
|
|
// 合并新数据 |
|
|
|
|
console.log(res, '分类数据') |
|
|
|
|
that.goodsCate = res.data.list; |
|
|
|
|
that.firstCate = res.data.list[0].category_id; |
|
|
|
|
}) |
|
|
|
|
.catch(reject) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 获取商品列表 |
|
|
|
|
* @param {number} pageNo 页码 |
|
|
|
|
*/ |
|
|
|
|
getGoodsList() { |
|
|
|
|
if (this.loading || this.finished) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.loadTitle = ""; |
|
|
|
|
const param = { |
|
|
|
|
sortType: this.activeFilter, |
|
|
|
|
sortPrice: this.filterDirection === 'ASC' ? 1 : 0, |
|
|
|
|
categoryId: this.secondCate, |
|
|
|
|
// goodsName: app.options.search || '', |
|
|
|
|
page: this.page++, |
|
|
|
|
pageSize: 10 |
|
|
|
|
} |
|
|
|
|
GoodsApi.list(param) |
|
|
|
|
.then(result => { |
|
|
|
|
// 合并新数据 |
|
|
|
|
const data = result.data.list.data; |
|
|
|
|
console.log(data); |
|
|
|
|
this.goods = this.goods.concat(data); |
|
|
|
|
this.finished = data.length < 10; |
|
|
|
|
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多"; |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
toCart() { |
|
|
|
|
uni.switchTab({ |
|
|
|
|
url: '/pages/cart/index' |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -312,6 +379,8 @@ |
|
|
|
|
} |
|
|
|
|
.shop-info { |
|
|
|
|
display: flex; |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
padding: 0 24rpx; |
|
|
|
|
.logo { |
|
|
|
|
width: 90rpx; |
|
|
|
|
height: 90rpx; |
|
|
|
|
@ -319,7 +388,6 @@ |
|
|
|
|
margin-right: 10rpx; |
|
|
|
|
} |
|
|
|
|
.info-box { |
|
|
|
|
margin-top: 30rpx; |
|
|
|
|
.name { |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
@ -543,12 +611,31 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.toCart { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 170rpx; |
|
|
|
|
right: 26rpx; |
|
|
|
|
width: 80rpx; |
|
|
|
|
height: 80rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
opacity: 1; |
|
|
|
|
z-index: 999; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
background: #F34A40; |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 60%; |
|
|
|
|
height: 60%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.toTop { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 120rpx; |
|
|
|
|
right: 16rpx; |
|
|
|
|
width: 99rpx; |
|
|
|
|
height: 99rpx; |
|
|
|
|
bottom: 65rpx; |
|
|
|
|
right: 26rpx; |
|
|
|
|
width: 80rpx; |
|
|
|
|
height: 80rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
opacity: 1; |
|
|
|
|
z-index: 999; |
|
|
|
|
|
wangdong
7 months ago