update
This commit is contained in:
parent
fde3e77bb5
commit
31a770ebe4
@ -35,7 +35,7 @@
|
|||||||
<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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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() {
|
||||||
|
if(this.$route.query.name){
|
||||||
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
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
|
||||||
});
|
// });
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
<i @click="openShowQR(nav.urlId)" class="qr el-icon-s-grid"></i>
|
||||||
|
<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>
|
</div>
|
||||||
<i class="qr el-icon-s-grid"></i>
|
|
||||||
</el-tooltip>
|
</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
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
|
||||||
@ -50,7 +85,12 @@ export default {
|
|||||||
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() {
|
||||||
|
if (this.$route.query.name) {
|
||||||
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
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>
|
@ -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;
|
||||||
|
@ -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() {
|
||||||
|
if(this.$route.query.name){
|
||||||
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
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({
|
||||||
|
@ -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;
|
||||||
|
@ -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({
|
||||||
|
@ -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: [
|
||||||
|
// required:规则,o:失去焦点触发
|
||||||
|
{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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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({
|
||||||
|
@ -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({
|
||||||
|
@ -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
|
||||||
|
@ -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({
|
||||||
|
@ -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({
|
||||||
|
@ -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 = "";
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user