by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.我的车牌页面 录入车牌弹窗封装

Browse Source
This commit is contained in:
liyuanchao
2025-07-28 22:01:42 +08:00
parent 97ad8a00dc
commit 893124cda8
6 changed files with 871 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
pages/sys/user/myPayment/myCarCode.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<view class="container">
<scroll-view scroll-y class="list" style="height: 80vh;">
<block v-for="(item, index) in carList" :key="item.plate">
<u-swipe-action :index="index" :options="rightOptions" @click="onDelete">
<view class="car-item" @click="onItemClick(item)">
<view class="car-num">{{ item.plate }}</view>
<view class="car-time">上次停放时间: {{ item.time }}</view>
</view>
</u-swipe-action>
</block>
</scroll-view>
<!-- 绑定车牌弹窗 -->
<CarBindDialog
:visible="showBindDialog"
:carNumber="carNumArr"
@save="handleSaveCar"
@update:visible="showBindDialog = $event"
/>
<button class="add-btn" @click="onAddCar">新增停车</button>
</view>
</template>
<script>
import CarBindDialog from '@/components/CarBindDialog.vue';
export default {
components: {
CarBindDialog
},
data() {
return {
showBindDialog: false, // 控制弹窗显示
carNumArr: ['渝', '', '', '', '', '', ''], // 当前编辑的车牌号码数组
carList: [ // 车牌列表数据
{ plate: '渝A·B8889', time: '2025-07-28' },
{ plate: '渝A·C1234', time: '2025-07-27' },
{ plate: '渝A·D5678', time: '2025-07-26' }
],
rightOptions: [ // 侧滑删除按钮配置
{
text: '删除',
style: {
backgroundColor: '#FF5A1F',
color: '#fff',
width: '150rpx'
}
}
]
};
},
methods: {
onAddCar() {
// 新增车牌时，重置车牌数组为默认
this.carNumArr = ['渝', '', '', '', '', '', ''];
this.showBindDialog = true;
},
handleSaveCar(car) {
// 保存车牌，格式化并加入列表
const plate = car.join('').replace(/^([A-Z])/, '$1·');
this.carList.push({
plate,
time: new Date().toISOString().slice(0, 10)
});
this.showBindDialog = false;
},
onDelete({ index, optionIndex }) {
// 侧滑删除操作
if (optionIndex === 0) {
this.carList.splice(index, 1);
}
},
onItemClick(item) {
// 点击车牌，发送事件并返回上一页
uni.$emit('selectPlate', item.plate);
uni.navigateBack();
}
}
};
</script>
<style scoped>
.container {
padding: 20rpx;
background-color: #f8f8f8;
min-height: 100vh;
}
.list {
margin-bottom: 60rpx;
}
.car-item {
background-color: #fff;
padding: 30rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
}
.car-num {
font-size: 32rpx;
font-weight: 600;
color: #000;
}
.car-time {
font-size: 28rpx;
color: #999;
margin-top: 10rpx;
}
.add-btn {
width: 80%;
margin: 0 auto;
background-color: #007aff;
color: #fff;
border-radius: 50rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-size: 32rpx;
position: fixed;
bottom: 40rpx;
left: 10%;
}
</style>

753
pages/sys/user/myVisitor/creatVisitor.vue
View File

@@ -1,359 +1,402 @@
<template>
<view class="cv-container">
<!-- 可滚动内容区 -->
<view class="cv-scroll-content">
<!-- 访客信息 -->
<view class="info">
<view class="cv-section-title">访客信息</view>
<view class="cv-avatar-upload" @click="chooseAvatar">
<view v-if="!form.avatar" class="cv-avatar-placeholder">上传正脸照</view>
<image v-else :src="form.avatar" class="cv-avatar-img" />
</view>
<input class="cv-input-name" placeholder="请输入姓名" v-model="form.name" />
<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.phone" />
<input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />
</view>
<!-- 选择来访目的 -->
<view class="cv-section">
<view class="cv-section-title">选择来访目的</view>
<view class="cv-purpose-list">
<view v-for="(item, idx) in purposes" :key="idx"
:class="['cv-purpose-btn', {active: form.purpose === item}]" @click="form.purpose = item">{{ item }}
</view>
</view>
<view class="cv-room-select" @click="chooseRoom">
<text>{{ form.room || '请选择访问楼栋及房间号' }}</text>
<text class="cv-arrow">&gt;</text>
</view>
</view>
<!-- 来访时间 -->
<view class="cv-section">
<view class="cv-section-title">来访时间</view>
<view class="cv-time-list">
<view v-for="(item, idx) in times" :key="idx" :class="['cv-time-btn', {active: form.time === item}]"
@click="form.time = item">{{ item }}</view>
</view>
</view>
<!-- 是否预约车位 -->
<view class="cv-section">
<view class="cv-parking-row">
<view class="cv-section-title">是否预约车位</view>
<view class="cv-radio-label" @click="form.parking = true">
<view :class="['cv-radio-custom', {checked: form.parking === true}]" />
<text>是</text>
</view>
<view class="cv-radio-label" @click="form.parking = false">
<view :class="['cv-radio-custom', {checked: form.parking === false}]" />
<text>否</text>
</view>
<text class="cv-parking-count">
<text class="cv-parking-num">50</text><text class="cv-parking-total">/100</text>
</text>
</view>
<view class="cv-room-select" @click="chooseCarNumber">
<text>{{ form.carNumber || '请选择车牌号' }}</text>
<text class="cv-arrow">&gt;</text>
</view>
</view>
<!-- 提交按钮 -->
<button class="cv-submit-btn">提交</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
phone: '',
idCard: '',
avatar: '',
purpose: '',
room: '',
time: '',
parking: false,
carNumber: ''
},
purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
times: ['今天(2025-07-04)', '明天(2025-07-04)']
}
<template>
<view class="cv-container">
<!-- 可滚动内容区 -->
<view class="cv-scroll-content">
<!-- 访客信息 -->
<view class="info">
<view class="cv-section-title">访客信息</view>
<view class="cv-avatar-upload" @click="chooseAvatar">
<view v-if="!form.facePictures" class="cv-avatar-placeholder">上传正脸照</view>
<image v-else :src="form.facePictures" class="cv-avatar-img" />
</view>
<input class="cv-input-name" placeholder="请输入姓名" v-model="form.visitorName" />
<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.visitorPhone" />
<input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />
</view>
<!-- 选择来访目的 -->
<view class="cv-section">
<view class="cv-section-title">选择来访目的</view>
<view class="cv-purpose-list">
<view v-for="(item, idx) in purposes" :key="idx"
:class="['cv-purpose-btn', {active: form.visitingReason === item}]"
@click="form.visitingReason = item">{{ item }}
</view>
</view>
<view class="cv-room-select" @click="chooseRoom">
<text>{{ form.room || '请选择访问楼栋及房间号' }}</text>
<text class="cv-arrow">&gt;</text>
</view>
</view>
<!-- 来访时间 -->
<view class="cv-section">
<view class="cv-section-title">来访时间</view>
<view class="cv-time-list">
<view v-for="(item, idx) in times" :key="idx"
:class="['cv-time-btn', {active: form.visitingBeginTime === item}]"
@click="form.visitingBeginTime = item">{{ item }}</view>
</view>
</view>
<!-- 是否预约车位 -->
<view class="cv-section">
<view class="cv-parking-row">
<view class="cv-section-title">是否预约车位</view>
<view class="cv-radio-label" @click="form.bookingParkingSpace = true">
<view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === true}]" />
<text>是</text>
</view>
<view class="cv-radio-label" @click="form.bookingParkingSpace = false">
<view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === false}]" />
<text>否</text>
</view>
<text class="cv-parking-count">
<text class="cv-parking-num">50</text><text class="cv-parking-total">/100</text>
</text>
</view>
<view class="cv-room-select" @click="chooseCarNumber">
<text>{{ form.licensePlate || '请选择车牌号' }}</text>
<text class="cv-arrow">&gt;</text>
</view>
</view>
<!-- 提交按钮 -->
<button class="cv-submit-btn" @click="submit">提交</button>
</view>
</view>
</template>
<script>
import MediaSelector, {
MediaType
} from '@/utils/mediaSelector';
import {
uploadFiles
} from '@/common/upload.js';
export default {
data() {
return {
form: {
visitorName: '',
visitorPhone: '',
// idCard: '',
facePictures: '',
visitingReason: '',
// room: '',
visitingBeginTime: '2025-07-29',
bookingParkingSpace: false,
licensePlate: ''
},
purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
times: ['今天(2025-07-04)', '明天(2025-07-04)']
}
},
methods: {
chooseAvatar() {
// 这里可集成uni.chooseImage
onShow() {
uni.$once('selectPlate', plate => {
this.form.licensePlate = plate;
});
},
methods: {
// 新增：处理图片上传
async chooseAvatar() {
try {
// 调用MediaSelector选择图片，最多选择3张
const images = await MediaSelector.choose({
type: MediaType.IMAGE,
count: 1 // 根据剩余数量选择
});
// 将选择的图片添加到selectedImages数组
this.form.facePictures = images[0].path
} catch (error) {
}
},
chooseRoom() {
// 这里可弹出选择房间号
},
chooseCarNumber() {
async submit(){
let images = [''];
let filePath = this.form.facePictures.replace('file://', '');
images[0] = filePath;
console.log("t1",images)
const result = await uploadFiles({
files: images,
url: this.vuex_config.baseUrl + '/resource/oss/upload',
name: 'file',
vm: this // 关键：用于注入 token 等
});
console.log("t1",result)
},
chooseRoom() {
// 这里可弹出选择房间号
},
chooseCarNumber() {
// 这里可弹出选择车牌号
}
}
}
</script>
<style scoped>
.cv-container {
background: #fff;
height: 100vh;
display: flex;
flex-direction: column;
}
.cv-back {
position: absolute;
left: 37rpx;
width: 15rpx;
height: 33rpx;
}
.cv-title {
font-size: 36rpx;
color: #000;
}
.cv-scroll-content {
flex: 1;
overflow-y: auto;
padding-bottom: 120rpx;
}
.cv-section {
margin: 36rpx 56rpx 0 56rpx;
}
.info {
position: relative;
margin: 36rpx 56rpx 0 56rpx;
}
.cv-section-title {
font-size: 32rpx;
color: #000;
font-weight: 600;
}
.cv-inputs {
flex: 1;
display: flex;
flex-direction: column;
gap: 18rpx;
}
.cv-input-name {
width: 233rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
margin-top: 23rpx;
border: none;
outline: none;
}
.cv-input-phone {
width: 363rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
border: none;
outline: none;
}
.cv-input {
width: 435rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
border: none;
outline: none;
}
.cv-avatar-upload {
position: absolute;
width: 163rpx;
height: 183rpx;
top: 50rpx;
right: 0rpx;
background: #F7F8FA;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 24rpx;
}
.cv-avatar-placeholder {
color: #bbb;
font-size: 24rpx;
text-align: center;
}
.cv-avatar-img {
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
}
.cv-purpose-list {
display: flex;
flex-wrap: wrap;
margin-top: 36rpx;
/* 不设置gap的列间距，水平方向用margin控制 */
}
.cv-purpose-btn {
width: calc((100% - 58rpx) / 3);
margin-right: 29rpx;
margin-bottom: 29rpx;
box-sizing: border-box;
padding: 18rpx 0;
text-align: center;
background: #EBF5FF;
border-radius: 10rpx;
font-size: 24rpx;
color: #0B0B0B;
}
.cv-purpose-btn:nth-child(3n) {
margin-right: 0;
}
.cv-purpose-btn.active {
background: #007CFF;
color: #fff;
}
.cv-room-select {
width: 435rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #808080;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
margin-top: 12rpx;
}
.cv-arrow {
font-size: 32rpx;
color: #bbb;
}
.cv-time-list {
display: flex;
flex-direction: column;
gap: 23rpx;
margin-top: 32rpx;
}
.cv-time-btn {
width: 302rpx;
height: 73rpx;
text-align: center;
background: #EBF5FF;
border-radius: 12rpx;
font-size: 24rpx;
color: #0B0B0B;
display: flex;
/* 新增 */
align-items: center;
/* 垂直居中 */
justify-content: center;
}
.cv-time-btn.active {
background: #007CFF;
color: #fff;
}
.cv-parking-row {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 18rpx;
}
.cv-radio-label {
font-size: 24rpx;
color: #0B0B0B;
display: flex;
align-items: center;
margin-left: 30rpx;
cursor: pointer;
}
.cv-radio-label2 {
font-size: 24rpx;
color: #0B0B0B;
display: flex;
align-items: center;
margin-left: 30rpx;
cursor: pointer;
}
.cv-radio-custom {
width: 22rpx;
height: 22rpx;
border-radius: 50%;
border: 1rpx solid #007CFF;
background: #fff;
margin-right: 12rpx;
box-sizing: border-box;
transition: background 0.2s, border 0.2s;
}
.cv-radio-custom.checked {
background: #007CFF;
border: 1rpx solid #007CFF;
}
.cv-parking-count {
margin-left: 24rpx;
font-size: 24rpx;
background: #EBF5FF;
border-radius: 8rpx;
padding: 0 18rpx;
height: 54rpx;
display: flex;
align-items: center;
}
.cv-parking-num {
color: #007CFF;
}
.cv-parking-total {
color: #0B0B0B;
}
.cv-submit-btn {
width: 90vw;
height: 90rpx;
background: #0090FF;
color: #fff;
font-size: 36rpx;
border: none;
border-radius: 45rpx;
margin: 80rpx auto 0 auto;
display: block;
font-weight: bold;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
}
uni.navigateTo({
url: '/pages/sys/user/myPayment/myCarCode'
});
}
}
}
</script>
<style scoped>
.cv-container {
background: #fff;
height: 100vh;
display: flex;
flex-direction: column;
}
.cv-back {
position: absolute;
left: 37rpx;
width: 15rpx;
height: 33rpx;
}
.cv-title {
font-size: 36rpx;
color: #000;
}
.cv-scroll-content {
flex: 1;
overflow-y: auto;
padding-bottom: 120rpx;
}
.cv-section {
margin: 36rpx 56rpx 0 56rpx;
}
.info {
position: relative;
margin: 36rpx 56rpx 0 56rpx;
}
.cv-section-title {
font-size: 32rpx;
color: #000;
font-weight: 600;
}
.cv-inputs {
flex: 1;
display: flex;
flex-direction: column;
gap: 18rpx;
}
.cv-input-name {
width: 233rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
margin-top: 23rpx;
border: none;
outline: none;
}
.cv-input-phone {
width: 363rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
border: none;
outline: none;
}
.cv-input {
width: 435rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #222;
padding: 0 24rpx;
margin-bottom: 29rpx;
border: none;
outline: none;
}
.cv-avatar-upload {
position: absolute;
width: 163rpx;
height: 183rpx;
top: 50rpx;
right: 0rpx;
background: #F7F8FA;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 24rpx;
}
.cv-avatar-placeholder {
color: #bbb;
font-size: 24rpx;
text-align: center;
}
.cv-avatar-img {
width: 163rpx;
height: 183rpx;
border-radius: 12rpx;
}
.cv-purpose-list {
display: flex;
flex-wrap: wrap;
margin-top: 36rpx;
/* 不设置gap的列间距，水平方向用margin控制 */
}
.cv-purpose-btn {
width: calc((100% - 58rpx) / 3);
margin-right: 29rpx;
margin-bottom: 29rpx;
box-sizing: border-box;
padding: 18rpx 0;
text-align: center;
background: #EBF5FF;
border-radius: 10rpx;
font-size: 24rpx;
color: #0B0B0B;
}
.cv-purpose-btn:nth-child(3n) {
margin-right: 0;
}
.cv-purpose-btn.active {
background: #007CFF;
color: #fff;
}
.cv-room-select {
width: 435rpx;
height: 73rpx;
background: #F7F7F7;
border-radius: 10rpx;
font-size: 24rpx;
color: #808080;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
margin-top: 12rpx;
}
.cv-arrow {
font-size: 32rpx;
color: #bbb;
}
.cv-time-list {
display: flex;
flex-direction: column;
gap: 23rpx;
margin-top: 32rpx;
}
.cv-time-btn {
width: 302rpx;
height: 73rpx;
text-align: center;
background: #EBF5FF;
border-radius: 12rpx;
font-size: 24rpx;
color: #0B0B0B;
display: flex;
/* 新增 */
align-items: center;
/* 垂直居中 */
justify-content: center;
}
.cv-time-btn.active {
background: #007CFF;
color: #fff;
}
.cv-parking-row {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 18rpx;
}
.cv-radio-label {
font-size: 24rpx;
color: #0B0B0B;
display: flex;
align-items: center;
margin-left: 30rpx;
cursor: pointer;
}
.cv-radio-label2 {
font-size: 24rpx;
color: #0B0B0B;
display: flex;
align-items: center;
margin-left: 30rpx;
cursor: pointer;
}
.cv-radio-custom {
width: 22rpx;
height: 22rpx;
border-radius: 50%;
border: 1rpx solid #007CFF;
background: #fff;
margin-right: 12rpx;
box-sizing: border-box;
transition: background 0.2s, border 0.2s;
}
.cv-radio-custom.checked {
background: #007CFF;
border: 1rpx solid #007CFF;
}
.cv-parking-count {
margin-left: 24rpx;
font-size: 24rpx;
background: #EBF5FF;
border-radius: 8rpx;
padding: 0 18rpx;
height: 54rpx;
display: flex;
align-items: center;
}
.cv-parking-num {
color: #007CFF;
}
.cv-parking-total {
color: #0B0B0B;
}
.cv-submit-btn {
width: 90vw;
height: 90rpx;
background: #0090FF;
color: #fff;
font-size: 36rpx;
border: none;
border-radius: 45rpx;
margin: 80rpx auto 0 auto;
display: block;
font-weight: bold;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
}
</style>