新增办理续住页面

manifest.json

@@ -1,59 +1,66 @@
 {
-	"name" : "School_apartment",
-	"appid" : "__UNI__1EB2D7B",
-	"description": "",
-	"versionName": "1.0.0",
-	"versionCode": "100",
-	"transformPx": false,
-	"app-plus": { /* 5+App特有相关 */
-		"usingComponents": true,
-		"nvueCompiler": "uni-app",
-		"nvueStyleCompiler":"uni-app",
-    "splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		"modules": { /* 模块配置 */
-
-		},
-		"distribute": { /* 应用发布信息 */
-			"android": { /* android打包配置 */
-				"permissions": [
-					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
-					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-				]
-			},
-			"ios": { /* ios打包配置 */
-
-			},
-			"sdkConfigs": { /* SDK配置 */
-
+    "name" : "School_apartment",
+    "appid" : "__UNI__1EB2D7B",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    "app-plus" : {
+        /* 5+App特有相关 */
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "nvueStyleCompiler" : "uni-app",
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        "modules" : {},
+        /* 模块配置 */
+        "distribute" : {
+            /* 应用发布信息 */
+            "android" : {
+                /* android打包配置 */
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            "ios" : {},
+            /* ios打包配置 */
+            "sdkConfigs" : {
+                "maps" : {}
+            }
+        }
+    },
+    /* SDK配置 */
+    "quickapp" : {},
+    /* 快应用特有相关 */
+    "mp-weixin" : {
+        /* 小程序特有相关 */
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true,
+        "permission" : {
+			"scope.userLocation" : {
+				"desc" : "需要获取您的地理位置，请确认授权，否则地图功能将无法使用"
 			}
 		}
-	},
-	"quickapp": { /* 快应用特有相关 */
-
-	},
-	"mp-weixin": { /* 小程序特有相关 */
-		"appid": "",
-		"setting": {
-			"urlCheck": false
-		},
-		"usingComponents": true
-	}
+    }
 }

pages/index/css/index.css

@@ -14,7 +14,7 @@
 	background-size: 100% 100%;
 	background-attachment: inherit;
 	background-repeat: no-repeat;
-	margin-top: 20px;
+	margin-top: 0px;
 }
 /* 欢迎光临 */
 .welcome{
@@ -299,4 +299,73 @@
 	color: rgba(128, 128, 128, 1);
 	font-size: 28rpx;
 	font-weight: 400;
+}
+/* 办理续住弹窗 */
+.popup_bg_xu{
+	width: 650rpx;
+	height: 575rpx;
+	background: rgba(255, 255, 255, 1);
+	border-radius: 6rpx;
+}
+.select-time-xu{
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	position: absolute;
+	width: 630rpx;
+	height: 120rpx;
+	margin-top: 128rpx;
+	margin-left: 0rpx;
+}
+.select-time-one-xu{
+	margin-top: 32rpx;
+	margin-left: 55rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.popup_xu_line{
+	position: absolute;
+	margin-left: 0rpx;
+	margin-top: 86rpx;
+	width: 646rpx;
+	height: 0px;
+	background: rgba(204, 204, 204, 1);
+	border: 1rpx solid rgba(229, 229, 229, 1);
+}
+.popup_xu_txt{
+	position: absolute;
+	margin-left: 52rpx;
+	margin-top: 282rpx;
+	color: rgba(166, 166, 166, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+/* 支付框 */
+.fukuan{
+	display: flex;
+	padding-top: 475rpx;
+	width: 650rpx;
+	height: 100rpx;
+	background: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx -4rpx 10rpx rgba(0, 0, 0, 0.15);
+}
+.fu-price{
+	width: 363rpx;
+	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/index/index.vue

@@ -6,15 +6,11 @@
 		</view>
 		<!-- 第一层公寓名称卡片 -->
 		<uni-card style="margin-top: -40px;margin-bottom:0px; width:660rpx;height: 254rpx;" title="墨轩湖姬子公寓（南昌交通学院）" sub-title="2021年装修 | 智能门锁 | 房间wifi | 免费停车" extra="设施/详情＞" @click="navigateToXiangqing">
-			<!-- <text class="uni-body">宜春市靖安县北高速路口什么路899号</text>
-			<image class="uni-phone" src="../../static/index/index_phone.svg"></image>
-			<image class="uni-map" src="../../static/index/index_map.svg"></image>
-			<br><text class="uni-body2">距离我520km</text> -->
 		</uni-card>
-		<uni-card style="margin-top: -21px;margin-bottom:0px; width:660rpx;height: 254rpx;">
+		<uni-card style="margin-top: -22px;margin-bottom:0px; width:660rpx;height: 254rpx;">
 			<text class="uni-body">宜春市靖安县北高速路口什么路899号</text>
 			<image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
-			<image class="uni-map" src="../../static/index/index_map.svg"></image>
+			<image class="uni-map" @click="mapDaohang" src="../../static/index/index_map.svg"></image>
 			<br><text class="uni-body2">距离我520km</text>
 		</uni-card>
 		<!-- 第二层工具 -->
@@ -27,7 +23,7 @@
 		    <image src="../../static/index/index_ruzhu.svg" class="img-btn"></image>
 		    <text class="list-txt">办理入住</text>
 		  </view>
-		  <view class="item-list-one" @click="navigateToPay">
+		  <view class="item-list-one" @click="navigateToXuzhu">
 		    <image src="../../static/index/index_xuzhu.svg" class="img-btn"></image>
 		    <text class="list-txt">办理续住</text>
 		  </view>
@@ -93,6 +89,38 @@
 				<view class="popup_txt">尤其是刚上线的产品，很难通过产品的内部体系来实现快速的用户增长，所以会更加依赖于分享来达到广泛的传播，获取目标用户。
 所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截...</view>
 			</view>
+		</uni-popup>
+		<!-- 办理续住弹窗页面 -->
+		<uni-popup ref="popup_xuzhu" type="dialog" :mask-click="false">
+			<view class="popup_bg_xu">
+				<text class="popup_title">办理续住</text>
+				<text class="popup_error" @click="popupXuzhuClose"></text>
+				<text class="popup_xu_line"></text>
+				<!-- 时间选择 -->
+				<view class="select-time-xu" @click="openXuCalendar">
+					<view class="select-time-one-xu">
+					  <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-xu">
+					  <text class="select-list">周五离店</text>
+					  <text class="select-list-time">07月22日</text>
+					</view>
+					<uni-calendar ref="calendar_xu" :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="confirmXu" @close="closeXu"/>
+				</view>
+				<text class="popup_xu_txt">注：办理续住最多7天，如超过7天需要重新预定</text>
+				<!-- 支付框 -->
+				<view class="fukuan">
+					<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥20.00</view>
+					<view class="fu-zhifu">立即支付</view>
+				</view>
+			</view>
 			
 		</uni-popup>
 			
@@ -197,13 +225,20 @@
 					url:"../my_orderlist/my_orderlist?Inv=3"
 				})
 			},
-			//弹窗
+			//户型详情弹窗
 			inputDialogToggle() {
 				this.$refs.popup.open()
 			},
 			popupClose() {
 				this.$refs.popup.close()
 			},
+			//办理续住弹窗
+			navigateToXuzhu(){
+				this.$refs.popup_xuzhu.open()
+			},
+			popupXuzhuClose() {
+				this.$refs.popup_xuzhu.close()
+			},
 			// 日期选择器弹窗
 			openCalendar() {
 				this.$refs.calendar.open()
@@ -223,11 +258,42 @@
 					info: '打卡'
 				})
 			},
+			// 续住里日期选择器弹窗
+			openXuCalendar() {
+				this.$refs.calendar_xu.open()
+			},
+			closeXu(){
+				console.log('弹窗关闭');
+			},
+			confirmXu(e) {
+				console.log('confirm 返回:', e)
+			},
 			//拨打电话
 			telphone(phone){
 				uni.makePhoneCall({ 
 					phoneNumber: phone ,
 				}) // 传参带入号码即可
+			},
+			//地图导航
+			mapDaohang(){
+				uni.getLocation({
+				    type: 'wgs84',
+				    success: function (res) {
+				        console.log('当前位置的经度：' + res.longitude);
+				        console.log('当前位置的纬度：' + res.latitude);
+				        let longitude=res.longitude
+				         let latitude=res.latitude
+				         let name=res.name//
+				          let address=res.address//地址
+				         wx.openLocation({
+								latitude,
+								longitude,
+								name,
+								address,
+								scale:18//缩放比例
+							})
+				    }
+				});
 			}
 		}
 	}

pages/myself/myself.vue

@@ -145,32 +145,6 @@
 			//拨打人工热线
 			telphone(phone){
 				uni.makePhoneCall({ phoneNumber: phone }) // 传参带入号码即可
-				// 获取设备平台
-				// let platform = uni.getSystemInfoSync().platform
-				// switch (platform) {
-				// 	case 'android':
-				// 		uni.showActionSheet({
-				// 		    itemList: [phone,'呼叫'],
-				// 		    success:function(res){
-				// 				console.log(res);
-				// 				if(res.tapIndex==1){
-				// 					plus.device.dial(phone,true)        
-				// 				}
-				// 		    },
-				// 		    complete: function(res) {
-				// 		       console.log("安卓失败",res)
-				// 		    }
-				// 		})
-				// 		break;
-				// 	case 'ios':
-				// 		// 使用uni-app提供的借口
-				// 		uni.makePhoneCall({
-				// 			phoneNumber: phone
-				// 		})
-				// 		break;
-				// 	default:
-					// 调试器工具
-				// }
 			}
 		}
 	}