商品界面优化

bin/Win32/Debug/zhipuzi_pos_windows/skin/shangpin_page.xml

@@ -1,48 +1,66 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Window>
 	<ShangpinPage>
-		<HorizontalLayout>
+		<HorizontalLayout bkcolor="#FFF5F7FA">
 			<Control width="1" bkcolor="#FFD1D1D1"></Control>
-			
-			<VerticalLayout width="350" bkcolor="#FFFFFFFF">				
-				<HorizontalLayout height="60" width="380" padding="0,80,0,0">
-					<Button name="shangpin_page_add_btn" width="320" height="60" padding="15,0,15,0" text="新建商品" textcolor="#FFFFFFFF" normalimage="file='btn_green_zhengchang.png' corner='5,5,5,5'" hotimage="file='btn_green_xuanfu.png' corner='5,5,5,5'" pushedimage="file='btn_green_dianji.png' corner='5,5,5,5'" />
+
+			<!-- ============ 左：商品管理 350（L1 方案：标题 + 两块操作卡 + 提示卡贴底） ============ -->
+			<VerticalLayout width="350" bkcolor="#FFFFFFFF" inset="20,20,20,20" childpadding="14">
+				<!-- 标题区 48 = 主标题 24 + 间距 6 + 副标题 18 -->
+				<VerticalLayout height="48" childpadding="6">
+					<Label text="商品管理" height="24" font="117" textcolor="#FF1F2329" valign="center"/>
+					<Label name="shangpin_page_tongji" text="共 0 个商品 · 0 个分类" height="18" font="12" textcolor="#FF8A9099" valign="center"/>
+				</VerticalLayout>
+
+				<!-- 操作卡：新建商品（Button 铺满整卡当热区，图标与文字用 float 叠上去） -->
+				<HorizontalLayout height="92">
+					<Button name="shangpin_page_add_btn" width="310" height="92" normalimage="file='card_r10.png' corner='10,10,10,10'" hotimage="file='sp_card_green.png' corner='10,10,10,10'" pushedimage="file='sp_card_green_p.png' corner='10,10,10,10'" disabledimage="file='card_r10.png' corner='10,10,10,10'"/>
+					<Control bkimage="sp_ico_add40.png" width="40" height="40" maxheight="40" float="true" pos="14,26,54,66" mouse="false"/>
+					<Label text="新建商品" font="115" textcolor="#FF1F2329" float="true" pos="66,26,272,45" mouse="false"/>
+					<Label text="扫码或手动录入商品信息" font="12" textcolor="#FF8A9099" float="true" pos="66,49,272,66" mouse="false"/>
+					<Label text="›" font="20" textcolor="#FFA8ADB3" float="true" pos="272,26,296,66" align="right" valign="center" mouse="false"/>
 				</HorizontalLayout>
 
-				<HorizontalLayout height="60" width="380" padding="0,20,0,0">
-					<Button name="shangpin_page_add_type_btn" width="320" height="60" padding="15,0,15,0" text="新建分类" textcolor="#FFFFFFFF" normalimage="file='btn_red_zhengchang.png' corner='5,5,5,5'" hotimage="file='btn_red_xuanfu.png' corner='5,5,5,5'" pushedimage="file='btn_red_dianji.png' corner='5,5,5,5'" />
+				<!-- 操作卡：新建分类 -->
+				<HorizontalLayout height="92">
+					<Button name="shangpin_page_add_type_btn" width="310" height="92" normalimage="file='card_r10.png' corner='10,10,10,10'" hotimage="file='sp_card_green.png' corner='10,10,10,10'" pushedimage="file='sp_card_green_p.png' corner='10,10,10,10'" disabledimage="file='card_r10.png' corner='10,10,10,10'"/>
+					<Control bkimage="sp_ico_type40.png" width="40" height="40" maxheight="40" float="true" pos="14,26,54,66" mouse="false"/>
+					<Label text="新建分类" font="115" textcolor="#FF1F2329" float="true" pos="66,26,272,45" mouse="false"/>
+					<Label text="为商品创建分组，收银页按分类展示" font="12" textcolor="#FF8A9099" float="true" pos="66,49,272,66" mouse="false"/>
+					<Label text="›" font="20" textcolor="#FFA8ADB3" float="true" pos="272,26,296,66" align="right" valign="center" mouse="false"/>
 				</HorizontalLayout>
-				
+
+				<!-- 弹性占位：不写 height 的子项会被算作 adjustable 并吃掉全部剩余高度，等价于 CSS 的 margin-top:auto，提示卡因此贴底。绝不能写成 height="0" -->
 				<Control></Control>
-				
-				<VerticalLayout width="380" height="80" bkcolor="#FFFFFFFF" padding="0,0,0,50">
-					<Label text="温馨提示：对于标准带条码商品，可以直接用扫码抢扫描商品条码，系统自带的商品库会自动识别录入商品信息，快速新建商品" textcolor="#FF999999" wordbreak="true" height="80" padding="20,10,20,0" font="14"></Label>
-				</VerticalLayout>	
+
+				<!-- 底部提示卡（与右侧卡片同圆角语言：浅绿底 + 浅绿描边 + r10） -->
+				<HorizontalLayout height="92" bkimage="file='sp_card_green.png' corner='10,10,10,10'" inset="14,12,14,12" childpadding="10" childvalign="vcenter">
+					<Control bkimage="sp_ico_tip20.png" width="20" height="20" maxheight="20"/>
+					<Label text="对于标准带条码商品，可直接用扫码枪扫描商品条码，系统自带商品库会自动识别并录入商品信息。" width="252" maxwidth="252" maxheight="68" font="12" textcolor="#FF2E9B5C" wordbreak="true"/>
+				</HorizontalLayout>
 			</VerticalLayout>
-			
+
 			<Control width="1" bkcolor="#FFEBE8E8"></Control>
-			
-			<VerticalLayout name="shangpin_food_layout">
+
+			<!-- ============ 右：分类 + 商品网格 + 搜索（规格与点单页完全一致） ============ -->
+			<VerticalLayout name="shangpin_food_layout" inset="12,12,12,12" childpadding="12">
 				<VerticalLayout name="shangpin_fenlei_layout_scrolllayout" vscrollbar="true">
-					<HorizontalLayout name="shangpin_fenlei_layout" padding="0,0,0,0" bkcolor="#FFFFFFFF">
+					<Container name="shangpin_fenlei_layout">
+					</Container>
+				</VerticalLayout>
 
-					</HorizontalLayout>
-				</VerticalLayout>				
-				
-				<TileLayout name="shangpin_foodlist" padding="0,0,0,0" inset="10,10,0,10" childpadding="10" vscrollbar="true" hscrollbar="false">
-				
+				<TileLayout name="shangpin_foodlist" bkcolor="#00000000" vscrollbar="true" hscrollbar="false" childpadding="10">
 				</TileLayout>
-				
-				<HorizontalLayout height="70" padding="0,0,0,0" bkcolor="#FFFFFFFF">
-					<Edit name="shangpin_food_search_edit" tooltip="请输入商品名字或条码搜索" width="400" height="50" padding="30,10,0,10" textpadding="50,0,50,0" borderround="45,45" bkcolor="#FFECEFED" nativebkcolor="#FFECEFED" />
-					
-					<Label name="shangpin_food_search_tishi" text="请输入商品名字或条码搜索" width="120" height="35" font="16" float="true" pos="90,18,425,50" mouse="false"></Label>
-					
-					<Control bkimage="search_icon.png" width="25" height="26" pos="45,23,70,49" float="true"></Control>
-					
-					<Button name="shangpin_food_search_clear" visible="false" normalimage="search_clear.png" hotimage="search_clear.png" pushedimage="search_clear.png" bkimage="search_clear.png" width="23" height="23" pos="385,23,408,46" float="true"></Button>
+
+				<HorizontalLayout height="40" childpadding="10">
+					<HorizontalLayout bkimage="file='dc_search.png' corner='20,20,20,20'" inset="16,0,12,0" childpadding="8" childvalign="vcenter">
+						<Control bkimage="dc_ico_search16.png" width="16" height="16" maxheight="16"/>
+						<Edit name="shangpin_food_search_edit" tooltip="请输入商品名字或条码搜索" font="12" textcolor="#FF1F2329" maxheight="24" bkcolor="#00000000" nativebkcolor="#FFEFF1F3"/>
+						<Label name="shangpin_food_search_tishi" text="请输入商品名字或条码搜索" width="150" height="20" font="12" float="true" pos="40,10,190,30" mouse="false" valign="center" textcolor="#FFA8ADB3"/>
+						<Button name="shangpin_food_search_clear" visible="false" width="23" height="23" maxheight="23" normalimage="search_clear.png" hotimage="search_clear.png" pushedimage="search_clear.png"/>
+					</HorizontalLayout>
 				</HorizontalLayout>
 			</VerticalLayout>
 		</HorizontalLayout>
 	</ShangpinPage>
-</Window>
+</Window>

zhipuzi_pos_windows/page/CShangpinPageUI.cpp

@@ -45,7 +45,7 @@ void CShangpinPageUI::InitFoodtypeShow()
 	//初始化商品渲染相关的信息
 	m_foodtype_mutex.lock();
 
-	m_foodtypeLayout = static_cast<CHorizontalLayoutUI*>(this->FindSubControl(_T("shangpin_fenlei_layout")));
+	m_foodtypeLayout = static_cast<CContainerUI*>(this->FindSubControl(_T("shangpin_fenlei_layout")));
 	m_foodtypeLayout->RemoveAll();
 
 	CSqlite3 sqlite;
@@ -82,17 +82,25 @@ void CShangpinPageUI::InitFoodtypeShow()
 
 	m_foodtype_mutex.unlock();
 
+	//选中当前分类：走 foodtype_option.xml 的 selectedimage（bt_cat_sel.png）
+	//⚠️ 不能用 SetBkColor 上色，方矩形会盖掉胶囊的圆角
 	if (m_curFoodtypeOption != NULL)
 	{
-		m_curFoodtypeOption->SetBkColor(0xFF60B177);
+		m_curFoodtypeOption->Selected(true, true);
 	}
 
-	//如果不是一个分类都没有，选中第一个分类
-	if (m_cur_type_id != "")
+	//刷新标题下方的统计文案：共 N 个商品 · M 个分类
+	CLabelUI* pTongji = static_cast<CLabelUI*>(this->FindSubControl(_T("shangpin_page_tongji")));
+	if (pTongji != NULL)
 	{
-		CFoodtypeOptionUI* curTypeUI = static_cast<CFoodtypeOptionUI*>(m_foodtypeLayout->GetItemAt(0));
+		CSqlite3 sqlite_tongji;
+		std::vector<CFood> allfoods = sqlite_tongji.GetAllFood();
 
-		curTypeUI->Selected(true, false);
+		std::wstring tongji = L"共 " + std::to_wstring(allfoods.size()) + L" 个商品 · "
+			+ std::to_wstring(m_types.size()) + L" 个分类";
+
+		pTongji->SetText(tongji.c_str());
+		pTongji->SetFont(pTongji->GetFont());
 	}
 
 	UpdateFoodtypePos();
@@ -110,25 +118,31 @@ void CShangpinPageUI::UpdateFoodtypePos()
 	}
 
 	//根据宽度计算每行显示的数量
-	int nMeihangNum = (nWidth - 351) / 140;
+	//与点单页完全同一套规格：胶囊 130 + 间距 8 = 138，首列从 x=0 起（与下方商品网格左边对齐）
+	//分类区可用宽 = 页宽 - 左栏 350 - 两条 1px 分隔线 - 右栏左内边距 12
+	int nMeihangNum = (nWidth - 364) / 138;
+	if (nMeihangNum < 1)
+	{
+		nMeihangNum = 1;
+	}
 
 	int num = 0;
 
 	m_foodtype_mutex.lock();
 
-	CHorizontalLayoutUI* pFenleiLayout = static_cast<CHorizontalLayoutUI*>(this->FindSubControl(_T("shangpin_fenlei_layout")));
+	CContainerUI* pFenleiLayout = static_cast<CContainerUI*>(this->FindSubControl(_T("shangpin_fenlei_layout")));
 	for (int i = 0; i < nFoodtypeNum; i++)
 	{
-		CButtonUI* curItem = static_cast<CButtonUI*>(pFenleiLayout->GetItemAt(i));
+		CFoodtypeOptionUI* curItem = static_cast<CFoodtypeOptionUI*>(pFenleiLayout->GetItemAt(i));
 
 		int curRow = num / nMeihangNum + 1;
 		int curCol = num % nMeihangNum + 1;
 
 		RECT rect;
-		rect.left = (curCol - 1) * 140 + 10;
+		rect.left = (curCol - 1) * 138;
 		rect.right = rect.left + 130;
-		rect.top = (curRow - 1) * 52 + 10;
-		rect.bottom = rect.top + 42;
+		rect.top = (curRow - 1) * 46 + 8;
+		rect.bottom = rect.top + 38;
 
 		// 强制设置固定大小和位置
 		SIZE size;
@@ -146,7 +160,7 @@ void CShangpinPageUI::UpdateFoodtypePos()
 
 	//调整区域高度
 	int lastRow = (num - 1) / nMeihangNum + 1;
-	pFenleiLayout->SetFixedHeight(lastRow * 52 + 10);
+	pFenleiLayout->SetFixedHeight(lastRow * 46 + 8);
 
 	//处理滚动条问题
 	CVerticalLayoutUI* pFenleiScrollLayout = static_cast<CVerticalLayoutUI*>(this->FindSubControl(_T("shangpin_fenlei_layout_scrolllayout")));
@@ -155,7 +169,7 @@ void CShangpinPageUI::UpdateFoodtypePos()
 		lastRow = 2;
 	}
 
-	pFenleiScrollLayout->SetFixedHeight(lastRow * 52 + 10);
+	pFenleiScrollLayout->SetFixedHeight(lastRow * 46 + 8);
 
 	SIZE size;
 	size.cx = 0;
@@ -172,38 +186,44 @@ void CShangpinPageUI::InitFoodShow()
 
 	std::wstring xml_name;
 
+	//⚠️ 这里的 SetItemSize 必须和 CDiandanPageUI::InitFoodShow 逐项一致：
+	//   两个页面共用同一批 diandan_fooditem_*.xml，尺寸不一致会被 TileLayout 拉伸变形
 	if (setting_xianshi_is_youtu == "1")
 	{
+		//样式① 图上文下：卡片 148 x 172
 		SIZE itemsize;
-		itemsize.cx = 130;
-		itemsize.cy = 200;
+		itemsize.cx = 148;
+		itemsize.cy = 172;
 		m_foodLayout->SetItemSize(itemsize);
 
 		xml_name = _T("diandan_fooditem_youtu.xml");
 	}
 	else if (setting_xianshi_is_youtu == "2")
 	{
+		//样式② 图左文右：卡片 250 x 82
 		SIZE itemsize;
-		itemsize.cx = 230;
-		itemsize.cy = 90;
+		itemsize.cx = 250;
+		itemsize.cy = 82;
 		m_foodLayout->SetItemSize(itemsize);
 
 		xml_name = _T("diandan_fooditem_youtu_2.xml");
 	}
 	else if (setting_xianshi_is_youtu == "3")
 	{
+		//样式③ 名字价格压图：卡片 148 x 150
 		SIZE itemsize;
-		itemsize.cx = 140;
-		itemsize.cy = 120;
+		itemsize.cx = 148;
+		itemsize.cy = 150;
 		m_foodLayout->SetItemSize(itemsize);
 
 		xml_name = _T("diandan_fooditem_youtu_3.xml");
 	}
 	else
 	{
+		//样式④ 纯文字：卡片 148 x 96
 		SIZE itemsize;
-		itemsize.cx = 140;
-		itemsize.cy = 100;
+		itemsize.cx = 148;
+		itemsize.cy = 96;
 		m_foodLayout->SetItemSize(itemsize);
 
 		xml_name = _T("diandan_fooditem_wutu.xml");
@@ -332,12 +352,8 @@ void CShangpinPageUI::HandleSelectChangeMsg(TNotifyUI& msg)
 
 		if (m_cur_type_id != id)
 		{
-			//切换了商品分类
-			m_curFoodtypeOption->SetBkColor(0xFFECECEC);
-
-			msg.pSender->SetBkColor(0xFF60B177);
-
-			m_curFoodtypeOption = static_cast<CControlUI*>(msg.pSender);
+			//切换了商品分类（选中态由 Option 的 group 机制 + selectedimage 处理，不要再 SetBkColor）
+			m_curFoodtypeOption = static_cast<CFoodtypeOptionUI*>(msg.pSender);
 
 			m_cur_type_id = id;
 

zhipuzi_pos_windows/page/CShangpinPageUI.h

@@ -8,6 +8,7 @@
 #include "../zhipuzi/CFoodpackage.h"
 
 #include "../control/CDiandanFoodItemUI.h"
+#include "../control/CFoodtypeOptionUI.h"
 #include "../zhipuzi/CDiandanOrder.h"
 
 class CShangpinPageUI : public CBasePageUI
@@ -79,14 +80,15 @@ public:
 	void ShowUpdateShangpin(CFood foodinfo);
 private:
 	CTileLayoutUI* m_foodLayout;
-	CHorizontalLayoutUI* m_foodtypeLayout;
+	//分类容器：与点单页一致用 Container（子项全部 float + C++ 手工定位，不参与自动布局）
+	CContainerUI* m_foodtypeLayout;
 
 	//所有商品分类（只包含收银机显示的分类）
 	std::vector<CFoodType> m_types;
 
 	//当前选中的商品分类ID，为空表示没选中任何分类，为taocan表示选中套餐分类，如果选中普通商品分类就是分类ID
 	std::string m_cur_type_id = "";
-	CControlUI* m_curFoodtypeOption;
+	CFoodtypeOptionUI* m_curFoodtypeOption;
 
 	//商品搜索相关
 	std::string m_type_id_before_sousuo;