deming/pageC/merchant/goods.vue
2020-08-05 17:38:11 +08:00

200 lines
5.2 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="classify-goods">
<view class="tab-container">
<view class="overall" :class="{ 'current' : current == 0 }" @click="switchCurrent(0)">综合</view>
<view class="salenum" :class="{ 'current' : current == 1 }" @click="switchCurrent(1)">销量</view>
<view class="new" :class="{ 'current' : current == 2 }" @click="switchCurrent(2)">新品</view>
<view class="price" :class="{ 'current' : current == 3 }" @click="switchCurrent(3)">
<view class="text">价格</view>
<view class="icon">
<u-icon name="arrow-up-fill" :color="(current == 3 && priceOrderAsc) ? '#FF780F' : '#333333'" size="22"></u-icon>
<u-icon name="arrow-down-fill" :color="(current == 3 && !priceOrderAsc) ? '#FF780F' : '#333333'" size="22"></u-icon>
</view>
</view>
</view>
<scroll-view scroll-y class="scroll-container" :style="{ height: scrollHeight }" @scrolltolower="loadMore">
<view class="goods-container">
<view v-for="goods in goodsList" :key="goods.goods_id" class="goods-view" @click="toDetailsPage(goods.goods_id)">
<goodsItem :info="goods"></goodsItem>
</view>
</view>
<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
<u-empty mode="list" v-if="!goodsList.length"></u-empty>
</scroll-view>
</view>
</template>
<script>
import goodsItem from "@/components/shop/list/item"
export default {
data() {
return {
pageSize: 15,
cid: '',
page: 1,
current: 0,
priceOrderAsc: true, // 是否升序
goodsList: [],
scrollHeight: '',
loadStatus: 'loadmore',
timer: true, // 防止上拉加载短时间内多次调用
}
},
components: {
goodsItem
},
props: {
sid: String
},
watch: {
current(value) {
this.page = 1;
this.goodsList = [];
this.getStoreGoodsList({ laod: 'reload' });
},
priceOrderAsc(value) {
this.page = 1;
this.getStoreGoodsList({ laod: 'reload' });
}
},
created() {
this.setViewHeight();
this.getStoreGoodsList({ load: 'reload' });
},
methods: {
setOrderSort() {
let sort = '';
if(this.current == 0) {
sort = 'goods_sort';
} else if(this.current == 1) {
sort = 'goods_salenum';
} else if(this.current == 2) {
sort = 'goods_addtime';
} else if(this.current == 3) {
if(this.priceOrderAsc) sort = 'goods_price_asc';
else sort = 'goods_price_desc';
}
return sort;
},
// 排序方式 goods_salenum销量 evaluation_count评价 goods_price_asc价格从低到高 goods_price_desc价格从高到低
async getStoreGoodsList({ load = 'reload' } = {}) {
const sort = this.setOrderSort();
const res = await this.$u.api.getStoreGoodsList({
id: this.sid,
page: this.page,
order: sort,
})
this.timer = true;
if(res.errCode == 0) {
this.pageSize = res.data.per_page;
if(load == 'reload') this.goodsList = res.data.data;
else if(load == 'loadmore') this.goodsList.push(...res.data.data);
}
return res.data.data.length;
},
loadMore() {
if(this.goodsList.length < this.pageSize) return false;
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.getStoreGoodsList({ load: 'loadmore' }).then(length => {
if(length == 0) {
this.page--;
this.loadStatus = 'nomore';
} else {
this.loadStatus = 'loading';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
switchCurrent(current) {
if(current == 1 && this.current == 1) this.priceOrderAsc = !this.priceOrderAsc;
this.current = current;
},
setViewHeight() {
const res = uni.getSystemInfoSync();
const otherHeight = 347 + 140 + 20 + 98;
this.scrollHeight = res.windowHeight - otherHeight / 2 + 'px';
// console.log(this.scrollHeight);
},
toDetailsPage(id) {
this.$u.route('/pageB/sdetails/index', {
id: id,
type: 1 // 商品详情 商品类型 1普通 2拼团 3秒杀 4优惠券
});
}
}
};
</script>
<style lang="scss" scoped>
.classify-goods {
width: 100%;
background-color: #FFFFFF;
.tab-container {
box-sizing: border-box;
padding: 30rpx 40rpx;
display: flex;
justify-content: space-between;
> view {
height: 30rpx;
line-height: 30rpx;
font-size: 32rpx;
color: rgba(51,51,51,1);
}
.price {
display: flex;
align-items: center;
justify-content: flex-end;
.text {
margin-right: 5rpx;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.current {
color: rgba(255,120,15,1);
}
}
.scroll-container {
box-sizing: border-box;
padding: 0 30rpx;
.goods-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
// .goods-view {
// margin: 0 auto;
// width: 690rpx;
// display: flex;
// background-color: #F5F5F5;
// margin-bottom: 30rpx;
// align-items: center;
// > image {
// width: 220rpx;
// height: 170rpx;
// flex-shrink: 0;
// margin-right: 30rpx;
// }
// .right {
// width: 418rpx;
// .name {
// font-size: 30rpx;
// color: rgba(51,51,51,1);
// margin-bottom: 20rpx;
// }
// .briefing {
// font-size: 28rpx;
// color: rgba(102,102,102,1);
// line-height: 36rpx;
// }
// }
// }
}
}
</style>