yizhizan-manager/src/views/recommend/recommend.vue

<template>
	<div>
		<!-- 搜索筛选区域 -->
		<div style="margin:5px;display: inline-block;">
			<span>手机号:</span>
			<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入手机号"
				v-model="phone"></el-input>
		</div>&emsp;&emsp;
		<div style="margin:5px;display: inline-block;">
			<span>昵称:</span>
			<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入昵称"
				v-model="campus"></el-input>
		</div>&emsp;&emsp;
		<div style="margin:5px;display: inline-block;">
			<span>开始时间：</span>
			<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
				type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
			</el-date-picker>&nbsp;&nbsp;&nbsp;
		</div>
		<div style="margin:5px;display: inline-block;">
			<span>截止时间：</span>
			<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right" type="date"
				format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间">
			</el-date-picker>
		</div>
		<div style="display: inline-block;">
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="warning" icon="document" :disabled="!isAuth('user:daochu')" @click="exportBtn">导出Excel
			</el-button>
		</div>
		
		<!-- 表格区域 -->
		<el-table v-loading="tableDataLoading" :data="tableData.list">
			<el-table-column prop="userId" label="编号" width="150" fixed="left"></el-table-column>
			<el-table-column fixed prop="userName" label="昵称" width="200">
				<template slot-scope="scope"> 
					<span style="color: #f56c6c;" v-if="!isAuth('userList:phone') && scope.row.userName1">{{ scope.row.userName1 ? scope.row.userName1 : '未绑定' }}</span>
					<span style="color: #f56c6c;" v-else>{{ scope.row.userName ? scope.row.userName : '未绑定' }}</span>
				</template>
			</el-table-column>
			<el-table-column label="图像">
				<template slot-scope="scope">
					<img v-if="scope.row.avatar==null" src="~@/assets/img/avatar.png" alt="" width="40"
						height="40">
					<img v-else :src="scope.row.avatar" alt="" width="40" height="40">
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机号" >
				<template slot-scope="scope">
					<span v-if="isAuth('userList:phone')">
						{{ scope.row.phone ? scope.row.phone : '未绑定' }}
					</span>
					<span v-else>
						{{ scope.row.phone1 ? scope.row.phone1 : '-' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="invitationCode" label="邀请码" width="150">
				<template slot-scope="scope">
					<span style="color: #4f9dec;cursor: pointer;"
						@click="onChangeShow(scope.row.invitationCode,scope.row.userId,scope.row.userName)">{{ scope.row.invitationCode }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40, 50]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
			</el-pagination>
		</div>

		<!-- 邀请人员弹窗 -->
		<!-- 邀请人员弹窗 -->
		<el-dialog title="邀请人员" :visible.sync="isShow">
			<el-table :data="dataSource" >
				<el-table-column property="userName" label="姓名"></el-table-column>
				
				<!-- 新增：电话列 -->
				<el-table-column property="phone" label="电话"></el-table-column>
				
				<el-table-column property="createTime" label="邀请时间"></el-table-column>
				
				<!-- 新增：状态列（带颜色）-->
				<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag
					:type="scope.row.status === 1 ? 'success' : 'info'"
					>
					{{ scope.row.status === 1 ? '已达标' : '已注册' }}
					</el-tag>
				</template>
				</el-table-column>
			</el-table>
			
			<el-pagination
				style="margin-top:15px;text-align:right"
				small
				background
				@current-change="onChangeDataSourcePage"
				layout="prev, pager, next"
				:current-page="dataParams.page"
				:page-size="dataParams.limit"
				:total="dataParams.total">
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				phone: '',
				campus: '',
				tableDataLoading: true,
				tableData: [],
				startTime: '',
				endTime: '',
				
				// 邀请人员相关
				isShow: false,
				dataSource: [],
				dataParams: {
					page: 1,
					total: 0,
					limit: 10,
				},
				invitationCode: '',
				invitationUserId: '',
				userName: '',
				status:0
			}
		},
		methods: {
			// 显示邀请人员
			onChangeShow(code, id, userName) {
				this.isShow = true
				this.invitationCode = code
				this.invitationUserId = id
				this.userName = userName
				this.getDataSource()
			},
			getDataSource(page = 1) {
				this.$http({
					url: this.$http.adornUrl(`user/selectUsersByInvitationCode?page=${page}&limit=${this.dataParams.limit}&invitationCode=${this.invitationCode}`),
					method: 'get'
				}).then((res) => {
					this.dataSource = res.data.data.list
					this.dataParams = {
						page: res.data.data.currPage,
						limit: res.data.data.pageSize,
						total: res.data.data.totalCount,
					}
				})
			},
			onChangeDataSourcePage(page) {
				this.getDataSource(page)
			},
			
			// 分页
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},
			
			// 查询
			select() {
				this.page = 1
				this.dataSelect()
			},
			
			// 重置
			cleans() {
				this.page = 1
				this.campus = ''
				this.phone = ''
				this.startTime = ''
				this.endTime = ''
				this.dataSelect()
			},
			
			// 获取数据列表（默认企业总用户）
			dataSelect() {
				if(this.startTime!=""&&this.startTime !==null){
					if (this.endTime == ''||this.endTime ==null) {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请选择截止时间',
							type: 'warning'
						});
						return
					}
				}
				if(this.endTime!=""&&this.endTime !==null){
					if (this.startTime == ''||this.startTime ==null) {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: '请选择开始时间',
							type: 'warning'
						});
						return
					}
				}
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('user/selectUserList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'phone': this.phone,
						'userName': this.campus,
						// 'userType': 2,
						// 'isCompanyVip': '',
						'startTime': this.startTime,
						'endTime': this.endTime,
						'isRecommender':1
					})
				}).then(({data}) => {
					this.tableDataLoading = false
					if(data.data&&data.data.list.length>0){
						for(var i in data.data.list){
							var pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
							var phone1 = data.data.list[i].phone
							var userName1 = data.data.list[i].userName
							if(pattern.test(phone1)){
								var one = phone1.slice(0, 3)
								var two = phone1.slice(7, 11)
								data.data.list[i].phone1 = one+'****'+two
							}
							if(pattern.test(userName1)){
								var one = userName1.slice(0, 3)
								var two = userName1.slice(7, 11)
								data.data.list[i].userName1 = one+'****'+two
							}
						}
					}
					let returnData = data.data
					this.tableData = returnData
				})
			},
			
			// 导出
			exportBtn() {
				 var endTime=this.endTime
				 if(this.endTime!=''){
				 	endTime=this.endTime+" 23:59:59"
				 }
				this.$http({
					url: this.$http.adornUrl('user/exportExcelUser'),
					method: 'get',
					responseType: 'blob',
					params: this.$http.adornParams({
						'phone': this.phone,
						'userName': this.campus,
						// 'userType': 2,
						'startTime': this.startTime,
						'endTime': this.endTime,
					})
				}).then(({data}) => {
					let blob = new Blob([data], {
						type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
					})
					if (window.navigator.msSaveOrOpenBlob) {
						navigator.msSaveBlob(blob)
					} else {
						let url = window.URL.createObjectURL(blob)
						let elink = document.createElement('a')
						elink.download = '推荐官列表.xlsx'
						elink.style.display = 'none'
						elink.href = url
						document.body.appendChild(elink)
						elink.click();
						document.body.removeChild(elink)
					}
				})
			},
		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

<style scoped="scoped">
	.el-button+.el-button {
		margin-left: 0 !important;
		margin-top: 5px !important;
	}
</style>