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

This commit is contained in:
2025-07-28 22:01:42 +08:00
parent 97ad8a00dc
commit 893124cda8
6 changed files with 871 additions and 356 deletions

View File

@@ -17,9 +17,13 @@ const install = (Vue, vm) => {
getFunList:(params = {})=>vm.$u.get(config.adminPath+'/system/funList/list', params), getFunList:(params = {})=>vm.$u.get(config.adminPath+'/system/funList/list', params),
//我的访客列表 //我的访客列表
getMyVisitor:(params = {})=>vm.$u.get(config.adminPath+'/property/visitorManagement/list',params), getMyVisitor:(params = {})=>vm.$u.get(config.adminPath+'/property/visitorManagement/list',params),
//新增访客
addVisitor:(params = {})=>vm.$u.post(config.adminPath+'/property/visitorManagement',params),
//报事报修 //报事报修
getOrderList:(params = {})=>vm.$u.get(config.adminPath+'/property/workOrders/list',params), getOrderList:(params = {})=>vm.$u.get(config.adminPath+'/property/workOrders/list',params),
// 基础服务:登录登出、身份信息、菜单授权、切换系统、字典数据等 // 基础服务:登录登出、身份信息、菜单授权、切换系统、字典数据等
lang: (params = {}) => vm.$u.get('/lang/'+params.lang), lang: (params = {}) => vm.$u.get('/lang/'+params.lang),
index: (params = {}) => vm.$u.get(config.adminPath+'/mobile/index', params), index: (params = {}) => vm.$u.get(config.adminPath+'/mobile/index', params),

72
common/upload.js Normal file
View File

@@ -0,0 +1,72 @@
// utils/upload.js
export const uploadFiles = ({
files = [],
url = '',
name = 'file',
formData = {},
fileType = 'image',
vm, // 关键:传入 vm 以便访问 vuex_token、vuex_remember 等
}) => {
return new Promise(async (resolve, reject) => {
if (!url) return reject(new Error('上传地址不能为空'));
if (!Array.isArray(files) || files.length === 0) return reject(new Error('文件列表不能为空'));
const results = [];
for (let i = 0; i < files.length; i++) {
const filePath = files[i];
try {
const res = await uploadSingleFile({ filePath, url, name, formData, fileType, vm });
results.push(res);
} catch (err) {
reject(err);
return;
}
}
resolve(results);
});
};
function uploadSingleFile({ filePath, url, name, formData = {}, fileType = 'image', vm }) {
return new Promise((resolve, reject) => {
const headers = {
'x-requested-with': 'XMLHttpRequest',
source: 'uniapp',
clientId: 'dab457a1ea14411787c240db05bb0832',
};
// 手动加上 Token
if (vm?.vuex_token) {
headers.Authorization = `Bearer ${vm.vuex_token}`;
}
// 加上 rememberMe
if (vm?.vuex_remember) {
headers['x-remember'] = vm.vuex_remember;
}
console.log('request', headers);
uni.uploadFile({
url,
filePath,
name,
formData,
header: headers,
fileType,
success: (res) => {
try {
const data = JSON.parse(res.data);
if (res.statusCode === 200) {
resolve(data);
} else {
reject(data);
}
} catch (e) {
reject(e);
}
},
fail: (err) => {
reject(err);
}
});
});
}

View File

@@ -0,0 +1,254 @@
<template>
<view v-if="visible" class="pay-dialog-mask" @click.self="closeDialog">
<view class="pay-dialog-box">
<view class="pay-dialog-title-row">
<view class="pay-dialog-title">请输入车牌号</view>
<image src="/static/ic_close_01.png" class="pay-dialog-close" @click="closeDialog" />
</view>
<view class="pay-dialog-input-row">
<!-- 省份简称readonly -->
<input
class="pay-dialog-input province-input"
:value="carNumArr[0]"
readonly
@click="showProvinceKeyboard = true"
/>
<!-- 后6位 -->
<input
v-for="(item, idx) in 6"
:key="idx"
maxlength="1"
class="pay-dialog-input"
v-model="carNumArr[idx + 1]"
@input="onCarInput($event, idx)"
/>
</view>
<button class="pay-dialog-btn" @click="saveCar">保存</button>
<!-- 省份自定义键盘 -->
<view v-if="showProvinceKeyboard" class="province-keyboard-mask" @click.self="showProvinceKeyboard = false">
<view class="province-keyboard-box">
<view class="province-keyboard-title">选择省份简称</view>
<view class="province-keyboard-grid">
<view
v-for="(item, idx) in provinceList"
:key="idx"
class="province-keyboard-btn"
@click="selectProvince(item)"
>
{{ item }}
</view>
</view>
<button class="province-keyboard-cancel" @click="showProvinceKeyboard = false">取消</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "CarBindDialog",
props: {
visible: Boolean,
carNumber: {
type: Array,
default() {
return ["渝", "", "", "", "", "", ""];
},
},
},
data() {
return {
carNumArr: [...this.carNumber],
showProvinceKeyboard: false,
provinceList: [
"京",
"津",
"沪",
"渝",
"冀",
"豫",
"云",
"辽",
"黑",
"湘",
"皖",
"鲁",
"新",
"苏",
"浙",
"赣",
"鄂",
"桂",
"甘",
"晋",
"蒙",
"陕",
"吉",
"闽",
"贵",
"粤",
"青",
"藏",
"川",
"宁",
"琼",
],
};
},
watch: {
carNumber(newVal) {
this.carNumArr = [...newVal];
},
},
methods: {
onCarInput(e, idx) {
let val = e.detail.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
this.$set(this.carNumArr, idx + 1, val);
},
selectProvince(item) {
this.$set(this.carNumArr, 0, item);
this.showProvinceKeyboard = false;
},
saveCar() {
this.$emit("save", this.carNumArr);
this.$emit("update:visible", false);
},
closeDialog() {
this.$emit("update:visible", false);
},
},
};
</script>
<style>
.pay-dialog-mask {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.pay-dialog-box {
width: 90vw;
max-width: 400px;
background-color: #fff;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
}
.pay-dialog-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.pay-dialog-title {
font-size: 36rpx;
font-weight: bold;
}
.pay-dialog-close {
width: 40rpx;
height: 40rpx;
}
.pay-dialog-input-row {
display: flex;
gap: 10rpx;
margin-bottom: 30rpx;
}
.pay-dialog-input {
width: 40rpx;
height: 60rpx;
text-align: center;
font-size: 36rpx;
border: 1rpx solid #ccc;
border-radius: 8rpx;
}
.province-input {
width: 60rpx;
background-color: #eee;
cursor: pointer;
}
.pay-dialog-btn {
width: 100%;
height: 70rpx;
background-color: #007aff;
color: white;
border-radius: 35rpx;
font-size: 32rpx;
}
/* 自定义省份键盘样式 */
.province-keyboard-mask {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.province-keyboard-box {
width: 90vw;
max-width: 400px;
background-color: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
.province-keyboard-title {
font-size: 32rpx;
font-weight: 600;
margin-bottom: 20rpx;
}
.province-keyboard-grid {
display: flex;
flex-wrap: wrap;
gap: 10rpx;
}
.province-keyboard-btn {
flex: 1 0 18%;
background-color: #f0f0f0;
text-align: center;
padding: 10rpx 0;
border-radius: 10rpx;
font-size: 28rpx;
user-select: none;
cursor: pointer;
}
.province-keyboard-cancel {
margin-top: 20rpx;
width: 100%;
height: 60rpx;
background-color: #aaa;
color: white;
font-size: 28rpx;
border-radius: 15rpx;
}
</style>

View File

@@ -322,6 +322,12 @@
"navigationBarTitleText": "缴费记录" "navigationBarTitleText": "缴费记录"
} }
}, },
{
"path": "pages/sys/user/myPayment/myCarCode",
"style": {
"navigationBarTitleText": "我的车牌"
}
},
{ {
"path": "pages/sys/user/myRepair/myRepair", "path": "pages/sys/user/myRepair/myRepair",
"style": { "style": {
@@ -407,5 +413,13 @@
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "Aidex", "navigationBarTitleText": "Aidex",
"navigationBarBackgroundColor": "#ffffff" "navigationBarBackgroundColor": "#ffffff"
},
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
} }
} }

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>

View File

@@ -7,11 +7,11 @@
<view class="info"> <view class="info">
<view class="cv-section-title">访客信息</view> <view class="cv-section-title">访客信息</view>
<view class="cv-avatar-upload" @click="chooseAvatar"> <view class="cv-avatar-upload" @click="chooseAvatar">
<view v-if="!form.avatar" class="cv-avatar-placeholder">上传正脸照</view> <view v-if="!form.facePictures" class="cv-avatar-placeholder">上传正脸照</view>
<image v-else :src="form.avatar" class="cv-avatar-img" /> <image v-else :src="form.facePictures" class="cv-avatar-img" />
</view> </view>
<input class="cv-input-name" placeholder="请输入姓名" v-model="form.name" /> <input class="cv-input-name" placeholder="请输入姓名" v-model="form.visitorName" />
<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.phone" /> <input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.visitorPhone" />
<input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" /> <input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />
</view> </view>
<!-- 选择来访目的 --> <!-- 选择来访目的 -->
@@ -19,7 +19,8 @@
<view class="cv-section-title">选择来访目的</view> <view class="cv-section-title">选择来访目的</view>
<view class="cv-purpose-list"> <view class="cv-purpose-list">
<view v-for="(item, idx) in purposes" :key="idx" <view v-for="(item, idx) in purposes" :key="idx"
:class="['cv-purpose-btn', {active: form.purpose === item}]" @click="form.purpose = item">{{ item }} :class="['cv-purpose-btn', {active: form.visitingReason === item}]"
@click="form.visitingReason = item">{{ item }}
</view> </view>
</view> </view>
<view class="cv-room-select" @click="chooseRoom"> <view class="cv-room-select" @click="chooseRoom">
@@ -31,20 +32,21 @@
<view class="cv-section"> <view class="cv-section">
<view class="cv-section-title">来访时间</view> <view class="cv-section-title">来访时间</view>
<view class="cv-time-list"> <view class="cv-time-list">
<view v-for="(item, idx) in times" :key="idx" :class="['cv-time-btn', {active: form.time === item}]" <view v-for="(item, idx) in times" :key="idx"
@click="form.time = item">{{ item }}</view> :class="['cv-time-btn', {active: form.visitingBeginTime === item}]"
@click="form.visitingBeginTime = item">{{ item }}</view>
</view> </view>
</view> </view>
<!-- 是否预约车位 --> <!-- 是否预约车位 -->
<view class="cv-section"> <view class="cv-section">
<view class="cv-parking-row"> <view class="cv-parking-row">
<view class="cv-section-title">是否预约车位</view> <view class="cv-section-title">是否预约车位</view>
<view class="cv-radio-label" @click="form.parking = true"> <view class="cv-radio-label" @click="form.bookingParkingSpace = true">
<view :class="['cv-radio-custom', {checked: form.parking === true}]" /> <view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === true}]" />
<text></text> <text></text>
</view> </view>
<view class="cv-radio-label" @click="form.parking = false"> <view class="cv-radio-label" @click="form.bookingParkingSpace = false">
<view :class="['cv-radio-custom', {checked: form.parking === false}]" /> <view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === false}]" />
<text></text> <text></text>
</view> </view>
<text class="cv-parking-count"> <text class="cv-parking-count">
@@ -52,45 +54,83 @@
</text> </text>
</view> </view>
<view class="cv-room-select" @click="chooseCarNumber"> <view class="cv-room-select" @click="chooseCarNumber">
<text>{{ form.carNumber || '请选择车牌号' }}</text> <text>{{ form.licensePlate || '请选择车牌号' }}</text>
<text class="cv-arrow">&gt;</text> <text class="cv-arrow">&gt;</text>
</view> </view>
</view> </view>
<!-- 提交按钮 --> <!-- 提交按钮 -->
<button class="cv-submit-btn">提交</button> <button class="cv-submit-btn" @click="submit">提交</button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import MediaSelector, {
MediaType
} from '@/utils/mediaSelector';
import {
uploadFiles
} from '@/common/upload.js';
export default { export default {
data() { data() {
return { return {
form: { form: {
name: '', visitorName: '',
phone: '', visitorPhone: '',
idCard: '', // idCard: '',
avatar: '', facePictures: '',
purpose: '', visitingReason: '',
room: '', // room: '',
time: '', visitingBeginTime: '2025-07-29',
parking: false, bookingParkingSpace: false,
carNumber: '' licensePlate: ''
}, },
purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'], purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
times: ['今天(2025-07-04)', '明天(2025-07-04)'] times: ['今天(2025-07-04)', '明天(2025-07-04)']
} }
}, },
onShow() {
uni.$once('selectPlate', plate => {
this.form.licensePlate = plate;
});
},
methods: { methods: {
// 新增:处理图片上传
async chooseAvatar() {
try {
// 调用MediaSelector选择图片最多选择3张
const images = await MediaSelector.choose({
type: MediaType.IMAGE,
count: 1 // 根据剩余数量选择
});
// 将选择的图片添加到selectedImages数组
this.form.facePictures = images[0].path
chooseAvatar() { } catch (error) {
// 这里可集成uni.chooseImage
}
},
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() { chooseRoom() {
// 这里可弹出选择房间号 // 这里可弹出选择房间号
}, },
chooseCarNumber() { chooseCarNumber() {
// 这里可弹出选择车牌号 // 这里可弹出选择车牌号
uni.navigateTo({
url: '/pages/sys/user/myPayment/myCarCode'
});
} }
} }
} }
@@ -206,8 +246,8 @@
} }
.cv-avatar-img { .cv-avatar-img {
width: 120rpx; width: 163rpx;
height: 120rpx; height: 183rpx;
border-radius: 12rpx; border-radius: 12rpx;
} }
@@ -301,6 +341,7 @@
margin-left: 30rpx; margin-left: 30rpx;
cursor: pointer; cursor: pointer;
} }
.cv-radio-label2 { .cv-radio-label2 {
font-size: 24rpx; font-size: 24rpx;
color: #0B0B0B; color: #0B0B0B;
@@ -336,9 +377,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.cv-parking-num { .cv-parking-num {
color: #007CFF; color: #007CFF;
} }
.cv-parking-total { .cv-parking-total {
color: #0B0B0B; color: #0B0B0B;
} }