ParkApp/pages/index/staffAudit/detail.vue

<template>
	<view class="">
		<u-modal   :show-cancel-button="true"  @confirm="submitFailAudit" title="审核意见" :mask-close-able="true" v-model="modelShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150"  ref="uForm">
					<u-form-item :border-bottom="false">
						<u-input height="150" placeholder="请输入审核意见(选填)" v-model="opinion" />
					</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.realName}}</text>
					</view>
				</view>
				<view class="right">
					<text class="" v-if="dataDetail.auditStatus==1">已通过</text>
					<text style="color: #ea7500;" v-if="dataDetail.auditStatus==0">待审核</text>
					<text style="color: #da0000;" v-if="dataDetail.auditStatus==2">未通过</text>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view style="padding: 20rpx 30rpx 0;">
						<view class="flex justify-between">
							<view >
								<view class="content">
									<text class="padding-right-10">微信昵称：</text>
									<text>{{dataDetail.name}}</text>
								</view>
								<view style="padding: 50rpx 0;display: flex;">
									<view class="flex justify-center align-center">
										<text class="padding-right-10">微信头像：</text>
									</view>
									<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="dataDetail.avatar"></image>
								</view>
								
							</view>
							<view class="" v-if="!this.$isEmpty(dataDetail.face)">
								<image @click="previewImg(dataDetail.face)" style="width: 200rpx;height: 200rpx;" :src="dataDetail.face" ></image>
								<view class="text-center base-color padding-top-10">
									(人脸信息)
								</view>
							</view>
						</view>
						<view class="content">
							<text class="padding-right-10">性别：</text>
							<text v-text="dataDetail.sex==2?'女':'男'"></text>
						</view>
						<view class="content">
							<text class="padding-right-10">所属园区：</text>
							<text >{{dataDetail.agencyName}}</text>
						</view>
						<view class="content">
							<text class="padding-right-10">所在区域：</text>
							<text >{{dataDetail.residentialName}}</text>
						</view>
						<view class="content">
							<text class="padding-right-10">所属企业：</text>
							<text >{{dataDetail.enterpriseName}}</text>
						</view>
						<view class="content">
							<text class="padding-right-10">联系方式：</text>
							<text>{{dataDetail.phone}}</text>
							<image @click.stop="call(dataDetail.phone)" class="call" src="/static/index/call.png" ></image>
						</view>
						<view class="content">
							<text class="padding-right-10">提交时间：</text>
							<text>{{dataDetail.createTime}}</text>
						</view>
						<view class="content" v-if="dataDetail.auditStatus!=0">
							<text class="padding-right-10" >审核时间：</text>
							<text v-text="dataDetail.auditTime?dataDetail.auditTime:''"></text>
						</view>
						<view class="content" v-if="dataDetail.auditStatus!=0">
							<text class="padding-right-10">审核意见：</text>
							<text v-text="dataDetail.opinion?dataDetail.opinion:''"></text>
						</view>
						<view class="content">
							<text class="padding-right-10">认证备注：</text>
							<text style="line-height: 50rpx;" v-text="dataDetail.remarks?dataDetail.remarks:''"></text>
						</view>
						<view style="height: 100rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataDetail.auditStatus==0" :style="{marginBottom:safeAreaBottom}" class="footer-fixed padding-20  bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;border-top: 1rpx solid #f1f1f1;">
			<view @click="pass" class="cu-btn df base-bg-color  round margin-right-20" >
				审核通过
			</view>
			<view @click="fail" class="cu-btn df bg-red  round " >
				审核不通过
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card',
	data() {
		return {
			opinion:'',
			modelShow:false,
			id:'',
			dataDetail:{}
		};
	},
	onLoad(options) {
		this.id=options.id
		this.fetchDetail()
	},
	onShow() {
		this.setPreData(false)
	},
	computed: {
	  //ios底部安全区域
	  safeAreaBottom() {
	    let info = uni.getSystemInfoSync()
	    let safe = 20
	    if (
	      info &&
	      ['devtools', 'ios'].includes(info.platform) &&
	      info.statusBarHeight > safe
	    ) {
	      return info.statusBarHeight - safe+'px'
	    }
	    return 0
	  }
	},
	methods:{
		call(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
		async send(msgData){
			let tokenData={
				grantType:this.$api.wxData.subscribe_grant_type,
				appId:this.$api.wxData.appId,
				secret:this.$api.wxData.secret
			}
			let res=await this.$api.wxApi.getAccessToken(tokenData)
			let token=JSON.parse(res.data).access_token
			let subscribeData={
				accessToken:token,
				touser:msgData.openId,
				lang:"zh_CN",
				page:'/pages/login/login',
				miniprogramState:this.$miniprogramState,
			    templateId: this.$staffTmplIds[0],
				  "data": {
				    "name1": {
				  	  "value": this.$cache.get('loginAccount')
				    },
				    "phrase5":{
				  	  "value": "员工认证"
				    },
				    "phrase2": {
				  	  "value": msgData.content
				    },
				    "thing3": {
				  	  "value": msgData.remarks || '已阅'
				    },
				  }
			}
			this.$api.wxApi.subscribe(subscribeData).then(res=>{
				console.log(res);
			}).catch(err=>{
				console.error(err);
			})
		},
		previewImg(img){
			let urls=[img]
			uni.previewImage({
				urls:urls
			})
		},
		fetchDetail(){
			this.$api.enterprisestaff.page({id:this.id}).then(res=>{
				this.dataDetail=res.data.records[0]
			})
		},
		setPreData(data){
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; 
			prevPage.setData({
				"flag":data
			})
		},
		pass(){
			let item=this.$u.deepClone(this.dataDetail)
			this.$showModel("确定审核通过该员工信息？").then(res=>{
				item.examine=1
				item.auditTime=this.$createDateTime()
				this.$api.enterprisestaff.submit(item).then(res=>{
					if (res.success==true) {
						let msgData={
							openId:item.openId,
							content:"审核已通过",
							remarks:'已审核'
						}
						this.send(msgData)
					}
					this.$showModel(res.msg,false).then(res=>{
						this.setPreData(true)
						uni.navigateBack();
					})
				})
			})
		},
		/**
		 * 审核不通过
		 * @param {Object}
		 */
		submitFailAudit(){
			let item=this.$u.deepClone(this.dataDetail)
			item.auditStatus=2
			item.auditTime=this.$createDateTime()
			item.opinion=this.opinion
			this.$api.enterprisestaff.submit(item).then(res=>{
				if (res.success) {
					let msgData={
						openId: item.openId,
						content:"审核不通过",
						remarks:item.opinion || '审核不通过',
					}
					this.send(msgData)
				}
				this.$showModel(res.msg,false).then(res=>{
					this.setPreData(true)
					uni.navigateBack({
						delta:1
					})
				})
			})
		},
		fail(){
			this.modelShow=true
		}
	}
};
</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: 20rpx 0 20rpx 0;
		.content {
			// border-bottom: 1rpx dashed #DDDDDD;
			padding: 30rpx 0 ;
			
			.call{
				width: 36rpx;
				height: 36rpx;
				margin-left: 40rpx;
				margin-top: 20rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>