第一版基本功能完成

pages/index/index.js

@@ -9,6 +9,7 @@ Page({
 		address: undefined,
 		arr: [],
 		mktarr: [],
+		booking_setp: ['学龄前', '小学一年级', '小学一年级', '小学二年级','小学三年级','小学四年级','小学五年级','小学六年级','初中一年级','初中二年级','初中三年级','高中一年级','高中二年级','高中三年级'],
 		mktList_m: [
 			"https://api.zhumi.tech/MiniProgram/mkt/m1.jpg",
 			"https://api.zhumi.tech/MiniProgram/mkt/m2.jpg",
@@ -33,7 +34,10 @@ Page({
 		],
 		mktImgage: "https://api.zhumi.tech/MiniProgram/mkt/l1.jpg",
 		bookingShow: false,
-		mask: false
+		index_setp: 1,
+		mask: false,
+		booking: false,
+		bookingreturn: false
 	},
 	onLoad: function(options) {
 		this.init(options)
@@ -107,13 +111,52 @@ Page({
 	hrefoBooking () {
 		this.setData({
 			mask: true,
-			bookingShow: true
+			booking: true,
+			bookingreturn: false
 		})
 	},
 	hideAllBox() {
     this.setData({
       //遮罩层隐藏
-      mask: false
+			mask: false,
+			booking: false,
+			bookingreturn: false
     })
 	},
+	bindPickerChange: function(e) {
+    this.setData({
+      index_setp: e.detail.value
+    })
+	},
+	submitForm: function(data) {
+		let obj = {
+			...data.detail.value,
+		}
+		if (obj.phone.length < 11) {
+			wx.showToast({
+				title: '手机号填写不完整',
+				icon: 'none',
+				duration: 2000
+			})
+			return
+		}
+		if (obj.name == null || obj.name == '' ) {
+			wx.showToast({
+				title: '请填写孩子姓名',
+				icon: 'none',
+				duration: 2000
+			})
+			return
+		}
+		obj.college_code = this.data.booking_setp[obj.step]
+		util.postData('/college/addCollegeBooking', obj)
+		.then(res => {
+			if (res == 1) {
+				this.setData({
+					booking: false,
+					bookingreturn: true
+				})
+			}
+		})
+	}
 })

pages/index/index.wxml

@@ -10,77 +10,102 @@
 					</swiper-item>
 				</block>
 			</swiper>
-			<view class = "box_logo">
+			<view class="box_logo">
 				<image src="https://api.zhumi.tech/MiniProgram/image/index_logo.png" class="index_logo" />
 				<view class="colum-hot">
 					<view class="hot-box-temp2"></view>
 					<view class="hot-box">
-						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_left.png" class = "index_middle_l"></image>
-					</view>	
+						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_left.png" class="index_middle_l"></image>
+					</view>
 					<view class="hot-box-temp"></view>
-					<view class="hot-box" >
-						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_right.png" class = "index_middle_l" bindtap = 'hrefoBooking'></image>
+					<view class="hot-box">
+						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_right.png" class="index_middle_l"
+							bindtap='hrefoBooking'></image>
 					</view>
 				</view>
-				<view class = "cont">
+				<view class="cont">
 					<view class="tips-box">
-						<view class="tips-cont">双11XXXXXXXXXXXXXX</view>
+						<view class="tips-cont">双十一全部精品课程钜惠活动正在进行中...</view>
 					</view>
-					<image src = "https://api.zhumi.tech/MiniProgram/image/recommend.png" class="lang-img"/>
-					<image src = "https://api.zhumi.tech/MiniProgram/image/hd_banner.jpg" class="hd_banner"/>
+					<image src="https://api.zhumi.tech/MiniProgram/image/recommend.png" class="lang-img" />
+					<image src="https://api.zhumi.tech/MiniProgram/image/hd_banner.jpg" class="hd_banner" />
 					<view class="hot-title">优秀师资</view>
-				<scroll-view scroll-x="true" style="height: 550rpx;">
-					<view class="uploadWrap">
-						<block wx:for="{{mktarr}}" wx:key="index">
-							<view class="upload_Item" >
-								<image class="upload_Item_img" src="{{mktarr[index].mi_mkturl}}"></image>
-								<view class = "teache_con">
-									<view class = "teahcer_name_box">
-										<view class = "teacher_name">{{mktarr[index].mi_mktname}}</view>
-										<view class = "teacher_name_con">{{mktarr[index].mi_mktaddress}}</view>
+					<scroll-view scroll-x="true" style="height: 550rpx;">
+						<view class="uploadWrap">
+							<block wx:for="{{mktarr}}" wx:key="index">
+								<view class="upload_Item">
+									<image class="upload_Item_img" src="{{mktarr[index].mi_mkturl}}"></image>
+									<view class="teache_con">
+										<view class="teahcer_name_box">
+											<view class="teacher_name">{{mktarr[index].mi_mktname}}</view>
+											<view class="teacher_name_con">{{mktarr[index].mi_mktaddress}}</view>
+										</view>
+										<view class="t_conntext">{{mktarr[index].mi_latitude}}</view>
+										<view class="t_conntext">{{mktarr[index].mi_longitude}}</view>
 									</view>
-									<view class = "t_conntext">{{mktarr[index].mi_latitude}}</view>
-									<view class = "t_conntext">{{mktarr[index].mi_longitude}}</view>
 								</view>
-							</view>
-							<view class="viewright" wx:if="{{index == mktarr.length -1}}"></view>
-						</block>
+								<view class="viewright" wx:if="{{index == mktarr.length -1}}"></view>
+							</block>
+						</view>
+					</scroll-view>
+					<view class="hot-title">查找校区</view>
+					<view class="colum-hot-temp"></view>
+					<view class="campus-box">
+						<image src="{{mktImgage}}" class="campus-image"></image>
 					</view>
-				</scroll-view>
-				<view class="hot-title">查找校区</view>
-				<view class="colum-hot-temp"></view>
-				<view class="campus-box">
-					<image src="{{mktImgage}}" class = "campus-image"></image>
-				</view>
-				<view class="campus_Item" >
-					<view class="mkt-img-box">
-						<scroll-view scroll-x="true">
-							<view class="mktWrap">
-								<block wx:for="{{mktList_m}}" wx:key="index">
-									<view class="mkt-img">
-										<image class="campus_Item_img" src="{{mktList_m[index]}}" bindtap="mktImageChange" data-path='{{mktList_l[index]}}'></image>
-									</view>
-									<view class="viewright-mkt" wx:if="{{index == mktList_m.length -1}}"></view>
-								</block>
-							</view>
-						</scroll-view>
+					<view class="campus_Item">
+						<view class="mkt-img-box">
+							<scroll-view scroll-x="true">
+								<view class="mktWrap">
+									<block wx:for="{{mktList_m}}" wx:key="index">
+										<view class="mkt-img">
+											<image class="campus_Item_img" src="{{mktList_m[index]}}" bindtap="mktImageChange"
+												data-path='{{mktList_l[index]}}'></image>
+										</view>
+										<view class="viewright-mkt" wx:if="{{index == mktList_m.length -1}}"></view>
+									</block>
+								</view>
+							</scroll-view>
+						</view>
 					</view>
-				</view>
-				<view class = "mkt-desc-box">
-					<view class="hot-title">米粒编程（大都汇校区）</view>
-					<view class="hot-mkt">电话：XXXXXXXXX-XXXXXX</view>
-					<view class="hot-mkt">地址: 辽宁省沈阳市铁西区XXXXXXX</view>
-				</view>
-				<view class = "endbottomm" ></view>
+					<view class="mkt-desc-box">
+						<view class="hot-title">米粒编程（大都汇校区）</view>
+						<view class="hot-mkt">电话：024-25689988，17609810980</view>
+						<view class="hot-mkt">地址: 辽宁省沈阳市铁西区建设西路2号 龙之梦·大都汇4层东侧</view>
+					</view>
+					<view class="endbottomm"></view>
 				</view>
 			</view>
 			<view class='mask' wx:if="{{mask}}" bindtap='hideAllBox'></view>
-			<view class = "trolley-show-box" wx:if="{{mask}}">
-				<view>1</view>
-				<view>2</view>
-				<view>3</view>
-				<view>4</view>
-				<view>5</view>
+			<view class="trolley-show-box" wx:if="{{booking}}">
+					<view class="booking_title">预约课程</view>
+					<image src="https://api.zhumi.tech/MiniProgram/image/close.png" bindtap='hideAllBox' class="booking_icon" />
+					<form bindsubmit='submitForm'>
+					<view class="booking_setp">
+						<picker bindchange="bindPickerChange" value="{{index_setp}}" range="{{booking_setp}}" name="step">
+							<view class="picker_setp">
+								{{booking_setp[index_setp]}}
+								<image class="picker_select" src="https://api.zhumi.tech/MiniProgram/image/select.png"></image>
+							</view>
+						</picker>
+					</view>
+					<view>
+						<input class="booking_name" value="{{name}}" placeholder-class="phcolor" placeholder="请输入孩子的姓名"
+							name="name"></input>
+					</view>
+					<view>
+						<input class="booking_phone" value="{{phone}}" placeholder-class="phcolor" placeholder="请输入手机号"
+							name="phone"></input>
+					</view>
+					<button class="booking_button" formType="submit">提交预约</button>
+				</form>
+			</view>
+			<view class="trolley-show-box" wx:if="{{bookingreturn}}">
+				<image src="https://api.zhumi.tech/MiniProgram/image/close.png" bindtap='hideAllBox' class="booking_icon" />
+			<image src="https://api.zhumi.tech/MiniProgram/image/done.png" class = "booking_done"></image>
+			<view class = "done_txt">预约成功</view>
+			<view class = "done_desc">24小时内我们的老师会和您联系，请保持您的电话畅通</view>
+			<view class = "done_return" bindtap='hideAllBox' >返回</view>
 			</view>
 			<tabbar _tabBarInd="{{0}}"></tabbar>
 		</view>

pages/index/index.wxss

@@ -345,8 +345,139 @@ scroll-view-teacher {
 	border-radius: 32rpx;
 	background: #ffffff;
 	position: fixed;
-	z-index: 99;
+	z-index: 90;
 	left: 110rpx;
 	top: 330rpx;
 }
-
+.booking_title {
+	font-style: normal;
+	font-weight: bold;
+	font-size: 36rpx;
+	line-height: 36rpx;
+	color: #33333F;
+	text-align: center;
+	margin-top: 66rpx;
+}
+.booking_icon {
+	width: 50rpx;
+	height: 50rpx;
+	position: fixed;
+	z-index: 99;
+	margin-left: 458rpx;
+	margin-top: 32rpx;
+}
+.booking_setp {
+	width: 412rpx;
+	height: 72rpx;
+	background: #F2F2FE;
+	border-radius: 12px;
+	margin-left: 64rpx;
+	margin-top: 32rpx;
+}
+.picker_setp {
+	font-style: normal;
+	font-weight: normal;
+	font-size: 28rpx;
+	line-height: 72rpx;
+	color: #9999A5;
+	text-align: left;
+	margin-left: 24rpx;
+}
+.picker_select {
+	width: 20rpx;
+	height: 20rpx;
+	position:absolute;
+	left: 79%;
+	top: 26%;
+}
+.booking_name {
+	width: 388rpx;
+	height: 72rpx;
+	background: #F2F2FE;
+	border-radius: 24rpx;
+	margin-left: 64rpx;
+	margin-top: 32rpx;
+	padding-left: 24rpx;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 28rpx;
+	line-height: 72rpx;
+}
+.booking_phone {
+	width: 388rpx;
+	height: 72rpx;
+	background: #F2F2FE;
+	border-radius: 24rpx;
+	margin-left: 64rpx;
+	margin-top: 32rpx;
+	padding-left: 24rpx;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 28rpx;
+	line-height: 72rpx;
+}
+.phcolor {
+	color: #9999A5;
+}
+.booking_button {
+	width: 412rpx;
+	height: 80rpx;
+	margin-left: 64rpx;
+	margin-top: 64rpx;
+	background: #0880FF;
+	box-shadow: 0px 16rpx 32rpx rgba(0, 122, 255, 0.36);
+	border-radius: 24rpx;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 32rpx;
+	line-height: 32rpx;
+	text-align: center;
+	line-height: 80rpx;
+	color: #FFFFFF;
+}
+.booking_done {
+	height: 128rpx;
+	width: 128rpx;
+	margin-top: 118rpx;
+	margin-left: 206rpx;
+}
+.done_txt {
+	width: 144rpx;
+	height: 36rpx;
+	margin-top: 32rpx;
+	margin-left: 198rpx;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 36rpx;
+	line-height: 36rpx;
+	color: #33333F;
+	}
+	.done_desc {
+	width: 412rpx;
+	height: 60rpx;
+	margin-top: 24rpx;
+	margin-left: 64rpx;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 24rpx;
+	line-height: 36rpx;
+	display: flex;
+	align-items: center;
+	text-align: justify;
+	color: #9999A5;
+	}
+	.done_return {
+	width: 412rpx;
+	height: 80rpx;
+	margin-top: 64rpx;
+	margin-left: 64rpx;
+	background: #32D84C;
+	box-shadow: 0px 16rpx 32rpx rgba(50, 216, 76, 0.36);
+	border-radius: 24rpx;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 32rpx;
+	line-height: 80rpx;
+	text-align: center;
+	color: #FFFFFF;
+	}

pages/mine/mine.wxml

@@ -28,17 +28,17 @@
 			</view>
 		</view>
 		<view class = "mine_items">
-			<!-- <view class = "mitem">
+			<view class = "mitem">
 				<image class="item_icon" src="https://api.zhumi.tech/MiniProgram/image/principal.png"/>
 				<view class="item_title">我要当校长</view>
 				<view class="item_context">查看收益</view>
 				<image class="item_right" src="https://api.zhumi.tech/MiniProgram/image/next.png"/>
-			</view> -->
-			<view class = "mitem" bindtap="hrefTest" >
+			</view>
+			<!-- <view class = "mitem" bindtap="hrefTest" >
 				<image class="item_icon" src="https://api.zhumi.tech/MiniProgram/image/coupon.png"/>
 				<view class="item_title">我要当校长</view>
 				<image class="item_right2" src="https://api.zhumi.tech/MiniProgram/image/next.png"/>
-			</view>
+			</view> -->
 			<view class = "mitem" bindtap="hrefTest">
 				<image class="item_icon" src="https://api.zhumi.tech/MiniProgram/image/coupon.png"/>
 				<view class="item_title">我的优惠券</view>