lilei преди 4 години
родител
ревизия
0848c270a3
променени са 6 файла, в които са добавени 383 реда и са изтрити 8 реда
  1. 9 1
      pages.json
  2. 198 5
      pages/cart/cart.vue
  3. 4 2
      pages/goods/goodsDetail.vue
  4. 172 0
      pages/toOrder/index.vue
  5. BIN
      static/edit.png
  6. BIN
      static/position.png

+ 9 - 1
pages.json

@@ -48,6 +48,15 @@
             }
             
         }
+		,{
+		    "path" : "pages/toOrder/index",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "提交订单",
+		        "enablePullDownRefresh": false
+		    }
+		    
+		}
         ,{
             "path" : "pages/goods/goods",
             "style" :                                                                                    
@@ -64,7 +73,6 @@
                 "navigationBarTitleText": "商品详情",
                 "enablePullDownRefresh": false
             }
-            
         }
     ],
 	"globalStyle": {

+ 198 - 5
pages/cart/cart.vue

@@ -1,6 +1,60 @@
 <template>
-	<view>
-		pages/cart/cart
+	<view class="cart-pages">
+		<view class="cart-bar">
+			<view>共25件商品</view>
+			<view @click="editCart">
+				<text class="blue" v-if="!isEdit">管理</text>
+				<text class="blue" v-else>完成</text>
+			</view>
+		</view>
+		<view class="goods-list">
+			<!-- 按分类显示 -->
+			<view class="goods-class-box" v-for="item in 2">
+				<view class="goods-class-head">
+					<view>
+						<u-checkbox shape="circle" name='goodsClas' @change="goodsClasChange">
+							人气零食
+						</u-checkbox>
+					</view>
+					<view class="des">
+						满<text>300</text>乐豆才可购买
+					</view>
+				</view>
+				<view class="goods-class-list">
+					<!-- 商品列表 -->
+					<view class="goods-item" v-for="(item,index) in 3" :key="index">
+						<view class="checkbox">
+							<u-checkbox v-if="index!=1||isEdit" shape="circle" name='goodsItem'></u-checkbox>
+						</view>
+						<view class="goods-imgs">
+							<view v-if="index==1" class="goods-staus">已售罄</view>
+							<u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
+						</view>
+						<view class="goods-info">
+							<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
+							<view class="goods-price">
+								<view><text>50</text>乐豆</view>
+								<view v-if="index!=1">
+									<u-number-box :min="1"></u-number-box>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="cart-submit">
+			<view>
+				<u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
+			</view>
+			<view v-if="!isEdit">
+				<view>总计:<text>450</text>乐豆</view>
+				<u-button type="warning" @click="toOrder()">立即下单</u-button>
+			</view>
+			<view v-else>
+				<u-button type="error">删除</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,12 +62,151 @@
 	export default {
 		data() {
 			return {
-				
+				checkAll: false,// 全选
+				isEdit: false, // 是否编辑模式
 			};
-		}
+		},
+		methods: {
+			// 全选
+			checkAllChange(e) {
+				console.log(e);
+			},
+			// 每个分类的全选
+			goodsClasChange(e){
+				console.log(e);
+			},
+			// 编辑购物车
+			editCart(){
+				this.isEdit = !this.isEdit
+			},
+			//立即下单
+			toOrder(){
+				uni.redirectTo({
+					url:"/pages/toOrder/index"
+				})
+			}
+		},
 	}
 </script>
 
 <style lang="scss">
-
+page{
+	height: 100%;
+}
+.cart-pages{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.cart-bar{
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		justify-content: space-between;
+		padding:20upx;
+		.blue{
+			color: #007AFF;
+		}
+	}
+	.goods-list{
+		padding: 20upx 0;
+		flex-grow: 1;
+		overflow: auto;
+		.goods-class-box{
+			background: #FFFFFF;
+			box-shadow: 1px 1px 3px #eee;
+			margin-bottom: 20upx;
+			.goods-class-head{
+				display: flex;
+				align-items: center;
+				padding: 20upx;
+				border-bottom: 1px solid #F8F8F8;
+				justify-content: space-between;
+				.des{
+					font-size: 26upx;
+					text{
+						color: #FA3534;
+					}
+				}
+			}
+		}
+		
+		.goods-item{
+			padding: 20upx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-bottom: 1px solid #F8F8F8;
+			&:last-child{
+				border: 0;
+			}
+			.checkbox{
+				width: 80rpx;
+				overflow: hidden;
+			}
+			.goods-imgs{
+				position: relative;
+				.goods-staus{
+					width: 100rpx;
+					height: 100rpx;
+					position: absolute;
+					z-index: 10000;
+					border-radius: 100%;
+					background: rgba($color: #000000, $alpha: 0.5);
+					text-align: center;
+					line-height: 100rpx;
+					left: 50%;
+					top: 50%;
+					margin-top: -50rpx;
+					margin-left: -50rpx;
+					color: #eee;
+					font-size: 24upx;
+				}
+			}
+			.goods-info{
+				padding-left: 20upx;
+			}
+			.goods-price{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding-top: 20upx;
+				>view{
+					&:first-child{
+						font-size: 22upx;
+						text{
+							color: red;
+							font-size: 30upx;
+							margin-right: 6upx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.cart-submit{
+		padding: 20upx;
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		border-top: 1px solid #eee;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		>view{
+			&:last-child{
+				display: flex;
+				align-items: center;
+				font-size: 26upx;
+				text{
+					color: red;
+					font-size: 40upx;
+				}
+				> view{
+					padding: 0 20upx;
+				}
+			}
+		}
+	}
+}
 </style>

+ 4 - 2
pages/goods/goodsDetail.vue

@@ -38,7 +38,7 @@
 		<!-- 底部浮动按钮 -->
 		<view class="bottom-btns">
 			<view><u-button type="primary" @click="addCart">加入购物车</u-button></view>
-			<view><u-button type="error">立即下单</u-button></view>
+			<view><u-button type="error" @click="toOrder()">立即下单</u-button></view>
 		</view>
 		<!-- 购物车 -->
 		<uni-cart-fix></uni-cart-fix>
@@ -64,7 +64,9 @@
 			},
 			// 立即下单
 			toOrder(){
-				
+				uni.redirectTo({
+					url:"/pages/toOrder/index"
+				})
 			}
 		},
 	}

+ 172 - 0
pages/toOrder/index.vue

@@ -0,0 +1,172 @@
+<template>
+	<view class="cart-pages">
+		<view class="cart-bar">
+			<view>
+				<u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
+			</view>
+			<view class="position">
+				 <view class="address">陕西省西安市未央区华帝金座A座6楼</view>
+				 <view>王明 1456465455</view>
+			</view>
+			<view>
+				<u-image height="40rpx" width="40rpx" src="/static/edit.png"></u-image>
+			</view>
+		</view>
+		<view class="goods-list">
+			<!-- 商品列表 -->
+			<view class="goods-item" v-for="(item,index) in 6" :key="index">
+				<view class="goods-imgs">
+					<u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
+				</view>
+				<view class="goods-info">
+					<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
+					<view class="goods-price">
+						<view><text>50</text>乐豆</view>
+						<view>×2</view>
+					</view>
+				</view>
+			</view>
+			<!-- 总计 -->
+			<view class="goods-heji">
+				<view>
+					<view>商品合计</view>
+					<view><text>250</text>乐豆</view>
+				</view>
+				<view>
+					<view>运费</view>
+					<view>免运费</view>
+				</view>
+			</view>
+		</view>
+		<view class="cart-submit">
+			<view>总计:<text>450</text> 乐豆</view>
+			<view>
+				<u-button type="warning" @click="toPay">确认支付</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			};
+		},
+		methods: {
+			//立即下单
+			toPay(){
+				
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+page{
+	height: 100%;
+}
+.cart-pages{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.cart-bar{
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		align-items: center;
+		padding:20upx 10upx;
+		.position{
+			flex-grow: 1;
+		}
+		> view{
+			padding: 0 5upx;
+			.address{
+				font-weight: bold;
+				padding: 10upx 0;
+			}
+			&:last-child{
+				padding: 0 20upx;
+			}
+		}
+	}
+	.goods-list{
+		padding: 20upx 0;
+		flex-grow: 1;
+		overflow: auto;
+		.goods-class-box{
+			background: #FFFFFF;
+			box-shadow: 1px 1px 3px #eee;
+			margin-bottom: 20upx;
+		}
+		
+		.goods-item{
+			padding: 20upx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-bottom: 1px solid #F8F8F8;
+			background: #fff;
+			&:last-child{
+				border: 0;
+			}
+			.goods-imgs{
+				position: relative;
+			}
+			.goods-info{
+				padding-left: 20upx;
+			}
+			.goods-price{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding-top: 20upx;
+				>view{
+					&:first-child{
+						font-size: 22upx;
+						text{
+							color: red;
+							font-size: 30upx;
+							margin-right: 6upx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.goods-heji{
+		padding: 20upx;
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		margin-top: 20upx;
+		>view{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 10upx 0;
+			text{
+				color: red;
+				margin-right: 6upx;
+			}
+		}
+	}
+	.cart-submit{
+		padding: 20upx;
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		border-top: 1px solid #eee;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		> view{
+			text{
+				color: red;
+				font-size: 36upx;
+				margin-right: 6upx;
+			}
+		}
+	}
+}
+</style>

BIN
static/edit.png


BIN
static/position.png