212 lines
7.0 KiB
Vue
212 lines
7.0 KiB
Vue
<template>
|
|
<view>
|
|
<status-nav :ifReturn="false" navBarTitle="商品列表" :marginBottom="0"></status-nav>
|
|
<!-- 商品排序、分类 -->
|
|
<view class="pull-all-bg" v-if="sortShow || cateShow" @tap="closePullBg"></view>
|
|
<view class="shop-nav flex" :style="{'top':topHieght+'px'}">
|
|
<view class="shop-sort flex" @tap.stop="openSort()">
|
|
<text>{{sortList[sortIndex].name}}</text>
|
|
<image src="/static/public/icon-shop.png" mode=""></image>
|
|
</view>
|
|
<view class="shop-cate flex" @tap.stop="openCate()">
|
|
<text>{{cateList[cateIndex].name}}</text>
|
|
<image src="/static/public/icon-shop.png" mode=""></image>
|
|
</view>
|
|
<view class="shop-sort-list flex" v-if="sortShow">
|
|
<view class="shop-sort-item" :class="sortIndex == index?'cur':''" @tap.stop="checkSort(index)" v-for="(item,index) in sortList" :key="index">{{item.name}}</view>
|
|
</view>
|
|
<view class="shop-cate-list flex" v-if="cateShow">
|
|
<view class="shop-cate-item" :class="cateIndex == index?'cur':''" @tap.stop="checkCate(index)" v-for="(item,index) in cateList" :key="index">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品列表 -->
|
|
<scroll-view scroll-y class="shop-bg">
|
|
<view class="shop-ul flex">
|
|
<view class="shop-li" @tap="toDetail(item.id)" v-for="(item,index) in shopList" :key="index">
|
|
<view class="img"><image :src="item.src" mode="widthFix"></image></view>
|
|
<view class="txt clips2">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 暂无更多内容 -->
|
|
<view class="more-txt" style="padding-bottom: 40rpx;" v-if="total == 0">暂无更多内容</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import statusNav from '@/components/status-navs/status-nav';
|
|
import {getCartNum} from '@/jsFile/public-api.js';
|
|
import { mapState } from 'vuex'//引入mapState
|
|
export default {
|
|
components:{
|
|
statusNav,
|
|
},
|
|
data() {
|
|
return {
|
|
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
|
newWidth:uni.getSystemInfoSync().windowWidth,
|
|
topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
|
|
sortShow:false, //是否显示排序
|
|
sortList:[
|
|
{name:'上新产品',sign:'news'},
|
|
{name:'最热产品',sign:'hot'},
|
|
{name:'综合排序',sign:'general'}
|
|
], //排序列表
|
|
sortIndex:0,
|
|
cateShow:false, //是否显示分类
|
|
cateList:[
|
|
{name:'沙发',id:0},
|
|
{name:'餐桌',id:1},
|
|
{name:'老板椅',id:2},
|
|
{name:'双人床',id:3},
|
|
{name:'单人床',id:4},
|
|
{name:'灶台',id:5}
|
|
], //分类导航列表
|
|
cateIndex:0,
|
|
shopList:[
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
|
|
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
|
|
], //商品列表
|
|
total:0,
|
|
flag:true,
|
|
ifLoading:false,
|
|
pid:'',//分类id
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
footHeight: state => state.moduleA.footHeight,
|
|
}),
|
|
},
|
|
onLoad(op) {
|
|
this.getShopScreen();
|
|
},
|
|
onReachBottom(e) {
|
|
console.log('触底了...')
|
|
},
|
|
methods: {
|
|
// 弹出排序选择
|
|
openSort(){
|
|
this.cateShow = false;
|
|
if(!this.sortShow){
|
|
this.sortShow = true;
|
|
}else{
|
|
this.sortShow = false;
|
|
}
|
|
},
|
|
// 关闭排序选择
|
|
closeSort(){
|
|
this.sortShow = false;
|
|
},
|
|
// 选择排序
|
|
checkSort(index){
|
|
this.sortIndex = index;
|
|
// 关闭厂家选择
|
|
this.closeSort();
|
|
//查询商品列表
|
|
// this.checkShopList();
|
|
},
|
|
// 弹出分类选择
|
|
openCate(){
|
|
this.sortShow = false;
|
|
if(!this.cateShow){
|
|
this.cateShow = true;
|
|
}else{
|
|
this.cateShow = false;
|
|
}
|
|
},
|
|
// 关闭分类选择
|
|
closeCate(){
|
|
this.cateShow = false;
|
|
},
|
|
// 选择分类
|
|
checkCate(index){
|
|
this.cateIndex = index;
|
|
// 关闭厂家选择
|
|
this.closeCate();
|
|
//查询商品列表
|
|
// this.checkShopList();
|
|
},
|
|
// 关闭弹窗
|
|
closePullBg(){
|
|
this.closeSort();
|
|
// 关闭厂家选择
|
|
this.closeCate();
|
|
},
|
|
|
|
// 查询筛选条件
|
|
getShopScreen(){
|
|
this.$requst.post('/api/spu/condition').then(res=>{
|
|
console.log(res,'商品分类')
|
|
if(res.code==0) {
|
|
|
|
}
|
|
})
|
|
},
|
|
|
|
// 查询商品列表
|
|
checkShopList(){
|
|
for(let i=0;i<this.cateList.length;i++){
|
|
console.log(i)
|
|
this.ifLoading = true;
|
|
let params = {
|
|
category_id:this.cateList[i].id
|
|
}
|
|
this.$requst.post('/api/spu/list',params).then(res=>{
|
|
if(res.code==0) {
|
|
this.total = res.data.total;
|
|
let newArr = [];
|
|
res.data.list.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
skuId:item.skuId,
|
|
imgsrc:item.cover,
|
|
title:item.name,
|
|
price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')
|
|
}
|
|
newArr.push(obj);
|
|
})
|
|
this.dataList[i] = newArr;
|
|
if(i == this.cateList.length-1){
|
|
setTimeout(()=>{
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.cate-title').boundingClientRect(data => {
|
|
this.heightData = data.height
|
|
}).exec();
|
|
},200)
|
|
this.getNodesInfo();
|
|
this.ifLoading = false;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 跳转详情页
|
|
toDetail(id) {
|
|
uni.navigateTo({
|
|
url:`/pagesA/shop/detail?id=${id}&source=shop`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|