CommunityApp/pages/myFamily/audit-detail/audit-detail.vue

<template>
	<view class="">
		<u-toast ref="uToast"/>
		<u-modal   :show-cancel-button="true"  @confirm="auditBtn(2)" title="审核意见" :mask-close-able="true" v-model="modelShow" >
			<view class="slot-content" style="margin: 30rpx;">
				<u-form label-width="150"  ref="uForm">
					<u-form-item :border-bottom="false">
						<u-input height="150" placeholder="请输入审核意见" v-model="checkOpinion" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<view class="data">
			<view class="top">
				<view class="left">
					<view class="title ">
						<text class="text-bold">住户姓名：</text>
						<text>{{dataDetail.name}}</text>
						<text v-if="dataDetail.sex==1" class="padding-left-10 text-sm ">[先生]</text>
						<text v-if="dataDetail.sex==2" class="padding-left-10 text-sm ">[女士]</text>
					</view>
				</view>
				<view class="right">
					<text class="text-orange">待审核</text>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view style="padding: 0 30rpx;">
						<view class="flex justify-between">
							<view >
								<view class="content">
									<text class="cuIcon-mobilefill text-blue text-bold"></text>
									<text class="text-bold" style="padding: 0 10rpx;">手机号：</text>
									<text>{{dataDetail.phone}}</text>
									<image @click.stop="call(dataDetail.phone)" class="call" src="/static/call.png" ></image>
								</view>
								<view class="content">
									<text class="cuIcon-circlefill text-blue text-bold"></text>
									<text class="text-bold" style="padding: 0 10rpx;">小区：</text>
									<text>{{dataDetail.residentialName}}</text>
								</view>
								<view class="content">
									<text class="cuIcon-homefill text-blue text-bold"></text>
									<text class="text-bold" style="padding: 0 10rpx;">房间号：</text>
									<text>{{dataDetail.roomName}}</text>
								</view>
							</view>
							<view >
								<image @click="previewImg(dataDetail.faceUrl)" style="width: 200rpx;height: 200rpx;" :src="dataDetail.faceUrl?dataDetail.faceUrl:'https://szsq.nxzhsq.cn/community/miniofile/xlyq/face1.png'" ></image>
								<view class="text-center text-blue padding-top-10">
									(人脸图片)
								</view>
							</view>
						</view>
						<view class="content" style="padding-top: 20rpx;">
							<text class="cuIcon-peoplefill text-blue"></text>
							<text class="text-bold" style="padding: 0 10rpx;">住户类型：</text>
							<text v-if="dataDetail.type==0">业主</text>
							<text v-if="dataDetail.type==1">家属</text>
							<text v-if="dataDetail.type==2">租户</text>
						</view>
						<view class="content">
							<text class="cuIcon-infofill text-blue"></text>
							<text class="text-bold" style="padding: 0 10rpx;">证件类型：</text>
							<text v-if="dataDetail.nationality==0">身份证</text>
							<text v-if="dataDetail.nationality==1">港澳居民往来内地通行证</text>
							<text v-if="dataDetail.nationality==2">台湾居民往来大陆通行证</text>
							<text v-if="dataDetail.nationality==3">护照</text>
						</view>
						<view class="content">
							<text class="cuIcon-newsfill text-blue"></text>
							<text class="text-bold" style="padding: 0 10rpx;">身份证号：</text>
							<text >{{dataDetail.id_card || "未知"}}</text>
						</view>
						<view v-if="nationality==3" class="content">
							<text class="cuIcon-picfill text-blue"></text>
							<text class="text-bold" style="padding: 0 10rpx;">图片信息：</text>
						</view>
						<view v-if="nationality==3" class="cu-list grid col-2 no-border pab" >
							<view class="cu-item">
								<view class="flex justify-center align-center">
									<image  :src="dataDetail.passportImgUri" style="width: 200rpx;height: 200rpx;"></image>
								</view>
								<text>护照图片</text>
							</view>
							<view class="cu-item">
								<view class="flex justify-center align-center">
									<image :src="dataDetail.entryImgUri"  style="width: 200rpx;height: 200rpx;"></image>
								</view>
								<text>入境证明</text>
							</view>
						</view>
						<view v-if="nationality==3" class="" style="height: 150rpx;"></view>
					</view>
				</view>
			</view>
			<view class="footer-fixed " style="padding-bottom: 50rpx;z-index: 99;">
				<view class="flex justify-around">
					<view @click="auditBtn(1)" class="cu-btn round" style="padding: 40rpx;width: 45%;background-color: #61a300;color: #FFFFFF;">
						通过
					</view>
					<view @click="fail"  class="cu-btn round" style="padding: 40rpx;width: 45%;background-color: #cf521b;color: #FFFFFF;">
						不通过
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
var app=getApp()
export default {
	name: 'card',
	data() {
		return {
			checkOpinion:'',
			modelShow:false,
			apply_user_id:'',
			dataDetail:{}
		};
	},
	onLoad(options) {
		this.apply_user_id=options.apply_user_id,
		this.dataDetail={
			name:options.name,
			phone:options.phone,
			residentialName:options.residentialName,
			roomName:options.roomName,
			type:options.type,
			id_card:options.id_card || '',
			sex:options.sex,
			nationality:options.nationality,
			faceUrl:options.faceUrl || '',
			passport_img_uri:options.passport_img_uri || '',
			entry_img_uri:options.entry_img_uri || ''
		}
	},
	onShow() {
		
	},
	methods:{
		call(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
		previewImg(img){
			let urls=[img]
			uni.previewImage({
				urls:urls
			})
		},
		fail(){
			this.modelShow=true
		},
		auditBtn(e) {
		  let that = this;
		  let params = {};
		
		  if (e == 2 && that.checkOpinion == '') {
		    app.globalData.autoFailHint("请先填写审核意见");
			this.modelShow=true
		    return;
		  }
		  params['id'] = that.apply_user_id;
		  params['auditStatus'] = e;
		  params['checkOpinion'] = that.checkOpinion;
		  params['name'] = that.dataDetail.name;
		  params['idCard'] = that.dataDetail.id_card;
		  params['operatorId'] = that.vuex_member.id;
		  params['operatorName'] = that.vuex_member.name;
		  that.$http.updateCheckState(params).then(res =>{
			  //添加成功
			  if (res.data.result_code==1) {
			  	uni.showModal({
			  		content:"操作成功",
			  		showCancel:false,
			  		success: (res) => {
			  			if (res.confirm) {
			  				uni.navigateBack({
			  					delta:1
			  				})
			  			}
			  		}
			  	})
			  } else {
			    app.globalData.autoFailHint(res.data.msg);
			  }
		   
		  });
		}
	}
};
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
view{
	box-sizing: border-box;
}
	
.bg-blue{
	background-color: #59a5f0;
	color: #FFFFFF;
}
.data {
	background-color: #ffffff;
	border-radius: 6rpx;
	box-sizing: border-box;
	padding:0 20rpx 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
		.left {
			display: flex;
			align-items: center;
			.title {
				margin: 0 10rpx;
				font-size: 30rpx;
			}
		}
		.right{
			margin-right: 10rpx;
		}
	}
	.item {
		margin-bottom: 10rpx;
		.content {
			padding: 30rpx 0 ;
			
			.call{
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>