<template>
|
<view>
|
<view class="search">
|
<view class="searchView">
|
<image src="/static/imgs/search.png" mode=""></image>
|
<input type="text" v-model="keyword" placeholder="搜索您想要的商品" @confirm="searchGoods" />
|
<view class="searchBtn" @tap="searchGoods">搜索</view>
|
</view>
|
</view>
|
<view class="catesMain">
|
<view class="cates-left" :style="'height:' + scrollHeight + 'px'">
|
<scroll-view scroll-y="true" class="scroll-Y">
|
<view :class="catesId == 0 ? 'active' : ''" @click="catesClick(0)">全部商品</view>
|
<view v-for="(item, index) in catesData" @click="catesClick(item)" :class="catesId == item.id ? 'active' : ''">{{item.title}}</view>
|
</scroll-view>
|
</view>
|
<view class="cates-right" :style="'width:' + goodsWidth + 'px;height:' + (scrollHeight - 10) + 'px;margin-top: 20upx'" v-if="goodsData.length > 0">
|
<scroll-view scroll-y="true" class="scroll-Y">
|
<view class="goods-list">
|
<view class="goods-item" v-for="(item, index) in goodsData" :style="'width:' + goodsItemWidth + 'px;'" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
|
<image class="goods-icon" :src="item.icon" mode=""></image>
|
<view class="goods-title">{{item.title}}</view>
|
<view class="goods-price">
|
<view>¥</view>
|
<view class="red">{{item.price}}</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<view class="noData" v-else>
|
<image src="/static/imgs/noData.png" style="margin-left: 50%;" mode=""></image>
|
<view class="" style="margin-left: 120upx; width: auto;">没有商品信息</view>
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
keyword: '',
|
catesData: [],
|
goodsData: [],
|
scrollHeight: 0,
|
goodsWidth: 0,
|
goodsItemWidth: 0,
|
catesId: 0,
|
pageIndex: 1,
|
pageSize: 200,
|
}
|
},
|
onLoad() {
|
this.getCatesData()
|
},
|
onReady() {
|
|
},
|
methods: {
|
|
searchGoods () {
|
this.getCatesGoods()
|
},
|
//获取分类数据
|
getCatesData() {
|
this.$util.post('Cates/getCates', {catesId: this.catesId, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
|
if(res.code == 1) {
|
this.catesData = res.data.list
|
this.getCatesGoods()
|
}
|
})
|
},
|
//分类点击
|
catesClick (e) {
|
if(e == 0) {
|
this.catesId = e
|
} else {
|
this.catesId = e.id
|
}
|
this.pageIndex = 1
|
this.getCatesGoods()
|
},
|
//获取分类商品
|
getCatesGoods(){
|
this.$util.post('Goods/getCatesGoods', {keyword: this.keyword, catesId: this.catesId, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
|
if(res.code == 1) {
|
this.goodsData = res.data.list
|
}
|
})
|
}
|
},
|
// 计算swiper的高度
|
mounted() {
|
let t = this
|
let headerSearchHeight = 0
|
// 头部搜索height
|
let headerSearchView = uni.createSelectorQuery().select('.search')
|
headerSearchView
|
.boundingClientRect((data) => {
|
headerSearchHeight = data.height
|
}).exec()
|
|
// 左侧scroll宽度
|
let catesWidth = 0
|
let catesLeftView = uni.createSelectorQuery().select('.cates-left')
|
catesLeftView
|
.boundingClientRect((data) => {
|
catesWidth = data.width
|
}).exec()
|
|
setTimeout(() => {
|
// scroll-height
|
uni.getSystemInfo({
|
success: (res) => {
|
t.scrollHeight = res.windowHeight - headerSearchHeight
|
t.goodsWidth = res.windowWidth - catesWidth
|
let mlW = res.windowWidth * 0.05
|
t.goodsItemWidth = (res.windowWidth - mlW - catesWidth) / 2
|
}
|
})
|
}, 300)
|
|
}
|
}
|
</script>
|
|
<style>
|
@import url(/static/css/cates.css);
|
</style>
|
