车辆租赁页面,使用uniapp框架和Vue.js语法。
<template>
<div class="rental-page">
<!-- 车辆列表 -->
<div class="car-list">
<div v-for="(car, index) in cars" :key="index" class="car-item">
<img :src="car.image" alt="car-image">
<div class="car-info">
<div class="car-title">{{ car.title }}</div>
<div class="car-price">{{ car.price }}元/天</div>
<div class="car-description">{{ car.description }}</div>
<button class="rent-button" @click="handleRent(index)">立即租车</button>
</div>
</div>
</div>
<!-- 租车弹窗 -->
<div v-if="showPopup" class="rent-popup">
<div class="popup-mask" @click="closePopup"></div>
<div class="popup-content">
<div class="popup-title">{{ cars[selectedCarIndex].title }} - 租车申请</div>
<div class="popup-form">
<div class="form-item">
<label for="start-date">开始日期:</label>
<input type="date" id="start-date" v-model="startDate">
</div>
<div class="form-item">
<label for="end-date">结束日期:</label>
<input type="date" id="end-date" v-model="endDate">
</div>
<div class="form-item">
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name">
</div>
<div class="form-item">
<label for="phone">联系电话:</label>
<input type="tel" id="phone" v-model="phone">
</div>
<button class="submit-button" @click="submitForm">确认租车</button>
</div>
</div>
</div>
</div>
</template>
样式代码:
<style>
.rental-page {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.car-item {
display: flex;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.car-item img {
width: 120px;
height: 80px;
object-fit: cover;
margin-right: 10px;
}
.car-info {
display: flex;
flex-direction: column;
}
.car-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.car-price {
font-size: 16px;
margin-bottom: 5px;
}
.car-description {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.rent-button {
padding: 8px 16px;
font-size: 14px;
background-color: #007aff;
color: #fff;
border-radius: 5px;
outline: none;
border: none;
cursor: pointer;
}
.rent-button:hover {
background-color: #0069d9;
}
.rent-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.popup-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.popup-content {
position: relative;
width: 400px;
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 20px;
z-index: 1;
}
.popup-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.form-item {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.form-item label {
width: 100px;
font-size: 16px;
}
.form-item input {
flex: 1;
height: 30px;
border-radius: 5px;
border: 1px solid #ddd;
padding: 0px 10px;
outline: none;
}
.submit-button {
padding: 10px 16px;
font-size: 14px;
background-color: #007aff;
color: #fff;
border-radius: 5px;
outline: none;
border: none;
cursor: pointer;
}
.submit-button:hover {
background-color: #0069d9;
}
</style>
脚本代码:
<script>
export default {
data() {
return {
cars: [
{
title: "法拉利 458 Italia",
image: "https://picsum.photos/120/80?random=1",
price: 2000,
description: "红色跑车,0-100公里加速3.4秒",
},
{
title: "保时捷 911 GT3 RS",
image: "https://picsum.photos/120/80?random=2",
price: 1800,
description: "黑色跑车,0-100公里加速3.5秒",
},
{
title: "兰博基尼 Huracan",
image: "https://picsum.photos/120/80?random=3",
price: 2500,
description: "黄色跑车,0-100公里加速3.2秒",
},
],
showPopup: false,
selectedCarIndex: -1,
startDate: "",
endDate: "",
name: "",
phone: "",
}
},
methods: {
handleRent(index) {
this.selectedCarIndex = index
this.showPopup = true
},
closePopup() {
this.showPopup = false
},
submitForm() {
// 省略提交逻辑
console.log("提交租车表单")
this.showPopup = false
this.selectedCarIndex = -1
this.startDate = ""
this.endDate = ""
this.name = ""
this.phone = ""
uni.showToast({
title: "租车成功",
icon: "success",
})
},
},
}
</script>
说明:
- 在
data
中定义了一个cars
数组,包含三种不同的车辆信息。 - 在每个车辆列表项中显示车辆的图片、标题、价格和简介,并提供一个“立即租车”的按钮。
- 点击“立即租车”按钮会弹出一个租车申请的弹窗,包含租车日期、姓名和联系电话等表单项。
- 点击弹窗中的“确认租车”按钮会触发
submitForm
方法,提交表单并关闭弹窗。 - 在
submitForm
方法中,可以添加实际的提交表单逻辑,这里仅仅是输出日志和显示一个提示框。
这个页面是一个简单的示例,可以根据实际需求进行修改和扩展。