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

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

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

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

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

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

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