fangxh2013
/
pangu-user-platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 会员管理手机号列添加眼睛按钮切换显示 

点击眼睛图标可切换手机号的脱敏/完整显示
This commit is contained in:
神码-方晓辉 2026-02-02 20:33:57 +08:00
parent cca0902d28
commit 26efdc42fc
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/ruoyi-ui/src/views/business/member/index.vue
View File

@ -49,9 +49,16 @@
<el-table v-loading="loading" :data="tableData" border stripe :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%"> <el-table v-loading="loading" :data="tableData" border stripe :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%">
<el-table-column prop="memberCode" label="会员编号" width="160" /> <el-table-column prop="memberCode" label="会员编号" width="160" />
<el-table-column prop="phone" label="手机号" width="130"> <el-table-column prop="phone" label="手机号" width="150">
<template #default="{ row }"> <template #default="{ row }">
{{ maskPhone(row.phone) }} <span>{{ phoneVisibleMap[row.memberId] ? row.phone : maskPhone(row.phone) }}</span>
<el-button
type="primary"
link
:icon="phoneVisibleMap[row.memberId] ? Hide : View"
style="margin-left: 4px"
@click="togglePhoneVisible(row.memberId)"
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="nickname" label="昵称" min-width="100" show-overflow-tooltip /> <el-table-column prop="nickname" label="昵称" min-width="100" show-overflow-tooltip />
@ -129,7 +136,7 @@
* 会员管理页面 * 会员管理页面
* @author pangu * @author pangu
*/ */
import { Delete, Edit, Key, Plus, Refresh, Search } from '@element-plus/icons-vue' import { Delete, Edit, Hide, Key, Plus, Refresh, Search, View } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import request from '@/utils/request' import request from '@/utils/request'
@ -153,6 +160,14 @@ const queryParams = ref({
const memberDialogRef = ref() const memberDialogRef = ref()
const resetPwdDialogRef = ref() const resetPwdDialogRef = ref()
// 手机号显示状态（按会员ID存储）
const phoneVisibleMap = ref({})
// 切换手机号显示/隐藏
const togglePhoneVisible = (memberId) => {
phoneVisibleMap.value[memberId] = !phoneVisibleMap.value[memberId]
}
// 手机号脱敏 // 手机号脱敏
const maskPhone = (phone) => { const maskPhone = (phone) => {
if (!phone || phone.length !== 11) return phone if (!phone || phone.length !== 11) return phone