fix(other): 作品集fix

This commit is contained in:
祝梦园 2023-01-06 19:15:19 +08:00
parent 272eadbaed
commit 12c92c6288

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="wrapper"> <div class="wrapper_portfolio" style="margin: 20px">
<div v-if="isAuthor"> <div v-if="isAuthor">
<div style="margin-bottom: 1rem;" v-if="isEdit"> <div style="margin-bottom: 1rem;" v-if="isEdit">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
@ -38,6 +38,7 @@
:checkCrossOrigin="false" :checkCrossOrigin="false"
:checkOrientation="false" :checkOrientation="false"
:imgStyle="{'width': '200px'}" :imgStyle="{'width': '200px'}"
:img="headImgUrl"
:src="headImgUrl" :src="headImgUrl"
preview=".preview" preview=".preview"
ref="cropper" ref="cropper"
@ -57,12 +58,11 @@
class="avatar-uploader"> class="avatar-uploader">
<div> <div>
<el-button plain round type="primary">上传</el-button> <el-button plain round type="primary">上传</el-button>
</div>
</el-upload>
<el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置 <el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置
</el-button> </el-button>
<el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button> <el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
</div>
</el-upload>
<p style="color: red;padding-right: 5px;">* <p style="color: red;padding-right: 5px;">*
<span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span> <span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
</p> </p>
@ -251,18 +251,18 @@ export default {
// placeholder: data.placeholder, // placeholder: data.placeholder,
}) })
}, },
// handleAvatarSuccess(res) { handleAvatarSuccess(res) {
// let _ts = this; let _ts = this;
// if (res && res.data && res.data.url) { if (res && res.data && res.data.url) {
// let portfolio = _ts.portfolio; let portfolio = _ts.portfolio;
// portfolio.headImgUrl = res.data.url; portfolio.headImgUrl = res.data.url;
// portfolio.headImgType = '0'; portfolio.headImgType = '0';
// _ts.$set(_ts, 'portfolio', portfolio); _ts.$set(_ts, 'portfolio', portfolio);
// _ts.$set(_ts, 'headImgUrl', res.data.url); _ts.$set(_ts, 'headImgUrl', res.data.url);
// } else { } else {
// _ts.$message.error('!'); _ts.$message.error('上传失败!');
// } }
// }, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'; const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png'; const isPNG = file.type === 'image/png';
@ -276,30 +276,21 @@ export default {
return false; return false;
} }
this.fileToBase64(file); this.fileToBase64(file);
return false;
// this.$set(_ts, 'headImgUrl', res.data.url);
}, },
fileToBase64(file) { fileToBase64(file) {
let _ts = this; let _ts = this;
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function () {
let portfolio = _ts.portfolio;
portfolio.headImgUrl = this.result;
portfolio.headImgType = '0';
_ts.$set(_ts, 'portfolio', portfolio);
_ts.$set(_ts, 'headImgUrl', this.result); _ts.$set(_ts, 'headImgUrl', this.result);
if ((_ts.portfolio.headImgUrl || undefined) != undefined) { _ts.$refs.cropper?.replace(this.result);
_ts.$message.success('图片上传成功,可自定义裁剪');
} else {
_ts.$message.warning('图片上传失败,请重传');
}
} }
}, },
async updatePortfolio() { async updatePortfolio() {
//headImgUrl //headImgUrl
let _ts = this; let _ts = this;
this.cropImage()
_ts.$set(_ts, 'loading', true); _ts.$set(_ts, 'loading', true);
let id = _ts.idPortfolio; let id = _ts.idPortfolio;
let portfolioDescription = _ts.contentEditor.getValue(); let portfolioDescription = _ts.contentEditor.getValue();
@ -429,7 +420,7 @@ export default {
_ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail))); _ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl); _ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
if (!this.isEdit) { if (!this.isEdit) {
_ts.$refs?.cropper.replace(_ts.portfolioDetail.headImgUrl); _ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
portfolioContent = _ts.portfolioDetail.portfolioDescription; portfolioContent = _ts.portfolioDetail.portfolioDescription;
} }
@ -452,7 +443,7 @@ export default {
<style lang="less"> <style lang="less">
@import "~vditor/src/assets/less/index.less"; @import "~vditor/src/assets/less/index.less";
.wrapper { .wrapper_portfolio {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }