Browse Source

确认订单

常志远 2 years ago
parent
commit
c75b88403b
2 changed files with 94 additions and 27 deletions
  1. 72 18
      pages/parents/course/confirmOrder.vue
  2. 22 9
      pages/parents/course/shoppingCar.vue

+ 72 - 18
pages/parents/course/confirmOrder.vue

@@ -15,17 +15,26 @@
 					<text>36课时</text>
 					<text>x1</text>
 				</view>
+				<view class="price">
+					<view class="price-left">
+						720.00元
+					</view>
+					<view class="order-amount">
+						x1
+					</view>
+				</view>
 			</view>
 		</view>
 
 		<!-- 学员信息 -->
-		<view class="infos">
+		<view class="student-infos">
 			<view class="item">
 				<view class="title">
-					<text>学员姓名</text>
+					<text>学员信息</text>
 				</view>
 				<view class="value" @click="show=true">
 					<text>花花</text>
+					<text style="color: #999999;margin-left: 8rpx;">2岁10个月</text>
 					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
 				</view>
 			</view>
@@ -34,7 +43,7 @@
 
 			<view class="item">
 				<view class="title">
-					<text class="asterisk">*</text>
+					
 					<text>联系人手机号</text>
 				</view>
 				<view class="value">
@@ -50,6 +59,7 @@
 					<text>
 						<input type="text" placeholder="请填写手机号">
 					</text>
+					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
 				</view>
 			</view>
 
@@ -61,18 +71,27 @@
 					<text>
 						<input type="text" placeholder="请填写家长姓名">
 					</text>
+					<text class="icon"><u-icon name="arrow-right" color="#c8c8c8"></u-icon></text>
 				</view>
 			</view>
 		</view>
-		
-		<!-- 金额 -->
+
+		<!-- 价格明细 -->
 		<view class="amount" style="margin-top: 12px;">
+			<view class="headline">
+				价格明细
+			</view>
 			<view class="amount-payable">
 				<view class="title">
-					应付金额
+					课程总价
 				</view>
 				<view class="value">
-					720.00元
+					<view class="price">
+						720.00元
+					</view>
+					<view class="price-info">
+						报名费720.00 水电费20.00
+					</view>
 				</view>
 			</view>
 			<view class="discount-amount">
@@ -85,7 +104,7 @@
 			</view>
 			<view class="amount-paid">
 				<view class="title">
-					实付金额
+					合计
 				</view>
 				<view class="value">
 					720.00元
@@ -96,7 +115,7 @@
 		<!-- 确认订单 -->
 		<view class="confirm">
 			<view class="money">
-				<view class="title">合计</view>
+				<view class="title">合计: </view>
 				<view class="value">
 					720.00元
 				</view>
@@ -222,6 +241,7 @@
 
 		.infos {
 			margin-left: 16rpx;
+			flex: 1;
 
 			.title {
 				color: rgba(51, 51, 51, 1);
@@ -238,6 +258,22 @@
 					font-size: 12px;
 				}
 			}
+
+			.price {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+                margin-top: 24rpx;
+				.price-left {
+					color: rgba(255, 61, 0, 1);
+					font-size: 36rpx;
+				}
+
+				.order-amount {
+					color: rgba(51, 51, 51, 1);
+					font-size: 32rpx;
+				}
+			}
 		}
 	}
 
@@ -247,8 +283,16 @@
 		padding: 20rpx 32rpx;
 		border-top: 1px solid rgba(244, 244, 244, 1);
 
+		.headline {
+			color: rgba(51, 51, 51, 1);
+			font-size: 32rpx;
+			margin-bottom: 32rpx;
+			font-weight: bold;
+		}
+
 		.title {
-			color: #777777;
+			color: #333333;
+			font-weight: bold;
 		}
 
 		.amount-payable,
@@ -256,19 +300,26 @@
 		.amount-paid {
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: 16rpx;
+			
+			margin-bottom: 32rpx;
 
 			.value {
-				color: rgba(119, 119, 119, 1);
-			}
-		}
+				color: #333333;
+				font-size: 32rpx;
+				font-weight: bold;
+				text-align: right;
 
-		.discount-amount {
-			.value {
-				color: #E60012;
+				.price-info {
+					color: rgba(119, 119, 119, 1);
+					font-size: 24rpx;
+					margin-top: 8rpx;
+					font-weight: normal;
+				}
 			}
 		}
 
+		
+
 		.amount-paid {
 			margin-bottom: 0;
 
@@ -279,7 +330,7 @@
 	}
 
 
-	.infos {
+	.student-infos {
 		padding: 0px 30rpx;
 		background-color: #fff;
 		margin-top: 24rpx;
@@ -302,6 +353,8 @@
 			.value {
 				color: rgba(51, 51, 51, 1);
 				font-weight: bold;
+				display: flex;
+				align-items: center;
 
 				.icon {
 					margin-left: 8rpx;
@@ -326,6 +379,7 @@
 
 	/deep/.uni-input-placeholder {
 		color: #cccccc !important;
+		font-size: 28rpx;
 	}
 
 	// 确认订单

+ 22 - 9
pages/parents/course/shoppingCar.vue

@@ -64,16 +64,18 @@
 				<radio value="" :checked="shoppingAllChecked" /><text class="text">全选</text>
 			</label>
 			<!-- 总计 -->
-			<view class="total">
-				<view class="name">
-					总计
-				</view>
-				<view class="price">
-					{{totalMoney.toFixed(2)}}元
+			<view class="right">
+				<view class="total">
+					<view class="name">
+						总计
+					</view>
+					<view class="price">
+						{{totalMoney.toFixed(2)}}元
+					</view>
 				</view>
+				<!-- 结算按钮 -->
+				<button class="settle-btn" @click="toCnfirmOrder">结算</button>
 			</view>
-			<!-- 结算按钮 -->
-			<button class="settle-btn" @click="toCnfirmOrder">结算</button>
 		</view>
 		<!-- 删除 -->
 		<view class="del" v-if="edit==true">
@@ -494,6 +496,7 @@
 		right: 0;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 
 		/deep/.uni-radio-input {
 			width: 32rpx;
@@ -514,7 +517,8 @@
 		.total {
 			display: flex;
 			align-items: center;
-			margin-left: 120rpx;
+			
+			// margin-left: 120rpx;
 
 			.name {
 				color: rgba(51, 51, 51, 1);
@@ -543,6 +547,12 @@
 
 	}
 
+  .right{
+		  // flex:1;
+		  display: flex;
+		  
+	  }
+  
 	.del {
 		padding: 24rpx 32rpx;
 		background-color: #fff;
@@ -764,5 +774,8 @@
 			font-size: 32rpx;
 			text-align: center;
 		}
+	
+	  
+	
 	}
 </style>