You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
7.8 KiB
263 lines
7.8 KiB
<template>
|
|
<view class="" style="height: 100vh;overflow: hidden;background: linear-gradient(to bottom, #3DA7E7, #FFFFFF ) no-repeat;background-size: 100% calc(50px + 150rpx)
|
|
">
|
|
<!-- 搜索框 -->
|
|
<block >
|
|
<view class="nav-search jianbian" @click="toSearch">
|
|
<component-search propPlaceholder="输入商品名称搜索"></component-search>
|
|
</view>
|
|
</block>
|
|
<view v-if="category_list.length > 0" class="category-content pr " :style="'height:calc(100vh - '+(50)+'px);'">
|
|
<!-- 商品列表模式 -->
|
|
<block >
|
|
<!-- 一级导航 -->
|
|
<view class="top-nav scroll-view-horizontal">
|
|
<scroll-view :scroll-x="true" >
|
|
<block v-for="(item, index) in category_list" :key="index">
|
|
<view :class="' item dis-inline-block ' + (nav_active_index == index ? 'active-class ' : '')" :data-index="index" :data-itemtwoindex="0" @tap="nav_event">
|
|
<view :class="'icon-content circle br ' + (nav_active_index == index ? 'active-border' : '')">
|
|
<image :src="item['big_images']" mode="aspectFit" class="icon-content-img circle"></image>
|
|
</view>
|
|
<view class="margin-top-xs">{{item.name}}</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 二级导航 -->
|
|
<view class="left-nav ">
|
|
<scroll-view :scroll-y="true" :scroll-top="scrollTop" class="ht-auto">
|
|
<view class="left-content-actual bs tc">
|
|
<!-- <view :class="' item ' + (nav_active_item_two_index == -1 ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="-1" :data-itemthreeindex="-1" @tap="nav_event">
|
|
<text>全部</text>
|
|
</view> -->
|
|
<block v-if="(data_content || null) != null && (data_content.items || null) != null && data_content.items.length > 0">
|
|
<block v-for="(item, index) in data_content.items" :key="index">
|
|
<view :class="' item ' + (nav_active_item_two_index == index ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="index" :data-itemthreeindex="-1" @click="nav_event">
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 商品列表 -->
|
|
<view class="goods-right-content pa ">
|
|
<view class="sort-contain">
|
|
<view class="sort-cla">
|
|
<view :class=" 'sort '+(sortIndex == 1 ? ' sort-active ' : '') " @tap="sortEvent(1)" >综合</view>
|
|
<view :class=" 'sort '+(sortIndex == 2 ? ' sort-active ' : '') " @tap="sortEvent(2)">销量</view>
|
|
<view class="sort px " @tap="sortEvent(3)">
|
|
<text :class=" (sortIndex == 3 ? ' sort-active ' : '') ">价格</text>
|
|
<view class="pri-px">
|
|
<view :class="'icon-ymt to-blod-up ic-pri' +(sortOrder==1? ' sort-active ' : '')"></view>
|
|
<view :class="'icon-ymt to-blod-down ic-pri' +(sortOrder==2 ? ' sort-active ' : '')"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-right-ms">
|
|
<goodsList :propData="goodsListData" :pageData="pageData" :selectObject="selectObject" @loadData="loadData" @switchCategory="switchCategory" :paddBottom="0" ></goodsList>
|
|
</view>
|
|
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
|
|
<!-- 购物车 -->
|
|
<view class="gouwuche " @click="goCart">
|
|
<uniBadge class="uni-badge-left-margin badgeClass" max-num="99" text="45" type="warning" size="small" />
|
|
<view class="icon cart font24px">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniBadge from '@/components/uni-badge/components/uni-badge/uni-badge.vue'
|
|
const app = getApp();
|
|
import componentSearch from "@/components/search/search.vue";
|
|
import goodsList from '@/pages/classify/goods-list/goods-list.vue'
|
|
const listData = require('./data.json')//模拟数据
|
|
const listData2=require('./data2.json')//商品数据模拟数据
|
|
|
|
export default {
|
|
components: {
|
|
componentSearch,
|
|
goodsList,
|
|
uniBadge
|
|
},
|
|
data(){
|
|
return{
|
|
static_dir:"",
|
|
category_list: [],//所有数据
|
|
nav_active_index: 0,//一级导航
|
|
nav_active_item_two_index: 0,//二级导航
|
|
data_content: null,//左边导航单个数据 {}是一个对象
|
|
scrollTop:0,
|
|
|
|
selectObject:{
|
|
selectIndex:0,
|
|
length:0
|
|
},
|
|
|
|
goodsListData: [],//右侧商品数据
|
|
|
|
pageData:{
|
|
pageStart:1,
|
|
pageNum:7,
|
|
allData:7
|
|
},
|
|
isFinish:false,
|
|
|
|
// 排序
|
|
sortIndex:1,//默认按综合
|
|
lastOrder:0,
|
|
sortOrder:0,//1表示降序，2表示升序
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
// 数据加载
|
|
this.init();
|
|
},
|
|
methods:{
|
|
// 获取数据
|
|
init() {
|
|
this.category_list = listData; //一级导航的数据
|
|
this.data_content = this.category_list[this.nav_active_index] || null;//左边导航的数据
|
|
this.sortIndex=1; //默认排序时按照综合
|
|
this.get_goods_list();//获取右侧商品
|
|
this.selectObject={
|
|
selectIndex:this.nav_active_item_two_index,
|
|
length:this.data_content.items.length
|
|
};
|
|
},
|
|
|
|
//搜索事件
|
|
toSearch() {
|
|
uni.navigateTo({
|
|
url:"/pages/classify/goods-search/goods-search"
|
|
})
|
|
},
|
|
//导航点击
|
|
nav_event(e) {
|
|
this.nav_active_index = e.currentTarget.dataset.index;//一级导航
|
|
this.initCategory(e.currentTarget.dataset.itemtwoindex)
|
|
},
|
|
|
|
initCategory(towIndex){
|
|
this.nav_active_item_two_index = towIndex;//二级导航
|
|
this.data_content = this.category_list[this.nav_active_index] || null;//二级导航目录数据
|
|
this.sortIndex=1;//默认按价格排序
|
|
this.selectObject={
|
|
selectIndex:this.nav_active_item_two_index,
|
|
length:this.data_content.items.length
|
|
};
|
|
|
|
this.get_goods_list(this.data_content.id)
|
|
},
|
|
|
|
get_goods_list(id){
|
|
|
|
setTimeout(()=>{
|
|
|
|
this.goodsListData = listData2
|
|
|
|
},2000)
|
|
|
|
},
|
|
loadData(callback){
|
|
let _this = this;
|
|
|
|
if(_this.pageData.pageStart < _this.pageData.allData/_this.pageData.pageNum){
|
|
|
|
let arr =_this.goodsListData.slice(0,7)
|
|
_this.goodsListData = _this.goodsListData.concat(arr);
|
|
_this.pageData.pageStart=_this.pageData.pageStart+1;
|
|
|
|
}
|
|
callback({ list: _this.goodsListData, total: _this.pageData.allData });
|
|
|
|
},
|
|
// 切换分类prev,next子组件弹射方法
|
|
switchCategory(type){
|
|
if (type == 'prev') {
|
|
this.initCategory(this.nav_active_item_two_index - 1);//0
|
|
|
|
}else if(type == 'next'){
|
|
this.initCategory(this.nav_active_item_two_index + 1);//1
|
|
|
|
}
|
|
this.scrollTop = 40 *(this.nav_active_item_two_index)
|
|
|
|
|
|
},
|
|
//排序事件
|
|
sortEvent(num) {
|
|
this.sortIndex = num ;
|
|
|
|
this.lastOrder = this.sortOrder;
|
|
|
|
if(this.sortIndex == 3 ){
|
|
if(this.lastOrder == 0){
|
|
this.sortOrder = 1
|
|
}
|
|
if(this.lastOrder == 1){
|
|
this.sortOrder = 2
|
|
}
|
|
if(this.lastOrder == 2){
|
|
this.sortOrder = 1
|
|
}
|
|
}else{
|
|
this.sortOrder = 0
|
|
}
|
|
|
|
|
|
},
|
|
goCart(){
|
|
uni.navigateTo({
|
|
url:"/pages/classify/cart/cart"
|
|
})
|
|
},
|
|
|
|
|
|
// //查看商品详情
|
|
// goGoodsDetail(e) {
|
|
// console.log(e,"商品详情")
|
|
// },
|
|
// cartChoose(e){
|
|
// console.log(e,"购物车选择")
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style >
|
|
@import url("./classify.css");
|
|
.gouwuche {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 15px;
|
|
width: 25px;
|
|
height: 25px;
|
|
color: #3DA7E7 !important;
|
|
|
|
}
|
|
|
|
.badgeClass {
|
|
position: absolute;
|
|
top:-5px;
|
|
right: -10px;
|
|
}
|
|
|
|
.font24px{
|
|
font-size: 24px !important;
|
|
color: #F0AD4E;
|
|
}
|
|
</style> |