<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 :disableInput="true" :propIsRequired="false" propPlaceholder="输入商品名称搜索"></component-search> </view> </block> <!-- <skeleton :loading="false" :isClassify="true" :showAvatar="false" > </skeleton> --> <view v-if="category_list.length > 0" class="category-content pr " :style="'height:calc(100vh - '+(60)+'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="nav-container dis-flex"> <!-- 二级导航 --> <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="'dis-flex flex-center item ' + (nav_active_item_two_index == index ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="index" @click="nav_event"> <image v-if="item.img" style="height: 20px;width: 20px;" :src="imageUrl+item.img" mode="aspectFit"></image> <text class="">{{item.title || ''}}</text> </view> </block> </block> </view> </scroll-view> </view> <!-- 商品列表 --> <view class="goods-right-content "> <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" > <skeleton :loading="isLoading" :avatarSize="'200rpx'" avatarShape="square" :row="3" :showTitle="true" v-for="(item,index) in skeletonNum" :key="index" > </skeleton> <goodsList v-if="hackReset&&!isLoading" :propData="goodsListData" :pageData="pageData" :selectObject="selectObject" @loadData="loadData" @switchCategory="switchCategory" :paddBottom="0" ></goodsList> <!-- <view class="spinner"> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> <view class="dot"></view> </view> --> </view> </view> </view> </block> </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 '@/components/goods-list/goods-list.vue' import skeleton from '@/components/J-skeleton/J-skeleton.vue' import {getGoodsTypeTree,getListGoodsDetail,getShoppingCartList} from '@/Utils/physicalObject.js' const app = getApp(); export default { components: { componentSearch, goodsList, uniBadge, skeleton }, 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:20,//每页有多少条数据 navigateLastPage:1,//总共有几页 allData:0 //总共有多少条数据 }, // 排序 sortIndex:1,//默认按综合 1综合,2销量,3价格 lastOrder:0, sortOrder:0,//1表示升序,2表示降序 // cartNum:app.globalData.cartNum, hackReset:false,//强制刷新子组件 isLoading:false, skeletonNum:[1,2,3,4], } }, onLoad(){ // 数据加载 this.init(); this.isLoading = true; }, onShow(){ 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 }) } }) }, touchFalse(){ return false; }, //搜索事件 toSearch() { uni.navigateTo({ url:"/physical-merchants/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:20, 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=>{ setTimeout(()=>{ this.isLoading = false; },200) 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:20,//每页有多少条数据 // 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; } /* */ .spinner { width: 60px; height: 60px; position: relative; left: calc(50% - 30px); top:calc(50% - 25px); } .spinner .dot { position: absolute; inset: 0; display: flex; justify-content: center; } .spinner .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: rgb(12, 180, 231); } @keyframes spin { to { transform: rotate(360deg); } } .spinner .dot { animation: spin 2s infinite; } .spinner .dot:nth-child(2) { animation-delay: 100ms; } .spinner .dot:nth-child(3) { animation-delay: 200ms; } .spinner .dot:nth-child(4) { animation-delay: 300ms; } .spinner .dot:nth-child(5) { animation-delay: 400ms; } </style>