完善功能
This commit is contained in:
wangxiaowei
@ -1,88 +1,153 @@
|
||||
<template>
|
||||
<view class="goods-cate">
|
||||
<router-link to="/pages/goods_search/goods_search">
|
||||
<router-link :to="{ path: '/bundle/pages/shop_search/shop_search', query: { id: shopId, is_recommend: 0 } }">
|
||||
<view class="header">
|
||||
<u-search bg-color="#F4F4F4" :disabled="true"></u-search>
|
||||
<u-search bg-color="#F4F4F4" :disabled="true" placeholder="搜索店内商品"></u-search>
|
||||
</view>
|
||||
</router-link>
|
||||
<view class="content" v-if="appConfig.cate_style == 1 || appConfig.cate_style == 4">
|
||||
<cate-two :cate-list="cateList"></cate-two>
|
||||
</view>
|
||||
<view class="content bg-body" v-if="appConfig.cate_style == 3 || appConfig.cate_style == 2">
|
||||
<cate-one :cate-list="cateList" :selecttab="selecttab"></cate-one>
|
||||
<view class="category">
|
||||
<view class="goods-display bg-body" style="display: flex; border-radius: 20rpx">
|
||||
<view class="category-aside">
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
:style="{ height: aslideH + 'px', padding: '10rpx' }"
|
||||
>
|
||||
<view
|
||||
class="aside-item flex row-center"
|
||||
:class="{ active: active == -1 }"
|
||||
@click="changeActive(-1)"
|
||||
>
|
||||
<view
|
||||
class="xs text-center"
|
||||
style="width: 60rpx"
|
||||
:class="{ primary: active == -1 }"
|
||||
>全部商品</view>
|
||||
</view>
|
||||
<view
|
||||
class="aside-item flex row-center"
|
||||
:class="{ active: active == index }"
|
||||
v-for="(item, index) in category"
|
||||
:key="index"
|
||||
@click="changeActive(index)"
|
||||
>
|
||||
<view
|
||||
class="xs text-center"
|
||||
style="width: 60rpx"
|
||||
:class="{ primary: active == index }"
|
||||
>{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="category-row flex-1">
|
||||
<mescroll-body
|
||||
ref="mescrollRef"
|
||||
@init="mescrollInit"
|
||||
:height="meScrollH"
|
||||
@down="downCallback"
|
||||
@up="upCallback"
|
||||
:up="upOption"
|
||||
:down="{ use: false }"
|
||||
>
|
||||
<view class="bg-white">
|
||||
<goods-list :list="goodsList" type="one"></goods-list>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tabbar></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getLevelOneList,
|
||||
getGoodsList,
|
||||
getListByLevelOne
|
||||
} from '@/api/store';
|
||||
import {
|
||||
getRect,
|
||||
trottle,
|
||||
arraySlice
|
||||
} from '@/utils/tools';
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import Cache from '@/utils/cache'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import { getShopGoodsCategory } from '@/api/shop'
|
||||
import { getGoodsList } from '@/api/store'
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
|
||||
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
cateList: [],
|
||||
cateTwoList: [],
|
||||
selectIndex: 0,
|
||||
category_id:'',
|
||||
selecttab:0,
|
||||
shopId: 1,
|
||||
category: [],
|
||||
active: -1,
|
||||
upOption: {
|
||||
auto: false,
|
||||
empty: {
|
||||
icon: '/static/images/goods_null.png',
|
||||
tip: '暂无商品'
|
||||
}
|
||||
},
|
||||
goodsList: [],
|
||||
sys: {}
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.getLevelOneListFun();
|
||||
// this.getListByLevelOneFun()
|
||||
async onLoad() {
|
||||
this.sys = uni.getSystemInfoSync()
|
||||
await this.getShopGoodsCategoryFun()
|
||||
this.mescroll.resetUpScroll()
|
||||
uni.$on('refreshhome', this.onCityChange)
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('refreshhome', this.onCityChange)
|
||||
},
|
||||
onShow() {
|
||||
if(uni.getStorageSync('category_id')!=''&&uni.getStorageSync('category_id')!=null){
|
||||
this.category_id=uni.getStorageSync('category_id')
|
||||
if(this.cateList.length!=0){
|
||||
this.cateList.forEach((item,index)=>{
|
||||
if(item.id==this.category_id){
|
||||
this.selecttab=index
|
||||
}
|
||||
})
|
||||
}
|
||||
uni.removeStorageSync('category_id')
|
||||
}
|
||||
this.getCartNum()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getCartNum']),
|
||||
|
||||
|
||||
async getLevelOneListFun() {
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = await getLevelOneList();
|
||||
onCityChange() {
|
||||
this.active = -1
|
||||
this.goodsList = []
|
||||
this.getShopGoodsCategoryFun()
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
async getShopGoodsCategoryFun() {
|
||||
const { data, code } = await getShopGoodsCategory({
|
||||
shop_id: this.shopId
|
||||
})
|
||||
if (code == 1) {
|
||||
this.cateList = data
|
||||
if(this.category_id!=''){
|
||||
this.cateList.forEach((item,index)=>{
|
||||
if(item.id==this.category_id){
|
||||
this.selecttab=index
|
||||
}
|
||||
})
|
||||
}
|
||||
this.category = data
|
||||
}
|
||||
},
|
||||
|
||||
changeActive(index) {
|
||||
this.active = index
|
||||
this.goodsList = []
|
||||
this.mescroll.resetUpScroll()
|
||||
},
|
||||
upCallback(page) {
|
||||
const { active, category } = this
|
||||
const pageNum = page.num
|
||||
const pageSize = page.size
|
||||
const cateId = active == -1 ? '' : category[active].id
|
||||
getGoodsList({
|
||||
page_size: pageSize,
|
||||
page_no: pageNum,
|
||||
shop_id: this.shopId,
|
||||
shop_cate_id: cateId
|
||||
}).then(({ data }) => {
|
||||
let curPageData = data.lists
|
||||
let curPageLen = curPageData.length
|
||||
let hasNext = !!data.more
|
||||
if (page.num == 1) this.goodsList = []
|
||||
this.goodsList = this.goodsList.concat(curPageData)
|
||||
this.mescroll.endSuccess(curPageLen, hasNext)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['inviteCode', 'appConfig']),
|
||||
...mapGetters(['sysInfo', 'cityInfo']),
|
||||
aslideH() {
|
||||
const { windowHeight, safeArea } = this.sys
|
||||
if (!safeArea) return 0
|
||||
// 减去头部搜索栏(94rpx)、底部tabbar(50px)、安全区域
|
||||
return windowHeight - uni.upx2px(94) - 50
|
||||
},
|
||||
meScrollH() {
|
||||
return this.aslideH + 'px'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -92,26 +157,47 @@
|
||||
page {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
.goods-cate {
|
||||
height: 100%;
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
height: $header-height;
|
||||
border-bottom: $-solid-border;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
.goods-cate {
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
height: $header-height;
|
||||
border-bottom: $-solid-border;
|
||||
}
|
||||
|
||||
.category {
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.category-aside {
|
||||
width: 150rpx;
|
||||
align-self: flex-start;
|
||||
|
||||
.aside-item {
|
||||
width: 120rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
background-color: $-color-white;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 3rpx;
|
||||
height: 80rpx;
|
||||
background-color: $-color-primary;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom) - 50px - env(safe-area-inset-bottom));
|
||||
.category-row {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user