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.
463 lines
12 KiB
463 lines
12 KiB
<template>
|
|
<view class="classify-contain" >
|
|
<!-- 搜索框 -->
|
|
<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(100% - '+(60)+'px);'">
|
|
<!-- 商品列表模式 -->
|
|
<block >
|
|
<!-- 一级导航 -->
|
|
<view class="top-nav scroll-view-horizontal">
|
|
|
|
<scroll-view style="height: 100%;" scroll-x="true" @touchmove.stop>
|
|
<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" class="item-img" :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="!isLoading" ref="goodsList" :hackReset="true" :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,
|
|
|
|
isLoading:false,
|
|
skeletonNum:[1,2,3,4],
|
|
|
|
|
|
}
|
|
},
|
|
|
|
onLoad(){
|
|
// 数据加载
|
|
this.init();
|
|
this.isLoading = true;
|
|
|
|
},
|
|
onShow(){
|
|
this.$nextTick(()=>{
|
|
if(this.$refs.goodsList&&app.globalData.userInfo){
|
|
this.$refs.goodsList.refreshCartNum()
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
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,
|
|
companyId:app.globalData.companyId
|
|
}
|
|
|
|
// uni.showLoading({
|
|
// title: '',
|
|
// mask:true,
|
|
// });
|
|
|
|
// console.log(params,"params")
|
|
getListGoodsDetail(params).then(res=>{
|
|
setTimeout(()=>{
|
|
this.isLoading = false;
|
|
},200)
|
|
// uni.hideLoading();
|
|
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{
|
|
_this.goodsListData=[]
|
|
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");
|
|
|
|
.classify-contain{
|
|
|
|
|
|
height: calc(100vh - var(--window-bottom));
|
|
overflow: hidden;
|
|
background: linear-gradient(to bottom, #3DA7E7, #FFFFFF ) no-repeat;
|
|
background-size: 100% calc(61px + 150rpx);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
/*
|
|
*/
|
|
.item-img{
|
|
height: 20px;
|
|
width:20px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.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> |