Merge branch 'master' of https://github.com/ronger-x/nebula
This commit is contained in:
ronger
commit
f26d6c525d
3
.gitignore
vendored
3
.gitignore
vendored
@ -88,3 +88,6 @@ sw.*
|
|||||||
|
|
||||||
# Vim swap files
|
# Vim swap files
|
||||||
*.swp
|
*.swp
|
||||||
|
# deps
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
|||||||
@ -18,7 +18,7 @@ jobs:
|
|||||||
image: node:16.17.0-alpine
|
image: node:16.17.0-alpine
|
||||||
interpreter: !DefaultInterpreter
|
interpreter: !DefaultInterpreter
|
||||||
commands:
|
commands:
|
||||||
- yarn --registry=https://registry.npm.taobao.org
|
- yarn --registry=https://registry.npmmirror.com
|
||||||
- npx nuxt build
|
- npx nuxt build
|
||||||
useTTY: false
|
useTTY: false
|
||||||
condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
|
condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL
|
||||||
|
|||||||
@ -13,8 +13,8 @@ RUN cd /opt/app
|
|||||||
RUN chmod -R 777 *
|
RUN chmod -R 777 *
|
||||||
# 添加执行shell文件权限
|
# 添加执行shell文件权限
|
||||||
RUN chmod u+x pm2.sh
|
RUN chmod u+x pm2.sh
|
||||||
RUN yarn --registry=https://registry.npm.taobao.org
|
RUN yarn --registry=https://registry.npmmirror.com
|
||||||
RUN npm i pm2 -g --registry=https://registry.npm.taobao.org
|
RUN npm i pm2 -g --registry=https://registry.npmmirror.com
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
RUN ls -l -a
|
RUN ls -l -a
|
||||||
|
|||||||
258
components/ImgCropper.vue
Normal file
258
components/ImgCropper.vue
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
<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)
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
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) {
|
||||||
|
this.cropImg = data;
|
||||||
|
// this.$emit('cropImg', data)
|
||||||
|
},
|
||||||
|
handleAvatarSuccess(res) {
|
||||||
|
let _ts = this;
|
||||||
|
if (res && res.data && res.data.url) {
|
||||||
|
_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>
|
||||||
@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<el-row class="row-cards row-deck" :gutter="20">
|
<el-row class="row-cards row-deck" :gutter="20">
|
||||||
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct" style="margin-bottom: 10px;">
|
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct"
|
||||||
|
style="margin-bottom: 10px;">
|
||||||
<el-card :body-style="{ padding: '20px' }">
|
<el-card :body-style="{ padding: '20px' }">
|
||||||
<el-col :span="24">
|
<div style="width: 96%;">
|
||||||
<el-image :src="product.productImgUrl"
|
<img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl"
|
||||||
style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
|
object-fit="contain"/>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-tag
|
<el-tag
|
||||||
style="margin-right: 0.5rem;"
|
style="margin-right: 0.5rem;"
|
||||||
@ -17,11 +18,14 @@
|
|||||||
# {{ tag }}
|
# {{ tag }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
|
<el-col :span="24"
|
||||||
|
style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
|
||||||
<span style="font-weight: bolder;" v-html="product.productTitle"></span>
|
<span style="font-weight: bolder;" v-html="product.productTitle"></span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col span="24">
|
<el-col :span="24">
|
||||||
<small v-html="product.productDescription"></small>
|
<small class="text-container">
|
||||||
|
{{ product.productDescription }}
|
||||||
|
</small>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="24" style="text-align: center;">
|
<el-col :span="24" style="text-align: center;">
|
||||||
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
|
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
|
||||||
@ -167,4 +171,13 @@ h3, .h3 {
|
|||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-container {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,41 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row class="wrapper">
|
<div class="wrapper">
|
||||||
<el-col style="margin-bottom: 1rem;">
|
|
||||||
<el-menu type="border-card" :default-active="currentTopic" style="margin-top: -2px;border: 0;" mode="horizontal"
|
<div style="background: white">
|
||||||
|
<el-menu type="border-card" :default-active="currentTopic"
|
||||||
|
style="width: 96%;margin: 0 auto" mode="horizontal"
|
||||||
@select="handleSelectTopic">
|
@select="handleSelectTopic">
|
||||||
<el-menu-item index="news">最新</el-menu-item>
|
<el-menu-item index="news">最新</el-menu-item>
|
||||||
<el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{topic.topicTitle}}
|
<el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{ topic.topicTitle }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "topicNav",
|
name: "topicNav",
|
||||||
props: {
|
props: {
|
||||||
currentTopic: {
|
currentTopic: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'news'
|
default: 'news'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
topicNavs: state => state.topic.data,
|
topicNavs: state => state.topic.data,
|
||||||
isFetching: state => state.topic.fetching
|
isFetching: state => state.topic.fetching
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
watch: {},
|
||||||
handleSelectTopic(item) {
|
methods: {
|
||||||
this.$router.push({
|
handleSelectTopic(item) {
|
||||||
path: `/topic/${item}?page=1`
|
this.$router.push({
|
||||||
});
|
path: `/topic/${item}?page=1`
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
"save-svg-as-png": "^1.4.17",
|
"save-svg-as-png": "^1.4.17",
|
||||||
"simple-icons": "^6.23.0",
|
"simple-icons": "^6.23.0",
|
||||||
"vditor": "^3.9.8",
|
"vditor": "^3.8.18",
|
||||||
"vue-cropper": "^0.6.2",
|
"vue-cropper": "^0.6.2",
|
||||||
"vue-sse": "^2.5.2",
|
"vue-sse": "^2.5.2",
|
||||||
"vuejs-avataaars": "^4.0.1"
|
"vuejs-avataaars": "^4.0.1"
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
<img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
|
<img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
<el-col>
|
<el-row :gutter="20">
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
<span class="topic-title">{{ topic.topicTitle }}</span>
|
<span class="topic-title">{{ topic.topicTitle }}</span>
|
||||||
<span class="text-muted" v-if="topic.topicTagCount">{{ topic.topicTagCount }} 引用</span>
|
<span class="text-muted" v-if="topic.topicTagCount">{{ topic.topicTagCount }} 引用</span>
|
||||||
@ -28,9 +28,9 @@
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col>
|
<el-col>
|
||||||
<p>{{ topic.topicDescription }}</p>
|
<span v-html="topic.topicDescriptionHtml"></span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col v-for="tag in tags.list" :key="tag.idTag">
|
<el-col v-for="tag in tags.list" :key="tag.idTag">
|
||||||
<el-card style="margin: .5rem;">
|
<el-card style="margin: .5rem;">
|
||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -23,63 +23,38 @@
|
|||||||
<el-form-item label="图标">
|
<el-form-item label="图标">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<vue-cropper
|
<img @click="cropperVisible=true" :src="topicIconPath" style="width: 80px;height: 80px"/>
|
||||||
ref="cropper"
|
|
||||||
:aspect-ratio="1 / 1"
|
|
||||||
:src="topicIconPath"
|
|
||||||
:checkCrossOrigin="false"
|
|
||||||
:checkOrientation="false"
|
|
||||||
:imgStyle="{width: '480px', height: '480px'}"
|
|
||||||
:autoCropArea="1"
|
|
||||||
:autoCrop="autoCrop"
|
|
||||||
preview=".preview"
|
|
||||||
/>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" style="margin-top: 2rem;">
|
|
||||||
<el-col :span="8">
|
|
||||||
<el-card>
|
|
||||||
<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">
|
|
||||||
<el-col>
|
|
||||||
<el-col>
|
|
||||||
<el-link rel="nofollow" :underline="false">
|
|
||||||
<h4>{{ topic.topicTitle }}</h4>
|
|
||||||
</el-link>
|
|
||||||
</el-col>
|
|
||||||
<el-col>
|
|
||||||
<div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" style="margin-top: 2rem;">
|
|
||||||
<el-upload
|
|
||||||
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.prevent="reset">重置</el-button>
|
|
||||||
<el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button>
|
|
||||||
<el-col>
|
|
||||||
<span style="color: red;padding-right: 5px;">*</span>
|
|
||||||
<span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<div id="contentEditor" @blur="blurData"></div>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item>-->
|
||||||
|
<!-- <el-row >-->
|
||||||
|
<!-- <el-col :span="8">-->
|
||||||
|
<!-- <el-card>-->
|
||||||
|
<!-- <div class="card-body d-flex flex-column">-->
|
||||||
|
<!-- <el-card shadow="never">-->
|
||||||
|
<!-- <div class="card-body d-flex flex-column">-->
|
||||||
|
<!-- <el-row :gutter="20">-->
|
||||||
|
<!-- <el-col :span="5" style="text-align: right;">-->
|
||||||
|
<!-- <img :src="topicIconPath" :alt="topic.topicTitle"-->
|
||||||
|
<!-- style="display: block;width:60px;height: 60px" class="topic-brand-img">-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- <el-col :span="18">-->
|
||||||
|
<!-- <span style="font-size: 18px;font-weight: bold"> {{ topic.topicTitle }}</span>-->
|
||||||
|
<!-- <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- </el-row>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </el-card>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </el-card>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- </el-row>-->
|
||||||
|
|
||||||
|
<!-- </el-form-item>-->
|
||||||
<el-form-item label="导航主题">
|
<el-form-item label="导航主题">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="topic.topicNva"
|
v-model="topic.topicNva"
|
||||||
@ -104,14 +79,14 @@
|
|||||||
<el-form-item label="标签数">
|
<el-form-item label="标签数">
|
||||||
<el-input v-model="topic.topicTagCount" :disabled="true"></el-input>
|
<el-input v-model="topic.topicTagCount" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="描述">
|
|
||||||
<div id="contentEditor"></div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item class="text-right">
|
<el-form-item class="text-right">
|
||||||
<el-button @click="updateTopic" :loading="loading" plain>提交</el-button>
|
<el-button @click="updateTopic" :loading="loading" plain>提交</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
<ImgCropper @onSubmit="updateUser" :visible.sync='cropperVisible' :avatarUrl="topicIconPath||''"></ImgCropper>
|
||||||
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -120,12 +95,13 @@ import Vue from 'vue';
|
|||||||
import {mapState} from 'vuex';
|
import {mapState} from 'vuex';
|
||||||
import VueCropper from 'vue-cropper';
|
import VueCropper from 'vue-cropper';
|
||||||
import apiConfig from '~/config/api.config';
|
import apiConfig from '~/config/api.config';
|
||||||
|
import ImgCropper from "~/components/ImgCropper.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "adminTopicPost",
|
name: "adminTopicPost",
|
||||||
middleware: 'auth',
|
middleware: 'auth',
|
||||||
components: {
|
components: {
|
||||||
VueCropper
|
VueCropper, ImgCropper
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
@ -162,13 +138,31 @@ export default {
|
|||||||
topicIconPath: '',
|
topicIconPath: '',
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
autoCrop: true,
|
autoCrop: true,
|
||||||
notificationFlag: true
|
notificationFlag: true,
|
||||||
|
cropperVisible: false,
|
||||||
|
contentEditor:{}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
blurData(){
|
||||||
|
|
||||||
|
console.log(this.contentEditor)
|
||||||
|
if(this.contentEditor!={}){
|
||||||
|
console.log(this.contentEditor.getValue())
|
||||||
|
|
||||||
|
this.topic.topicDescription=this.contentEditor.getValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
updateUser(data) {
|
||||||
|
this.topic.topicIconPath = data
|
||||||
|
this.topicIconPath = data
|
||||||
|
this.cropperVisible = false
|
||||||
|
|
||||||
|
},
|
||||||
_initEditor(data) {
|
_initEditor(data) {
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
|
|
||||||
let toolbar = [
|
let toolbar = [
|
||||||
'emoji',
|
'emoji',
|
||||||
'headings',
|
'headings',
|
||||||
@ -257,43 +251,6 @@ export default {
|
|||||||
placeholder: data.placeholder,
|
placeholder: data.placeholder,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleAvatarSuccess(res) {
|
|
||||||
let _ts = this;
|
|
||||||
if (res && res.data && res.data.url) {
|
|
||||||
let topic = _ts.topic;
|
|
||||||
topic.topicIconPath = res.data.url;
|
|
||||||
_ts.$set(_ts, 'topic', topic);
|
|
||||||
_ts.$set(_ts, 'topicIconPath', 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, 'topicIconPath', this.result);
|
|
||||||
_ts.$refs.cropper.replace(this.result);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async updateTopic() {
|
async updateTopic() {
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
_ts.$set(_ts, 'loading', true);
|
_ts.$set(_ts, 'loading', true);
|
||||||
@ -401,12 +358,16 @@ export default {
|
|||||||
_ts.contentEditor = _ts._initEditor({
|
_ts.contentEditor = _ts._initEditor({
|
||||||
id: 'contentEditor',
|
id: 'contentEditor',
|
||||||
mode: 'both',
|
mode: 'both',
|
||||||
height: 480,
|
height: 300,
|
||||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||||
resize: false,
|
resize: false,
|
||||||
value: articleContent
|
value: articleContent,
|
||||||
});
|
});
|
||||||
}
|
setTimeout(()=>{
|
||||||
|
_ts.contentEditor.blur()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<el-row style="margin-top: 20px;">
|
||||||
|
<el-col style="margin-bottom: 1rem;">
|
||||||
<el-row style="margin-top: 20px;">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
<el-col style="margin-bottom: 1rem;">
|
<el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item>专题管理</el-breadcrumb-item>
|
||||||
<el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
|
</el-breadcrumb>
|
||||||
<el-breadcrumb-item>专题管理</el-breadcrumb-item>
|
</el-col>
|
||||||
</el-breadcrumb>
|
<el-col style="margin: .5rem;">
|
||||||
</el-col>
|
<el-button size="small" @click="createTopic" plain>创建专题</el-button>
|
||||||
<el-col style="margin: .5rem;">
|
</el-col>
|
||||||
<el-button size="small" @click="createTopic" plain>创建专题</el-button>
|
</el-row>
|
||||||
</el-col>
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="card-body d-flex flex-column">
|
||||||
</el-row> <el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
|
<el-col :span="5" style="text-align: right;">
|
||||||
<el-card shadow="never">
|
<img :src="topic.topicIconPath" :alt="topic.topicTitle"
|
||||||
<div class="card-body d-flex flex-column">
|
style="display: block;width:60px;height: 60px" class="topic-brand-img">
|
||||||
<el-row :gutter="20">
|
</el-col>
|
||||||
<el-col :span="4" style="text-align: right;">
|
<el-col :span="18">
|
||||||
<img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
|
<el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
|
||||||
class="topic-brand-img">
|
<span style="font-size: 18px;font-weight: bold"> {{ topic.topicTitle }}</span>
|
||||||
</el-col>
|
|
||||||
<el-col :span="20" >
|
|
||||||
<el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
|
|
||||||
<span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
|
|
||||||
</el-link>
|
</el-link>
|
||||||
<div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
|
<div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row> </div>
|
</el-row>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -77,7 +72,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.topic-brand-img {
|
.topic-brand-img {
|
||||||
margin-top: 40%;
|
/*margin-top: 40%;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-content {
|
.text-content {
|
||||||
|
|||||||
@ -10,10 +10,10 @@
|
|||||||
<i class="el-icon-s-data"></i>
|
<i class="el-icon-s-data"></i>
|
||||||
<span slot="title">基本信息</span>
|
<span slot="title">基本信息</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item index="avatar">
|
<!-- <el-menu-item index="avatar">-->
|
||||||
<i class="el-icon-picture-outline-round"></i>
|
<!-- <i class="el-icon-picture-outline-round"></i>-->
|
||||||
<span slot="title">我的头像</span>
|
<!-- <span slot="title">我的头像</span>-->
|
||||||
</el-menu-item>
|
<!-- </el-menu-item>-->
|
||||||
<el-menu-item index="security">
|
<el-menu-item index="security">
|
||||||
<i class="el-icon-unlock"></i>
|
<i class="el-icon-unlock"></i>
|
||||||
<span slot="title">账户安全</span>
|
<span slot="title">账户安全</span>
|
||||||
|
|||||||
@ -1,159 +1,242 @@
|
|||||||
<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 style="text-align: center;">
|
||||||
</el-form-item>
|
<el-col>
|
||||||
<el-form-item label="性别">
|
<Avataaars
|
||||||
<el-radio-group v-model="user.sex">
|
v-show="cropperVisible"
|
||||||
<el-radio border label="0">保密</el-radio>
|
id="avatarSvg"
|
||||||
<el-radio border label="1">男</el-radio>
|
style="width: 256px; height: 256px;"
|
||||||
<el-radio border label="2">女</el-radio>
|
:avatarStyle='avatar.avatarStyle'
|
||||||
</el-radio-group>
|
:topType='avatar.topType'
|
||||||
</el-form-item>
|
:accessoriesType='avatar.accessoriesType'
|
||||||
<el-form-item label="个人介绍" prop="signature">
|
:hairColor='avatar.hairColor'
|
||||||
<el-input type="textarea" v-model="user.signature"></el-input>
|
:facialHairType='avatar.facialHairType'
|
||||||
</el-form-item>
|
:clotheType='avatar.clotheType'
|
||||||
<el-form-item style="text-align: right;">
|
:clotheColor='avatar.clotheColor'
|
||||||
<el-button type="primary" round plain @click="updateUserInfo">保存基本信息</el-button>
|
:eyeType='avatar.eyeType'
|
||||||
</el-form-item>
|
:eyebrowType='avatar.eyebrowType'
|
||||||
</el-form>
|
:mouthType='avatar.mouthType'
|
||||||
</el-col>
|
:skinColor='avatar.skinColor'>
|
||||||
<el-col>
|
</Avataaars>
|
||||||
<h1>社交信息</h1>
|
<img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col>
|
<el-col>
|
||||||
<el-form :model="userExtend" ref="userExtend" label-width="100px">
|
<el-button @click="cropperVisible=true">上传</el-button>
|
||||||
<el-form-item label="博客" prop="signature">
|
<el-button @click="genAvatar" class="random">{{ randomTitle }}</el-button>
|
||||||
<el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
|
</el-col>
|
||||||
</el-input>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="昵称" prop="nickname">
|
||||||
<el-form-item label="github" prop="signature">
|
<el-input v-model="user.nickname" @blur="checkNickname"></el-input>
|
||||||
<el-input placeholder="yourname" v-model="userExtend.github">
|
</el-form-item>
|
||||||
<template slot="prepend">https://github.com/</template>
|
<el-form-item label="性别">
|
||||||
</el-input>
|
<el-radio-group v-model="user.sex">
|
||||||
</el-form-item>
|
<el-radio border label="0">保密</el-radio>
|
||||||
<el-form-item label="微博" prop="signature">
|
<el-radio border label="1">男</el-radio>
|
||||||
<el-input placeholder="yourname" v-model="userExtend.weibo">
|
<el-radio border label="2">女</el-radio>
|
||||||
<template slot="prepend">https://weibo.com/n/</template>
|
</el-radio-group>
|
||||||
</el-input>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="个人介绍" prop="signature">
|
||||||
<el-form-item label="微信" prop="signature">
|
<el-input type="textarea" v-model="user.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="updateUserInfo">保存基本信息</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-col>
|
||||||
<el-form-item style="text-align: right;">
|
<h1>社交信息</h1>
|
||||||
<el-button type="primary" round plain @click="updateUserExtend">保存社交信息</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-row>
|
<el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
|
||||||
</client-only>
|
</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='cropperVisible' :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";
|
||||||
|
import saveSvg from "save-svg-as-png";
|
||||||
|
import Avataaars from 'vuejs-avataaars';
|
||||||
|
|
||||||
export default {
|
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
|
||||||
name: "account",
|
|
||||||
middleware: 'auth',
|
export default {
|
||||||
computed: {
|
name: "account",
|
||||||
...mapState({
|
middleware: 'auth',
|
||||||
idUser: state => state.auth.user.idUser
|
components: {
|
||||||
|
ImgCropper, VueCropper, Avataaars
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
cropperVisible: false,
|
||||||
|
randomTitle: '随机施法',
|
||||||
|
avatar: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
methods: {
|
||||||
|
updateUser(data) {
|
||||||
|
let _ts = this;
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
let user = _ts.user;
|
||||||
|
user.avatarUrl = data
|
||||||
|
user.avatarType = 1
|
||||||
|
_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('更新成功 !');
|
||||||
|
_ts.cropperVisible = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else _ts.$message.error('失败，请重试');
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
data() {
|
checkNickname() {
|
||||||
return {
|
let _ts = this;
|
||||||
user: {},
|
_ts.$axios.$get('/api/user-info/check-nickname', {
|
||||||
userExtend: {},
|
params: {
|
||||||
rules: {
|
idUser: _ts.user.idUser,
|
||||||
nickname: [
|
nickname: _ts.user.nickname
|
||||||
{required: true, message: '请输入昵称', trigger: 'blur'},
|
}
|
||||||
{min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
|
}).then(function (res) {
|
||||||
],
|
if (!res) {
|
||||||
email: [
|
_ts.$message.error('昵称已被占用!');
|
||||||
{required: true, message: '请输入邮箱地址', trigger: 'blur'},
|
}
|
||||||
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
|
})
|
||||||
]
|
|
||||||
},
|
|
||||||
loading: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
updateUserInfo() {
|
||||||
getData() {
|
let _ts = this;
|
||||||
let _ts = this;
|
let user = _ts.user;
|
||||||
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
|
_ts.updateUser(user);
|
||||||
if (res) {
|
},
|
||||||
_ts.$set(_ts, 'user', res);
|
|
||||||
}
|
updateUserExtend() {
|
||||||
})
|
let _ts = this;
|
||||||
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
|
let userExtend = _ts.userExtend;
|
||||||
if (res) {
|
_ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
|
||||||
_ts.$set(_ts, 'userExtend', res);
|
if (res) {
|
||||||
}
|
_ts.$set(_ts, 'userExtend', res);
|
||||||
})
|
_ts.$message.success('更新成功 !');
|
||||||
},
|
}
|
||||||
checkNickname() {
|
})
|
||||||
let _ts = this;
|
},
|
||||||
_ts.$axios.$get('/api/user-info/check-nickname', {
|
genAvatar() {
|
||||||
params: {
|
let _ts = this;
|
||||||
idUser: _ts.user.idUser,
|
const avatar = generateRandomAvatar();
|
||||||
nickname: _ts.user.nickname
|
_ts.$set(_ts, 'avatar', avatar);
|
||||||
}
|
|
||||||
}).then(function (res) {
|
setTimeout(function () {
|
||||||
if (!res) {
|
saveSvg.svgAsPngUri(document.getElementById('avatarSvg'), {}).then(uri => {
|
||||||
_ts.$message.error('昵称已被占用!');
|
if (uri) {
|
||||||
}
|
_ts.updateUser(uri)
|
||||||
})
|
_ts.randomTitle = '‧★,:*:‧\\(￣▽￣)/‧:*‧°★* 再来一次'
|
||||||
},
|
|
||||||
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('更新成功 !');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
_ts.$message.error('数据异常 !');
|
_ts.$message.error('头像上传失败 !');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
}, 300);
|
||||||
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');
|
mounted() {
|
||||||
this.getData();
|
this.$store.commit('setActiveMenu', 'account');
|
||||||
}
|
this.getData();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.random {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-profile-img-avatar {
|
||||||
|
max-width: 16rem;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -107,13 +107,7 @@ export default {
|
|||||||
getData() {
|
getData() {
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
|
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
|
||||||
if (res) {
|
_ts.$set(_ts, 'user', res);
|
||||||
if (res.message) {
|
|
||||||
_ts.$message.error(res.message);
|
|
||||||
} else {
|
|
||||||
_ts.$set(_ts, 'user', res.user);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
hideChangeEmailDialog() {
|
hideChangeEmailDialog() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user