hz-zhhq-app/pages/visitorAppointment/visitorAppointment.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[current_status.charAt(current_status.length-1)]" disabled="true" />
			</view>
			<!-- <view>
				<text class="input_left">来访人单位</text>
				<input type="text" placeholder="无" :value="dpname" 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 class="visitor_2">
			<view class="visitor_2_text mar-none">
				<view>
					<text>姓&nbsp;&nbsp;&nbsp;名:</text>
					{{ person2 }}
				</view>
				<view>
					<text>单&nbsp;&nbsp;&nbsp;位:</text>
					{{ dpname || '未知' }}
				</view>
				<view>
					<text>手机号:</text>
					{{ tel }}
				</view>
				<view>
					<text>身份证:</text>
					{{ idcard }}{{identityAuth=='1'?'（身份已认证）':'（身份认证中）'}}
				</view>
				<view v-if="licensePlate!=''">
					<text>车牌号:</text>
					{{ licensePlate }}
				</view>
			</view>
			<view class="pic" v-if="picture0 || picture1 || picture2">
				<image :src="picture0" mode="" @tap="previewImage(picture0)" v-if="picture0"></image>
				<image :src="picture1" mode="" @tap="previewImage(picture1)" v-if="picture1"></image>
				<image :src="picture2" mode="" @tap="previewImage(picture2)" v-if="picture2"></image>
			</view>
		</view>

		<view v-if="retinueList.length > 0">
			<view class="visitor_2" v-for="(item, index) in retinueList" :key="index">
				<view class="visitor_2_text mar-none">
					<view>
						<text>姓&nbsp;&nbsp;&nbsp;名:</text>
						{{ item.retinue_name }}
					</view>
					<view>
						<text>手机号:</text>
						{{ item.visitor_tel }}
					</view>
					<view>
						<text>身份证:</text>
						{{ item.idcard }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="visitor_2">
			<view>
				<view style="width: 20upx;height: 20upx;border-radius: 100%;border: 1px solid #666666;"></view>
			</view>
			<view>
				<view style="width: 20upx;height: 20upx;border-radius: 100%;border: 1px solid #666666;"></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(id, 0)" v-if="role == '1' && first_status == '0'">
			<view class="btn">{{ button_text }}</view>
		</view>
		<view class="footer-btn footer-btn-two" v-if="role == 2 && first_status == '0'">
			<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 } from '@/common/api.js';
import { callbackRequest, alertTip ,getStorage} from '@/common/util.js';
export default {
	data() {
		return {
			button_class: 'submit_button',
			button_text: '取消',
			first_status: '',
			second_status:'',
			third_status:'',
			current_status:"",
			picture0: '../../static/IDpic1.png',
			picture1: '../../static/IDpic1.png',
			picture2: '../../static/IDpic1.png',
			stateList: ['待审核', '已通过', '已拒绝', '待本人确认', '已取消','','已流转'],
			role: '',
			userId: '',
			id: '', //记录的id
			person: '',
			person2: '',
			place: '',
			tel: '   ',
			visited_person_tel: '',
			licensePlate:'',
			start: '',
			end: '',
			dpname: '',
			reason: '',
			idcard: '',
			retinueList: [],
			identityAuth:0,//1.身份已认真 0身份认真中
			userLevel:getStorage('userInfo').userLevel,
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.role = options.role;
		this.userId = options.userId;
		this.reFresh(this.userId, this.id, '02'); //必须是‘02’
	},
	methods: {
		// 预览图片
		previewImage(image) {
			var imgArr = [];
			imgArr.push(image);
			//预览图片
			uni.previewImage({
				urls: imgArr,
				current: imgArr[0]
			});
		},

		reFresh(userId, id, type) {
			console.log('执行onload' + type);
			var data = { userId: 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 == null?"":res.data.returnData[0].name;
				this.dpname = res.data.returnData[0].orgName;
				this.reason = res.data.returnData[0].visit_reason;
				this.idcard = res.data.returnData[0].idcard;
				this.first_status = res.data.returnData[0].first_status;
				this.picture0 = res.data.returnData[0].face_pic1;
				this.picture1 = res.data.returnData[0].picture1;
				this.picture2 = res.data.returnData[0].picture2;
				this.retinueList = res.data.returnData[1].greenRetinueInfoList;
				this.identityAuth = res.data.returnData[0].identityAuth;
				this.current_status = res.data.returnData[0].current_status;
				this.second_status = res.data.returnData[0].second_status;
				this.third_status = res.data.returnData[0].third_status;
				this.licensePlate = res.data.returnData[0].licensePlate==null?"":res.data.returnData[0].licensePlate;
			});
		},
		submit(id, type) {
			let params = {
				method: greenVisitorInfo, // 申请的审批
				data: { userId: this.userId, applyId: this.id, applyType: type } //分三种情况
			};
			var self = this;
			uni.showModal({
				title: '提示',
				content: '是否确认',
				success: function(res) {
					if (res.confirm) {
						callbackRequest(params).then(res => {
							alertTip(res.data.returnMsg);
							//刷新页面
							self.reFresh(self.userId, self.id, '02');
						});
					}
				}
			});
		}
	}
};
</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 {
			font-weight: bold;
			display: inline-block;
			width: 110rpx;
			text-align: right;
			padding-right: 10rpx;
			color: #333;
		}
	}
}
.visitor_2 .mar-none {
	margin-left: 0;
}
/* 已同意 */

#result .ing {
	background: #ffffff;
	height: 2.2rem;
	line-height: 1.2rem;
	border-radius: 0.133333rem;
}

#result .ing i {
	width: 0.566667rem;
	height: 0.566667rem;
	border: 0.033333rem solid #00c277;
	display: inline-block;
	margin-left: 0.8rem;
	margin-right: 0.24rem;
	border-radius: 50%;
	margin-top: 0.9rem;
}

#result .ing text {
	color: #00c277;
	font-size: 0.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>