<template>
|
<view class="container">
|
<view class="visitor-form">
|
<view class="cell">
|
<view class="title">姓名<b>*</b></view>
|
<view class="content">
|
<input class="input" placeholder-style="color: #999999;" maxlength="20" v-model="visitorData.name" placeholder="请输入您的真实姓名" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">手机号<b>*</b></view>
|
<view class="content">
|
<input class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">证件号码<b>*</b></view>
|
<view class="content">
|
<input class="input" maxlength="18" placeholder-style="color: #999999;" v-model="visitorData.cardId" placeholder="请输入您的身份证号码" />
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">人脸照片<b>*</b></view>
|
<view class="content1">
|
<u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="5"
|
multiple
|
:maxCount="1"
|
></u-upload>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="title">健康证</view>
|
<view class="content1">
|
<u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="5"
|
multiple
|
:maxCount="1"
|
></u-upload>
|
</view>
|
</view>
|
</view>
|
<view class="footer-box">
|
<view class="submit-button">提交</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
fileList: [],
|
visitorData: {
|
name: '',
|
phone: '',
|
cardId: '',
|
healthImg: '',
|
faceImg: '',
|
faceList: [],
|
healthImgList: []
|
}
|
}
|
},
|
|
methods: {
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1)
|
},
|
// 新增图片
|
async afterRead(event) {
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this[`fileList${event.name}`].length
|
lists.map((item) => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
let item = this[`fileList${event.name}`][fileListLen]
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
status: 'success',
|
message: '',
|
url: result
|
}))
|
fileListLen++
|
}
|
},
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
filePath: url,
|
name: 'file',
|
formData: {
|
user: 'test'
|
},
|
success: (res) => {
|
setTimeout(() => {
|
resolve(res.data.data)
|
}, 1000)
|
}
|
});
|
})
|
},
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F7F7F7 !important;
|
}
|
.u-upload__button {
|
margin: 0 !important;
|
}
|
.title {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
display: flex;
|
align-items: center;
|
}
|
|
.title b {
|
color: red;
|
font-weight: bold;
|
}
|
|
.add-other {
|
border: 1rpx solid #025eef;
|
color: #025eef;
|
font-size: 11rpx;
|
padding: 0 12rpx;
|
height: 32rpx;
|
line-height: 32rpx;
|
width: 120rpx;
|
text-align: center;
|
border-radius: 24rpx;
|
margin: 20rpx auto;
|
}
|
|
.footer-box {
|
width: 100%;
|
position: fixed;
|
bottom: 30rpx;
|
height: 80rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.submit-button {
|
width: calc(100% - 60rpx);
|
height: 88rpx;
|
line-height: 88rpx;
|
background: #025eef;
|
border-radius: 4rpx;
|
color: #fff;
|
border-radius: 44rpx;
|
font-size: 32rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.popup-content {
|
padding: 20rpx;
|
height: 100%;
|
overflow: hidden;
|
display: flex;
|
flex-flow: column;
|
|
.input {
|
border: 1rpx solid #ccc;
|
border-radius: 4rpx;
|
padding: 4rpx 12rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
|
.respondent-item {
|
padding: 10rpx;
|
border-bottom: 1rpx solid #eee;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #eee;
|
}
|
}
|
|
.van-list {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
</style>
|
