增加头像删除功能
This commit is contained in:
parent
67ec8b40ea
commit
8e8243d168
@ -16,10 +16,11 @@
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="x-upload__img-actions" v-if="!disabled">
|
||||
<span v-if="!replaceupload" class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
|
||||
<el-upload v-else class="uploader" ref="uploader" :auto-upload="cropper ? false : autoUpload" :disabled="disabled" :show-file-list="showFileList" :action="action" :name="name" :data="data" :accept="accept" :limit="1" :http-request="request" :on-change="change" :before-upload="before" :on-success="success" :on-error="error" :on-exceed="handleExceed">
|
||||
<span class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
|
||||
<el-upload v-if="replaceupload" style="display: flex;" class="uploader" ref="uploader" :auto-upload="cropper ? false : autoUpload" :disabled="disabled" :show-file-list="showFileList" :action="action" :name="name" :data="data" :accept="accept" :limit="1" :http-request="request" :on-change="change" :before-upload="before" :on-success="success" :on-error="error" :on-exceed="handleExceed">
|
||||
<slot>
|
||||
<span class="upload"><el-icon>
|
||||
<span class="upload">
|
||||
<el-icon>
|
||||
<component :is="icon" />
|
||||
</el-icon>
|
||||
<h4 v-if="title"> {{ title }} </h4>
|
||||
@ -313,6 +314,7 @@ export default {
|
||||
|
||||
.x-upload__img-actions .del {
|
||||
background: #F56C6C;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.x-upload__img-actions .upload {
|
||||
@ -320,7 +322,7 @@ export default {
|
||||
}
|
||||
|
||||
.x-upload__img:hover .x-upload__img-actions {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.x-upload__img-slot {
|
||||
|
||||
@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<el-container class="page-user">
|
||||
<el-aside style="width: 176px;">
|
||||
<el-container>
|
||||
<el-header style="height: auto;display: block;">
|
||||
<div class="user-info-top">
|
||||
<x-upload
|
||||
v-if="avatarupload"
|
||||
v-model="user.avatar"
|
||||
:data={token:token}
|
||||
ref="uploader"
|
||||
:api="avatarupload"
|
||||
width="120"
|
||||
height="120"
|
||||
icon="el-icon-UploadFilled"
|
||||
:onRemove="onRemove"
|
||||
class="xuavatar"
|
||||
round
|
||||
:cropper="true"
|
||||
title="上传头像"
|
||||
:replaceupload="true"
|
||||
:aspectRatio="1/1" />
|
||||
<el-avatar :size="120" v-else :src="user.avatar"></el-avatar>
|
||||
<h2 class="nickname">{{ user.nickname || user.username }}</h2>
|
||||
<!-- <p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p> -->
|
||||
<p>
|
||||
<el-button-group>
|
||||
<el-button @click="xupdate('message', '发送消息', 'drawer')" type="info" size="small">
|
||||
系统消息
|
||||
</el-button>
|
||||
<el-button @click="xupdate('user', '编辑信息', 'fdsafdafafa')" type="info" color="#607d8b" size="small">
|
||||
编辑资料
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</p>
|
||||
<div style="text-align: left; padding-top: 2px;">
|
||||
<p v-if="user.uid"><el-button link size="small" v-copy="user.uid">UID：{{ user.uid }} </el-button> </p>
|
||||
<p v-if="user.uin"><el-button link size="small" v-copy="user.uin">UIN：{{ user.uin }}</el-button> </p>
|
||||
<p v-if="user.mobile"><el-button size="small" link v-copy="user.mobile">Mobile：{{ user.mobile }} </el-button> </p>
|
||||
<p v-if="user.email"><el-button size="small" link v-copy="user.email">Email：{{ user.email }} </el-button> </p>
|
||||
<!-- <p v-if="user.regdate"><el-button link v-copy="user.regdate">regdate: {{ user.regdate }} </el-button> </p> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-menu class="menu" :default-active="selectpage">
|
||||
<el-menu-item-group v-for="(group,g) in menu" :key="g" :index="g" :title="group.title">
|
||||
<el-menu-item v-for="(item,i) in group.list" :key="g+'-'+i" :index="g+'-'+i" @click="openPage(item)">
|
||||
<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
|
||||
<template #title>
|
||||
<span>{{item.title}}</span>
|
||||
<el-badge :value="item.tag" :max="99" class="item"> </el-badge>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-menu>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main style="padding: 0px;">
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<component :data="user" :is="page"/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<el-skeleton :rows="3" />
|
||||
</template>
|
||||
</Suspense>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<x-update v-if="updateKey" :name="updateKey" ref="xupdate" @success="handleSuccess" @closed="updateKey=''"></x-update>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.xuavatar {
|
||||
margin: auto;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.page-user .user-info-top .nickname {
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.xuavatar .el-upload--picture-card {
|
||||
--el-upload-picture-card-size:80px;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.el-badge {
|
||||
position: absolute; height: 18px; line-height: 18px; font-size: 12px; color: #fff; right: 8px; border-radius: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'userCenter',
|
||||
components: {
|
||||
account: defineAsyncComponent(() => import('./components/account')),
|
||||
seting: defineAsyncComponent(() => import('./components/seting')),
|
||||
pushSettings: defineAsyncComponent(() => import('./components/pushSettings')),
|
||||
password: defineAsyncComponent(() => import('./components/password')),
|
||||
space: defineAsyncComponent(() => import('./components/space')),
|
||||
xtable: defineAsyncComponent(() => import('./components/table')),
|
||||
},
|
||||
props: {
|
||||
modelValue: { type: Object, default: () => {} },
|
||||
type: { type: String, default: "" }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu: [],
|
||||
user: {},
|
||||
userData: this.modelValue,
|
||||
token: '',
|
||||
avatarupload: '',
|
||||
updateKey: '',
|
||||
page: "account",
|
||||
selectpage: "0-0"
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loaddata();
|
||||
},
|
||||
methods: {
|
||||
xupdate(key, name, type){
|
||||
this.updateKey = key;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.xupdate.open().getComponentType(type).setConfig({
|
||||
name:name,
|
||||
remoteurl:'table/getUpdate?name='+key+'&token='+this.token
|
||||
});
|
||||
})
|
||||
},
|
||||
loaddata(){
|
||||
this.$http.post('user/index/get',{uid: this.userData.uid, type:this.type}).then((res) => {
|
||||
if (res.code==200) {
|
||||
Object.assign(this.$data, res.data);
|
||||
|
||||
if (res.data.menu) {
|
||||
this.page = res.data.menu[0]['list'][0]['component']
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
this.$alert(res.message, "提示", {type: 'error'});
|
||||
});
|
||||
},
|
||||
onRemove(){
|
||||
this.$http.post('avatar/admin/delete',{token: this.token}).then((res) => {
|
||||
if (res.code==200) {
|
||||
this.userData.avatar = '';
|
||||
this.$refs.uploader.clearFiles();
|
||||
this.$message.success(res.message || "操作成功")
|
||||
return false;
|
||||
}
|
||||
this.$alert(res.message, "提示", {type: 'error'});
|
||||
});
|
||||
return false;
|
||||
},
|
||||
openPage(item){
|
||||
this.page = item.component
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -4,7 +4,7 @@
|
||||
<div style="width: 100%;">
|
||||
<div class="acea-row user-row">
|
||||
<div class="avatar mr15">
|
||||
<x-upload v-if="avatarupload" :data=userPost v-model="user.avatar" ref="uploader" :api="avatarupload" width="68" height="68" icon="el-icon-UploadFilled" :onRemove="onRemove" class="xuavatar" round :cropper="true" title="" :replaceupload="true" :aspectRatio="1 / 1" style="border-radius: 10px" />
|
||||
<x-upload v-if="avatarupload" :data=userPost v-model="user.avatar" ref="uploader" :api="avatarupload" width="68" height="68" icon="el-icon-UploadFilled" :onRemove="onRemove" class="xuavatar" round :cropper="true" title="" :replaceupload="true" :aspectRatio="1 / 1" style="border-radius: 8px" />
|
||||
<el-avatar :size="68" v-else :src="user.avatar" style="border-radius: 10px"></el-avatar>
|
||||
</div>
|
||||
<div class="user-row-text">
|
||||
@ -58,7 +58,7 @@
|
||||
<el-main>
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<component :data="user" :is="page" />
|
||||
<component :data="user" :token="token" :is="page" />
|
||||
</template>
|
||||
<template #fallback>
|
||||
<el-skeleton :rows="3" />
|
||||
@ -85,6 +85,13 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.xuavatar:deep(.x-upload__img-actions) span{
|
||||
height: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mr15 {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
@ -165,7 +172,7 @@ export default {
|
||||
activeName: '',
|
||||
avatarupload: '',
|
||||
updateKey: '',
|
||||
page: "xtable",
|
||||
page: "",
|
||||
selectpage: "0-0"
|
||||
}
|
||||
},
|
||||
@ -202,15 +209,22 @@ export default {
|
||||
});
|
||||
},
|
||||
onRemove() {
|
||||
this.$http.post('avatar/admin/delete', { token: this.token }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.userData.avatar = '';
|
||||
this.$refs.uploader.clearFiles();
|
||||
this.$message.success(res.message || "操作成功")
|
||||
return false;
|
||||
}
|
||||
this.$alert(res.message, "提示", { type: 'error' });
|
||||
});
|
||||
|
||||
this.$confirm(`确定${this.user.nickname || this.user.username}的头像吗？`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http.post('avatar/admin/delete', { token: this.token }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.userData.avatar = '';
|
||||
this.$refs.uploader.clearFiles();
|
||||
this.$message.success(res.message || "操作成功")
|
||||
return false;
|
||||
}
|
||||
this.$alert(res.message, "提示", { type: 'error' });
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
return false;
|
||||
},
|
||||
openPage(item) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user