hjt_erdao_WeChatApplet/pages/manage/account/accountExamine.vue

<template>
	<!-- 账户审核 -->
	<view class="add main-bg">
		<view class="search" @click="goto('/pages/manage/account/retrieval')">
			<u-icon name="search" color="#2E4F1C" size="44"></u-icon>
			<view class="search-text font-color2">退役军人检索</view>
		</view>
		<view class="sys-header">
			<view class="sys" @click="goto('/pages/soldier/user/scanning?flag=true')"><!--/pages/soldier/user/scanning-->
				<view class="icon">
					<u-icon name="scan" color="#2E4F1C" size="88"></u-icon>
				</view>
				<view class="text font-twenty-four font-color3">扫一扫</view>
			</view>
			<view class="sys" @click="goto('/pages/soldier/user/add')">
				<view class="icon">
					<u-icon name="plus" color="#2E4F1C" size="78"></u-icon>
				</view>
				<view class="text font-twenty-four font-color3">添加优抚对象信息</view>
			</view>
			<view class="sys" @click="handleQuit">
				<view class="icon">
					<u-icon name="backspace" color="#2E4F1C" size="78"></u-icon>
				</view>
				<view class="text font-twenty-four font-color3">退出登录</view>
			</view>
		</view>
		<view v-if="list.length > 0">
			<view class="examine-content" v-for="(item,index) in list">
				<view class="examine-dis">
					<view class="number header-long-bg">{{index + 1}}</view>
					<view style="margin-left: 30rpx;">
						<view class="font-twenty font-color3">
							姓名：{{item.veteransName}}
						</view>
						<view class="font-twenty font-color3" style="margin: 30rpx 0;">
							身份证号：{{item.veteransIdcard}}
						</view>
						<view v-if="item.veteransPic">
							<image :src="image(item.veteransPic)" mode="" class="examine-img" @tap="preAvatar(image(item.veteransPic))"></image>
						</view>
					</view>
				</view>
				<view class="button-dis">
					<button type="default" class="btn" @click="handlePass(item.veteransId)">通过</button>
					<button type="default" class="btn color" @click="show(item.veteransId)">不通过</button>
				</view>
			</view>
		</view>
		<view v-else style="padding-top: 200rpx;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<ming-pop ref="statement" direction="below" :is_mask="true" :width="100" height="50%" :maskFun="true">
			<pop @close="close()" @noPass='handleNoPass'></pop>
		</ming-pop>
		<u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
					:border-top="borderTop"></u-tabbar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import server from "@/api/index";
	import http from '@/common/http.js'
	export default {
		data() {
			return {
				borderTop: false,
				inactiveColor: '#ccc',
				activeColor: '#2E4F1C',
				list:[
					{veteransName: 'qwe',
					veteransIdcard:123,
					veteransPic: '/static/img.png'
					}
				],
				id: null,
				userInfo: {}
			}
		},
		computed: {
			...mapGetters([
				'tabBarList',
				'role'
			])
		},
		onLoad(){
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getAccountListFn();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getAccountListFn();
		},
		methods: {
			handleQuit(){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定退出登录吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.removeStorage({
							    key: 'userInfo',
							    success: function (res) {
									uni.removeStorage({
										key: 'role',
									});
									uni.removeStorage({
										key: 'token',
									    success: function (res) {
											uni.reLaunch({
											    url: '/pages/index/index'
											});
									    }
									});
							    }
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			goto(url){
				uni.navigateTo({
					url
				})
			},
			image(e) {
				return http.webUrl + e
			},
			handlePass(id){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定通过审核吗?',
					success: function (res) {
						if (res.confirm) {
							let params = {
						        veteransId: id,
						        veteransStatus: "2",
						        veteransReviewer: _this.userInfo.userId
							}
							server.getAccountPass(params).then(res =>{
									_this.$refs.uToast.show({
										title: '通过成功!',
										type: 'default',
									});
									_this.getAccountListFn()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleNoPass(data){
				let _this = this;
				let params = {
						remark: data,
				        veteransId: this.id,
				        veteransStatus: "3",
				        veteransReviewer: _this.userInfo.userId,
					}
				server.getAccountPass(params).then(res =>{
						_this.$refs.uToast.show({
							title: '操作成功!',
							type: 'default',
						});
						_this.getAccountListFn()
				})
			},
			getAccountListFn(){
				server.getAccountList({veteransStatus: "1"}).then(res =>{
					this.list = [];
					if(res){
						this.list = res
					}
				})
			},
			show(id) {
				this.$refs.statement.show();
				this.id = id
			},
			close() {
				this.$refs.statement.close();
			},
			// 预览图片
			preAvatar(url) {
				console.log(url)
				wx.previewImage({
					current: url, // 当前显示图片的 http 链接
					urls: [url] ,// 需要预览的图片 http 链接列表
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 0rpx 30rpx 30rpx;
		.search{
			width: 100%;
			height: 80rpx;
			margin-top: 30rpx;
			background-color: rgba(46, 79, 28, 0.13);
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			.search-text{
				height: 80rpx;
				padding-left: 16rpx;
				line-height: 80rpx;
				letter-spacing: 1rpx;
			}
		}
	}
	.sys-header{
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		.sys{
			width: calc(33% - 10rpx);
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx 0rpx;
			.icon{
				height: 88rpx;
				text-align: center;
				image{
					width: 88rpx;
					height: 88rpx;
				}
			}
			.text{
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				letter-spacing: 2rpx;
			}
		}
	}
	.examine-content {
		margin: 50rpx 0rpx 0;
		padding: 30rpx;
		background: rgba(46, 79, 28, 0.13);
		opacity: 1;
		border-radius: 16rpx;

		.examine-dis {
			display: flex;

			.number {
				width: 48rpx;
				height: 48rpx;
				color: #FFFFFF;
				padding-top: 5rpx;
				text-align: center;
				border-radius: 50%;

			}

			.examine-img {
				width: 360rpx;
				height: 203rpx;
				margin-left: 60rpx;
			}
		}

		.button-dis {
			display: flex;
			margin-top: 30rpx;

			.btn {
				width: 300rpx;
				background: #2E4F1C;
				color: #FFFFFF;
				border-radius: 48rpx;
			}

			.color {
				background: #CC1019;
			}
		}
	}
</style>