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

feat：app改造

Browse Source
This commit is contained in:
charles
2026-08-17 09:27:07 +08:00
parent aa20d121f7
commit 97d3e1cd36
11 changed files with 1923 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/sort/sort.vue
+265 -200
View File
@@ -1,7 +1,7 @@
<template>
<view class="sort_warp" :class="platformType ? '' : 'iosplatformType'">
<!-- #ifndef MP-WEIXIN -->
<TopSafe></TopSafe>
<TopSafe bgColor="#F2EBFF"></TopSafe>
<!-- #endif -->
<!-- 顶部固定区域：搜索 + 分类区域 -->
@@ -67,8 +67,8 @@
<!-- 左侧分类侧边栏 -->
<scroll-view class="left_sidebar_scroll" scroll-y>
<view class="sidebar_item" v-for="(item, index) in categoryList" :key="item.id || index"
:class="{ active: currentCategoryIndex === index }" @click="selectCategory(index)">
<view class="sidebar_item" v-for="(item, index) in subCategoryList" :key="item.id || index"
:class="{ active: currentSubCategoryIndex === index }" @click="selectSubCategory(index)">
<text class="sidebar_name">{{ item.name }}</text>
</view>
</scroll-view>
@@ -77,28 +77,50 @@
<view class="right_content_area">
<!-- 排序栏 -->
<view class="sort_option_bar">
<view class="cat_title_text">{{ currentCategory ? currentCategory.name : '' }}</view>
<view></view>
<!-- <view class="cat_title_text">{{ currentCategory ? currentCategory.name : '' }}</view> -->
<view class="sort_actions">
<view class="sort_item" :class="{ active: sortType === 'default' }" @click="setSort('default')">
综合 <text class="sort_arrow">⇅</text>
<view class="sort_item" :class="{ active: sortBy === 'relevance' }" @click="setSort('relevance')">
<text>综合</text>
<view class="sort_icon_box">
<u-icon name="arrow-up-fill" size="10rpx"
:color="sortBy === 'relevance' && sortOrder === 'asc' ? '#7a35f6' : '#cccccc'"
class="icon_up"></u-icon>
<u-icon name="arrow-down-fill" size="10rpx"
:color="sortBy === 'relevance' && sortOrder === 'desc' ? '#7a35f6' : '#cccccc'"
class="icon_down"></u-icon>
</view>
</view>
<view class="sort_item" :class="{ active: sortType === 'sales' }" @click="setSort('sales')">
销量 <text class="sort_arrow">⇅</text>
<view class="sort_item" :class="{ active: sortBy === 'sales' }" @click="setSort('sales')">
<text>销量</text>
<view class="sort_icon_box">
<u-icon name="arrow-up-fill" size="10rpx"
:color="sortBy === 'sales' && sortOrder === 'asc' ? '#7a35f6' : '#cccccc'" class="icon_up"></u-icon>
<u-icon name="arrow-down-fill" size="10rpx"
:color="sortBy === 'sales' && sortOrder === 'desc' ? '#7a35f6' : '#cccccc'"
class="icon_down"></u-icon>
</view>
</view>
<view class="sort_item" :class="{ active: sortType === 'price' }" @click="setSort('price')">
价格 <text class="sort_arrow">⇅</text>
<view class="sort_item" :class="{ active: sortBy === 'price' }" @click="setSort('price')">
<text>价格</text>
<view class="sort_icon_box">
<u-icon name="arrow-up-fill" size="10rpx"
:color="sortBy === 'price' && sortOrder === 'asc' ? '#7a35f6' : '#cccccc'" class="icon_up"></u-icon>
<u-icon name="arrow-down-fill" size="10rpx"
:color="sortBy === 'price' && sortOrder === 'desc' ? '#7a35f6' : '#cccccc'"
class="icon_down"></u-icon>
</view>
</view>
</view>
</view>
<!-- 商品列表 -->
<scroll-view class="product_list_scroll" scroll-y>
<scroll-view class="product_list_scroll" scroll-y @scrolltolower="onReachBottomGoods" :lower-threshold="50">
<view class="product_list_box" v-if="displayProducts && displayProducts.length > 0">
<view class="product_row_card" v-for="(item, index) in displayProducts" :key="item.id || index"
@click="jumpInfo(item)">
<view class="product_img_box">
<image class="product_img" :src="item.image || item.icon || defaultProductImg" mode="aspectFill"
lazy-load />
<image class="product_img" :src="item.url || defaultProductImg" mode="aspectFill" lazy-load />
</view>
<view class="product_info_box">
<view class="product_title">{{ item.name || item.title }}</view>
@@ -119,8 +141,12 @@
</view>
</view>
</view>
<!-- 加载更多与无数据状态提示 -->
<view class="load_more_tips" v-if="loadingMore">加载中...</view>
<view class="load_more_tips" v-else-if="noMore && displayProducts.length > 0">没有更多了</view>
</view>
<view class="empty_box" v-else>
<view class="empty_box" v-else-if="!loading">
<image src="https://static.tbmall.xin/static/not_shopping.png" class="empty_img" />
<text class="empty_text">暂无商品数据</text>
</view>
@@ -136,166 +162,32 @@
<script>
import { getCascadeCategory } from "@/api/common.js";
import { searchList } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import TopSafe from "@/components/common/top-safe.nvue";
// 假数据列表：当后端接口未就绪时自动提供高保真模拟数据
const MOCK_CATEGORIES = [
{
id: 101,
name: '有机食品',
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
foods: [
{
id: 1001,
name: '鲜8有机贝贝南瓜2500g粉糯板栗味自然生长不催熟',
title: '鲜8有机贝贝南瓜2500g粉糯板栗味自然生长不催熟',
price: '39.00',
sales: 888,
tags: ['专业检测', '生态有机'],
image: 'https://static.tbmall.xin/static/new-home/nangua.png'
},
{
id: 1002,
name: '采缇国产车厘子5kg4j大连美早樱桃生鲜次日达樱桃',
title: '采缇国产车厘子5kg4j大连美早樱桃生鲜次日达樱桃',
price: '26.99',
sales: 888,
tags: ['专业检测', '生态有机'],
image: 'https://static.tbmall.xin/static/new-home/baokuan.png'
},
{
id: 1003,
name: '江苏白凤水蜜桃 应季水果 &新鲜礼盒装',
title: '江苏白凤水蜜桃 应季水果 &新鲜礼盒装',
price: '34.88',
sales: 888,
tags: ['专业检测', '生态有机'],
image: 'https://static.tbmall.xin/static/new-home/cart.png'
},
{
id: 1004,
name: '季新鲜 &进口山竹时令 &老树麻竹整箱送礼',
title: '季新鲜 &进口山竹时令 &老树麻竹整箱送礼',
price: '52.00',
sales: 888,
tags: ['专业检测', '生态有机'],
image: 'https://static.tbmall.xin/static/new-home/huiyuan.png'
}
]
},
{
id: 102,
name: '生鲜食材',
icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
foods: [
{
id: 1005,
name: '精选新鲜三文鱼中段切片 200g刺身级',
title: '精选新鲜三文鱼中段切片 200g刺身级',
price: '59.90',
sales: 1200,
tags: ['冷链速达', '产地直供'],
image: 'https://static.tbmall.xin/static/new-home/baokuan.png'
},
{
id: 1006,
name: '澳洲进口谷饲安格斯原切雪花牛肉卷 500g',
title: '澳洲进口谷饲安格斯原切雪花牛肉卷 500g',
price: '89.00',
sales: 650,
tags: ['原切牛肉', '品质严选'],
image: 'https://static.tbmall.xin/static/new-home/cart.png'
}
]
},
{
id: 103,
name: '米面粮油',
icon: 'https://static.tbmall.xin/static/new-home/cart.png',
foods: [
{
id: 1007,
name: '五常大米 优质长粒香米 5kg真空包装',
title: '五常大米 优质长粒香米 5kg真空包装',
price: '49.90',
sales: 3400,
tags: ['核心产区', '自然醇香'],
image: 'https://static.tbmall.xin/static/new-home/xinren.png'
}
]
},
{
id: 104,
name: '零食饮料',
icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
foods: [
{
id: 1008,
name: '花生造黑松露黑麦苏打饼干 590g*2盒',
title: '花生造黑松露黑麦苏打饼干 590g*2盒',
price: '29.90',
sales: 2300,
tags: ['零反式脂肪酸', '拒绝油炸'],
image: 'https://static.tbmall.xin/static/new-home/huiyuan.png'
}
]
},
{
id: 105,
name: '滋补养生',
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
foods: [
{
id: 1009,
name: '青海野生黑枸杞干果 250g特级罐装',
title: '青海野生黑枸杞干果 250g特级罐装',
price: '78.00',
sales: 510,
tags: ['正宗原产', '花青素丰富'],
image: 'https://static.tbmall.xin/static/new-home/nangua.png'
}
]
},
{
id: 106,
name: '非遗传承',
icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
foods: []
},
{
id: 107,
name: '家居百货',
icon: 'https://static.tbmall.xin/static/new-home/cart.png',
foods: []
},
{
id: 108,
name: '美妆护肤',
icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
foods: []
},
{
id: 109,
name: '其他特色',
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
foods: []
}
];
export default {
components: { CustomTabBar, TopSafe },
data() {
return {
platformType: true,
currentCategoryIndex: 0,
categoryList: [], // 一级分类列表 (parentId = 0)
currentCategoryIndex: 0, // 当前选中的一级分类索引
subCategoryList: [], // 二级分类列表 (parentId = 一级ID)
currentSubCategoryIndex: 0, // 当前选中的二级分类索引
displayProducts: [], // 三级商品列表 (goods/searchList)
showAllCategories: false,
sortType: 'default', // default | sales | price
sortAsc: true,
categoryList: [],
sortBy: 'relevance', // 'relevance' | 'sales' | 'price'
sortOrder: 'asc', // 'asc' | 'desc'
capsuleTop: 0,
defaultIcon: 'https://static.tbmall.xin/static/new-home/xinren.png',
defaultProductImg: 'https://static.tbmall.xin/static/new-home/nangua.png'
defaultProductImg: 'https://static.tbmall.xin/static/new-home/nangua.png',
isFromSortShop: false,
loading: false,
loadingMore: false,
noMore: false,
page: 1,
pageSize: 10
};
},
computed: {
@@ -311,22 +203,8 @@ export default {
currentCategory() {
return this.categoryList[this.currentCategoryIndex] || null;
},
displayProducts() {
if (!this.currentCategory) return [];
let list = this.currentCategory.foods || this.currentCategory.productList || [];
if (!list || list.length === 0) return [];
list = [...list];
if (this.sortType === 'sales') {
list.sort((a, b) => (Number(b.sales) || 0) - (Number(a.sales) || 0));
} else if (this.sortType === 'price') {
if (this.sortAsc) {
list.sort((a, b) => (Number(a.price) || 0) - (Number(b.price) || 0));
} else {
list.sort((a, b) => (Number(b.price) || 0) - (Number(a.price) || 0));
}
}
return list;
currentSubCategory() {
return this.subCategoryList[this.currentSubCategoryIndex] || null;
}
},
onShow() {
@@ -342,42 +220,207 @@ export default {
if (menu && menu.bottom) {
this.capsuleTop = menu.bottom + 6;
}
} catch (e) {}
} catch (e) { }
/*#endif*/
this.fetchCategories();
const isBackFromSortShop = this.isFromSortShop;
this.isFromSortShop = false;
this.fetchCategories(isBackFromSortShop);
},
methods: {
async fetchCategories() {
// 异步查询级联分类接口 (common/getCascadeCategory)
async getCategoryApi(pId) {
try {
const resp = await getCascadeCategory({ parentId: 0 });
if (resp && resp.bizcode === 100 && resp.data && resp.data.length > 0) {
this.categoryList = resp.data;
} else {
this.categoryList = MOCK_CATEGORIES;
const resp = await getCascadeCategory({ parentId: pId });
if (resp && resp.bizcode === 100 && Array.isArray(resp.data)) {
return resp.data;
}
} catch (e) {
console.log("使用模拟分类数据", e);
this.categoryList = MOCK_CATEGORIES;
console.error("getCascadeCategory error:", e);
}
return [];
},
selectCategory(index, closePopup = false) {
// 1. 刚进来获取一级分类 (parentId = 0)
async fetchCategories(isBack = false) {
try {
const topList = await this.getCategoryApi(0);
this.categoryList = topList || [];
} catch (e) {
console.error("获取一级分类失败:", e);
this.categoryList = [];
}
if (this.categoryList.length === 0) {
this.subCategoryList = [];
this.displayProducts = [];
return;
}
let targetIndex = 0;
if (isBack) {
const sortId = uni.getStorageSync("sortId");
if (sortId) {
let idx = this.categoryList.findIndex(item => item.id === sortId);
if (idx !== -1) targetIndex = idx;
else if (this.currentCategoryIndex >= 0 && this.currentCategoryIndex < this.categoryList.length) {
targetIndex = this.currentCategoryIndex;
}
}
} else {
uni.removeStorageSync("sortId");
uni.removeStorageSync("subSortId");
targetIndex = 0;
}
this.selectCategory(targetIndex, false, isBack);
},
// 2. 选择一级分类，根据其 id 获取二级分类 (parentId = 该一级id)
async selectCategory(index, closePopup = false, isBack = false) {
this.currentCategoryIndex = index;
if (closePopup) {
this.showAllCategories = false;
}
const category = this.categoryList[index];
if (!category || !category.id) {
this.subCategoryList = [];
this.displayProducts = [];
return;
}
uni.setStorageSync("sortId", category.id);
this.loading = true;
try {
const subList = await this.getCategoryApi(category.id);
this.subCategoryList = subList || [];
if (this.subCategoryList.length === 0) {
this.displayProducts = [];
this.loading = false;
return;
}
let targetSubIndex = 0;
if (isBack) {
const subSortId = uni.getStorageSync("subSortId");
if (subSortId) {
let sIdx = this.subCategoryList.findIndex(item => item.id === subSortId);
if (sIdx !== -1) targetSubIndex = sIdx;
}
}
this.selectSubCategory(targetSubIndex);
} catch (e) {
console.error("获取二级分类失败:", e);
this.subCategoryList = [];
this.displayProducts = [];
this.loading = false;
}
},
// 3. 选择二级分类，更新当前二级分类并调用 goods/searchList 获取商品列表
selectSubCategory(subIndex) {
this.currentSubCategoryIndex = subIndex;
const subCat = this.subCategoryList[subIndex];
if (subCat && subCat.id) {
uni.setStorageSync("subSortId", subCat.id);
}
this.fetchGoodsList(false);
},
// 4. 调用 /goods/searchList 接口获取商品列表 (支持分页与排序)
async fetchGoodsList(isLoadMore = false) {
const currentSubCat = this.subCategoryList[this.currentSubCategoryIndex];
if (!currentSubCat || !currentSubCat.id) {
this.displayProducts = [];
this.loading = false;
this.loadingMore = false;
return;
}
if (isLoadMore) {
if (this.loadingMore || this.noMore) return;
this.loadingMore = true;
this.page++;
} else {
this.loading = true;
this.page = 1;
this.noMore = false;
}
const params = {
categoryId: currentSubCat.id,
page: this.page,
pageSize: this.pageSize,
sortBy: this.sortBy,
sortOrder: this.sortOrder
};
try {
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
let list = [];
if (Array.isArray(resp.data)) {
list = resp.data;
} else if (resp.data && Array.isArray(resp.data.entitys)) {
list = resp.data.entitys;
} else if (resp.data && Array.isArray(resp.data.list)) {
list = resp.data.list;
}
if (isLoadMore) {
this.displayProducts = [...this.displayProducts, ...list];
} else {
this.displayProducts = list;
}
if (list.length < this.pageSize) {
this.noMore = true;
}
} else {
if (!isLoadMore) {
this.displayProducts = [];
}
this.noMore = true;
}
} catch (e) {
console.error("searchList error:", e);
if (!isLoadMore) {
this.displayProducts = [];
}
} finally {
this.loading = false;
this.loadingMore = false;
}
},
// 5. 右侧商品列表触底触发分页加载
onReachBottomGoods() {
if (!this.noMore && !this.loadingMore && !this.loading) {
this.fetchGoodsList(true);
}
},
toggleAllCategories() {
this.showAllCategories = !this.showAllCategories;
},
// 6. 排序作用于 goods/searchList 接口
setSort(type) {
if (this.sortType === type && type === 'price') {
this.sortAsc = !this.sortAsc;
if (this.sortBy === type) {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortType = type;
this.sortAsc = true;
this.sortBy = type;
this.sortOrder = 'asc';
}
this.fetchGoodsList(false);
},
limit999(n) {
const num = Number(n);
if (isNaN(num) || num < 10000) {
@@ -385,12 +428,15 @@ export default {
}
return `${Math.floor(num / 10000)}万+`;
},
jumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/insights/search",
});
},
jumpInfo(item) {
this.isFromSortShop = true;
uni.navigateTo({
url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${encodeURIComponent(item.name || item.title || '')}`,
});
@@ -422,9 +468,12 @@ page {
.top_fixed_header {
position: relative;
z-index: 100;
background: #ffffff;
background: linear-gradient(180deg, #F2EBFF 0%, #FFFFFF 100%);
border-bottom-left-radius: 36rpx;
border-bottom-right-radius: 36rpx;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
box-shadow: none;
transition: all 0.2s;
&.is_expanded {
@@ -693,7 +742,7 @@ page {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #f5f5f5;
border-bottom: none;
flex-shrink: 0;
.cat_title_text {
@@ -712,15 +761,24 @@ page {
color: #999999;
display: flex;
align-items: center;
cursor: pointer;
&.active {
color: #7a35f6;
font-weight: bold;
}
.sort_arrow {
font-size: 20rpx;
margin-left: 4rpx;
.sort_icon_box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 6rpx;
line-height: 1;
.icon_up {
margin-bottom: 2rpx;
}
}
}
}
@@ -853,5 +911,12 @@ page {
margin-top: 20rpx;
}
}
.load_more_tips {
text-align: center;
font-size: 24rpx;
color: #999999;
padding: 24rpx 0;
}
}
</style>