|
|
|
@ -69,7 +69,18 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" property="nickName" label="昵称" /> |
|
|
|
<el-table-column align="center" property="nickName" label="昵称"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span>{{ scope.row.nickName }}</span> |
|
|
|
<i |
|
|
|
style="float: right;font-size:14px;" |
|
|
|
@click="handleEditNickName(scope.row)" |
|
|
|
class="el-icon-edit-outline" |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column align="center" property="code" label="编号"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
@ -114,6 +125,9 @@ |
|
|
|
<el-button type="text" size="mini" @click="handleEdit(scope.row)" |
|
|
|
>修改等级</el-button |
|
|
|
> |
|
|
|
<el-button type="text" size="mini" @click="handleInfo(scope.row)" |
|
|
|
>完善信息</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -129,6 +143,7 @@ |
|
|
|
<el-dialog |
|
|
|
:title="dialog.title" |
|
|
|
:visible.sync="dialog.Visible" |
|
|
|
@open=openDialog |
|
|
|
center |
|
|
|
width="350px" |
|
|
|
> |
|
|
|
@ -151,11 +166,49 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div v-if="type == 'userInfo'"> |
|
|
|
<el-form-item label="简介"> |
|
|
|
<el-input style="width:100%" type="textarea" :rows="5" v-model="form.introduction" placeholder="请输入用户简介" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="封面信息"> |
|
|
|
<!-- <el-input v-model="form.coverImgs" clearable placeholder="请输入客户编号" /> --> |
|
|
|
<div v-for="(item, l) in dataImg" :key="l" class="imgdata" style="margin-left:10px;"> |
|
|
|
<el-image style="width: 146px; height: 146px" :src="item" fit="fill"> |
|
|
|
</el-image> |
|
|
|
<div class="imgdialog"> |
|
|
|
<p> |
|
|
|
<i |
|
|
|
class="el-icon-delete" |
|
|
|
@click="delDataImg(item, l)" |
|
|
|
style="font-size: 20px;" |
|
|
|
></i> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-upload |
|
|
|
class="avatar-uploader" |
|
|
|
style="float:left;margin-left: 10px;" |
|
|
|
action list-type="picture-card" |
|
|
|
:show-file-list="false" |
|
|
|
:http-request="changeImgs" |
|
|
|
element-loading-text="正在上传..." |
|
|
|
v-loading="loadingOtherImg"> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg" status="success"></el-progress> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="type == 'code'"> |
|
|
|
<el-form-item label="客户编号"> |
|
|
|
<el-input v-model="form.code" clearable placeholder="请输入客户编号" /> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div v-if="type == 'nickName'"> |
|
|
|
<el-form-item label="昵称"> |
|
|
|
<el-input v-model="form.nickName" clearable placeholder="请输入昵称" /> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div v-if="type == 'remark'"> |
|
|
|
<el-form-item label="备注"> |
|
|
|
<el-input |
|
|
|
@ -177,9 +230,14 @@ |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { queryUserInfo, updateUserInfo } from "@/api/user/user.js"; |
|
|
|
import { uploadFile, delFile } from "@/api/upload/upload.js"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
loadingOtherImg:false,//完善信息中封面图片加载圈 |
|
|
|
jinduOtherImgNum:0,//完善信息中封面图片进度 |
|
|
|
jinduShowOtherImg:false,//进度条显示 |
|
|
|
dataImg:[],//多个封面图片 |
|
|
|
loading: true, |
|
|
|
queryParams: { |
|
|
|
pageNum: 1, |
|
|
|
@ -199,7 +257,12 @@ export default { |
|
|
|
total: 0, |
|
|
|
tableData: [], |
|
|
|
form: { |
|
|
|
userId: "" |
|
|
|
userId: "", |
|
|
|
nickName:'',//昵称 |
|
|
|
code:'',//编号 |
|
|
|
remark:'',//备注 |
|
|
|
introduction:'',//完善信息中的简介 |
|
|
|
dataImg:[],//完善信息中的图片 |
|
|
|
}, |
|
|
|
dialog: { |
|
|
|
Visible: false, |
|
|
|
@ -272,25 +335,140 @@ export default { |
|
|
|
}, |
|
|
|
// 编辑用户等级 |
|
|
|
handleEdit(row) { |
|
|
|
this.form = {} |
|
|
|
// this.form = {} |
|
|
|
this.dialog.Visible = true; |
|
|
|
this.dialog.title = "修改用户等级"; |
|
|
|
this.type = "level"; |
|
|
|
this.form.userId = row.userId; |
|
|
|
this.data = row; |
|
|
|
}, |
|
|
|
//弹窗回显 |
|
|
|
openDialog(){ |
|
|
|
//昵称回显 |
|
|
|
if(this.type == 'nickName'){ |
|
|
|
console.log(this.data.nickName); |
|
|
|
console.log('昵称'); |
|
|
|
this.form.nickName = this.data.nickName; |
|
|
|
} |
|
|
|
//编号回显 |
|
|
|
if(this.type == 'code'){ |
|
|
|
console.log(this.data.code); |
|
|
|
console.log('编号'); |
|
|
|
this.form.code = this.data.code; |
|
|
|
} |
|
|
|
//备注回显 |
|
|
|
if(this.type == 'remark'){ |
|
|
|
console.log(this.data.remark); |
|
|
|
console.log('备注'); |
|
|
|
this.form.remark = this.data.remark; |
|
|
|
console.log('21',this.form.remark); |
|
|
|
} |
|
|
|
|
|
|
|
//完善信息回显 |
|
|
|
if(this.type=='userInfo'){ |
|
|
|
this.form.introduction = this.data.introduction; //简介回显 |
|
|
|
if(this.data.coverImgs){ |
|
|
|
this.dataImg = this.data.coverImgs.split(',');//回显图片 |
|
|
|
}else{ |
|
|
|
this.dataImg=''; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
//完善信息 |
|
|
|
handleInfo(row){ |
|
|
|
// this.form = {} |
|
|
|
this.dialog.Visible = true; |
|
|
|
this.dialog.title = "完善用户信息"; |
|
|
|
this.type = "userInfo"; |
|
|
|
this.form.userId = row.userId; |
|
|
|
// this.form.introduction = row.introduction; |
|
|
|
this.data = row; |
|
|
|
}, |
|
|
|
//完善信息中的封面图片上传 |
|
|
|
changeImgs({ file }) { |
|
|
|
this.loadingOtherImg = true; //显示加载 |
|
|
|
this.jinduOtherImgNum = 0;//进度条从0开始 |
|
|
|
this.jinduShowOtherImg = true; //是否显示进度条 |
|
|
|
let formData = new FormData(); |
|
|
|
formData.append("file", file); |
|
|
|
formData.append("type", "product"); |
|
|
|
uploadFile(formData).then(res => { |
|
|
|
this.dataImg.push(res.data.wjUrl); |
|
|
|
this.loadingOtherImg = false; //显示加载 |
|
|
|
clearInterval(this.videoTime); //清除定时器 |
|
|
|
this.videoTime = null; //清除定时器 |
|
|
|
this.successVideo('otherImg'); // |
|
|
|
}); |
|
|
|
let videoJindu1 = setTimeout(() => { |
|
|
|
this.jinduVideoNum = 30; |
|
|
|
}, 500); |
|
|
|
let videoJindu2 = setTimeout(() => { |
|
|
|
videoJindu1 |
|
|
|
this.jinduVideoNum = 80; |
|
|
|
}, 1000); |
|
|
|
this.videoTime = setTimeout(() => { |
|
|
|
videoJindu2 |
|
|
|
this.jinduVideoNum = 90; |
|
|
|
}, 1500); |
|
|
|
}, |
|
|
|
successVideo(type){ |
|
|
|
console.log('上传成功'); |
|
|
|
switch (type) { |
|
|
|
case 'otherImg': //其他图片 |
|
|
|
this.jinduOtherImgNum = 100; |
|
|
|
setTimeout(() => { |
|
|
|
this.jinduShowOtherImg = false; |
|
|
|
}, 1200); |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
//完善信息中的封面图片删除 |
|
|
|
delDataImg(item, index) { |
|
|
|
this.$confirm("此操作将永久删除图片,是否继续?", "提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning" |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
this.dataImg.splice(index, 1); |
|
|
|
delFile({ wjUrl: item }).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message.success("删除成功"); |
|
|
|
} |
|
|
|
}); |
|
|
|
// this.$message({ |
|
|
|
// type: "success", |
|
|
|
// message: "删除成功!" |
|
|
|
// }); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.$message({ |
|
|
|
type: "error", |
|
|
|
message: "已取消删除" |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
//编辑用户编号 |
|
|
|
handleEditCode(row) { |
|
|
|
this.form = {} |
|
|
|
// this.form = {} |
|
|
|
this.dialog.Visible = true; |
|
|
|
this.dialog.title = "修改用户编号"; |
|
|
|
this.form.userId = row.userId; |
|
|
|
this.type = "code"; |
|
|
|
this.data = row; |
|
|
|
}, |
|
|
|
//编写用户昵称 |
|
|
|
handleEditNickName(row){ |
|
|
|
// this.form = {} |
|
|
|
this.dialog.Visible = true; |
|
|
|
this.dialog.title = "修改昵称"; |
|
|
|
this.form.userId = row.userId; |
|
|
|
this.type = "nickName"; |
|
|
|
this.data = row; |
|
|
|
}, |
|
|
|
//编辑客户备注 |
|
|
|
handleEditRemark(row) { |
|
|
|
this.form = {} |
|
|
|
// this.form = {} |
|
|
|
this.dialog.Visible = true; |
|
|
|
this.dialog.title = "修改用户备注"; |
|
|
|
this.form.userId = row.userId; |
|
|
|
@ -308,6 +486,24 @@ export default { |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if(this.type == "userInfo"){ |
|
|
|
if(this.form.introduction == undefined || this.form.introduction == ''){ |
|
|
|
this.$message({ |
|
|
|
message: '请填写完善用户信息', |
|
|
|
type: "error" |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if(this.type == "nickName"){ |
|
|
|
if(this.form.nickName == undefined || this.form.nickName == ''){ |
|
|
|
this.$message({ |
|
|
|
message: '请输入用户昵称', |
|
|
|
type: "error" |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if(this.type == "code"){ |
|
|
|
if(this.form.code == undefined || this.form.code == ''){ |
|
|
|
this.$message({ |
|
|
|
@ -327,6 +523,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
try { |
|
|
|
this.form.coverImgs = this.dataImg.join(","); |
|
|
|
let res = await updateUserInfo(this.form); |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message.success("修改成功"); |
|
|
|
@ -340,7 +537,7 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.content { |
|
|
|
background: #fff; |
|
|
|
margin-top: 15px; |
|
|
|
@ -351,4 +548,35 @@ export default { |
|
|
|
.search-button { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.imgdata { |
|
|
|
position: relative; |
|
|
|
// display: inline-block; |
|
|
|
float: left; |
|
|
|
margin-left: 60px; |
|
|
|
|
|
|
|
.imgdialog { |
|
|
|
width: 146px; |
|
|
|
height: 146px; |
|
|
|
display: none; |
|
|
|
position: absolute; |
|
|
|
background: rgba(127, 127, 127, 0.5); |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
justify-content: space-between; |
|
|
|
align-content: center; |
|
|
|
|
|
|
|
p { |
|
|
|
margin: auto; |
|
|
|
|
|
|
|
i { |
|
|
|
cursor: pointer; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.imgdata:hover .imgdialog { |
|
|
|
display: flex !important; |
|
|
|
} |
|
|
|
</style> |
