✨ 作品集面板功能
This commit is contained in:
ronger
parent
af361e297e
commit
0909fa2c65
@ -1,31 +1,34 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-row class="row-cards row-deck" :gutter="10">
|
||||
<el-col v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
|
||||
<el-col class="card">
|
||||
<el-col class="card-body d-flex flex-column">
|
||||
<el-col :span="24" class="mr-3">
|
||||
<a v-show="portfolio.headImgUrl">
|
||||
<el-image class="card-img-top" style="height: 10rem;" :src="portfolio.headImgUrl"></el-image>
|
||||
</a>
|
||||
<a v-show="!portfolio.headImgUrl">
|
||||
<el-image class="card-img-top" style="height: 10rem;"
|
||||
src="https://static.rymcu.com/article/1574441170152.jpg"></el-image>
|
||||
</a>
|
||||
<el-row class="row-cards row-deck" :gutter="20">
|
||||
<el-col :span="8" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
|
||||
<el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<el-col style="padding: 0;">
|
||||
<el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-col style="padding: 0 10px;">
|
||||
<h4 class="article-header-md">
|
||||
<el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
|
||||
v-html="portfolio.portfolioTitle"></el-link>
|
||||
</h4>
|
||||
<div class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</div>
|
||||
<div class="d-flex align-items-center pt-5 mt-auto">
|
||||
<div class="ml-auto text-muted">
|
||||
<span>{{ portfolio.timeAgo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-else style="margin-bottom: 20px;">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<el-col style="padding: 0;">
|
||||
<el-image :src="portfolio.headImgUrl" style="width:280px;height: 240px;" fit="cover"></el-image>
|
||||
</el-col>
|
||||
<el-col style="padding: 0 10px;">
|
||||
<h4 class="article-header-md">
|
||||
<el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
|
||||
v-html="portfolio.portfolioTitle"></el-link>
|
||||
</h4>
|
||||
</el-col>
|
||||
<el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-show="!portfolios" class="text-center">
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
@select="handleSelectMenu">
|
||||
<el-menu-item index="index">首页</el-menu-item>
|
||||
<el-menu-item index="topic">专题</el-menu-item>
|
||||
<el-menu-item index="portfolios">作品集</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -185,6 +186,11 @@ export default {
|
||||
path: '/topic/news?page=1'
|
||||
})
|
||||
break;
|
||||
case 'portfolios':
|
||||
_ts.$router.push({
|
||||
path: '/portfolios?page=1'
|
||||
})
|
||||
break;
|
||||
case 'github':
|
||||
window.open("https://github.com/rymcu");
|
||||
return false;
|
||||
|
||||
@ -23,18 +23,30 @@
|
||||
<el-col :span="24">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:aspect-ratio="4 / 1"
|
||||
:aspect-ratio="1 / 1"
|
||||
:src="headImgUrl"
|
||||
:checkCrossOrigin="false"
|
||||
:checkOrientation="false"
|
||||
:imgStyle="{width: '950px', height: '237.5px'}"
|
||||
:imgStyle="{width: '480px', height: '480px'}"
|
||||
:autoCropArea="1"
|
||||
:autoCrop="autoCrop"
|
||||
preview=".preview"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: 2rem;">
|
||||
<div class="preview preview-large"/>
|
||||
<el-col :span="8">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<el-col>
|
||||
<div class="preview preview-large"/>
|
||||
</el-col>
|
||||
<el-col style="padding: 0 10px;">
|
||||
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
|
||||
</el-col>
|
||||
<el-col class="text-muted article-summary-md" style="padding: 0 10px;">
|
||||
{{ portfolio.portfolioDescription }}
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: 2rem;">
|
||||
<el-upload
|
||||
@ -68,340 +80,337 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {mapState} from 'vuex';
|
||||
import saveSvg from 'save-svg-as-png';
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
import Vue from 'vue';
|
||||
import {mapState} from 'vuex';
|
||||
import saveSvg from 'save-svg-as-png';
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
||||
export default {
|
||||
name: "PortfolioPost",
|
||||
validate({params, store}) {
|
||||
if (typeof params.portfolio_id === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||
},
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store.dispatch('portfolio/fetchPostDetail', params)
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolioDetail: state => state.portfolio.detail.data,
|
||||
uploadHeaders: state => {
|
||||
return {'X-Upload-Token': state.uploadHeaders}
|
||||
}
|
||||
}),
|
||||
idPortfolio() {
|
||||
return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
portfolio: {
|
||||
idPortfolio: 0,
|
||||
portfolioDescription: ''
|
||||
},
|
||||
rules: {
|
||||
portfolioTitle: [
|
||||
{required: true, message: '请输入作品集名称', trigger: 'blur'}
|
||||
],
|
||||
portfolioDescription: [
|
||||
{required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
loading: false,
|
||||
tokenURL: {
|
||||
URL: '',
|
||||
linkToImageURL: '',
|
||||
token: ''
|
||||
},
|
||||
headImgUrl: '',
|
||||
cropImg: '',
|
||||
isEdit: false,
|
||||
autoCrop: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_initEditor(data) {
|
||||
let _ts = this;
|
||||
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
'headings',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'link',
|
||||
'|',
|
||||
'list',
|
||||
'ordered-list',
|
||||
'check',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'quote',
|
||||
'line',
|
||||
'code',
|
||||
'inline-code',
|
||||
'insert-before',
|
||||
'insert-after',
|
||||
'|',
|
||||
'upload',
|
||||
// 'record',
|
||||
'table',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'edit-mode',
|
||||
{
|
||||
name: 'more',
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'both',
|
||||
'preview',
|
||||
'info'
|
||||
],
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: 'sv',
|
||||
tab: '\t',
|
||||
cache: {
|
||||
enable: this.$route.params.article_id ? false : true,
|
||||
id: this.$route.params.article_id ? this.$route.params.article_id : '',
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
},
|
||||
preview: {
|
||||
markdown: {
|
||||
toc: true,
|
||||
},
|
||||
math: {
|
||||
inlineDigit: true
|
||||
},
|
||||
delay: 500,
|
||||
mode: data.mode,
|
||||
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||
parse: (element) => {
|
||||
if (element.style.display === 'none') {
|
||||
return
|
||||
}
|
||||
// LazyLoadImage();
|
||||
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
max: 10 * 1024 * 1024,
|
||||
url: this.tokenURL.URL,
|
||||
linkToImgUrl: this.tokenURL.linkToImageURL,
|
||||
token: this.tokenURL.token,
|
||||
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
|
||||
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
|
||||
replace('/\\s/g', '')
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(res) {
|
||||
let _ts = this;
|
||||
if (res && res.data && res.data.url) {
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = res.data.url;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||
} else {
|
||||
_ts.$message.error('上传失败!');
|
||||
}
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!(isJPG || isPNG)) {
|
||||
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
this.fileToBase64(file);
|
||||
return false;
|
||||
},
|
||||
fileToBase64(file) {
|
||||
let _ts = this;
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function () {
|
||||
_ts.$set(_ts, 'headImgUrl', this.result);
|
||||
_ts.$refs.cropper.replace(this.result);
|
||||
}
|
||||
},
|
||||
async updatePortfolio() {
|
||||
let _ts = this;
|
||||
_ts.$set(_ts, 'loading', true);
|
||||
let id = _ts.idPortfolio;
|
||||
let portfolioDescription = _ts.contentEditor.getValue();
|
||||
let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
|
||||
let data = _ts.portfolio;
|
||||
data.portfolioDescription = portfolioDescription;
|
||||
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||
let title = id ? '更新' : '添加';
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||
if (res && res.message) {
|
||||
_ts.$message.error(res.message);
|
||||
} else {
|
||||
_ts.$message({
|
||||
type: 'success',
|
||||
message: title + '成功!'
|
||||
});
|
||||
_ts.$router.push({
|
||||
path: '/portfolio/' + res.idPortfolio
|
||||
})
|
||||
}
|
||||
_ts.$set(_ts, 'loading', false)
|
||||
}).catch(error => _ts.$set(_ts, 'loading', false))
|
||||
},
|
||||
deletePortfolio() {
|
||||
let _ts = this;
|
||||
_ts.$confirm('确定删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_ts.$axios.$delete('/api/portfolio/delete', {
|
||||
params: {
|
||||
idPortfolio: _ts.idPortfolio
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res) {
|
||||
if (res.message) {
|
||||
_ts.$message(res.message);
|
||||
} else {
|
||||
_ts.$router.push({
|
||||
path: '/user/' + _ts.$store.state.userInfo?.nickname
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
_ts.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.$refs.cropper.reset();
|
||||
},
|
||||
// get image data for post processing, e.g. upload or setting image src
|
||||
cropImage() {
|
||||
let _ts = this;
|
||||
try {
|
||||
_ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = _ts.cropImg;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', _ts.cropImg);
|
||||
_ts.$message.success('已裁剪 !');
|
||||
} catch (e) {
|
||||
_ts.$message.error('图片获取失败 !');
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _ts = this;
|
||||
_ts.$store.commit("setActiveMenu", "portfolio-post");
|
||||
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: res.uploadToken || '',
|
||||
URL: res.uploadURL || '',
|
||||
linkToImageURL: res.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
let portfolioContent = '';
|
||||
if (_ts.idPortfolio) {
|
||||
_ts.$set(_ts, 'isEdit', true);
|
||||
_ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
|
||||
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
|
||||
_ts.$refs.cropper.replace(_ts.portfolioDetail.headImgUrl);
|
||||
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
||||
} else {
|
||||
_ts.$set(_ts, 'isEdit', false);
|
||||
}
|
||||
|
||||
this.contentEditor = this._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||
resize: false,
|
||||
value: portfolioContent
|
||||
});
|
||||
export default {
|
||||
name: "PortfolioPost",
|
||||
validate({params, store}) {
|
||||
if (typeof params.portfolio_id === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||
},
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store.dispatch('portfolio/fetchPostDetail', params)
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolioDetail: state => state.portfolio.detail.data,
|
||||
uploadHeaders: state => {
|
||||
return {'X-Upload-Token': state.uploadHeaders}
|
||||
}
|
||||
}),
|
||||
idPortfolio() {
|
||||
return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
portfolio: {
|
||||
idPortfolio: 0,
|
||||
portfolioDescription: ''
|
||||
},
|
||||
rules: {
|
||||
portfolioTitle: [
|
||||
{required: true, message: '请输入作品集名称', trigger: 'blur'}
|
||||
],
|
||||
portfolioDescription: [
|
||||
{required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
loading: false,
|
||||
tokenURL: {
|
||||
URL: '',
|
||||
linkToImageURL: '',
|
||||
token: ''
|
||||
},
|
||||
headImgUrl: '',
|
||||
cropImg: '',
|
||||
isEdit: false,
|
||||
autoCrop: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_initEditor(data) {
|
||||
let _ts = this;
|
||||
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
'headings',
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'link',
|
||||
'|',
|
||||
'list',
|
||||
'ordered-list',
|
||||
'check',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'quote',
|
||||
'line',
|
||||
'code',
|
||||
'inline-code',
|
||||
'insert-before',
|
||||
'insert-after',
|
||||
'|',
|
||||
'upload',
|
||||
// 'record',
|
||||
'table',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'edit-mode',
|
||||
{
|
||||
name: 'more',
|
||||
toolbar: [
|
||||
'fullscreen',
|
||||
'both',
|
||||
'preview',
|
||||
'info'
|
||||
],
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: 'sv',
|
||||
tab: '\t',
|
||||
cache: {
|
||||
enable: this.$route.params.article_id ? false : true,
|
||||
id: this.$route.params.article_id ? this.$route.params.article_id : '',
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
},
|
||||
preview: {
|
||||
markdown: {
|
||||
toc: true,
|
||||
},
|
||||
math: {
|
||||
inlineDigit: true
|
||||
},
|
||||
delay: 500,
|
||||
mode: data.mode,
|
||||
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||
parse: (element) => {
|
||||
if (element.style.display === 'none') {
|
||||
return
|
||||
}
|
||||
// LazyLoadImage();
|
||||
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
max: 10 * 1024 * 1024,
|
||||
url: this.tokenURL.URL,
|
||||
linkToImgUrl: this.tokenURL.linkToImageURL,
|
||||
token: this.tokenURL.token,
|
||||
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(res) {
|
||||
let _ts = this;
|
||||
if (res && res.data && res.data.url) {
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = res.data.url;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||
} else {
|
||||
_ts.$message.error('上传失败!');
|
||||
}
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!(isJPG || isPNG)) {
|
||||
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
this.fileToBase64(file);
|
||||
return false;
|
||||
},
|
||||
fileToBase64(file) {
|
||||
let _ts = this;
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function () {
|
||||
_ts.$set(_ts, 'headImgUrl', this.result);
|
||||
_ts.$refs.cropper.replace(this.result);
|
||||
}
|
||||
},
|
||||
async updatePortfolio() {
|
||||
let _ts = this;
|
||||
_ts.$set(_ts, 'loading', true);
|
||||
let id = _ts.idPortfolio;
|
||||
let portfolioDescription = _ts.contentEditor.getValue();
|
||||
let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
|
||||
let data = _ts.portfolio;
|
||||
data.portfolioDescription = portfolioDescription;
|
||||
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||
let title = id ? '更新' : '添加';
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||
if (res && res.message) {
|
||||
_ts.$message.error(res.message);
|
||||
} else {
|
||||
_ts.$message({
|
||||
type: 'success',
|
||||
message: title + '成功!'
|
||||
});
|
||||
_ts.$router.push({
|
||||
path: '/portfolio/' + res.idPortfolio
|
||||
})
|
||||
}
|
||||
_ts.$set(_ts, 'loading', false)
|
||||
}).catch(error => _ts.$set(_ts, 'loading', false))
|
||||
},
|
||||
deletePortfolio() {
|
||||
let _ts = this;
|
||||
_ts.$confirm('确定删除吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_ts.$axios.$delete('/api/portfolio/delete', {
|
||||
params: {
|
||||
idPortfolio: _ts.idPortfolio
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res) {
|
||||
if (res.message) {
|
||||
_ts.$message(res.message);
|
||||
} else {
|
||||
_ts.$router.push({
|
||||
path: '/user/' + _ts.$store.state.userInfo?.nickname
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
_ts.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.$refs.cropper.reset();
|
||||
},
|
||||
// get image data for post processing, e.g. upload or setting image src
|
||||
cropImage() {
|
||||
let _ts = this;
|
||||
try {
|
||||
_ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = _ts.cropImg;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', _ts.cropImg);
|
||||
_ts.$message.success('已裁剪 !');
|
||||
} catch (e) {
|
||||
_ts.$message.error('图片获取失败 !');
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _ts = this;
|
||||
_ts.$store.commit("setActiveMenu", "portfolio-post");
|
||||
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: res.uploadToken || '',
|
||||
URL: res.uploadURL || '',
|
||||
linkToImageURL: res.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
let portfolioContent = '';
|
||||
if (_ts.idPortfolio) {
|
||||
_ts.$set(_ts, 'isEdit', true);
|
||||
_ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
|
||||
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
|
||||
_ts.$refs.cropper.replace(_ts.portfolioDetail.headImgUrl);
|
||||
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
||||
} else {
|
||||
_ts.$set(_ts, 'isEdit', false);
|
||||
}
|
||||
|
||||
this.contentEditor = this._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||
resize: false,
|
||||
value: portfolioContent
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~vditor/src/assets/scss/index.scss";
|
||||
.preview-area {
|
||||
width: 16rem;
|
||||
}
|
||||
@import "~vditor/src/assets/scss/index.scss";
|
||||
|
||||
.preview-area p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.preview-area {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.preview-area p:last-of-type {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.preview-area p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.crop-placeholder {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #ccc;
|
||||
}
|
||||
.preview-area p:last-of-type {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cropped-image img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.crop-placeholder {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.img-cropper {
|
||||
width: 950px;
|
||||
min-height: 300px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
|
||||
}
|
||||
.cropped-image img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.preview-large {
|
||||
width: 950px;
|
||||
height: 237.5px;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 3rem;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-cropper {
|
||||
width: 480px;
|
||||
min-height: 480px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.preview-large {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
54
pages/portfolios.vue
Normal file
54
pages/portfolios.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<el-row class="wrapper">
|
||||
<el-col>
|
||||
<h1>最新作品集</h1>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import PortfolioList from "~/components/common/portfolio/list";
|
||||
|
||||
export default {
|
||||
name: "Portfolios",
|
||||
components: {PortfolioList},
|
||||
fetch({store, query, error}) {
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('portfolio/fetchList', {page: query.page || 1})
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$route.query': function () {
|
||||
this.$store.dispatch('portfolio/fetchList', {page: this.$route.query.page || 1})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolios: state => state.portfolio.list.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
currentChangePortfolio(page) {
|
||||
this.$router.push({
|
||||
name: 'portfolios',
|
||||
query: {
|
||||
page: page
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setActiveMenu', 'portfolios');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -73,15 +73,20 @@ export const mutations = {
|
||||
|
||||
export const actions = {
|
||||
// 获取作品集列表
|
||||
fetchList({commit}, params = {}) {
|
||||
fetchList({commit, state}, params = {}) {
|
||||
|
||||
// 清空已有数据
|
||||
commit('updateListData', getDefaultListData())
|
||||
commit('updateListFetching', true)
|
||||
let currentData = JSON.parse(JSON.stringify(state)).list.data
|
||||
if (Number(params.page) === currentData.pagination.currentPage) {
|
||||
commit('updateListFetching', false)
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
page: params.page,
|
||||
topicUri: params.topic_uri
|
||||
}
|
||||
commit('updateListData', getDefaultListData())
|
||||
|
||||
return this.$axios
|
||||
.$get(`${BASE_API_PATH}/portfolios`, {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user