308 lines
12 KiB
Vue
308 lines
12 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>
|
||
<view class="overlay" v-if="isDropdownOpen" />
|
||
<!-- 车辆选择区域 -->
|
||
<view class="changeCar">
|
||
<view class="car-selector" @tap="toggleCarDropdown">
|
||
<text class="selected-car-text">{{ selectedCar || '选择车辆' }}</text>
|
||
<u-icon :name="isCarDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||
</view>
|
||
|
||
<!-- 车辆下拉列表 -->
|
||
<view v-if="isCarDropdownOpen" class="car-dropdown">
|
||
<view class="dropdown-arrow"></view>
|
||
<view class="car-item" v-for="(car, index) in cars" :key="index" @click="selectCar(car)">
|
||
{{ car }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container">
|
||
<view class="title">请输入车牌号码</view>
|
||
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"
|
||
ref="carNumberInput" />
|
||
<view class="selectColorBox" @click="show = true">
|
||
<view>车牌颜色</view>
|
||
<view class="selectColor">
|
||
<view class="color">{{ color }}</view>
|
||
<u-icon name="arrow-right" size="25"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-record" @tap="selectCost">
|
||
<text class="order-record-text">查询停车费>></text>
|
||
</view>
|
||
|
||
<!-- 停车费展示部分 -->
|
||
<view v-if="showCost" class="cost-container">
|
||
<view>
|
||
<image class="cost-image"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
|
||
mode="aspectFit" />
|
||
</view>
|
||
<view class="cost-header">
|
||
<text class="cost-title">{{ parkingLotName }} <text class="cost-title2">待支付</text></text>
|
||
</view>
|
||
<view class="cost-amount">
|
||
<text class="amount-symbol">¥</text>
|
||
<text class="amount-number">{{ costAmount }}</text>
|
||
</view>
|
||
<view class="cost-info">
|
||
<view class="info-item">
|
||
<text class="info-label">车牌号：</text>
|
||
<text class="info-value">{{ currentCarNumber }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">进场时间：</text>
|
||
<text class="info-value">{{ entryTime }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">计费时间：</text>
|
||
<text class="info-value">{{ billingTime }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="notice">
|
||
<text class="notice-text">⚠️ 请于付款后15分钟内离场否则将加收停车费</text>
|
||
</view>
|
||
<view class="payment-methods">
|
||
<view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
|
||
@tap="selectPayment('wechat')">
|
||
<view class="payment-item-content">
|
||
<image
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||
mode="aspectFit" class="payment-icon"></image>
|
||
<text class="payment-name">微信支付</text>
|
||
</view>
|
||
<view v-if="paymentMethod === 'wechat'" class="payment-selected"></view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-button" @tap="confirmPayment">立即付款</view>
|
||
</view>
|
||
<view v-else class="cost-container not-found">
|
||
未找到停车记录
|
||
</view>
|
||
|
||
<!-- 选择车牌颜色 -->
|
||
<u-popup :show="show" :round="30" mode="bottom" @close="onClose">
|
||
<view class="payIpt">
|
||
<view class="tit">选择车牌颜色</view>
|
||
<!-- 颜色选择列表 -->
|
||
<scroll-view class="color-list" scroll-y>
|
||
<view class="color-item" :class="{ 'active': selectedColorIndex === index }"
|
||
v-for="(item, index) in colorOptions" :key="index" @click="selectColor(index)">
|
||
{{ item }}
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 底部按钮 -->
|
||
<view class="popup-footer">
|
||
<view class="cancel-btn" @click="onClose">取消</view>
|
||
<view class="confirm-btn" @click="confirmColor">确定</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
isPhone,
|
||
picUrl,
|
||
request,
|
||
upload,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
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
|
||
}
|
||
],
|
||
|
||
defaultNum: '',
|
||
color: '请选择',
|
||
show: false,
|
||
// 颜色选项列表
|
||
colorOptions: ['蓝色', '黄色', '黑色', '白色', '绿色', '渐变绿底黑字', '黄绿双拼底黑字'],
|
||
// 当前选中的颜色索引
|
||
selectedColorIndex: -1,
|
||
|
||
// 车辆选择相关数据
|
||
isCarDropdownOpen: false,
|
||
selectedCar: '',
|
||
cars: ['冀A01233', '冀T01234', '其他车辆'],
|
||
|
||
// 停车费相关数据
|
||
showCost: false,
|
||
parkingLotName: '上海公馆停车场',
|
||
costAmount: '280.00',
|
||
currentCarNumber: '冀T11033',
|
||
entryTime: '2025-08-05 12:00:00',
|
||
billingTime: '3天12时37分44秒',
|
||
paymentMethod: 'wechat'
|
||
}
|
||
},
|
||
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;
|
||
},
|
||
numberInputResult(e) {
|
||
this.defaultNum = e;
|
||
|
||
// 使用$nextTick确保DOM更新完成后再尝试操作组件
|
||
this.$nextTick(() => {
|
||
if (this.$refs.carNumberInput) {
|
||
// 直接更新子组件的inputList数组
|
||
const valList = e.split("");
|
||
|
||
if (e == '其他车辆') {
|
||
for (let i = 0; i < 8; i++) {
|
||
this.$refs.carNumberInput.inputList[i] = ' ';
|
||
}
|
||
} else {
|
||
for (let i in valList) {
|
||
this.$refs.carNumberInput.inputList[i] = valList[i];
|
||
}
|
||
}
|
||
// 强制子组件更新
|
||
this.$refs.carNumberInput.$forceUpdate();
|
||
}
|
||
});
|
||
},
|
||
onClose() {
|
||
this.show = false;
|
||
},
|
||
// 选择颜色
|
||
selectColor(index) {
|
||
this.selectedColorIndex = index;
|
||
},
|
||
// 确认选择的颜色
|
||
confirmColor() {
|
||
if (this.selectedColorIndex !== -1) {
|
||
this.color = this.colorOptions[this.selectedColorIndex];
|
||
}
|
||
this.show = false;
|
||
},
|
||
onLoad() {
|
||
},
|
||
|
||
// 切换车辆下拉列表显示状态
|
||
toggleCarDropdown() {
|
||
this.isCarDropdownOpen = !this.isCarDropdownOpen;
|
||
},
|
||
|
||
// 选择车辆
|
||
selectCar(car) {
|
||
this.selectedCar = car;
|
||
this.isCarDropdownOpen = false;
|
||
if (car == '其他车辆') {
|
||
NavgateTo('../addCar/index')
|
||
}
|
||
this.numberInputResult(car)
|
||
},
|
||
|
||
// 查询停车费
|
||
selectCost() {
|
||
this.showCost = true;
|
||
},
|
||
|
||
// 选择支付方式
|
||
selectPayment(method) {
|
||
this.paymentMethod = method;
|
||
},
|
||
|
||
// 确认付款
|
||
confirmPayment() {
|
||
console.log('确认付款', this.paymentMethod);
|
||
// 这里可以添加实际的支付逻辑
|
||
// 例如调用支付API等
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url('./index.css');
|
||
</style> |