一级市场优化界面

pages.json

@@ -73,6 +73,11 @@
 			}
 
 		}, {
+			"path": "pages/oneMarket/order/order",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		}, {
 			"path": "pages/goodsDetails/goodsDetails",
 			"style": {
 				"navigationBarTitleText": "",
@@ -86,9 +91,7 @@
 				"enablePullDownRefresh": false
 			}
 
-		},
-
-		{
+		},{
 			"path": "pages/goodsManage/oneMarket/goodsHandle",
 			"style": {
 				"navigationBarTitleText": "商品管理",
@@ -207,7 +210,16 @@
 			}
 
 		}
-	],
+	    ,{
+            "path" : "pages/oneMarket/cart/cart",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"tabBar": {
 		"color": "#7A7E83",
 		"selectedColor": "#4581fb",

pages/oneMarket/oneMarket.vue

@@ -2,7 +2,8 @@
 	<view>
 		<!-- 		<image src="../../static/images/top-bg.png"></image> -->
 		<!-- <navigation-bar :title="title" background-color="#fff" front-color="#000000" :left-button="null" /> -->
-		<uni-nav-bar color="#fff" height="60" left-icon="back" @clickLeft="back()" right-icon="list" :border="false" backgroundColor="#0081ff" :title="title" />
+		<uni-nav-bar color="#fff" height="60" left-icon="back" @clickLeft="back()" @clickRight="rightClick()"
+			right-icon="list" :border="false" backgroundColor="#0081ff" title="一级市场" />
 		</u-navbar>
 		<u-list v-if="active==1" class="list" width="100%" @scrolltolower="scrolltolower">
 			<u-list-item v-for="(item, index) in goods" :key="index">
@@ -25,7 +26,7 @@
 								</view>
 								<view class="t4">
 									<view class="price">￥{{item.price}}</view>
-									<view class="car">
+									<view class="car" @click="addCar(item)">
 										<u-icon color="#fff" name="shopping-cart-fill" size="30"></u-icon>
 									</view>
 								</view>
@@ -35,10 +36,46 @@
 				</view>
 			</u-list-item>
 		</u-list>
-		<order v-if="active==3"></order>
+		<u-popup :show="show" mode="right" @close="close" @open="open">
+			<view class="pop" style="padding: 15px;">
+				<view class="item">
+					<view class="title">生鲜海鲜</view>
+					<view class="rows">
+						<view class="row omit" v-for="(item, index) in typeList" :key="index">
+							<view class="out">
+								<view class="int" :style="{color:index==5?'#0081FF':'#213227'}">{{item.name}}</view>
+							</view>
+						</view>
+						<view class="clear"></view>
+					</view>
+				</view>
+				<view class="item">
+					<view class="title">生鲜海鲜</view>
+					<view class="rows">
+						<view class="row omit" v-for="(item, index) in typeList" :key="index">
+							<view class="out">
+								<view class="int" :active="{active:true}">{{item.name}}</view>
+							</view>
+						</view>
+						<view class="clear"></view>
+					</view>
+				</view>
+				<!-- 	 			<view class="u-page__tag-item" style="display: flex; align-items: center;"
+					v-for="(item, index) in typeList" :key="index">
+					<u-tag class="tag" :text="item.name" :plain="!item.checked" :name="item.no" @click="checkboxClick">
+					</u-tag>
+				</view> -->
+				<u-button class="custom-style" shape="circle" type="primary" size="small" text="确定"
+					@click="close()"></u-button>
+			</view>
+		</u-popup>
 		<view class="tab">
-			<view :class="active==item.id ? 'active-btn' : 'tabBtn'" v-for="item in tabList" :key="item.id"
-				@click="tabClick(item.id)">{{item.name}}</view>
+			<view class="tabBtn" @click="BtnClick(1)">
+				<u-icon label="购物车" size="30" color="#ef732a" labelColor="#ef732a" name="shopping-cart"></u-icon>
+			</view>
+			<view class="tabBtn" @click="BtnClick(2)">
+				<u-icon label="订单列表" size="30" color="#1E90FF" labelColor="#1E90FF" name="order"></u-icon>
+			</view>
 		</view>
 	</view>
 </template>
@@ -49,21 +86,10 @@
 			return {
 				loadmoreStatus: 'loadmore',
 				goods: [],
-				active: 1,
+				active: '',
 				title: '一级市场',
-				tabList: [{
-						id: 1,
-						name: "市场"
-					},
-					{
-						id: 2,
-						name: "购物车"
-					},
-					{
-						id: 3,
-						name: "订单列表"
-					}
-				]
+				show: false,
+				typeList: [],
 			}
 		},
 		onLoad() {
@@ -89,39 +115,131 @@
 					}
 				});
 			},
+			// 添加购物车
+			addCar(goods) {
+				let user = uni.getStorageSync("info")
+				let params = {
+					buyUserId: user.id,
+					enterpriseId: goods.merchantId,
+					shopId: goods.shopId,
+					tradeAreaId: goods.tradeAreaId,
+					saleGoodsInfoId: goods.id,
+					goodsImg: goods.goodsImg,
+					goodsName: goods.goodsName,
+					// buyNum: parseInt(this.num)
+				}
+				console.log(goods)
+				this.http.request({
+					url: '/level-one-server/app/TbGoodsCart/addGoodsInShopCart',
+					data: params,
+					contentType: 'application/json; charset=utf-8',
+					method: 'POST',
+					success: res => {
+						setTimeout(function() {
+							uni.showToast({
+								title: res.data.data.msg
+							});
+						}, 1000)
+					}
+				});
+			},
+			// 商品分类 
+			getGoodsType() {
+				this.http.request({
+					url: '/level-one-server/TbGoodsType/getList',
+					success: res => {
+						this.typeList = res.data.data
+						console.log(this.typeList)
+					}
+				});
+			},
 			scrolltolower() {
 				this.getGoodsList()
 			},
 			toDetails(id) {
 				this.$common.to('/pages/goodsDetails/goodsDetails?id=' + id)
 			},
-			change(index) {
-				console.log(index)
-				this.active = index
-			},
-			tabClick(id) {
-				this.active = id
-				if (id == 1) {
-					this.title = '一级市场'
-				} else if (id == 2) {
-					this.title = '购物车'
-				} else {
-					this.title = '订单列表'
-				}
-			},
+			// change(index) {
+			// 	console.log(index)
+			// 	this.active = index
+			// },
+			// tabClick(id) {
+			// 	this.active = id
+			// 	if (id == 1) {
+			// 		this.title = '一级市场'
+			// 	} else if (id == 2) {
+			// 		this.title = '购物车'
+			// 	} else {
+			// 		this.title = '订单列表'
+			// 	}
+			// },
 			back() {
-				uni.navigateBack({
-					delta: 1
-				})
+				uni.switchTab({
+					url: '/pages/index/index'
+				});
 			},
 			rightClick() {
-				console.log('rightClick');
+				this.show = true
+				this.getGoodsType()
+			},
+			open() {
+				// console.log('open');
+			},
+			close() {
+				this.show = false
+				// console.log('close');
+			},
+			BtnClick(type) {
+				type == 1 ? uni.navigateTo({
+					url: '/pages/oneMarket/cart/cart'
+				}) : uni.navigateTo({
+					url: '/pages/oneMarket/order/order'
+				})
 			},
+			checkboxClick(name) {
+				this.typeList.map((item, index) => {
+					if (item.no == name) item.checked = true
+				})
+			}
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.item {
+		.title {
+			padding: 5px;
+		}
+
+		.rows {
+			width: 100%;
+
+			.row {
+				width: 33.33%;
+				float: left;
+				text-align: center;
+
+				.out {
+					padding: 6px;
+					overflow: hidden;
+
+					.int {
+						padding: 5px;
+						color: #213227;
+						background-color: #eaf1fe;
+						border-radius: 3px;
+						font-size: 14px;
+						overflow: hidden;
+
+						&.active {
+							color: $main-color;
+						}
+					}
+				}
+			}
+		}
+	}
+
 	page {
 		background-image: url(../../static/images/top-bg.png);
 		background-size: 100% 400rpx;
@@ -136,17 +254,6 @@
 		margin: 15rpx;
 	}
 
-	.tab {
-		position: fixed;
-		bottom: 1rpx;
-		width: 100%;
-		height: 100rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-top: #CFCFCF 1rpx solid;
-	}
-
 	.goods-item {
 		margin-bottom: 8rpx;
 	}
@@ -160,13 +267,13 @@
 		margin: 10rpx 0rpx;
 		border-radius: 10rpx;
 	}
-	
-	.txt{
+
+	.txt {
 		/* height: 50rpx; */
 		margin-bottom: 20rpx;
 	}
-	
-	.t1{
+
+	.t1 {
 		font-size: 32rpx;
 		font-weight: bold;
 		word-wrap: break-word;
@@ -174,21 +281,21 @@
 		top: 1rpx;
 		right: 5rpx;
 	}
-	
-	.t4{
+
+	.t4 {
 		display: flex;
 		position: relative;
 		bottom: 1rpx;
 		right: 5rpx;
 	}
-	
-	.price{
+
+	.price {
 		color: #ef732a;
 		width: 400rpx;
 		font-weight: bold;
 	}
-	
-	.car{
+
+	.car {
 		background-color: #0081ff;
 		width: 60rpx;
 		height: 60rpx;
@@ -199,6 +306,19 @@
 		justify-content: center;
 	}
 
+	.tab {
+		position: fixed;
+		bottom: 1rpx;
+		width: 100%;
+		height: 100rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-top: #ffffff 1rpx solid;
+		background-color: #ffffff;
+	}
+
+
 	.tabBtn {
 		width: 35%;
 		height: 100%;
@@ -208,7 +328,27 @@
 		margin: 0 30rpx;
 	}
 
-	.active-btn {
+	.pop {
+		width: 400rpx;
+		margin-top: 200rpx;
+	}
+
+	.custom-style {
+		width: 300rpx;
+	}
+
+	.tag {
+		margin-bottom: 30rpx;
+		display: flex;
+		align-items: center;
+		/* 	width: 300rpx;
+		height: 50rpx;
+		background-color: #f3f4f6;
+		border-radius: 10rpx;
+		text-align: center; */
+	}
+
+	/* .active-btn {
 		width: 35%;
 		height: 100%;
 		display: flex;
@@ -216,5 +356,5 @@
 		justify-content: center;
 		color: #fff;
 		background-color: #00BFFF;
-	}
+	} */
 </style>

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

@@ -202,8 +202,8 @@
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
-		width: 150rpx;
-		padding-right: 30rpx;
+		width: 120rpx;
+		padding-right: 5rpx;
 		justify-content: flex-end;
 	}