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

更新 pages/sys/msg/index.vue

Browse Source
This commit is contained in:
bichangxiong
2025-08-21 14:22:30 +08:00
parent d927f79768
commit f1c1e9d905
1 changed files with 706 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,28 +8,28 @@
<view class="form-item">
<text class="label required">访客姓名</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入您的姓名" v-model="formData.visitorName" />
<input type="text" placeholder="请输入您的姓名" v-model="formData.visitorName"/>
</view>
</view>
<view class="form-item">
<text class="label required">证件号</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入您的证件号" v-model="formData.idCard" />
<input type="text" placeholder="请输入您的证件号" v-model="formData.idCard"/>
</view>
</view>
<view class="form-item">
<text class="label">所属公司</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入您的公司名称" v-model="formData.visitorUnit" />
<input type="text" placeholder="请输入您的公司名称" v-model="formData.visitorUnit"/>
</view>
</view>
<view class="form-item">
<text class="label required">联系电话</text>
<view class="input-wrapper">
<input type="number" placeholder="请输入您的手机号码" v-model="formData.visitorPhone" />
<input type="number" placeholder="请输入您的手机号码" v-model="formData.visitorPhone"/>
</view>
</view>
@@ -40,7 +40,7 @@
</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" />
<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"
@@ -53,27 +53,26 @@
</view>
<!-- 被访人信息 -->
<view class="section-title">被访人信息</view>
<view class="form-item">
<text class="label">被访人姓名</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入被访人姓名" v-model="formData.interviewedPerson" />
<input type="text" placeholder="请输入被访人姓名" v-model="formData.interviewedPerson"/>
</view>
</view>
<view class="form-item">
<text class="label">被访单位</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入被访单位名称" v-model="formData.interviewedUnit" />
<input type="text" placeholder="请输入被访单位名称" v-model="formData.interviewedUnit"/>
</view>
</view>
<view class="form-item">
<text class="label">被访人电话</text>
<view class="input-wrapper">
<input type="number" placeholder="请输入被访人联系电话" v-model="formData.interviewedPhone" />
<input type="number" placeholder="请输入被访人联系电话" v-model="formData.interviewedPhone"/>
</view>
</view>
@@ -84,12 +83,12 @@
<view class="picker-wrapper">
<picker mode="date" :value="formData.visitingBeginDate" start="2020-01-01" end="2030-12-31"
@change="onBeginDateChange">
<view class="picker-value">{{formData.visitingBeginDate}}</view>
<view class="picker-value">{{ formData.visitingBeginDate }}</view>
</picker>
</view>
<view class="picker-wrapper time-picker">
<picker mode="time" :value="formData.visitingBeginTime" @change="onBeginTimeChange">
<view class="picker-value">{{formData.visitingBeginTime}}</view>
<view class="picker-value">{{ formData.visitingBeginTime }}</view>
</picker>
</view>
</view>
@@ -99,18 +98,18 @@
<view class="picker-wrapper">
<picker mode="date" :value="formData.visitingEndDate" start="2020-01-01" end="2030-12-31"
@change="onEndDateChange">
<view class="picker-value">{{formData.visitingEndDate}}</view>
<view class="picker-value">{{ formData.visitingEndDate }}</view>
</picker>
</view>
<view class="picker-wrapper time-picker">
<picker mode="time" :value="formData.visitingEndTime" @change="onEndTimeChange">
<view class="picker-value">{{formData.visitingEndTime}}</view>
<view class="picker-value">{{ formData.visitingEndTime }}</view>
</picker>
</view>
</view>
<!-- 预约信息 -->
<!-- <view class="section-title">预约信息</view>
<!-- <view class="section-title">预约信息</view>
<view class="form-item">
<text class="label">预约车位</text>
<view class="picker-wrapper">
@@ -121,7 +120,7 @@
</view> -->
<!-- 条件显示：预约车位时显示车牌号 -->
<!-- <view class="form-item" v-if="formData.bookingParkingSpace">
<!-- <view class="form-item" v-if="formData.bookingParkingSpace">
<text class="label required">车牌号</text>
<view class="input-wrapper">
<input type="text" placeholder="请输入车牌号" v-model="formData.licensePlate" />
@@ -158,7 +157,7 @@
</template>
<script>
export default {
export default {
data() {
const now = new Date();
const date = now.getFullYear() + '-' +
@@ -171,7 +170,7 @@
formData: {
visitorName: '1',
visitorUnit: '1',
idCard:'',
idCard: '',
visitorPhone: '15555555555',
visitingReason: '',
interviewedPerson: '1',
@@ -194,8 +193,8 @@
2: '已取消',
3: '已完成'
},
typeList:['业务洽谈','会议参与','面试应聘','技术支持','办事咨询','调研考察'],
showTypeDialog:false
typeList: ['业务洽谈', '会议参与', '面试应聘', '技术支持', '办事咨询', '调研考察'],
showTypeDialog: false
}
},
onLoad(options) {
@@ -372,12 +371,7 @@
this.formData.visitingBeginTime = `${this.formData.visitingBeginDate} ${this.formData.visitingBeginTime}`;
this.formData.visitingEndTime = `${this.formData.visitingEndDate} ${this.formData.visitingEndTime}`;
// 准备提交数据
const submitData = {
...this.formData,
bookingParkingSpace: this.formData.bookingParkingSpace ? 0 : 1
};
console.log(submitData)
// 显示加载提示
uni.showLoading({
@@ -387,7 +381,7 @@
// 模拟API请求
setTimeout(() => {
uni.request({url:this.formData.facePictures})
uni.request({url: this.formData.facePictures})
// .then(response => response.blob())
.then(blob => {
// 此时得到了原始Blob对象
@@ -410,19 +404,44 @@
formData: {
'code': this.formData.qrCodeId // 示例：其他表单字段
},
// 上传进度回调
onProgressUpdate: (res) => {
this.progress = res.progress;
console.log('上传进度:' + res.progress);
},
// // 上传进度回调
// onProgressUpdate: (res) => {
// this.progress = res.progress;
// console.log('上传进度:' + res.progress);
// },
// 上传成功回调
success: (res) => {
console.log('上传成功', res);
this.uploadResult = res.data;
// 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 => {
console.log(res)
if (res.code == 200) {
uni.showToast({
title: '上传成功',
icon: 'success'
});
title: "提交成功，请等待审核！",
icon: "success"
})
}
})
// uni.showToast({
// title: '上传成功',
// icon: 'success'
// });
},
// 上传失败回调
fail: (err) => {
@@ -454,20 +473,7 @@
});
this.$u.api.fksub(submitData).then(res => {
console.log(res)
if (res.code == 200) {
uni.showToast({
title: "提交成功，请等待审核！",
icon: "success"
})
} else {
uni.showToast({
title: "提交失败！",
icon: "error"
})
}
})
uni.hideLoading();
// 显示成功提示
@@ -518,32 +524,32 @@
};
}
}
}
}
</script>
<style scoped>
.container {
.container {
background-color: #f5f7fa;
min-height: 100vh;
}
}
.form-card {
.form-card {
background-color: #fff;
border-radius: 12px;
margin: 16px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
}
.form-title {
.form-title {
font-size: 20px;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 24px;
}
}
.section-title {
.section-title {
font-size: 16px;
font-weight: 600;
color: #333;
@@ -551,28 +557,28 @@
margin-bottom: 12px;
padding-left: 8px;
border-left: 3px solid #007aff;
}
}
.form-item {
.form-item {
display: flex;
align-items: center;
margin-bottom: 16px;
}
}
.label {
.label {
width: 96px;
font-size: 14px;
color: #666;
margin-right: 12px;
}
}
.label.required::before {
.label.required::before {
content: '*';
color: #ff4d4f;
margin-right: 4px;
}
}
.input-wrapper {
.input-wrapper {
flex: 1;
height: 40px;
border: 1px solid #e5e6eb;
@@ -581,9 +587,9 @@
display: flex;
align-items: center;
position: relative;
}
}
.select-wrapper {
.select-wrapper {
flex: 1;
height: 40px;
border: 1px solid #e5e6eb;
@@ -593,42 +599,42 @@
align-items: center;
position: relative;
cursor: pointer;
}
}
.select-wrapper text {
.select-wrapper text {
flex: 1;
font-size: 14px;
color: #333;
}
}
.filter-img {
.filter-img {
width: 18rpx;
height: 10rpx;
margin-left: 8rpx;
transition: transform 0.3s;
}
}
.select-wrapper.active .filter-img {
.select-wrapper.active .filter-img {
transform: rotate(180deg);
}
}
.input-wrapper input {
.input-wrapper input {
flex: 1;
height: 100%;
font-size: 14px;
color: #333;
}
}
.input-wrapper .filter-img {
.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;
height: 40px;
border: 1px solid #e5e6eb;
@@ -638,9 +644,9 @@
align-items: center;
justify-content: space-between;
position: relative;
}
}
.picker-wrapper::after {
.picker-wrapper::after {
content: '';
width: 0;
height: 0;
@@ -649,25 +655,25 @@
border-top: 6px solid #999;
position: absolute;
right: 12px;
}
}
.time-picker {
.time-picker {
margin-left: 10px;
}
}
.picker-value {
.picker-value {
font-size: 14px;
color: #333;
flex: 1;
}
}
.upload-wrapper {
.upload-wrapper {
flex: 1;
display: flex;
align-items: center;
}
}
.upload-btn {
.upload-btn {
width: 80px;
height: 80px;
background-color: #f5f7fa;
@@ -677,33 +683,33 @@
align-items: center;
justify-content: center;
border: 1px dashed #e5e6eb;
}
}
.upload-text {
.upload-text {
font-size: 12px;
color: #999;
margin-top: 4px;
}
}
.preview-image {
.preview-image {
width: 80px;
height: 80px;
border-radius: 6px;
margin-left: 12px;
overflow: hidden;
border: 1px solid #e5e6eb;
}
}
.preview-image image {
.preview-image image {
width: 100%;
height: 100%;
}
}
.submit-wrapper {
.submit-wrapper {
margin-top: 32px;
}
}
.submit-btn {
.submit-btn {
width: 100%;
height: 44px;
background-color: #007aff;
@@ -714,9 +720,9 @@
display: flex;
align-items: center;
justify-content: center;
}
}
.filter-btn {
.filter-btn {
padding: 15rpx 22rpx;
background: #f7f7f7;
border-radius: 25rpx;
@@ -729,15 +735,15 @@
margin-right: 24rpx;
position: relative;
cursor: pointer;
}
}
.filter-img {
.filter-img {
width: 18rpx;
height: 10rpx;
margin-left: 8rpx;
}
}
.dropdown {
.dropdown {
position: absolute;
top: calc(100% + 5px);
left: 0;
@@ -748,22 +754,22 @@
z-index: 999;
max-height: 200px;
overflow-y: auto;
}
}
.dropdown-item {
.dropdown-item {
padding: 12px;
font-size: 14px;
color: #333;
border-bottom: 1rpx solid #eee;
text-align: left;
cursor: pointer;
}
}
.dropdown-item:last-child {
.dropdown-item:last-child {
border-bottom: none;
}
}
.dropdown-item:hover {
.dropdown-item:hover {
background-color: #f5f7fa;
}
}
</style>