From f103df619b114c59b01b12a794fcade8de57af3f Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Mon, 9 Jun 2025 15:39:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5=E6=A8=A1?=
=?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/index/category-ele.vue | 217 ++++
pages/index/index.vue | 1894 +++++++++++++++++++++++++++++++++-
2 files changed, 2062 insertions(+), 49 deletions(-)
create mode 100644 pages/index/category-ele.vue
diff --git a/pages/index/category-ele.vue b/pages/index/category-ele.vue
new file mode 100644
index 0000000..87b8f4f
--- /dev/null
+++ b/pages/index/category-ele.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+ 分类
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+ 全部
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 12aacc7..ee4d91b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,7 +2,7 @@
-
+
@@ -27,8 +27,189 @@
-
-
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首页
+
+
+ 新品
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首页
+
+
+ 新品
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 请输入商品名称
+
+
+
+ 搜索
+
+
+
+
+
+
+
+
+
@@ -50,7 +231,7 @@
分类
-
+
@@ -65,57 +246,61 @@
-
+
-
-
-
- #新品上架#
-
- 更多好物
-
-
-
-
-
-
-
-
- {{ item.title }}
-
- ￥{{ item.min_price }}
- ￥{{ item.original_price }}
+
+
+
+ #新品上架#
+
+ 更多好物
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+ ￥{{ item.min_price }}
+ ￥{{ item.original_price }}
+
@@ -284,9 +469,15 @@
+
-
+
+
+
+
+
+
@@ -300,6 +491,323 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block2.title }}
+
+ 更多
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block3.title }}
+
+ 更多
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.recommandGoods.block2.title }}
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+ {{ item.title }}
+
+
+ ￥{{ item.min_price }}
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.recommandGoods.block3.title }}
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+ {{ item.title }}
+
+
+ ￥{{ item.min_price }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.recommandGoods.block4.title }}
+
+
+ 好物推荐
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.recommandGoods.block5.title }}
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+ {{ item.title }}
+
+
+ ￥{{ item.min_price }}
+ ￥{{ item.original_price }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block1.title }}
+
+ 更多
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block2.title }}
+
+ 更多
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block3.title }}
+
+ 更多
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block1.title }}
+
+ 更多
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block2.title }}
+
+ 更多
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
+ {{ themeConfigData.layoutData.jingang.block3.title }}
+
+ 更多
+
+
+
+
+
+
+
+ {{ item.name }}
+ ￥{{ item.price }}
+
+
+
+
+
+
@@ -324,7 +832,7 @@
-->
-
+
拼命加载中...
@@ -371,6 +879,7 @@
import componentMagicList from '@/components/magic-list/magic-list';
import componentDiy from '@/components/diy/diy';
import componentChoiceLocation from '@/components/choice-location/choice-location';
+ import categoryeEle from './category-ele.vue';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0, true));
@@ -481,10 +990,20 @@
},
},
theme_loading: true,
+ categoryIndex: '',
+ layout5_tabWidths: [],
+ layout5_scrollLeft: 0,
+ layout5_tabWidths1: [],
+ layout5_scrollLeft1: 0,
+ sort_all: true,
+ nav_active_index: 0,
+ nav_active_item_two_index: 0,
+ data_content: '',
};
},
components: {
+ categoryeEle,
componentCommon,
componentSearch,
componentQuickNav,
@@ -543,6 +1062,110 @@
}
},
methods: {
+ // 初始化获取所有选项卡的宽度
+ initTabWidths5() {
+ const query = uni.createSelectorQuery().in(this);
+ query
+ .selectAll('.tab-item0')
+ .boundingClientRect((rects) => {
+ this.layout5_tabWidths = rects.map((rect) => rect.width);
+ })
+ .exec();
+
+ query
+ .selectAll('.tab-item1')
+ .boundingClientRect((rects) => {
+ this.layout5_tabWidths1 = rects.map((rect) => rect.width);
+ })
+ .exec();
+ },
+ // 处理选项卡点击
+ page5handleTabClick(index, key) {
+ this[key] = index;
+
+ if (key == 'nav_active_index') {
+ // 重置二级分类的索引和滚动条位置
+
+ // 检查是否有二级分类
+ let arr = this.category_list[this.nav_active_index].items;
+
+ this.nav_active_item_two_index = arr.length ? 0 : -1;
+ this.scrollLeft1 = 0;
+
+ // 计算需要滚动的距离使目标选项卡居中
+ let scrollLeft = 0;
+ for (let i = 0; i < index; i++) {
+ scrollLeft += this.layout5_tabWidths[i] || 0;
+ }
+
+ // 获取容器宽度和当前选项卡宽度
+ const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
+ const currentTabWidth = this.layout5_tabWidths[index] || 0;
+
+ // 计算居中偏移量
+ scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;
+
+ // 确保滚动距离不小于0
+ scrollLeft = Math.max(0, scrollLeft);
+
+ // 设置滚动位置
+ this.layout5_scrollLeft = scrollLeft;
+ }
+
+ if (key == 'nav_active_item_two_index') {
+ // 计算需要滚动的距离使目标选项卡居中
+ let scrollLeft1 = 0;
+ for (let i = 0; i < index; i++) {
+ scrollLeft1 += this.layout5_tabWidths1[i] || 0;
+ }
+
+ // 获取容器宽度和当前选项卡宽度
+ const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
+ const currentTabWidth = this.layout5_tabWidths1[index] || 0;
+
+ // 计算居中偏移量
+ scrollLeft1 = scrollLeft1 + currentTabWidth / 2 - containerWidth / 2;
+
+ // 确保滚动距离不小于0
+ scrollLeft1 = Math.max(0, scrollLeft1);
+
+ // 设置滚动位置
+ this.layout5_scrollLeft1 = scrollLeft1;
+ }
+
+ this.data_content = this.category_list[this.nav_active_index] || null;
+ this.data_page = 1;
+ this.data_list = [];
+ this.data_list_loding_status = 1;
+ this.data_bottom_line_status = false;
+ this.sort_all = true;
+
+ this.getCategoryGoods();
+
+ this.$nextTick(() => {
+ this.initTabWidths5();
+ });
+ },
+ // 分类改变
+ categoryChange({ key, index }) {
+ console.log(key, index);
+
+ if (key == -1) {
+ this.data_content = '';
+ this.nav_active_index = -1;
+ this.nav_active_item_two_index = -1;
+ } else {
+ this[key] = index;
+
+ this.data_content = this.category_list[this.nav_active_index] || null;
+ this.data_page = 1;
+ this.data_list = [];
+ this.data_list_loding_status = 1;
+ this.data_bottom_line_status = false;
+ }
+
+ this.getCategoryGoods();
+ },
// 获取首页主题配置
getThemeConfig() {
this.theme_loading = true;
@@ -554,6 +1177,12 @@
console.log('getThemeConfig===', JSON.parse(res.data.data.json_data));
if (res.data.code == 0) {
this.themeConfigData = JSON.parse(res.data.data.json_data);
+ if (this.themeConfigData.layout == 'layout4') {
+ uni.setNavigationBarColor({
+ frontColor: '#000000',
+ backgroundColor: '#ffffff',
+ });
+ }
} else {
console.log('主题获取失败===', res.data.msg);
}
@@ -565,12 +1194,57 @@
},
});
},
+ // 标题跳转
+ titleUrl(item) {
+ if (item.category) {
+ let ids = JSON.stringify(item.category.path).split(',');
+
+ console.log(ids);
+
+ let index = -1; // 一级分类
+ let itemtwoindex = -1; // 二级分类
+ let itemthreeindex = -1; // 三级分类
+
+ console.log('分类数据===', this.category_list);
+
+ this.category_list.map((item, itemIndex) => {
+ if (item.id == ids[0]) {
+ index = itemIndex;
+ if (ids.length > 1) {
+ item.items.map((val, idx) => {
+ if (val.id == ids[1]) {
+ itemtwoindex = idx;
+ if (ids.length > 2) {
+ val.items.map((v, i) => {
+ if (v.id == ids[2]) {
+ itemthreeindex = i;
+ }
+ });
+ }
+ }
+ });
+ }
+ }
+ });
+
+ console.log({
+ index,
+ itemtwoindex,
+ itemthreeindex,
+ });
+
+ uni.setStorageSync('categoryIndex', `${index},${itemtwoindex},${itemthreeindex}`);
+ }
+ uni.switchTab({
+ url: `/pages/goods-category/goods-category`,
+ });
+ },
// 分类加商品跳转
goodsHandle(e, item) {
console.log(e);
console.log(item);
if (item.isCategory) {
- let ids = JSON.stringify(item.path).split(',');
+ let ids = item.path.split(',');
console.log(ids);
@@ -630,12 +1304,31 @@
},
// 根据分类获取商品列表
getCategoryGoods() {
+ // 请求参数
+ var post_data = {
+ page: this.data_page,
+ wd: this.search_keywords_value || '',
+ };
+ // 分类id
+
+ post_data['category_id'] = '';
+ if ((this.data_content || null) != null) {
+ // 主分类id
+ post_data['category_id'] = this.data_content['id'];
+ // 是否选中了二级分类
+ if (this.nav_active_item_two_index != -1) {
+ post_data['category_id'] = this.data_content['items'][this.nav_active_item_two_index]['id'];
+ }
+ // 是否选中了三级分类
+ if (this.data_three_content != null && this.nav_active_item_three_index != -1) {
+ post_data['category_id'] = this.data_three_content['items'][this.nav_active_item_three_index]['id'];
+ }
+ }
+
uni.request({
url: app.globalData.get_request_url('index2', 'search'),
method: 'get',
- data: {
- category_id: this.currentTab == 0 ? '' : this.category_list[this.currentTab - 1].id,
- },
+ data: post_data,
dataType: 'json',
success: (res) => {
console.log('根据分类获取商品列表===', res);
@@ -754,6 +1447,10 @@
console.log('this.scrollLeft===', this.scrollLeft);
+ this.nav_active_index = index - 1;
+
+ this.data_content = this.category_list[this.nav_active_index] || null;
+
this.getCategoryGoods();
},
// 获取分类
@@ -773,6 +1470,7 @@
this.$nextTick(() => {
setTimeout(() => {
this.initTabWidths();
+ this.initTabWidths5();
}, 1000);
});
} else {
@@ -983,16 +1681,33 @@