HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前台用户界面基本完成

Browse Source
This commit is contained in:
landaiqing
2023-07-08 23:28:53 +08:00
parent fc64a179e8
commit 7e3227328b
13 changed files with 612 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/User/UserInfoPage.vue
View File

@@ -15,7 +15,7 @@
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
<div style="display: flex;flex-direction: row;justify-content: space-between">
<div @click="changeAvatar" style="cursor: pointer;width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="imageUrl" :size="90"></el-avatar>
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+username" :size="90"></el-avatar>
</div>
<div style="display: flex;flex-direction: column;margin-left: 15px;">
<div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
@@ -104,13 +104,13 @@
append-to-body
:close-on-click-modal="false"
>
<span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
<el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">
<template slot="prepend">url:</template>
</el-input>
<el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
<!-- <span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>-->
<!-- <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">-->
<!-- <el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">-->
<!-- <template slot="prepend">url:</template>-->
<!-- </el-input>-->
<!-- <el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
<!-- </div>-->
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: center">
<el-upload
@@ -123,10 +123,7 @@
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件。</div>
</el-upload>
<!-- <form action="/upload/UploadHandle" enctype="multipart/form-data" method="post" target="_blank">-->
<!-- <input type="file" name="file1"><br>-->
<!-- <input type="submit" value="上传">-->
<!-- </form>-->
</div>
</el-dialog>
@@ -158,8 +155,8 @@ export default {
like:[],
article:[],
openChangeAvatar:false,
AvatarUrl:'',
imageUrl:'http://localhost:8082/helloGithub_war_exploded/retUserAv',
// AvatarUrl:'',
// imageUrl:'',
userLevel:null,
}
},
@@ -253,49 +250,49 @@ export default {
}
},
changeAvatar(){
if(this.$route.query.name!==this.$cookie.get('username')){
if(this.$route.query.name!==this.$cookie.get('username')||this.$cookie.get('username')===null){
return;
}else{
this.openChangeAvatar=true;
}
},
changeAvatarByUrl(){
if(this.AvatarUrl!==''){
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
// URL 中的查询参数
params: {
url: this.AvatarUrl
}
}).then(function (res) {
if(res.data.code===200){
Vue.prototype.$notify({
title: '上传成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "上传失败",
offset: 50
});
}
});
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "请先填写图片链接",
offset: 50
});
}
},
// changeAvatarByUrl(){
// if(this.AvatarUrl!==''){
// axios({
// method: 'post',
// // 请求的地址
// url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
// // URL 中的查询参数
// params: {
// url: this.AvatarUrl
// }
// }).then(function (res) {
// if(res.data.code===200){
// Vue.prototype.$notify({
// title: '上传成功',
// message: ('i', {style: 'color: teal'}, res.data.msg),
// type: 'success',
// offset: 50
// });
// }else{
// Vue.prototype.$notify.error({
// title: '错误',
// message: "上传失败",
// offset: 50
// });
// }
//
// });
// }else{
// Vue.prototype.$notify.error({
// title: '错误',
// message: "请先填写图片链接",
// offset: 50
// });
// }
//
// },
upload(params){
var that=this;
@@ -326,24 +323,30 @@ export default {
offset: 50
});
that.openChangeAvatar=false;
setTimeout(()=>{
window.location.reload();
},500)
}
})
},
changeAvatarByLocal(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: '/api/retUserAv',
// URL 中的查询参数
responseType: 'blob',
}).then((res)=>{
})
},
// changeAvatarByLocal(){
// var that=this;
// axios({
// method: 'post',
// // 请求的地址
// url: '/api/retUserAv',
// // URL 中的查询参数
// params:{
// username:this.username,
// },
// responseType:'blob'
// }).then((res)=>{
// that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
// })
//
// },
}