购物车

components/ParentsTabbar.vue

@@ -40,6 +40,12 @@
 					// 	isDot: false,
 					// 	customIcon: false,
 					// },
+					{
+						iconPath: "shopping-cart",
+						selectedIconPath: "shopping-cart-fill",
+						text: '购物车',
+						pagePath2: "/pages/parents/course/shoppingCar",
+					},
 					{
 						iconPath: "account",
 						selectedIconPath: "account-fill",

pages.json

@@ -530,6 +530,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/parents/course/shoppingCar",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/parents/course/shoppingCar.vue

@@ -0,0 +1,220 @@
+<template>
+	<view>
+		<u-navbar title="购物车(2)"></u-navbar>
+		<view class="class-card" v-for="item in 2">
+			<!-- 单选框 -->
+			<label class="radio">
+				<radio value="" /><text></text>
+			</label>
+			<!-- 照片 -->
+			<view class="photo">
+				<img src="../../../assets/img/picture1.png" alt="">
+			</view>
+			<!-- 课程信息 -->
+			<view class="class-infos">
+				<view class="title">
+					<view class="class-name">
+						夏奕琳中国舞初级课程
+					</view>
+					<view class="amount">
+						x1
+					</view>
+				</view>
+				<!-- 课程标签 -->
+				<view class="class-tags">
+					<view class="item">
+						初级班 
+					</view>
+					<view class="item">
+						 暑期班
+					</view>
+					<view class="item">
+						 24节课
+					</view>
+					<view class="icon">
+						<u-icon name="arrow-down" color="#B3B3B3" size="10"></u-icon>
+					</view>
+				</view>
+				<!-- 价格 -->
+				<view class="price">
+					720.00元
+				</view>
+				<view class="price-info">
+					包含 报名费700.00元 水电费20.00元
+				</view>
+			</view>
+		</view>
+		
+		<!-- 结算 -->
+		<view class="settle">
+			<!-- 单选框 -->
+			<label class="radio">
+				<radio value="" /><text class="text">全选</text>
+			</label>
+			<!-- 总计 -->
+			<view class="total">
+				<view class="name">
+					总计
+				</view>
+				<view class="price">
+				   720.00元
+				</view>
+			</view>
+			<!-- 结算按钮 -->
+			<button class="settle-btn">结算</button>
+		</view>
+		
+		
+		<ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
+	</view>
+</template>
+
+<script>
+	import ParentsTabbar from '@/components/ParentsTabbar.vue'
+	export default {
+		components: {
+			ParentsTabbar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.class-card{
+		margin: 24rpx;
+		padding: 24rpx;
+		background-color: #fff;
+		border-radius: 8px;
+		display: flex;
+		// align-items: center;
+		// 单选框
+		.radio{
+			margin:auto 0
+		}
+		/deep/.uni-radio-input-checked{
+			background-color: rgba(13, 186, 199, 1) !important ;
+		}
+		/deep/.uni-radio-input{
+			width: 40rpx;
+			height: 40rpx;
+		}
+		//图片
+		.photo{
+			width: 152rpx;
+			height: 152rpx;
+			border-radius: 4px;
+			overflow: hidden;
+			margin-left:16rpx;
+			margin-top: 8rpx;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+		}
+	// 课程信息
+	.class-infos{
+		margin-left: 16rpx;
+		flex:1;
+		.title{
+			display:flex;
+			justify-content: space-between;
+			align-items: center;
+			.class-name{
+				color: rgba(51, 51, 51, 1);
+				font-size: 36rpx;
+			}
+			.amount{
+				color: rgba(51, 51, 51, 1);
+				font-size: 32rpx;
+			}
+		}
+		// 课程标签
+		.class-tags{
+			display: flex;
+			align-items: center;
+			margin-top:4rpx;
+			.item{
+				color: rgba(119, 119, 119, 1);
+				font-size: 24rpx;
+				margin-right: 8rpx;
+			}
+		}
+		// 价格
+		.price{
+			color: rgba(255, 61, 0, 1);
+			font-size: 36rpx;
+			margin-top: 16rpx;
+			font-weight: 600;
+		}
+		.price-info{
+			color: rgba(119, 119, 119, 1);
+			font-size: 24rpx;
+			margin-top: 8rpx;
+		}
+	}
+	
+	
+	}
+ // 结算
+ .settle{
+	 padding: 24rpx 32rpx;
+	 background-color: #fff;
+	 position: fixed;
+	 bottom: 110rpx;
+	 left: 0;
+	 right: 0;
+	 display: flex;
+	 align-items: center;
+	 /deep/.uni-radio-input{
+		 width: 32rpx;
+		 height: 32rpx;
+	 }
+	 /deep/.uni-radio-input-checked{
+	 	background-color: rgba(13, 186, 199, 1) !important ;
+	 }
+	 .radio{
+		 .text{
+			 color: #777777;
+			 font-size: 32rpx;
+		 }
+	 }
+	 .total{
+		 display: flex;
+		 align-items: center;
+		 margin-left: 120rpx;
+		 .name{
+			 color: rgba(51, 51, 51, 1);
+			 font-size: 36rpx;
+		 }
+		 .price{
+			 color: #0DBAC7;
+			 font-size: 36rpx;
+			 margin-left: 8rpx;
+			 
+		 }
+	 }
+	 // 结算按钮
+	 .settle-btn{
+		 width: 200rpx;
+		 height: 80rpx;
+		 line-height: 80rpx;
+		 border-radius: 50px;
+		 background-color: rgba(13, 186, 199, 1);
+		 color: rgba(255, 255, 255, 1);
+		 font-size: 32rpx;
+		 margin-left:24rpx;
+	 }
+ }
+ /deep/.uni-label-pointer {
+     
+     display: flex;
+     align-items: center;
+ }
+</style>

pages/parents/mine/mine.vue

@@ -191,7 +191,7 @@
 		</view>
 
 
-		<ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
+		<ParentsTabbar :current="3" ref="tabbarMain"></ParentsTabbar>
 	</view>
 </template>