peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复

Browse Source
This commit is contained in:
祝梦园 2023-09-08 18:15:07 +08:00
parent 0bddb6b27a
commit 4d49021f41
8 changed files with 115 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config/api.config.js
View File

@ -3,7 +3,7 @@ import {NODE_ENV} from '../environment'
const apisMap = {
development: {
FE: 'http://localhost:3000',
BASE: 'http://localhost:8099/forest',
BASE: 'https://rymcu.com',
CDN: '',
PROXY: '/proxy',
SOCKET: 'http://localhost:3000/ws',
@ -12,11 +12,11 @@ const apisMap = {
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
},
test: {
FE: 'https://test.rymcu.com',
BASE: 'https://test.rymcu.com',
FE: 'https://rymcu.com',
BASE: 'https://rymcu.com',
CDN: 'https://static.rymcu.com',
PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://test.rymcu.com/wss',
SOCKET: 'https://rymcu.com/wss',
GRAVATAR: 'https://static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'

6
nuxt.config.js
View File

@ -58,8 +58,8 @@ export default {
{src: '~/plugins/axios'},
{src: '~/plugins/element-ui'},
{src: '~/plugins/vditor', ssr: false},
{src: '~/plugins/vue-sse'}
// {src: '~/plugins/vue-cropper', ssr: false}
{src: '~/plugins/vue-sse'},
{src: '~/plugins/vue-cropper', ssr: false}
],
/*
** Nuxt.js dev-modules
@ -116,7 +116,7 @@ export default {
proxy: [ //proxy配置
['/api', {
target: apiConfig.BASE, //api请求路径
pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'} //重定向请求路径，防止路由、api路径的冲突
pathRewrite: {'^/api': isDevMode ? '/api' : '/api'} //重定向请求路径，防止路由、api路径的冲突
}],
['/ws', {
target: apiConfig.BASE //api请求路径

3
package.json
View File

@ -13,6 +13,7 @@
"prepare": "husky install"
},
"dependencies": {
"@babel/types": "^7.21.2",
"@chenfengyuan/vue-qrcode": "^1.0.2",
"@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.13.1",
@ -27,7 +28,7 @@
"save-svg-as-png": "^1.4.17",
"simple-icons": "^6.23.0",
"vditor": "^3.8.18",
"vue-cropperjs": "^4.2.0",
"vue-cropper": "^0.6.2",
"vue-sse": "^2.5.2",
"vuejs-avataaars": "^4.0.1"
},

3
pages/admin/tag/post/_tag_id.vue
View File

@ -120,8 +120,7 @@
<script>
import Vue from "vue";
import {mapState} from 'vuex';
import VueCropper from "vue-cropperjs";
import 'cropperjs/dist/cropper.css';
import VueCropper from "vue-cropper";
import apiConfig from '~/config/api.config';
export default {

3
pages/admin/topic/post/_topic_id.vue
View File

@ -118,8 +118,7 @@
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import VueCropper from 'vue-cropper';
import apiConfig from '~/config/api.config';
export default {

107
pages/portfolio/post/_portfolio_id.vue
View File

@ -31,6 +31,8 @@
</el-col>
<el-col :span="6">
<el-card>
<div>
<div class="cropperBox">
<vue-cropper
:aspect-ratio="1"
:autoCrop="autoCrop"
@ -38,18 +40,26 @@
:fixedNumber="[1,2]"
:checkCrossOrigin="false"
:checkOrientation="false"
:imgStyle="{'width': '200px'}"
:img="headImgUrl"
preview=".preview"
ref="cropper"
v-if="headImgUrl"
@realTime="realTime"
/>
</div>
<div class="cropperBox">
<div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
style="overflow:hidden;margin: 0 auto">
<img :src="cropImg.url" :style="cropImg.img">
</div>
</div>
<div class="preview preview-large"/>
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
<div class="portfolioDescription">
{{ portfolio.portfolioDescription }}
</div>
<div class="button_box">
<el-upload
:before-upload="beforeAvatarUpload"
:multiple="true"
@ -60,12 +70,11 @@
<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="reset" style="margin-left: 10px" plain round type="primary">重置
</el-button>
<el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
<p style="color: red;padding-right: 5px;">*
<span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
</p>
</div>
</div>
</el-card>
</el-col>
</el-row>
@ -85,8 +94,6 @@
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config';
export default {
@ -103,9 +110,7 @@ export default {
.catch(err => error({statusCode: 404}))
])
},
components: {
VueCropper
},
computed: {
...mapState({
portfolioDetail: state => state.portfolio.detail.data,
@ -160,6 +165,10 @@ export default {
}
},
methods: {
realTime(data) {
console.log(data)
this.cropImg = data
},
_initEditor(data) {
//初始化
let _ts = this;
@ -256,7 +265,7 @@ export default {
if (res && res.data && res.data.url) {
let portfolio = _ts.portfolio;
portfolio.headImgUrl = res.data.url;
portfolio.headImgType = '0';
// portfolio.headImgType = '0';
_ts.$set(_ts, 'portfolio', portfolio);
_ts.$set(_ts, 'headImgUrl', res.data.url);
} else {
@ -284,13 +293,13 @@ export default {
reader.readAsDataURL(file);
reader.onload = function () {
_ts.$set(_ts, 'headImgUrl', this.result);
_ts.$refs.cropper?.replace(this.result);
// _ts.$refs.cropper?.replace(this.result);
}
},
async updatePortfolio() {
//headImgUrl
let _ts = this;
this.cropImage()
// this.cropImage()
_ts.$set(_ts, 'loading', true);
let id = _ts.idPortfolio;
let portfolioDescription = _ts.contentEditor.getValue();
@ -298,6 +307,12 @@ export default {
let data = _ts.portfolio;
data.portfolioDescription = portfolioDescription;
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
data.headImgUrl = _ts.headImgUrl
data.headImgType = '0';
// // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
console.log(data)
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
this.$message.error('请输入必填信息');
return false
@ -346,24 +361,31 @@ export default {
});
},
reset() {
this.$refs.cropper.reset();
this.headImgUrl = ''
// this.$refs.cropper.clearCrop()
},
// 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;
}
}
// cropImage() {
// let _ts = this;
// try {
// _ts.cropImg = _ts.$refs.cropper.startCrop();
// this.$refs.cropper.getCropData(data => {
// console.log(data)
// return false
// // do something
// let portfolio = data;
// // portfolio.headImgUrl = data;
// // portfolio.headImgType = '0';
// _ts.$set(_ts, 'portfolio', portfolio);
// // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
// _ts.$message.success('已裁剪 !');
// })
//
// } catch (e) {
// _ts.$message.error('图片获取失败 !');
// return;
// }
// }
},
beforeRouteLeave(to, from, next) {
let _ts = this;
@ -443,6 +465,10 @@ export default {
<style lang="less">
@import "~vditor/src/assets/less/index.less";
.button_box {
display: flex;
}
.wrapper_portfolio {
width: 100%;
max-width: 100%;
@ -478,10 +504,16 @@ export default {
.preview-large {
width: 100%;
height: 480px;
height: 380px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
overflow: hidden;
border: 1px solid red;
> img {
display: block;
margin: 0 auto;
}
}
.portfolioDescription {
@ -496,4 +528,13 @@ export default {
-webkit-line-clamp: 3;
word-break: break-all;
}
.cropperBox {
width: 100%;
height: 300px;
margin-bottom: 20px;
border: 1px solid #F2F6FC;
}
</style>

3
pages/user/settings/avatar.vue
View File

@ -75,8 +75,7 @@
import {mapState} from 'vuex';
import Avataaars from 'vuejs-avataaars';
import saveSvg from 'save-svg-as-png';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import VueCropper from 'vue-cropper';
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
export default {

6
plugins/vue-cropper.js
View File

@ -1,4 +1,4 @@
import vueCropper from 'vue-cropper';
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
Vue.component('vue-cropper', VueCropper);
Vue.use(vueCropper);