269 lines
9.6 KiB
Vue
269 lines
9.6 KiB
Vue
<template>
|
|
<view class="monthly-payment-container">
|
|
<!-- 顶部标题 -->
|
|
<view class="header">
|
|
<text class="header-title">{{ headerTitle }}</text>
|
|
<u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28" @tap="toggleDropdown"></u-icon>
|
|
</view>
|
|
|
|
<!-- 下拉停车场列表 -->
|
|
<view v-if="isDropdownOpen" class="parking-list">
|
|
<!-- 搜索框 -->
|
|
<view class="search-box">
|
|
<u-icon name="search" size="40" color="#999" class="search-icon" />
|
|
<input type="text" placeholder="搜索停车场" class="search-input" />
|
|
</view>
|
|
|
|
<!-- 停车场列表 -->
|
|
<view class="parking-items">
|
|
<view class="parking-item" v-for="(park, index) in parkingLots" :key="index"
|
|
@tap="selectParkingLot(park)">
|
|
<view class="parking-item-left">
|
|
<view class="parking-spaces" v-if="park.remainingSpaces > 0">
|
|
<text class="spaces-label">剩余车位</text>
|
|
<text class="spaces-number">{{ park.remainingSpaces }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="parking-item-right">
|
|
<text class="parking-name">{{ park.name }}</text>
|
|
<text class="parking-distance">{{ park.distance }}km</text>
|
|
<text class="parking-address">{{ park.address }}</text>
|
|
</view>
|
|
<view class="parking-selected" v-if="park.isSelected">✔</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="options-list">
|
|
<view class="overlay" v-if="isDropdownOpen"></view>
|
|
<!-- 车辆信息 -->
|
|
<view class="car-info">
|
|
<image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png"
|
|
mode="aspectFit" />
|
|
</view>
|
|
|
|
<!-- 停车场信息 -->
|
|
<view class="park-info">
|
|
<text class="park-name">衡水市市民服务中心地下停车场</text>
|
|
<text class="park-type">地下</text>
|
|
</view>
|
|
|
|
<!-- 支付金额 -->
|
|
<view class="payment-amount">
|
|
<text class="amount-label">支付金额</text>
|
|
<text class="amount-value">¥{{ paymentAmount.toFixed(2) }}</text>
|
|
</view>
|
|
|
|
<!-- 选项列表 -->
|
|
<!-- 选择车牌 -->
|
|
<view class="option-item" @tap="selectCarPlate">
|
|
<view v-if="selectedCarPlate" class="option-box">
|
|
<view class="option-label option-val">{{ selectedCarPlate }}</view>
|
|
<view class="option-right">
|
|
<image class="option-image"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
|
|
mode="aspectFit" />
|
|
<image class="option-image"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
|
|
mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<view v-else class="option-box">
|
|
<text class="option-label">请选择车牌</text>
|
|
<u-icon name="arrow-right" size="30" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 计费规则 -->
|
|
<view class="option-item" @tap="showPriceRule">
|
|
<view v-if="monthPrice" class="option-box">
|
|
<view class="option-label option-val2">{{ monthPrice + '元/月' }}</view>
|
|
</view>
|
|
<view v-else class="option-box">
|
|
<text class="option-label">计费规则</text>
|
|
<u-icon name="arrow-right" size="30" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 包月月数 -->
|
|
<view class="option-item" @tap="selectMonthCount">
|
|
<view v-if="monthCount" class="option-box">
|
|
<view class="option-label option-val">{{ monthCount + '个月' }}</view>
|
|
<view class="option-right">
|
|
<image class="option-image"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
|
|
mode="aspectFit" />
|
|
<image class="option-image"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
|
|
mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<view v-else class="option-box">
|
|
<text class="option-label">包月月数</text>
|
|
<u-icon name="arrow-right" size="30" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开始时间 -->
|
|
<view class="option-item" @tap="selectStartTime">
|
|
<view class="option-box">
|
|
<text class="option-label">开始时间</text>
|
|
<text class="option-value">{{ startTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 结束时间 -->
|
|
<view class="option-item" @tap="selectEndTime">
|
|
<view class="option-box">
|
|
<text class="option-label">结束时间</text>
|
|
<text class="option-value">{{ endTime || '--年--月--日' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 下一步按钮 -->
|
|
<view class="next-step-btn" @tap="goToNextStep">
|
|
<text class="next-step-text">下一步</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单记录 -->
|
|
<view class="order-record" @tap="viewOrderRecords">
|
|
<text class="order-record-text">订单记录>></text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 页面数据
|
|
selectedCarPlate: '鄂FW3337',
|
|
monthCount: 8,
|
|
startTime: '2025-08-05 00:00:00',
|
|
endTime: '',
|
|
paymentAmount: 2400.00,
|
|
monthPrice: 300.00,
|
|
// 下拉列表相关
|
|
isDropdownOpen: false,
|
|
headerTitle: '衡水市民服务中心地下停车场',
|
|
parkingLots: [
|
|
{
|
|
id: 1,
|
|
name: '衡水市民服务中心地下停车场',
|
|
distance: '0.45',
|
|
address: '衡水市中心街123号',
|
|
remainingSpaces: 124,
|
|
isSelected: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '衡水市民服务中心地下停车场',
|
|
distance: '0.45',
|
|
address: '衡水市中心街123号',
|
|
remainingSpaces: 124,
|
|
isSelected: false
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '衡水市民服务中心地下停车场',
|
|
distance: '0.45',
|
|
address: '衡水市中心街123号',
|
|
remainingSpaces: 124,
|
|
isSelected: false
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '衡水市民服务中心地下停车场',
|
|
distance: '0.45',
|
|
address: '衡水市中心街123号',
|
|
remainingSpaces: 124,
|
|
isSelected: false
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算是否所有必填项都已填写
|
|
isAllFilled() {
|
|
return this.selectedCarPlate && this.monthCount > 0 && this.startTime;
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换下拉列表显示状态
|
|
toggleDropdown() {
|
|
this.isDropdownOpen = !this.isDropdownOpen;
|
|
},
|
|
|
|
// 选择停车场
|
|
selectParkingLot(park) {
|
|
// 先取消所有选中状态
|
|
this.parkingLots.forEach(item => {
|
|
item.isSelected = false;
|
|
});
|
|
// 设置当前选中
|
|
park.isSelected = true;
|
|
// 更新头部标题
|
|
this.$set(this, 'headerTitle', park.name);
|
|
// 关闭下拉列表
|
|
this.isDropdownOpen = false;
|
|
},
|
|
|
|
// 选择车牌
|
|
selectCarPlate() {
|
|
console.log('选择车牌');
|
|
},
|
|
|
|
// 显示计费规则
|
|
showPriceRule() {
|
|
console.log('显示计费规则');
|
|
},
|
|
|
|
// 选择包月月数
|
|
selectMonthCount() {
|
|
console.log('选择包月月数');
|
|
},
|
|
|
|
// 选择开始时间
|
|
selectStartTime() {
|
|
console.log('选择开始时间');
|
|
},
|
|
|
|
// 选择结束时间
|
|
selectEndTime() {
|
|
console.log('选择结束时间');
|
|
},
|
|
|
|
// 下一步
|
|
goToNextStep() {
|
|
if (!this.isAllFilled) {
|
|
return;
|
|
}
|
|
NavgateTo('../parkOrderDetail/index');
|
|
},
|
|
|
|
// 查看订单记录
|
|
viewOrderRecords() {
|
|
NavgateTo('../monthlyPaymentOrder/index');
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 页面加载时的初始化逻辑
|
|
console.log('包月支付页面加载');
|
|
// 初始化支付金额
|
|
this.paymentAmount = this.monthCount * this.monthPrice;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |