406 lines
9.9 KiB
Vue
406 lines
9.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="interviewee">
|
||
<view>
|
||
<text class="input_left">到访地点</text>
|
||
<input type="text" placeholder="无到访地点名" :value="place" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">申请状态</text>
|
||
<input type="text" placeholder="无申请状态" :value="stateList[first_status]" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">被访人部门</text>
|
||
<input type="text" placeholder="无申请部门" :value="dp" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">被访人姓名</text>
|
||
<input type="text" placeholder="无被访人姓名" :value="person" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">手机号码</text>
|
||
<input type="tel" placeholder="无被访人手机号码" :value="visited_person_tel" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">来访时间</text>
|
||
<input type="tel" placeholder="无来访时间" :value="start" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">离开时间</text>
|
||
<input type="tel" placeholder="无离开时间" :value="end" disabled="true">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">来访事由</text>
|
||
<input type="text" placeholder="无来访事由" :value="reason" disabled="true">
|
||
</view>
|
||
</view>
|
||
<!-- 随行人员 -->
|
||
<!-- <view id="visitor">
|
||
<view class="visitor">
|
||
<view>
|
||
<text class="input_left">访客姓名</text>
|
||
<input class="name" confirmtype="text" value="刘斌">
|
||
</view>
|
||
<view>
|
||
<text class="input_left">身份证号</text>
|
||
<input class="name" confirmtype="tel" value="342425990087673243"/>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view id="visitor_2">
|
||
<view class="visitor_2">
|
||
<view class="visitor_2_text">
|
||
<!-- <input class="name" confirmtype="text" value="刘斌">
|
||
<input class="name" confirmtype="tel" value="342425990087673243"/> -->
|
||
<view><text>姓 名:</text>{{person2}}</view>
|
||
<view><text>手机号:</text>{{tel}}</view>
|
||
<view><text>身份证:</text>{{idcard}}</view>
|
||
</view>
|
||
<!-- <view class="pic">
|
||
<image :src="picture" mode=""></image>
|
||
</view> -->
|
||
<view class="img-box">
|
||
<view class="img-item" v-for="(item,index) in imgs" :key="index">
|
||
<image class="remove-btn" v-if="first_status=='3'" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
||
<image class="img" :src="item" mode=""></image>
|
||
</view>
|
||
<view class="img-item upload-btn" @click="chooseImg()"
|
||
v-if="imgs.length < 2 && first_status=='3'">
|
||
<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
|
||
<view class="text">添加本人照片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view id="visitor_2" v-if="retinueList.length > 0">
|
||
<view class="visitor_2" v-for="(item,index) in retinueList" :key="index" >
|
||
<!-- <view class="pic">
|
||
<img src="../../static/IDpic1.png"></img>
|
||
</view> -->
|
||
<view class="visitor_2_text">
|
||
<view><text>姓 名:</text>{{item.retinue_name}}</view>
|
||
<view><text>手机号:</text>{{item.visitor_tel}}</view>
|
||
<view><text>身份证:</text>{{item.idcard}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view id="result">
|
||
<view class="ing">
|
||
<i></i>
|
||
<text>被拜访人：已同意 2019-11-28 19:36:24</text>
|
||
</view>
|
||
</view> -->
|
||
<view style="clear: both;"></view>
|
||
<view class="occupied"></view>
|
||
<view class="footer-btn" @click="submit()" v-if="first_status=='3'">
|
||
<view class="btn">确认</view>
|
||
</view>
|
||
<!-- <view class="footer-btn footer-btn-two"
|
||
v-if="first_status=='1'">
|
||
<view class="btn btn-col" @click="submit(id,1)">拒绝</view>
|
||
<view class="btn btn-col1" @click="submit(id,2)">同意</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getApplyInfo,greenVisitorInfo,visitorinvite} from '@/common/api.js';
|
||
import {callbackRequest,alertTip,convertImgToBase64} from '@/common/util.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
first_status:'',
|
||
picture:'../../static/IDpic1.png',
|
||
stateList: ['待审核', '已通过','已拒绝','待本人确认','已取消'],
|
||
userId:'',
|
||
id:'',//记录的id
|
||
person:'',
|
||
person2:'',
|
||
place:'',
|
||
tel:'',
|
||
visited_person_tel:'',
|
||
start:'',
|
||
end:'',
|
||
dp:'',
|
||
reason:'',
|
||
idcard:'',
|
||
retinueList:[],
|
||
imgs:[],
|
||
}
|
||
},
|
||
onLoad(options){
|
||
this.id = options.id;
|
||
this.userId = options.userId;
|
||
this.reFresh(this.userId,this.id,"02");//必须是‘02’
|
||
},
|
||
methods: {
|
||
reFresh(userId,id,type){
|
||
var data = {userId:this.userId,id:id,applyType:type};
|
||
let params = {
|
||
"method": getApplyInfo,//根据id和申请类型查询申请详情
|
||
"data": data
|
||
};
|
||
console.log(params);
|
||
callbackRequest(params)
|
||
.then(res =>{
|
||
console.log(res);
|
||
this.person = res.data.returnData[0].visited_person_name;
|
||
this.person2 = res.data.returnData[0].visitor_name;
|
||
this.place = res.data.returnData[0].visit_place;
|
||
this.tel = res.data.returnData[0].visitor_tel;
|
||
this.visited_person_tel = res.data.returnData[0].visited_person_tel;
|
||
this.start = res.data.returnData[0].visit_start_time;
|
||
this.end = res.data.returnData[0].visit_end_time;
|
||
// this.dp = res.data.returnData[0].name;
|
||
this.dp = res.data.returnData[0].dpid;
|
||
this.reason = res.data.returnData[0].visit_reason;
|
||
this.idcard = res.data.returnData[0].idcard;
|
||
this.first_status = res.data.returnData[0].first_status;
|
||
|
||
if(res.data.returnData[0].picture1 != null && res.data.returnData[0].picture1 != ""){
|
||
this.imgs[0] = res.data.returnData[0].picture1;
|
||
if(res.data.returnData[0].picture2 != null && res.data.returnData[0].picture2 != ""){
|
||
this.imgs[1] = res.data.returnData[0].picture2;
|
||
}
|
||
}else{
|
||
if(res.data.returnData[0].picture2 != null && res.data.returnData[0].picture2 != ""){
|
||
this.imgs[0] = res.data.returnData[0].picture2;
|
||
}
|
||
}
|
||
this.retinueList = res.data.returnData[1].greenRetinueInfoList;
|
||
})
|
||
},
|
||
submit(){
|
||
var data = {userId:this.userId};
|
||
data.idcardPic1 = this.imgs[0]; data.idcardPic2 = this.imgs[1];
|
||
if(!data.idcardPic1 && !data.idcardPic2){
|
||
alertTip("请至少上传一张图片！");
|
||
return;
|
||
}
|
||
data.id = this.id;
|
||
let params = {
|
||
"method": visitorinvite,
|
||
"data": data
|
||
};
|
||
var self = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否确认提交',
|
||
success: function(res){
|
||
if (res.confirm) {
|
||
callbackRequest(params)
|
||
.then(res =>{
|
||
console.log(res);
|
||
alertTip(res.data.returnMsg);
|
||
//刷新页面
|
||
self.reFresh(self.userId,self.id,"02");
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//主访客上传图片
|
||
chooseImg(){
|
||
let _this = this;
|
||
uni.chooseImage({
|
||
count:2,
|
||
success:res => {
|
||
let param = "";
|
||
let imgArr = res.tempFilePaths
|
||
for (var i = 0; i < imgArr.length; i++) {
|
||
param = imgArr[i];
|
||
convertImgToBase64(param, function(base64) {
|
||
_this.imgs.push(base64)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//删除图片
|
||
removeImg(index){
|
||
this.imgs.splice(index,1);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.container{
|
||
min-height:100vh;
|
||
background: #f5f5f5;
|
||
overflow:hidden;
|
||
}
|
||
.interviewee{
|
||
padding: 0upx 30upx 0;
|
||
background: #fff;
|
||
margin:30rpx 30rpx 0;
|
||
border-radius: 10rpx;
|
||
.input_left{
|
||
width: 150rpx;
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.interviewee view{
|
||
line-height: 40rpx;
|
||
padding:20rpx 0;
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.interviewee view:last-child{
|
||
border-bottom:0px;
|
||
}
|
||
.interviewee view input{
|
||
font-size: 28rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
.visitor_2{
|
||
margin:20rpx 30rpx 20rpx;
|
||
background: #ffffff;
|
||
border-radius:10upx;
|
||
}
|
||
.visitor_2{
|
||
border-radius: 15upx;
|
||
padding:30rpx 30rpx;
|
||
overflow:hidden;
|
||
}
|
||
.visitor_2 .pic{
|
||
padding-top:20rpx;
|
||
}
|
||
.visitor_2 image{
|
||
width: 180rpx;
|
||
height:180rpx;
|
||
vertical-align:top;
|
||
margin-right:20rpx;
|
||
}
|
||
.visitor_2_text{
|
||
// margin-left: 170upx;
|
||
padding:0rpx 0;
|
||
view{
|
||
font-size: 28upx;
|
||
color:#666;
|
||
line-height:40rpx;
|
||
text{
|
||
display: inline-block;
|
||
width:110rpx;
|
||
text-align:right;
|
||
padding-right:10rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
.visitor_2 .mar-none{
|
||
margin-left:0;
|
||
}
|
||
.img-box{
|
||
overflow:hidden;
|
||
padding-top:25upx;
|
||
.img-item{
|
||
float:left;
|
||
width:200upx;
|
||
height:200upx;
|
||
border:1px solid #ddd;
|
||
margin:0 20upx 0upx 0upx;
|
||
position:relative;
|
||
.img{
|
||
display:block;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
.remove-btn{
|
||
position:absolute;
|
||
top:-18upx;
|
||
right:-18upx;
|
||
width:44upx;
|
||
height:44upx;
|
||
z-index:2;
|
||
margin:0;
|
||
}
|
||
}
|
||
.upload-btn{
|
||
.img{
|
||
width:60upx;
|
||
height:60upx;
|
||
margin:40upx auto 0;
|
||
}
|
||
.text{
|
||
font-size:28upx;
|
||
color:#999;
|
||
text-align:center;
|
||
line-height:40upx;
|
||
padding-top:10rpx;
|
||
}
|
||
}
|
||
}
|
||
/* 已同意 */
|
||
|
||
#result .ing {
|
||
background: #ffffff;
|
||
height: 2.2rem;
|
||
line-height: 1.2rem;
|
||
border-radius: .133333rem;
|
||
}
|
||
|
||
#result .ing i {
|
||
width: .566667rem;
|
||
height: .566667rem;
|
||
border: .033333rem solid #00c277;
|
||
display: inline-block;
|
||
margin-left: .8rem;
|
||
margin-right: .24rem;
|
||
border-radius: 50%;
|
||
margin-top: .9rem;
|
||
}
|
||
|
||
#result .ing text {
|
||
color: #00c277;
|
||
font-size: .745333rem;
|
||
}
|
||
|
||
.submit{
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 20upx;
|
||
/* bottom: 0upx; */
|
||
height:80upx;
|
||
display: inline;
|
||
background-color: #00C277;
|
||
}
|
||
button{
|
||
font-size: 38upx;
|
||
font_weight: bold;
|
||
height:80upx;
|
||
}
|
||
.submit_button{
|
||
width: 100%;
|
||
color: #FFFFFF;
|
||
background-color: #00C277;
|
||
margin: 0;
|
||
}
|
||
|
||
.btn_refuse{
|
||
width: 50%;
|
||
color: #FFFFFF;
|
||
background-color: red;
|
||
margin: 0;
|
||
}
|
||
.btn_agree{
|
||
width: 50%;
|
||
color: #FFFFFF;
|
||
background-color: #00C277;
|
||
margin-left: 50%;
|
||
margin-top: -80upx;
|
||
}
|
||
|
||
</style>
|