by/SmartParks_visitore
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面调整

Browse Source
This commit is contained in:
liyuanchao 2025-08-21 16:07:15 +08:00
parent abf7f3c799
commit d93d37ee6c
1 changed files with 756 additions and 584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

290
pages/sys/msg/index.vue
View File

@ -13,7 +13,14 @@
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="label required">所属公司</text> <text class="label required">证件号</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入您的证件号" v-model="formData.idCard" />
</view>
</view>
<view class="form-item">
<text class="label">所属公司</text>
<view class="input-wrapper"> <view class="input-wrapper">
<input type="text" placeholder="请输入您的公司名称" v-model="formData.visitorUnit" /> <input type="text" placeholder="请输入您的公司名称" v-model="formData.visitorUnit" />
</view> </view>
@ -28,15 +35,28 @@
<view class="form-item"> <view class="form-item">
<text class="label required">拜访事由</text> <text class="label required">拜访事由</text>
<view class="input-wrapper"> <!-- <view class="input-wrapper">
<input type="text" placeholder="请简要描述拜访目的" v-model="formData.visitingReason" /> <input type="text" placeholder="请简要描述拜访目的" v-model="formData.visitingReason" />
</view> -->
<view class="select-wrapper" :class="{active: showTypeDialog}" @click.stop="showTypeDialog = true">
<text>{{ formData.visitingReason || '请选择拜访事由' }}</text>
<image class="filter-img" src="/static/ic_down_arrow_g.png" />
<view v-if="showTypeDialog" class="dropdown">
<view class="dropdown-list">
<view v-for="(item, index) in typeList" :key="index" class="dropdown-item"
@click.stop="selectVisitingReason(item)">
{{ item }}
</view> </view>
</view> </view>
</view>
</view>
</view>
<!-- 被访人信息 --> <!-- 被访人信息 -->
<view class="section-title">被访人信息</view> <view class="section-title">被访人信息</view>
<view class="form-item"> <view class="form-item">
<text class="label required">被访人姓名</text> <text class="label">被访人姓名</text>
<view class="input-wrapper"> <view class="input-wrapper">
<input type="text" placeholder="请输入被访人姓名" v-model="formData.interviewedPerson" /> <input type="text" placeholder="请输入被访人姓名" v-model="formData.interviewedPerson" />
</view> </view>
@ -63,12 +83,12 @@
<view class="picker-wrapper"> <view class="picker-wrapper">
<picker mode="date" :value="formData.visitingBeginDate" start="2020-01-01" end="2030-12-31" <picker mode="date" :value="formData.visitingBeginDate" start="2020-01-01" end="2030-12-31"
@change="onBeginDateChange"> @change="onBeginDateChange">
<view class="picker-value">{{formData.visitingBeginDate}}</view> <view class="picker-value">{{ formData.visitingBeginDate }}</view>
</picker> </picker>
</view> </view>
<view class="picker-wrapper time-picker"> <view class="picker-wrapper time-picker">
<picker mode="time" :value="formData.visitingBeginTime" @change="onBeginTimeChange"> <picker mode="time" :value="formData.visitingBeginTime" @change="onBeginTimeChange">
<view class="picker-value">{{formData.visitingBeginTime}}</view> <view class="picker-value">{{ formData.visitingBeginTime }}</view>
</picker> </picker>
</view> </view>
</view> </view>
@ -78,18 +98,18 @@
<view class="picker-wrapper"> <view class="picker-wrapper">
<picker mode="date" :value="formData.visitingEndDate" start="2020-01-01" end="2030-12-31" <picker mode="date" :value="formData.visitingEndDate" start="2020-01-01" end="2030-12-31"
@change="onEndDateChange"> @change="onEndDateChange">
<view class="picker-value">{{formData.visitingEndDate}}</view> <view class="picker-value">{{ formData.visitingEndDate }}</view>
</picker> </picker>
</view> </view>
<view class="picker-wrapper time-picker"> <view class="picker-wrapper time-picker">
<picker mode="time" :value="formData.visitingEndTime" @change="onEndTimeChange"> <picker mode="time" :value="formData.visitingEndTime" @change="onEndTimeChange">
<view class="picker-value">{{formData.visitingEndTime}}</view> <view class="picker-value">{{ formData.visitingEndTime }}</view>
</picker> </picker>
</view> </view>
</view> </view>
<!-- 预约信息 --> <!-- 预约信息 -->
<view class="section-title">预约信息</view> <!-- <view class="section-title">预约信息</view>
<view class="form-item"> <view class="form-item">
<text class="label">预约车位</text> <text class="label">预约车位</text>
<view class="picker-wrapper"> <view class="picker-wrapper">
@ -97,15 +117,15 @@
<view class="picker-value">{{formData.bookingParkingSpace ? '需要' : '不需要'}}</view> <view class="picker-value">{{formData.bookingParkingSpace ? '需要' : '不需要'}}</view>
</picker> </picker>
</view> </view>
</view> </view> -->
<!-- 条件显示：预约车位时显示车牌号 --> <!-- 条件显示：预约车位时显示车牌号 -->
<view class="form-item" v-if="formData.bookingParkingSpace"> <!-- <view class="form-item" v-if="formData.bookingParkingSpace">
<text class="label required">车牌号</text> <text class="label required">车牌号</text>
<view class="input-wrapper"> <view class="input-wrapper">
<input type="text" placeholder="请输入车牌号" v-model="formData.licensePlate" /> <input type="text" placeholder="请输入车牌号" v-model="formData.licensePlate" />
</view> </view>
</view> </view> -->
<view class="form-item"> <view class="form-item">
<text class="label required">人脸照片</text> <text class="label required">人脸照片</text>
@ -150,8 +170,9 @@
formData: { formData: {
visitorName: '1', visitorName: '1',
visitorUnit: '1', visitorUnit: '1',
idCard: '',
visitorPhone: '15555555555', visitorPhone: '15555555555',
visitingReason: '1', visitingReason: '',
interviewedPerson: '1', interviewedPerson: '1',
interviewedUnit: '1', interviewedUnit: '1',
interviewedPhone: '15555555555', interviewedPhone: '15555555555',
@ -171,7 +192,9 @@
1: '已确认', 1: '已确认',
2: '已取消', 2: '已取消',
3: '已完成' 3: '已完成'
} },
typeList: ['业务洽谈', '会议参与', '面试应聘', '技术支持', '办事咨询', '调研考察'],
showTypeDialog: false
} }
}, },
onLoad() { onLoad() {
@ -185,6 +208,17 @@
// #endif // #endif
}, },
methods: { methods: {
// 添加选择拜访事由方法
selectVisitingReason(reason) {
this.formData.visitingReason = reason;
this.showTypeDialog = false;
},
// 点击外部关闭下拉菜单
handleClickOutside() {
this.showTypeDialog = false;
},
// 处理日期时间选择 // 处理日期时间选择
onBeginDateChange(e) { onBeginDateChange(e) {
this.formData.visitingBeginDate = e.detail.value; this.formData.visitingBeginDate = e.detail.value;
@ -200,12 +234,12 @@
}, },
// 处理车位预约选择 // 处理车位预约选择
handleParkingChange(e) { // handleParkingChange(e) {
this.formData.bookingParkingSpace = e.detail.value === 1; // this.formData.bookingParkingSpace = e.detail.value === 1;
if (!this.formData.bookingParkingSpace) { // if (!this.formData.bookingParkingSpace) {
this.formData.licensePlate = ''; // this.formData.licensePlate = '';
} // }
}, // },
// 处理状态选择 // 处理状态选择
handleStatusChange(e) { handleStatusChange(e) {
@ -233,8 +267,10 @@
// 表单验证 // 表单验证
validateForm() { validateForm() {
const { const {
qrCodeId,
visitorName, visitorName,
visitorUnit, visitorUnit,
idCard,
visitorPhone, visitorPhone,
visitingReason, visitingReason,
interviewedPerson, interviewedPerson,
@ -253,8 +289,8 @@
} }
// 验证公司 // 验证公司
if (!visitorUnit) { if (!idCard) {
return '请输入所属公司'; return '请输入证件号';
} }
// 验证电话 // 验证电话
@ -273,14 +309,14 @@
} }
// 验证被访人 // 验证被访人
if (!interviewedPerson) { // if (!interviewedPerson) {
return '请输入被访人姓名'; // return '请输入被访人姓名';
} // }
// 验证车牌号（如果需要预约车位） // 验证车牌号（如果需要预约车位）
if (bookingParkingSpace && !licensePlate) { // if (bookingParkingSpace && !licensePlate) {
return '请输入车牌号'; // return '请输入车牌号';
} // }
if (!facePictures) { if (!facePictures) {
@ -313,12 +349,7 @@
this.formData.visitingBeginTime = `${this.formData.visitingBeginDate} ${this.formData.visitingBeginTime}`; this.formData.visitingBeginTime = `${this.formData.visitingBeginDate} ${this.formData.visitingBeginTime}`;
this.formData.visitingEndTime = `${this.formData.visitingEndDate} ${this.formData.visitingEndTime}`; this.formData.visitingEndTime = `${this.formData.visitingEndDate} ${this.formData.visitingEndTime}`;
// 准备提交数据
const submitData = {
...this.formData,
bookingParkingSpace: this.formData.bookingParkingSpace ? 0 : 1
};
console.log(submitData)
// 显示加载提示 // 显示加载提示
uni.showLoading({ uni.showLoading({
@ -328,9 +359,10 @@
// 模拟API请求 // 模拟API请求
setTimeout(() => { setTimeout(() => {
uni.request({
this.$u.post(this.formData.facePictures) url: this.formData.facePictures
.then(response => response.blob()) })
// .then(response => response.blob())
.then(blob => { .then(blob => {
// 此时得到了原始Blob对象 // 此时得到了原始Blob对象
console.log(blob); console.log(blob);
@ -342,25 +374,40 @@
formData.append('file', file); formData.append('file', file);
console.log(formData) console.log(formData)
// 发送上传请求 // 发送上传请求
this.$u.api.uploadimg() // this.$u.api.uploadimg()
// 接上面的代码，假设Blob是图片类型 // 接上面的代码，假设Blob是图片类型
this.$u.api.uploadimg(formData).then(res => { uni.uploadFile({
console.log(res) url: 'http://183.230.235.66:11010/api/resource/oss/qrupload', // 后端上传接口地址
if (res.code == 200) { filePath: file.filePath, // 要上传的文件路径
uni.showToast({ name: 'file', // 后端接收文件的参数名
title: "提交成功，请等待审核！", // FormData中的其他参数
icon: "success" formData: {
}) 'code': this.formData.qrCodeId // 示例：其他表单字段
} else { },
uni.showToast({ // // 上传进度回调
title: "提交失败！", // onProgressUpdate: (res) => {
icon: "error" // this.progress = res.progress;
}) // console.log('上传进度:' + res.progress);
} // },
}) // 上传成功回调
success: (res) => {
console.log('上传成功', res);
}); // this.formData.facePictures = res.data.ossId;
// 准备提交数据
const submitData = {
...this.formData,
bookingParkingSpace: this.formData
.bookingParkingSpace ? 0 : 1
};
const parsedData = JSON.parse(res.data);
// 第二步：从解析后的数据中获取ossId
const ossId = parsedData.data.ossId;
console.log("ossId", ossId)
submitData.facePictures = ossId;
console.log(submitData)
this.$u.api.fksub(submitData).then(res => { this.$u.api.fksub(submitData).then(res => {
console.log(res) console.log(res)
if (res.code == 200) { if (res.code == 200) {
@ -368,13 +415,46 @@
title: "提交成功，请等待审核！", title: "提交成功，请等待审核！",
icon: "success" icon: "success"
}) })
} else {
uni.showToast({
title: "提交失败！",
icon: "error"
})
} }
}) })
// uni.showToast({
// title: '上传成功',
// icon: 'success'
// });
},
// 上传失败回调
fail: (err) => {
console.error('上传失败', err);
uni.showToast({
title: '上传失败',
icon: 'none'
});
},
// 无论成功失败都会执行
complete: () => {
this.progress = 0; // 重置进度
}
});
// this.$u.api.uploadimg(formData).then(res => {
// console.log(res)
// if (res.code == 200) {
// uni.showToast({
// title: "提交成功，请等待审核！",
// icon: "success"
// })
// } else {
// uni.showToast({
// title: "tp提交失败！",
// icon: "error"
// })
// }
// })
});
uni.hideLoading(); uni.hideLoading();
// 显示成功提示 // 显示成功提示
@ -393,8 +473,8 @@
}, 2000); }, 2000);
}, 1500); }, 1500);
}, },
delimg(){ delimg() {
this.formData.facePictures= '' this.formData.facePictures = ''
}, },
// 重置表单 // 重置表单
@ -487,6 +567,36 @@
padding: 0 12px; padding: 0 12px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative;
}
.select-wrapper {
flex: 1;
height: 40px;
border: 1px solid #e5e6eb;
border-radius: 6px;
padding: 0 12px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.select-wrapper text {
flex: 1;
font-size: 14px;
color: #333;
}
.filter-img {
width: 18rpx;
height: 10rpx;
margin-left: 8rpx;
transition: transform 0.3s;
}
.select-wrapper.active .filter-img {
transform: rotate(180deg);
} }
.input-wrapper input { .input-wrapper input {
@ -496,6 +606,17 @@
color: #333; color: #333;
} }
.input-wrapper .filter-img {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
/* Adjust based on your image size */
height: 10px;
/* Adjust based on your image size */
}
.picker-wrapper { .picker-wrapper {
flex: 1; flex: 1;
height: 40px; height: 40px;
@ -583,4 +704,55 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.filter-btn {
padding: 15rpx 22rpx;
background: #f7f7f7;
border-radius: 25rpx;
height: 58rpx;
color: #9a9a9a;
font-size: 28rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 24rpx;
position: relative;
cursor: pointer;
}
.filter-img {
width: 18rpx;
height: 10rpx;
margin-left: 8rpx;
}
.dropdown {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background: #fff;
border-radius: 6px;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
z-index: 999;
max-height: 200px;
overflow-y: auto;
}
.dropdown-item {
padding: 12px;
font-size: 14px;
color: #333;
border-bottom: 1rpx solid #eee;
text-align: left;
cursor: pointer;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background-color: #f5f7fa;
}
</style> </style>