You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
7.0 KiB
255 lines
7.0 KiB
<!-- -->
|
|
<template>
|
|
<div class="userStyle">
|
|
<!-- 搜索 -->
|
|
<div class="topSearch">
|
|
<div class="formSearch">
|
|
<el-form :inline="true" :model="formInline">
|
|
<el-form-item label="关键词">
|
|
<el-input v-model="formInline.search" maxlength="20" clearable placeholder="请输入userid/openid/昵称/手机号" style="width: 300px;" class="filter-item" @keyup.enter.native="toQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="formInline.state" clearable placeholder="请选择" class="filter-item">
|
|
<el-option label="有效" :value="1" />
|
|
<el-option label="无效" :value="0" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain @click="search">查询</el-button>
|
|
<el-button type="info" plain @click="clear">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="rightBTn">
|
|
<el-button type="primary" @click="add">新增黑名单</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div class="tableBox">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
border
|
|
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="buyerUserId" label="userid" />
|
|
<el-table-column prop="openId" label="openid" />
|
|
<el-table-column prop="name" label="昵称" />
|
|
<el-table-column prop="phone" label="手机号" />
|
|
<el-table-column prop="createTime" label="创建时间" >
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.createTime }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="更新时间" >
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.updateTime }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发布状态" align="center">
|
|
<template slot-scope="scope">
|
|
<div @click="toggle(scope.row.id,scope.row.state)">
|
|
<el-tag v-if="scope.row.state" style="cursor: pointer" :type="''">有效</el-tag>
|
|
<el-tag v-else style="cursor: pointer" :type=" 'info' ">失效</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" show-overflow-tooltip width="300">
|
|
<template slot-scope="scope">
|
|
<div class="btnList">
|
|
<el-button
|
|
v-if="scope.row.state"
|
|
size="mini"
|
|
type="primary"
|
|
@click="toggle(scope.row.id,scope.row.state)"
|
|
>
|
|
点击无效
|
|
</el-button>
|
|
<el-button
|
|
v-else
|
|
size="mini"
|
|
type="primary"
|
|
@click="toggle(scope.row.id,scope.row.state)"
|
|
>
|
|
点击生效
|
|
</el-button>
|
|
<el-button slot="reference" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="fenye">
|
|
<el-pagination
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="10"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ad-form ref="adForm" @reset="getAll" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserBlackList,
|
|
delBlack,
|
|
updateBlack
|
|
} from '@/api/risk'
|
|
|
|
import AdForm from './form'
|
|
export default {
|
|
components: { AdForm },
|
|
data () {
|
|
// 这里存放数据
|
|
return {
|
|
formInline: {
|
|
page: '1', // 当前页
|
|
pageSize: '10' // 每页记录数
|
|
},
|
|
total: 1,
|
|
tableData: [],
|
|
currentPage: 1
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getAll()
|
|
},
|
|
// 方法集合
|
|
methods: {
|
|
// 初始化查询列表数据
|
|
async getAll () {
|
|
const formInline = this.formInline
|
|
const res = await getUserBlackList(formInline)
|
|
this.tableData = res.data.list
|
|
this.total = res.data.total
|
|
},
|
|
// 页码每页页数修改回调
|
|
handleSizeChange (val) {
|
|
this.formInline.pageSize = val
|
|
this.getAll(this.formInline)
|
|
},
|
|
// 页码当前页修改回调
|
|
handleCurrentChange (val) {
|
|
this.formInline.page = val
|
|
this.getAll()
|
|
},
|
|
// 查询
|
|
search () {
|
|
this.total = 0
|
|
this.formInline.page = 1
|
|
this.getAll()
|
|
},
|
|
// 清除
|
|
clear () {
|
|
this.formInline = {
|
|
search: '', // 搜索字段
|
|
state: '', // 是否启用 1-是 0-否
|
|
page: '1', // 当前页
|
|
pageSize: '10' // 每页记录数
|
|
}
|
|
this.getAll()
|
|
},
|
|
// 新增
|
|
add () {
|
|
this.$refs.adForm.show()
|
|
},
|
|
// 编辑
|
|
edit (row) {
|
|
this.$refs.adForm.show(row)
|
|
},
|
|
// 删除
|
|
async del (id) {
|
|
this.$confirm('是否确认删除该内容？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
delBlack({ id }).then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
this.getAll()
|
|
})
|
|
})
|
|
.catch(() => {
|
|
return false
|
|
})
|
|
},
|
|
toggle (id, state) {
|
|
this.$confirm(`${state ? '确定让选择项失效？' : '确定让选择项生效？'}`, '提示', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '我再想想',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
updateBlack({
|
|
id,
|
|
state: state ? 0 : 1
|
|
}).then(({ data }) => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '操作成功!'
|
|
})
|
|
this.getAll()
|
|
})
|
|
})
|
|
.catch(() => { })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
//@import url(); 引入公共css类
|
|
@import url("../../../styles/elDialog.scss");
|
|
.userStyle {
|
|
background: #FFFFFF;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
.topSearch {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
//align-items: center;
|
|
.formSearch,
|
|
.rightBTn {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.btnList .el-popover__reference{
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
display: block;
|
|
}
|
|
</style>
|