店铺列表和店铺详情分页功能添加
This commit is contained in:
@@ -28,7 +28,7 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<scroll-view scroll-y="true" class="scroll-view-right">
|
||||
<scroll-view scroll-y="true" class="scroll-view-right" @scrolltolower='lower'>
|
||||
<block v-if="goods.length > 0">
|
||||
<view class="goods-item" v-for="(item,index) in goods" :key="index"
|
||||
@click="onGoods(item.goods_id)">
|
||||
@@ -39,7 +39,7 @@
|
||||
<view class="price">{{item.price.price_min || '0'}}
|
||||
<view class="price-type">
|
||||
<text> DT积分</text>
|
||||
<text class="kucun"> 库存量:1222</text>
|
||||
<text class="kucun"> 库存量:{{item.stock}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -70,12 +70,14 @@
|
||||
category_id : '',
|
||||
classify : [],
|
||||
goods : [],
|
||||
pages : {}
|
||||
has_more:true,
|
||||
page:1,
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.ShopId = this.$Route.query.ShopId
|
||||
shopsDetail(this.ShopId).then(res => {
|
||||
shopsDetail(this.ShopId).then(res => {
|
||||
console.log(res);
|
||||
this.classify = [{
|
||||
category_id: '',
|
||||
name: '全部商品',
|
||||
@@ -89,15 +91,20 @@
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.has_more = true;
|
||||
this.page = 1;
|
||||
this.getGoods()
|
||||
},
|
||||
methods: {
|
||||
getGoods() {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
shopsGoods(this.ShopId, this.category_id).then(res => {
|
||||
this.goods = res.data
|
||||
this.pages = res.page
|
||||
shopsGoods(this.ShopId, this.category_id,this.page).then(res => {
|
||||
this.goods = this.goods.concat(res.data);
|
||||
this.has_more = res.page.has_more;
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
@@ -105,10 +112,20 @@
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
lower(){
|
||||
if(this.has_more){
|
||||
this.page = this.page + 1;
|
||||
this.has_more = true;
|
||||
this.getGoods()
|
||||
}
|
||||
},
|
||||
selectClassify(id) {
|
||||
if (id === this.category_id) return;
|
||||
this.category_id = id;
|
||||
this.page = 1;
|
||||
this.goods =[];
|
||||
this.has_more = true;
|
||||
this.getGoods()
|
||||
},
|
||||
search() {
|
||||
|
||||
@@ -4,31 +4,29 @@
|
||||
<u-sticky bgColor="#fff" zIndex="99">
|
||||
<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs" />
|
||||
</u-sticky>
|
||||
<!-- 店铺列表 -->
|
||||
<block v-if="shopsArr.length > 0">
|
||||
<view class="shop-List">
|
||||
<view class="shopInfo" v-for="(item,index) in shopsArr" :key="index" @click="toShop(item.shop_id)">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" :src="item.cover" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl nowrap">{{item.name}}</view>
|
||||
<view>店铺评分:<span>5.0</span></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo-title-right" >在售{{item.goods_count}}件<uni-icons class="icons" type="right" size="14" color="grey" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical pages-empty">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/list.png"
|
||||
textColor="#999"
|
||||
text="暂无相关店铺"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 店铺列表 -->
|
||||
<block v-if="shopsArr.length > 0">
|
||||
<view class="shop-List">
|
||||
<view class="shopInfo" v-for="(item,index) in shopsArr" :key="index" @click="toShop(item.shop_id)">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" :src="item.cover" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl nowrap">{{item.name}}</view>
|
||||
<view>店铺评分:<span>5.0</span></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo-title-right">在售{{item.goods_count}}件
|
||||
<uni-icons class="icons" type="right" size="14" color="grey" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical pages-empty">
|
||||
<u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999" text="暂无相关店铺">
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -39,130 +37,158 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopsArr : [],
|
||||
classify : [],
|
||||
shopsPage: {},
|
||||
shopsArr: [],
|
||||
classify: [],
|
||||
// shopsPage: {},
|
||||
page: 1,
|
||||
has_more: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getShops()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.has_more) {
|
||||
this.page = this.page + 1;
|
||||
this.getShops();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getShops() {
|
||||
shops(this.categoryId).then(res => {
|
||||
console.log(res)
|
||||
this.shopsArr = res.shops.data
|
||||
this.shopsPage= res.shops.page
|
||||
this.classify = [{
|
||||
name: "全部",
|
||||
category_id: ""
|
||||
}].concat(res.categories)
|
||||
shops(this.categoryId, this.page).then(res => {
|
||||
console.log(res)
|
||||
if (this.page == 1) {
|
||||
this.shopsArr = [];
|
||||
this.classify = [{
|
||||
name: "全部",
|
||||
category_id: ""
|
||||
}].concat(res.categories)
|
||||
}
|
||||
this.shopsArr = this.shopsArr.concat(res.shops.data);
|
||||
this.has_more = res.shops.page.has_more;
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
onTabs(e) {
|
||||
this.categoryId = e.category_id
|
||||
this.page = 1;
|
||||
this.has_more = true;
|
||||
this.getShops()
|
||||
},
|
||||
toShop(id) {
|
||||
this.$Router.push({
|
||||
name: 'ShopDetail',
|
||||
params: {
|
||||
ShopId: id,
|
||||
}
|
||||
})
|
||||
},
|
||||
toShop(id) {
|
||||
this.$Router.push({
|
||||
name: 'ShopDetail',
|
||||
params: {
|
||||
ShopId: id,
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getShops()
|
||||
onPullDownRefresh() {
|
||||
this.category_id = '';
|
||||
this.page = 1;
|
||||
this.has_more = true;
|
||||
this.getShops();
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages-empty{
|
||||
height: 70vh;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.pages-empty {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: $window-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// 筛选
|
||||
.classify-tabs {
|
||||
background: white;
|
||||
}
|
||||
.shop-List{
|
||||
padding: $padding;
|
||||
.shopInfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding - 10;
|
||||
background-color: #fff;
|
||||
border-radius: $radius;
|
||||
margin-top: 20rpx;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.shopInfo-title-left {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-left: 90rpx;
|
||||
min-height: 90rpx;
|
||||
box-sizing: border-box;
|
||||
.shop-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
span {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
.shop-titl {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopInfo-title-right {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: gray;
|
||||
.icons{
|
||||
vertical-align: bottom;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-List {
|
||||
padding: $padding;
|
||||
|
||||
.shopInfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding - 10;
|
||||
background-color: #fff;
|
||||
border-radius: $radius;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.shopInfo-title-left {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-left: 90rpx;
|
||||
min-height: 90rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shop-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.shop-titl {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopInfo-title-right {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: gray;
|
||||
|
||||
.icons {
|
||||
vertical-align: bottom;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user