This commit is contained in:
landaiqing 2023-12-27 16:44:51 +08:00
parent fde3e77bb5
commit 31a770ebe4
20 changed files with 665 additions and 352 deletions

View File

@ -34,8 +34,8 @@
effect="dark" close-delay="2000"> effect="dark" close-delay="2000">
<div class="MyPopover" slot="content"> <div class="MyPopover" slot="content">
<span v-if="UrlObj.name" style="font-size:12px !important;">{{ UrlObj.name }}手机二维码</span><br/><br/> <span v-if="UrlObj.name" style="font-size:12px !important;">{{ UrlObj.name }}手机二维码</span><br/><br/>
<div style="width:100% ;text-align: center"><img style="width:150px" <div style="width:100% ;text-align: center"><img style="width:150px"
:src="getQR(UrlId,UrlObj.icon)"></div> :src="getNavQR(this.$route.query.uid)"></div>
</div> </div>
<i class="el-icon-picture" id="little-Circle-content" <i class="el-icon-picture" id="little-Circle-content"
style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i> style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
@ -195,9 +195,7 @@ export default {
mounted() { mounted() {
// this.GetAllComment(); // this.GetAllComment();
if(this.UrlId && this.UrlObj.icon){
this.getQR(this.UrlId, this.UrlObj.icon);
}
}, },
@ -237,11 +235,11 @@ export default {
}).then(function (res) { }).then(function (res) {
_this.allcomment = res.data; _this.allcomment = res.data;
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
// 访 // 访
@ -260,22 +258,21 @@ export default {
_this.initEchart(_this.xTime,_this.YView); _this.initEchart(_this.xTime,_this.YView);
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
// //
getQR(url_id, icon_url) { getNavQR(url_id) {
let _this = this; let _this = this;
axios({ axios({
method: 'post', method: 'post',
url: '/api/qrcode/qrc_return', url: '/api/qrcode/qrc_return',
data: { params: {
url_id: url_id, url_id: url_id,
icon_url: icon_url
} }
}).then(function (res) { }).then(function (res) {
if (res.data) { if (res.data) {
@ -284,11 +281,11 @@ export default {
return false; return false;
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}) })
return this.imageCode return this.imageCode
}, },
@ -404,18 +401,18 @@ export default {
that.UrlObj = res.data.data; that.UrlObj = res.data.data;
that.UnDate = that.UrlObj.createtime; that.UnDate = that.UrlObj.createtime;
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}); });
this.getFormatDate(); this.getFormatDate();
}, },
// //
WarnToAdmin() { WarnToAdmin() {
// this.GetAllComment(); // this.GetAllComment();
console.log(this.allcomment); // console.log(this.allcomment);
} }
} }
} }

View File

@ -480,11 +480,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -513,11 +513,11 @@ export default {
offset: 0 offset: 0
}); });
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -564,11 +564,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -620,11 +620,11 @@ export default {
}, 1000); }, 1000);
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
@ -666,11 +666,11 @@ export default {
}, 1000); }, 1000);
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {

View File

@ -81,16 +81,21 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getPath() { getPath() {
document.querySelector(this.$route.query.name).scrollIntoView(true) if(this.$route.query.name){
document.querySelector(this.$route.query.name).scrollIntoView(true)
}else{
return false;
}
}, },
// //
@ -107,11 +112,11 @@ export default {
_this.loading=true; _this.loading=true;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}) })
}, },

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-card" @click="goToNavDetail"> <div class="app-card" >
<div style="display: flex;flex-direction: row;align-items: center"> <div style="display: flex;flex-direction: row;align-items: center" @click="goToNavDetail">
<el-image v-if="nav.icon" :src="nav.icon" style="width: 30px;height: 30px"></el-image> <el-image v-if="nav.icon" :src="nav.icon" style="width: 30px;height: 30px"></el-image>
<div class="content-card"> <div class="content-card">
@ -22,17 +22,29 @@
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i> <i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
</el-tooltip> </el-tooltip>
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>--> <!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
<el-tooltip placement="bottom" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content"> <div class="MyPopover" slot="content">
<span style="font-size:12px !important;">{{ nav.name }}手机二维码</span><br/><br/> <!-- <span style="font-size:12px !important;">{{ nav.name }}手机二维码</span><br/><br/>-->
<div style="width:100% ;text-align: center"><img v-if="nav.urlId && nav.icon" style="width:150px" <!-- <div style="width:100% ;text-align: center"><img v-if="nav.urlId" style="width:150px"-->
:src="getQR(nav.urlId,nav.icon)"/> <!-- :src="getQR(nav.urlId)"/>-->
</div> <!-- </div>-->
</div> </div>
<i class="qr el-icon-s-grid"></i> <i @click="openShowQR(nav.urlId)" class="qr el-icon-s-grid"></i>
</el-tooltip> <el-dialog
:title="'【'+nav.name+'】'+'手机二维码'"
:visible.sync="dialogVisible"
:show-close="true"
append-to-body
center
width="25%"
:before-close="handleClose">
<div style="width:100% ;text-align: center">
<img v-if="imageCode!==''" style="width:250px" :src="imageCode"/>
</div>
</el-dialog>
</div> </div>
</div> </div>
</template> </template>
@ -49,6 +61,7 @@ export default {
data() { data() {
return { return {
imageCode: '', imageCode: '',
dialogVisible:false,
} }
}, },
mounted() { mounted() {
@ -59,29 +72,35 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
getQR(url_id, icon_url) { handleClose(){
this.dialogVisible=false;
},
openShowQR(id){
this.dialogVisible=true;
this.getQR(id);
},
getQR(url_id) {
let _this = this; let _this = this;
if(url_id && icon_url){ if(url_id){
axios({ axios({
method: 'post', method: 'post',
url: '/api/qrcode/qrc_return', url: '/api/qrcode/qrc_return',
data: { params: {
url_id: url_id, url_id: url_id,
icon_url: icon_url
} }
}).then(function (res) { }).then(function (res) {
if (res.data) { if (res.data!==''){
_this.imageCode = "data:image/jpg;base64," + res.data; _this.imageCode = "data:image/jpg;base64," + res.data;
} }
return false;
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}) })
return this.imageCode
}else{ }else{
return false return false
} }

View File

@ -2,12 +2,47 @@
<div class="wrapper"> <div class="wrapper">
<LeftSide :category="category"></LeftSide> <LeftSide :category="category"></LeftSide>
<div class="main"> <div class="main">
<NewsCard id="百度热搜榜" :loading="loading" :news="baidu"></NewsCard>
<NewsCard id="抖音热搜榜" :loading="loading" :news="douying"></NewsCard> <div class="widget">
<NewsCard id="微博热搜榜" :loading="loading" :news="weibo"></NewsCard> <NewsCard id="百度热搜榜" :loading="loading1" :news="baidu"></NewsCard>
<NewsCard id="知乎热搜榜" :loading="loading" :news="zhihu"></NewsCard> <div style="text-align: end;margin-right: 10px">
<NewsCard id="哔哩哔哩热搜榜" :loading="loading" :news="bili"></NewsCard> <i class="refresh el-icon-refresh" @click="refresh1"></i>
<NewsCard id="今日头条热搜榜" :loading="loading" :news="toutiao"></NewsCard> </div>
</div>
<div class="widget">
<NewsCard id="抖音热搜榜" :loading="loading2" :news="douying"></NewsCard>
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh2"></i>
</div>
</div>
<div class="widget">
<NewsCard id="微博热搜榜" :loading="loading3" :news="weibo"></NewsCard>
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh3"></i>
</div>
</div>
<div class="widget">
<NewsCard id="知乎热搜榜" :loading="loading4" :news="zhihu"></NewsCard>
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh4"></i>
</div>
</div>
<div class="widget">
<NewsCard id="哔哩哔哩热搜榜" :loading="loading5" :news="bili"></NewsCard>
<!-- <NewsCard id="今日头条热搜榜" :loading="loading" :news="toutiao"></NewsCard>-->
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh5"></i>
</div>
</div>
<div class="widget">
<NewsCard id="今日头条热搜榜" :loading="loading6" :news="toutiao"></NewsCard>
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh6"></i>
</div>
</div>
</div> </div>
</div> </div>
@ -26,31 +61,36 @@ export default {
category: [ category: [
{ {
name:'百度热搜榜', name: '百度热搜榜',
childUC:[], childUC: [],
}, },
{ {
name:'抖音热搜榜', name: '抖音热搜榜',
childUC:[], childUC: [],
}, },
{ {
name:'微博热搜榜', name: '微博热搜榜',
childUC:[], childUC: [],
}, },
{ {
name:'知乎热搜榜', name: '知乎热搜榜',
childUC:[], childUC: [],
}, },
{ {
name:'哔哩哔哩热搜榜', name: '哔哩哔哩热搜榜',
childUC:[], childUC: [],
}, },
{ {
name:'今日头条热搜榜', name: '今日头条热搜榜',
childUC:[], childUC: [],
}, },
], ],
loading: true, loading1: true,
loading2: true,
loading3: true,
loading4: true,
loading5: true,
loading6: true,
baidu: { baidu: {
title: "百度热搜榜", title: "百度热搜榜",
hot: [], hot: [],
@ -100,8 +140,61 @@ export default {
}, },
computed: {}, computed: {},
methods: { methods: {
refresh1() {
this.loading1=true;
this.baidu.hot=[];
setTimeout(()=>{
this.loading1=false
},3000)
this.getBaiDuHot();
},
refresh2() {
this.loading2=true;
this.douying.hot=[];
setTimeout(()=>{
this.loading2=false
},3000)
this.getDouyingHot();
},
refresh3() {
this.loading3=true;
this.weibo.hot=[];
setTimeout(()=>{
this.loading3=false
},3000)
this.getWeiBoHot();
},
refresh4() {
this.loading4=true;
this.zhihu.hot=[];
setTimeout(()=>{
this.loading4=false
},3000)
this.getZhiHuHot();
},
refresh5() {
this.loading5=true;
this.bili.hot=[];
setTimeout(()=>{
this.loading5=false
},3000)
this.getBiliHot();
},
refresh6() {
this.loading6=true;
this.toutiao.hot=[];
setTimeout(()=>{
this.loading6=false
},3000)
this.getTouTiaoHot();
},
getPath() { getPath() {
document.querySelector(this.$route.query.name).scrollIntoView(true) if (this.$route.query.name) {
document.querySelector(this.$route.query.name).scrollIntoView(true)
} else {
return false;
}
}, },
getBaiDuHot() { getBaiDuHot() {
let _this = this; let _this = this;
@ -116,16 +209,16 @@ export default {
offset: 0 offset: 0
}); });
} else { } else {
_this.loading = false; _this.loading1 = false;
_this.baidu.hot = res.data.data; _this.baidu.hot = res.data.data;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getDouyingHot() { getDouyingHot() {
@ -142,15 +235,15 @@ export default {
}); });
} else { } else {
_this.douying.hot = res.data.data; _this.douying.hot = res.data.data;
_this.loading = false; _this.loading2 = false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getWeiBoHot() { getWeiBoHot() {
@ -167,15 +260,15 @@ export default {
}); });
} else { } else {
_this.weibo.hot = res.data.data; _this.weibo.hot = res.data.data;
_this.loading = false; _this.loading3 = false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getZhiHuHot() { getZhiHuHot() {
@ -192,15 +285,15 @@ export default {
}); });
} else { } else {
_this.zhihu.hot = res.data.data; _this.zhihu.hot = res.data.data;
_this.loading = false; _this.loading4 = false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getBiliHot() { getBiliHot() {
@ -217,15 +310,15 @@ export default {
}); });
} else { } else {
_this.bili.hot = res.data.data; _this.bili.hot = res.data.data;
_this.loading = false; _this.loading5 = false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
getTouTiaoHot() { getTouTiaoHot() {
@ -242,15 +335,15 @@ export default {
}); });
} else { } else {
_this.toutiao.hot = res.data.data; _this.toutiao.hot = res.data.data;
_this.loading = false; _this.loading6 = false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}, },
} }
@ -265,4 +358,30 @@ export default {
justify-content: flex-start; justify-content: flex-start;
overflow: scroll; overflow: scroll;
} }
.widget {
color: var(--theme-color);
background-color: var(--theme-bg-color);
border-radius: 1.0rem;
flex-direction: column;
height: 540px;
position: relative;
width: 300px;
margin-top: 20px;
margin-left: 25px;
flex-wrap: nowrap;
justify-content: space-between;
}
.refresh {
//font-weight: bold; font-size: 18px
}
.refresh:hover {
font-size: 20px;
color: #999ba5;
cursor: pointer;
}
</style> </style>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="wrapper">
<div class="widget"> <div>
<div class="thin-bar"> <div class="thin-bar">
<div class="nav"> <div class="nav">
<img v-if="news.icon" :src="news.icon" style="width: 30px;height: 30px;margin-left: 15px"> <img v-if="news.icon" :src="news.icon" style="width: 30px;height: 30px;margin-left: 15px">
@ -20,11 +20,8 @@
<span class="news-content"><el-link v-if="item.name" :underline="false" target="_blank" class="news-url" :href="item.url">{{item.name}}</el-link></span> <span class="news-content"><el-link v-if="item.name" :underline="false" target="_blank" class="news-url" :href="item.url">{{item.name}}</el-link></span>
</div> </div>
</div> </div>
<div style="text-align: end;margin-right: 10px">
<i class="refresh el-icon-refresh" @click="refresh"></i>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
@ -55,31 +52,14 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.wrapper {
margin-top: 20px;
margin-left: 25px;
width: 300px;
background: transparent;
}
.widget__section { .widget__section {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.widget {
color: var(--theme-color);
background-color: var(--theme-bg-color);
border-radius: 1.0rem;
flex-direction: column;
height: 540px;
margin: auto;
position: relative;
width: 300px;
flex-wrap: nowrap;
justify-content: space-between;
}
.thin-bar { .thin-bar {
margin-top: 15px; margin-top: 15px;
@ -115,15 +95,7 @@ export default {
color: var(--theme-color); color: var(--theme-color);
position: absolute; position: absolute;
} }
.refresh{
//font-weight: bold;
font-size: 18px
}
.refresh:hover{
font-size: 20px;
color: #999ba5;
cursor: pointer;
}
.hot-rank-1 { .hot-rank-1 {
color:var(--theme-color); color:var(--theme-color);
background: #f1404b; background: #f1404b;

View File

@ -66,18 +66,16 @@ export default {
userId:localStorage.getItem('userId') userId:localStorage.getItem('userId')
} }
}).then(function (res) { }).then(function (res) {
if (res.data.data) {
_this.category = res.data.data; _this.category = res.data.data;
} else {
return false;
}
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else { }else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -90,7 +88,11 @@ export default {
}, },
getPath() { getPath() {
document.querySelector(this.$route.query.name).scrollIntoView(true) if(this.$route.query.name){
document.querySelector(this.$route.query.name).scrollIntoView(true)
}else{
return false;
}
}, },
getUserNav() { getUserNav() {
@ -104,19 +106,15 @@ export default {
} }
}).then(function (res) { }).then(function (res) {
// console.log(res); // console.log(res);
if (res.data) {
_this.userNavList = res.data; _this.userNavList = res.data;
_this.loading=false; _this.loading=false;
}else {
_this.loading=true;
}
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error === null ? '' : error, // message: error === null ? '' : error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -294,11 +294,11 @@ export default {
}); });
} }
}).catch((error)=>{ }).catch((error)=>{
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 50 // offset: 50
}); // });
}) })
}else{ }else{
return; return;

View File

@ -54,17 +54,19 @@ export default {
userId:localStorage.getItem("userId") userId:localStorage.getItem("userId")
} }
}).then(function (res) { }).then(function (res) {
if(res.data){ if(res){
_this.infoData.cateNum=res.data.cateNum; _this.infoData.cateNum=res.data.cateNum;
_this.infoData.urlListNum=res.data.urlListNum; _this.infoData.urlListNum=res.data.urlListNum;
}else{
return false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else { }else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -1,51 +1,42 @@
<template> <template>
<div class="card" data-state="#about"> <div class="card" data-state="#about">
<div class="card-header"> <div class="card-header">
<div class="card-cover" style="background-image: url('@/assets/img/image_processing20200722-26968-18w1tkd.jpg')"></div> <div class="card-cover"
<img class="card-avatar" src='@/assets/img/image_processing20200722-26968-18w1tkd.jpg' alt="avatar"> style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
<h1 class="card-fullname">UserName</h1> <!-- <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
<h2 class="card-jobtitle">common user</h2> <el-avatar v-if="user.avatar===null" class="card-avatar" alt="avatar"> {{user.userLogin}}</el-avatar>
<el-avatar v-if="user.avatar!==null" class="card-avatar" :src="user.avatar" alt="avatar"></el-avatar>
<h1 v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
<h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
<h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
<h2 v-if="user.roleId===0" class="card-jobtitle">Admin</h2>
</div> </div>
<div class="card-main"> <div class="card-main">
<div class="card-section is-active" id="about"> <div class="card-section is-active" id="about">
<div class="card-content"> <div class="card-content">
<div class="card-subtitle">ABOUT</div> <div class="card-subtitle">ABOUT</div>
<p class="card-desc">用户描述 <p class="card-desc">用户描述...
</p> </p>
</div> </div>
<div class="card-social"> <div class="card-content">
<a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <div class="card-subtitle">TIME OF REGISTRATION</div>
<path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a> <p class="card-desc">{{user.userRegistered}}
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> </p>
<path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"></path></svg></a>
<a href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0"></path>
<path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"></path>
<path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"></path></svg></a>
<a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"></path></svg></a>
</div> </div>
<!-- <div class="card-social">-->
<!-- -->
<!-- </div>-->
</div> </div>
<div class="card-section" id="experience"> <div class="card-section" id="experience">
<div class="card-content"> <div class="card-content">
<div class="card-subtitle">登录日志</div> <div class="card-subtitle">登录日志</div>
<div class="card-timeline"> <div class="card-timeline">
<div class="card-item" data-year="2014"> <div v-if="loginLogs" v-for="(item,index) in loginLogs" :key="index" class="card-item" :data-year="item.loginTime.substring(0, 4)">
<div class="card-item-title">Front-end Developer at <span>JotForm</span></div> <div v-if="item.loginIp" class="card-item-title">{{item.loginIp}} <span v-if="user.userLogin">: {{user.userLogin}}</span></div>
<div class="card-item-desc">Disrupt stumptown retro everyday carry unicorn.</div> <div v-if="item.loginTime" class="card-item-title">{{item.loginTime}}</div>
</div> <div v-if="item.location" class="card-item-desc">{{item.location}}</div>
<div class="card-item" data-year="2016">
<div class="card-item-title">UI Developer at <span>GitHub</span></div>
<div class="card-item-desc">Developed new conversion funnels and disrupt.</div>
</div>
<div class="card-item" data-year="2018">
<div class="card-item-title">Illustrator at <span>Google</span></div>
<div class="card-item-desc">Onboarding illustrations for App.</div>
</div>
<div class="card-item" data-year="2020">
<div class="card-item-title">Full-Stack Developer at <span>CodePen</span></div>
<div class="card-item-desc">Responsible for the encomposing brand expreience.</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -53,40 +44,122 @@
<div class="card-content"> <div class="card-content">
<div class="card-subtitle">CONTACT</div> <div class="card-subtitle">CONTACT</div>
<div class="card-contact-wrapper"> <div class="card-contact-wrapper">
<div class="card-contact"> <!-- <div class="card-contact">-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"-->
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path> <!-- stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<circle cx="12" cy="10" r="3"></circle></svg> <!-- <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>-->
Algonquin Rd, Three Oaks Vintage, MI, 49128 <!-- <circle cx="12" cy="10" r="3"></circle>-->
<!-- </svg>-->
<!-- Algonquin Rd, Three Oaks Vintage, MI, 49128-->
<!-- </div>-->
<div class="card-contact" v-if="user.phone">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path>
</svg>
{{user.phone}}
</div> </div>
<div class="card-contact"> <div class="card-contact">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path></svg>(269) 756-9809</div> stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div class="card-contact">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<path d="M22 6l-10 7L2 6"></path></svg> <path d="M22 6l-10 7L2 6"></path>
william@rocheald.com </svg>
{{user.userEmail}}
</div> </div>
<button class="contact-me">WORK TOGETHER</button> <!-- <button class="contact-me">注销账号</button>-->
</div> </div>
</div> </div>
</div> </div>
<div class="card-section" id="update">
<div class="card-content">
<div class="card-subtitle">修改信息</div>
<el-form :model="updateForm" :rules="rules" ref="updateForm" class="form">
<el-form-item prop="avatar">
<el-input
v-model="updateForm.avatar"
prefix-icon="el-icon-link"
placeholder="头像链接"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item prop="nickname">
<el-input
v-model="updateForm.nickname"
prefix-icon="el-icon-user"
placeholder="昵称"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item prop="phone">
<el-input
v-model="updateForm.phone"
prefix-icon="el-icon-phone"
placeholder="联系电话"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item>
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
<el-button @click="resetForm('updateForm')">重置</el-button>
<el-button type="primary" @click="updateUserInfo('updateForm')">确认
</el-button
>
</div>
</el-form-item>
</el-form>
</div>
</div>
<div class="card-buttons"> <div class="card-buttons">
<button data-section="#about" class="is-active">我的</button> <button data-section="#about" class="is-active">我的</button>
<button data-section="#experience">修改</button>
<button data-section="#contact">联系方式</button> <button data-section="#contact">联系方式</button>
<button data-section="#experience">日志</button>
<button data-section="#update">修改信息</button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
import Vue from "vue";
export default { export default {
name: "PersonalInfoCard", name: "PersonalInfoCard",
data() { data() {
return {} return {
user:{
avatar:null,
id:null,
nickname:null,
phone:null,
userEmail:null,
userLogin:null,
userRegistered:null,
roleId:null
},
loginLogs:[],
updateForm:{
avatar:null,
nickname:null,
phone:null,
},
rules: {
avatar: [
// requiredo
{required: true, message: "请输入头像链接", trigger: "blur"},
],
nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
},
}
}, },
mounted() { mounted() {
this.getUserAllInfo();
this.getUserLoginLogs();
const buttons = document.querySelectorAll(".card-buttons button"); const buttons = document.querySelectorAll(".card-buttons button");
const sections = document.querySelectorAll(".card-section"); const sections = document.querySelectorAll(".card-section");
const card = document.querySelector(".card"); const card = document.querySelector(".card");
@ -112,7 +185,124 @@ export default {
}, },
computed: {}, computed: {},
methods: {} methods: {
//
resetForm(formName) {
this.$refs[formName].resetFields();
},
updateUserInfo(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
let _this=this;
axios({
method: 'get',
url: '/api/updateUserDetails',
params: {
avatar:this.updateForm.avatar,
nickname:this.updateForm.nickname,
id:localStorage.getItem('userId'),
phone:this.updateForm.phone,
}
}).then(function (res) {
if(res.data.code!==200){
Vue.prototype.$notify.error({
title: '错误',
message: "修改失败!",
offset: 0
});
}else{
Vue.prototype.$notify.success({
title: 'OK',
message: "修改成功!",
offset: 0
});
_this.getUserAllInfo();
}
}).catch((error) => {
// Vue.prototype.$notify.error({
// title: '',
// message: error,
// offset: 0
// });
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "登录状态失效,请重新登录!",
offset: 0
});
}
}
})
},
getUserAllInfo() {
let _this = this;
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
axios({
method: 'get',
url: '/api/getUserDetailes',
params: {
id: localStorage.getItem("userId")
}
}).then(function (res) {
if(res.data){
_this.user.avatar=res.data.avatar;
_this.user.id=res.data.id;
_this.user.nickname=res.data.nickname;
_this.user.phone=res.data.phone;
_this.user.userEmail=res.data.userEmail;
_this.user.userLogin=res.data.userLogin;
_this.user.userRegistered=res.data.userRegistered;
_this.user.roleId=res.data.roleId;
}
}).catch((error) => {
// Vue.prototype.$notify.error({
// title: '',
// message: error,
// offset: 0
// });
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "登录状态失效,请重新登录!",
offset: 0
});
}
},
getUserLoginLogs() {
let _this = this;
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
axios({
method: 'get',
url: '/api/getUserLoginLogs',
params: {
userId: localStorage.getItem("userId")
}
}).then(function (res) {
if(res.data){
_this.loginLogs=res.data;
}
}).catch((error) => {
// Vue.prototype.$notify.error({
// title: '',
// message: error,
// offset: 0
// });
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "登录状态失效,请重新登录!",
offset: 0
});
}
},
}
} }
</script> </script>
@ -143,6 +333,7 @@ export default {
.card[data-state="#about"] { .card[data-state="#about"] {
height: 450px; height: 450px;
} }
.card[data-state="#about"] .card-main { .card[data-state="#about"] .card-main {
padding-top: 0; padding-top: 0;
} }
@ -158,10 +349,12 @@ export default {
.card.is-active .card-header { .card.is-active .card-header {
height: 80px; height: 80px;
} }
.card.is-active .card-cover { .card.is-active .card-cover {
height: 100px; height: 100px;
top: -50px; top: -50px;
} }
.card.is-active .card-avatar { .card.is-active .card-avatar {
transform: none; transform: none;
left: 20px; left: 20px;
@ -169,15 +362,18 @@ export default {
height: 50px; height: 50px;
bottom: 10px; bottom: 10px;
} }
.card.is-active .card-fullname, .card.is-active .card-fullname,
.card.is-active .card-jobtitle { .card.is-active .card-jobtitle {
left: 86px; left: 86px;
transform: none; transform: none;
} }
.card.is-active .card-fullname { .card.is-active .card-fullname {
bottom: 18px; bottom: 18px;
font-size: 19px; font-size: 19px;
} }
.card.is-active .card-jobtitle { .card.is-active .card-jobtitle {
bottom: 16px; bottom: 16px;
letter-spacing: 1px; letter-spacing: 1px;
@ -192,6 +388,7 @@ export default {
width: 100%; width: 100%;
transition: 0.3s; transition: 0.3s;
} }
.card-header * { .card-header * {
transition: 0.3s; transition: 0.3s;
} }
@ -221,8 +418,12 @@ export default {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
position: absolute; position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
cursor: pointer;
transform: translateX(-50%) translateY(-64px); transform: translateX(-50%) translateY(-64px);
} }
@ -271,7 +472,7 @@ export default {
.card-desc { .card-desc {
line-height: 1.6; line-height: 1.6;
color: #636b6f; color: var(--theme-color);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
@ -284,14 +485,16 @@ export default {
padding: 0 20px; padding: 0 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.card-social svg { .card-social svg {
fill: #a5b5ce; fill: #a5b5ce;
width: 16px; width: 16px;
display: block; display: block;
transition: 0.3s; transition: 0.3s;
} }
.card-social a { .card-social a {
color: #8797a1; color: var(--theme-color);
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: 50%; border-radius: 50%;
@ -303,9 +506,11 @@ export default {
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.card-social a:hover svg { .card-social a:hover svg {
fill: #637faa; fill: #637faa;
} }
.card-social a:last-child { .card-social a:last-child {
margin-right: 0; margin-right: 0;
} }
@ -319,6 +524,7 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.card-buttons button { .card-buttons button {
flex: 1 1 auto; flex: 1 1 auto;
-webkit-user-select: none; -webkit-user-select: none;
@ -337,6 +543,7 @@ export default {
outline: 0; outline: 0;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
} }
.card-buttons button.is-active, .card-buttons button:hover { .card-buttons button.is-active, .card-buttons button:hover {
color: #2b2c48; color: #2b2c48;
border-bottom: 3px solid #8a84ff; border-bottom: 3px solid #8a84ff;
@ -346,6 +553,7 @@ export default {
.card-section { .card-section {
display: none; display: none;
} }
.card-section.is-active { .card-section.is-active {
display: block; display: block;
-webkit-animation: fadeIn 0.6s both; -webkit-animation: fadeIn 0.6s both;
@ -371,10 +579,12 @@ export default {
opacity: 1; opacity: 1;
} }
} }
.card-timeline { .card-timeline {
margin-top: 30px; margin-top: 30px;
position: relative; position: relative;
} }
.card-timeline:after { .card-timeline:after {
background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%); background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
content: ""; content: "";
@ -393,9 +603,11 @@ export default {
padding-bottom: 30px; padding-bottom: 30px;
z-index: 1; z-index: 1;
} }
.card-item:last-child { .card-item:last-child {
padding-bottom: 5px; padding-bottom: 5px;
} }
.card-item:after { .card-item:after {
content: attr(data-year); content: attr(data-year);
width: 10px; width: 10px;
@ -434,14 +646,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
color: #6f6f7b; color: var(--theme-color);
font-family: "DM Sans", sans-serif; font-family: "DM Sans", sans-serif;
line-height: 1.6; line-height: 1.6;
cursor: pointer; cursor: pointer;
} }
.card-contact + .card-contact { .card-contact + .card-contact {
margin-top: 16px; margin-top: 16px;
} }
.card-contact svg { .card-contact svg {
flex-shrink: 0; flex-shrink: 0;
width: 30px; width: 30px;

View File

@ -99,11 +99,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {

View File

@ -83,11 +83,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {

View File

@ -52,11 +52,11 @@ export default {
} }
}).catch((error)=>{ }).catch((error)=>{
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -152,11 +152,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -188,11 +188,11 @@ export default {
_this.from.email_sendEmail=res.data.email_sendEmail; _this.from.email_sendEmail=res.data.email_sendEmail;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -161,11 +161,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else { }else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -209,11 +209,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
return false return false

View File

@ -130,11 +130,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -171,11 +171,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -222,11 +222,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
} else { } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -268,11 +268,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else { }else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
@ -327,11 +327,11 @@ export default {
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({

View File

@ -6,17 +6,11 @@
:http-request="selectPicUpload" :http-request="selectPicUpload"
:auto-upload="true" :auto-upload="true"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:on-preview="handlePictureCardPreview"
:limit="1"
name="multipartFile" name="multipartFile"
> >
<img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" /> <img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-upload> </el-upload>
</template> </template>
<script> <script>
@ -32,8 +26,6 @@ export default {
data() { data() {
return { return {
imageUrl: '', imageUrl: '',
dialogImageUrl: '',
dialogVisible: false
} }
}, },
mounted() { mounted() {
@ -45,10 +37,6 @@ export default {
computed: {}, computed: {},
methods: { methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// //
selectPicUpload(obj) { selectPicUpload(obj) {
@ -66,7 +54,7 @@ export default {
}, },
data:fd, data:fd,
}).then(function (res) { }).then(function (res) {
if(res.data.msg!=="添加成功!"){ if(res.data.code!==200){
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
title: '错误', title: '错误',
message: "上传失败!", message: "上传失败!",
@ -83,12 +71,12 @@ export default {
_this.getImage(_this.configName); _this.getImage(_this.configName);
} }
}).catch((error) => { }).catch((error) => {
console.log(error) // console.log(error)
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
return false; return false;
@ -115,17 +103,17 @@ export default {
name:name name:name
}, },
}).then(function (res) { }).then(function (res) {
if(res){ if(res!==undefined){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64'; _this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{ }else{
return false; return false;
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 0 // offset: 0
}); // });
}) })
}else{ }else{
return false; return false;
@ -149,9 +137,9 @@ export default {
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === "image/jpeg";
const isJPG2 = file.type === "image/jpg"; const isJPG2 = file.type === "image/jpg";
const isPNG = file.type === "image/png"; const isPNG = file.type === "image/png";
const isGif = file.type === "image/gif"; // const isGif = file.type === "image/gif";
const isLt5M = file.size / 1024 / 1024 < 5; const isLt5M = file.size / 1024 / 1024 < 5;
if (!isJPG && !isJPG2 && !isPNG && !isGif) { if (!isJPG && !isJPG2 && !isPNG) {
this.$message.warning("只支持jpg,png,jpeg,gif格式图片"); this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
} }
if (!isLt5M) { if (!isLt5M) {
@ -159,9 +147,6 @@ export default {
} }
return (isJPG || isJPG2 || isPNG) && isLt5M; return (isJPG || isJPG2 || isPNG) && isLt5M;
}, },
handleRemove(file) {
this.imageUrl = "";
},
} }

View File

@ -302,11 +302,11 @@ export default {
}); });
} }
}).catch((error)=>{ }).catch((error)=>{
Vue.prototype.$notify.error({ // Vue.prototype.$notify.error({
title: '错误', // title: '',
message: error, // message: error,
offset: 50 // offset: 50
}); // });
}) })
}else{ }else{
return; return;

View File

@ -18,7 +18,9 @@
<div class="app"> <div class="app">
<HomeHeader></HomeHeader> <HomeHeader></HomeHeader>
<!-- <router-view></router-view>--> <!-- <router-view></router-view>-->
<keep-alive>
<router-view></router-view> <router-view></router-view>
</keep-alive>
<div class="overlay-app"></div> <div class="overlay-app"></div>
</div> </div>
</body> </body>