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.
344 lines
9.9 KiB
344 lines
9.9 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" @click="nav_event">
|
|
<view :class="'icon-content circle br ' + (nav_active_index == index ? 'active-border' : '')">
|
|
<image :src="imageUrl+item['img']" mode="aspectFit" class="icon-content-img circle"></image>
|
|
</view>
|
|
<view class="margin-top-xs">{{item.title}}</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">
|
|
|
|
<block v-if="(data_content || null) != null && (data_content.children || null) != null && data_content.children.length > 0">
|
|
<block v-for="(item, index) in data_content.children" :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" @click="nav_event">
|
|
<text>{{item.title}}</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 ' : '') " @click="sortEvent(1)" >综合</view>
|
|
<view :class=" 'sort '+(sortIndex == 2 ? ' sort-active ' : '') " @click="sortEvent(2)">销量</view>
|
|
<view class="sort px " @click="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 v-if="hackReset" :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="cartNum" 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'
|
|
|
|
import componentSearch from "@/components/search/search.vue";
|
|
import goodsList from '@/pages/classify/goods-list/goods-list.vue'
|
|
|
|
|
|
import {getGoodsTypeTree,getListGoodsDetail,getShoppingCartList} from '@/Utils/physicalObject.js'
|
|
const app = getApp();
|
|
export default {
|
|
components: {
|
|
componentSearch,
|
|
goodsList,
|
|
uniBadge
|
|
},
|
|
data(){
|
|
return{
|
|
businessType:3,//实物类型
|
|
imageUrl: app.globalData.imgUrl,//图片地址
|
|
category_list: [],//所有数据
|
|
nav_active_index: 0,//一级导航
|
|
nav_active_item_two_index: 0,//二级导航
|
|
data_content: null,//左边导航数据{..,children:[]}
|
|
scrollTop:0,
|
|
|
|
selectObject:{
|
|
selectIndex:0,
|
|
length:0
|
|
},
|
|
|
|
goodsListData: [],//右侧商品数据
|
|
|
|
pageData:{
|
|
pageStart:1,//页码
|
|
pageNum:7,//每页有多少条数据
|
|
navigateLastPage:1,//总共有几页
|
|
allData:0 //总共有多少条数据
|
|
},
|
|
// 排序
|
|
sortIndex:1,//默认按综合 1综合，2销量，3价格
|
|
lastOrder:0,
|
|
sortOrder:0,//1表示升序，2表示降序
|
|
|
|
// cartNum:app.globalData.cartNum,
|
|
hackReset:false,//强制刷新子组件
|
|
|
|
|
|
|
|
}
|
|
},
|
|
created() {
|
|
// 数据加载
|
|
this.init();
|
|
|
|
},
|
|
onShow(){
|
|
|
|
console.log("121212")
|
|
this.hackReset = false;
|
|
this.$nextTick(() => {
|
|
this.hackReset = true;
|
|
})
|
|
|
|
|
|
},
|
|
|
|
methods:{
|
|
// 获取数据
|
|
init() {
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask:true,
|
|
});
|
|
let _this = this;
|
|
let params={
|
|
businessType:_this.businessType
|
|
}
|
|
getGoodsTypeTree(params).then(async(res)=>{
|
|
if (res.return_code == '000000') {
|
|
uni.hideLoading();
|
|
if(res.return_data.length>0){
|
|
_this.category_list =res.return_data;
|
|
_this.data_content = _this.category_list[_this.nav_active_index] || null;//左边导航的数据
|
|
_this.sortIndex=1; //默认排序时按照综合
|
|
if(_this.data_content.children&&_this.data_content.children.length>0){
|
|
|
|
_this.selectObject={
|
|
selectIndex:_this.nav_active_item_two_index,
|
|
length:_this.data_content.children.length
|
|
};
|
|
// console.log(_this.selectObject,"_this.selectObject")
|
|
await _this.get_goods_list(_this.data_content.children[_this.nav_active_item_two_index].key);//获取右侧商品
|
|
}
|
|
}
|
|
|
|
}else{
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
|
|
//搜索事件
|
|
toSearch() {
|
|
uni.navigateTo({
|
|
url:"/pages/classify/goods-search/goods-search"
|
|
})
|
|
},
|
|
//导航点击
|
|
nav_event(e) {
|
|
this.nav_active_index = e.currentTarget.dataset.index;//一级导航
|
|
|
|
this.sortIndex=1;//默认综合排序
|
|
this.sortOrder = 0;
|
|
this.lastOrder = 0;
|
|
|
|
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.selectObject={
|
|
selectIndex:this.nav_active_item_two_index,
|
|
length:this.data_content.children.length
|
|
};
|
|
this.goodsListData = [];
|
|
this.pageData={
|
|
pageStart:1,
|
|
pageNum:7,
|
|
allData:0
|
|
}
|
|
this.get_goods_list(this.data_content.children[this.nav_active_item_two_index].key)
|
|
},
|
|
|
|
get_goods_list(key){
|
|
|
|
let price =0;
|
|
if(this.sortIndex ==3){
|
|
if(this.sortOrder == 1){//升序
|
|
price = 1;
|
|
}else if(this.sortOrder == 2){//降序
|
|
price = 2;
|
|
}
|
|
}
|
|
//1升序，2倒序，0是不管
|
|
let _this = this;
|
|
let params={
|
|
goodsType:key,
|
|
pageNum:_this.pageData.pageStart,
|
|
pageSize:_this.pageData.pageNum,
|
|
price:price,
|
|
}
|
|
// console.log(params,"params")
|
|
getListGoodsDetail(params).then(res=>{
|
|
if (res.return_code == '000000') {
|
|
if(res.return_data.list.length > 0){
|
|
_this.goodsListData =_this.goodsListData.concat(res.return_data.list);
|
|
_this.pageData.pageStart = res.return_data.pageNum;
|
|
_this.pageData.pageNum = res.return_data.pageSize;
|
|
_this.pageData.allData = res.return_data.total;
|
|
_this.pageData.navigateLastPage = res.return_data.navigateLastPage;
|
|
|
|
console.log(_this.pageData)
|
|
}
|
|
|
|
|
|
}else{
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
async loadData(callback){
|
|
let _this = this;
|
|
|
|
// pageData:{
|
|
// pageStart:1,//页码
|
|
// pageNum:7,//每页有多少条数据
|
|
// navigateLastPage:1,//总共有几页
|
|
// allData:0 //总共有多少条数据
|
|
// },
|
|
|
|
if(_this.pageData.pageStart < _this.pageData.navigateLastPage){
|
|
_this.pageData.pageStart=_this.pageData.pageStart+1;
|
|
await _this.get_goods_list(_this.data_content.children[_this.nav_active_item_two_index].key)
|
|
|
|
}
|
|
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
|
|
// console.log(this.nav_active_item_two_index,this.nav_active_item_two_index + 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;
|
|
this.lastOrder = 0;
|
|
}
|
|
|
|
this.initCategory(this.nav_active_item_two_index);
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@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> |