完成智慧停车模块页面
This commit is contained in:
赵毅
parent
b239b83267
commit
671c24b654
@ -157,6 +157,7 @@ export default {
|
|||||||
},
|
},
|
||||||
//获取评论列表
|
//获取评论列表
|
||||||
getCommentList() {
|
getCommentList() {
|
||||||
|
if (uni.getStorageSync('userId')) {
|
||||||
request(apiArr.getMerchantComment, "POST", {
|
request(apiArr.getMerchantComment, "POST", {
|
||||||
page_num: this.page_num,
|
page_num: this.page_num,
|
||||||
page_size: this.page_size,
|
page_size: this.page_size,
|
||||||
@ -174,13 +175,14 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
list.forEach(item => {
|
list.forEach(item => {
|
||||||
item.merchant_evaluation_reply_list =item.merchant_evaluation_reply_list.filter((item) => {
|
item.merchant_evaluation_reply_list = item.merchant_evaluation_reply_list.filter((item) => {
|
||||||
return item.status == 2;
|
return item.status == 2;
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.commentList = this.commentList.concat(list);
|
this.commentList = this.commentList.concat(list);
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getMerchantInfo() {
|
getMerchantInfo() {
|
||||||
|
|||||||
@ -92,7 +92,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {
|
import {
|
||||||
isPhone,
|
isPhone,
|
||||||
picUrl,
|
picUrl,
|
||||||
|
|||||||
106
packages/park/addCar/index.css
Normal file
106
packages/park/addCar/index.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 80%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ff4016;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin: 100rpx auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColorBox{
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 30rpx auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColor{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color{
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.payIpt {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 颜色列表样式 */
|
||||||
|
.color-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item.active {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮样式 */
|
||||||
|
.popup-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn,
|
||||||
|
.confirm-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
color: #666;
|
||||||
|
border-right: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
87
packages/park/addCar/index.vue
Normal file
87
packages/park/addCar/index.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">请输入车牌号码</view>
|
||||||
|
<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" />
|
||||||
|
<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="btn" @click="submit">确定</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultNum: '',
|
||||||
|
color: '请选择',
|
||||||
|
show: false,
|
||||||
|
// 颜色选项列表
|
||||||
|
colorOptions: ['蓝色', '黄色', '黑色', '白色', '绿色', '渐变绿底黑字', '黄绿双拼底黑字'],
|
||||||
|
// 当前选中的颜色索引
|
||||||
|
selectedColorIndex: -1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
numberInputResult(e) {
|
||||||
|
console.log('结果--' + e)
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
// 选择颜色
|
||||||
|
selectColor(index) {
|
||||||
|
this.selectedColorIndex = index;
|
||||||
|
},
|
||||||
|
// 确认选择的颜色
|
||||||
|
confirmColor() {
|
||||||
|
if (this.selectedColorIndex !== -1) {
|
||||||
|
this.color = this.colorOptions[this.selectedColorIndex];
|
||||||
|
}
|
||||||
|
this.show = false;
|
||||||
|
},
|
||||||
|
// 提交表单
|
||||||
|
submit() {
|
||||||
|
// 这里可以添加提交逻辑
|
||||||
|
console.log('车牌号码:', this.defaultNum, '车牌颜色:', this.color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css')
|
||||||
|
</style>
|
||||||
58
packages/park/index/index.css
Normal file
58
packages/park/index/index.css
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 车辆信息容器样式 */
|
||||||
|
.car-info-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌样式 */
|
||||||
|
.license-plate {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌类型标签样式 */
|
||||||
|
.plate-type-box{
|
||||||
|
padding: 11rpx 2rpx;
|
||||||
|
border: 1rpx solid #1890ff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plate-type {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车牌号样式 */
|
||||||
|
.plate-number {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加车辆按钮样式 */
|
||||||
|
.add-car-btn {
|
||||||
|
height: 100rpx;
|
||||||
|
width: 80%;
|
||||||
|
background-color: #ff3f15;
|
||||||
|
line-height: 100rpx;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
37
packages/park/index/index.vue
Normal file
37
packages/park/index/index.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 车辆信息区域 -->
|
||||||
|
<view class="car-info-container">
|
||||||
|
<view class="license-plate">
|
||||||
|
<view class="plate-type-box">
|
||||||
|
<text class="plate-type">蓝牌</text>
|
||||||
|
</view>
|
||||||
|
<text class="plate-number">冀T11855</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 添加车辆按钮 -->
|
||||||
|
<button class="add-car-btn" @click="addCar">添加车辆</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addCar() {
|
||||||
|
// 跳转到添加车辆页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/packages/park/addCar/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
295
packages/park/monthlyPayment/index.css
Normal file
295
packages/park/monthlyPayment/index.css
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
/* 包月支付页面样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monthly-payment-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 90rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉停车场列表样式 */
|
||||||
|
.parking-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
border-radius: 0 0 40rpx 40rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 80rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索框样式 */
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场列表项样式 */
|
||||||
|
.parking-items {
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-distance {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-address {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-selected {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
position: relative;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-spaces {
|
||||||
|
background-color: #ffeeee;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-number {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题样式 */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff3f1;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-arrow {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆信息样式 */
|
||||||
|
.car-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-image {
|
||||||
|
width: 400rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 193rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场信息样式 */
|
||||||
|
.park-info {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-type {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付金额样式 */
|
||||||
|
.payment-amount {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #c8c7c7;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选项列表样式 */
|
||||||
|
.options-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin: 200rpx 30rpx 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-image {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-val {
|
||||||
|
color: #ff370a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-val2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-arrow {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下一步按钮样式 */
|
||||||
|
.next-step-btn {
|
||||||
|
background-color: #ff4219;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-step-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单记录样式 */
|
||||||
|
.order-record {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-record-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
}
|
||||||
269
packages/park/monthlyPayment/index.vue
Normal file
269
packages/park/monthlyPayment/index.vue
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
<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>
|
||||||
147
packages/park/monthlyPaymentOrder/index.css
Normal file
147
packages/park/monthlyPaymentOrder/index.css
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
page{
|
||||||
|
background-color: #f4f7fb;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #ffffff;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabItem {
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active2 {
|
||||||
|
font-size: 25rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active2::after {
|
||||||
|
content: '';
|
||||||
|
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 52rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: -16rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单列表样式 */
|
||||||
|
.order-list {
|
||||||
|
padding: 30rpx;
|
||||||
|
height: 85vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
background: linear-gradient(to right, #ffe7e7, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 5rpx 20rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.pending {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.using {
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status.expired {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-content {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item.amount {
|
||||||
|
padding-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
color: #ff4219;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-value.paid {
|
||||||
|
color: #4CD964;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
padding: 15rpx 40rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ff4219;
|
||||||
|
padding: 15rpx 40rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
191
packages/park/monthlyPaymentOrder/index.vue
Normal file
191
packages/park/monthlyPaymentOrder/index.vue
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="tabs">
|
||||||
|
<view v-for="(item, index) in categoryList" :key="index"
|
||||||
|
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||||
|
{{ item.category_name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<view class="order-list">
|
||||||
|
<view
|
||||||
|
v-for="(order, index) in filteredOrders"
|
||||||
|
:key="index"
|
||||||
|
class="order-card"
|
||||||
|
>
|
||||||
|
<view class="order-header">
|
||||||
|
<text class="order-number">订单编号：{{ order.orderNumber }}</text>
|
||||||
|
<text
|
||||||
|
class="order-status"
|
||||||
|
:class="{
|
||||||
|
'pending': order.status === 'pending',
|
||||||
|
'using': order.status === 'using',
|
||||||
|
'expired': order.status === 'expired'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ order.statusText }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-content">
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">车场名称</text>
|
||||||
|
<text class="order-value">{{ order.parkName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">车牌号</text>
|
||||||
|
<text class="order-value">{{ order.carPlate }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">包月月数</text>
|
||||||
|
<text class="order-value">{{ order.monthCount }}个月</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">开始时间</text>
|
||||||
|
<text class="order-value">{{ order.startTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item">
|
||||||
|
<text class="order-label">到期时间</text>
|
||||||
|
<text class="order-value">{{ order.endTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-item amount">
|
||||||
|
<text class="order-label">订单金额</text>
|
||||||
|
<text class="order-value amount-value">¥{{ order.amount }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 根据订单状态显示不同内容 -->
|
||||||
|
<view v-if="order.status === 'using' || order.status === 'expired'" class="order-item">
|
||||||
|
<text class="order-label">付款时间</text>
|
||||||
|
<text class="order-value">{{ order.payTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="order.status === 'using'" class="order-item">
|
||||||
|
<text class="order-label">支付状态</text>
|
||||||
|
<text class="order-value paid">已支付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 待支付订单显示操作按钮 -->
|
||||||
|
<view v-if="order.status === 'pending'" class="order-footer">
|
||||||
|
<view class="cancel-button" @tap="cancelOrder(order)">取消订单</view>
|
||||||
|
<view class="pay-button" @tap="goToPayment(order)">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
categoryList: [
|
||||||
|
{
|
||||||
|
category_name: '全部',
|
||||||
|
category_id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '待支付',
|
||||||
|
category_id: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '使用中',
|
||||||
|
category_id: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category_name: '已过期',
|
||||||
|
category_id: 3
|
||||||
|
},
|
||||||
|
],
|
||||||
|
selectedTab: 0,
|
||||||
|
orders: [
|
||||||
|
// 待支付订单
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
orderNumber: '123456789145',
|
||||||
|
status: 'pending',
|
||||||
|
statusText: '待支付',
|
||||||
|
parkName: '智行光彩生态停车场',
|
||||||
|
carPlate: '冀T11033',
|
||||||
|
monthCount: 1,
|
||||||
|
startTime: '2025-06-04 00:00:00',
|
||||||
|
endTime: '2025-06-04 23:59:59',
|
||||||
|
amount: '360.00'
|
||||||
|
},
|
||||||
|
// 使用中订单
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
orderNumber: '123456789145',
|
||||||
|
status: 'using',
|
||||||
|
statusText: '使用中',
|
||||||
|
parkName: '智行光彩生态停车场',
|
||||||
|
carPlate: '冀T11033',
|
||||||
|
monthCount: 1,
|
||||||
|
startTime: '2025-06-04 00:00:00',
|
||||||
|
endTime: '2025-06-04 23:59:59',
|
||||||
|
amount: '360.00',
|
||||||
|
payTime: '2025-06-04 23:59:59'
|
||||||
|
},
|
||||||
|
// 已过期订单
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
orderNumber: '123456789145',
|
||||||
|
status: 'expired',
|
||||||
|
statusText: '已过期',
|
||||||
|
parkName: '智行光彩生态停车场',
|
||||||
|
carPlate: '冀T11033',
|
||||||
|
monthCount: 1,
|
||||||
|
startTime: '2025-06-04 00:00:00',
|
||||||
|
endTime: '2025-06-04 23:59:59',
|
||||||
|
amount: '360.00',
|
||||||
|
payTime: '2025-06-04 23:59:59'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 根据选中的tab过滤订单
|
||||||
|
filteredOrders() {
|
||||||
|
if (this.selectedTab === 0) {
|
||||||
|
// 全部订单
|
||||||
|
return this.orders;
|
||||||
|
} else if (this.selectedTab === 1) {
|
||||||
|
// 待支付订单
|
||||||
|
return this.orders.filter(order => order.status === 'pending');
|
||||||
|
} else if (this.selectedTab === 2) {
|
||||||
|
// 使用中订单
|
||||||
|
return this.orders.filter(order => order.status === 'using');
|
||||||
|
} else if (this.selectedTab === 3) {
|
||||||
|
// 已过期订单
|
||||||
|
return this.orders.filter(order => order.status === 'expired');
|
||||||
|
}
|
||||||
|
return this.orders;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTab(index, item) {
|
||||||
|
this.selectedTab = index;
|
||||||
|
},
|
||||||
|
// 取消订单
|
||||||
|
cancelOrder(order) {
|
||||||
|
console.log('取消订单:', order);
|
||||||
|
},
|
||||||
|
// 去支付
|
||||||
|
goToPayment(order) {
|
||||||
|
NavgateTo('../parkOrderDetail/index');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
166
packages/park/orderDetail/index.css
Normal file
166
packages/park/orderDetail/index.css
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
/* 订单详情页面样式 */
|
||||||
|
page{
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器样式 */
|
||||||
|
.order-detail-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单状态区域 */
|
||||||
|
.order-status-section {
|
||||||
|
height: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 50rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-right {
|
||||||
|
width: 250rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 金额信息区域 */
|
||||||
|
.amount-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value text {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 服务信息区域 */
|
||||||
|
.service-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
padding: 30rpx 40rpx 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item text:last-child {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: right;
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单号容器 */
|
||||||
|
.order-number-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number-container text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 触摸反馈效果 */
|
||||||
|
.amount-item:active,
|
||||||
|
.copy-icon:active {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同屏幕尺寸的响应式调整 */
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.order-detail-container {
|
||||||
|
max-width: 768px;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
129
packages/park/orderDetail/index.vue
Normal file
129
packages/park/orderDetail/index.vue
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-detail-container">
|
||||||
|
<!-- 订单状态区域 -->
|
||||||
|
<view class="order-status-section">
|
||||||
|
<view class="status-left">
|
||||||
|
<text class="status-title">订单已支付</text>
|
||||||
|
<text class="park-name">上海公馆停车场</text>
|
||||||
|
</view>
|
||||||
|
<view class="status-right">
|
||||||
|
<image class="success-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderOk.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 金额信息区域 -->
|
||||||
|
<view class="amount-section">
|
||||||
|
<view class="amount-item" @tap="toggleAmountExpand">
|
||||||
|
<text class="amount-label">实付金额</text>
|
||||||
|
<view class="amount-value">
|
||||||
|
<text>¥{{ orderDetail.actualAmount }}</text>
|
||||||
|
<u-icon :name="amountExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="amount-item" v-show="amountExpanded">
|
||||||
|
<text class="amount-label2">订单金额</text>
|
||||||
|
<text>¥{{ orderDetail.orderAmount }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 电商服务区域 -->
|
||||||
|
<view class="service-section">
|
||||||
|
<text class="section-title">电商服务</text>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">车牌号码</text>
|
||||||
|
<text>{{ orderDetail.carNumber }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">交易时间</text>
|
||||||
|
<text>{{ orderDetail.transactionTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">停车时长</text>
|
||||||
|
<text>{{ orderDetail.parkingDuration }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">订单类型</text>
|
||||||
|
<text>{{ orderDetail.orderType }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">支付方式</text>
|
||||||
|
<text>{{ orderDetail.paymentMethod }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">订单号</text>
|
||||||
|
<view class="order-number-container">
|
||||||
|
<text>{{ orderDetail.orderNumber }}</text>
|
||||||
|
<image class="copy-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
||||||
|
mode="aspectFit" @tap="copyOrderNumber"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 控制金额是否展开
|
||||||
|
amountExpanded: false,
|
||||||
|
// 订单详情数据
|
||||||
|
orderDetail: {
|
||||||
|
actualAmount: '8.00',
|
||||||
|
orderAmount: '8.00',
|
||||||
|
carNumber: '冀TQ2F09',
|
||||||
|
transactionTime: '2025-08-04 18:41:06',
|
||||||
|
parkingDuration: '4时16分53秒',
|
||||||
|
orderType: '停车',
|
||||||
|
paymentMethod: '微信',
|
||||||
|
orderNumber: 'BK250804184038818'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换金额展开状态
|
||||||
|
toggleAmountExpand() {
|
||||||
|
this.amountExpanded = !this.amountExpanded;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 复制订单号
|
||||||
|
copyOrderNumber() {
|
||||||
|
// 使用uni.setClipboardData API复制订单号
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.orderDetail.orderNumber,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时可以从路由参数或API获取订单详情
|
||||||
|
// 这里使用默认数据
|
||||||
|
console.log('订单详情页面加载');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
181
packages/park/parkOrder/index.css
Normal file
181
packages/park/parkOrder/index.css
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
/* 页面基础样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月份分组样式 */
|
||||||
|
.month-group {
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-title {
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-expense {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单项样式 */
|
||||||
|
.order-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单类型样式 */
|
||||||
|
.order-type {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.order-type1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-type-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车场信息样式 */
|
||||||
|
.order-park-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-park-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆信息样式 */
|
||||||
|
.order-car-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-car-number {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-car-type {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #fff1f0;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间样式 */
|
||||||
|
.order-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮样式 */
|
||||||
|
.delete-button {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态样式 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.order-item {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-park-name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 触摸反馈样式 */
|
||||||
|
.order-item:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
152
packages/park/parkOrder/index.vue
Normal file
152
packages/park/parkOrder/index.vue
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-list">
|
||||||
|
<!-- 订单按月分组显示 -->
|
||||||
|
<view class="month-group" v-for="monthGroup in orderData" :key="monthGroup.month">
|
||||||
|
<view class="month-header">
|
||||||
|
<text class="month-title">{{ monthGroup.month }}</text>
|
||||||
|
<text class="month-expense">支出¥{{ monthGroup.totalExpense }}元</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<view class="order-item" v-for="order in monthGroup.orders" :key="order.id" @tap="viewOrderDetail(order)">
|
||||||
|
<view class="order-left">
|
||||||
|
<view class="order-type">
|
||||||
|
<view class="order-type1">
|
||||||
|
<image class="order-icon"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_p.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
<text class="order-type-text">停车</text>
|
||||||
|
</view>
|
||||||
|
<text class="order-status">{{ order.statusText }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-park-info">
|
||||||
|
<text class="order-park-name">{{ order.parkName }}</text>
|
||||||
|
<text class="order-amount">¥{{ order.amount }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-car-info">
|
||||||
|
<text class="order-car-number">{{ order.carNumber }}</text>
|
||||||
|
<text class="order-car-type">{{ order.carType }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<text class="order-time">{{ order.time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="delete-button" @tap.stop="deleteOrder(order)">
|
||||||
|
<u-icon name="trash" size="45rpx"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态显示 -->
|
||||||
|
<view class="empty-state" v-if="orderData.length === 0">
|
||||||
|
<image class="empty-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/empty_order.png"
|
||||||
|
mode="aspectFit"></image>
|
||||||
|
<text class="empty-text">暂无停车订单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 模拟订单数据，实际项目中可能从API获取
|
||||||
|
orderData: [
|
||||||
|
{
|
||||||
|
month: '2025年08月',
|
||||||
|
totalExpense: '16.00',
|
||||||
|
orders: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
parkName: '上海公馆停车场',
|
||||||
|
amount: '8.00',
|
||||||
|
carNumber: '冀TQ2F09',
|
||||||
|
carType: '临时车',
|
||||||
|
carTypeClass: 'temporary',
|
||||||
|
time: '2025-08-04 18:46',
|
||||||
|
status: 'paid',
|
||||||
|
statusText: '已支付'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
parkName: '上海公馆停车场',
|
||||||
|
amount: '8.00',
|
||||||
|
carNumber: '冀TQ2F09',
|
||||||
|
carType: '临时车',
|
||||||
|
carTypeClass: 'temporary',
|
||||||
|
time: '2025-08-04 18:46',
|
||||||
|
status: 'paid',
|
||||||
|
statusText: '已支付'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: '2025年08月',
|
||||||
|
totalExpense: '16.00',
|
||||||
|
orders: [
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
parkName: '上海公馆停车场',
|
||||||
|
amount: '8.00',
|
||||||
|
carNumber: '冀TQ2F09',
|
||||||
|
carType: '月租卡',
|
||||||
|
carTypeClass: 'monthly',
|
||||||
|
time: '2025-08-04 18:46',
|
||||||
|
status: 'paid',
|
||||||
|
statusText: '已支付'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查看订单详情
|
||||||
|
viewOrderDetail(order) {
|
||||||
|
NavgateTo('../orderDetail/index')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除订单方法
|
||||||
|
deleteOrder(order) {
|
||||||
|
console.log("🚀 ~ deleteOrder ~ order:", order)
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除订单',
|
||||||
|
content: '你确定删除订单吗？删除之后你将无法再找回该订单',
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//确认删除
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
} else if (res.cancel) {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取订单数据
|
||||||
|
getOrderData() {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时获取订单数据
|
||||||
|
this.getOrderData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
151
packages/park/parkOrderDetail/index.css
Normal file
151
packages/park/parkOrderDetail/index.css
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
/* 订单详情页面样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器样式 */
|
||||||
|
.order-detail-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付金额头部 */
|
||||||
|
.payment-header {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-symbol {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #ff4219;
|
||||||
|
padding: 2rpx 15rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 订单详情内容 */
|
||||||
|
.order-content {
|
||||||
|
padding: 40rpx 40rpx 0 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #a7a7a7;
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.park-type {
|
||||||
|
color: #ff4219;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 支付方式选择 */
|
||||||
|
.payment-method {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-info-img {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部支付栏 */
|
||||||
|
.bottom-payment {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-label {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
background-color: #ff4219;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 20rpx 60rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
97
packages/park/parkOrderDetail/index.vue
Normal file
97
packages/park/parkOrderDetail/index.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<view class="order-detail-container">
|
||||||
|
<!-- 支付金额头部 -->
|
||||||
|
<view class="payment-header">
|
||||||
|
<view class="amount-info">
|
||||||
|
<text class="amount-symbol">¥</text>
|
||||||
|
<text class="amount-value">4704.00</text>
|
||||||
|
<text class="payment-status">待付款</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单详情内容 -->
|
||||||
|
<view class="order-content">
|
||||||
|
<!-- 停车场信息 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">停车场</text>
|
||||||
|
<view class="detail-value">
|
||||||
|
<text class="park-type">地下</text>
|
||||||
|
<text class="park-name">衡水市民服务中心地下停车场</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车牌号 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">车牌号</text>
|
||||||
|
<text class="detail-value">冀T11855</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 开始时间 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">开始时间</text>
|
||||||
|
<text class="detail-value">2025-03-08 00:00:00</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 结束时间 -->
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="detail-label">结束时间</text>
|
||||||
|
<text class="detail-value">2025-03-08 23:59:59</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 支付方式选择 -->
|
||||||
|
<view class="payment-method">
|
||||||
|
<view class="method-item">
|
||||||
|
<view class="method-info">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit" class="method-info-img"></image>
|
||||||
|
<text class="method-text">微信支付</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="payment-select" v-else>
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
||||||
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
||||||
|
</view> -->
|
||||||
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
||||||
|
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部支付栏 -->
|
||||||
|
<view class="bottom-payment">
|
||||||
|
<view class="total-amount">
|
||||||
|
<text class="total-label">合计¥</text>
|
||||||
|
<text class="total-value">4900.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="pay-button" @tap="submitPayment">
|
||||||
|
<text class="pay-text">立即支付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 页面数据
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 提交支付
|
||||||
|
submitPayment() {
|
||||||
|
console.log('提交支付');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
console.log('订单详情页面加载');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
477
packages/park/temporaryOrder/index.css
Normal file
477
packages/park/temporaryOrder/index.css
Normal file
@ -0,0 +1,477 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monthly-payment-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff3f1;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-arrow {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索框样式 */
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉停车场列表样式 */
|
||||||
|
.parking-list {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
border-radius: 0 0 40rpx 40rpx;
|
||||||
|
position: fixed;
|
||||||
|
top: 80rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 90rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-items {
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 25rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-distance {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-address {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-selected {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
position: relative;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parking-spaces {
|
||||||
|
background-color: #ffeeee;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4219;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spaces-number {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4219;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆选择器 */
|
||||||
|
.changeCar {
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-selector {
|
||||||
|
width: 27%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-car-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆下拉列表样式 */
|
||||||
|
.car-dropdown {
|
||||||
|
width: 33%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
position: absolute;
|
||||||
|
top: 100rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||||
|
margin-left: 50rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
left: 20%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 8px solid transparent;
|
||||||
|
border-right: 8px solid transparent;
|
||||||
|
border-bottom: 8px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 车辆选项样式 */
|
||||||
|
.car-item {
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car-item:active {
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColorBox {
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 30rpx auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectColor {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.payIpt {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 颜色列表样式 */
|
||||||
|
.color-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-item.active {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部按钮样式 */
|
||||||
|
.popup-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn,
|
||||||
|
.confirm-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
color: #666;
|
||||||
|
border-right: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
color: #ff4016;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询停车费 */
|
||||||
|
.order-record {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-record-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 停车费展示部分样式 */
|
||||||
|
.cost-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-found{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-title2 {
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff3f11;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-symbol {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-number {
|
||||||
|
}
|
||||||
|
|
||||||
|
.cost-info {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
background-color: #fff8f4;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-methods {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-item-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-icon {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-selected {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border: 3rpx solid #ff3f11;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
right: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-selected::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
background-color: #ff3f11;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pay-button {
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #ff370b;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
308
packages/park/temporaryOrder/index.vue
Normal file
308
packages/park/temporaryOrder/index.vue
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
<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>
|
||||||
@ -147,6 +147,13 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getGoodsList() {
|
getGoodsList() {
|
||||||
|
if(!uni.getStorageSync('userId')){
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先登录',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
const params = {
|
const params = {
|
||||||
user_id: uni.getStorageSync('userId')
|
user_id: uni.getStorageSync('userId')
|
||||||
}
|
}
|
||||||
|
|||||||
@ -504,7 +504,7 @@ export default {
|
|||||||
trans_type: trans_type
|
trans_type: trans_type
|
||||||
}
|
}
|
||||||
request(apiArr.mergePreorder, "POST", param).then(res => {
|
request(apiArr.mergePreorder, "POST", param).then(res => {
|
||||||
console.log("🚀 ~ submitPayment ~ 调起微信支付...")
|
console.log("🚀 ~ submitPayment ~ 调起微信支付..." ,param)
|
||||||
|
|
||||||
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
||||||
// 调用微信支付
|
// 调用微信支付
|
||||||
|
|||||||
25
pages.json
25
pages.json
@ -889,37 +889,50 @@
|
|||||||
{
|
{
|
||||||
"path": "addCar/index",
|
"path": "addCar/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "添加车辆"
|
"navigationBarTitleText": "添加车辆",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "monthlyPayment/index",
|
"path": "monthlyPayment/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "停车场包月"
|
"navigationBarTitleText": "停车场包月",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "parkOrderDetail/index",
|
"path": "parkOrderDetail/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "订单详情"
|
"navigationBarTitleText": "订单详情",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "monthlyPaymentOrder/index",
|
"path": "monthlyPaymentOrder/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "包月订单"
|
"navigationBarTitleText": "包月订单",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "parkOrder/index",
|
"path": "parkOrder/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "停车订单"
|
"navigationBarTitleText": "停车订单",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "orderDetail/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "停车订单",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "temporaryOrder/index",
|
"path": "temporaryOrder/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "临时订单"
|
"navigationBarTitleText": "临时订单",
|
||||||
|
"navigationBarBackgroundColor": "#ffffff"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -596,7 +596,6 @@ page {
|
|||||||
z-index: 98;
|
z-index: 98;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.store-item {
|
.store-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user