537 lines
12 KiB
Vue
537 lines
12 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<!-- 顶部title栏 -->
|
||
<view class="pay-container">
|
||
<!-- 未绑定车牌状态 -->
|
||
<view v-if="status === 'unbound'" class="pay-unbound">
|
||
<image src="/static/ic_my_payment_01.png" class="pay-empty-img" />
|
||
<view class="pay-unbound-tip">你还未绑定车牌哦~</view>
|
||
<view class="pay-unbound-link" @click="showBindDialog = true">现在去绑定</view>
|
||
</view>
|
||
<!-- 已绑定车牌状态 -->
|
||
<view v-else class="pay-binded">
|
||
<view class="pay-car-card">
|
||
<view class="pay-car-row">
|
||
<image src="/static/ic_my_payment_02.png" class="pay-car-icon" />
|
||
<view class="pay-car-num">{{ carInfo.number }}</view>
|
||
<view class="pay-car-status">{{ carInfo.status }}</view>
|
||
</view>
|
||
<view class="pay-car-addr">{{ carInfo.addr }}</view>
|
||
<view class="pay-car-info">
|
||
<view class="pay-car-time">
|
||
<view>停放时长</view>
|
||
<view class="pay-car-info-val">{{ carInfo.duration }}</view>
|
||
</view>
|
||
<view class="pay-car-fee">
|
||
<view>预计费用</view>
|
||
<view class="pay-car-fee-val">￥{{ carInfo.fee }}</view>
|
||
</view>
|
||
</view>
|
||
<button class="pay-car-btn">立即缴费</button>
|
||
</view>
|
||
<view class="pay-list-entry">
|
||
<view class="pay-list-item">缴费标准
|
||
<image class="mine-list-arrow" src="/static/ic_arrow_gray.webp" />
|
||
</view>
|
||
<view class="pay-list-item" @click="goToRecords">缴费记录
|
||
<image class="mine-list-arrow" src="/static/ic_arrow_gray.webp"/>
|
||
</view>
|
||
</view>
|
||
<button class="pay-add-btn">新增停车</button>
|
||
</view>
|
||
<!-- 绑定车牌弹窗 -->
|
||
<view v-if="showBindDialog" class="pay-dialog-mask" @click.self="showBindDialog = false">
|
||
<view class="pay-dialog-box">
|
||
<view class="pay-dialog-title-row">
|
||
<view class="pay-dialog-title">输入车牌号</view>
|
||
<image src="/static/ic_close_01.png" class="pay-dialog-close" @click="showBindDialog = false" />
|
||
</view>
|
||
<view class="pay-dialog-input-row">
|
||
<!-- 省份简称输入框 -->
|
||
<input class="pay-dialog-input province-input" :value="carNumArr[0]" readonly
|
||
:focus="focusIndex === -1" @click="showProvinceKeyboard = true; focusIndex = -1" />
|
||
<!-- 后6位 -->
|
||
<input v-for="(item, idx) in 6" :key="idx" maxlength="1" class="pay-dialog-input"
|
||
v-model="carNumArr[idx+1]" :focus="focusIndex === idx" @input="onCarInput($event, idx)"
|
||
@keydown.native="onCarKeydown($event, idx)" @paste="onCarPaste($event)" />
|
||
</view>
|
||
<button class="pay-dialog-btn" @click="bindCar">保存</button>
|
||
</view>
|
||
</view>
|
||
<!-- 省份简称自定义键盘弹窗 -->
|
||
<view v-if="showProvinceKeyboard" class="province-keyboard-mask" @click.self="showProvinceKeyboard = false">
|
||
<view class="province-keyboard-box">
|
||
<view class="province-keyboard-title">选择省份简称</view>
|
||
<view class="province-keyboard-grid">
|
||
<view v-for="(item, idx) in provinceList" :key="idx" class="province-keyboard-btn"
|
||
@click="selectProvince(item)">{{ item }}</view>
|
||
</view>
|
||
<button class="province-keyboard-cancel" @click="showProvinceKeyboard = false">取消</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
status: 'unbound', // unbound, binded
|
||
showBindDialog: false,
|
||
carNumArr: ['渝', '', '', '', '', '', ''],
|
||
showProvinceKeyboard: false,
|
||
focusIndex: 0,
|
||
isBackspace: false,
|
||
// 假数据
|
||
carInfo: {
|
||
number: '渝A-65891',
|
||
status: '停放中',
|
||
addr: '服务中心1栋A区五层-018号',
|
||
duration: '01:25:33',
|
||
fee: 12
|
||
},
|
||
provinceList: [
|
||
'京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
|
||
'皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
|
||
'蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼'
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
bindCar() {
|
||
this.showBindDialog = false;
|
||
this.status = 'binded';
|
||
},
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
onCarInput(e, idx) {
|
||
let val = e.detail.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||
this.$set(this.carNumArr, idx + 1, val);
|
||
// 只在输入时自动跳到下一个，避免键盘频繁弹出
|
||
if (val && idx < 5) {
|
||
this.focusIndex = idx + 1;
|
||
}
|
||
},
|
||
onCarKeydown(e, idx) {
|
||
// 记录是否是删除键，但删除时不自动回退聚焦
|
||
this.isBackspace = (e.key === 'Backspace' || e.keyCode === 8);
|
||
},
|
||
onCarPaste(e) {
|
||
let paste = (e.clipboardData || window.clipboardData).getData('text').toUpperCase().replace(/[^A-Z0-9]/g,
|
||
'');
|
||
if (paste.length > 0) {
|
||
for (let i = 0; i < 6; i++) {
|
||
this.$set(this.carNumArr, i + 1, paste[i] || '');
|
||
}
|
||
this.focusIndex = 5;
|
||
}
|
||
e.preventDefault();
|
||
},
|
||
selectProvince(item) {
|
||
this.$set(this.carNumArr, 0, item);
|
||
this.showProvinceKeyboard = false;
|
||
// 自动聚焦第二位
|
||
this.focusIndex = 0;
|
||
},
|
||
goToRecords() {
|
||
uni.navigateTo({
|
||
url: '/pages/sys/user/myPayment/paymentRecords'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-wrapper {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.pay-navbar {
|
||
width: 100%;
|
||
height: 160rpx;
|
||
padding-top: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
background: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pay-back {
|
||
position: absolute;
|
||
left: 37rpx;
|
||
width: 15rpx;
|
||
height: 33rpx;
|
||
}
|
||
|
||
.pay-title {
|
||
font-size: 36rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.pay-container {
|
||
background: #F7F8FA;
|
||
padding-bottom: 120rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.pay-unbound {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 160rpx;
|
||
}
|
||
|
||
.pay-empty-img {
|
||
width: 320rpx;
|
||
height: 180rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.pay-unbound-tip {
|
||
font-size: 30rpx;
|
||
color: #222;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.pay-unbound-link {
|
||
color: #0090FF;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.pay-binded {
|
||
margin-top: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pay-car-card {
|
||
position: relative;
|
||
width: 80vw;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||
padding: 56rpx 40rpx 30rpx 40rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.pay-car-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 54rpx;
|
||
}
|
||
|
||
.pay-car-icon {
|
||
width: 43rpx;
|
||
height: 35rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.pay-car-num {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #000;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.pay-car-status {
|
||
font-size: 24rpx;
|
||
color: #FEFEFE;
|
||
background: linear-gradient(90deg, #05C58C 0%, #73FFC9 100%);
|
||
border-radius: 12rpx;
|
||
padding: 8rpx 20rpx;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.pay-car-addr {
|
||
position: absolute;
|
||
top: 94rpx;
|
||
left: 98rpx;
|
||
font-size: 24rpx;
|
||
color: #878787;
|
||
}
|
||
|
||
.pay-car-info {
|
||
position: relative;
|
||
width: 70vw;
|
||
height: 113rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 54rpx;
|
||
background: #E9F4FF;
|
||
border: 1rpx solid #2E93FF;
|
||
border-radius: 10rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.pay-car-time {
|
||
position: absolute;
|
||
top: 16rpx;
|
||
left: 33rpx;
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pay-car-info-val {
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
font-weight: bold;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.pay-car-fee {
|
||
position: absolute;
|
||
top: 16rpx;
|
||
right: 58rpx;
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pay-car-fee-val {
|
||
color: #F3831F;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.pay-car-btn {
|
||
width: 283rpx;
|
||
height: 57rpx;
|
||
background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 15rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
/* 新增：flex居中 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pay-list-entry {
|
||
width: 92vw;
|
||
}
|
||
|
||
.pay-list-item {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
padding: 28rpx 32rpx;
|
||
margin-bottom: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.pay-list-arrow {
|
||
color: #bbb;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.pay-add-btn {
|
||
width: 90vw;
|
||
height: 80rpx;
|
||
background: #0090FF;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
border-radius: 40rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 200rpx;
|
||
margin: 0 auto;
|
||
display: block;
|
||
font-weight: bold;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
|
||
z-index: 100;
|
||
}
|
||
|
||
.pay-dialog-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pay-dialog-box {
|
||
width: 70vw;
|
||
background: #fff;
|
||
border-radius: 28rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
padding: 48rpx 36rpx 36rpx 36rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.pay-dialog-title-row {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.pay-dialog-title {
|
||
font-size: 36rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.pay-dialog-close {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.pay-dialog-input-row {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 80rpx;
|
||
gap: 28rpx;
|
||
}
|
||
|
||
.pay-dialog-input {
|
||
width: 43rpx;
|
||
height: 53rpx;
|
||
background: #EEEEEE;
|
||
border-radius: 5rpx;
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
text-align: center;
|
||
border: none;
|
||
outline: none;
|
||
}
|
||
|
||
.pay-dialog-btn {
|
||
width: 320rpx;
|
||
height: 70rpx;
|
||
margin-bottom: 40rpx;
|
||
background: linear-gradient(90deg, #0090FF 0%, #2E9FFF 100%);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border: none;
|
||
border-radius: 35rpx;
|
||
display: block;
|
||
font-weight: bold;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.province-input {
|
||
background: #EEEEEE;
|
||
border-radius: 5rpx;
|
||
width: 43rpx;
|
||
height: 53rpx;
|
||
margin-right: 28rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
border: none;
|
||
}
|
||
|
||
.province-keyboard-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.province-keyboard-box {
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 28rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
padding: 48rpx 36rpx 36rpx 36rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.province-keyboard-title {
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
font-weight: bold;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.province-keyboard-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 18rpx;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.province-keyboard-btn {
|
||
width: 80rpx;
|
||
height: 60rpx;
|
||
background: #F7F8FA;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
margin-bottom: 8rpx;
|
||
cursor: pointer;
|
||
border: 1rpx solid #eee;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.province-keyboard-btn:active {
|
||
background: #e6f0ff;
|
||
}
|
||
|
||
.province-keyboard-cancel {
|
||
width: 320rpx;
|
||
height: 60rpx;
|
||
background: #eee;
|
||
color: #222;
|
||
font-size: 28rpx;
|
||
border: none;
|
||
border-radius: 30rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.mine-list-arrow {
|
||
width: 18rpx;
|
||
height: 28rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
</style> |