From bcb504ddf4a673a33fbf118d99761b9e3cd3438d Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Wed, 10 Dec 2025 19:57:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=9F=8E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 conf/config.js                   |   6 +-
 lib/java110/utils/StorageUtil.js |  53 +++
 pages/mall/mall copy.vue         | 187 +++++++++
 pages/mall/mall.css              | 676 +++++++++++++++++++++++++++++++
 pages/mall/mall.vue              | 656 ++++++++++++++++++++++++------
 5 files changed, 1447 insertions(+), 131 deletions(-)
 create mode 100644 pages/mall/mall copy.vue
 create mode 100644 pages/mall/mall.css

diff --git a/conf/config.js b/conf/config.js
index ddbd990..bed0e05 100644
--- a/conf/config.js
+++ b/conf/config.js
@@ -15,13 +15,13 @@ const baseUrl = '/';
 
 // #ifndef H5
 //服务器域名 小程序 或者 app 时 后端地址 
-const baseUrl = 'http://wuye.himac.cloud/';
+const baseUrl = 'http://demo.homecommunity.cn/';
 // #endif
 
-let commonBaseUrl = 'http://wuye.himac.cloud/';
+let commonBaseUrl = 'http://demo.homecommunity.cn/';
 
 //商城的url
-let mallUrl = 'http://mallapp.himac.cloud/';
+let mallUrl = 'http://mallapp.homecommunity.cn/';
 
 //商城小程序ID
 let mallMinAppId = "xx";
diff --git a/lib/java110/utils/StorageUtil.js b/lib/java110/utils/StorageUtil.js
index c819c2b..5a6e19f 100644
--- a/lib/java110/utils/StorageUtil.js
+++ b/lib/java110/utils/StorageUtil.js
@@ -120,4 +120,57 @@ export function saveWAppId(_wAppId){
 
 export function saveOpenId(_openId){
 	uni.setStorageSync(CURRENT_OPEN_ID, _openId);
+}
+
+/**
+ * 获取JSON格式的存储数据
+ * @param {String} _key 存储键
+ * @return {Object} JSON解析后的对象，如果不存在则返回null
+ */
+export function getJson(_key){
+	debug('StorageUtil','getJson',_key);
+	
+	let _value = uni.getStorageSync(_key);
+	
+	debug('StorageUtil','getJson',_value);
+	
+	if(!_value){
+		return null;
+	}
+	
+	// 如果已经是对象，直接返回
+	if(typeof _value === 'object'){
+		return _value;
+	}
+	
+	// 如果是字符串，尝试解析JSON
+	if(typeof _value === 'string'){
+		try {
+			return JSON.parse(_value);
+		} catch(e) {
+			console.error('JSON解析失败', e);
+			return null;
+		}
+	}
+	
+	return _value;
+}
+
+/**
+ * 保存JSON格式的数据到存储
+ * @param {String} _key 存储键
+ * @param {Object} _value 要存储的对象
+ */
+export function saveJson(_key,_value){
+	debug('StorageUtil','saveJson',_key);
+	
+	// 如果已经是字符串，直接存储
+	if(typeof _value === 'string'){
+		uni.setStorageSync(_key, _value);
+	} else {
+		// 否则序列化为JSON字符串
+		uni.setStorageSync(_key, JSON.stringify(_value));
+	}
+	
+	debug('StorageUtil','saveJson',JSON.stringify(_value));
 }
\ No newline at end of file
diff --git a/pages/mall/mall copy.vue b/pages/mall/mall copy.vue
new file mode 100644
index 0000000..8cfeb95
--- /dev/null
+++ b/pages/mall/mall copy.vue	
@@ -0,0 +1,187 @@
+<template>
+	<view>
+		<!-- 搜索框 -->
+		<view class="cu-bar search bg-white nav-list">
+			<view class="search-form round" @tap="toSearch()">
+				<text class="cuIcon-search"></text>
+				<input :adjust-position="false" type="text" placeholder="请输入商品名" @tap="toSearch()"
+					></input>
+			</view>
+			<view class="text-white" @tap="toSelectArea()">
+				{{selectCommunityName}}<text class="cuIcon-refresharrow"></text>
+			</view>
+		</view>
+		<!-- 店铺类型 -->
+		<view class="">
+			<scroll-view scroll-x class="nav nav-scroll  padding-bottom-xs" scroll-with-animation >
+				<view class="cu-item text-white" :class="item.shopTypeId==shopTypeId?'nav-cur':''"
+					v-for="(item,index) in navList" :key="index" @tap="selectType(index)" :data-id="index">
+					{{item.typeName}}
+				</view>
+			</scroll-view>
+		</view>
+		<view class="padding-lr-sm">
+			<!-- 广告 -->
+			<vc-ads></vc-ads>
+			<!-- 商圈菜单-->
+			<vc-category :category-list="categoryList"></vc-category>
+			<seckill-view></seckill-view>
+			<group-view></group-view>
+			<!-- 商圈商品 -->
+			<vc-recommend ref="vcRecommendRef"></vc-recommend>
+			<!-- <vc-shop ref="vcShopRef"></vc-shop> -->
+		</view>
+		<vc-bottom-black></vc-bottom-black>
+	</view>
+</template>
+
+<script>
+	import fixedSearch from '../../components/fixed-search/fixed-search.vue';
+
+	import vcCategory from '@/components/vc-category/vc-category.vue';
+
+	import vcShop from '@/components/vc-shop/vc-shop.vue';
+
+	import vcRecommend from '@/components/vc-recommend/vc-recommend.vue';
+
+	import vcAds from '@/components/vc-ads/vc-ads.vue';
+
+	import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';
+
+	import param from '../../constant/MappingConstant.js';
+
+	import flixedadd from "../../components/flixedadd/flixedadd.vue";
+	
+	import groupView from '@/components/index/group-view.vue';
+	import seckillView from '@/components/index/seckill-view.vue';
+
+	import {
+		getMallIndexCategoryList,
+		queryShopType
+	} from '../../api/mall/mallApi.js'
+	import {
+		getMallCommunityId,
+		getMallCommunityName
+	} from '../../api/community/communityApi.js';
+	import {
+		sliceArray
+	} from '../../lib/java110/utils/ArrayUtil.js'
+
+	export default {
+		data() {
+			return {
+				navList: [],
+				shopTypeId:'0',
+				selectCommunityName: "",
+				categoryList: [],
+				addlistdata: [{
+					title: "我的发布",
+					src: "/static/images/market_my.png"
+				}]
+			}
+		},
+		components: {
+			vcCategory,
+			vcRecommend,
+			vcAds,
+			vcShop,
+			vcBottomBlack,
+			groupView,
+			seckillView
+		},
+		onLoad(options) {
+			let that = this;
+			this.vc.onLoad(options);
+			this._getCategoryList();
+		},
+		onShow: function() {
+			this.selectCommunityName = getMallCommunityName();
+			if(this.$refs.vcShopRef){
+				this.$refs.vcShopRef._loadCommunityShops();
+			}
+			if(this.$refs.vcRecommendRef){
+				this.$refs.vcRecommendRef._loadRecommendProdcut();
+			}
+			this.shopTypeId = 0
+		},
+		onReachBottom() {
+			this.$refs.vcRecommendRef._loadRecommendProdcut();
+		},
+		methods: {
+			selectType(index) {
+				let shopTypeId = this.navList[index].shopTypeId;
+				this.shopTypeId = shopTypeId;
+				if(this.shopTypeId == 0){
+					return;//首页不跳转
+				}
+				this.vc.navigateToMall({
+					url: '/pages/market/market?typeId=' + shopTypeId
+				})
+			},
+			_getCategoryList() {
+				let _that = this
+				let params = {
+					page: 1,
+					row: 100,
+					isShow: "Y",
+					shopId: '9999',
+					typeCd: '2002'
+				}
+				getMallIndexCategoryList(params)
+					.then(function(result) {
+						let categoryData = result.data
+						_that.categoryList = sliceArray(categoryData, 8)
+					});
+				params = {
+					page: 1,
+					row: 100
+				}
+				queryShopType(params)
+					.then(function(result) {
+						_that.navList = result.data
+						_that.navList.unshift({
+							"shopTypeId": "0",
+							"typeName": "首页"
+						})
+					})
+			},
+			addlisttap: function(index) {
+				/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
+				this.vc.loginAuth();
+				let _that = this;
+				if (index == 0) {
+					this.vc.navigateTo({
+						url: '/pages/myOrder/myOrder'
+					}, true);
+					return;
+				}
+			},
+			//搜索跳转
+			toSearch:function() {
+				this.vc.navigateToMall({
+					url: '/pages/goods/HM-search?searchType=3'
+				})
+			},
+			//切换小区
+			toSelectArea(e) {
+				uni.navigateTo({
+					url:'/pages/mall/selectcommunity'
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav-list {
+		background-image: linear-gradient(45deg, #FA2E1B, #FA2E1B) !important;
+	}
+	.nav-scroll{
+		background-color: #FA2E1B;
+	}
+	
+	.nav-cur{
+		font-weight:bold;
+		border-bottom:1px solid #FFFFFF;
+	}
+</style>
diff --git a/pages/mall/mall.css b/pages/mall/mall.css
new file mode 100644
index 0000000..01299b5
--- /dev/null
+++ b/pages/mall/mall.css
@@ -0,0 +1,676 @@
+/* ========= 全局 & 重置 ========= */
+.app {
+	width: 100%;
+	max-width: 100%;
+	background: #f5f5f5;
+	position: relative;
+	padding-bottom: 104rpx;
+	min-height: 100vh;
+}
+
+/* ========= 顶部栏 ========= */
+.header {
+	background: #fa2e1b;
+	padding: 20rpx 24rpx 16rpx;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+	position: sticky;
+	top: 0;
+	z-index: 20;
+}
+
+.header-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 16rpx;
+}
+
+.location {
+	display: flex;
+	align-items: center;
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #ffffff;
+}
+
+.location-icon {
+	width: 28rpx;
+	height: 28rpx;
+	border-radius: 50%;
+	background: #fa2e1b;
+	margin-right: 8rpx;
+	position: relative;
+}
+
+.location-icon::after {
+	content: "";
+	position: absolute;
+	left: 8rpx;
+	top: 6rpx;
+	width: 12rpx;
+	height: 16rpx;
+	border-radius: 12rpx 12rpx 12rpx 12rpx;
+	background: #ffffff;
+}
+
+.location-arrow {
+	margin-left: 8rpx;
+	width: 0;
+	height: 0;
+	border-top: 10rpx solid #ffffff;
+	border-left: 8rpx solid transparent;
+	border-right: 8rpx solid transparent;
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	font-size: 24rpx;
+	color: #333333;
+}
+
+/* 搜索栏 */
+.search-wrap {
+	background: #fa2e1b;
+	padding-bottom: 16rpx;
+}
+
+.search-bar {
+	display: flex;
+	background: #ffffff;
+	border-radius: 36rpx;
+	padding: 4rpx 6rpx 4rpx 20rpx;
+	align-items: center;
+	height: 68rpx;
+	box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+.search-input {
+	flex: 1;
+	border: none;
+	outline: none;
+	font-size: 26rpx;
+	color: #333333;
+	background: transparent;
+}
+
+.search-input::placeholder {
+	color: #d0d0d0;
+}
+
+.search-icon {
+	width: 28rpx;
+	height: 28rpx;
+	border-radius: 50%;
+	border: 4rpx solid #fa2e1b;
+	position: relative;
+	margin-right: 8rpx;
+	flex-shrink: 0;
+}
+
+.search-icon::after {
+	content: "";
+	position: absolute;
+	width: 14rpx;
+	height: 4rpx;
+	background: #fa2e1b;
+	right: -8rpx;
+	bottom: -2rpx;
+	transform: rotate(40deg);
+	border-radius: 4rpx;
+}
+
+.search-btn {
+	width: 140rpx;
+	height: 60rpx;
+	border-radius: 32rpx;
+	border: none;
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #ffffff;
+	background: #fa2e1b;
+	box-shadow: 0 4rpx 0 rgba(250, 46, 27, 0.65);
+	margin-left: 12rpx;
+	line-height: 60rpx;
+	padding: 0;
+	flex-shrink: 0;
+}
+
+.search-btn::after {
+	border: none;
+}
+
+/* ========= 顶部分类图标 ========= */
+.nav-panel {
+	background: #ffffff;
+	padding-top: 20rpx;
+	padding-bottom: 12rpx;
+	border-bottom: 2rpx solid #f0f0f0;
+}
+
+.nav-grid {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0 20rpx;
+}
+
+.nav-item {
+	width: 20%;
+	padding: 16rpx 0 8rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.nav-icon {
+	width: 84rpx;
+	height: 84rpx;
+	border-radius: 28rpx;
+	margin-bottom: 8rpx;
+	position: relative;
+}
+
+.category-image-bg {
+	display: block;
+	width: 84rpx;
+	height: 84rpx;
+	border-radius: 28rpx;
+}
+
+.nav-title {
+	font-size: 24rpx;
+	color: #333333;
+}
+
+/* 单个图标颜色（红色主题） */
+.nav-icon.takeout {
+	background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
+}
+
+.nav-icon.group {
+	background: linear-gradient(135deg, #ff5252, #fa2e1b);
+}
+
+.nav-icon.hotel {
+	background: linear-gradient(135deg, #7dd5ff, #36a7ff);
+}
+
+.nav-icon.flash {
+	background: linear-gradient(135deg, #ff4757, #fa2e1b);
+}
+
+.nav-icon.movie {
+	background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
+}
+
+.nav-icon.beauty {
+	background: linear-gradient(135deg, #ff5252, #fa2e1b);
+}
+
+.nav-icon.fun {
+	background: linear-gradient(135deg, #ff7ae0, #ff49b4);
+}
+
+.nav-icon.sports {
+	background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
+}
+
+.nav-icon.hair {
+	background: linear-gradient(135deg, #ff9ec5, #ff657a);
+}
+
+.nav-icon.show {
+	background: linear-gradient(135deg, #ff5252, #fa2e1b);
+}
+
+.nav-icon.station {
+	background: linear-gradient(135deg, #66b6ff, #3388ff);
+}
+
+.nav-icon.life {
+	background: linear-gradient(135deg, #35d6ff, #1d9dff);
+}
+
+.nav-icon.medical {
+	background: linear-gradient(135deg, #5ec8ff, #297fff);
+}
+
+.nav-icon.cosmetic {
+	background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
+}
+
+.nav-icon.run {
+	background: linear-gradient(135deg, #ff5252, #fa2e1b);
+}
+
+/* ========= 秒杀横滑区域 ========= */
+.section {
+	margin-top: 16rpx;
+	background: #ffffff;
+}
+
+.section-header {
+	display: flex;
+	align-items: baseline;
+	padding: 20rpx 20rpx 12rpx;
+	font-size: 26rpx;
+}
+
+.section-title-main {
+	color: #333333;
+	font-weight: 600;
+	margin-right: 8rpx;
+}
+
+.section-title-highlight {
+	color: #ff5339;
+	font-size: 28rpx;
+	font-weight: 700;
+	margin-right: 8rpx;
+}
+
+.section-sub {
+	font-size: 22rpx;
+	color: #999999;
+	flex: 1;
+}
+
+.section-more {
+	font-size: 22rpx;
+	color: #999999;
+}
+
+.section-more::after {
+	content: "›";
+	margin-left: 4rpx;
+	font-size: 24rpx;
+}
+
+.flash-list {
+	padding: 0 16rpx 16rpx;
+	white-space: nowrap;
+}
+
+.flash-item {
+	display: inline-block;
+	width: 240rpx;
+	border-radius: 16rpx;
+	background: #ffffff;
+	overflow: hidden;
+	margin-right: 16rpx;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+	position: relative;
+	font-size: 22rpx;
+	vertical-align: top;
+	white-space: normal;
+}
+
+.flash-tag {
+	position: absolute;
+	left: 0;
+	top: 0;
+	background: rgba(250, 46, 27, 0.9);
+	color: #ffffff;
+	font-size: 20rpx;
+	padding: 4rpx 8rpx 4rpx 12rpx;
+	border-bottom-right-radius: 16rpx;
+	font-weight: 600;
+	z-index: 1;
+}
+
+.flash-img {
+	width: 100%;
+	height: 0;
+	padding-bottom: 100%;
+	background: #eee;
+	position: relative;
+	overflow: hidden;
+}
+
+.flash-img image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.flash-info {
+	padding: 8rpx 12rpx 12rpx;
+}
+
+.flash-price-row {
+	display: flex;
+	align-items: baseline;
+	margin-bottom: 6rpx;
+}
+
+.flash-price-symbol {
+	font-size: 20rpx;
+	color: #ff5339;
+	margin-right: 2rpx;
+}
+
+.flash-price {
+	font-size: 32rpx;
+	color: #ff5339;
+	font-weight: 700;
+	margin-right: 6rpx;
+}
+
+.flash-old-price {
+	font-size: 20rpx;
+	color: #999999;
+	text-decoration: line-through;
+}
+
+.flash-btn {
+	position: absolute;
+	right: 0;
+	bottom: 60rpx;
+	background: #ff007d;
+	color: #ffffff;
+	font-size: 22rpx;
+	padding: 8rpx 20rpx;
+	border-radius: 24rpx 0 0 24rpx;
+	font-weight: 700;
+}
+
+.flash-desc {
+	font-size: 22rpx;
+	color: #666666;
+	line-height: 1.2;
+	height: 48rpx;
+	overflow: hidden;
+}
+
+/* ========= 列表卡片 ========= */
+.card-section {
+	margin-top: 16rpx;
+	background: #ffffff;
+	padding-top: 16rpx;
+}
+
+.card-section-header {
+	display: flex;
+	align-items: center;
+	padding: 0 20rpx 12rpx;
+}
+
+.card-section-title {
+	font-size: 26rpx;
+	font-weight: 600;
+	margin-right: 12rpx;
+}
+
+.card-section-tag {
+	font-size: 20rpx;
+	padding: 2rpx 8rpx;
+	border-radius: 6rpx;
+	background: #fa2e1b;
+	color: #ffffff;
+}
+
+.card-list {
+	padding: 0 20rpx 20rpx;
+	white-space: nowrap;
+}
+
+.card-small {
+	display: inline-block;
+	width: 360rpx;
+	background: #ffffff;
+	border-radius: 16rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+	margin-right: 20rpx;
+	vertical-align: top;
+	white-space: normal;
+}
+
+.card-small-img {
+	width: 100%;
+	height: 0;
+	padding-bottom: 100%;
+	background: #eee;
+	position: relative;
+	overflow: hidden;
+}
+
+.card-small-img image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.card-small-body {
+	padding: 12rpx 12rpx 16rpx;
+}
+
+.card-small-title {
+	font-size: 26rpx;
+	color: #333333;
+	line-height: 1.3;
+	margin-bottom: 8rpx;
+}
+
+.card-small-sub {
+	font-size: 22rpx;
+	color: #999999;
+	margin-bottom: 8rpx;
+}
+
+.card-small-price-row {
+	display: flex;
+	align-items: baseline;
+	font-size: 22rpx;
+}
+
+.price-main {
+	color: #ff5339;
+	font-size: 30rpx;
+	font-weight: 600;
+	margin-right: 4rpx;
+}
+
+.price-symbol {
+	color: #ff5339;
+	font-size: 22rpx;
+	margin-right: 2rpx;
+}
+
+.price-old {
+	color: #999999;
+	text-decoration: line-through;
+	margin-left: 8rpx;
+}
+
+.price-desc {
+	margin-left: 12rpx;
+	font-size: 22rpx;
+	color: #999999;
+}
+
+.tag-orange {
+	display: inline-block;
+	font-size: 20rpx;
+	color: #fa2e1b;
+	border-radius: 6rpx;
+	border: 2rpx solid #fa2e1b;
+	padding: 0 6rpx;
+	margin-left: 4rpx;
+}
+
+/* ========= 商品瀑布流列表 ========= */
+.feed-section {
+	margin-top: 16rpx;
+	background: transparent;
+	padding-top: 16rpx;
+}
+
+/* 标签栏 */
+.goods-cell-title {
+	display: flex;
+	align-items: center;
+	padding: 0;
+	overflow-x: auto;
+	white-space: nowrap;
+	border-bottom: 2rpx solid #f0f0f0;
+}
+
+.goods-item-title {
+	flex: 0 0 25%;
+	min-width: 25%;
+	padding: 20rpx 12rpx;
+	text-align: center;
+	cursor: pointer;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.goods-item-title .h4 {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #333333;
+	margin: 0;
+	padding: 0;
+	line-height: 1.2;
+	margin-bottom: 4rpx;
+}
+
+.goods-item-subtitle {
+	font-size: 22rpx;
+	color: #999999;
+	line-height: 1.2;
+}
+
+.goods-item-title.selected-title .goods-item-subtitle {
+	color: #ff4d4f;
+}
+
+.feed-section-header {
+	padding: 0 20rpx 12rpx;
+}
+
+.feed-section-title {
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #333333;
+}
+
+.feed {
+	margin-top: 0;
+	padding: 0 16rpx 5rpx;
+}
+
+.feed-row {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 20rpx;
+}
+
+.feed-card {
+	width: calc(50% - 8rpx);
+	background: #ffffff;
+	border-radius: 16rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+	font-size: 22rpx;
+	position: relative;
+}
+
+.feed-img {
+	width: 100%;
+	height: 0;
+	padding-bottom: 100%;
+	background: #eee;
+	position: relative;
+	overflow: hidden;
+}
+
+.feed-img image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.feed-body {
+	padding: 12rpx 12rpx 14rpx;
+}
+
+.feed-tag-top {
+	position: absolute;
+	left: 12rpx;
+	top: 12rpx;
+	padding: 0 8rpx;
+	height: 32rpx;
+	border-radius: 6rpx;
+	background: rgba(250, 46, 27, 0.95);
+	font-size: 20rpx;
+	display: flex;
+	align-items: center;
+	color: #ffffff;
+	font-weight: 600;
+}
+
+.feed-title {
+	font-size: 24rpx;
+	color: #333333;
+	line-height: 1.3;
+	height: 66rpx;
+	overflow: hidden;
+	margin-bottom: 8rpx;
+}
+
+.feed-sub {
+	font-size: 22rpx;
+	color: #999999;
+	margin-bottom: 8rpx;
+}
+
+.feed-price-row {
+	display: flex;
+	align-items: baseline;
+	font-size: 22rpx;
+}
+
+.feed-price-row .price-symbol {
+	font-size: 20rpx;
+}
+
+.feed-meta-row {
+	margin-top: 4rpx;
+	font-size: 20rpx;
+	color: #999999;
+	display: flex;
+	align-items: center;
+}
+
+.feed-meta-dot {
+	width: 6rpx;
+	height: 6rpx;
+	background: #ccc;
+	border-radius: 50%;
+	margin: 0 6rpx;
+}
+
+.feed-shop {
+	margin-right: 8rpx;
+}
+
+.feed-type-tag {
+	border-radius: 6rpx;
+	border: 2rpx solid #fa2e1b;
+	color: #fa2e1b;
+	padding: 0 4rpx;
+	font-size: 20rpx;
+	margin-right: 6rpx;
+}
+
diff --git a/pages/mall/mall.vue b/pages/mall/mall.vue
index 8cfeb95..d27ea24 100644
--- a/pages/mall/mall.vue
+++ b/pages/mall/mall.vue
@@ -1,187 +1,587 @@
 <template>
-	<view>
-		<!-- 搜索框 -->
-		<view class="cu-bar search bg-white nav-list">
-			<view class="search-form round" @tap="toSearch()">
-				<text class="cuIcon-search"></text>
-				<input :adjust-position="false" type="text" placeholder="请输入商品名" @tap="toSearch()"
-					></input>
+	<view class="app">
+		<!-- 顶部 -->
+		<view class="header">
+			<view class="header-top">
+				<view class="location" @tap="toSelectArea()">
+					<view class="location-icon"></view>
+					<text>{{selectCommunityName }}</text>
+					<view class="location-arrow"></view>
+				</view>
+				<view class="header-actions">
+					<!-- 预留位置，可添加订单、消息等图标 -->
+				</view>
 			</view>
-			<view class="text-white" @tap="toSelectArea()">
-				{{selectCommunityName}}<text class="cuIcon-refresharrow"></text>
+			<view class="search-wrap">
+				<view class="search-bar"  @tap="toSearch()">
+					<view class="search-icon"></view>
+					<input class="search-input" placeholder="搜索商品" disabled="true" />
+					<button class="search-btn" @tap="toSearch()">搜索</button>
+				</view>
 			</view>
 		</view>
-		<!-- 店铺类型 -->
-		<view class="">
-			<scroll-view scroll-x class="nav nav-scroll  padding-bottom-xs" scroll-with-animation >
-				<view class="cu-item text-white" :class="item.shopTypeId==shopTypeId?'nav-cur':''"
-					v-for="(item,index) in navList" :key="index" @tap="selectType(index)" :data-id="index">
-					{{item.typeName}}
+
+		<!-- 顶部分类图标 -->
+		<view class="nav-panel">
+			<view class="nav-grid">
+				<view v-for="(item, index) in categoryList" :key="index" class="nav-item" @tap="_urlJump(item)">
+					<view v-if="!item.hktIcon || item.hktIcon === ''" 
+						class="nav-icon category-image-bg" 
+						:style="{background: getCategoryBgColor(index)}">
+					</view>
+					<image v-else :src="item.hktIcon" class="nav-icon" @error="_loadDefaultImg(item)"></image>
+					<view class="nav-title">{{item.hktName}}</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 一起拼团 1分抢 -->
+		<view class="section" v-if="groupGoodsList && groupGoodsList.length > 0">
+			<view class="section-header">
+				<text class="section-title-main">一起拼团</text>
+				<text class="section-title-highlight">1分抢</text>
+				<text class="section-sub">平台补贴 到店立减</text>
+				<text class="section-more" @tap="toGroupGoodsList">更多</text>
+			</view>
+			<scroll-view class="flash-list" scroll-x="true" show-scrollbar="false" enable-flex="true">
+				<view v-for="(item, index) in groupGoodsList" :key="index" class="flash-item" @tap="toGroupGoods(item)">
+					<view class="flash-tag" v-if="item.userCount">{{item.userCount}}人团</view>
+					<view class="flash-img">
+						<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultGroupImg(item)"></image>
+					</view>
+					<view class="flash-btn">抢</view>
+					<view class="flash-info">
+						<view class="flash-price-row">
+							<text class="flash-price-symbol">￥</text>
+							<text class="flash-price">{{item.groupPrice || 0}}</text>
+							<text class="flash-old-price" v-if="item.price">￥{{item.price}}</text>
+						</view>
+						<view class="flash-desc">{{item.prodName || item.prodDesc || '拼团商品'}}</view>
+					</view>
 				</view>
 			</scroll-view>
 		</view>
-		<view class="padding-lr-sm">
-			<!-- 广告 -->
-			<vc-ads></vc-ads>
-			<!-- 商圈菜单-->
-			<vc-category :category-list="categoryList"></vc-category>
-			<seckill-view></seckill-view>
-			<group-view></group-view>
-			<!-- 商圈商品 -->
-			<vc-recommend ref="vcRecommendRef"></vc-recommend>
-			<!-- <vc-shop ref="vcShopRef"></vc-shop> -->
+
+		<!-- 特价秒杀横滑 -->
+		<view class="card-section" v-if="seckillGoodsList && seckillGoodsList.length > 0">
+			<view class="card-section-header">
+				<view class="card-section-title">特价秒杀</view>
+				<view class="card-section-tag">{{curSecHours.name}}专场</view>
+			</view>
+			<scroll-view class="card-list" scroll-x="true" show-scrollbar="false" enable-flex="true">
+				<view v-for="(item, index) in seckillGoodsList" :key="index" class="card-small" @tap="toSeckillGoods(item)">
+					<view class="card-small-img">
+						<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultSeckillImg(item)"></image>
+					</view>
+					<view class="card-small-body">
+						<view class="card-small-title">{{item.prodName || '秒杀商品'}}</view>
+						<view class="card-small-sub">
+							<text class="price-symbol">￥</text><text class="price-main">{{item.killPrice || 0}}</text>
+							<text class="price-old" v-if="item.price">￥{{item.price}}</text>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+
+		<!-- 商品 Feed 列表 -->
+		<view class="feed-section" v-if="productList && productList.length > 0">
+			<!-- 标签栏 -->
+			<view class="goods-cell-title">
+				<view 
+					v-for="(category, catIndex) in productList" 
+					:key="catIndex"
+					class="goods-item-title" 
+					:class="{ 'selected-title': selectedCategoryIndex === catIndex }"
+					@tap="selectCategory(catIndex)">
+					<h4 class="h4">{{category.categoryName || '推荐商品'}}</h4>
+					<view class="goods-item-subtitle">{{category.categoryDesc }}</view>
+				</view>
+			</view>
+			<!-- 商品列表 -->
+			<view class="feed" v-if="currentCategoryProducts && currentCategoryProducts.length > 0">
+				<view class="feed-row" v-for="(row, rowIndex) in getProductRows(currentCategoryProducts)" :key="rowIndex">
+					<view v-for="(item, itemIndex) in row" :key="itemIndex" class="feed-card" @tap="toGoodsDetail(item)">
+						<view class="feed-img">
+							<image :src="item.coverPhoto || noPic" mode="aspectFit" @error="_loadDefaultProductImg(item)"></image>
+						</view>
+						<view class="feed-body">
+							<view class="feed-title">{{item.prodName || '商品名称'}}</view>
+							<view class="feed-sub" v-if="item.deliveryTime || item.shopName">{{item.deliveryTime || item.shopName}}</view>
+							<view class="feed-price-row">
+								<text class="price-symbol">￥</text><text class="price-main">{{item.price || 0}}</text>
+								<text class="price-old" v-if="item.originalPrice && item.originalPrice > item.price">￥{{item.originalPrice}}</text>
+								<text class="price-desc" v-if="item.sales">月销 {{item.sales}}</text>
+							</view>
+							<view class="feed-meta-row" v-if="item.shopName || item.rating">
+								<text class="feed-shop" v-if="item.shopName">{{item.shopName}}</text>
+								<view class="feed-meta-dot" v-if="item.shopName && item.rating"></view>
+								<text v-if="item.rating">好评 {{item.rating}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
-		<vc-bottom-black></vc-bottom-black>
 	</view>
 </template>
 
 <script>
-	import fixedSearch from '../../components/fixed-search/fixed-search.vue';
-
-	import vcCategory from '@/components/vc-category/vc-category.vue';
-
-	import vcShop from '@/components/vc-shop/vc-shop.vue';
-
-	import vcRecommend from '@/components/vc-recommend/vc-recommend.vue';
-
-	import vcAds from '@/components/vc-ads/vc-ads.vue';
-
-	import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';
-
-	import param from '../../constant/MappingConstant.js';
-
-	import flixedadd from "../../components/flixedadd/flixedadd.vue";
-	
-	import groupView from '@/components/index/group-view.vue';
-	import seckillView from '@/components/index/seckill-view.vue';
-
 	import {
-		getMallIndexCategoryList,
-		queryShopType
+		getMallIndexCategoryList
 	} from '../../api/mall/mallApi.js'
 	import {
+		sliceArray
+	} from '../../lib/java110/utils/ArrayUtil.js';
+	import param from '../../constant/param.js';
+	import {
+		queryGroupGoods,
+		queryProductSeckill,
+		queryMainCategory,
+		queryPhoneMainCategoryProduct
+	} from '../../api/goods/goodsApi.js';
+	import conf from '../../conf/config.js';
+	import {
+		getCommunityId,
+		getCurCommunity,
 		getMallCommunityId,
 		getMallCommunityName
 	} from '../../api/community/communityApi.js';
 	import {
-		sliceArray
-	} from '../../lib/java110/utils/ArrayUtil.js'
+		getJson,
+		saveJson
+	} from '../../lib/java110/utils/StorageUtil.js';
 
 	export default {
 		data() {
 			return {
-				navList: [],
-				shopTypeId:'0',
-				selectCommunityName: "",
+				selectCommunityName: "雪峰商贸城",
+				selectCommunityId: '',
+				COMMUNITY_STORAGE_KEY: 'HC_MALL_SELECTED_COMMUNITY', // 小区缓存键
 				categoryList: [],
-				addlistdata: [{
-					title: "我的发布",
-					src: "/static/images/market_my.png"
-				}]
+				groupGoodsList: [],
+				seckillGoodsList: [],
+				productList: [],
+				selectedCategoryIndex: 0,
+				shopId: param.SHOP_ID_GLOBAL,
+				noPic: conf.commonBaseUrl + 'h5/static/noPic.png',
+				curSecHours: {},
+				secHours: [{
+					name: '08:00',
+					hours: 8,
+				}, {
+					name: '10:00',
+					hours: 10,
+				}, {
+					name: '12:00',
+					hours: 12,
+				}, {
+					name: '14:00',
+					hours: 14,
+				}, {
+					name: '15:00',
+					hours: 15,
+				}, {
+					name: '16:00',
+					hours: 16,
+				}, {
+					name: '20:00',
+					hours: 20,
+				}, {
+					name: '22:00',
+					hours: 22,
+				}],
+				// 预设的背景颜色数组，用于没有图片时显示
+				categoryBgColors: [
+					'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
+					'linear-gradient(135deg, #ff5252, #fa2e1b)',
+					'linear-gradient(135deg, #7dd5ff, #36a7ff)',
+					'linear-gradient(135deg, #ff4757, #fa2e1b)',
+					'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
+					'linear-gradient(135deg, #ff5252, #fa2e1b)',
+					'linear-gradient(135deg, #ff7ae0, #ff49b4)',
+					'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
+					'linear-gradient(135deg, #ff9ec5, #ff657a)',
+					'linear-gradient(135deg, #ff5252, #fa2e1b)',
+					'linear-gradient(135deg, #66b6ff, #3388ff)',
+					'linear-gradient(135deg, #35d6ff, #1d9dff)',
+					'linear-gradient(135deg, #5ec8ff, #297fff)',
+					'linear-gradient(135deg, #ff6b6b, #fa2e1b)',
+					'linear-gradient(135deg, #ff5252, #fa2e1b)'
+				]
 			}
 		},
-		components: {
-			vcCategory,
-			vcRecommend,
-			vcAds,
-			vcShop,
-			vcBottomBlack,
-			groupView,
-			seckillView
-		},
 		onLoad(options) {
-			let that = this;
-			this.vc.onLoad(options);
+			// #ifdef MP
+			uni.setNavigationBarColor({
+				frontColor: '#ffffff',
+				backgroundColor: '#fa2e1b',
+			})
+			// #endif
+			this._loadCommunityInfo();
 			this._getCategoryList();
+			this._getGroupGoodsList();
+			this.computeCurHours();
+			this._getSeckillGoodsList();
+			this._getRecommendProduct();
 		},
-		onShow: function() {
-			this.selectCommunityName = getMallCommunityName();
-			if(this.$refs.vcShopRef){
-				this.$refs.vcShopRef._loadCommunityShops();
-			}
-			if(this.$refs.vcRecommendRef){
-				this.$refs.vcRecommendRef._loadRecommendProdcut();
-			}
-			this.shopTypeId = 0
-		},
-		onReachBottom() {
-			this.$refs.vcRecommendRef._loadRecommendProdcut();
-		},
+			onShow() {
+				// 页面显示时检查小区是否变化
+				// 使用 getMallCommunityName 快速获取小区名称
+				this.selectCommunityName = getMallCommunityName() || "雪峰商贸城";
+				this._loadCommunityInfo();
+			},
 		methods: {
-			selectType(index) {
-				let shopTypeId = this.navList[index].shopTypeId;
-				this.shopTypeId = shopTypeId;
-				if(this.shopTypeId == 0){
-					return;//首页不跳转
+			// 加载小区信息（从缓存读取）
+			_loadCommunityInfo() {
+				let _that = this;
+				// 优先从 _selectCommunity 读取（选择小区页面存储的）
+				let community = uni.getStorageSync("_selectCommunity");
+				if (community && community.communityId) {
+					this.selectCommunityId = community.communityId;
+					this.selectCommunityName = community.name || "雪峰商贸城";
+					// 保存到自定义缓存键
+					saveJson(this.COMMUNITY_STORAGE_KEY, {
+						communityId: community.communityId,
+						communityName: community.name
+					});
+					// 重新加载数据
+					this._getGroupGoodsList();
+					this._getSeckillGoodsList();
+					this._getRecommendProduct();
+					return;
 				}
-				this.vc.navigateToMall({
-					url: '/pages/market/market?typeId=' + shopTypeId
-				})
+				
+				// 使用 getCurCommunity 获取当前小区信息
+				getCurCommunity().then(function(communityInfo) {
+					if (communityInfo && communityInfo.communityId) {
+						_that.selectCommunityId = communityInfo.communityId;
+						_that.selectCommunityName = communityInfo.communityName || "雪峰商贸城";
+						// 保存到自定义缓存键
+						saveJson(_that.COMMUNITY_STORAGE_KEY, {
+							communityId: communityInfo.communityId,
+							communityName: communityInfo.communityName
+						});
+					}
+				}).catch(function(err) {
+					console.error('获取小区信息失败', err);
+					// 如果获取失败，尝试使用 getMallCommunityName
+					_that.selectCommunityName = getMallCommunityName() || "雪峰商贸城";
+					_that.selectCommunityId = getMallCommunityId() || '';
+				});
+			},
+			// 获取当前小区ID（用于查询）
+			_getCurrentCommunityId() {
+				if (this.selectCommunityId && this.selectCommunityId !== '9999') {
+					return this.selectCommunityId;
+				}
+				// 兼容旧逻辑
+				let communityId = getCommunityId();
+				if (communityId == '9999') {
+					return '';
+				}
+				return communityId || '';
 			},
 			_getCategoryList() {
-				let _that = this
+				let _that = this;
 				let params = {
 					page: 1,
 					row: 100,
 					isShow: "Y",
-					shopId: '9999',
-					typeCd: '2002'
+					shopId: param.SHOP_ID_GLOBAL,
+					typeCd: param.MENU_TYPE.SHOP
 				}
 				getMallIndexCategoryList(params)
 					.then(function(result) {
-						let categoryData = result.data
-						_that.categoryList = sliceArray(categoryData, 8)
-					});
-				params = {
-					page: 1,
-					row: 100
-				}
-				queryShopType(params)
-					.then(function(result) {
-						_that.navList = result.data
-						_that.navList.unshift({
-							"shopTypeId": "0",
-							"typeName": "首页"
-						})
+						let categoryData = result.data || [];
+						// 将数据扁平化，不再分组
+						_that.categoryList = categoryData;
 					})
+					.catch(function(err) {
+						console.error('获取菜单列表失败', err);
+					});
 			},
-			addlisttap: function(index) {
-				/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
-				this.vc.loginAuth();
-				let _that = this;
-				if (index == 0) {
+			_urlJump: function(_menu) {
+				if (!_menu) return;
+				
+				if (_menu.skipType == 2) {
+					// 站外
+					let url = encodeURIComponent(_menu.url);
 					this.vc.navigateTo({
-						url: '/pages/myOrder/myOrder'
-					}, true);
+						url: '/pages/hcWebView/hcWebView?url=' + url
+					});
+				} else if (_menu.skipType == 1 ) {
+					// 站内
+					this.vc.navigateToMall({
+						url: _menu.url
+					});
+				} else if (_menu.skipType == '3') {
+					// 商城商品列表
+					let _url = "/pages/goods/goodsList?hktId=" + _menu.hktId;
+					this.vc.navigateToMall({
+						url: _url
+					});
+				} else if (_menu.skipType == 'S') {
+					// 商城页面
+					this.vc.navigateToMall({
+						url: _menu.url
+					});
+				}else if (_menu.skipType == '5') {
+					
+					this.vc.navigateToMall({
+						url: _menu.url
+					});
+				}  else {
 					return;
 				}
 			},
+			_loadDefaultImg: function(item) {
+				// 图片加载失败时，清空图片路径，让组件显示背景颜色
+				if (item) {
+					item.hktIcon = "";
+				}
+			},
+			// 根据索引获取背景颜色
+			getCategoryBgColor: function(index) {
+				return this.categoryBgColors[index % this.categoryBgColors.length];
+			},
 			//搜索跳转
-			toSearch:function() {
+			toSearch(e) {
 				this.vc.navigateToMall({
 					url: '/pages/goods/HM-search?searchType=3'
-				})
+				});
 			},
 			//切换小区
 			toSelectArea(e) {
-				uni.navigateTo({
-					url:'/pages/mall/selectcommunity'
+				this.vc.navigateTo({
+					url: `/pages/mall/selectcommunity`
+				}, true);
+			},
+			// 获取拼团商品列表
+			_getGroupGoodsList() {
+				let _that = this;
+				let communityId = this._getCurrentCommunityId();
+				queryGroupGoods({
+					page: 1,
+					row: 10,
+					shopId: '',
+					communityId: communityId
+				}).then(function(data) {
+					_that.groupGoodsList = data || [];
+				}).catch(function(err) {
+					console.error('获取拼团商品失败', err);
+					_that.groupGoodsList = [];
 				});
+			},
+			// 跳转到拼团商品详情
+			toGroupGoods(item) {
+				if (!item) return;
+				this.vc.navigateToMall({
+					url: '/pages/goods/groupGoods?productId=' + item.productId + 
+						"&groupId=" + (item.groupId || '') + 
+						"&shopId=" + (item.shopId || this.shopId)
+				});
+			},
+			// 跳转到拼团商品列表
+			toGroupGoodsList() {
+				this.vc.navigateToMall({
+					url: '/pages/goods/groupGoodsList?shopId=' 
+				});
+			},
+			// 拼团商品图片加载失败
+			_loadDefaultGroupImg(item) {
+				if (item) {
+					item.coverPhoto = this.noPic;
+				}
+			},
+			// 计算当前秒杀时段
+			computeCurHours() {
+				let _date = new Date();
+				let _curHours = _date.getHours();
+				this.curSecHours = this.secHours[0];
+				let _break = false;
+				this.secHours.forEach(_hours => {
+					if (_break) {
+						return;
+					}
+					if (_hours.hours >= _curHours) {
+						this.curSecHours = _hours;
+						_break = true;
+					}
+				});
+			},
+			// 获取秒杀商品列表
+			_getSeckillGoodsList() {
+				let _that = this;
+				if (!this.curSecHours || !this.curSecHours.hours) {
+					return;
+				}
+				let communityId = this._getCurrentCommunityId();
+				queryProductSeckill({
+					page: 1,
+					row: 10,
+					killHours: this.curSecHours.hours,
+					shopId: '',
+					communityId: communityId,
+					validData: 'Y'
+				}).then(function(data) {
+					_that.seckillGoodsList = data || [];
+				}).catch(function(err) {
+					console.error('获取秒杀商品失败', err);
+					_that.seckillGoodsList = [];
+				});
+			},
+			// 跳转到秒杀商品详情
+			toSeckillGoods(item) {
+				if (!item) return;
+				this.vc.navigateToMall({
+					url: '/pages/goods/seckillGoods?productId=' + item.productId + 
+						"&shopId=" + (item.shopId || this.shopId) + 
+						"&killId=" + (item.killId || '')
+				});
+			},
+			// 秒杀商品图片加载失败
+			_loadDefaultSeckillImg(item) {
+				if (item) {
+					item.coverPhoto = this.noPic;
+				}
+			},
+			// 获取推荐商品列表（只获取分类列表，不查询商品）
+			_getRecommendProduct() {
+				let _that = this;
+				let communityId = this._getCurrentCommunityId();
+				
+				// 只获取专区目录列表
+				let categoryParams = {
+					page: 1,
+					row: 100,
+					communityId: communityId,
+					categoryType: ''
+				};
+				
+				queryMainCategory(categoryParams)
+					.then(function(categories) {
+						if (!categories || categories.length === 0) {
+							_that.productList = [];
+							return;
+						}
+						
+						// 只初始化分类列表，不查询商品
+						_that.productList = categories.map(function(category) {
+							return {
+								categoryId: category.mainCategoryId || category.categoryId || category.id,
+								categoryName: category.categoryName || category.name,
+								categoryDesc: category.categoryDesc || category.desc || '',
+								mainCategoryProducts: [] // 初始为空，点击后再加载
+							};
+						});
+						
+						// 默认选中第一个分类并加载其商品
+						if (_that.productList.length > 0) {
+							_that.selectedCategoryIndex = 0;
+							_that._loadCategoryProducts(0);
+						}
+					})
+					.catch(function(err) {
+						console.error('获取专区目录失败', err);
+						_that.productList = [];
+					});
+			},
+			// 加载指定分类的商品（每次点击都重新请求）
+			_loadCategoryProducts(categoryIndex) {
+				let _that = this;
+				let category = this.productList[categoryIndex];
+				if (!category) {
+					// 如果分类不存在，直接返回
+					return;
+				}
+				
+				let communityId = this._getCurrentCommunityId();
+				
+				let mainCategoryId = category.categoryId;
+				
+				// 每次点击都重新请求后端
+				queryPhoneMainCategoryProduct({
+					page: 1,
+					row: 20,
+					communityId: communityId,
+					mainCategoryId: mainCategoryId
+				}).then(function(result) {
+					let products = [];
+					
+					// 处理返回的数据格式
+					if (Array.isArray(result)) {
+						products = result;
+					} else if (result && result.data) {
+						if (Array.isArray(result.data)) {
+							products = result.data;
+						} else {
+							products = result.data.mainCategoryProducts || result.data.products || [];
+						}
+					} else if (result && result.mainCategoryProducts) {
+						products = result.mainCategoryProducts || [];
+					}
+					
+					// 更新分类的商品列表
+					_that.$set(category, 'mainCategoryProducts', products);
+				}).catch(function(err) {
+					console.error('获取专区商品失败', err);
+					_that.$set(category, 'mainCategoryProducts', []);
+				});
+			},
+			// 跳转到商品详情
+			toGoodsDetail(item) {
+				if (!item) return;
+				this.vc.navigateToMall({
+					url: '/pages/goods/goods?productId=' + item.productId + 
+						"&shopId=" + (item.shopId || this.shopId)
+				});
+			},
+			// 商品图片加载失败
+			_loadDefaultProductImg(item) {
+				if (item) {
+					item.coverPhoto = this.noPic;
+				}
+			},
+			// 将商品列表按每行2个分组
+			getProductRows(products) {
+				if (!products || products.length === 0) {
+					return [];
+				}
+				let rows = [];
+				for (let i = 0; i < products.length; i += 2) {
+					rows.push(products.slice(i, i + 2));
+				}
+				return rows;
+			},
+			// 选择分类标签
+			selectCategory(index) {
+				this.selectedCategoryIndex = index;
+				// 如果该分类的商品还未加载，则加载
+				this._loadCategoryProducts(index);
+			},
+			// 获取默认副标题
+			getDefaultSubtitle(index) {
+				const defaultSubtitles = ['精品推荐', '便宜好货', '国际自营', '冬季热卖', '限时特惠', '新品上市', '热销榜单', '精选好物'];
+				return defaultSubtitles[index % defaultSubtitles.length] || '推荐商品';
+			}
+		},
+		computed: {
+			// 当前选中分类的商品列表
+			currentCategoryProducts() {
+				if (!this.productList || this.productList.length === 0) {
+					return [];
+				}
+				const selectedCategory = this.productList[this.selectedCategoryIndex];
+				if (!selectedCategory) {
+					return [];
+				}
+				return selectedCategory.mainCategoryProducts || [];
 			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
-	.nav-list {
-		background-image: linear-gradient(45deg, #FA2E1B, #FA2E1B) !important;
-	}
-	.nav-scroll{
-		background-color: #FA2E1B;
-	}
-	
-	.nav-cur{
-		font-weight:bold;
-		border-bottom:1px solid #FFFFFF;
-	}
+<style lang="css">
+	@import "./mall.css";
 </style>