charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

增加新功能

Browse Source
This commit is contained in:
hejiangming
2025-03-23 20:36:06 +08:00
parent 2ae62b59ed
commit 78270eeda0
184 changed files with 2690 additions and 1496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/sort/sort.vue
+74 -13
View File
@@ -1,6 +1,7 @@
<template>
<view class="sort_warp">
<view class="sort_header">
<!-- 分类切换 -->
<view class="sort_category_header">
<view :class="selCategory === 1 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(1)">
<view>分类</view>
@@ -11,6 +12,7 @@
<view v-if="selCategory === 2" class="category_item_sel_but"></view>
</view>
</view>
<!-- 搜索 -->
<view style="width: 200rpx;" @click="jumpSearch">
<up-search
shape="square"
@@ -22,14 +24,17 @@
</view>
</view>
<view class="u-menu-wrap">
<!-- 左侧类别 -->
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
:data-current="index" @tap.stop="swichMenu(index)">
<view v-for="(item,index) in tabbarList" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
:data-current="index" @tap.stop="swichMenu(item,index)">
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view>
<block v-for="(item,index) in tabbar" :key="index">
<scroll-view scroll-y class="right-box" v-if="current==index">
<!-- 商品类别数据 -->
<block>
<scroll-view scroll-y class="right-box">
<!-- banner图 -->
<view style="padding: 0rpx 20rpx;">
<up-swiper
:list="bannerList"
@@ -37,16 +42,27 @@
></up-swiper>
</view>
<view class="page-view">
<view class="class-item">
<!-- 这里还有一层循环 -->
<up-loading-page :loading="tabbarContentLoading"></up-loading-page>
<view class="class-item" v-for="(item,index) in tabbarContentList" :key="index">
<view class="item-title">
<text>{{item.name}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
<image class="item-menu-image" :src="item1.icon" mode=""></image>
<view class="item-container" v-if="item.foods && item.foods.length !==0">
<view
class="thumb-box"
v-for="(item1, index1) in item.foods"
:key="index1"
@click="jumpProduct(item1)"
>
<image class="item-menu-image" :src="item1.icon?item1.icon:'/static/common/def_img.jpg'" mode=""></image>
<view class="item-menu-name">{{item1.name}}</view>
</view>
</view>
<view v-else class="not_order_warp">
<view class="not_order_warp_img"><up-image src="/static/common/not_shopping.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
<view class="not_order_msg_warp">暂无分类，快去添加吧~</view>
</view>
</view>
</view>
</scroll-view>
@@ -57,6 +73,7 @@
<script>
import classifyData from '@/common/classify.data.js';
import { getCascadeCategory } from '@/api/common.js';
export default {
data() {
@@ -64,12 +81,29 @@
selCategory:1,
tabbar: classifyData,
scrollTop: 0, //tab标题的滚动条位置
current: 0, // 预设当前项的值
current: null, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
bannerList:['/static/common/product_def_banner.png','/static/common/product_def_banner.png','/static/common/product_def_banner.png'],
bannerList:[
'/static/common/product_def_banner.png',
'/static/common/product_def_banner.png',
'/static/common/product_def_banner.png'
],
tabbarList:[],// 左侧的主分类
tabbarContentList:[],// 右侧内容的分类
tabbarContentLoading:false,
}
},
mounted() {
const then = this;
this.getSort(0).then(resp=>{
if(resp && resp.length !==0){
const fData = resp[0];
this.tabbarList = resp;
this.swichMenu(fData,0);
}
});
},
methods: {
checkCategory(val){
this.selCategory = val;
@@ -79,12 +113,30 @@
url:'/pages/search/search',
})
},
// 查询分类
async getSort(pId){
const params = {
parentId:pId,
}
const resp = await getCascadeCategory(params);
if(resp && resp.bizcode === 100){
return resp.data;
}
return [];
},
getImg() {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(index) {
async swichMenu(item,index) {
if(index == this.current) return ;
this.tabbarContentLoading = true;
const firstData = await this.getSort(item.id);
for(let fItem of firstData){
const twoData = await this.getSort(fItem.id);
fItem.foods = twoData;
}
this.tabbarContentList = firstData;
this.current = index;
// 如果为0，意味着尚未初始化
if(this.menuHeight == 0 || this.menuItemHeight == 0) {
@@ -93,7 +145,9 @@
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
this.tabbarContentLoading = false;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
@@ -109,6 +163,12 @@
this[dataVal] = res.height;
}).exec();
})
},
// 跳转到搜索页面
jumpProduct(item){
uni.navigateTo({
url:'/pages/search/search?categoryId='+item.id,
})
}
}
}
@@ -236,6 +296,7 @@
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
margin-top: 10rpx;
}
.item-container {
@@ -253,7 +314,7 @@
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
width: 110rpx;
height: 110rpx;
}
</style>