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

暂存-截图组件封装

Browse Source
This commit is contained in:
祝梦园 2024-02-19 18:39:37 +08:00
parent 40afc28ee5
commit 6315693bcb
5 changed files with 483 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
components/ImgCropper.vue Normal file
View File

@ -0,0 +1,276 @@
<template>
<el-dialog title="请裁剪图片" v-bind='$attrs' v-on='$listeners' @open='onOpen' @close='onClose' :title='dialogTitle'
:close-on-click-modal="false">
<el-row>
<el-col :span="12">
<client-only>
<div class="cropperBox">
<vue-cropper
:autoCrop="autoCrop"
:img="newAvatarUrl"
ref="cropper"
:fixed="true"
@realTime="realTime"
/>
</div>
</client-only>
</el-col>
<el-col :span="24" style="margin-top: 2rem;">
<el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
<div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
style="overflow:hidden;margin: 0 auto">
<img :src="cropImg.url" :style="cropImg.img">
</div>
</el-col>
</el-col>
<el-col :span="24" style="margin-top: 2rem;">
<el-upload
style="float: left"
class="avatar-uploader"
action=""
:multiple="true"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<div>
<el-button type="primary" round plain>上传</el-button>
</div>
</el-upload>
<!-- <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>-->
<el-button style="margin-left: 20px;float: left" type="primary" round plain @click.prevent="reset">重置
</el-button>
<!-- <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>-->
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
// import VueCropper from "vue-cropper";
export default {
name: "ImgCropper",
data() {
return {
dialogTitle: '裁剪图片',
autoCrop: true,
cropImg: '',
oldAvatarUrl: '',
newAvatarUrl: ''
}
},
// components: {
// VueCropper
// },
props: {
avatarUrl: {
type: [String, Object]
}
},
methods: {
onSubmit() {
this.$refs.cropper.getCropData(data => {
console.log(data)
this.$emit('onSubmit',data)
// _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
// if (res) {
// if (res.message) {
// _ts.$message.error(res.message);
// } else {
// _ts.$set(_ts, 'user', res);
// _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
// _ts.$store.commit('setUserInfo', res);
// _ts.$message.success('更新成功 !');
// }
// }
// })
});
/*
this.$emit('onSubmit',this.cropImg)
*/
},
onOpen() {
this.oldAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
this.newAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
},
onClose() {
},
close() {
this.$emit('update:visible', false)
},
realTime(data) {
console.log(data)
this.cropImg = data;
// this.$emit('cropImg', data)
},
handleAvatarSuccess(res) {
let _ts = this;
if (res && res.data && res.data.url) {
console.log(res.data.url)
// let user = _ts.user;
// user.avatarUrl = res.data.url;
user.avatarType = '0';
_ts.$set(_ts, 'newAvatarUrl', 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;
},
reset() {
this.newAvatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
// this.$refs.cropper.clearCrop();
},
fileToBase64(file) {
let _ts = this;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
_ts.$set(_ts, 'newAvatarUrl', this.result);
}
},
}
}
</script>
<style scoped>
.cropperBox {
width: 100%;
height: 256px;
margin-bottom: 20px;
border: 1px solid #F2F6FC;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 16rem;
height: 16rem;
line-height: 16rem;
text-align: center;
}
.avatar {
width: 16rem;
height: 16rem;
display: block;
}
.preview-area {
width: 16rem;
}
.preview-area p {
font-size: 1.25rem;
}
.preview-area p:last-of-type {
margin-top: 1rem;
}
.crop-placeholder {
width: 36px;
height: 36px;
background: #ccc;
}
.cropped-image img {
max-width: 100%;
}
.img-cropper {
width: 740px;
min-height: 360px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
.preview-large img {
object-fit: contain;
width: 16rem;
height: 16rem;
}
.preview-large {
width: 16rem;
height: 16rem;
margin-bottom: 1rem;
margin-top: 3rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
overflow: hidden;
}
.preview-medium img {
object-fit: contain;
width: 8rem;
height: 8rem;
}
.preview-medium {
width: 8rem;
height: 8rem;
margin-bottom: 1rem;
margin-top: 11rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
overflow: hidden;
}
.preview-small {
width: 2rem;
height: 2rem;
margin-bottom: 1rem;
margin-top: 17rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
overflow: hidden;
}
.preview-small img {
object-fit: contain;
width: 2rem;
height: 2rem;
}
</style>

28
pages/admin.vue
View File

@ -15,18 +15,26 @@
</el-menu>
</el-col>
<el-col :span="20">
<el-tabs :value="editableTabsValue" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClick">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name"
:closable="item.closable"
>
<el-card>
<el-row>
<el-tabs :value="editableTabsValue" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClick">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name"
:closable="item.closable">
</el-tab-pane>
</el-tabs>
</el-row>
<el-row>
<nuxt-child keep-alive
:keep-alive-props="{include: editableTabs}"/>
</el-tab-pane>
</el-tabs>
</el-row>
</el-card>
</el-col>
</el-col>
<el-col v-else class="text-center">

5
pages/admin/topic/_topic_uri.vue
View File

@ -107,6 +107,7 @@ export default {
})
},
handleCommand(command) {
console.log(command)
let _ts = this;
if ("admin-post-topic" === command) {
_ts.$router.push({
@ -142,7 +143,9 @@ export default {
}).catch(() => {
});
}
}
},
}
</script>

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

@ -23,17 +23,24 @@
<el-form-item label="图标">
<el-row>
<el-col :span="24">
<vue-cropper
ref="cropper"
:aspect-ratio="1 / 1"
:src="topicIconPath"
:checkCrossOrigin="false"
:checkOrientation="false"
:imgStyle="{width: '480px', height: '480px'}"
:autoCropArea="1"
:autoCrop="autoCrop"
preview=".preview"
/>
<!-- <vue-cropper-->
<!-- ref="cropper"-->
<!-- :aspect-ratio="1 / 1"-->
<!-- :src="topicIconPath"-->
<!-- :checkCrossOrigin="false"-->
<!-- :checkOrientation="false"-->
<!-- :imgStyle="{width: '480px', height: '480px'}"-->
<!-- :autoCropArea="1"-->
<!-- :autoCrop="autoCrop"-->
<!-- preview=".preview"-->
<!-- />-->
{{topicIconPath}}
<vue-cropper
:autoCrop="autoCrop"
:img="topicIconPath"
ref="cropper"
:fixed="true"
/>
</el-col>
<el-col :span="24" style="margin-top: 2rem;">
<el-col :span="8">
@ -41,6 +48,7 @@
<div class="card-body d-flex flex-column">
<el-col :span="4" style="text-align: right;">
<div v-if="topicIconPath" class="preview preview-large topic-brand-img"/>
<el-image v-else class="topic-brand-img" />
</el-col>
<el-col :span="20">

308
pages/user/settings/account.vue
View File

@ -1,157 +1,181 @@
<template>
<client-only>
<el-row>
<el-col>
<h1>基本信息</h1>
</el-col>
<el-col>
<el-form :model="user" :rules="rules" ref="user" label-width="100px">
<el-form-item label="昵称" prop="nickname">
<el-input v-model="user.nickname" @blur="checkNickname"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio border label="0">保密</el-radio>
<el-radio border label="1">男</el-radio>
<el-radio border label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="个人介绍" prop="signature">
<el-input type="textarea" v-model="user.signature"></el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" round plain @click="updateUserInfo">保存基本信息</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col>
<h1>社交信息</h1>
</el-col>
<el-col>
<el-form :model="userExtend" ref="userExtend" label-width="100px">
<el-form-item label="博客" prop="signature">
<el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
</el-input>
</el-form-item>
<el-form-item label="github" prop="signature">
<el-input placeholder="yourname" v-model="userExtend.github">
<template slot="prepend">https://github.com/</template>
</el-input>
</el-form-item>
<el-form-item label="微博" prop="signature">
<el-input placeholder="yourname" v-model="userExtend.weibo">
<template slot="prepend">https://weibo.com/n/</template>
</el-input>
</el-form-item>
<el-form-item label="微信" prop="signature">
<el-input placeholder="设置后将会公开你的微信" v-model="userExtend.weixin">
</el-input>
</el-form-item>
<el-form-item label="QQ" prop="signature">
<el-input placeholder="设置后将会公开你的 QQ" v-model="userExtend.qq">
</el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" round plain @click="updateUserExtend">保存社交信息</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</client-only>
<el-card>
<client-only>
<el-row>
<el-col>
<h1>基本信息</h1>
</el-col>
<el-col>
<el-form :model="user" :rules="rules" ref="user" label-width="100px">
<el-form-item>
<img :src="user.avatarUrl" style="width: 100px;height: 100px" @click="visible=true">
<!-- <el-image :src="user.avatarUrl"></el-image>-->
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="user.nickname" @blur="checkNickname"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio border label="0">保密</el-radio>
<el-radio border label="1">男</el-radio>
<el-radio border label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="个人介绍" prop="signature">
<el-input type="textarea" v-model="user.signature"></el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" round plain @click="updateUserInfo">保存基本信息</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col>
<h1>社交信息</h1>
</el-col>
<el-col>
<el-form :model="userExtend" ref="userExtend" label-width="100px">
<el-form-item label="博客" prop="signature">
<el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
</el-input>
</el-form-item>
<el-form-item label="github" prop="signature">
<el-input placeholder="yourname" v-model="userExtend.github">
<template slot="prepend">https://github.com/</template>
</el-input>
</el-form-item>
<el-form-item label="微博" prop="signature">
<el-input placeholder="yourname" v-model="userExtend.weibo">
<template slot="prepend">https://weibo.com/n/</template>
</el-input>
</el-form-item>
<el-form-item label="微信" prop="signature">
<el-input placeholder="设置后将会公开你的微信" v-model="userExtend.weixin">
</el-input>
</el-form-item>
<el-form-item label="QQ" prop="signature">
<el-input placeholder="设置后将会公开你的 QQ" v-model="userExtend.qq">
</el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" round plain @click="updateUserExtend">保存社交信息</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</client-only>
<ImgCropper @onSubmit="updateUser" :visible.sync='visible' :avatarUrl="user.avatarUrl||''"></ImgCropper>
</el-card>
</template>
<script>
import {mapState} from 'vuex';
import {mapState} from 'vuex';
import ImgCropper from "~/components/ImgCropper.vue";
import VueCropper from "vue-cropper";
export default {
name: "account",
middleware: 'auth',
computed: {
...mapState({
idUser: state => state.auth.user.idUser
})
},
data() {
return {
user: {},
userExtend: {},
rules: {
nickname: [
{required: true, message: '请输入昵称', trigger: 'blur'},
{min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
],
email: [
{required: true, message: '请输入邮箱地址', trigger: 'blur'},
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
]
},
loading: false
}
},
methods: {
getData() {
let _ts = this;
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
if (res) {
_ts.$set(_ts, 'user', res);
}
})
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
if (res) {
_ts.$set(_ts, 'userExtend', res);
}
})
export default {
name: "account",
middleware: 'auth',
components: {
ImgCropper, VueCropper
},
computed: {
...mapState({
idUser: state => state.auth.user.idUser
}),
},
data() {
return {
user: {},
userExtend: {},
rules: {
nickname: [
{required: true, message: '请输入昵称', trigger: 'blur'},
{min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
],
email: [
{required: true, message: '请输入邮箱地址', trigger: 'blur'},
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
]
},
checkNickname() {
let _ts = this;
_ts.$axios.$get('/api/user-info/check-nickname', {
params: {
idUser: _ts.user.idUser,
nickname: _ts.user.nickname
}
}).then(function (res) {
if (!res) {
_ts.$message.error('昵称已被占用!');
}
})
},
updateUserInfo() {
let _ts = this;
let user = _ts.user;
_ts.updateUser(user);
},
updateUser(user) {
let _ts = this;
_ts.$refs['user'].validate((valid) => {
if (valid) {
_ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
if (res) {
_ts.$set(_ts, 'user', res);
_ts.$store.commit('setUserInfo', res);
_ts.$message.success('更新成功 !');
}
})
loading: false,
visible: false
}
},
watch: {
user() {
console.log(this.user)
}
},
methods: {
updateUser(data) {
let _ts = this;
let user = _ts.user;
user.avatarUrl = data
_ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
if (res) {
if (res.message) {
_ts.$message.error(res.message);
} else {
_ts.$message.error('数据异常 !');
}
});
},
updateUserExtend() {
let _ts = this;
let userExtend = _ts.userExtend;
_ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
if (res) {
_ts.$set(_ts, 'userExtend', res);
_ts.$set(_ts, 'user', res);
// _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
// _ts.$store.commit('setUserInfo', res);
_ts.$message.success('更新成功 !');
}
})
}
}
})
},
mounted() {
this.$store.commit('setActiveMenu', 'account');
this.getData();
getData() {
let _ts = this;
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
if (res) {
// _ts.$set(_ts, 'user', res);
_ts.user = res
}
})
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
if (res) {
_ts.$set(_ts, 'userExtend', res);
}
})
},
checkNickname() {
let _ts = this;
_ts.$axios.$get('/api/user-info/check-nickname', {
params: {
idUser: _ts.user.idUser,
nickname: _ts.user.nickname
}
}).then(function (res) {
if (!res) {
_ts.$message.error('昵称已被占用!');
}
})
},
updateUserInfo() {
let _ts = this;
let user = _ts.user;
_ts.updateUser(user);
},
updateUserExtend() {
let _ts = this;
let userExtend = _ts.userExtend;
_ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
if (res) {
_ts.$set(_ts, 'userExtend', res);
_ts.$message.success('更新成功 !');
}
})
}
},
mounted() {
this.$store.commit('setActiveMenu', 'account');
this.getData();
}
}
</script>
<style scoped>