433 lines
9.8 KiB
Vue
433 lines
9.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="main">
|
||
<!-- 预约表单 -->
|
||
<view v-if="currentTabIndex == 0">
|
||
<view class="form-box" >
|
||
<view class="form-item">
|
||
<text class="label">所属部门</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请填写所属部门" v-model="deptList[visitPlace]" disabled>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="form-item">
|
||
<text class="label">本月余量</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="10">
|
||
</view>
|
||
</view> -->
|
||
<view class="form-item">
|
||
<text class="label">餐券领取</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="午餐券">
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">餐券数量</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请填写餐券数量">
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">申请时间</text>
|
||
<view class="ipt-box select" >
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" mode="date" :start="date" @change="bindDateChange">
|
||
<view class="">{{date}}</view>
|
||
</picker>
|
||
<!-- <datetime-Picker class="picker" :placeholder="'请选择申请时间'"
|
||
:maxDate="defaultMaxDate"
|
||
:minDate="defaultMinDate"
|
||
:minTime="minTime"
|
||
:maxTime="maxTime"
|
||
:pickerIndex="1"
|
||
@getData="chooseDate" :type="'anyTime'">
|
||
</datetime-Picker> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="form-item">
|
||
<text class="label">结束时间</text>
|
||
<view class="ipt-box select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<datetime-Picker class="picker" :placeholder="'请选择结束时间'"
|
||
:maxDate="defaultMaxDate"
|
||
:minDate="defaultMinDate"
|
||
:minTime="minTime"
|
||
:maxTime="maxTime"
|
||
:pickerIndex="2"
|
||
@getData="chooseDate" :type="'anyTime'">
|
||
</datetime-Picker>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="form-item">
|
||
<text class="label">来访者姓名</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请填写访客姓名">
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">来访者单位</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请填写访客单位">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">申请事由</text>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请填写申请事由">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="occupied"></view>
|
||
<view class="footer-btn footer-btn-color" @click="submit()">
|
||
<view class="btn">确认申请</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-calendar
|
||
ref="calendar"
|
||
:insert="false"
|
||
@confirm="confirm"
|
||
>
|
||
</uni-calendar>
|
||
<uni-calendar
|
||
ref="calendar2"
|
||
:insert="false"
|
||
@confirm="confirm2"
|
||
>
|
||
</uni-calendar>
|
||
<load-more v-show="currentTabIndex == 1 || currentTabIndex == 2"
|
||
:loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
|
||
import {invite,getMyVisitorList,greenVisitorInfo} from '@/common/api.js';
|
||
import {callbackRequest,alertTip,getStorage} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
let currentTime = new Date().getTime();
|
||
let millisecond = 24 * 7 * 60 * 60 * 1000;
|
||
export default {
|
||
data() {
|
||
return {
|
||
userId:getStorage('userInfo').userId,
|
||
currentTabIndex:0,
|
||
page:1,
|
||
page2:1,
|
||
pageSize:5,
|
||
deptList: ['010', '银座'],
|
||
departmentIndex: 0, //选择的地点下标
|
||
button_text:"提交预约",
|
||
number:0,
|
||
role:2,//管理员
|
||
list:[],
|
||
list2:[],
|
||
visitPlace:"0",
|
||
visitedPersonName:getStorage('userInfo').username,
|
||
visitedPersonTel:getStorage('userInfo').telnumber,
|
||
date:"",
|
||
visitEndTime:"",
|
||
visitReason:"",
|
||
|
||
zhu_visitorName:"",
|
||
zhu_visitorTel:"",
|
||
zhu_idcard:"",
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
defaultMinDate: currentTime,// 最小时间
|
||
//minTime: '08:00',
|
||
//defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
|
||
//maxTime: '18:00',
|
||
}
|
||
},
|
||
components: {
|
||
uniCalendar,
|
||
loadMore,
|
||
datetimePicker,
|
||
contentNone
|
||
},
|
||
watch:{
|
||
currentTabIndex:function(newVal,oldVal){
|
||
this.currentTabIndex = newVal;
|
||
if(this.currentTabIndex){
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.getMyList();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
bindDateChange: function(e) {
|
||
this.date = e.target.value
|
||
},
|
||
chooseDate(e) {
|
||
this.date = e.time;
|
||
},
|
||
change(type, e) {
|
||
this.index = e.detail.value;
|
||
},
|
||
// chooseDate(e){
|
||
// if(e.pickerIndex == 1){
|
||
// this.visitStartTime = e.time;
|
||
// }else {
|
||
// this.visitEndTime = e.time;
|
||
// }
|
||
// },
|
||
changeDepartment(e) {
|
||
this.departmentIndex = e.detail.value;
|
||
},
|
||
toDetail(url){
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
confirm(e) {
|
||
this.visitStartTime = e.fulldate;
|
||
},
|
||
confirm2(e) {
|
||
this.visitEndTime = e.fulldate;
|
||
},
|
||
open(type){
|
||
if(type == 1){
|
||
this.$refs.calendar.open();
|
||
}else{
|
||
this.$refs.calendar2.open();
|
||
}
|
||
},
|
||
submit(){
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
page{
|
||
// background: #f8f8f8;
|
||
}
|
||
.container{
|
||
position:relative;
|
||
overflow:hidden;
|
||
background: #f8f8f8;
|
||
min-height:100vh;
|
||
.banner-box{
|
||
width:100%;
|
||
height:240upx;
|
||
position:absolute;
|
||
top:0;
|
||
left:0;
|
||
image{
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.main{
|
||
margin:40upx 20upx 0;
|
||
position:relative;
|
||
z-index:10;
|
||
.tab-box{
|
||
overflow:hidden;
|
||
border-radius:10upx 10upx 0 0;
|
||
background: rgba(132,149,167,0.8);
|
||
height:70upx;
|
||
.tab-item{
|
||
float:left;
|
||
height:70upx;
|
||
width:33.33%;
|
||
font-size:30upx;
|
||
color:#e5f6ff;
|
||
text-align:center;
|
||
line-height:70upx;
|
||
}
|
||
.active{
|
||
background: #fff;
|
||
color:#333;
|
||
border-radius:10upx 10upx 0 0;
|
||
font-weight:bold;
|
||
}
|
||
}
|
||
.form-box{
|
||
padding:20upx 30upx 0upx;
|
||
margin-bottom: 20upx;
|
||
background: #fff;
|
||
.form-item{
|
||
overflow:hidden;
|
||
border-bottom:1px solid #eee;
|
||
padding:30upx 0;
|
||
.label{
|
||
float:left;
|
||
width:150upx;
|
||
font-size:28upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
line-height:50upx;
|
||
}
|
||
.ipt-box{
|
||
margin-left:160upx;
|
||
input{
|
||
width:100%;
|
||
height:50upx;
|
||
line-height:50upx;
|
||
font-size:26upx;
|
||
color:#666;
|
||
}
|
||
.pic{
|
||
width:60upx;
|
||
height:60upx;
|
||
line-height: 80upx;
|
||
}
|
||
}
|
||
.select{
|
||
.arrow{
|
||
float:right;
|
||
width:16upx;
|
||
height:29upx;
|
||
margin-top:10upx;
|
||
}
|
||
input{
|
||
width:70%;
|
||
}
|
||
}
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.picker {
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
.sure-btn{
|
||
width:100%;
|
||
height:80upx;
|
||
font-size:28upx;
|
||
color:#fff;
|
||
text-align:center;
|
||
line-height:80upx;
|
||
border-radius:8upx;
|
||
background: #0066CC;
|
||
background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
|
||
margin-top:50upx;
|
||
}
|
||
}
|
||
.list-box{
|
||
.list-item{
|
||
background: #fff;
|
||
margin-bottom:10upx;
|
||
.title{
|
||
border-bottom:1px solid #eee;
|
||
padding:20upx 10upx;
|
||
overflow:hidden;
|
||
line-height:40upx;
|
||
.line{
|
||
display:inline-block;
|
||
width:10upx;
|
||
height:32upx;
|
||
background: $assistColor;
|
||
margin-top:4upx;
|
||
}
|
||
.text{
|
||
display:inline-block;
|
||
font-size:28upx;
|
||
color:#444;
|
||
font-weight:bold;
|
||
margin-left:10upx;
|
||
vertical-align:top;
|
||
}
|
||
.status{
|
||
font-size:26upx;
|
||
color:$assistColor;
|
||
float:right;
|
||
}
|
||
.status1{
|
||
font-size:26upx;
|
||
color:#5063c3;
|
||
float:right;
|
||
}
|
||
.status2{
|
||
font-size:26upx;
|
||
color:red;
|
||
float:right;
|
||
}
|
||
}
|
||
.content{
|
||
padding:10upx 20upx;
|
||
// padding:10upx 10upx 60upx 10upx;
|
||
.info-item{
|
||
overflow: hidden;
|
||
padding-bottom:10upx;
|
||
.fl-text{
|
||
float:left;
|
||
font-size:26upx;
|
||
color:#444;
|
||
font-weight:bold;
|
||
line-height:40upx;
|
||
}
|
||
.fr-text{
|
||
float:right;
|
||
font-size:26upx;
|
||
color:#666;
|
||
line-height:40upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.comment-btn {
|
||
float: right;
|
||
font-size: 24upx;
|
||
border-radius: 10upx;
|
||
color: #fff;
|
||
line-height: 50upx;
|
||
text-align: center;
|
||
min-width: 140upx;
|
||
background-color: #00c277;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
#addbtn{
|
||
height: 120upx;
|
||
background-color: #FFFFFF;
|
||
padding: 30upx;
|
||
border-radius: 30upx;
|
||
color: #333333;
|
||
border-bottom: .033333rem solid #eee;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-top: 20upx;
|
||
}
|
||
.addbtn view text:nth-child(1){
|
||
font-size: 32upx;
|
||
margin-left: 220upx;
|
||
color: #00c277;
|
||
}
|
||
.addbtn view text:nth-child(2){
|
||
font-size: 32upx;
|
||
margin-left: 180upx;
|
||
color: #00c277;
|
||
}
|
||
.tips{
|
||
font-size: 22upx;
|
||
// margin-left: 80upx;
|
||
margin-top: 20upx;
|
||
}
|
||
</style>
|