glhcp/uniapp/pages/shop_street/shop_street.vue

187 lines
4.6 KiB
Vue

<template>
<view class="shop-street">
<mescroll-body v-if="appConfig.shop_street_hide" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
<view class="shop-street-content">
<view class="search">
<u-search v-model="keyword" @search="onReflesh" bg-color="#F4F4F4" placeholder="搜索关键词"></u-search>
</view>
<scroll-view class="bg-white" :scroll-x="true" :scroll-with-animation="true">
<view class="store-category p-t-20">
<view class="category-item flex-col col-center" @tap="changeActive(-1)">
<view class="icon-wrap" :style="{borderColor: active == -1 ? colorConfig.primary : ''}">
<u-image width="68rpx" height="68rpx" border-radius="60rpx" src="/static/images/icon_shop_cate.png" />
</view>
<view class="xs m-t-10" :class="{primary: active == -1}">全部</view>
</view>
<view class="category-item flex-col col-center" v-for="(item,index) in shopCategory" :key="index"
@tap="changeActive(index)">
<view class="icon-wrap" :style="{borderColor: active == index ? colorConfig.primary : ''}">
<u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.image" />
</view>
<view class="xs m-t-10" :class="{primary: active == index}">{{item.name}}</view>
</view>
</view>
</scroll-view>
<view class="store-container">
<view class="m-t-20" v-for="(item, index) in shopList" :key="index">
<shop-item :item="item"></shop-item>
</view>
</view>
</view>
</mescroll-body>
<view v-else>
<view class="p-b-20" v-if="hotGoods.length">
<goods-list type="one" :list="hotGoods"></goods-list>
</view>
<!-- <view v-else class="flex-col col-center" style="margin-top: 200rpx;">
<image class="img-null" src="/static/images/goods_null.png"></image>
<view class="muted">
暂无数据~
</view>
</view> -->
</view>
</view>
</template>
<script>
import {
mapGetters,
mapActions
} from 'vuex'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
import {
getShopList,
getShopCategory
} from "@/api/shop"
import {
getHome,
} from "@/api/store"
export default {
mixins: [MescrollMixin],
data() {
return {
shopList: [],
shopCategory: [],
keyword: '',
active: -1,
upOption: {
auto: false,
empty: {
icon: '/static/images/goods_null.png',
tip: "暂无数据~",
},
},
hotGoods: []
}
},
onShow() {
if(!this.appConfig.shop_street_hide) {
uni.setNavigationBarTitle({
title: "商品"
})
this.getHomeFun()
}
this.getCartNum()
},
onShareAppMessage() {
const shareInfo = this.appConfig.share
return {
title: shareInfo.mnp_share_title,
path: "pages/shop_street/shop_street?invite_code=" + this.inviteCode
};
},
methods: {
...mapActions(['getCartNum']),
async downCallback() {
await this.getShopCategoryFun()
this.mescroll.resetUpScroll();
},
// 获取首页数据
async getHomeFun() {
const {
code,
data
} = await getHome();
if (code == 1) {
this.hotGoods = data.hots
}
},
onReflesh() {
this.shopList = []
this.mescroll.resetUpScroll();
},
changeActive(index) {
this.active = index
this.onReflesh()
},
upCallback(page) {
let pageNum = page.num;
let pageSize = page.size;
const {
keyword,
active,
shopCategory
} = this
const cateId = active == -1 ? '' : shopCategory[active].id
getShopList({
page_no: pageNum,
page_size: pageSize,
name: keyword,
shop_cate_id: cateId
}).then(res => {
if (res.code == 1) {
let curPageData = res.data.list;
let curPageLen = curPageData.length;
let hasNext = !!res.data.more;
if (page.num == 1) {
this.shopList = [];
}
this.shopList = this.shopList.concat(curPageData);
this.mescroll.endSuccess(curPageLen, hasNext);
}
}).catch(err => {
this.mescroll.endErr()
})
},
async getShopCategoryFun() {
const {
code,
data
} = await getShopCategory()
if (code == 1) {
this.shopCategory = data
}
},
}
}
</script>
<style lang="scss">
.shop-street {
.search {}
.store-category {
white-space: nowrap;
padding-bottom: 10rpx;
.category-item {
display: inline-flex;
padding: 0 30rpx;
.icon-wrap {
border: 1px solid transparent;
border-radius: 50%;
}
}
}
.store-container {
padding: 0 30rpx;
}
}
</style>