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

2025-07-28 22:01:42 +08:00
parent 97ad8a00dc
commit 893124cda8
6 changed files with 871 additions and 356 deletions
--- a/common/http.api.js
+++ b/common/http.api.js
@@ -17,9 +17,13 @@ const install = (Vue, vm) => {
 		getFunList:(params = {})=>vm.$u.get(config.adminPath+'/system/funList/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),
 		
+		
 		// 基础服务：登录登出、身份信息、菜单授权、切换系统、字典数据等
 		lang: (params = {}) => vm.$u.get('/lang/'+params.lang),
 		index: (params = {}) => vm.$u.get(config.adminPath+'/mobile/index', params),
--- a/common/upload.js
+++ b/common/upload.js
@@ -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);
+      }
+    });
+  });
+}
--- a/components/CarBindDialog.vue
+++ b/components/CarBindDialog.vue
@@ -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>
--- a/pages.json
+++ b/pages.json
@@ -322,6 +322,12 @@
 				"navigationBarTitleText": "缴费记录"
 			}
 		},
+		{
+			"path": "pages/sys/user/myPayment/myCarCode",
+			"style": {
+				"navigationBarTitleText": "我的车牌"
+			}
+		},
 		{
 			"path": "pages/sys/user/myRepair/myRepair",
 			"style": {
@@ -407,5 +413,13 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "Aidex",
 		"navigationBarBackgroundColor": "#ffffff"
+	},
+	"easycom": {
+	  "autoscan": true,
+	  "custom": {
+	    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	  }
 	}
+
+
+}
--- a/pages/sys/user/myPayment/myCarCode.vue
+++ b/pages/sys/user/myPayment/myCarCode.vue
@@ -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>
--- a/pages/sys/user/myVisitor/creatVisitor.vue
+++ b/pages/sys/user/myVisitor/creatVisitor.vue
@@ -7,11 +7,11 @@
 			<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 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.name" />
-				<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.phone" />
+				<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>
 			<!-- 选择来访目的 -->
@@ -19,7 +19,8 @@
 				<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 }}
+						:class="['cv-purpose-btn', {active: form.visitingReason === item}]"
+						@click="form.visitingReason = item">{{ item }}
 					</view>
 				</view>
 				<view class="cv-room-select" @click="chooseRoom">
@@ -31,20 +32,21 @@
 			<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 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.parking = true">
-						<view :class="['cv-radio-custom', {checked: form.parking === true}]" />
+					<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.parking = false">
-						<view :class="['cv-radio-custom', {checked: form.parking === false}]" />
+					<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">
@@ -52,45 +54,83 @@
 					</text>
 				</view>
 				<view class="cv-room-select" @click="chooseCarNumber">
-					<text>{{ form.carNumber || '请选择车牌号' }}</text>
+					<text>{{ form.licensePlate || '请选择车牌号' }}</text>
 					<text class="cv-arrow">&gt;</text>
 				</view>
 			</view>
 			<!-- 提交按钮 -->
-			<button class="cv-submit-btn">提交</button>
+			<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: {
-					name: '',
-					phone: '',
-					idCard: '',
-					avatar: '',
-					purpose: '',
-					room: '',
-					time: '',
-					parking: false,
-					carNumber: ''
+					visitorName: '',
+					visitorPhone: '',
+					// idCard: '',
+					facePictures: '',
+					visitingReason: '',
+					// room: '', 
+					visitingBeginTime: '2025-07-29',
+					bookingParkingSpace: false,
+					licensePlate: ''
 				},
 				purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
 				times: ['今天(2025-07-04)', '明天(2025-07-04)']
 			}
 		},
+		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
 					
-			chooseAvatar() {
-				// 这里可集成uni.chooseImage
+				} catch (error) {
+
+				}
+			},
+			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() {
 				// 这里可弹出选择车牌号
+				uni.navigateTo({
+					url: '/pages/sys/user/myPayment/myCarCode'
+				});
 			}
 		}
 	}
@@ -206,8 +246,8 @@
 	}

 	.cv-avatar-img {
-		width: 120rpx;
-		height: 120rpx;
+		width: 163rpx;
+		height: 183rpx;
 		border-radius: 12rpx;
 	}

@@ -301,6 +341,7 @@
 		margin-left: 30rpx;
 		cursor: pointer;
 	}
+
 	.cv-radio-label2 {
 		font-size: 24rpx;
 		color: #0B0B0B;
@@ -336,9 +377,11 @@
 		display: flex;
 		align-items: center;
 	}
+
 	.cv-parking-num {
 		color: #007CFF;
 	}
+
 	.cv-parking-total {
 		color: #0B0B0B;
 	}