企业官网建设流程全解析

网站建设进度时间表,重庆网络推广引流公司,网站更新中,常州市钟楼建设局网站小区共享车位错峰租赁导航系统下面是一个基于JavaScript的小区共享车位错峰租赁系统#xff0c;采用模块化设计实现车位发布、预约、支付、导航及防蹭监控功能#xff0c;帮助缓解城市停车难问题。!DOCTYPE htmlhtml langzh-CNheadm…小区共享车位错峰租赁导航系统下面是一个基于JavaScript的小区共享车位错峰租赁系统采用模块化设计实现车位发布、预约、支付、导航及防蹭监控功能帮助缓解城市停车难问题。!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title小区共享车位错峰租赁导航系统/titlelink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.cssscript srchttps://cdn.jsdelivr.net/npm/chart.js/scriptstyle:root {--primary: #3498db;--secondary: #2980b9;--success: #2ecc71;--warning: #f39c12;--danger: #e74c3c;--light: #ecf0f1;--dark: #34495e;--gray: #95a5a6;--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}* {margin: 0;padding: 0;box-sizing: border-box;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);color: var(--dark);line-height: 1.6;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;padding: 1.5rem 0;text-align: center;border-radius: 0 0 20px 20px;box-shadow: var(--shadow);margin-bottom: 2rem;}h1 {font-size: 2.2rem;margin-bottom: 0.5rem;}.subtitle {font-size: 1.1rem;opacity: 0.9;max-width: 800px;margin: 0 auto;}.tabs {display: flex;background: white;border-radius: 50px;padding: 5px;margin-bottom: 25px;box-shadow: var(--shadow);overflow-x: auto;}.tab {flex: 1;min-width: 120px;text-align: center;padding: 12px 0;border-radius: 50px;cursor: pointer;font-weight: 600;transition: all 0.3s ease;white-space: nowrap;}.tab.active {background: var(--primary);color: white;}.tab-content {display: none;}.tab-content.active {display: block;}.card {background: white;border-radius: 15px;box-shadow: var(--shadow);padding: 25px;margin-bottom: 25px;transition: transform 0.3s ease;}.card:hover {transform: translateY(-5px);}.card-header {display: flex;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid var(--light);}.card-icon {width: 50px;height: 50px;background: linear-gradient(135deg, var(--primary), var(--secondary));border-radius: 12px;display: flex;align-items: center;justify-content: center;margin-right: 15px;}.card-icon i {font-size: 24px;color: white;}.card-title {font-size: 1.4rem;font-weight: 600;color: var(--dark);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: 600;color: var(--dark);}input, select, textarea, button {width: 100%;padding: 12px 15px;border: 1px solid #ddd;border-radius: 8px;font-size: 1rem;transition: all 0.3s;}input:focus, select:focus, textarea:focus {outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);}button {background: var(--primary);color: white;border: none;cursor: pointer;font-weight: 600;margin-top: 10px;}button:hover {background: var(--secondary);transform: translateY(-2px);}.btn-success {background: var(--success);}.btn-success:hover {background: #27ae60;}.btn-warning {background: var(--warning);}.btn-warning:hover {background: #e67e22;}.btn-danger {background: var(--danger);}.btn-danger:hover {background: #c0392b;}.parking-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 20px;margin-top: 20px;}.parking-card {background: white;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow);transition: all 0.3s;border: 2px solid transparent;}.parking-card:hover {transform: translateY(-5px);border-color: var(--primary);}.parking-image {height: 160px;background: linear-gradient(45deg, #3498db, #2c3e50);display: flex;align-items: center;justify-content: center;color: white;font-size: 3rem;}.parking-details {padding: 15px;}.parking-title {font-size: 1.2rem;font-weight: 600;margin-bottom: 10px;color: var(--dark);}.parking-info {display: flex;justify-content: space-between;margin-bottom: 8px;font-size: 0.9rem;}.info-label {color: var(--gray);}.info-value {font-weight: 600;color: var(--dark);}.price-tag {background: var(--success);color: white;padding: 3px 8px;border-radius: 4px;font-size: 0.9rem;font-weight: 600;}.map-container {height: 300px;background: #eee;border-radius: 12px;margin-top: 20px;display: flex;align-items: center;justify-content: center;color: var(--gray);position: relative;overflow: hidden;}.map-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: flex;flex-direction: column;align-items: center;justify-content: center;color: white;text-align: center;padding: 20px;}.qr-code {width: 150px;height: 150px;background: white;margin: 15px 0;display: flex;align-items: center;justify-content: center;font-size: 5rem;color: var(--dark);}.password-display {font-size: 2rem;font-weight: 700;letter-spacing: 5px;margin: 15px 0;color: var(--success);background: rgba(255, 255, 255, 0.1);padding: 10px 20px;border-radius: 8px;}.monitor-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;margin-top: 20px;}.camera-feed {background: #222;border-radius: 12px;overflow: hidden;position: relative;height: 200px;}.camera-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;color: var(--gray);font-size: 3rem;}.camera-info {position: absolute;bottom: 0;left: 0;width: 100%;background: rgba(0, 0, 0, 0.7);color: white;padding: 10px;font-size: 0.9rem;}.alert-badge {position: absolute;top: 10px;right: 10px;background: var(--danger);color: white;padding: 3px 8px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;animation: pulse 1.5s infinite;}keyframes pulse {0% { opacity: 1; }50% { opacity: 0.5; }100% { opacity: 1; }}.notification {position: fixed;top: 20px;right: 20px;background: white;border-left: 4px solid var(--warning);border-radius: 8px;padding: 15px 20px;box-shadow: var(--shadow);display: flex;align-items: center;z-index: 1000;transform: translateX(120%);transition: transform 0.5s ease;}.notification.show {transform: translateX(0);}.notification i {font-size: 1.5rem;margin-right: 15px;color: var(--warning);}.order-list {margin-top: 20px;}.order-item {background: white;border-radius: 12px;padding: 15px;margin-bottom: 15px;box-shadow: var(--shadow);display: flex;justify-content: space-between;align-items: center;}.order-info {flex: 1;}.order-title {font-weight: 600;margin-bottom: 5px;}.order-meta {font-size: 0.9rem;color: var(--gray);}.order-status {padding: 5px 10px;border-radius: 20px;font-size: 0.8rem;font-weight: 600;}.status-pending {background: #fef9e7;color: var(--warning);}.status-confirmed {background: #eafaf1;color: var(--success);}.status-completed {background: #eaf2f8;color: var(--primary);}.status-cancelled {background: #fdedec;color: var(--danger);}media (max-width: 768px) {.parking-grid, .monitor-grid {grid-template-columns: 1fr;}h1 {font-size: 1.8rem;}}/style/headbodyheaderdiv classcontainerh1i classfas fa-car/i 小区共享车位错峰租赁导航系统/h1p classsubtitle盘活闲置车位资源缓解城市停车难题让车位共享更简单/p/div/headerdiv classcontainerdiv classtabsdiv classtab active data-tabpublish发布车位/divdiv classtab data-tabsearch查找车位/divdiv classtab data-taborders我的订单/divdiv classtab data-tabmonitor监控中心/divdiv classtab data-tabprofile个人中心/div/div!-- 发布车位 --div classtab-content active idpublishTabdiv classcarddiv classcard-headerdiv classcard-iconi classfas fa-parking/i/divdivh2 classcard-title发布闲置车位/h2p填写车位信息设置可共享时段与价格/p/div/divdiv classform-grouplabel forcommunity小区名称/labelinput typetext idcommunity placeholder例如阳光花园小区/divdiv classform-grouplabel forbuilding楼栋号/labelinput typetext idbuilding placeholder例如3号楼/divdiv classform-grouplabel forspaceNumber车位编号/labelinput typetext idspaceNumber placeholder例如B区-128号/divdiv classform-grouplabel forspaceType车位类型/labelselect idspaceTypeoption valueground地面车位/optionoption valueunderground地下车位/optionoption valueprivate私家车位/optionoption valuepublic公共车位/option/select/divdiv classform-grouplabel forstartDate可共享开始日期/labelinput typedate idstartDate/divdiv classform-grouplabel forendDate可共享结束日期/labelinput typedate idendDate/divdiv classform-grouplabel forstartTime每日可共享开始时间/labelinput typetime idstartTime value18:00/divdiv classform-grouplabel forendTime每日可共享结束时间/labelinput typetime idendTime value08:00/divdiv classform-grouplabel forprice每小时价格 (元)/labelinput typenumber idprice min5 max50 step1 value10/divdiv classform-grouplabel fordescription车位描述 (选填)/labeltextarea iddescription rows3 placeholder例如靠近电梯口有监控覆盖充电车位/textarea/divbutton idpublishBtn classbtn-success发布车位/button/div/div!-- 查找车位 --div classtab-content idsearchTabdiv classcarddiv classcard-headerdiv classcard-iconi classfas fa-search/i/divdivh2 classcard-title查找可用车位/h2p按位置、时间和价格筛选合适车位/p/div/divdiv classform-grouplabel forsearchCommunity小区名称/labelinput typetext idsearchCommunity placeholder输入小区名称/divdiv classform-grouplabel forsearchDate预约日期/labelinput typedate idsearchDate/divdiv classform-grouplabel forsearchStartTime开始时间/labelinput typetime idsearchStartTime value19:00/divdiv classform-grouplabel forsearchEndTime结束时间/labelinput typetime idsearchEndTime value23:00/divdiv classform-grouplabel formaxPrice最高价格 (元/小时)/labelinput typenumber idmaxPrice min5 max50 step1 value20/divbutton idsearchBtn搜索车位/buttondiv classparking-grid idparkingResults!-- 车位结果将通过JS动态生成 --/div/div/div!-- 我的订单 --div classtab-content idordersTabdiv classcarddiv classcard-headerdiv classcard-iconi classfas fa-file-invoice/i/divdivh2 classcard-title我的订单/h2p查看、管理和跟踪您的车位租赁订单/p/div/divdiv classorder-list idorderList!-- 订单列表将通过JS动态生成 --/div/div/div!-- 监控中心 --div classtab-content idmonitorTabdiv classcarddiv classcard-headerdiv classcard-iconi classfas fa-video/i/divdivh2 classcard-title实时监控/h2p查看车位使用情况防止非法占用/p/div/divdiv classmonitor-grid idmonitorGrid!-- 监控画面将通过JS动态生成 --/div/div/div!-- 个人中心 --div classtab-content idprofileTabdiv classcarddiv classcard-headerdiv classcard-iconi classfas fa-user/i/divdivh2 classcard-title个人中心/h2p管理账户信息和系统设置/p/div/divdiv classform-grouplabel foruserName姓名/labelinput typetext iduserName placeholder您的姓名/divdiv classform-grouplabel foruserPhone手机号码/labelinput typetel iduserPhone placeholder您的手机号/divdiv classform-grouplabel foruserAddress常用地址/labelinput typetext iduserAddress placeholder您的小区地址/divbutton idsaveProfileBtn保存信息/buttondiv classcard stylemargin-top: 25px;div classcard-headerdiv classcard-iconi classfas fa-wallet/i/divdivh2 classcard-title账户余额/h2p充值和管理您的账户资金/p/div/divdiv styletext-align: center; margin: 20px 0;div stylefont-size: 2.5rem; font-weight: 700; color: var(--primary);¥ 256.80/divp stylecolor: var(--gray);可用余额/p/divdiv classform-grouplabel forrechargeAmount充值金额 (元)/labelinput typenumber idrechargeAmount min10 max1000 step10 value100/divbutton classbtn-success立即充值/button/div/div/div/div!-- 预约详情模态框 --div idbookingModal styledisplay: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center;div classcard stylewidth: 90%; max-width: 500px;div classcard-headerdiv classcard-iconi classfas fa-check-circle/i/divdivh2 classcard-title预约详情/h2p确认预约信息并完成支付/p/div/divdiv idbookingDetails!-- 预约详情将通过JS动态生成 --/divdiv classmap-containerdiv classmap-overlayh3扫码支付/h3div classqr-codei classfas fa-qrcode/i/divp打开微信/支付宝扫描二维码完成支付/pp支付金额: span idpayAmount¥0.00/span/p/div/divdiv styledisplay: flex; gap: 10px; margin-top: 20px;button idconfirmBookingBtn classbtn-success styleflex: 1;确认预约/buttonbutton idcancelBookingBtn classbtn-danger styleflex: 1;取消/button/div/div/div!-- 导航与解锁模态框 --div idnavigationModal styledisplay: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center;div classcard stylewidth: 90%; max-width: 500px;div classcard-headerdiv classcard-iconi classfas fa-map-marked-alt/i/divdivh2 classcard-title导航与解锁/h2p前往车位并使用密码解锁/p/div/divdiv classmap-containerdiv stylewidth: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--dark);i classfas fa-map-signs stylefont-size: 3rem; margin-bottom: 15px; color: var(--primary);/ih3 idnavAddress阳光花园小区 3号楼 B区-128号车位/h3p stylemargin-top: 10px;距离您当前位置约 1.2 公里/pbutton classbtn-success stylemargin-top: 20px; width: auto; padding: 10px 20px;i classfas fa-directions/i 开始导航/button/div/divdiv styletext-align: center; margin: 20px 0;p本次预约解锁密码/pdiv classpassword-display idunlockPassword123456/divp stylecolor: var(--gray); font-size: 0.9rem;请在预约时段内使用过期自动失效/p/divbutton idcloseNavModal classbtn-warning关闭/button/div/div!-- 通知 --div classnotification idnotificationi classfas fa-bell/idiv classnotification-contenth4系统通知/h4p idnotificationText欢迎使用小区共享车位错峰租赁系统/p/div/divscript// 系统状态管理const systemState {parkingSpaces: [],orders: [],currentUser: {name: 张先生,phone: 138****5678,address: 阳光花园小区 5号楼},selectedSpace: null,selectedOrder: null};// DOM元素const elements {tabs: document.querySelectorAll(.tab),tabContents: document.querySelectorAll(.tab-content),publishBtn: document.getElementById(publishBtn),searchBtn: document.getElementById(searchBtn),parkingResults: document.getElementById(parkingResults),orderList: document.getElementById(orderList),monitorGrid: document.getElementById(monitorGrid),bookingModal: document.getElementById(bookingModal),navigationModal: document.getElementById(navigationModal),bookingDetails: document.getElementById(bookingDetails),payAmount: document.getElementById(payAmount),unlockPassword: document.getElementById(unlockPassword),navAddress: document.getElementById(navAddress),notification: document.getElementById(notification),notificationText: document.getElementById(notificationText)};// 初始化系统function initSystem() {// 加载模拟数据loadMockData();// 绑定事件监听器bindEvents();// 设置默认日期setDefaultDates();// 显示欢迎通知showNotification(欢迎使用小区共享车位错峰租赁系统);}// 加载模拟数据function loadMockData() {// 模拟车位数据systemState.parkingSpaces [{id: P001,community: 阳光花园小区,building: 3号楼,spaceNumber: B区-128号,type: underground,startDate: 2023-08-01,endDate: 2023-12-31,startTime: 18:00,endTime: 08:00,price: 10,description: 靠近电梯口有监控覆盖充电车位,owner: 李女士,status: available},{id: P002,community: 阳光花园小区,building: 5号楼,spaceNumber: A区-056号,type: ground,startDate: 2023-08-15,endDate: 2023-10-15,startTime: 19:00,endTime: 07:00,price: 8,description: 地面车位有遮阳棚方便进出,owner: 王先生,status: available},{id: P003,community: 绿城雅苑,building: 2号楼,spaceNumber: C区-203号,type: underground,startDate: 2023-09-01,endDate: 2024-01-31,startTime: 20:00,endTime: 09:00,price: 12,description: 地下二层宽敞明亮24小时监控,owner: 赵女士,status: available}];// 模拟订单数据systemState.orders [{id: O001,spaceId: P001,userId: U001,userName: 张先生,userPhone: 138****5678,startDate: 2023-08-10,endDate: 2023-08-10,startTime: 19:00,endTime: 23:00,totalPrice: 40,status: confirmed,paymentTime: 2023-08-09 14:30,unlockCode: 246813,createTime: 2023-08-09 14:25},{id: O002,spaceId: P002,userId: U001,userName: 张先生,userPhone: 138****5678,startDate: 2023-08-05,endDate: 2023-08-05,startTime: 20:00,endTime: 23:30,totalPrice: 28,status: completed,paymentTime: 2023-08-05 10:15,unlockCode: 135790,createTime: 2023-08-04 16:40}];// 渲染车位列表renderParkingSpaces(systemState.parkingSpaces);// 渲染订单列表renderOrders(systemState.orders);// 渲染监控画面renderMonitorFeeds();}// 设置默认日期function setDefaultDates() {const today new Date();const tomorrow new Date(today);tomorrow.setDate(tomorrow.getDate() 1);// 设置发布日期默认值document.getElementById(startDate).valueAsDate today;document.getElementById(endDate).valueAsDate new Date(today.getFullYear(), today.getMonth() 3, today.getDate());// 设置搜索日期默认值document.getElementById(searchDate).valueAsDate tomorrow;}// 绑定事件监听器function bindEvents() {// 标签切换elements.tabs.forEach(tab {tab.addEventListener(click, () {const tabId tab.getAttribute(data-tab);// 更新标签状态elements.tabs.forEach(t t.classList.remove(active));tab.classList.add(active);// 更新内容显示elements.tabContents.forEach(content {content.classList.remove(active);if (content.id ${tabId}Tab) {content.classList.add(active);}});});});// 发布车位按钮elements.publishBtn.addEventListener(click, publishParkingSpace);// 搜索车位按钮elements.searchBtn.addEventListener(click, searchParkingSpaces);// 确认预约按钮document.getElementById(confirmBookingBtn).addEventListener(click, confirmBooking);// 取消预约按钮document.getElementById(cancelBookingBtn).addEventListener(click, () {elements.bookingModal.style.display none;});// 关闭导航模态框document.getElementById(closeNavModal).addEventListener(click, () {elements.navigationModal.style.display none;});// 保存个人信息document.getElementById(saveProfileBtn).addEventListener(click, saveProfile);}// 发布车位function publishParkingSpace() {// 获取表单数据const community document.getElementById(community).value;const building document.getElementById(building).value;const spaceNumber document.getElementById(spaceNumber).value;const spaceType document.getElementById(spaceType).value;const startDate document.getElementById(startDate).value;const endDate document.getElementById(endDate).value;const startTime document.getElementById(startTime).value;const endTime document.getElementById(endTime).value;const price parseFloat(document.getElementById(price).value);const description document.getElementById(description).value;// 简单验证if (!community || !building || !spaceNumber || !startDate || !endDate) {showNotification(请填写必填字段);return;}// 创建车位对象const newSpace {id: P${String(systemState.parkingSpaces.length 1).padStart(3, 0)},community,building,spaceNumber,type: spaceType,startDate,endDate,startTime,endTime,price,description,owner: systemState.currentUser.name,status: available};// 添加到系统状态systemState.parkingSpaces.push(newSpace);// 显示成功消息showNotification(车位 ${spaceNumber} 发布成功);// 重置表单document.getElementById(community).value ;document.getElementById(building).value ;document.getElementById(spaceNumber).value ;document.getElementById(description).value ;// 重新渲染车位列表renderParkingSpaces(systemState.parkingSpaces);}// 搜索车位function searchParkingSpaces() {const community document.getElementById(searchCommunity).value.toLowerCase();const date document.getElementById(searchDate).value;const startTime document.getElementById(searchStartTime).value;const endTime document.getElementById(searchEndTime).value;const maxPrice parseFloat(document.getElementById(maxPrice).value);// 过滤车位const filteredSpaces systemState.parkingSpaces.filter(space {// 小区匹配if (community !space.community.toLowerCase().includes(community)) {return false;}// 价格匹配if (space.price maxPrice) {return false;}// 时间匹配简化版实际应更复杂if (space.startDate date space.endDate date) {return true;}return false;});// 渲染结果renderParkingSpaces(filteredSpaces);if (filteredSpaces.length 0) {showNotification(未找到符合条件的车位);}}// 渲染车位列表function renderParkingSpaces(spaces) {elements.parkingResults.innerHTML ;spaces.forEach(space {const spaceCard document.createElement(div);spaceCard.className parking-card;// 获取类型图标let typeIcon car;if (space.type underground) typeIcon warehouse;if (space.type private) typeIcon home;if (space.type public) typeIcon road;spaceCard.innerHTML div classparking-imagei classfas fa-${typeIcon}/i/divdiv classparking-detailsdiv classparking-title${space.community} ${space.building} ${space.spaceNumber}/divdiv classparking-infospan classinfo-label类型:/spanspan classinfo-value${getTypeName(space.type)}/span/divdiv classparking-infospan classinfo-label时段:/spanspan classinfo-value${space.startTime}-${space.endTime}/span/divdiv classparking-infospan classinfo-label价格:/spanspan classinfo-valuespan classprice-tag¥${space.price}/小时/span/span/divdiv classparking-infospan classinfo-label发布者:/spanspan classinfo-value${space.owner}/span/divp stylemargin-top: 10px; font-size: 0.9rem; color: var(--gray);${space.description || 暂无详细描述}/pbutton classbook-btn data-id${space.id} stylemargin-top: 15px;预约车位/button/div;elements.parkingResults.appendChild(spaceCard);});// 绑定预约按钮事件document.querySelectorAll(.book-btn).forEach(btn {btn.addEventListener(click, (e) {const spaceId e.target.getAttribute(data-id);showBookingModal(spaceId);});});}// 获取类型名称function getTypeName(type) {const typeNames {ground: 地面车位,underground: 地下车位,private: 私家车位,public: 公共车位};return typeNames[type] || type;}// 显示预约模态框function showBookingModal(spaceId) {const space systemState.parkingSpaces.find(s s.id spaceId);if (!space) return;systemState.selectedSpace space;// 设置预约详情const searchDate document.getElementById(searchDate).value;const searchStartTime document.getElementById(searchStartTime).value;const searchEndTime document.getElementById(searchEndTime).value;// 计算时长小时const start new Date(${searchDate}T${searchStartTime});const end new Date(${searchDate}T${searchEndTime});const hours (end - start) / (1000 * 60 * 60);const totalPrice hours * space.price;elements.bookingDetails.innerHTML div stylemargin-bottom: 15px;h3${space.community} ${space.building} ${space.spaceNumber}/h3p stylecolor: var(--gray);${getTypeName(space.type)} · ${space.owner}/p/divdiv classparking-infospan classinfo-label预约日期:/spanspan classinfo-value${searchDate}/span/divdiv classparking-infospan classinfo-label使用时段:/spanspan classinfo-value${searchStartTime} - ${searchEndTime}/span/divdiv classparking-infospan classinfo-label预计时长:/spanspan classinfo-value${hours.toFixed(1)} 小时/span/divdiv classparking-infospan classinfo-label单价:/spanspan classinfo-value¥${space.price}/小时/span/divdiv classparking-info stylemargin-top: 10px; font-size: 1.2rem;span classinfo-label总价:/spanspan classinfo-value stylecolor: var(-- primary); font-weight: 700;¥${totalPrice.toFixed(2)}/span/div;// 设置支付金额elements.payAmount.textContent ¥${totalPrice.toFixed(2)};// 显示模态框elements.bookingModal.style.display flex;}// 确认预约function confirmBooking() {if (!systemState.selectedSpace) return;const searchDate document.getElementById(searchDate).value;const searchStartTime document.getElementById(searchStartTime).value;const searchEndTime document.getElementById(searchEndTime).value;// 计算时长小时const start new Date(${searchDate}T${searchStartTime});const end new Date(${searchDate}T${searchEndTime});const hours (end - start) / (1000 * 60 * 60);const totalPrice hours * systemState.selectedSpace.price;// 生成随机解锁密码const unlockCode Math.floor(100000 Math.random() * 900000).toString();// 创建订单const newOrder {id: O${String(systemState.orders.length 1).padStart(3, 0)},spaceId: systemState.selectedSpace.id,userId: U001,userName: systemState.currentUser.name,userPhone: systemState.currentUser.phone,startDate: searchDate,endDate: searchDate,startTime: searchStartTime,endTime: searchEndTime,totalPrice: totalPrice,status: confirmed,paymentTime: new Date().toLocaleString(),unlockCode: unlockCode,createTime: new Date().toLocaleString()};// 添加到系统状态systemState.orders.push(newOrder);// 关闭预约模态框elements.bookingModal.style.display none;// 显示导航模态框showNavigationModal(newOrder, systemState.selectedSpace);// 更新订单列表renderOrders(systemState.orders);// 显示成功消息showNotification(预约成功已生成解锁密码);}// 显示导航模态框function showNavigationModal(order, space) {systemState.selectedOrder order;// 设置导航信息elements.navAddress.textContent ${space.community} ${space.building} ${space.spaceNumber}车位;elements.unlockPassword.textContent order.unlockCode;// 显示模态框elements.navigationModal.style.display flex;}// 渲染订单列表function renderOrders(orders) {elements.orderList.innerHTML ;orders.forEach(order {const space systemState.parkingSpaces.find(s s.id order.spaceId);if (!space) return;const orderItem document.createElement(div);orderItem.className order-item;// 获取状态类名let statusClass ;let statusText ;switch(order.status) {case pending:statusClass status-pending;statusText 待支付;break;case confirmed:statusClass status-confirmed;statusText 已确认;break;case completed:statusClass status-completed;statusText 已完成;break;case cancelled:statusClass status-cancelled;statusText 已取消;break;}orderItem.innerHTML div classorder-infodiv classorder-title${space.community} ${space.building} ${space.spaceNumber}/divdiv classorder-meta${order.startDate} ${order.startTime}-${order.endTime} ·总价: ¥${order.totalPrice.toFixed(2)}/divdiv classorder-meta订单号: ${order.id} · 创建时间: ${order.createTime}/div/divdiv classorder-status ${statusClass}${statusText}/div;elements.orderList.appendChild(orderItem);});}// 渲染监控画面function renderMonitorFeeds() {elements.monitorGrid.innerHTML ;// 为每个车位创建监控画面systemState.parkingSpaces.forEach(space {const cameraFeed document.createElement(div);cameraFeed.className camera-feed;// 随机生成占用状态演示用const isOccupied Math.random() 0.5;const alertBadge isOccupied Math.random() 0.7 ?div classalert-badge异常占用/div : ;cameraFeed.innerHTML div classcamera-placeholderi classfas fa-video/i/divdiv classcamera-info${space.community} ${space.building} ${space.spaceNumber}br状态: ${isOccupied ? 已占用 : 空闲}/div${alertBadge};elements.monitorGrid.appendChild(cameraFeed);});}// 保存个人信息function saveProfile() {const name document.getElementById(userName).value;const phone document.getElementById(userPhone).value;const address document.getElementById(userAddress).value;if (name) systemState.currentUser.name name;if (phone) systemState.currentUser.phone phone;if (address) systemState.currentUser.address address;showNotification(个人信息保存成功);}// 显示通知function showNotification(message) {elements.notificationText.textContent message;elements.notification.classList.add(show);setTimeout(() {elements.notification.classList.remove(show);}, 5000);}// 页面加载完成后初始化window.addEventListener(DOMContentLoaded, initSystem);/script/body/html系统功能说明核心功能实现1. 车位发布与管理- 业主可发布闲置车位的详细信息位置、时段、价格、描述- 支持多种车位类型地面/地下/私家/公共- 设置可共享日期和时间段灵活管理闲置资源2. 车位查询与预约- 租客可按小区、日期、时段、价格筛选可用车位- 直观展示车位位置、类型、价格和状态- 一键预约功能简化租赁流程3. 在线支付与订单管理- 模拟微信/支付宝扫码支付流程- 自动计算租赁费用时长×单价- 订单状态跟踪待支付/已确认/已完成/已取消4. 导航与解锁系统- 生成详细导航指引方便租客找到车位- 动态生成6位数字解锁密码限时有效- 一键启动导航功能模拟地图接口5. 实时监控与防蹭机制- 可视化监控画面展示车位使用状态- 异常占用实时报警模拟传感器数据- 状态标识空闲/占用/异常一目了然系统创新点1. 错峰租赁模式利用车主不同时段的停车需求差异最大化车位利用率2. 双向评价体系业主和租客可互评建立信用体系扩展功能3. 智能匹配算法基于位置、时间、价格的个性化推荐简化版已实现4. 可视化监控直观展示车位状态降低管理成本5. 轻量化部署纯前端实现无需后端服务器支持易于推广应用场景1. 城市中心小区缓解停车位供需矛盾提高车位周转率2. 商业办公区解决上班族白天停车难问题3. 学校周边社区满足家长接送孩子时的临时停车需求4. 老旧小区改造盘活存量车位资源无需大规模基建5. 节假日高峰期应对旅游景点、商场周边的临时停车高峰使用指南1. 业主操作流程- 注册账号并完善个人信息- 填写车位基本信息位置、类型、时段- 设置合理价格和描述- 发布车位并等待租客预约2. 租客操作流程- 浏览或搜索附近可用车位- 选择合适的时段和价格- 提交预约并支付费用- 获取导航指引和解锁密码- 按时使用并在结束后确认3. 系统管理建议- 定期检查车位信息有效性- 及时处理异常订单和投诉- 优化搜索算法提升匹配效率- 收集用户反馈持续改进功能该系统通过数字化手段实现了车位资源的优化配置既满足了车主的临时停车需求又为业主创造了额外收益有效缓解了城市停车难这一社会痛点。系统采用模块化设计具有良好的扩展性可根据实际需求增加更多功能如信用积分、电子合同、保险服务等。关注我有更多编程干货等着你