新增全部订单和填写订单

pages/index/index.vue

@@ -17,7 +17,7 @@
 		    <image src="../../static/index/index_xuzhi.svg" class="img-btn"></image>
 		    <text class="list-txt">入住须知</text>
 		  </view>
-		  <view class="item-list-one" @click="navigateToCard">
+		  <view class="item-list-one" @click="navigateToDairuzhu">
 		    <image src="../../static/index/index_ruzhu.svg" class="img-btn"></image>
 		    <text class="list-txt">办理入住</text>
 		  </view>
@@ -25,7 +25,7 @@
 		    <image src="../../static/index/index_xuzhu.svg" class="img-btn"></image>
 		    <text class="list-txt">办理续住</text>
 		  </view>
-		  <view class="item-list-one" @click="navigateToPay">
+		  <view class="item-list-one" @click="navigateToTuifang">
 		    <image src="../../static/index/index_tuifang.svg" class="img-btn"></image>
 		    <text class="list-txt">办理退房</text>
 		  </view>
@@ -48,7 +48,7 @@
 				  <text class="select-list-time">07月22日</text>
 				</view>
 				<uni-calendar ref="calendar" :selected="info.selected" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
-				:endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
+				:endDate="info.endDate" :range="info.range" @change="change" @confirm="confirm" @close="close"/>
 			</view>
 			<!-- 房型列表 -->
 			<view class="room-kuang">
@@ -71,10 +71,10 @@
 			
 		</view>
 		<!-- 房间样式弹窗页面 -->
-		<uni-popup ref="inputDialog" type="dialog">
+		<uni-popup ref="popup" type="dialog" :mask-click="false">
 			<view class="popup_bg">
 				<text class="popup_title">户型详情</text>
-				<text class="popup_error" @confirm="dialogInputConfirm"></text>
+				<text class="popup_error" @click="popupClose"></text>
 				<!-- 轮播图 -->
 				<swiper class="swiper" circular :indicator-dots="indicatorDots">
 					<swiper-item v-for="(item, index) in img" :key="index">
@@ -87,8 +87,7 @@
 				<view class="popup_txt">尤其是刚上线的产品，很难通过产品的内部体系来实现快速的用户增长，所以会更加依赖于分享来达到广泛的传播，获取目标用户。
 所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截...</view>
 			</view>
-			<!-- <uni-popup-dialog ref="baseClose"  mode="base" title="输入内容" value="对话框预置提示内容!"
-				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog> -->
+			
 		</uni-popup>
 			
 	</view>
@@ -132,6 +131,34 @@
 		onLoad() {
 			
 		},
+		onReady() {
+			this.$nextTick(() => {
+				this.showCalendar = true
+			})
+			// TODO 模拟请求异步同步数据
+			// setTimeout(() => {
+			// 	this.info.date = getDate(new Date(),-30).fullDate
+			// 	this.info.startDate = getDate(new Date(),-60).fullDate
+			// 	this.info.endDate =  getDate(new Date(),30).fullDate
+			// 	this.info.selected = [{
+			// 			date: getDate(new Date(),-3).fullDate,
+			// 			info: '打卡'
+			// 		},
+			// 		{
+			// 			date: getDate(new Date(),-2).fullDate,
+			// 			info: '签到',
+			// 			data: {
+			// 				custom: '自定义信息',
+			// 				name: '自定义消息头'
+			// 			}
+			// 		},
+			// 		{
+			// 			date: getDate(new Date(),-1).fullDate,
+			// 			info: '已打卡'
+			// 		}
+			// 	]
+			// }, 2000)
+		},
 		methods: {
 			// 跳转到入住须知
 			navigateToXuzhi(){
@@ -151,16 +178,26 @@
 				  url: "../order_room/order_room",
 				});
 			},
+			//办理入住跳转
+			navigateToDairuzhu(){
+				uni.navigateTo({
+					url: "../my_orderlist/my_orderlist?Inv=2",
+				})
+			},
+			//办理退房
+			navigateToTuifang(){
+				uni.navigateTo({
+					url:"../my_orderlist/my_orderlist?Inv=3"
+				})
+			},
 			//弹窗
 			inputDialogToggle() {
-				this.$refs.inputDialog.open()
+				this.$refs.popup.open()
 			},
-			dialogInputConfirm() {
-				console.log(1)
-				// 关闭窗口后，恢复默认内容
-				this.$refs.inputDialog.close()
+			popupClose() {
+				this.$refs.popup.close()
 			},
-			
+			// 日期选择器弹窗
 			openCalendar() {
 				this.$refs.calendar.open()
 			},
@@ -169,6 +206,12 @@
 			},
 			confirm(e) {
 				console.log('confirm 返回:', e)
+				// 模拟动态打卡
+				if (this.info.selected.length > 5) return
+				this.info.selected.push({
+					date: e.fulldate,
+					info: '打卡'
+				})
 			},
 		}
 	}

pages/my_orderlist/my_orderlist.vue

@@ -84,7 +84,7 @@
 		},
 		mounted(){
 			// location.reload()//自动刷新
-			console.log(this.Inv)
+			// console.log(this.Inv)
 			this.changeTab(this.Inv)
 		},
 		methods:{

pages/order_room/css/order_room.css

@@ -14,7 +14,7 @@
 	background-size: 100% 100%;
 	background-attachment: inherit;
 	background-repeat: no-repeat;
-	margin-top: 20px;
+	margin-top: 0px;
 }
 /* 欢迎光临 */
 .welcome{
@@ -55,15 +55,10 @@
 	font-weight: 400;
 }
 /* 第二层表单 */
-.two_item{
-	margin-top: 0rpx;
-	width: 750rpx;
-	height: 1135rpx;
-}
 .two_all{
 	margin-top: 0rpx;
 	width: 750rpx;
-	height: 635rpx;
+	height: 655rpx;
 	background: rgba(255, 255, 255, 1);
 }
 /* 选择住房日期 */
@@ -131,7 +126,7 @@
 .form_bg{
 	margin-left: 21rpx;
 	width: 709rpx;
-	height: 561rpx;
+	height: 621rpx;
 	background: rgba(247, 249, 250, 1);
 	border-radius: 5rpx;
 }
@@ -167,3 +162,100 @@
 	font-size: 28rpx;
 	font-weight: 400;
 }
+.uni-list-cell-db{
+	position: absolute;
+	width: 670rpx;
+	margin-left: 29rpx;
+	margin-top: 414rpx;
+	color: rgba(0, 0, 0, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+}
+.jiantou{
+	float: right;
+	margin-top: -44rpx;
+	width: 39rpx;
+	height: 39rpx;
+}
+.uni-textarea{
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 502rpx;
+}
+.textsrea-txt{
+	margin-left: 575rpx;
+	margin-top: 4rpx;
+}
+/* 第三层表单 */
+.three_all{
+	margin-top: 20rpx;
+	width: 750rpx;
+	height: 263rpx;
+	background: rgba(255, 255, 255, 1);
+}
+.three-title{
+	position: absolute;
+	margin-left: 20rpx;
+	margin-top: 30rpx;
+	color: rgba(51, 51, 51, 1);
+	font-size: 32rpx;
+	font-weight: 400;
+}
+.three-mark{
+	position: absolute;
+	margin-left: 20rpx;
+	margin-top: 83rpx;
+	color: rgba(102, 102, 102, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+}
+.three-zhu{
+	position: absolute;
+	margin-left: 20rpx;
+	margin-top: 152rpx;
+	width: 700rpx;
+	color: rgba(153, 153, 153, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+/* 注释 */
+.zhushi{
+	display: flex;
+	margin-top: 50rpx;
+	color: rgba(153, 153, 153, 1);
+	font-size: 20rpx;
+	font-weight: 400;
+	text-align: center;
+}
+.zhushi-mark{
+	display: list-item;
+	margin-left: 30rpx;
+}
+/* 支付框 */
+.fukuan{
+	display: flex;
+	margin-top: 38rpx;
+	width: 750rpx;
+	height: 100rpx;
+	background: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx -4rpx 10rpx rgba(0, 0, 0, 0.15);
+}
+.fu-price{
+	width: 463rpx;
+	color: rgba(255, 87, 51, 1);
+	font-size: 44rpx;
+	font-weight: 500;
+	text-align: center;
+	line-height: 100rpx;
+}
+.fu-zhifu{
+	float: right;
+	width: 287rpx;
+	height: 100rpx;
+	background: rgba(41, 109, 227, 1);
+	color: rgba(255, 255, 255, 1);
+	font-size: 40rpx;
+	font-weight: 400;
+	text-align: center;
+	line-height: 100rpx;
+}

pages/order_room/order_room.vue

@@ -10,69 +10,60 @@
 			<view class="touming_txt">尊敬的老师，您辛苦了，欢迎入住！</view>
 		</view>
 		<!-- 第二层表单 -->
-		<view class="two_item">
-			<view class="two_all">
-				<view class="select-time" @click="openCalendar">
-					<view class="select-time-one">
-					  <text class="select-list">周四入住</text>
-					  <text class="select-list-time">07月21日</text>
-					</view>
-					<view class="select-center">
-						<view class="select-line1"></view>
-						<view class="select-circle">1晚</view>
-						<view class="select-line2"></view>
-					</view>
-					<view class="select-time-one">
-					  <text class="select-list">周五离店</text>
-					  <text class="select-list-time">07月22日</text>
-					</view>
-					<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
-					:endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
+		<view class="two_all">
+			<view class="select-time" @click="openCalendar">
+				<view class="select-time-one">
+				  <text class="select-list">周四入住</text>
+				  <text class="select-list-time">07月21日</text>
 				</view>
-				<view class="form_bg">
-					<view class="form_title">01户型</view>
-					<!-- 自定义表单 -->
-					<view class="form-name">李希</view>
-					<view class="form-line"></view>
-					<view class="form-phone">13548790024</view>
-					<view class="form-line" style="margin-top: 389rpx;"></view>
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							当前选择
-						</view>
-						<view class="uni-list-cell-db">
-							<picker @change="bindPickerChange" :value="index" :range="array">
-								<view class="uni-input">{{array[index]}}</view>
-							</picker>
-						</view>
-					</view>
+				<view class="select-center">
+					<view class="select-line1"></view>
+					<view class="select-circle">1晚</view>
+					<view class="select-line2"></view>
 				</view>
+				<view class="select-time-one">
+				  <text class="select-list">周五离店</text>
+				  <text class="select-list-time">07月22日</text>
+				</view>
+				<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
+				:endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
 			</view>
-			<button style="margin-bottom: 0rpx;" type="primary" @click="submit('customForm')">提交</button>
-		</view>
-		
-		<!-- 第三层订房 -->
-		<view class="room-list">
-			<!-- 房型列表 -->
-			<!-- <view class="room-kuang">
-				<view class="room-xinxi" v-for="(item,index) in room" :key="index">
-					<image class="room-image" src="../../static/index/room_image.svg"></image>
-					<view class="room-name">{{item.name}}</view>
-					<view class="room-mark">{{item.mark1}} {{item.mark2}} {{item.mark3}}</view>
-					<view class="room-icon">
-						<image src="../../static/index/index_wifi.svg" style="width: 22rpx;height: 22rpx;"></image>
-						<image src="../../static/index/index_kongtiao.svg" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
-						<image src="../../static/index/index_nosmoking.svg" style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"></image>
-						<image src="../../static/index/index_lock.svg" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
-					</view>
-					<view class="before-price"><strike>{{item.before_price}}</strike></view>
-					<view class="room-price">{{item.price}}</view>
-					<view class="room-button" @click="navigateToOrderRoom"><text>订</text></view>
-					<view class="room-line"  v-if="index<(room.length-1)"></view>
+			<view class="form_bg">
+				<view class="form_title">01户型</view>
+				<!-- 自定义表单 -->
+				<view class="form-name">李希</view>
+				<view class="form-line"></view>
+				<view class="form-phone">13548790024</view>
+				<view class="form-line" style="margin-top: 389rpx;"></view>
+				<view class="uni-list-cell-db">
+					<picker @change="bindPickerChange" :value="index" :range="array">
+						<view class="uni-input">{{array[index]}}</view>
+						<text class="jiantou">〉</text>
+					</picker>
 				</view>
-			</view> -->
-			
+				<view class="form-line" style="margin-top: 477rpx;"></view>
+				<view class="uni-textarea">
+					<textarea @blur="bindTextAreaBlur" placeholder="在此填写您的要求" maxlength="50" auto-height /><text class="textsrea-txt">{{textNum}}/50</text>
+				</view>
+			</view>
 		</view>
+		<!-- 第三层表单 -->
+		<view class="three_all">
+			<view class="three-title">您是【教师】</view>
+			<view class="three-mark">本人可以免费入住，需要预交费<text style="color: rgba(255, 87, 51, 1);">20.00</text>元，即可享受权益</view>
+			<view class="three-zhu">注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度数
+         为10度，超出标准需在预付款中扣除，未超出原路返回预付款</view>
+		</view>
+		<!-- 注释 -->
+		<view class="zhushi">
+			<text class="zhushi-mark">低价保证</text> <text class="zhushi-mark">入住免房费</text> <text class="zhushi-mark">提前选好房</text>
+		</view>
+		<!-- 支付框 -->
+		<view class="fukuan">
+			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥20.00</view>
+			<view class="fu-zhifu">立即支付</view>
+		</view>
+		
 	</view>
 </template>
 
@@ -88,6 +79,7 @@
 				},
 				array: ['18:00前到店', '19:00前到店', '20:00前到店', '21:00前到店'],
 				index: 0,
+				textNum:0,//输入框当前字数
 			}
 		},
 		onLoad() {
@@ -108,6 +100,12 @@
 				// console.log('picker发送选择改变，携带值为', e.detail.value)
 				this.index = e.detail.value
 			},
+			// 输入框
+			bindTextAreaBlur: function (e) {
+				// console.log(e.detail.cursor)
+				// console.log(e.detail.value)
+				this.textNum=e.detail.cursor
+			}
 		}
 	}
 </script>