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

Merge branch 'master' of https://github.com/ronger-x/nebula

Browse Source
This commit is contained in:
ronger 2024-02-20 19:53:45 +08:00
commit f26d6c525d
14 changed files with 658 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -88,3 +88,6 @@ sw.*
# Vim swap files
*.swp
# deps
package-lock.json
yarn.lock

2
.onedev-buildspec.yml
View File

@ -18,7 +18,7 @@ jobs:
image: node:16.17.0-alpine
interpreter: !DefaultInterpreter
commands:
- yarn --registry=https://registry.npm.taobao.org
- yarn --registry=https://registry.npmmirror.com
- npx nuxt build
useTTY: false
condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL

4
Dockerfile
View File

@ -13,8 +13,8 @@ RUN cd /opt/app
RUN chmod -R 777 *
# 添加执行shell文件权限
RUN chmod u+x pm2.sh
RUN yarn --registry=https://registry.npm.taobao.org
RUN npm i pm2 -g --registry=https://registry.npm.taobao.org
RUN yarn --registry=https://registry.npmmirror.com
RUN npm i pm2 -g --registry=https://registry.npmmirror.com
RUN npm run build
RUN ls -l -a

258
components/ImgCropper.vue Normal file
View 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>

29
components/common/product/list.vue
View File

@ -1,12 +1,13 @@
<template>
<div class="wrapper">
<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-col :span="24">
<el-image :src="product.productImgUrl"
style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
</el-col>
<div style="width: 96%;">
<img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl"
object-fit="contain"/>
</div>
<el-col :span="24">
<el-tag
style="margin-right: 0.5rem;"
@ -17,11 +18,14 @@
# {{ tag }}
</el-tag>
</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>
</el-col>
<el-col span="24">
<small v-html="product.productDescription"></small>
<el-col :span="24">
<small class="text-container">
{{ product.productDescription }}
</small>
</el-col>
<el-col :span="24" style="text-align: center;">
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
@ -167,4 +171,13 @@ h3, .h3 {
padding-left: 0.75rem;
}
.text-container {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

22
components/common/topic/main.vue
View File

@ -1,20 +1,23 @@
<template>
<el-row 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 class="wrapper">
<div style="background: white">
<el-menu type="border-card" :default-active="currentTopic"
style="width: 96%;margin: 0 auto" mode="horizontal"
@select="handleSelectTopic">
<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>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
export default {
export default {
name: "topicNav",
props: {
currentTopic: {
@ -28,6 +31,7 @@
isFetching: state => state.topic.fetching
})
},
watch: {},
methods: {
handleSelectTopic(item) {
this.$router.push({
@ -35,7 +39,7 @@
});
}
}
}
}
</script>
<style scoped>

2
package.json
View File

@ -27,7 +27,7 @@
"raw-loader": "^4.0.2",
"save-svg-as-png": "^1.4.17",
"simple-icons": "^6.23.0",
"vditor": "^3.9.8",
"vditor": "^3.8.18",
"vue-cropper": "^0.6.2",
"vue-sse": "^2.5.2",
"vuejs-avataaars": "^4.0.1"

16
pages/admin.vue
View File

@ -15,18 +15,26 @@
</el-menu>
</el-col>
<el-col :span="20">
<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"
>
<nuxt-child keep-alive
:keep-alive-props="{include: editableTabs}"/>
:closable="item.closable">
</el-tab-pane>
</el-tabs>
</el-row>
<el-row>
<nuxt-child keep-alive
:keep-alive-props="{include: editableTabs}"/>
</el-row>
</el-card>
</el-col>
</el-col>
<el-col v-else class="text-center">

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

@ -12,7 +12,7 @@
<img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
</el-col>
<el-col :span="20">
<el-col>
<el-row :gutter="20">
<el-col :span="20">
<span class="topic-title">{{ topic.topicTitle }}</span>
<span class="text-muted" v-if="topic.topicTagCount">{{ topic.topicTagCount }} 引用</span>
@ -28,9 +28,9 @@
</el-dropdown>
</el-col>
<el-col>
<p>{{ topic.topicDescription }}</p>
</el-col>
<span v-html="topic.topicDescriptionHtml"></span>
</el-col>
</el-row>
</el-col>
<el-col v-for="tag in tags.list" :key="tag.idTag">
<el-card style="margin: .5rem;">
@ -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>

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

@ -23,63 +23,38 @@
<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"
/>
</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>
<img @click="cropperVisible=true" :src="topicIconPath" style="width: 80px;height: 80px"/>
</el-col>
</el-row>
</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-switch
v-model="topic.topicNva"
@ -104,14 +79,14 @@
<el-form-item label="标签数">
<el-input v-model="topic.topicTagCount" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="描述">
<div id="contentEditor"></div>
</el-form-item>
<el-form-item class="text-right">
<el-button @click="updateTopic" :loading="loading" plain>提交</el-button>
</el-form-item>
</el-form>
</el-col>
<ImgCropper @onSubmit="updateUser" :visible.sync='cropperVisible' :avatarUrl="topicIconPath||''"></ImgCropper>
</el-row>
</template>
@ -120,12 +95,13 @@ import Vue from 'vue';
import {mapState} from 'vuex';
import VueCropper from 'vue-cropper';
import apiConfig from '~/config/api.config';
import ImgCropper from "~/components/ImgCropper.vue";
export default {
name: "adminTopicPost",
middleware: 'auth',
components: {
VueCropper
VueCropper, ImgCropper
},
computed: {
...mapState({
@ -162,13 +138,31 @@ export default {
topicIconPath: '',
isEdit: false,
autoCrop: true,
notificationFlag: true
notificationFlag: true,
cropperVisible: false,
contentEditor:{}
}
},
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) {
let _ts = this;
let toolbar = [
'emoji',
'headings',
@ -257,43 +251,6 @@ export default {
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() {
let _ts = this;
_ts.$set(_ts, 'loading', true);
@ -401,12 +358,16 @@ export default {
_ts.contentEditor = _ts._initEditor({
id: 'contentEditor',
mode: 'both',
height: 480,
height: 300,
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
resize: false,
value: articleContent
value: articleContent,
});
}
setTimeout(()=>{
_ts.contentEditor.blur()
})
},
}
</script>

25
pages/admin/topics.vue
View File

@ -1,7 +1,5 @@
<template>
<div>
<el-row style="margin-top: 20px;">
<el-col style="margin-bottom: 1rem;">
<el-breadcrumb separator-class="el-icon-arrow-right">
@ -12,32 +10,29 @@
<el-col style="margin: .5rem;">
<el-button size="small" @click="createTopic" plain>创建专题</el-button>
</el-col>
</el-row> <el-row :gutter="20">
</el-row>
<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 :gutter="20">
<el-col :span="4" style="text-align: right;">
<img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
class="topic-brand-img">
<el-col :span="5" style="text-align: right;">
<img :src="topic.topicIconPath" :alt="topic.topicTitle"
style="display: block;width:60px;height: 60px" class="topic-brand-img">
</el-col>
<el-col :span="20" >
<el-col :span="18">
<el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
<span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
<span style="font-size: 18px;font-weight: bold"> {{ topic.topicTitle }}</span>
</el-link>
<div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row> </div>
</el-row>
</div>
</template>
<script>
@ -77,7 +72,7 @@ export default {
<style scoped>
.topic-brand-img {
margin-top: 40%;
/*margin-top: 40%;*/
}
.text-content {

8
pages/user/settings.vue
View File

@ -10,10 +10,10 @@
<i class="el-icon-s-data"></i>
<span slot="title">基本信息</span>
</el-menu-item>
<el-menu-item index="avatar">
<i class="el-icon-picture-outline-round"></i>
<span slot="title">我的头像</span>
</el-menu-item>
<!-- <el-menu-item index="avatar">-->
<!-- <i class="el-icon-picture-outline-round"></i>-->
<!-- <span slot="title">我的头像</span>-->
<!-- </el-menu-item>-->
<el-menu-item index="security">
<i class="el-icon-unlock"></i>
<span slot="title">账户安全</span>

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

@ -1,11 +1,37 @@
<template>
<el-card>
<client-only>
<el-row>
<el-col>
<h1>基本信息</h1>
<h1>基本信息 </h1>
</el-col>
<el-col>
<el-form :model="user" :rules="rules" ref="user" label-width="100px">
<el-form-item style="text-align: center;">
<el-col>
<Avataaars
v-show="cropperVisible"
id="avatarSvg"
style="width: 256px; height: 256px;"
:avatarStyle='avatar.avatarStyle'
:topType='avatar.topType'
:accessoriesType='avatar.accessoriesType'
:hairColor='avatar.hairColor'
:facialHairType='avatar.facialHairType'
:clotheType='avatar.clotheType'
:clotheColor='avatar.clotheColor'
:eyeType='avatar.eyeType'
:eyebrowType='avatar.eyebrowType'
:mouthType='avatar.mouthType'
:skinColor='avatar.skinColor'>
</Avataaars>
<img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
</el-col>
<el-col>
<el-button @click="cropperVisible=true">上传</el-button>
<el-button @click="genAvatar" class="random">{{ randomTitle }}</el-button>
</el-col>
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="user.nickname" @blur="checkNickname"></el-input>
</el-form-item>
@ -58,18 +84,31 @@
</el-col>
</el-row>
</client-only>
<ImgCropper @onSubmit="updateUser" :visible.sync='cropperVisible' :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";
import saveSvg from "save-svg-as-png";
import Avataaars from 'vuejs-avataaars';
export default {
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
export default {
name: "account",
middleware: 'auth',
components: {
ImgCropper, VueCropper, Avataaars
},
computed: {
...mapState({
idUser: state => state.auth.user.idUser
})
}),
},
data() {
return {
@ -85,15 +124,44 @@
{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
]
},
loading: false
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.$set(_ts, 'user', res);
_ts.user = res
}
})
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
@ -120,22 +188,7 @@
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 {
_ts.$message.error('数据异常 !');
}
});
},
updateUserExtend() {
let _ts = this;
let userExtend = _ts.userExtend;
@ -145,15 +198,45 @@
_ts.$message.success('更新成功 !');
}
})
},
genAvatar() {
let _ts = this;
const avatar = generateRandomAvatar();
_ts.$set(_ts, 'avatar', avatar);
setTimeout(function () {
saveSvg.svgAsPngUri(document.getElementById('avatarSvg'), {}).then(uri => {
if (uri) {
_ts.updateUser(uri)
_ts.randomTitle = '‧★,:*:‧\\(￣▽￣)/‧:*‧°★* 再来一次'
} else {
_ts.$message.error('头像上传失败 !');
}
});
}, 300);
},
},
mounted() {
this.$store.commit('setActiveMenu', 'account');
this.getData();
}
}
}
</script>
<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>

8
pages/user/settings/security.vue
View File

@ -107,13 +107,7 @@ export default {
getData() {
let _ts = this;
_ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
if (res) {
if (res.message) {
_ts.$message.error(res.message);
} else {
_ts.$set(_ts, 'user', res.user);
}
}
_ts.$set(_ts, 'user', res);
})
},
hideChangeEmailDialog() {