188 lines
4.0 KiB
Vue
188 lines
4.0 KiB
Vue
<template>
|
|
<view :style="viewColor">
|
|
<view class="main">
|
|
<view class="show_main area-row">
|
|
<view class="picture">
|
|
<image :src="proInfo.image"></image>
|
|
</view>
|
|
<view class="show_info">
|
|
<view class="show_name line1">{{proInfo.store_name}}</view>
|
|
<view class="show_count"><text class="num">{{count}}</text>条买家秀</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-cont">
|
|
<view v-if="goods.length" class="goods-wrap">
|
|
<view class="goods">
|
|
<WaterfallsFlow :wfList='goods' :isFind="false" :isShow="true" :isAuth="0"/>
|
|
</view>
|
|
</view>
|
|
<view :hidden="!loading" class="acea-row row-center-wrapper loadingicon">
|
|
<text class="iconfont icon-jiazai loading"></text>
|
|
</view>
|
|
<emptyPage v-if="goods.length == 0 && !loading" title="暂无文章~"></emptyPage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import WaterfallsFlow from '@/components/plantWaterfallsFlow/WaterfallsFlow.vue'
|
|
import { graphicLstApi, graphicProApi} from '@/api/community.js';
|
|
import { mapGetters } from "vuex";
|
|
import emptyPage from '@/components/emptyPage.vue'
|
|
const app = getApp();
|
|
export default {
|
|
components: {
|
|
emptyPage,
|
|
WaterfallsFlow,
|
|
},
|
|
data() {
|
|
return {
|
|
focus: false,
|
|
goods: [], // 商铺商品
|
|
count: 0, //买家秀条数
|
|
keyword: '',
|
|
loaded: false,
|
|
loading: false,
|
|
loadTitle: '加载更多',
|
|
proInfo: {},
|
|
where: {
|
|
keyword: '',
|
|
page: 1,
|
|
limit: 30,
|
|
topic_id: '',
|
|
spu_id: ''
|
|
},
|
|
}
|
|
},
|
|
created() {},
|
|
computed: {
|
|
...mapGetters(['isLogin','uid','scrollTop','viewColor']),
|
|
},
|
|
watch: {},
|
|
onLoad: function(options) {
|
|
this.where.spu_id = options.spu_id
|
|
this.getGoods();
|
|
this.getProDetail();
|
|
},
|
|
onShow() {},
|
|
mounted: function() {},
|
|
methods: {
|
|
// 获取关注商品
|
|
getGoods: function() {
|
|
let that = this;
|
|
if (that.loadend) return;
|
|
if (that.loading) return;
|
|
that.loading = true;
|
|
that.loadTitle = '';
|
|
graphicLstApi(that.where).then(res => {
|
|
that.loading = false;
|
|
let list = res.data.list;
|
|
let goodsList = that.$util.SplitArray(list, that.goods);
|
|
let loadend = list.length < that.where.limit;
|
|
that.loadend = loadend;
|
|
that.loading = false;
|
|
that.count = res.data.count;
|
|
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
|
that.$set(that, 'goods', goodsList);
|
|
that.$set(that.where, 'page', that.where.page + 1);
|
|
}).catch(err => {
|
|
that.loading = false;
|
|
that.goodsLoading = false;
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
})
|
|
});
|
|
},
|
|
getProDetail(){
|
|
let that = this
|
|
graphicProApi(that.where.spu_id).then(res => {
|
|
that.proInfo = res.data
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
})
|
|
});
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
this.getGoods();
|
|
},
|
|
// 滚动监听
|
|
onPageScroll(e) {
|
|
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
|
uni.$emit('scroll');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
padding: 20rpx 20rpx 0;
|
|
min-height: 100vh;
|
|
.goods-wrap{
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.show_main{
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
.picture{
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
}
|
|
.show_info{
|
|
width: 510rpx;
|
|
position: relative;
|
|
}
|
|
.show_name{
|
|
color: #282828;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
font-family: 'PingFang SC';
|
|
}
|
|
.show_count{
|
|
position: absolute;
|
|
bottom: 4rpx;
|
|
color: #282828;
|
|
font-size: 24rpx;
|
|
.num{
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
}
|
|
.show_main .picture image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.goods {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
.empty-box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 0;
|
|
padding-top: 200rpx;
|
|
image{
|
|
width: 414rpx;
|
|
height: 240rpx;
|
|
}
|
|
.txt{
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|