<template>
|
<view class="visit">
|
<view class="head">拜访信息</view>
|
<view class="list">
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>被访人手机</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<input
|
type="number"
|
maxlength="11"
|
placeholder="请输入手机号"
|
placeholder-style="color: #999999;"
|
/>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>被访人姓名</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<input
|
type="text"
|
placeholder="请输入姓名"
|
placeholder-style="color: #999999;"
|
/>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>劳务班次</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<view class="list_item_content_item active">白班</view>
|
<view class="list_item_content_item">夜班</view>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>预计入园时间</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<text>请选择</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>预计离园时间</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<text>请选择</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="list_item" @click="show = true">
|
<view class="list_item_label">
|
<text>访问门禁</text>
|
<text>*</text>
|
</view>
|
<view class="list_item_content">
|
<text>请选择</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="list_item">
|
<view class="list_item_label">
|
<text>拜访事由</text>
|
<text></text>
|
</view>
|
<view class="list_item_content">
|
<input
|
type="text"
|
placeholder="请输入来访事由，您来做什么的"
|
placeholder-style="color: #999999;"
|
/>
|
</view>
|
</view>
|
</view>
|
<view class="cate">
|
<view class="cate_head">车辆信息</view>
|
<view class="cate_list">
|
<view class="cate_list_item">
|
<text>皖AD12178</text>
|
<u-icon name="close" color="#999999" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="cate_add" @click="show2 = true">+添加车辆</view>
|
</view>
|
<view class="cate">
|
<view class="cate_head">随访人员信息</view>
|
<view class="cate_list">
|
<view class="cate_list_item">
|
<text>何江宜</text>
|
<u-icon name="close" color="#999999" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="cate_add" @click="show1 = true">+添加随访人员</view>
|
</view>
|
<view class="zw"></view>
|
<view class="footer">
|
<view class="footer_btn">提交</view>
|
</view>
|
<!-- 门禁 -->
|
<u-picker
|
:show="show"
|
:columns="columns"
|
:immediateChange="true"
|
keyName="name"
|
@cancel="show = false"
|
@confirm="confirm"
|
></u-picker>
|
<!-- 随行人员 -->
|
<!-- 选择随行人员 -->
|
<u-popup
|
:show="show1"
|
:round="10"
|
:safeAreaInsetBottom="true"
|
:closeable="true"
|
mode="bottom"
|
@close="show1 = false"
|
>
|
<view class="popup-content">
|
<view class="respondent-title"> 选择随行人员 </view>
|
<view class="search-box">
|
<view class="search-box-top">
|
<view class="search-box-top-ipt">
|
<image src="@/static/ic_search@2x.png" mode="widthFix"></image>
|
<input type="text" placeholder="搜索姓名/手机号" />
|
</view>
|
<text
|
@click="
|
show1 = false;
|
show3 = true;
|
"
|
>新增</text
|
>
|
</view>
|
<view class="search-box-total">共0条数据</view>
|
</view>
|
<scroll-view scroll-y class="list">
|
<view class="item" v-for="(item, index) in 8" :key="index">
|
<view class="item_a">
|
<!-- <image src="@/static/checkbox.png" mode="widthFix" v-if="!item.active" /> -->
|
<image src="@/static/checkbox_sel@2x.png" mode="widthFix" />
|
</view>
|
<view class="item_b">
|
<image src="@/static/ic_mima@2x.png" mode="widthFix" />
|
</view>
|
<view class="item_c">
|
<text>用户名</text>
|
<text>已拉黑</text>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="footer1">
|
<view class="footer_left">
|
<text class="footer_left_a">已选择：0人</text>
|
<text class="footer_left_b">李伟；</text>
|
</view>
|
<view class="footer_btn">确认 0/0</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 车辆 -->
|
<u-popup
|
:show="show2"
|
:round="10"
|
:safeAreaInsetBottom="true"
|
:closeable="true"
|
mode="bottom"
|
@close="show2 = false"
|
>
|
<view class="addcar">
|
<view class="addcar_head">添加车辆</view>
|
<view class="addcar_ipt">
|
<input type="text" placeholder="请输入车牌号" />
|
</view>
|
<view class="addcar_footer">
|
<view class="addcar_footer_item">取消</view>
|
<view class="addcar_footer_item t">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 添加随行人员 -->
|
<u-popup
|
:show="show3"
|
:round="10"
|
:safeAreaInsetBottom="true"
|
:closeable="true"
|
mode="bottom"
|
@close="show3 = false"
|
>
|
<view class="adduser">
|
<view class="adduser_head">随行人员</view>
|
<view class="adduser_list">
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>姓名</text>
|
<text>*</text>
|
</view>
|
<view class="adduser_list_item_ipt">
|
<input
|
type="text"
|
placeholder-style="color: #999999;"
|
placeholder="请输入您的真实姓名"
|
/>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>手机号</text>
|
<text>*</text>
|
</view>
|
<view class="adduser_list_item_ipt">
|
<input
|
type="number"
|
maxlength="11"
|
placeholder-style="color: #999999;"
|
placeholder="请输入您的手机号"
|
/>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>证件类型</text>
|
<text>*</text>
|
</view>
|
<view class="adduser_list_item_ipt">
|
<text>身份证</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>证件号码</text>
|
<text>*</text>
|
</view>
|
<view class="adduser_list_item_ipt">
|
<input
|
type="text"
|
placeholder-style="color: #999999;"
|
placeholder="请输入您的证件号码"
|
/>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>公司</text>
|
<text></text>
|
</view>
|
<view class="adduser_list_item_ipt">
|
<input
|
type="text"
|
placeholder-style="color: #999999;"
|
placeholder="请输入您的公司名称"
|
/>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>人脸照片</text>
|
<text>*</text>
|
</view>
|
<view class="adduser_list_item_ipt1">
|
<u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxCount="1"
|
></u-upload>
|
</view>
|
</view>
|
<view class="adduser_list_item">
|
<view class="adduser_list_item_label">
|
<text>健康证照片</text>
|
<text></text>
|
</view>
|
<view class="adduser_list_item_ipt1">
|
<u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxCount="1"
|
></u-upload>
|
</view>
|
</view>
|
</view>
|
<view class="adduser_footer">
|
<view class="adduser_footer_item">取消</view>
|
<view class="adduser_footer_item t">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
fileList: [],
|
columns: [
|
[{
|
name: '东门',
|
id: 1
|
},
|
{
|
name: '西门',
|
id: 2
|
}
|
]
|
]
|
}
|
},
|
methods: {
|
confirm(e) {
|
console.log(e)
|
this.show = false
|
},
|
// 删除图片
|
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;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.visit {
|
width: 100%;
|
|
.adduser {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
.adduser_head {
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
.adduser_list {
|
width: 100%;
|
margin-top: 40rpx;
|
.adduser_list_item {
|
width: 100%;
|
padding: 24rpx 0;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #e5e5e5;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.adduser_list_item_label {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-size: 30rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #e0312a;
|
}
|
}
|
}
|
.adduser_list_item_ipt {
|
flex: 1;
|
text-align: right;
|
font-size: 28rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
text {
|
font-size: 28rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
.adduser_footer {
|
width: 100%;
|
margin-top: 60rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.t {
|
background: #025eef !important;
|
color: #ffffff !important;
|
}
|
.adduser_footer_item {
|
width: 336rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 44rpx;
|
border: 1rpx solid #025eef;
|
font-size: 32rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #025eef;
|
margin-right: 18rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
|
.addcar {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
.addcar_head {
|
text-align: center;
|
font-size: 32rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
.addcar_ipt {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
background: #f7f7f7;
|
border-radius: 50rpx;
|
margin-top: 60rpx;
|
input {
|
width: 100%;
|
height: 100%;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #999999;
|
text-align: center;
|
}
|
}
|
.addcar_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 60rpx;
|
.t {
|
background: #025eef !important;
|
color: #ffffff !important;
|
}
|
.addcar_footer_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #025eef;
|
text-align: center;
|
border-radius: 44rpx;
|
border: 1rpx solid #025eef;
|
margin-right: 18rpx;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
}
|
|
.popup-content {
|
padding: 30rpx 30rpx 0 30rpx;
|
overflow: hidden;
|
display: flex;
|
flex-flow: column;
|
.respondent-title {
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #222222;
|
}
|
.search-box {
|
width: 100%;
|
margin-top: 40rpx;
|
.search-box-top {
|
width: 100%;
|
height: 68rpx;
|
display: flex;
|
align-items: center;
|
.search-box-top-ipt {
|
flex: 1;
|
height: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: #f7f7f7;
|
border-radius: 4rpx;
|
display: flex;
|
align-items: center;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
margin-right: 22rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #b2b2b2;
|
}
|
}
|
text {
|
flex-shrink: 0;
|
margin-left: 30rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #025eef;
|
}
|
}
|
.search-box-total {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 24rpx;
|
}
|
}
|
.list {
|
width: 100%;
|
height: 800rpx;
|
margin-top: 30rpx;
|
padding: 0 !important;
|
.item {
|
width: 100%;
|
height: 102rpx;
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
.item_a {
|
flex-shrink: 0;
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.item_b {
|
flex-shrink: 0;
|
width: 80rpx;
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.item_c {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-size: 30rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 20rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
padding: 1rpx 4rpx;
|
box-sizing: border-box;
|
background-color: #eeeeee;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
}
|
}
|
.footer1 {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 14rpx 0 0 0;
|
box-sizing: border-box;
|
.footer_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.footer_left_a {
|
font-size: 26rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
.footer_left_b {
|
font-size: 24rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
.footer_btn {
|
flex-shrink: 0;
|
width: 216rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #025eef;
|
border-radius: 8rpx;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
}
|
}
|
|
.head {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #666666;
|
}
|
|
.list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
|
.list_item {
|
width: 100%;
|
height: 98rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #e5e5e5;
|
|
.list_item_label {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
|
text {
|
&:nth-child(1) {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #e42d2d;
|
}
|
}
|
}
|
|
.list_item_content {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
.active {
|
background: #025eef !important;
|
color: #ffffff !important;
|
}
|
|
.list_item_content_item {
|
width: 104rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
text-align: center;
|
background: #eeeeee;
|
border-radius: 4rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-left: 20rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 6rpx;
|
}
|
|
input {
|
width: 100%;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
|
.cate {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
margin-top: 20rpx;
|
|
.cate_head {
|
font-size: 32rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
|
.cate_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-top: 30rpx;
|
|
.cate_list_item {
|
height: 64rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
background-color: #eeeeee;
|
border-radius: 4rpx;
|
margin-right: 20rpx;
|
margin-bottom: 20rpx;
|
display: flex;
|
align-items: center;
|
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-right: 30rpx;
|
}
|
}
|
}
|
|
.cate_add {
|
width: 200rpx;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(2, 94, 239, 0);
|
border-radius: 25rpx;
|
border: 1rpx solid #025eef;
|
font-size: 22rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
margin-top: 20rpx;
|
color: #025eef;
|
margin: 0 auto;
|
}
|
}
|
|
.zw {
|
width: 100%;
|
height: calc(env(safe-area-inset-bottom) + 118rpx);
|
}
|
|
.footer {
|
width: 100%;
|
padding: 0 30rpx;
|
padding-bottom: env(safe-area-inset-bottom);
|
box-sizing: border-box;
|
position: fixed;
|
left: 0;
|
bottom: 30rpx;
|
|
.footer_btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #025eef;
|
border-radius: 44rpx;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
}
|
}
|
</style>
|
