dy-hu
7 months ago
9 changed files with 2615 additions and 0 deletions
-
73src/api/comment.js
-
115src/api/customerMage.js
-
83src/api/member.js
-
313src/views/member/equity/index.vue
-
401src/views/member/levelList/index.vue
-
594src/views/member/memberList/details.vue
-
433src/views/member/memberList/index.vue
-
281src/views/member/tips/index.vue
-
322src/views/member/tips/tipsForm.vue
@ -0,0 +1,73 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 评论
|
|||
// 敏感词查询
|
|||
export function sensitiveGetAll(data) { |
|||
return request({ |
|||
url: '/sensitive/get', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 添加敏感词设置
|
|||
export function sensitiveAdd(data) { |
|||
return request({ |
|||
url: '/sensitive/save', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 添加敏感词设置
|
|||
export function sensitiveUpdate(data) { |
|||
return request({ |
|||
url: '/sensitive/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 评论管理
|
|||
// 评论管理查询
|
|||
export function commentSysGetall(data) { |
|||
return request({ |
|||
url: '/comment/getAll', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 评论详情查询
|
|||
export function commentSysGetById(data) { |
|||
return request({ |
|||
url: '/comment/getById', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 修改评论
|
|||
export function commentSysUpdate(data) { |
|||
return request({ |
|||
url: '/comment/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 删除评论
|
|||
export function commentSysDelete(data) { |
|||
return request({ |
|||
url: '/comment/delete', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 允许展示评论
|
|||
export function commentAllow(data) { |
|||
return request({ |
|||
url: '/comment/allow', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,115 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// ******客户管理******
|
|||
// 客户管理查询
|
|||
export function customerMageGetAll (data) { |
|||
return request({ |
|||
url: '/businessBuyer/getAll', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 标签查询
|
|||
export function getLabels (data) { |
|||
return request({ |
|||
url: '/businessBuyer/getLabels', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 贴标签
|
|||
export function customerSaveUserLabel (data) { |
|||
return request({ |
|||
url: '/businessBuyer/saveUserLabel', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 加入或取消黑名单
|
|||
export function customerBlacklist (data) { |
|||
return request({ |
|||
url: '/businessBuyer/blacklist', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 更新积分
|
|||
export function updateBuyerCredit (data) { |
|||
return request({ |
|||
url: '/businessBuyer/updateCredit', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 更新积分
|
|||
export function exportBuyerUser (data) { |
|||
return request({ |
|||
url: '/businessBuyer/export', |
|||
method: 'post', |
|||
data, |
|||
responseType: 'blob' |
|||
}) |
|||
} |
|||
|
|||
// 客户详情查询
|
|||
export function customerMageGetById (data) { |
|||
return request({ |
|||
url: '/businessBuyer/getById', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 导出标签
|
|||
export const excel_platform_label = (data = {}) => { |
|||
return request({ |
|||
url: 'label/excel_platform_label', |
|||
method: 'post', |
|||
data, |
|||
responseType: 'blob' |
|||
}) |
|||
} |
|||
|
|||
// ******标签管理******
|
|||
// 标签管理查询
|
|||
export function tipsGetAll (data) { |
|||
return request({ |
|||
url: '/label/getAll', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 添加标签
|
|||
export function tipsAdd (data) { |
|||
return request({ |
|||
url: '/label/save', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 修改标签
|
|||
export function tipsUpdate (data) { |
|||
return request({ |
|||
url: '/label/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 删除标签
|
|||
export function tipsDelete (data) { |
|||
return request({ |
|||
url: '/label/delete', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 标签编辑查询
|
|||
export function tipsGetById (data) { |
|||
return request({ |
|||
url: '/label/getById', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,83 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// ******会员权益******
|
|||
// 添加会员权益
|
|||
export function addMembership(data) { |
|||
return request({ |
|||
url: '/membership/save', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 会员权益列表
|
|||
export function getMembership(data) { |
|||
return request({ |
|||
url: '/membership/getAll', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 编辑会员权益
|
|||
export function changeMembership(data) { |
|||
return request({ |
|||
url: '/membership/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 会员权益详情查询
|
|||
export function getMembershipInfo(data) { |
|||
return request({ |
|||
url: '/membership/getById', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 删除会员权益
|
|||
export function delMembership(data) { |
|||
return request({ |
|||
url: '/membership/delete', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 会员等级列表查询
|
|||
export function getMemberlevel(data) { |
|||
return request({ |
|||
url: '/memberlevel/getAll', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 编辑会员等级
|
|||
export function updateLevel(data) { |
|||
return request({ |
|||
url: '/memberlevel/update', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 会员等级详情查询
|
|||
export function getLevelInfo(data) { |
|||
return request({ |
|||
url: '/memberlevel/getById', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 会员等级详情查询
|
|||
export function addLevel(data) { |
|||
return request({ |
|||
url: '/memberlevel/save', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
// 删除会员等级
|
|||
export function deleteLevel(data) { |
|||
return request({ |
|||
url: '/memberlevel/delete', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,313 @@ |
|||
<!-- --> |
|||
<template> |
|||
<div class="userStyle"> |
|||
<!-- 搜索 --> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formInline"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="add">新增权益</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</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="memberName" label="权益名称" /> |
|||
<el-table-column label="权益图标" width="180" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-image |
|||
style="width: 80px; height: 80px" |
|||
:src="scope.row.memberIcon" |
|||
fit="contain" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="memberReason" label="权益说明" /> |
|||
<el-table-column label="操作" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<div class="btnList"> |
|||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|||
<el-button type="text" @click="del(scope.row)">删除</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> |
|||
|
|||
<!-- *************对话框开始************* --> |
|||
<!-- 新增权益 --> |
|||
<el-dialog |
|||
:title="userState ? '新增权益' : '修改权益'" |
|||
:visible.sync="addFormDialog" |
|||
width="30%" |
|||
center |
|||
:close-on-click-modal="false" |
|||
> |
|||
<!-- 新增权益 --> |
|||
<div> |
|||
<el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="equityRules"> |
|||
<el-form-item label="权益名称" prop="memberName"> |
|||
<el-input v-model="addForm.memberName" maxlength="20" placeholder="请输入角色名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="权益图标"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="action" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
> |
|||
<img v-if="addForm.memberIcon" :src="addForm.memberIcon" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item label="权益说明" prop="memberReason"> |
|||
<el-input v-model="addForm.memberReason" maxlength="200" type="textarea" placeholder="请输入角色描述" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="addFormDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） |
|||
// 例如：import 《组件名称》 from '《组件路径》'; |
|||
import { |
|||
addMembership, |
|||
getMembership, |
|||
getMembershipInfo, |
|||
delMembership, changeMembership |
|||
} from '@/api/member' |
|||
import { uploadUrl } from '@/utils/request' |
|||
export default { |
|||
// import引入的组件需要注入到对象中才能使用 |
|||
components: {}, |
|||
data() { |
|||
// 这里存放数据 |
|||
return { |
|||
formInline: { |
|||
page: '1', // 当前页 |
|||
pageSize: '10' // 每页记录数 |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
currentPage: 1, |
|||
userState: 1, |
|||
isChange: false, |
|||
checkStrictly: true, |
|||
action: uploadUrl, |
|||
addForm: { |
|||
memberId: null, |
|||
memberIcon: '', // 权益图标 |
|||
memberName: '', // 权益名称 |
|||
memberReason: '' // 权益描述 |
|||
}, |
|||
addFormDialog: false, |
|||
equityRules: { |
|||
memberName: [ |
|||
{ required: true, message: '请输入权益名称', trigger: 'blur' } |
|||
], |
|||
memberReason: [ |
|||
{ required: true, message: '请输权益描述', trigger: 'blur' } |
|||
] |
|||
}, |
|||
roleId: null, |
|||
imageUrl: '' |
|||
} |
|||
}, |
|||
// 监听属性 类似于data概念 |
|||
computed: {}, |
|||
// 监控data中的数据变化 |
|||
watch: {}, |
|||
// 生命周期 - 创建完成（可以访问当前this实例） |
|||
created() {}, |
|||
// 生命周期 - 挂载完成（可以访问DOM元素） |
|||
mounted() { |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 方法集合 |
|||
methods: { |
|||
handleAvatarSuccess(response) { |
|||
const { url } = response.data |
|||
this.addForm.memberIcon = url |
|||
console.log(this.addForm.memberIcon, 'urls') |
|||
this.$forceUpdate() |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.formInline.pageSize = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.formInline.page = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
removeTag(index) { |
|||
console.log(index) |
|||
}, |
|||
tagChange(index) { |
|||
this.$forceUpdate() |
|||
console.log(index) |
|||
}, |
|||
// 查询 |
|||
search() { |
|||
this.total = 1 |
|||
this.formInline.page = 1 |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 清除 |
|||
clear() { |
|||
this.formInline = { |
|||
search: '', // 搜索字段 |
|||
state: '', // 是否启用 1-是 0-否 |
|||
page: '1', // 当前页 |
|||
pageSize: '10' // 每页记录数 |
|||
} |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 新增角色 |
|||
add() { |
|||
this.userState = 1 |
|||
this.addFormDialog = true |
|||
this.isChange = true |
|||
this.addForm = { |
|||
memberId: null, |
|||
memberIcon: '', // 权益图标 |
|||
memberName: '', // 权益名称 |
|||
memberReason: '' // 权益描述 |
|||
} |
|||
}, |
|||
// 确认新增角色 |
|||
addForm_enter(ruleForm) { |
|||
this.$refs[ruleForm].validate(valid => { |
|||
if (valid) { |
|||
// 修改 |
|||
if (!this.isChange) { |
|||
changeMembership(this.addForm).then(res => { |
|||
console.log(res) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
this.addFormDialog = false |
|||
}) |
|||
} else { |
|||
// 新增 |
|||
addMembership(this.addForm).then(res => { |
|||
console.log(res) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '新增成功', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
this.addFormDialog = false |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('error submit!!') |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
// 编辑角色 |
|||
edit(row) { |
|||
this.addFormDialog = true |
|||
this.isChange = false |
|||
console.log(row) |
|||
getMembershipInfo({ memberId: row.memberId }).then(res => { |
|||
this.addForm = res.data |
|||
console.log(this.addForm, '详情') |
|||
}) |
|||
}, |
|||
// 删除权益 |
|||
async del(row) { |
|||
this.$confirm('是否继续删除此权益?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
delMembership({ memberId: row.memberId }).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '删除成功!' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
return false |
|||
}) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getAll(formInline) { |
|||
const res = await getMembership(formInline) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
//@import url(); 引入公共css类 |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.userStyle { |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
padding: 20px; |
|||
} |
|||
</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> |
|||
@ -0,0 +1,401 @@ |
|||
<!-- --> |
|||
<template> |
|||
<div class="userStyle"> |
|||
<!-- 搜索 --> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formInline"> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="add">新增会员等级</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</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="memberLevelName" label="会员等级" /> |
|||
<el-table-column prop="growth" label="成长值" /> |
|||
<el-table-column label="等级图标" width="140" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-image |
|||
style="width: 80px; height: 80px" |
|||
:src="scope.row.memberLevelIcon" |
|||
fit="contain" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="等级背景" width="140" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-image |
|||
style="width: 80px; height: 80px" |
|||
:src="scope.row.memberLevelBackground" |
|||
fit="contain" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="memberLevelReason" label="等级说明" /> |
|||
<el-table-column prop="memberIds" label="等级权益" /> |
|||
<el-table-column label="操作" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<div class="btnList"> |
|||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|||
<el-button type="text" @click="del(scope.row)">删除</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> |
|||
|
|||
<!-- *************对话框开始************* --> |
|||
<!-- 新增权益 --> |
|||
<el-dialog |
|||
:title="userState ? '新增会员等级' : '修改会员等级'" |
|||
:visible.sync="addFormDialog" |
|||
width="30%" |
|||
center |
|||
:close-on-click-modal="false" |
|||
> |
|||
<!-- 新增权益 --> |
|||
<div> |
|||
<el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="levelRules"> |
|||
<el-form-item label="等级名称" prop="memberLevelName"> |
|||
<el-input v-model="addForm.memberLevelName" maxlength="20" placeholder="请输入会员等级名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="成长值" prop="growth"> |
|||
<el-input v-model="addForm.growth" maxlength="9" placeholder="请输入会员成长值" oninput="value=value.replace(/[^\d]/g,'')" /> |
|||
</el-form-item> |
|||
<el-form-item label="等级图标" prop="memberLevelIcon"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="action" |
|||
:show-file-list="false" |
|||
:on-success="handleIconSuccess" |
|||
> |
|||
<img v-if="addForm.memberLevelIcon" :src="addForm.memberLevelIcon" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
<p class="formInfo">建议尺寸：100*100像素，jpg、png图片类型</p> |
|||
</el-form-item> |
|||
<el-form-item label="等级背景" prop="memberLevelBackground"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="action" |
|||
:show-file-list="false" |
|||
:on-success="handleBgSuccess" |
|||
> |
|||
<img v-if="addForm.memberLevelBackground" :src="addForm.memberLevelBackground" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
<p class="formInfo">建议尺寸：100*100像素，jpg、png图片类型</p> |
|||
</el-form-item> |
|||
<el-form-item class="inputWide" label="等级权益" prop="ids"> |
|||
<el-select |
|||
v-model="addForm.ids" |
|||
multiple |
|||
collapse-tags |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in tagList" |
|||
:key="item.memberId" |
|||
:label="item.memberName" |
|||
:value="item.memberId" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="等级说明" prop="memberLevelReason"> |
|||
<el-input v-model="addForm.memberLevelReason" maxlength="200" type="textarea" placeholder="请输入等级说明" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="addFormDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） |
|||
// 例如：import 《组件名称》 from '《组件路径》'; |
|||
import { |
|||
getMembership, |
|||
getMemberlevel, |
|||
getLevelInfo, |
|||
updateLevel, |
|||
addLevel, |
|||
deleteLevel |
|||
} from '@/api/member' |
|||
import { uploadUrl } from '@/utils/request' |
|||
export default { |
|||
// import引入的组件需要注入到对象中才能使用 |
|||
components: {}, |
|||
data() { |
|||
// 这里存放数据 |
|||
return { |
|||
formInline: { |
|||
page: '1', // 当前页 |
|||
pageSize: '10' // 每页记录数 |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
multipleSelection: [], |
|||
currentPage: 1, |
|||
userState: 1, |
|||
checkStrictly: true, |
|||
action: uploadUrl, |
|||
addForm: { |
|||
growth: null, |
|||
ids: [], |
|||
memberLevelBackground: '', |
|||
memberLevelIcon: '', |
|||
memberLevelName: '', |
|||
memberLevelReason: '' |
|||
}, |
|||
equity: { |
|||
page: '1', // 当前页 |
|||
pageSize: '1000' // 每页记录数 |
|||
}, |
|||
tagList: [], |
|||
addFormDialog: false, |
|||
levelRules: { |
|||
memberLevelName: [ |
|||
{ required: true, message: '请输入权益名称', trigger: 'blur' } |
|||
], |
|||
memberLevelReason: [ |
|||
{ required: true, message: '请输等级说明', trigger: 'blur' } |
|||
], |
|||
growth: [ |
|||
{ required: true, message: '请输入会员成长值', trigger: 'blur' } |
|||
], |
|||
memberLevelIcon: [ |
|||
{ required: true } |
|||
], |
|||
memberLevelBackground: [ |
|||
{ required: true } |
|||
], |
|||
ids: [ |
|||
{ required: true } |
|||
] |
|||
}, |
|||
roleId: null, |
|||
imageUrl: '' |
|||
} |
|||
}, |
|||
// 监听属性 类似于data概念 |
|||
computed: {}, |
|||
// 监控data中的数据变化 |
|||
watch: {}, |
|||
// 生命周期 - 创建完成（可以访问当前this实例） |
|||
created() {}, |
|||
// 生命周期 - 挂载完成（可以访问DOM元素） |
|||
mounted() { |
|||
this.getAll(this.formInline) |
|||
this.getTagList(this.equity) |
|||
}, |
|||
// 方法集合 |
|||
methods: { |
|||
// 获取权益 |
|||
async getTagList(equity) { |
|||
const res = await getMembership(equity) |
|||
if (res.code === '') { |
|||
this.tagList = res.data.list |
|||
console.log(this.tagList, 'taglist') |
|||
} else { |
|||
this.$message({ |
|||
message: res.message, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}, |
|||
handleIconSuccess(response) { |
|||
const { url } = response.data |
|||
this.addForm.memberLevelIcon = url |
|||
this.$forceUpdate() |
|||
}, |
|||
handleBgSuccess(response) { |
|||
const { url } = response.data |
|||
this.addForm.memberLevelBackground = url |
|||
this.$forceUpdate() |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.formInline.pageSize = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.formInline.page = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
removeTag(index) { |
|||
console.log(index) |
|||
}, |
|||
tagChange(index) { |
|||
this.$forceUpdate() |
|||
console.log(index) |
|||
}, |
|||
// 查询 |
|||
search() { |
|||
this.total = 1 |
|||
this.formInline.page = 1 |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 清除 |
|||
clear() { |
|||
this.formInline = { |
|||
search: '', // 搜索字段 |
|||
state: '', // 是否启用 1-是 0-否 |
|||
page: '1', // 当前页 |
|||
pageSize: '10' // 每页记录数 |
|||
} |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 新增会员等级 |
|||
add() { |
|||
this.userState = 1 |
|||
this.addFormDialog = true |
|||
this.addForm = { |
|||
growth: null, |
|||
ids: [], |
|||
memberLevelBackground: '', |
|||
memberLevelIcon: '', |
|||
memberLevelName: '', |
|||
memberLevelReason: '' |
|||
} |
|||
}, |
|||
// 确认新增会员 |
|||
addForm_enter(ruleForm) { |
|||
this.$refs[ruleForm].validate(valid => { |
|||
if (valid) { |
|||
// 修改 |
|||
if (this.userState === 2) { |
|||
updateLevel(this.addForm).then(res => { |
|||
console.log(res) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
this.addFormDialog = false |
|||
}) |
|||
} else { |
|||
// 新增 |
|||
this.addForm.growth = parseInt(this.addForm.growth) |
|||
addLevel(this.addForm).then(res => { |
|||
console.log(res) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '新增成功', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
this.addFormDialog = false |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('error submit!!') |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
// 编辑等级信息 |
|||
edit(row) { |
|||
this.addFormDialog = true |
|||
this.userState = 2 |
|||
console.log(row) |
|||
getLevelInfo({ memberLevelId: row.memberLevelId }).then(res => { |
|||
this.addForm = res.data |
|||
delete this.addForm.memberIds |
|||
this.addForm.ids = this.addForm.ids.map(v => parseInt(v)) |
|||
console.log(res.data, '详情') |
|||
}) |
|||
}, |
|||
// 删除该等级 |
|||
async del(row) { |
|||
this.$confirm('是否继续删除此等级?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
.then(() => { |
|||
deleteLevel({ memberLevelId: row.memberLevelId }).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '删除成功!' |
|||
}) |
|||
} |
|||
this.getAll(this.formInline) |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
return false |
|||
}) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getAll(formInline) { |
|||
const res = await getMemberlevel(formInline) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
//@import url(); 引入公共css类 |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.userStyle { |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
padding: 20px; |
|||
} |
|||
.formInfo { |
|||
line-height: 0px; |
|||
color: #999999; |
|||
} |
|||
</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: 100px; |
|||
height: 100px; |
|||
line-height: 100px; |
|||
text-align: center; |
|||
} |
|||
.avatar { |
|||
width: 100px; |
|||
height: 100px; |
|||
display: block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,594 @@ |
|||
<template> |
|||
<el-dialog title="详情" width="80%" :visible.sync="visible" :close-on-click-modal="false" @close="closeModalDetail"> |
|||
<div class="custom_info_page"> |
|||
<div class="base_info"> |
|||
<div class="custom_info"> |
|||
<div class="custom_title">客户信息</div> |
|||
<div class="custom_info_content"> |
|||
|
|||
<div class="info_img"> |
|||
<img :src="userObj.headImage" alt> |
|||
</div> |
|||
<div class="info_item"> |
|||
<ul> |
|||
<li v-for="(item, index) in infoList" :key="index"> |
|||
<p> |
|||
<span>{{ item.name }}: </span> |
|||
<span>{{ item.value }}</span> |
|||
</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="custom_info"> |
|||
<div class="custom_title">消费数据</div> |
|||
<div class="custom_info_content"> |
|||
<div class="info_item"> |
|||
<ul> |
|||
<li> |
|||
<p> |
|||
<span>下 单 数: </span> |
|||
<span>{{ userObj.orders }}</span> |
|||
</p> |
|||
</li> |
|||
<li> |
|||
<p> |
|||
<span>支付成功数: </span> |
|||
<span>{{ userObj.pays }}</span> |
|||
</p> |
|||
</li> |
|||
<li> |
|||
<p> |
|||
<span>售后次数: </span> |
|||
<span>{{ userObj.afters }}</span> |
|||
</p> |
|||
</li> |
|||
<li> |
|||
<p> |
|||
<span>售后单数: </span> |
|||
<span>{{ userObj.afterOrders }}</span> |
|||
</p> |
|||
</li> |
|||
|
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="custom_info"> |
|||
<div class="custom_title">客户标签</div> |
|||
<div class="custom_info_content"> |
|||
<div class="custom_info_content"> |
|||
<div class="info_item"> |
|||
<p v-for="(item, index) in tagList" :key="index">{{ item.tagName }}</p> |
|||
<p @click="addTag" style="color:#183ECD">贴标签</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tab_list"> |
|||
<p v-for="(item, index) in tabList" :key="index" :class="[{ active: componentName === item.componentName }]" |
|||
@click="changeTab(item)">{{ item.tabName }}</p> |
|||
</div> |
|||
|
|||
<div v-if="componentName === 'order'"> |
|||
<el-form :inline="true" :model="userForm" class="demo-form-inline"> |
|||
<el-form-item label="订单编号"> |
|||
<el-input v-model="userForm.orderFormid" maxlength="20" placeholder="请输入订单编号" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" plain @click="searchOrders">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table :data="userObj.orderList" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|||
style="width: 100%"> |
|||
<el-table-column prop="orderFormid" label="订单编号" /> |
|||
<el-table-column prop="shopName" label="店铺名称" /> |
|||
<el-table-column prop="products" label="商品数量"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.products }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="price" label="订单金额(元)" /> |
|||
<el-table-column label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.state === 1">待付款</span> |
|||
<span v-if="scope.row.state === 2">待发货</span> |
|||
<span v-if="scope.row.state === 3">待收货</span> |
|||
<span v-if="scope.row.state === 4">已完成</span> |
|||
<span v-if="scope.row.state === 5">已关闭</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div v-if="componentName === 'comment'"> |
|||
<el-table :data="userObj.comments" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|||
style="width: 100%"> |
|||
<el-table-column prop="shopName" label="店铺名称" /> |
|||
<el-table-column prop="productName" label="商品名称" /> |
|||
<el-table-column prop="comments" label="评论"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" @click="seeComment(scope.row.commentId)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div v-if="componentName === 'addressInfo'"> |
|||
<el-table :data="userObj.receives" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|||
style="width: 100%"> |
|||
<el-table-column prop="receiveName" label="姓名" /> |
|||
<el-table-column prop="receivePhone" label="电话" /> |
|||
<el-table-column prop="receiveAdress" label="地址"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.receiveAdress }}{{ scope.row.address }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- *************对话框开始************* --> |
|||
<!-- 打标签 --> |
|||
<el-dialog title="选择标签" :visible.sync="addFormDialog" width="30%" append-to-body center |
|||
:close-on-click-modal="false"> |
|||
<div> |
|||
<!-- 表单搜索 --> |
|||
<el-form :inline="true" :model="tipsForm" class="demo-form-inline"> |
|||
<el-form-item label="标签名称"> |
|||
<el-input v-model="tipsForm.labelName" maxlength="20" placeholder="请输入标签名称" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="searchTips">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="text" @click="runTips">管理标签</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 多选 --> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox v-for="(item, index) in tipsList" :key="index" class="checkBoxStyle" |
|||
:label="item.buyerLabelId">{{ item.labelName }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="addFormDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="saveTips">确定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- 查看评论弹框 --> |
|||
<el-dialog title="评论详情" :visible.sync="comDialogVisible" :close-on-click-modal="false" :before-close="handleClose" |
|||
width="60%" center :append-to-body="true"> |
|||
<div class="pinStyle"> |
|||
<div class="comment"> |
|||
<div class="com_left">评论：</div> |
|||
<div class="com_right">{{ commentDetails.comment }}</div> |
|||
</div> |
|||
<div v-if="commentDetails.images.length != 0" class="comment_imgList"> |
|||
<div class="img_left">图片：</div> |
|||
<div class="imgList"> |
|||
<el-image v-for="(item, index) in commentDetails.images" :key="index" :src="item" |
|||
:preview-src-list="commentDetails.images" /> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<div v-if="commentDetails.addComment != ''" class="com_left">追评：</div> |
|||
<div class="com_right">{{ commentDetails.addComment }}</div> |
|||
</div> |
|||
<div v-if="commentDetails.addImages.length != 0" class="comment_imgList"> |
|||
<div class="img_left">图片</div> |
|||
<div class="imgList"> |
|||
<el-image v-for="(item, index) in commentDetails.addImages" :key="index" :src="item" |
|||
:preview-src-list="commentDetails.addImages" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button v-if="comState" @click="toShow">允许展示</el-button> |
|||
<el-button v-else @click="noneShow">隐藏</el-button> |
|||
<el-button type="primary" @click="delCom">删除</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="doCancel">取消</el-button> |
|||
<el-button type="primary" @click="doSubmit">确认</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { customerMageGetById, getLabels, customerSaveUserLabel } from '@/api/customerMage' |
|||
import { commentSysGetById, commentSysUpdate, commentSysDelete, commentAllow } from '@/api/comment' |
|||
export default { |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
infoList: [ |
|||
{ name: '用户昵称', value: '', fields: 'name' }, |
|||
{ name: '手 机 号', value: '', fields: 'phone' }, |
|||
{ name: '性 别', value: '', fields: 'sex' }, |
|||
{ name: '注册时间', value: '', fields: 'createTime' }, |
|||
{ name: '生 日', value: '', fields: 'birthday' } |
|||
], |
|||
tagList: [], |
|||
tabList: [ |
|||
{ tabName: 'TA的订单', componentName: 'order' }, |
|||
{ tabName: 'TA的评论', componentName: 'comment' }, |
|||
{ tabName: 'TA的收货地址', componentName: 'addressInfo' } |
|||
], |
|||
componentName: 'order', |
|||
customData: {}, |
|||
dialog: {}, |
|||
user: '', |
|||
userObj: {}, |
|||
addFormDialog: false, |
|||
tipsForm: { |
|||
labelName: '' |
|||
}, |
|||
userForm: { |
|||
orderFormid: '' |
|||
}, |
|||
checkList: [], |
|||
tipsList: [], |
|||
comDialogVisible: false, |
|||
commentDetails: { images: [], addImages: [] }, |
|||
commentId: '', |
|||
comState: 1 // 是否隐藏 1-是 0-否 |
|||
} |
|||
}, |
|||
// created () { |
|||
// this.user = this.$route.params |
|||
// console.log(this.user) |
|||
// this.getUser(this.user) |
|||
// }, |
|||
methods: { |
|||
// 允许展示 |
|||
async toShow() { |
|||
const res = await commentAllow({ |
|||
commentId: this.commentId, |
|||
state: 1 |
|||
}) |
|||
if (res.code === '') { |
|||
this.$message.success('成功') |
|||
this.comDialogVisible = false |
|||
this.comState = 0 |
|||
this.getUser(this.user) |
|||
} |
|||
}, |
|||
// 隐藏 |
|||
async noneShow() { |
|||
const res = await commentSysUpdate({ |
|||
commentId: this.commentId, |
|||
state: 0 |
|||
}) |
|||
if (res.code === '') { |
|||
this.comState = 1 |
|||
this.$message.success('隐藏成功') |
|||
this.comDialogVisible = false |
|||
this.getUser(this.user) |
|||
} |
|||
}, |
|||
// 删除 |
|||
async delCom() { |
|||
const res = await commentSysDelete({ |
|||
commentId: this.commentId |
|||
}) |
|||
if (res.code === '') { |
|||
this.$message.success('删除成功') |
|||
this.comDialogVisible = false |
|||
this.getUser(this.user) |
|||
} |
|||
}, |
|||
// 评论详情 |
|||
async seeComment(commentId) { |
|||
this.comDialogVisible = true |
|||
const res = await commentSysGetById({ commentId: commentId }) |
|||
this.commentId = commentId |
|||
this.commentDetails = res.data |
|||
}, |
|||
handleClose() { |
|||
this.comDialogVisible = false |
|||
}, |
|||
closeModalDetail() { |
|||
this.comState = 1 |
|||
this.componentName = 'order' |
|||
}, |
|||
// 贴标签 |
|||
addTag() { |
|||
this.addFormDialog = true |
|||
this.getSelect({ labelName: this.tipsForm.labelName }) |
|||
}, |
|||
// 查询订单 |
|||
searchOrders() { |
|||
this.user.orderFormid = this.userForm.orderFormid |
|||
this.getUser(this.user) |
|||
}, |
|||
// 查询标签 |
|||
searchTips() { |
|||
console.log(this.tipsForm) |
|||
this.getSelect({ labelName: this.tipsForm.labelName }) |
|||
}, |
|||
// 跳转标签页面 |
|||
runTips() { |
|||
this.$router.push({ |
|||
path: '/member/tips' |
|||
}) |
|||
}, |
|||
// 打标签 |
|||
async saveTips(row) { |
|||
console.log(this.checkList) |
|||
const res = await customerSaveUserLabel({ |
|||
buyerUserId: this.user.buyerUserId, |
|||
buyerLabelIds: this.checkList |
|||
}) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '成功', |
|||
type: 'success' |
|||
}) |
|||
this.checkList = [] |
|||
this.addFormDialog = false |
|||
} |
|||
}, |
|||
changeTab(item) { |
|||
this.componentName = item.componentName |
|||
}, |
|||
// 客户详情 |
|||
async getUser(obj) { |
|||
this.user = obj |
|||
const res = await customerMageGetById({ |
|||
buyerUserId: obj.buyerUserId, |
|||
orderFormid: obj.orderFormid |
|||
}) |
|||
this.userObj = res.data |
|||
this.visible = true |
|||
this.getInfoList(this.userObj) |
|||
}, |
|||
// 获取客户信息 |
|||
getInfoList(ob) { |
|||
this.infoList.map(item => { |
|||
console.log(item) |
|||
item.value = ob[item.fields] || '' |
|||
if (item.fields === 'sex') { |
|||
item.value = item.value === '1' ? '男' : '女' |
|||
} |
|||
}) |
|||
}, |
|||
// 初始化查询所有标签 |
|||
async getSelect(name) { |
|||
const res = await getLabels(name) |
|||
this.tipsList = res.data |
|||
}, |
|||
doCancel() { |
|||
this.visible = false |
|||
}, |
|||
doSubmit() { |
|||
this.visible = false |
|||
this.$emit('reset') |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.pinStyle { |
|||
.comment { |
|||
margin-bottom: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.com_left { |
|||
font-size: 20px; |
|||
color: #333333; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.com_right { |
|||
font-size: 18px; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.comment_imgList { |
|||
display: flex; |
|||
margin-bottom: 20px; |
|||
align-items: flex-start; |
|||
|
|||
.img_left { |
|||
font-size: 20px; |
|||
color: #333333; |
|||
margin-right: 20px; |
|||
width: 60px; |
|||
} |
|||
|
|||
.imgList { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
|
|||
.el-image { |
|||
width: 200px; |
|||
height: 134px; |
|||
border-radius: 4px; |
|||
margin-right: 20px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// .line { |
|||
// width: 890px; |
|||
// height: 1px; |
|||
// background: #e0e5eb; |
|||
// margin: 0 auto; |
|||
// margin-bottom: 33px; |
|||
// } |
|||
// .addComment { |
|||
// font-size: 20px; |
|||
// color: #ff7911; |
|||
// margin-bottom: 20px; |
|||
// } |
|||
} |
|||
|
|||
label { |
|||
font-weight: 400; |
|||
} |
|||
|
|||
// |
|||
|
|||
.custom_info_page { |
|||
background-color: #fff; |
|||
min-height: 500px; |
|||
|
|||
.base_info { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-content: flex-start; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
margin-bottom: 30px; |
|||
|
|||
.custom_info { |
|||
flex: 1; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: flex-start; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
flex-wrap: nowrap; |
|||
|
|||
.custom_title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
padding-left: 10px; |
|||
line-height: 16px; |
|||
margin-bottom: 30px; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
height: 16px; |
|||
width: 4px; |
|||
background-color: #183ECD; |
|||
position: absolute; |
|||
left: 0px; |
|||
display: block; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.custom_info_content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: flex-start; |
|||
|
|||
.info_img { |
|||
height: 105px; |
|||
width: 74px; |
|||
margin-right: 15px; |
|||
|
|||
img { |
|||
width: 74px; |
|||
height: 74px; |
|||
border-radius: 37px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.info_item { |
|||
ul { |
|||
overflow: hidden; |
|||
list-style: none; |
|||
|
|||
li { |
|||
float: left; |
|||
width: 100%; |
|||
|
|||
p { |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #404F64; |
|||
line-height: 24px; |
|||
margin-bottom: 7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.custom_tag { |
|||
width: 33%; |
|||
|
|||
.Tag { |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
p { |
|||
display: inline-block; |
|||
background-color: #d8e1fc; |
|||
font-size: 16px; |
|||
color: #333; |
|||
text-align: center; |
|||
// margin-right: 20px; |
|||
border-radius: 4px; |
|||
padding: 8px 15px; |
|||
|
|||
&:last-child { |
|||
background-color: #fff; |
|||
color: #3a68f2; |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.tab_list { |
|||
overflow: hidden; |
|||
margin-bottom: 20px; |
|||
|
|||
p { |
|||
float: left; |
|||
padding: 0 45px; |
|||
font-size: 14px; |
|||
border: 1px #e0e5eb solid; |
|||
box-sizing: border-box; |
|||
color: #999999; |
|||
height: 36px; |
|||
line-height: 36px; |
|||
|
|||
&:nth-child(-n + 2) { |
|||
border-right: 0; |
|||
} |
|||
|
|||
&:nth-child(1) { |
|||
border-radius: 4px 0 0 4px; |
|||
} |
|||
|
|||
&:nth-child(3) { |
|||
border-radius: 0 4px 4px 0; |
|||
} |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
background-color: #183ECD; |
|||
color: #fff; |
|||
border: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,433 @@ |
|||
<template> |
|||
<div class="custom_page"> |
|||
<div class="content"> |
|||
<!-- 顶部搜索 --> |
|||
<div class="toolbar"> |
|||
<!-- 顶部搜索 --> |
|||
<el-form :inline="true" :model="formParams"> |
|||
<el-form-item label="客户昵称"> |
|||
<el-input v-model="formParams.name" maxlength="20" placeholder="请输入客户昵称" /> |
|||
</el-form-item> |
|||
<el-form-item label="手机号"> |
|||
<el-input v-model="formParams.phone" maxlength="11" placeholder="请输入手机号" /> |
|||
</el-form-item> |
|||
<el-form-item label="标签"> |
|||
<el-select v-model="formParams.labelId" placeholder="请选择"> |
|||
<el-option |
|||
v-for="(item, index) in tipsList" |
|||
:key="index" |
|||
:label="item.labelName" |
|||
:value="item.buyerLabelId" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="最近消费时间"> |
|||
<el-date-picker |
|||
v-model="formParams.dates" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="yyyy-MM-dd" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-form-item label="累计消费金额"> |
|||
<el-input v-model="formParams.minMoney" maxlength="9" placeholder="请输入最小值" /> |
|||
</el-form-item> |
|||
<el-form-item label="-"> |
|||
<el-input v-model="formParams.maxMoney" maxlength="9" placeholder="请输入最大值" /> |
|||
</el-form-item> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-form-item label="购买次数"> |
|||
<el-input v-model="formParams.minBuyers" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最小值" /> |
|||
</el-form-item> |
|||
<el-form-item label="-"> |
|||
<el-input v-model="formParams.maxBuyers" maxlength="9" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最大值" /> |
|||
</el-form-item> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label-width="0"> |
|||
<el-button type="primary" plain @click="search">查询</el-button> |
|||
<el-button type="info" plain @click="clear">重置</el-button> |
|||
<el-button type="primary" plain @click="handleExport">导出</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div class="content_table"> |
|||
<div class="table"> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column prop="name" label="客户昵称" /> |
|||
<el-table-column prop="phone" label="手机号" /> |
|||
<el-table-column prop="memberLevelName" label="会员等级" /> |
|||
<el-table-column prop="total" label="消费总额" /> |
|||
<el-table-column prop="buyers" label="购买次数" /> |
|||
<el-table-column prop="credit" label="剩余积分" /> |
|||
<el-table-column prop="time" label="最近消费时间" /> |
|||
<el-table-column prop="createTime" label="注册时间" /> |
|||
<el-table-column :formatter="row=>row.registerIp?row.registerIp:'-'" label="注册IP" show-overflow-tooltip /> |
|||
<el-table-column :formatter="row=>row.lastLoginIp?row.lastLoginIp:'-'" prop="time" label="最后登录IP" show-overflow-tooltip /> |
|||
<el-table-column label="操作" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" @click.native.prevent="details(scope.row)">详情</el-button> |
|||
<el-button type="text" @click.native.prevent="setIntegral(scope.row)">设置积分</el-button> |
|||
<el-button type="text" @click.native.prevent="makeTag(scope.row.buyerUserId)">打标签</el-button> |
|||
<el-button type="text" size="small" @click.native.prevent="addBlackList(scope.row)"> |
|||
{{ scope.row.ifBlack ? "取消黑名单" : "加入黑名单" }} |
|||
</el-button> |
|||
</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> |
|||
</div> |
|||
</div> |
|||
<!-- *************对话框开始************* --> |
|||
<!-- 打标签 --> |
|||
<el-dialog |
|||
title="选择标签" |
|||
:visible.sync="addFormDialog" |
|||
width="30%" |
|||
center |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div> |
|||
<!-- 表单搜索 --> |
|||
<el-form :inline="true" :model="tipsForm" class="demo-form-inline"> |
|||
<el-form-item label="标签名称"> |
|||
<el-input v-model="tipsForm.labelName" maxlength="20" placeholder="请输入标签名称" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="searchTips">查询</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="text" @click="runTips">管理标签</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 多选 --> |
|||
<el-checkbox-group v-model="checkList"> |
|||
<el-checkbox |
|||
v-for="(item,index) in tipsList" |
|||
:key="index" |
|||
class="checkBoxStyle" |
|||
:label="item.buyerLabelId" |
|||
>{{ item.labelName }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="addFormDialog = false">取 消</el-button> |
|||
<el-button type="primary" @click="saveTips">确定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="修改会员积分" |
|||
:visible.sync="editIntegral" |
|||
width="30%" |
|||
center |
|||
:close-on-click-modal="false" |
|||
@close="credit = 0" |
|||
> |
|||
<el-form label-width="100px"> |
|||
<el-form-item label="修改积分"> |
|||
<el-radio-group v-model="updateWay" @change="changeWayRadio"> |
|||
<el-radio :label="true">增加</el-radio> |
|||
<el-radio :label="false">减少</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="积分"> |
|||
<el-input-number v-if="updateWay" v-model="credit" :min="0" :max="9999999" /> |
|||
<el-input-number v-if="!updateWay" v-model="credit" :max="0" /> |
|||
</el-form-item> |
|||
<el-form-item style="margin-top:-18px;color:#999999"> |
|||
<span>提示 : 在原有积分上增加或减少</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="editIntegral = false">取 消</el-button> |
|||
<el-button type="primary" @click="saveIntegral">确定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<member-details ref="memberDetails" @reset="reset" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
customerMageGetAll, |
|||
getLabels, |
|||
customerSaveUserLabel, |
|||
customerBlacklist, |
|||
updateBuyerCredit, |
|||
exportBuyerUser |
|||
} from '@/api/customerMage' |
|||
// import { getSelect } from '../../../api/renovation' |
|||
import memberDetails from './details' |
|||
// import { constants } from 'fs'; |
|||
export default { |
|||
components: { memberDetails }, |
|||
data () { |
|||
return { |
|||
showMore: false, |
|||
formParams: { |
|||
name: '', // 用户昵称 |
|||
phone: '', // 手机号 |
|||
labelId: '', // 标签id |
|||
dates: [], // 最近消费时间日期数组 |
|||
minMoney: '', // 累计消费金额最小值 |
|||
maxMoney: '', // 累计消费金额最大值 |
|||
minBuyers: '', // 购买次数最小值 |
|||
maxBuyers: '', // 购买次数最大值 |
|||
startTime: '', // 申请开始时间 |
|||
endTime: '', // 申请结束时间 |
|||
page: 1, |
|||
pageSize: 10 |
|||
}, |
|||
tipsForm: { |
|||
labelName: '' |
|||
}, |
|||
date: [], |
|||
total: 1, |
|||
tableData: [], |
|||
currentPage: 1, |
|||
dialog: {}, |
|||
tipsList: [], |
|||
checkList: [], |
|||
addFormDialog: false, |
|||
editIntegral: false, |
|||
buyerUserId: '', // 用户id |
|||
credit: '', // 积分值 扣减积分则传负数 |
|||
updateWay: true, // 修改积分单选绑定 |
|||
} |
|||
}, |
|||
created () { |
|||
this.getAll(this.formParams) |
|||
this.getSelect({ labelName: '' }) |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 导出 |
|||
*/ |
|||
async handleExport () { |
|||
this.$message({ |
|||
message: '数据导出中，请勿重复操作！', |
|||
type: 'success' |
|||
}) |
|||
console.log(this.formParams, 'this.formParams') |
|||
const res = await exportBuyerUser(this.formParams) |
|||
if (!res) { |
|||
return |
|||
} |
|||
const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) |
|||
const fileName = '用户列表.xls' |
|||
if ('download' in document.createElement('a')) { |
|||
// 非IE下载 |
|||
const elink = document.createElement('a') |
|||
elink.download = fileName |
|||
elink.href = URL.createObjectURL(blob) |
|||
elink.style.display = 'none' |
|||
document.body.appendChild(elink) |
|||
elink.click() |
|||
URL.revokeObjectURL(elink.href) // 释放URL 对象 |
|||
document.body.removeChild(elink) |
|||
} else { |
|||
// IE10+下载 |
|||
navigator.msSaveBlob(blob, fileName) |
|||
} |
|||
}, |
|||
handleSizeChange (val) { |
|||
this.formParams.pageSize = val |
|||
this.getAll(this.formParams) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.formParams.page = val |
|||
this.getAll(this.formParams) |
|||
}, |
|||
// 查询 |
|||
search () { |
|||
this.total = 1 |
|||
this.formParams.page = 1 |
|||
this.getAll(this.formParams) |
|||
}, |
|||
// 查询标签 |
|||
searchTips () { |
|||
console.log(this.tipsForm) |
|||
this.getSelect({ labelName: this.tipsForm.labelName }) |
|||
}, |
|||
changeWayRadio (val) { |
|||
this.updateWay = val |
|||
}, |
|||
// 设置积分（更新积分） |
|||
setIntegral (row) { |
|||
this.editIntegral = true |
|||
this.buyerUserId = row.buyerUserId |
|||
}, |
|||
async saveIntegral () { |
|||
if (this.credit === '' || this.credit === undefined) { |
|||
return this.$message('积分不能为空！') |
|||
} else if (this.credit === 0) { |
|||
this.editIntegral = false |
|||
} else { |
|||
const res = await updateBuyerCredit({ |
|||
buyerUserId: this.buyerUserId, |
|||
credit: this.credit |
|||
}) |
|||
if (res.code === '') { |
|||
this.getAll(this.formParams) |
|||
this.editIntegral = false |
|||
this.$message.success('修改积分成功') |
|||
} |
|||
} |
|||
}, |
|||
// 打标签 |
|||
async saveTips (row) { |
|||
console.log(this.checkList) |
|||
const res = await customerSaveUserLabel({ |
|||
buyerUserId: this.buyerUserId, |
|||
buyerLabelIds: this.checkList |
|||
}) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '成功', |
|||
type: 'success' |
|||
}) |
|||
this.checkList = [] |
|||
this.tipsForm.labelName = '' |
|||
this.addFormDialog = false |
|||
} |
|||
}, |
|||
// 加入黑名单 |
|||
addBlackList (row) { |
|||
// "ifBlack": "是否加入黑名单 1-是 0-否" |
|||
console.log(row.ifBlack) |
|||
this.$confirm( |
|||
`${ |
|||
row.ifBlack |
|||
? '确认是否取消黑名单' |
|||
: '加入黑名单后，对方将无法登录商城' |
|||
}`, |
|||
`${row.ifBlack ? '取消黑名单' : '加入黑名单'}`, |
|||
{ |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
} |
|||
) |
|||
.then(() => { |
|||
if (!row.ifBlack) { |
|||
customerBlacklist({ |
|||
buyerUserId: row.buyerUserId, |
|||
ifBlack: 1 |
|||
}).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
this.getAll(this.formParams) |
|||
} |
|||
}) |
|||
} else { |
|||
customerBlacklist({ |
|||
buyerUserId: row.buyerUserId, |
|||
ifBlack: 0 |
|||
}).then(res => { |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
this.getAll(this.formParams) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已取消' |
|||
}) |
|||
}) |
|||
}, |
|||
// 跳转标签页面 |
|||
runTips () { |
|||
this.$router.push({ |
|||
path: '/member/tips' |
|||
}) |
|||
}, |
|||
// 清除 |
|||
clear () { |
|||
this.formParams = { |
|||
name: '', // 用户昵称 |
|||
phone: '', // 手机号 |
|||
labelId: '', // 标签id |
|||
dates: [], // 最近消费时间日期数组 |
|||
minMoney: '', // 累计消费金额最小值 |
|||
maxMoney: '', // 累计消费金额最大值 |
|||
minBuyers: '', // 购买次数最小值 |
|||
maxBuyers: '', // 购买次数最大值 |
|||
page: 1, |
|||
pageSize: 10 |
|||
} |
|||
this.getAll(this.formParams) |
|||
}, |
|||
// 打标签 |
|||
makeTag (buyerUserId) { |
|||
this.checkList = [] |
|||
this.tipsForm.labelName = '' |
|||
this.addFormDialog = true |
|||
this.buyerUserId = buyerUserId |
|||
}, |
|||
details (row) { |
|||
// this.$router.push({ |
|||
// name: 'customerDetails', |
|||
// params: { buyerUserId: row.buyerUserId, orderFormid: row.orderFormid } |
|||
// }) |
|||
this.$refs.memberDetails.getUser({ buyerUserId: row.buyerUserId, orderFormid: row.orderFormid }) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getAll (formParams) { |
|||
const res = await customerMageGetAll(formParams) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
}, |
|||
// 初始化查询所有标签 |
|||
async getSelect (name) { |
|||
const res = await getLabels(name) |
|||
this.tipsList = res.data |
|||
}, |
|||
reset () { |
|||
this.getAll(this.formParams) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.custom_page { |
|||
padding: 20px; |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
} |
|||
.checkBoxStyle { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<div class="tipStyle"> |
|||
<!-- 搜索 --> |
|||
<div class="topSearch"> |
|||
<div class="formSearch"> |
|||
<el-form :inline="true" :model="formInline"> |
|||
<el-form-item label="标签名称"> |
|||
<el-input v-model="formInline.labelName" maxlength="20" placeholder="请输入标签名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="标签类型"> |
|||
<el-select v-model="formInline.labelType" placeholder="请选择标签类型"> |
|||
<el-option label="手动标签" value="1" /> |
|||
<el-option label="自动标签" value="2" /> |
|||
</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="addTips">新建标签</el-button> |
|||
<el-button @click="exportTips">导出标签</el-button> |
|||
</div> |
|||
</div> |
|||
<!-- 表格 --> |
|||
<div class="tableBox"> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|||
tooltip-effect="dark" |
|||
style="width: 100%" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column type="selection" /> |
|||
<el-table-column label="标签名" width="220"> |
|||
<template slot-scope="scope">{{ scope.row.labelName }}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="users" label="客户" /> |
|||
<el-table-column prop="labelType" label="标签类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.labelType == 1">手动标签</span> |
|||
<span v-else>自动标签</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="conditions" label="达标条件"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.labelType===1">暂无标签</div> |
|||
<div v-else @click="modelTouch(scope.row)">{{ scope.row.conditions.toString() }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作"> |
|||
<template slot-scope="scope"> |
|||
<div class="btnList"> |
|||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|||
<el-button type="text" @click="deleteTips(scope.row)">删除</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 批量删除 --> |
|||
<div class="batch_btn"> |
|||
<el-button type="info" plain :disabled="!multipleSelection.length" @click="deleteTips">批量删除</el-button> |
|||
</div> |
|||
<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> |
|||
<!-- ******************************************************弹框开始***************************************************************** --> |
|||
<!-- 达标详情弹框 --> |
|||
<el-dialog |
|||
title="达标详情" |
|||
:visible.sync="dialogVisible" |
|||
width="30%" |
|||
center |
|||
:close-on-click-modal="false" |
|||
> |
|||
<div class="diaddStyle"> |
|||
<h1>满足以下任意条件即可</h1> |
|||
<div class="jiaoyi"> |
|||
<div class="leftJ">交易条件:</div> |
|||
<div class="rightJ"> |
|||
<p v-for="(item,index) in text" :key="index">{{ item }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="dialogVisible = false">我知道了</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<tips-form ref="tipsForm" @reset="reset" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
tipsGetAll, |
|||
tipsDelete, |
|||
excel_platform_label |
|||
} from '@/api/customerMage' |
|||
import TipsForm from './tipsForm'; |
|||
|
|||
export default { |
|||
name: '', |
|||
components: { TipsForm }, |
|||
data () { |
|||
return { |
|||
formInline: { |
|||
labelName: '', // 标签名称 |
|||
labelType: '', // 标签类型 1-手动标签 2-自动标签 |
|||
page: 1, |
|||
pageSize: 10 |
|||
}, |
|||
total: 1, |
|||
tableData: [], |
|||
currentPage: 1, |
|||
dialogVisible: false, |
|||
text: '', |
|||
multipleSelection: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getAll(this.formInline) |
|||
}, |
|||
methods: { |
|||
handleSizeChange (val) { |
|||
this.formInline.pageSize = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.formInline.page = val |
|||
this.getAll(this.formInline) |
|||
}, |
|||
handleSelectionChange (val) { |
|||
this.multipleSelection = val |
|||
}, |
|||
// 查询 |
|||
search () { |
|||
this.total = 1 |
|||
this.formInline.page = 1 |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 清楚 |
|||
clear () { |
|||
this.formInline = { |
|||
labelName: '', // 标签名称 |
|||
labelType: '', // 标签类型 1-手动标签 2-自动标签 |
|||
page: 1, |
|||
pageSize: 10 |
|||
} |
|||
this.getAll(this.formInline) |
|||
}, |
|||
// 编辑 |
|||
edit (row) { |
|||
this.$refs.tipsForm.show({ buyerLabelId: row.buyerLabelId }) |
|||
}, |
|||
// 初始化查询所有数据 |
|||
async getAll (formParams) { |
|||
const res = await tipsGetAll(formParams) |
|||
console.log(res) |
|||
this.tableData = res.data.list |
|||
this.total = res.data.total |
|||
}, |
|||
// 新建标签 |
|||
addTips () { |
|||
this.$refs.tipsForm.show() |
|||
}, |
|||
// 详情弹框 |
|||
modelTouch (row) { |
|||
console.log(row.conditions) |
|||
this.text = row.conditions |
|||
this.dialogVisible = true |
|||
}, |
|||
// 删除 |
|||
async deleteTips (row) { |
|||
let ids = [] |
|||
if (this.multipleSelection.length === 0) { |
|||
ids = [row.buyerLabelId] |
|||
} else { |
|||
this.multipleSelection.forEach(item => { |
|||
ids.push(item.buyerLabelId) |
|||
}) |
|||
} |
|||
const res = await tipsDelete({ ids }) |
|||
if (res.code === '') { |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success' |
|||
}) |
|||
this.getAll(this.formInline) |
|||
} |
|||
}, |
|||
// 导出标签 |
|||
exportTips () { |
|||
if (this.multipleSelection.length === 0) { |
|||
this.$message.error('请选择导出行') |
|||
return |
|||
} |
|||
const ids = [] |
|||
this.multipleSelection.forEach(item => { |
|||
ids.push(item.buyerLabelId) |
|||
}) |
|||
excel_platform_label({ ids }).then(res => { |
|||
console.log(res) |
|||
const blob = new Blob([res]) |
|||
const fileName = '标签表.xlsx' |
|||
if ('download' in document.createElement('a')) { |
|||
// 非IE下载 |
|||
const elink = document.createElement('a') |
|||
elink.download = fileName |
|||
elink.style.display = 'none' |
|||
elink.href = URL.createObjectURL(blob) |
|||
document.body.appendChild(elink) |
|||
elink.click() |
|||
URL.revokeObjectURL(elink.href) // 释放URL 对象 |
|||
document.body.removeChild(elink) |
|||
} else { |
|||
// IE10+下载 |
|||
navigator.msSaveBlob(blob, fileName) |
|||
} |
|||
}) |
|||
}, |
|||
reset () { |
|||
this.getAll(this.formInline) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang='scss'> |
|||
@import url("../../../styles/elDialog.scss"); |
|||
.tipStyle { |
|||
padding: 20px; |
|||
background: #FFFFFF; |
|||
border-radius: 10px; |
|||
.topSearch { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.formSearch, |
|||
.rightBTn { |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
.diaddStyle { |
|||
h1 { |
|||
text-align: center; |
|||
font-size: 24px; |
|||
color: #333333; |
|||
} |
|||
.jiaoyi { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.leftJ { |
|||
margin: 15px; |
|||
} |
|||
.leftJ, |
|||
.rightJ { |
|||
font-size: 16px; |
|||
color: #333333; |
|||
} |
|||
} |
|||
.batch_btn { |
|||
padding: 5px 10px; |
|||
border: 1px solid #dfe6ec; |
|||
background-color: #fff; |
|||
border-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,322 @@ |
|||
<template> |
|||
<el-dialog :close-on-click-modal="false" :title="tipState?'新增':'编辑'" width="600px" :visible.sync="visible"> |
|||
<div class="addtips"> |
|||
<template> |
|||
<div class="add_page"> |
|||
<div class="add_content"> |
|||
<el-form label-width="80px"> |
|||
<el-form-item label="标签名称"> |
|||
<el-input v-model="form.name" maxlength="32" placeholder="最多输入32个字符" /> |
|||
</el-form-item> |
|||
<el-form-item label="标签类型"> |
|||
<el-radio-group v-model="form.type"> |
|||
<el-radio :label="1">手动标签</el-radio> |
|||
<el-radio :label="2">自动标签</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<div v-if="form.type === 2" class="auto_label"> |
|||
<el-form-item label="满足条件"> |
|||
<el-radio-group v-model="form.meetCondition"> |
|||
<el-radio :label="1">满足任意选中的条件即可</el-radio> |
|||
<el-radio :label="2">必须满足所有选被中的条件</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="交易条件"> |
|||
<el-checkbox-group v-model="checkBox"> |
|||
<el-row> |
|||
<el-checkbox :label="1" name="config">最后消费时间</el-checkbox> |
|||
<el-row> |
|||
<el-radio-group v-model="form.config.lastConsumTime.type"> |
|||
<el-row class="indent"> |
|||
<el-radio :label="1">最近</el-radio> |
|||
<el-select |
|||
v-model="form.config.lastConsumTime.value" |
|||
style="width: 70px" |
|||
:disabled=" |
|||
form.config.lastConsumTime.type === 2 || |
|||
!checkBox.includes(1) |
|||
" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in dayList" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value="item.label" |
|||
/> |
|||
</el-select> |
|||
<span style="font-size: 16px; margin-left: 10px">天</span> |
|||
</el-row> |
|||
<el-row class="indent"> |
|||
<el-radio :label="2">自定义</el-radio> |
|||
<el-date-picker |
|||
v-model="date" |
|||
:disabled=" |
|||
form.config.lastConsumTime.type === 1 || |
|||
!checkBox.includes(1) |
|||
" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="yyyy-MM-dd" |
|||
@change="handleChange" |
|||
/> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row> |
|||
<el-checkbox :label="2" name="config">累计消费次数</el-checkbox> |
|||
<el-row class="indent"> |
|||
<el-col :span="5" class="unit"> |
|||
<el-input |
|||
v-model="totalConsumTimes.start" |
|||
maxlength="9" |
|||
:disabled="!checkBox.includes(2)" |
|||
oninput="value=value.replace(/[^\d]/g,'')" |
|||
/> |
|||
<span>次</span> |
|||
</el-col> |
|||
<el-col :span="2" style="font-size: 16px; text-align: center">ㅡ</el-col> |
|||
<el-col :span="5" class="unit"> |
|||
<el-input |
|||
v-model="totalConsumTimes.end" |
|||
maxlength="9" |
|||
:disabled="!checkBox.includes(2)" |
|||
oninput="value=value.replace(/[^\d]/g,'')" |
|||
/> |
|||
<span>次</span> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
<el-row> |
|||
<el-checkbox :label="3" name="config">累计消费金额</el-checkbox> |
|||
<el-row class="indent"> |
|||
<el-col :span="5" class="unit"> |
|||
<el-input |
|||
v-model="totalConsumAmount.start" |
|||
maxlength="9" |
|||
:disabled="!checkBox.includes(3)" |
|||
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" |
|||
/> |
|||
<span>元</span> |
|||
</el-col> |
|||
<el-col :span="2" style="font-size: 16px; text-align: center">ㅡ</el-col> |
|||
<el-col :span="5" class="unit"> |
|||
<el-input |
|||
v-model="totalConsumAmount.end" |
|||
maxlength="9" |
|||
:disabled="!checkBox.includes(3)" |
|||
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" |
|||
/> |
|||
<span>元</span> |
|||
</el-col> |
|||
</el-row> |
|||
</el-row> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="footer"> |
|||
<div class="btn_list"> |
|||
<el-button @click="back">取消</el-button> |
|||
<el-button type="primary" @click="save">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { tipsAdd, tipsGetById, tipsUpdate } from '@/api/customerMage' |
|||
|
|||
function AddForm () { |
|||
this.labelType = '' // 标签类型 1-手动标签 2-自动标签 |
|||
this.meetConditions = '' // 满足条件 1-满足任意一个被选中条件即可 2-必须满足所有被选中条件 |
|||
this.lastConsumptionTime = '' // 是否选中最后消费时间 1-是 0-否 |
|||
this.consumptionFrequency = '' // 是否选中累计消费次数 1-是 0-否 |
|||
this.consumptionMoney = '' // 是否选中累计交易金额 1-是 0-否 |
|||
this.consumptionDay = '' // 最近几天（天） |
|||
this.consumptionStartTime = '' // 最后消费开始时间 |
|||
this.consumptionEndTime = '' // 最后消费结束时间 |
|||
this.frequencyStart = '' // 起始次数 |
|||
this.frequencyEnd = '' // 截止次数 |
|||
this.moneyStart = '' // 起始金额 |
|||
this.moneyEnd = '' // 截止金额 |
|||
} |
|||
function FormInfo () { |
|||
this.name = '' // 标签名称 |
|||
this.meetCondition = 1 // 满足条件 |
|||
this.type = 1 |
|||
this.config = { |
|||
totalConsumTimes: '', |
|||
// 最近 |
|||
lastConsumTime: { |
|||
type: 1, |
|||
value: 3 |
|||
}, |
|||
totalConsumAmount: '' |
|||
} |
|||
} |
|||
export default { |
|||
name: 'TipsForm', |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
form: new FormInfo(), |
|||
addForm: new AddForm(), |
|||
checkBox: [], // 交易条件 |
|||
totalConsumTimes: { |
|||
start: '', |
|||
end: '' |
|||
}, |
|||
totalConsumAmount: { |
|||
start: '', |
|||
end: '' |
|||
}, |
|||
tipState: false, |
|||
date: [], // 自定义时间 |
|||
dayList: [ |
|||
{ label: 3 }, |
|||
{ label: 7 }, |
|||
{ label: 15 }, |
|||
{ label: 30 }, |
|||
{ label: 45 }, |
|||
{ label: 60 } |
|||
], |
|||
buyerLabelId: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
show (params) { |
|||
this.tipState = !params |
|||
this.visible = true |
|||
|
|||
if (this.tipState) { |
|||
this.addForm = new AddForm() |
|||
this.form = new FormInfo() |
|||
} else { |
|||
this.buyerLabelId = params.buyerLabelId |
|||
this.getDetails(params.buyerLabelId) |
|||
} |
|||
}, |
|||
handleChange (value) { |
|||
console.log(value) |
|||
// this.form.config.lastConsumTime.value = `${(value && value[0]) || ''}${value && value[0] ? '至' : ''}${(value && value[1]) || ''}` |
|||
}, |
|||
// 返回 |
|||
back () { |
|||
this.visible = false |
|||
}, |
|||
// 编辑查询 |
|||
getDetails (buyerLabelId) { |
|||
tipsGetById({ buyerLabelId }).then(res => { |
|||
this.form = { |
|||
name: res.data.labelName, // 标签名称 |
|||
meetCondition: res.data.meetConditions, // 满足条件 |
|||
type: res.data.labelType, |
|||
config: { |
|||
totalConsumTimes: '', |
|||
// 最近 |
|||
lastConsumTime: { |
|||
type: 1, |
|||
value: 3 |
|||
}, |
|||
totalConsumAmount: '' |
|||
} |
|||
} |
|||
this.totalConsumTimes = { |
|||
start: res.data.frequencyStart, |
|||
end: res.data.frequencyEnd |
|||
} |
|||
this.totalConsumAmount = { |
|||
start: res.data.moneyStart, |
|||
end: res.data.moneyEnd |
|||
} |
|||
this.checkBox = res.data.consumptions |
|||
}) |
|||
}, |
|||
// 添加/编辑 |
|||
async save () { |
|||
if (this.form.type === 1) { |
|||
this.form.config.lastConsumTime.value = '' |
|||
this.form.meetConditions = '' |
|||
} |
|||
const obj = { |
|||
labelName: this.form.name, // 标签名称 |
|||
labelType: this.form.type, // 标签类型 1-手动标签 2-自动标签 |
|||
meetConditions: this.form.meetCondition, |
|||
conditions: this.checkBox, |
|||
consumptionDay: this.form.config.lastConsumTime.value, // 最近几天（天） |
|||
consumptionStartTime: this.date[0] || '', // 最后消费开始时间 |
|||
consumptionEndTime: this.date[1] || '', // 最后消费结束时间 |
|||
frequencyStart: this.totalConsumTimes.start, // 起始次数 |
|||
frequencyEnd: this.totalConsumTimes.end, // 截止次数 |
|||
moneyStart: this.totalConsumAmount.start, // 起始金额 |
|||
moneyEnd: this.totalConsumAmount.end // 截止金额 |
|||
} |
|||
if (this.tipState) { |
|||
const res = await tipsAdd(obj) |
|||
if (res.code === '') { |
|||
this.$message.success('新增成功') |
|||
this.form = new FormInfo() |
|||
this.visible = false |
|||
this.$emit('reset') |
|||
} |
|||
} else { |
|||
obj.buyerLabelId = this.buyerLabelId |
|||
const res = await tipsUpdate(obj) |
|||
if (res.code === '') { |
|||
this.$message.success('修改成功') |
|||
this.form = new FormInfo() |
|||
this.visible = false |
|||
this.$emit('reset') |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.add_page { |
|||
background-color: #fff; |
|||
.footer { |
|||
height: 80px; |
|||
line-height: 80px; |
|||
font-size: 24px; |
|||
border-top: 1px solid #e0e5eb; |
|||
.btn_list { |
|||
float: right; |
|||
} |
|||
} |
|||
|
|||
.add_content { |
|||
margin: 20px auto; |
|||
.indent { |
|||
padding-left: 20px; |
|||
margin-bottom: 15px; |
|||
box-sizing: border-box; |
|||
} |
|||
.auto_label { |
|||
background-color: #f7f7f7; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.unit { |
|||
position: relative; |
|||
span { |
|||
position: absolute; |
|||
right: 0; |
|||
font-size: 16px; |
|||
border-left: 1px solid #dcdfe6; |
|||
padding: 0 8px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue