diff --git a/package-lock.json b/package-lock.json
index bb6cb28..c2187ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2403,16 +2403,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2788,21 +2778,6 @@
           "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
           "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
           "dev": true
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.5",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-          "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
         }
       }
     },
@@ -14096,6 +14071,50 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "hash-sum": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+          "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/src/pages.json b/src/pages.json
index 66ca532..11a8e1d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -262,7 +262,30 @@
 					}
 				}
 			]
-		  }
+		},
+		{
+			"root": "subpackage/retail",
+			"pages": [
+			  {
+					"path": "pages/index/index",
+					"style" : {
+						"navigationBarTitleText": "商品零售" 
+					}
+				}, 
+				{
+					"path": "pages/confirm_goods/confirm_goods",
+					"style" : {
+						"navigationBarTitleText": "确定商品" 
+					}
+				},
+				{
+					"path": "pages/search/search",
+					"style" : {
+						"navigationBarTitleText": "搜索" 
+					}
+				}
+			]
+		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index b5cb39d..77e4276 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -133,6 +133,12 @@
 			path: '/subpackage/device/pages/index/index',
 			serverKey: 1010  // 后端对应权限编号
 		},
+		{
+			id: 10,
+			name: '商品零售',
+			path: '/subpackage/retail/pages/index/index',
+			serverKey: 1010  // 后端对应权限编号
+		}
 	];
 	
 	const app = getApp();
diff --git a/src/static/images/icon/index/tab_10.png b/src/static/images/icon/index/tab_10.png
new file mode 100644
index 0000000..a48dc60
Binary files /dev/null and b/src/static/images/icon/index/tab_10.png differ
diff --git a/src/static/images/icon/retail/add.png b/src/static/images/icon/retail/add.png
new file mode 100644
index 0000000..c5b462d
Binary files /dev/null and b/src/static/images/icon/retail/add.png differ
diff --git a/src/static/images/icon/retail/back.png b/src/static/images/icon/retail/back.png
new file mode 100644
index 0000000..ecdd14d
Binary files /dev/null and b/src/static/images/icon/retail/back.png differ
diff --git a/src/static/images/icon/retail/cart.png b/src/static/images/icon/retail/cart.png
new file mode 100644
index 0000000..8427cfe
Binary files /dev/null and b/src/static/images/icon/retail/cart.png differ
diff --git a/src/static/images/icon/retail/dropDown.png b/src/static/images/icon/retail/dropDown.png
new file mode 100644
index 0000000..c736fc9
Binary files /dev/null and b/src/static/images/icon/retail/dropDown.png differ
diff --git a/src/static/images/icon/retail/historySearchDelete.png b/src/static/images/icon/retail/historySearchDelete.png
new file mode 100644
index 0000000..b358e0b
Binary files /dev/null and b/src/static/images/icon/retail/historySearchDelete.png differ
diff --git a/src/static/images/icon/retail/home.png b/src/static/images/icon/retail/home.png
new file mode 100644
index 0000000..d627dd1
Binary files /dev/null and b/src/static/images/icon/retail/home.png differ
diff --git a/src/static/images/icon/retail/search.png b/src/static/images/icon/retail/search.png
new file mode 100644
index 0000000..8d03fca
Binary files /dev/null and b/src/static/images/icon/retail/search.png differ
diff --git a/src/static/images/icon/retail/searchClear.png b/src/static/images/icon/retail/searchClear.png
new file mode 100644
index 0000000..4c9dbe0
Binary files /dev/null and b/src/static/images/icon/retail/searchClear.png differ
diff --git a/src/static/images/icon/retail/sub.png b/src/static/images/icon/retail/sub.png
new file mode 100644
index 0000000..66784d2
Binary files /dev/null and b/src/static/images/icon/retail/sub.png differ
diff --git a/src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue b/src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
new file mode 100644
index 0000000..9246591
--- /dev/null
+++ b/src/subpackage/retail/components/hover_cart_list/hover_cart_list.vue
@@ -0,0 +1,236 @@
+<template>
+	<view v-if="isShowCartList" class="hover-cart-list">
+		<view></view>
+		<view class="hover-cart-list-dialog" :style="{ height:cartListDialogHeight }">
+			<view class="hover-cart-list-dialog-title">
+				<view>商品名称</view>
+				<view>售价</view>
+				<view>数量</view>
+			</view>
+			<scroll-view class="hover-cart-list-dialog-content" :style="{ height:cartListHeight }" :scroll-top="0" :scroll-y="cartListScroll">
+				<view class="hover-cart-list-dialog-content-for" :style="{ borderBottom:cartListItemBorderBottom }" v-for="item in cartList" :key="item.id">
+					<view class="hover-cart-list-dialog-content-col1">
+						<view>{{ item.name }}</view>
+						<view>{{ item.spec }}</view>
+					</view>
+					<view class="hover-cart-list-dialog-content-col2">
+						<input type="digit" :value="item.price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" />
+						<view>元</view>
+					</view>
+					<view class="hover-cart-list-dialog-content-col3">
+						<image mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image>
+						<view>{{ item.count }}</view>
+						<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: [ 
+			"isShowCartList", "cartList", "cartListScroll", 
+			"cartListHeight", "cartListDialogHeight", "cartListItemBorderBottom"
+		],
+		
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			// 购物车输入确认
+			cartInputConfirm(event, id) {
+				// 修改购物车列表对应的价格
+				let value = parseFloat(event.detail.value).toFixed(2);
+				for (let i = 0; i < this.cartList.length; ++i) {
+					if (this.cartList[i].id == id) {
+						this.$emit("update:cartInputConfirm", value, i);
+					}
+				}
+			},
+			
+			// 购物车列表数量选项触发
+			cartCountClick(type, id) {
+				// 找点击的对应商品
+				let item = null;
+				for (let i = 0; i < this.cartList.length; ++i) {
+					if (this.cartList[i].id == id) {
+						// item = this.cartList[i];
+						this.$emit("update:cartCountClick", type, i);
+						break;
+					}
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.hover-cart-list {
+		width: 100vw;
+		height: 100vh;
+		position: absolute;
+		left: 0rpx;
+		top: 0rpx;
+		
+		>view {
+			&:first-child {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				left: 0rpx;
+				bottom: 0rpx;
+				bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+				bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+				
+				background-color: rgba(0,0,0,0.5);
+			}
+		}
+		
+		.hover-cart-list-dialog {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			position: fixed;
+			bottom: 0rpx;
+			bottom: calc( 108rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+			bottom: calc( 108rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+			width: 100%;
+			height: 878rpx;
+			background-color: rgb(255,255,255);
+			border-top-left-radius: 30rpx;
+			border-top-right-radius: 30rpx;
+			
+			.hover-cart-list-dialog-title {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				height: 120rpx;
+				text-align: center;
+				padding-left: 34rpx;
+				padding-right: 36rpx;
+				
+				>view {
+					font-size: 32rpx;
+					color: rgb(51,51,51);
+					
+					&:first-child {
+						width: 258rpx;
+						
+					}
+					&:nth-child(2) {
+						width: 166rpx;
+					}
+					&:nth-child(3) {
+						width: 126rpx;
+					}
+				}
+			}
+			
+			.hover-cart-list-dialog-content {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				flex-grow: 1;
+				height: 758rpx;
+				padding-left: 34rpx;
+				padding-right: 36rpx;
+				
+				.hover-cart-list-dialog-content-for {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: flex-start;
+					flex-grow: 1;	
+					height: 114rpx;
+					border-bottom: 1rpx solid rgb(216,216,216);
+					margin-top: 30rpx;
+					
+					.hover-cart-list-dialog-content-col1 {
+						// display: flex;
+						flex-direction: column;
+						justify-content: flex-start;
+						align-items: center;
+						width: 258rpx;
+						
+						>view {
+							overflow: hidden;
+							word-break: nowrap;
+							text-overflow: ellipsis;  /* 超出部分省略号 */
+							display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
+							-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+							-webkit-line-clamp: 1; /** 显示的行数 **/
+							
+							&:first-child {
+								font-size: 28rpx;
+								color: rgb(51,51,51);
+								margin-bottom: 8rpx;
+							}
+							&:nth-child(2) {
+								font-size: 24rpx;
+								color: rgb(154,154,157);
+							}
+						}
+					}
+					
+					.hover-cart-list-dialog-content-col2 {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						color: rgb(51,51,51);
+						font-size: 28rpx;
+						text-align: center;
+						width: 166rpx;
+						
+						>input {
+							width: 132rpx;
+							height: 48rpx;
+							border: 2rpx solid rgb(216,216,216);
+							border-radius: 4rpx;
+						}
+						>view {
+							margin-left: 6rpx;
+						}
+					}
+					
+					.hover-cart-list-dialog-content-col3 {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						width: 126rpx;
+						
+						>image {
+							width: 36rpx;
+							height: 36rpx;
+							
+							&:first-child {
+								
+							}
+							&:nth-child(3) {
+								
+							}
+						}
+						>view {
+							margin-left: 12rpx;
+							margin-right: 12rpx;
+							color: rgb(51,51,51);
+							font-size: 28rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/subpackage/retail/js/retail_api.js b/src/subpackage/retail/js/retail_api.js
new file mode 100644
index 0000000..b672450
--- /dev/null
+++ b/src/subpackage/retail/js/retail_api.js
@@ -0,0 +1,7 @@
+import { ORIGIN } from '../../../js/api';
+
+export const RETAIL_API = { 
+    stadiumList:`${ORIGIN}/stadium/list`,  //  店铺列表
+}
+
+export default RETAIL_API;
\ No newline at end of file
diff --git a/src/subpackage/retail/js/retail_server.js b/src/subpackage/retail/js/retail_server.js
new file mode 100644
index 0000000..9e01c73
--- /dev/null
+++ b/src/subpackage/retail/js/retail_server.js
@@ -0,0 +1,10 @@
+import { Server } from '../../../js/server';
+
+class RetailServer extends Server {
+    constructor(props){
+        super(props)
+    }
+}
+
+
+export default new RetailServer();
\ No newline at end of file
diff --git a/src/subpackage/retail/js/tools.js b/src/subpackage/retail/js/tools.js
new file mode 100644
index 0000000..c3c668a
--- /dev/null
+++ b/src/subpackage/retail/js/tools.js
@@ -0,0 +1,20 @@
+
+export const tools = { 
+  // px转rpx
+  px2rpx: function(px) {
+  	return (px / (uni.upx2px(px) / px));
+  },
+	
+	// 获取新的数据对象
+	getNewObj: function(old) {
+		let newObj = {};
+		
+		for (let key in old) {
+			newObj[key] = old[key];
+		}
+		
+		return newObj;
+	},
+}
+
+export default tools;
\ No newline at end of file
diff --git a/src/subpackage/retail/pages/confirm_goods/confirm_goods.vue b/src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
new file mode 100644
index 0000000..6cbe706
--- /dev/null
+++ b/src/subpackage/retail/pages/confirm_goods/confirm_goods.vue
@@ -0,0 +1,447 @@
+<template>
+	<view class="cg-container">
+		<view class="final-cart-list">
+			<view class="final-cart-list-dialog-title">
+				<view>商品名称</view>
+				<view>售价</view>
+				<view>数量</view>
+			</view>
+			<scroll-view class="final-cart-list-dialog-content" :scroll-top="0" :scroll-y="cartListScroll" :style="{ height:cartListFinalHeight, paddingBottom:cartListFinalPaddingBottom }">
+				<view class="final-cart-list-dialog-content-for" :style="{ borderBottom:item.borderBottom }" v-for="item in cartListFinal" :key="item.id">
+					<view class="final-cart-list-dialog-content-col1">
+						<view>{{ item.name }}</view>
+						<view>{{ item.spec }}</view>
+					</view>
+					<view class="final-cart-list-dialog-content-col2">
+						<input v-if="isEdited" type="digit" :value="item.price" @confirm="cartInputConfirm($event, item.id)" @blur="cartInputConfirm($event, item.id)" />
+						<view v-if="!isEdited">{{item.price}}</view>
+						<view>元</view>
+					</view>
+					<view class="final-cart-list-dialog-content-col3">
+						<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="cartCountClick('sub', item.id)"></image>
+						<view>{{ item.count }}</view>
+						<image v-if="isEdited" mode="aspectFit" src="/static/images/icon/retail/add.png" @click="cartCountClick('add', item.id)"></image>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		
+		<view class="cg-footer">
+			<view>
+				<view class="cg-footer-price">
+					<view>合计：</view>
+					<view><text>￥</text>{{ totalPrice }}</view>
+				</view>
+				
+				<view class="cg-footer-btn">
+					<view class="cg-footer-btn-reedit" v-if="!isEdited" @click="cartReedit"><button>重新编辑</button></view>
+					<view class="cg-footer-btn-confirm" @click="cartConfirm"><button>{{cartConfirmText}}</button></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import util from '../../../../utils/util.js';
+	import tools from '../../js/tools';
+	import retailServer from '../../js/retail_server';
+	import retailApi from '../../js/retail_api';
+	
+	export default {
+		data() {
+			return {
+				isEdited: false,		// 是否处于编辑模式
+				cartListFinal: [],	// 购物车最终列表数据
+				totalPrice: 0,			// 最终价格
+				cartConfirmText: "收款出库",		// 收款出库 || 确认
+				cartListScroll: false,				// 购物车列表是否能滚动
+				cartListFinalHeight: "0rpx",	// 最终显示的列表高度
+				cartListFinalPaddingBottom: "0rpx",	// 根据是否是异形屏来设置
+			}
+		},
+		onLoad(option) {
+			let data = JSON.parse(decodeURIComponent(option.data));
+			
+			this.cartListFinal = [];
+			for (let i = 0; i < data.cartListFinal.length; ++i) {
+				this.cartListFinal.push(tools.getNewObj(data.cartListFinal[i]));
+				this.cartListFinal[i]["borderBottom"] = "1rpx solid rgb(216,216,216)";
+			}
+			
+			// 最后一项默认不显示边框
+			this.cartListFinal[this.cartListFinal.length - 1]["borderBottom"] = "0rpx solid rgb(216,216,216)";
+			this.fixMainHeight();		// 适配主内容高度
+			this.calcTotalPrice();	// 计算总价
+			
+			util.showLoad();
+			setTimeout(util.hideLoad, 1000);
+		},
+		methods: {
+			// 重新编辑
+			cartReedit() {
+				this.isEdited = true;
+				this.cartConfirmText = "确认";
+			},
+			
+			// 确认 || 收款出库
+			cartConfirm() {
+				if (this.cartConfirmText == "确认") {
+					this.isEdited = false;
+					this.cartConfirmText = "收款出库";
+					return;
+				}
+				
+				uni.navigateBack({
+				  delta: 1
+				});
+			},
+			
+			// 购物车输入确认
+			cartInputConfirm(event, id) {
+				// 修改购物车列表对应的价格
+				let value = parseFloat(event.detail.value).toFixed(2);
+				for (let i = 0; i < this.cartListFinal.length; ++i) {
+					if (this.cartListFinal[i].id == id) {
+						this.cartListFinal[i].price = value;
+					}
+				}
+				
+				this.calcTotalPrice();	// 计算总价
+			},
+			
+			// 购物车列表数量选项触发
+			cartCountClick(type, id) {
+				// 找点击的对应商品
+				let item = null;
+				for (let i = 0; i < this.cartListFinal.length; ++i) {
+					if (this.cartListFinal[i].id == id) {
+						item = this.cartListFinal[i];
+						break;
+					}
+				}
+				
+				if (item) {
+					switch (type) {
+						case "add": {
+							item.count += 1;	
+						} break;
+						case "sub": {
+							if (item.count <= 0) {
+								return;
+							}
+							
+							item.count -= 1;	
+						} break;
+					}
+					
+					this.calcTotalPrice();	// 计算总价
+				}
+			},
+			
+			// 计算总价
+			calcTotalPrice() {
+				let price = 0.0;
+				
+				for (let i = 0; i < this.cartListFinal.length; ++i) {
+					price += (this.cartListFinal[i].count * this.cartListFinal[i].price);
+				}
+				
+				this.totalPrice = price.toFixed(2);
+			},
+			
+			// 适配主内容高度
+			fixMainHeight() {
+				let _this = this;
+				uni.getSystemInfo({
+					success: res => {
+						console.log(res);
+						let sumHeight = res.windowHeight;	// 获取可用的总高度
+						
+						// // 看看当前滚动框是否超出这个高度
+						let query = uni.createSelectorQuery().select(".cg-footer");
+						query.boundingClientRect(data => {
+							sumHeight = sumHeight - data.height - uni.upx2px(90);	// 可用高度减去footer 再减去顶部标题项
+							let contentHeight = sumHeight;
+							
+							query = uni.createSelectorQuery().select(".final-cart-list-dialog-content-for");
+							query.boundingClientRect(data => {
+								let itemSize = (data.height + uni.upx2px(30));	// 30是margin
+								let limitCount = Math.floor(contentHeight / itemSize);
+								
+								let height = _this.cartListFinal.length >= limitCount ? contentHeight : _this.cartListFinal.length * itemSize;
+								_this.cartListFinalHeight = `${tools.px2rpx(height)}rpx`;
+								
+								// 可以滚动，并且设置safeArea,大于等于44的为iphoneX及以上
+								if (height >= contentHeight) {
+									_this.cartListScroll = true;
+									_this.cartListFinalPaddingBottom = `${res.safeArea.top >= 44 ? tools.px2rpx(res.safeArea.top) : 0}rpx`;
+								}
+							}).exec();
+						}).exec();
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		// background-color: rgb(237,237,245);
+		background-color: rgb(255,255,255);
+	}
+	
+	.cg-container {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+		padding-bottom: 0rpx;
+		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+		// border: 1px solid red;
+		
+		.final-cart-list {
+			display: flex;
+			flex-direction: column;
+			// width: 100%;
+			// height: 100%;
+			flex-grow: 1;
+			background-color: rgb(237,237,245);
+			
+			.final-cart-list-dialog-title {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				height: 90rpx;
+				text-align: center;
+				padding-left: 34rpx;
+				padding-right: 36rpx;
+				background-color: rgb(255,255,255);
+				
+				>view {
+					font-size: 32rpx;
+					color: rgb(51,51,51);
+					
+					&:first-child {
+						width: 258rpx;
+						
+					}
+					&:nth-child(2) {
+						width: 166rpx;
+					}
+					&:nth-child(3) {
+						width: 126rpx;
+					}
+				}
+			}
+			
+			.final-cart-list-dialog-content {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: flex-start;
+				// flex-grow: 1;
+				// height: 428rpx;
+				padding-left: 34rpx;
+				padding-right: 36rpx;
+				background-color: rgb(255,255,255);
+				// padding-bottom: 0rpx;
+				// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+				// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+				
+				.final-cart-list-dialog-content-for {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: flex-start;
+					// flex-grow: 1;	
+					height: 114rpx;
+					border-bottom: 1rpx solid rgb(216,216,216);
+					background-color: rgb(255,255,255);
+					margin-top: 30rpx;
+					
+					.final-cart-list-dialog-content-col1 {
+						// display: flex;
+						flex-direction: column;
+						justify-content: flex-start;
+						align-items: center;
+						width: 258rpx;
+						
+						>view {
+							overflow: hidden;
+							word-break: nowrap;
+							text-overflow: ellipsis;  /* 超出部分省略号 */
+							display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
+							-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+							-webkit-line-clamp: 1; /** 显示的行数 **/
+							
+							&:first-child {
+								font-size: 28rpx;
+								color: rgb(51,51,51);
+								margin-bottom: 8rpx;
+							}
+							&:nth-child(2) {
+								font-size: 24rpx;
+								color: rgb(154,154,157);
+							}
+						}
+					}
+					
+					.final-cart-list-dialog-content-col2 {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						color: rgb(51,51,51);
+						font-size: 28rpx;
+						text-align: center;
+						width: 166rpx;
+						
+						>input {
+							width: 132rpx;
+							height: 48rpx;
+							border: 2rpx solid rgb(216,216,216);
+							border-radius: 4rpx;
+						}
+						>view {
+							&:first-child {
+								
+							}
+							&:nth-child(2) {
+								margin-left: 6rpx;
+							}
+						}
+					}
+					
+					.final-cart-list-dialog-content-col3 {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						width: 126rpx;
+						
+						>image {
+							width: 36rpx;
+							height: 36rpx;
+							
+							&:first-child {
+								
+							}
+							&:nth-child(3) {
+								
+							}
+						}
+						>view {
+							margin-left: 12rpx;
+							margin-right: 12rpx;
+							color: rgb(51,51,51);
+							font-size: 28rpx;
+						}
+					}
+				}
+			}
+		}
+	
+		.cg-footer {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: flex-start;
+			// flex-grow: 1;
+			// opacity: 0.3;
+			
+			position: fixed;
+			// bottom: 0rpx;
+			bottom: calc( 0rpx + constant(safe-area-inset-bottom));
+			bottom: calc( 0rpx + env(safe-area-inset-bottom));
+			// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+			// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+			width: 100%;
+			height: 188rpx;
+			// border: 1rpx solid blue;
+			background-color: rgb(255,255,255);
+			
+			>view {
+				display: flex;
+				flex-direction: column;
+				// justify-content: flex-end;
+				align-items: flex-start;
+				width: 100%;
+				height: 100%;
+				
+				.cg-footer-price {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-end;
+					align-items: center;
+					height: 88rpx;
+					width: 100%;
+					padding-right: 40rpx;
+					
+					>view {
+						&:first-child {
+							font-size: 24rpx;
+						}
+						&:nth-child(2) {
+							color: rgb(255,135,61);
+							font-size: 32rpx;
+							
+							>text {
+								font-size: 24rpx;
+							}
+						}
+					}
+				}
+				
+				.cg-footer-btn {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-end;
+					align-items: center;
+					height: 88rpx;
+					width: 100%;
+					padding-right: 24rpx;
+					font-size: 32rpx;
+					
+					> view {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+					}
+					
+					.cg-footer-btn-reedit {
+						>button {
+							width: 242rpx;
+							height: 88rpx;
+							line-height: 88rpx;
+							border-radius: 44rpx;
+							padding: 0 0;
+							color: rgb(0,152,116);
+							background-color: rgb(255,255,255);
+							border: 2rpx solid rgb(0,152,116);
+							margin-right: 20rpx;
+						}
+					}
+					
+					.cg-footer-btn-confirm {
+						>button {
+							width: 242rpx;
+							height: 88rpx;
+							line-height: 88rpx;
+							border-radius: 44rpx;
+							padding: 0 0;
+							color: rgb(255,255,255);
+							background-color: rgb(0,152,116);
+							border: 2rpx solid rgb(0,152,116);
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/subpackage/retail/pages/index/index.vue b/src/subpackage/retail/pages/index/index.vue
new file mode 100644
index 0000000..a91a950
--- /dev/null
+++ b/src/subpackage/retail/pages/index/index.vue
@@ -0,0 +1,901 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<picker
+				@change="curStoreChange"
+				mode="selector" 
+				range-key="name" 
+				:range="curStoreList"
+				value="0"
+			>
+				<view class="header-store-selecter">
+					<image class="header-store-selecter-left-img" mode="aspectFit" src="/static/images/icon/retail/home.png"></image>
+					<!-- <input id="cur-store-input-node" placeholder="请选择门店" :value="curStore.name" disabled /> -->
+					<view class="header-store-selecter-name">{{ curStore.name ? curStore.name : '' }}</view>
+					<image class="header-store-selecter-right-img" mode="aspectFit" src="/static/images/icon/retail/dropDown.png"></image>
+				</view>
+			</picker>
+			<view class="header-search-row">
+				<view @click="searchTrigger">
+					<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
+					<input 
+						type="text"
+						placeholder="请输入商品名称"
+						disabled
+					/>
+				</view>
+				<button @click="searchTrigger">搜索</button>
+			</view>
+		</view>
+		
+		<view class="main" :style="{ height:mainHeight }">
+			<scroll-view class="main-left" :scroll-top="categoryScrollTop" scroll-y="true" @scroll="categoryOnScroll">
+				<view class="main-left-list" v-if="item.isSearch" v-for="item in goodsInfo" :key="item.id">
+					<button plain=true @click="mainCategoryClick(item.id)" :style="{ color:item.style.color, backgroundColor:item.style.backgroundColor }">{{ item.categoryName }}</button>
+				</view>
+			</scroll-view>
+			<scroll-view class="main-right" scroll-top="0" scroll-y="true" v-if="scrollItem.isShow" v-for="scrollItem in goodsInfo" :key="scrollItem.id">
+				<view class="main-right-list" v-for="item in scrollItem.goodsData" :key="item.id">
+					<view>{{ item.name }}</view>
+					<view>{{ item.spec }}</view>
+					
+					<view class="main-right-list-price-count">
+						<view class="main-right-list-price-row">
+							<view><text>￥</text>{{ item.price }}</view>
+						</view>
+						
+						<view class="main-right-list-count-row">
+							<image mode="aspectFit" src="/static/images/icon/retail/sub.png" @click="mainCountClick('sub', scrollItem.id, item.id)"></image>
+							<view>{{ item.count }}</view>
+							<image mode="aspectFit" src="/static/images/icon/retail/add.png" @click="mainCountClick('add', scrollItem.id, item.id)"></image>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		
+		<hoverCartList 
+			:isShowCartList="isShowCartList" :cartList="cartList" :cartListScroll="cartListScroll"
+			:cartListHeight="cartListHeight" :cartListDialogHeight="cartListDialogHeight" :cartListItemBorderBottom="cartListItemBorderBottom"
+			@update:cartInputConfirm="cartInputConfirm" @update:cartCountClick="cartCountClick"
+		>
+		</hoverCartList>
+
+		<view class="footer">
+			<view>
+				<view class="footer-price">
+					<view @click="cartClick">
+						<image mode="aspectFit" src="/static/images/icon/retail/cart.png"></image>
+						<view v-if="(totalCount>0 && !isShowCartList) ? true:false">{{ totalCount }}</view>
+						<view v-if="(cartTotalCount>0 && isShowCartList) ? true:false">{{ cartTotalCount }}</view>
+					</view>
+					<view>合计：</view>
+					<view v-if="!isShowCartList"><text>￥</text>{{ totalPrice }}</view>
+					<view v-if="isShowCartList"><text>￥</text>{{ cartTotalPrice }}</view>
+				</view>
+				<view class="footer-confirm">
+					<button @click="cartConfirm">确认</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import util from '../../../../utils/util.js';
+import tools from '../../js/tools';	
+import retailServer from '../../js/retail_server';
+import retailApi from '../../js/retail_api';
+import hoverCartList from '../../components/hover_cart_list/hover_cart_list';
+
+export default {
+    components: {
+      'hoverCartList': hoverCartList
+    },
+    data(){
+			return {
+				categoryBtnStyle: {		// 分类按钮样式
+					default: { "color":"rgb(154,154,157)", "backgroundColor":"rgba(0,0,0,0)" },
+					click: { "color":"rgb(0,152,116)", "backgroundColor":"rgb(205,235,228)" },
+				},
+				categoryScrollTop: 0,			// 分类滚动值
+				categoryOldScrollTop: 0,	// 分类滚动旧值
+				categoryIndex: 1,			// 分类索引值，默认第一项是搜索，过滤掉，直接从第二项开始计算
+				
+				// curStoreList: [{ id: '', name: '请选择门店'}],		// 当前门店列表
+				curStoreList: [],			// 当前门店列表
+				curStore: {},			 		// 当前门店
+				goodsInfo: [],				// 商品信息
+				mainHeight: "0rpx",		// 主内容高度
+				totalPrice: 0,				// 总价
+				totalCount: 0,				// 总量
+				cartTotalPrice: 0,		// 购物车总价
+				cartTotalCount: 0,		// 购物车总量
+				
+				cartList: [],						// 购物车列表
+				cartListFinal: [],			// 购物车最终列表数据
+				isShowCartList: false,	// 是否显示购物车列表
+				cartListScroll: true,		// 购物车列表是否滚动
+				cartListHeight: "0rpx",	// 购物车列表高度，根据数量来改变高度
+				cartListDialogHeight: "0rpx",	// 购物车列表对话框高度，根据数量来改变高度
+				cartListItemBorderBottom: "1rpx solid rgb(216,216,216)",	// 列表数量大于1才会显示border
+			}
+    },
+    onLoad() {
+			this.deleteSearchLocal();	// 删除本地的历史搜索
+			this.getStoreList();			// 获取店铺列表
+			this.getGoodsInfo();			// 获取商品信息
+			this.fixMainHeight();			// 适配主内容高度
+    },
+		onShow() {
+			this.getSearchLocal();	// 获取本地的历史搜索
+		},
+    methods: {
+			// 分类列表滚动监听
+			categoryOnScroll(e) {
+				this.categoryOldScrollTop = e.detail.scrollTop;
+			},
+			// 分类列表回到顶部
+			categoryGoTop(e) {
+				let _this = this;
+				_this.categoryScrollTop = _this.categoryOldScrollTop;
+				_this.$nextTick(function() {
+					_this.categoryScrollTop = 0;
+				});
+			},
+			
+			// 设置搜索数据 默认列表第一项是存放搜索数据
+			setSearchData(data) {
+				util.showLoad();
+				setTimeout(util.hideLoad, 1000);
+				
+				this.goodsInfo[0].goodsData = [];
+				let random = Math.floor(Math.random() * 5 + 1);
+				console.log(random);
+				
+				let tempData = [];
+				for (let i = 0; i < this.goodsInfo[random].goodsData.length; ++i) {
+					tempData.push(tools.getNewObj(this.goodsInfo[random].goodsData[i]));
+				}
+				
+				let conectData = []
+				for (let i = 1; i < this.goodsInfo.length; ++i) {
+					conectData = [ ...conectData, ...this.goodsInfo[i].goodsData ];
+				}
+				
+				for (let i = 0; i < tempData.length; ++i) {
+					for (let j = 0; j < conectData.length; ++j) {
+						if (tempData[i].id == conectData[j].id) {
+							this.goodsInfo[0].goodsData.push(conectData[j]);
+						}
+					}
+				}
+				
+				this.categoryGoTop();	// 每次搜索后，分类列表都要滚动到顶部
+				this.goodsInfo[0].isSearch = true;
+				this.mainCategoryClick(this.goodsInfo[0].id);
+			},
+			
+			// 获取本地的历史搜索
+			getSearchLocal() {
+				let _this = this;
+				
+				uni.getStorage({
+					key: 'searchData',
+					success: function (res) {
+						console.log(res.data);
+						_this.setSearchData(res.data);	// 设置搜索数据
+						_this.deleteSearchLocal();	// 删除本地的历史搜索
+					},
+					fail: function(err) {
+						console.log(err); 
+						_this.deleteSearchLocal();	// 删除本地的历史搜索
+					},
+				});	
+			},
+			
+			// 删除本地的历史搜索
+			deleteSearchLocal() {
+				this.searchData = null;
+				
+				uni.removeStorage({
+					key: 'searchData',
+					success: function (res) {
+						console.log('success');
+					}
+				});
+			},
+			
+			// 触发搜索
+			searchTrigger() {
+				uni.navigateTo({
+					url: '/subpackage/retail/pages/search/search'
+				});
+			},
+			
+			// 购物车输入确认
+			cartInputConfirm(value, i) {
+				this.cartList[i].price = value;
+				this.calcCartTotalPriceAndCount();	// 计算购物车总价跟总量
+			},
+			
+			// 计算购物车总价跟总量
+			calcCartTotalPriceAndCount() {
+				let price = 0.0;
+				let count = 0;
+				
+				for (let i = 0; i < this.cartList.length; ++i) {
+					price += (this.cartList[i].count * this.cartList[i].price);
+					count += this.cartList[i].count;
+				}
+				
+				this.cartTotalPrice = price.toFixed(2);
+				this.cartTotalCount = count;
+			},
+			
+			// 购物车列表数量选项触发
+			cartCountClick(type, i) {
+				switch (type) {
+					case "add": {
+						this.cartList[i].count += 1;	
+					} break;
+					case "sub": {
+						if (this.cartList[i].count <= 0) {
+							return;
+						}
+						
+						this.cartList[i].count -= 1;	
+					} break;
+				}
+				
+				this.calcCartTotalPriceAndCount();	// 计算购物车总价跟总量
+			},
+			
+			// 获取购物车列表的最终数据
+			getCartListFinalData() {
+				let arr = [];
+				
+				for (let i = 0; i < this.cartList.length; ++i) {
+					if (this.cartList[i].count) {
+						arr.push(tools.getNewObj(this.cartList[i]));
+					}
+				}
+				
+				return arr;
+			},
+			
+			// 购物车确认
+			cartConfirm() {
+				this.cartListFinal = this.getCartListFinalData();
+				
+				// 有数据，那么需要跳到确定页面
+				if (this.cartListFinal.length) {
+					this.isShowCartList = false;
+					
+					let data = {
+						cartListFinal: this.cartListFinal,
+					};
+					uni.navigateTo({
+						url: `/subpackage/retail/pages/confirm_goods/confirm_goods?data=${encodeURIComponent(JSON.stringify(data))}`
+					});
+				}
+				else {
+					uni.showToast({
+						title: "购物车无数据！", 
+						icon: "none"
+					});
+				}
+			},
+			
+			// 加入购物车列表
+			addToCartList() {
+				this.cartList = [];
+				
+				// 计算购物车列表
+				for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) {
+					for (let j = 0; j < this.goodsInfo[i].goodsData.length; ++j) {
+						if (this.goodsInfo[i].goodsData[j].count) {
+							this.cartList.push(tools.getNewObj(this.goodsInfo[i].goodsData[j]));
+						}
+					}
+				}
+			},
+			
+			// 购物车点击
+			cartClick() {
+				if (this.isShowCartList) {
+					this.isShowCartList = false;
+				}
+				else {
+					this.addToCartList();	// 将主页数据加入到购物车列表
+					
+					// 根据数量改变列表高度
+					let num = this.cartList.length;
+					this.cartListScroll = false;
+					if (this.cartList.length > 5) {
+						num = 5;
+						this.cartListScroll = true;
+					}
+					
+					// 只有一条数据就不会显示border
+					if (this.cartList.length <= 1) {
+						this.cartListItemBorderBottom = "0rpx solid rgb(216,216,216)";
+					}
+					else {
+						this.cartListItemBorderBottom = "1rpx solid rgb(216,216,216)";
+					}
+					
+					this.cartListHeight = `${151.6 * num}rpx`;
+					this.cartListDialogHeight = `${(878 - 758) + 151.6 * num}rpx`;
+					this.isShowCartList = true;
+					
+					this.calcCartTotalPriceAndCount();	// 计算购物车总价跟总量
+				}
+			},
+			
+			// 适配主内容高度
+			fixMainHeight() {
+				let _this = this;
+				uni.getSystemInfo({
+					success: res => {
+						console.log(res);
+						let sumHeight = res.windowHeight;	// 获取可用的总高度
+						let query = uni.createSelectorQuery().select(".header");
+						
+						query.boundingClientRect(data => {
+							sumHeight -= data.height;
+							query = uni.createSelectorQuery().select(".footer");
+							
+							query.boundingClientRect(data => {
+								sumHeight -= data.height;
+								_this.mainHeight = `${tools.px2rpx(sumHeight)}rpx`;
+							}).exec();
+						}).exec();
+					}
+				});
+			},
+			
+			// 计算总价跟总量
+			calcTotalPriceAndCount() {
+				let price = 0.0;
+				let count = 0;
+				
+				for (let i = this.categoryIndex; i < this.goodsInfo.length; ++i) {
+					for (let j = 0; j < this.goodsInfo[i].goodsData.length; ++j) {
+						price += (this.goodsInfo[i].goodsData[j].count * this.goodsInfo[i].goodsData[j].price);
+						count += this.goodsInfo[i].goodsData[j].count;
+					}
+				}
+				
+				this.totalPrice = price.toFixed(2);
+				this.totalCount = count;
+				this.cartTotalPrice = this.totalPrice;
+				this.cartTotalCount = this.totalCount;
+			},
+			
+			// 主页数量选项触发
+			mainCountClick(type, id, goodsId) {
+				// 找点击的对应分类
+				let item = null;
+				for (let i = 0; i < this.goodsInfo.length; ++i) {
+					if (this.goodsInfo[i].id == id) {
+						item = this.goodsInfo[i];
+						break;
+					}
+				}
+				
+				// 分类有了，继续找该分类下的商品id
+				let goodsItem = null;
+				if (item) {
+					for (let i = 0; i < item.goodsData.length; ++i) {
+						if (item.goodsData[i].id == goodsId) {
+							goodsItem = item.goodsData[i];
+							break;
+						}
+					}
+				}
+				
+				if (goodsItem) {
+					switch (type) {
+						case "add": {
+							goodsItem.count += 1;	
+						} break;
+						case "sub": {
+							if (goodsItem.count <= 0) {
+								return;
+							}
+							
+							goodsItem.count -= 1;	
+						} break;
+					}
+					
+					this.calcTotalPriceAndCount();	// 计算总价跟总量
+					this.addToCartList();	// 将主页数据加入到购物车列表
+				}
+			},
+			
+			// 主页分类选项触发
+			mainCategoryClick(id) {
+				// 将所有按钮恢复默认状态，点击的按钮则是另外的状态
+				let item = null;
+				for (let i = 0; i < this.goodsInfo.length; ++i) {
+					this.goodsInfo[i].style = this.categoryBtnStyle.default;
+					this.goodsInfo[i].isShow = false;
+					
+					if (this.goodsInfo[i].id == id) {
+						item = this.goodsInfo[i];
+					}
+				}
+				
+				if (item) {
+					item.style = this.categoryBtnStyle.click;
+					item.isShow = true;
+				}
+			},
+			
+			// 获取商品信息
+			getGoodsInfo() {
+				let _this = this;
+				
+				util.showLoad();
+				setTimeout(util.hideLoad, 1000);
+				
+				_this.goodsInfo = [];
+				let categoryName = "";
+				for (let i = 0; i < 20; ++i) {
+					categoryName = i <= 0 ? "搜索" : "分类";
+					
+					_this.goodsInfo.push({
+						id: i + 1,
+						isSearch: true,
+						isShow: false,
+						categoryName: `${categoryName}${i + 1}`,
+						style: _this.categoryBtnStyle.default,
+						goodsData: [
+							{
+								id: 1 + Math.random(),
+								name: `柠檬味维他奶原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "250ml 300ml 350ml",
+								price: 3.5,
+								count: 0,
+							},
+							{
+								id: 2 + Math.random(),
+								name: `原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "150ml 200ml 100ml",
+								price: 300.2,
+								count: 0,
+							},
+							{
+								id: 3 + Math.random(),
+								name: `豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "50ml 100ml 150ml",
+								price: 18,
+								count: 0,
+							},
+							{
+								id: 4 + Math.random(),
+								name: `原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "150ml 200ml 100ml",
+								price: 300.2,
+								count: 0,
+							},
+							{
+								id: 5 + Math.random(),
+								name: `豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "50ml 100ml 150ml",
+								price: 18,
+								count: 0,
+							},
+							{
+								id: 6 + Math.random(),
+								name: `原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "150ml 200ml 100ml",
+								price: 300.2,
+								count: 0,
+							},
+							{
+								id: 7 + Math.random(),
+								name: `豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "50ml 100ml 150ml",
+								price: 18,
+								count: 0,
+							},
+							{
+								id: 8 + Math.random(),
+								name: `原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "150ml 200ml 100ml",
+								price: 300.2,
+								count: 0,
+							},
+							{
+								id: 9 + Math.random(),
+								name: `豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "50ml 100ml 150ml",
+								price: 18,
+								count: 0,
+							},
+							{
+								id: 10 + Math.random(),
+								name: `原味豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "150ml 200ml 100ml",
+								price: 300.2,
+								count: 0,
+							},
+							{
+								id: 11 + Math.random(),
+								name: `豆奶${Math.floor(Math.random() * 20)}`,
+								spec: "50ml 100ml 150ml",
+								price: 18,
+								count: 0,
+							}
+						]
+					});
+				}
+				
+				_this.goodsInfo[0].isSearch = false;
+				_this.goodsInfo[0].goodsData = [];
+				_this.goodsInfo[1].style = _this.categoryBtnStyle.click;
+				_this.goodsInfo[1].isShow = true;
+			},
+			
+			// 店铺列表
+			getStoreList() {
+				let _this = this;
+				return retailServer.get({
+					url: retailApi.stadiumList,
+					data: {},
+					failMsg: '加载店铺失败！'
+				}).then(res => {
+					let _list = res.list || [];
+					_this.curStoreList = [..._this.curStoreList, ..._list];
+					_this.curStore = _this.curStoreList[0] || {};
+				});
+			},
+			
+			// 当前店铺变化
+			curStoreChange(e) {
+				let _this = this;
+				let curStoreList = _this.curStoreList;
+				_this.curStore = curStoreList[e.detail.value] || {};
+				_this.$nextTick(function() {
+					_this.getGoodsInfo();	// 获取商品信息
+				});
+			},
+    }
+}
+</script>
+
+<style lang="scss">
+	@function toDouble($value) { 
+	  @return $value * 2; 
+	}
+	
+	page {
+		// background-color: rgb(237,237,245);
+		background-color: rgb(255,255,255);
+	}
+	
+	.container {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+		padding-bottom: 0rpx;
+		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+		
+		.header {
+			height: 230rpx;
+			// border: 1rpx solid red;
+			display: flex;
+			flex-direction: column;
+			background-color: rgb(237,237,245);
+			
+			.header-store-selecter {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				padding-left: 38rpx;
+				
+				& {
+					position: relative;
+					height: 78rpx;
+					line-height: 78rpx;
+				}
+				
+				.header-store-selecter-name {
+					height: 78rpx;
+					line-height: 78rpx;
+					fotn-size: 16rpx;
+					margin-left: 12rpx;
+					margin-right: 14rpx;
+					color: rgb(51,51,51);
+				}
+				.header-store-selecter-left-img {
+					width: 36rpx;
+					height: 36rpx;
+				}
+				.header-store-selecter-right-img {
+					width: 18rpx;
+					height: 18rpx;
+				}
+			}
+			
+			.header-search-row {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 152rpx;
+				background-color: rgb(255,255,255);
+				border-top-left-radius: 40rpx;
+				border-top-right-radius: 40rpx;
+				
+				>view {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					flex-grow: 1;
+					height: 92rpx;
+					border-radius: 10rpx;
+					background-color: rgb(242,242,247);
+					margin-left: 24rpx;
+					padding-left: 20rpx;
+					padding-right: 20rpx;
+					
+					>input {
+						flex-grow: 1;
+						height: 100%;
+						font-size: 32rpx;
+					}
+					>image{
+						flex-shrink: 0;
+						margin-right: 20rpx;
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+				>button {
+					flex-shrink: 0;
+					margin-left: 20rpx;
+					margin-right: 20rpx;
+					width: 100rpx;
+					height: 62rpx;
+					line-height: 62rpx;
+					font-size: 32rpx;
+					color: rgb(255,255,255);
+					background-color: rgb(6,147,137);
+					border-radius: 10rpx;
+					white-space: nowrap;
+					padding: 0 0;
+				}
+			}
+		}
+		
+		.main {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			// border: 1rpx solid green;
+			position: relative;
+			background-color: rgb(237,237,245);
+			padding-top: 24rpx;
+			// padding-bottom: 18rpx;
+			padding-bottom: calc( 18rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+			padding-bottom: calc( 18rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+			
+			.main-left {
+				width: 180rpx;
+				margin-right: 12rpx;
+				background-color: rgb(255,255,255);
+				border-top-right-radius: 30rpx;
+				
+				.main-left-list {
+					display: flex;
+					flex-direction: column;
+					
+					> button {
+						width: 100%;
+						height: 92rpx;
+						line-height: 92rpx;
+						border-radius: 0rpx;
+						border-top-right-radius: 30rpx;
+						border: 0rpx;
+						color: rgb(154,154,157);
+						background-color: rgba(0,0,0,0);
+						font-size: 25rpx;
+					}
+				}
+			}
+			.main-right {
+				width: 558rpx;
+				background-color: rgb(255,255,255);
+				border-top-left-radius: 30rpx;
+				display: flex;
+				flex-direction: column;
+				padding-left: 36rpx;
+				// padding-right: 48rpx;
+				
+				.main-right-list {
+					border-bottom: 1rpx solid rgb(237,237,245);
+					display: flex;
+					flex-direction: column;
+					padding-top: 24rpx;
+					padding-bottom: 24rpx;
+					
+					>view {
+						&:first-child {
+							font-size: 28rpx;
+						}
+						&:nth-child(2) {
+							margin-top: 8rpx;
+							margin-bottom: 14rpx;
+							font-size: 24rpx;
+							color: rgb(154,154,157);
+						}
+					}
+					
+					.main-right-list-price-count {
+						display: flex;
+						flex-direction: row;
+						justify-content: space-between;
+						align-items: center;
+						// border: 1rpx solid green;
+						
+						.main-right-list-price-row {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							color: rgb(255,135,61);
+							
+							>view {
+								&:first-child {
+									font-size: 32rpx;
+									line-height: 32rpx;
+									
+									>text {
+										font-size: 24rpx;	
+										line-height: 24rpx;
+									}
+								}
+							}
+						}
+						.main-right-list-count-row {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							padding-right: 48rpx;
+							
+							>image {
+								&:first-child {
+									width: 36rpx;
+									height: 36rpx;
+								}
+								&:nth-child(3) {
+									width: 36rpx;
+									height: 36rpx;
+								}
+							}
+							>view {
+								margin-left: 12rpx;
+								margin-right: 12rpx;
+								color: rgb(51,51,51);
+								font-size: 28rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+		
+		.footer {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			
+			position: fixed;
+			// bottom: 0rpx;
+			bottom: calc( 0rpx + constant(safe-area-inset-bottom));
+			bottom: calc( 0rpx + env(safe-area-inset-bottom));
+			// padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+			// padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+			width: 100%;
+			height: 108rpx;
+			// border: 1rpx solid blue;
+			background-color: rgb(255,255,255);
+			
+			>view {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				flex-grow: 1;
+				// border: 1px solid red;
+				// margin-top: 24rpx;
+				
+				.footer-price {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					margin-left: 36rpx;
+					
+					>view {
+						&:first-child {
+							position: relative;
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							// border: 1rpx solid green;
+							
+							>image {
+								width: 84rpx;
+								height: 84rpx;
+							}
+							
+							>view {
+								position: absolute;
+								top: 0rpx;
+								right: 0rpx;
+								color: rgb(255,255,255);
+								background-color: rgb(230,0,18);
+								font-size: 20rpx;
+								border-radius: 100%;
+								width: 40rpx;
+								height: 40rpx;
+								line-height: 40rpx;
+								text-align: center;
+							}
+						}
+						&:nth-child(2) {
+							margin-left: 10rpx;
+							font-size: 24rpx;
+							line-height: 24rpx;
+						}
+						&:nth-child(3) {
+							font-size: 32rpx;
+							line-height: 32rpx;
+							color: rgb(255,135,61);
+							
+							>text {
+								font-size: 24rpx;
+								line-height: 24rpx;
+							}
+						}
+						&:nth-child(4) {
+							font-size: 32rpx;
+							line-height: 32rpx;
+							color: rgb(255,135,61);
+							
+							>text {
+								font-size: 24rpx;
+								line-height: 24rpx;
+							}
+						}
+					}
+				}
+				
+				.footer-confirm {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					margin-right: 24rpx;
+					
+					>button {
+						flex-shrink: 0;
+						width: 240rpx;
+						height: 88rpx;
+						line-height: 88rpx;
+						color: rgb(255,255,255);
+						font-size: 32rpx;
+						border: 0rpx;
+						border-radius: 44rpx;
+						background-color: rgb(0,152,116);
+						white-space: nowrap;
+						padding: 0 0;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/subpackage/retail/pages/search/search.vue b/src/subpackage/retail/pages/search/search.vue
new file mode 100644
index 0000000..f5df25e
--- /dev/null
+++ b/src/subpackage/retail/pages/search/search.vue
@@ -0,0 +1,239 @@
+<template>
+	<view class="search-container">
+		<view class="search-row">
+			<view>
+				<image mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
+				<input 
+					type="text"
+					placeholder="请输入商品名称"
+					v-model="searchText"
+					focus="true"
+				/> 
+				<image @click="searchClear" mode="aspectFit" src="/static/images/icon/retail/searchClear.png"></image>
+			</view>
+			<button @click="searchTrigger(searchText)">搜索</button>
+		</view>
+		
+		<view class="history-search">
+			<view>
+				<view>历史搜索</view>
+				<image @click="searchHistoryDelete" mode="aspectFit" src="/static/images/icon/retail/historySearchDelete.png"></image>
+			</view>
+			<view>
+				<view v-for="item in historyList" :key="item.id" @click="searchTrigger(item.text)">{{ item.text }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				searchText: "",		// 搜索文本
+				historyList: [],	// 历史列表
+			}
+		},
+		onLoad() {
+			this.getSearchHistory();	// 获取搜索历史
+		},
+		methods: {
+			// 删除历史搜索
+			searchHistoryDelete() {
+				if (this.historyList.length <= 0) {
+					uni.showToast({
+						title: "暂无历史数据！",
+						icon: "none"
+					})
+					
+					return;
+				}
+				
+				let _this = this;
+				uni.showModal({
+				    content: '确人删除全部历史记录？',
+				    success: function (res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+								
+								_this.historyList = [];
+							} 
+							else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+				    }
+				});
+			},
+			
+			// 清除搜索文本
+			searchClear() {
+				this.searchText = "";
+			},
+			
+			// 触发搜索
+			searchTrigger(text) {
+				if (!text) {
+					uni.showToast({
+						title: "请输入商品名称！",
+						icon: "none"
+					});
+					
+					return;
+				}
+				
+				// 存本地数据，返回上一页后用来搜索数据
+				let _this = this;
+				uni.setStorage({
+					key: 'searchData',
+					data: {
+						list: [],	// 返回的是一个搜索列表
+					},
+					success: function() {
+						console.log('success');
+						
+						// 有数据的话就返回到上一页面，加载对应数据
+						uni.navigateBack({
+							delta: 1
+						});
+					},
+					fail: function(err) {
+						console.log(err);
+					},
+				});
+			},
+			
+			// 获取搜索历史
+			getSearchHistory() {
+				for (let i = 0; i < 20; ++i) {
+					this.historyList.push({
+						id: i + 1,
+						text: "历史" + i
+					});
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-container {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+		padding-bottom: 0rpx;
+		padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc( 0rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+		
+		.search-row {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 152rpx;
+			background-color: rgb(255,255,255);
+			
+			>view {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				flex-grow: 1;
+				height: 92rpx;
+				border-radius: 10rpx;
+				background-color: rgb(242,242,247);
+				margin-left: 24rpx;
+				padding-left: 20rpx;
+				padding-right: 20rpx;
+				
+				>input {
+					flex-grow: 1;
+					height: 100%;
+					font-size: 32rpx;
+				}
+				>image{
+					flex-shrink: 0;
+					
+					&:first-child {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 20rpx;
+					}
+					&:nth-child(3) {
+						width: 32rpx;
+						height: 32rpx;
+						margin-left: 20rpx;
+					}
+				}
+			}
+			>button {
+				flex-shrink: 0;
+				margin-left: 20rpx;
+				margin-right: 20rpx;
+				width: 100rpx;
+				height: 62rpx;
+				line-height: 62rpx;
+				font-size: 32rpx;
+				color: rgb(255,255,255);
+				background-color: rgb(6,147,137);
+				border-radius: 10rpx;
+				white-space: nowrap;
+				padding: 0 0;
+			}
+		}
+		
+		.history-search {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background-color: white;
+			padding-top: 26rpx;
+			padding-left: 26rpx;
+			
+			>view {
+				width: 100%;
+				
+				&:first-child {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 26rpx;
+					
+					>view {
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+					
+					>image {
+						width: 36rpx;
+						height: 36rpx;
+						margin-right: 26rpx;
+					}
+				}
+				&:nth-child(2) {
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-start;
+					align-items: center;
+					flex-wrap: wrap;
+					
+					>view {
+						display: flex;
+						flex-direction: row;
+						justify-content: center;
+						align-items: center;
+						height: 66rpx;
+						font-size: 28rpx;
+						color: rgb(193,193,199);
+						background-color: rgb(242,242,247);
+						border-radius: 32rpx;
+						padding-left: 30rpx;
+						padding-right: 30rpx;
+						margin-right: 26rpx;
+						margin-bottom: 26rpx;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/subpackage/retail/static/images/add.png b/src/subpackage/retail/static/images/add.png
new file mode 100644
index 0000000..c5b462d
Binary files /dev/null and b/src/subpackage/retail/static/images/add.png differ
diff --git a/src/subpackage/retail/static/images/back.png b/src/subpackage/retail/static/images/back.png
new file mode 100644
index 0000000..ecdd14d
Binary files /dev/null and b/src/subpackage/retail/static/images/back.png differ
diff --git a/src/subpackage/retail/static/images/cart.png b/src/subpackage/retail/static/images/cart.png
new file mode 100644
index 0000000..8427cfe
Binary files /dev/null and b/src/subpackage/retail/static/images/cart.png differ
diff --git a/src/subpackage/retail/static/images/dropDown.png b/src/subpackage/retail/static/images/dropDown.png
new file mode 100644
index 0000000..c736fc9
Binary files /dev/null and b/src/subpackage/retail/static/images/dropDown.png differ
diff --git a/src/subpackage/retail/static/images/historySearchDelete.png b/src/subpackage/retail/static/images/historySearchDelete.png
new file mode 100644
index 0000000..b358e0b
Binary files /dev/null and b/src/subpackage/retail/static/images/historySearchDelete.png differ
diff --git a/src/subpackage/retail/static/images/home.png b/src/subpackage/retail/static/images/home.png
new file mode 100644
index 0000000..d627dd1
Binary files /dev/null and b/src/subpackage/retail/static/images/home.png differ
diff --git a/src/subpackage/retail/static/images/search.png b/src/subpackage/retail/static/images/search.png
new file mode 100644
index 0000000..8d03fca
Binary files /dev/null and b/src/subpackage/retail/static/images/search.png differ
diff --git a/src/subpackage/retail/static/images/searchClear.png b/src/subpackage/retail/static/images/searchClear.png
new file mode 100644
index 0000000..4c9dbe0
Binary files /dev/null and b/src/subpackage/retail/static/images/searchClear.png differ