qimall/addons/RealAuth/backend/views/user/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-export-dialog');
?>
<div id="app" v-cloak>
	<el-card shadow="never" style="border:0;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
		<div slot="header">
			<div>
				<span>认证记录</span>
                <div style="float: right; margin: -5px 0;display:flex;">
                    <com-export-dialog style="float: right;margin-top: -5px" :field_list='export_list' :action_url="export_url" :params="searchData">
                    </com-export-dialog>
                </div>
			</div>
		</div>
		<div class="table-body">
			<el-form :inline="true" :model="searchData" class="demo-form-inline">
				<el-col :span="24">
					<el-form-item label="会员ID">
						<el-input v-model="searchData.user_id" placeholder="会员ID"></el-input>
					</el-form-item>
					<el-form-item label="姓名">
						<el-input v-model="searchData.real_name" placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item label="证件号">
						<el-input v-model="searchData.id_no" placeholder="证件号"></el-input>
					</el-form-item>
					<el-form-item label="认证时间">
						<el-date-picker value-format="yyyy-MM-dd" v-model="searchData.data" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
			<!-- 用户信息 -->
			<template>
				<el-table ref="multipleTable" :data="user_list" @selection-change="handleSelectionChange">
					<el-table-column prop="user_id"  label="会员ID" align="center"></el-table-column>
					<el-table-column label="基本信息" >
						<template slot-scope="scope">
							<div class="user_img" flex="cross:center">
								<el-image class="default-avatar" :src="scope.row.avatar_url">
									<div slot="error" class="image-slot">
										<com-image src="resources/img/mall/default_avatar_url.png"></com-image>
									</div>
								</el-image>

								<div class="table-info-text">
									<div style="color:#000;">昵称:{{scope.row.nickname}}</div>
									<div style="color:#000;">用户名:{{scope.row.username}}</div>
								</div>

							</div>
						</template>
					</el-table-column>

					<el-table-column label="手机号" prop="mobile" align="center" >
						<template slot-scope="scope">
							<div>{{scope.row.mobile}}</div>
						</template>
					</el-table-column>






					<el-table-column label="姓名"  align="center">
						<template slot-scope="scope">
							<div>
								{{scope.row.real_name}}
							</div>
						</template>
					</el-table-column>

					<el-table-column label="证件号"  align="center">
						<template slot-scope="scope">
							<div>
								{{scope.row.id_no}}
							</div>
						</template>
					</el-table-column>

					<el-table-column label="认证时间"  align="center">
						<template slot-scope="scope">
							<div>
								{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
							</div>
						</template>
					</el-table-column>

				</el-table>
			</template>

			<!-- 分页 -->
			<el-row type="flex" class="page" justify="end">
				<el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount" v-if="user_list"></el-pagination>
			</el-row>
		</div>
	</el-card>
</div>
<script>
	const app = new Vue({
		el: '#app',
		data() {
		return {
			searchData: {
				user_id: '',
				user_mobile: '',
				user_name: '',
				status: '',
				data: [],
			},
			user_list: [],
			pageCount: 0,
			page: 1,
			currentPage: null,
			listLoading: false,
			btnLoading: false,
			checked: false,
			type: '',
			sort: '',
            export_list: {},
            export_url: 'real-auth/user/index',
        };
	},
	methods: {
		navUserDetail(id){
			this.$navigate({
				r: 'mall/user/user-detail',
				id: id
			})
		},

		handleSelectionChange(val) {
			this.select_order = val
		},
		// 全选
		allSelect() {
			if (this.checked) {
				this.goods_list.forEach(function(item, index) {
					if (!item.storage) {
						item.is_select = true
					}
				})
			} else {
				this.goods_list.forEach(function(item, index) {
					item.is_select = false
				})
			}
		},
		//搜索
		onSubmit() {
			this.page = 1
			this.getOrderList()
		},
		pagination(currentPage) {
			this.page = currentPage
			this.getOrderList()
		},
		getOrderList() {
			this.listLoading = true;
			var param = {
				r: 'real-auth/user/index',
				page: this.page,
				limit: 20
			}
			Object.assign(param, param, this.searchData)
			request({
				params: param,
			}).then(e => {
				if (e.data.code === 0) {
                    this.user_list = e.data.data.list
                    this.pageCount = e.data.data.page_count
                    this.currentPage = e.data.data.pagination.current_page;
                    this.export_list = e.data.data.export_list;
                } else {
				this.$message.error(e.data.msg)
			}
			this.listLoading = false
		}).catch(e => {
			this.listLoading = false
	})
	},
	//重置
	resetForm() {
		this.searchData = {
			user_id: '',
			user_mobile: '',
			user_name: '',
			data: [],
		}
	},
	},
	mounted: function() {
		this.page = getQuery('page') ? getQuery('page') : 1
		this.getOrderList()
	},

	});
</script>
<style>
	.table-body {
		padding: 20px;
		background-color: #fff;
	}

	.input-item {
		display: inline-block;
		width: 150px;
		margin: 0 0 20px;
		margin-right: 10px;
	}

	.input-item .el-input__inner {
		border-right: 1px solid #dcdfe6;
	}

	.input-item .el-input__inner:hover {
		border: 1px solid #dcdfe6;
		border-right: 0;
		outline: 0;
	}

	.input-item .el-input__inner:focus {
		border: 1px solid #dcdfe6;
		border-right: 0;
		outline: 0;
	}

	.input-item .el-input-group__append {
		background-color: #fff;
		border-left: 0;
		width: 10%;
		padding: 0;
	}

	.input-item .el-input-group__append .el-button {
		padding: 0;
	}

	.input-item .el-input-group__append .el-button {
		margin: 0;
	}

	.select {
		float: left;
		width: 100px;
		margin-right: 10px;
	}


	.el-table th>.cell {
		color: #333;
		font-weight: bold;
		font-size: 14px;
	}

	.el-table__footer-wrapper,
	.el-table__header-wrapper {
		border-bottom: 1.4px solid #D6D6D6;
	}

	.search-sort {
		display: inline-block;
		margin: 0px 10px;
		cursor: pointer;
		color: rgb(51, 51, 51);
	}

	.caret-wrapper {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		height: 25px;
		width: 11px;
		vertical-align: middle;
		cursor: pointer;
		overflow: initial;
		position: relative;
	}

	.caret-top {
		border: 5px solid transparent;
		margin: 1px 0;
		border-bottom-color: rgb(51, 51, 51);

	}

	.caret-bottom {
		border: 5px solid transparent;
		margin: 1px 0;
		border-top-color: rgb(51, 51, 51);

	}

	.active {
		border-top-color: rgb(41, 186, 156);
	}

	.ellipsis {
		font-size: .14rem;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goods-wrapper {
		border: 2px solid #CCCCCC;
		display: inline-block
	}

	.goods-select {
		border: 2px solid #bb730c;
	}

	.goods-price {
		text-align: center;
	}

	.goods-price .number {
		color: red;
		font-weight: 600;
		font-size: .18rem;
	}

	.goods-price .title {
		padding: 5px 0;
		color: #999;
	;
		font-size: .1rem;
		font-weight: 600;
	}

	.bottom-price .title {
		padding: 5px 0;
		color: #8b8888;
	;
		font-size: .1rem;
	}

	.bottom-price .number {
		color: #ff5100;
		font-size: .1rem;
	}

	.goods-action {
		margin-top: 0.8rem;
	}

	.goods-action .title {
		color: #0634aa;
	}

	.bottom-active {
		border-bottom-color: rgb(186, 41, 92);
	}

	.top-active {
		border-top-color: rgb(186, 41, 92);
	}

	.price {
		white-space: nowrap;
	}

	.goods-image {
		display: flex;
		justify-content: center;
	}

	.page {
		padding: 10px 0;
	}

	.table-info-img-text {
		justify-content: center;
	}

	.user_img{
		position: relative;
		margin-right: 8px;
	}
	.default-avatar{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 8px;
	}
	.uer-nickname {
		flex: 1;
	}
</style>