ParkApp/pages/index/staffAudit/detail.vue

<template>
	<view class="">
		<u-modal :show-cancel-button="true" @confirm="submitFailAudit" v-model="modelShow" >
			<view class="slot-content margin-10 " style="background-color: #f5f5f5;">
				<textarea  v-model="opinion" placeholder="请输入审核意见" />
			</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.examine==1">已通过</text>
					<text class="text-orange" v-if="dataDetail.examine==0">待审核</text>
					<text class="text-red" v-if="dataDetail.examine==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 text-blue 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.examine!=0">
							<text class="padding-right-10" >审核时间：</text>
							<text>{{dataDetail.auditTime}}</text>
						</view>
						<view class="content" v-if="dataDetail.examine!=0">
							<text class="padding-right-10">审核意见：</text>
							<text>{{dataDetail.opinion}}</text>
						</view>
						<view class="content">
							<text class="padding-right-10">认证备注：</text>
							<text style="line-height: 50rpx;">{{dataDetail.remarks}}</text>
						</view>
						<view style="height: 100rpx;"></view>
					</view>
				</view>
			</view>
		</view>
		<view  class="footer-fixed   padding-20 bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;">
			<view @click="pass" class="cu-btn df bg-blue round margin-right-20" v-if="dataDetail.examine==0">
				审核通过
			</view>
			<view @click="fail" class="cu-btn df bg-blue round " v-if="dataDetail.examine==0">
				审核不通过
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card',
	data() {
		return {
			opinion:'',
			modelShow:false,
			id:'',
			dataDetail:{}
		};
	},
	onLoad(options) {
		this.id=options.id
		this.fetchDetail()
	},
	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/index/index',
				miniprogramState:this.$miniprogramState.TRIAL,
			    templateId: this.$tmplIds[0],
				  "data": {
					  "thing13": {
						  "value": msgData.enterpriseName
					  },
					  "thing9":{
						  "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.detail({id:this.id}).then(res=>{
				this.dataDetail=res.data
			})
		},
		pass(){
			let that=this
			this.$showModel("确定审核通过该员工信息？").then(res=>{
				this.dataDetail.examine=1
				this.dataDetail.auditTime=this.$createDateTime()
				this.$api.enterprisestaff.submit(this.dataDetail).then(res=>{
					let msgData={
						openId:that.dataDetail.openId,
						content:"审核已通过",
						remarks:'已审核',
						enterpriseName:that.dataDetail.enterpriseName
					}
					that.send(msgData)
					that.$showModel(res.msg,false).then(res=>{
						that.$Router.back()
					})
				})
			})
		},
		/**
		 * 审核不通过
		 * @param {Object}
		 */
		submitFailAudit(){
			let that=this
			this.dataDetail.examine=2
			this.dataDetail.auditTime=this.$createDateTime()
			this.dataDetail.opinion=that.opinion
			this.$api.enterprisestaff.submit(this.dataDetail).then(res=>{
				let msgData={
					openId:that.dataDetail.openId,
					content:"审核不通过",
					remarks:that.opinion || '审核不通过',
					enterpriseName:that.dataDetail.enterpriseName
				}
				that.send(msgData)
				that.$showModel(res.msg,false).then(res=>{
					that.$Router.back()
				})
			})
		},
		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>