我的收藏模块
This commit is contained in:
熊丽君
212
src/views/home/account.vue
Normal file
212
src/views/home/account.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="account_page">
|
||||
<div class="list">
|
||||
<div class="list_l">
|
||||
<div class="list_icon"></div>
|
||||
<span class="list_info">
|
||||
<span class="text">当前手机号</span>
|
||||
<span class="phone">{{ name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openDialog('修改登录手机号')"
|
||||
>修改登录手机号</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list_l">
|
||||
<div class="list_icon password"></div>
|
||||
<span class="list_info">
|
||||
<span class="text">修改密码</span>
|
||||
<span class="phone">忘记密码时可通过手机验证码登录</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-button type="primary" size="small" @click="openDialog('修改密码')"
|
||||
>修改密码</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- :close-on-click-modal="false" -->
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
|
||||
<el-form-item
|
||||
label="新手机号"
|
||||
prop="username"
|
||||
v-if="title == '修改登录手机号'"
|
||||
>
|
||||
<el-input v-model.trim="form.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="code"
|
||||
class="code-input"
|
||||
label="验证码"
|
||||
v-if="title == '修改登录手机号'"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.newPassword"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 50%"
|
||||
>
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="validCode"
|
||||
class="el-input__icon input-icon"
|
||||
/>
|
||||
</el-input>
|
||||
<el-button
|
||||
@click="getCode"
|
||||
type="primary"
|
||||
:disabled="!show"
|
||||
style="margin-left:15px"
|
||||
>
|
||||
获取验证码
|
||||
<span v-show="!show" class="count">({{ count }}s)</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="新登录密码"
|
||||
prop="password"
|
||||
v-if="title == '修改密码'"
|
||||
>
|
||||
<el-input v-model.trim="form.password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="再次输入密码" v-if="title == '修改密码'">
|
||||
<el-input v-model.trim="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import store from '@/store';
|
||||
import { getAuthCode } from '@/api/login';
|
||||
import { updateInfo } from '@/api/home/info';
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['name'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
form: {},
|
||||
TIME_COUNT: 60,
|
||||
show: true,
|
||||
count: '', // 初始化次数
|
||||
timer: null,
|
||||
password: '',
|
||||
formRules: {
|
||||
username: [
|
||||
{ required: true, trigger: 'blur', message: '手机号不能为空' }
|
||||
],
|
||||
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogVisible(a, b) {
|
||||
if (!a) {
|
||||
this.form = {};
|
||||
this.password = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog(str) {
|
||||
this.title = str;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
getCode() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
if (!this.timer) {
|
||||
this.count = this.TIME_COUNT;
|
||||
this.show = false;
|
||||
getAuthCode({ phone: this.form.username }).then(res => {
|
||||
console.log(res);
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= this.TIME_COUNT) {
|
||||
this.count--;
|
||||
} else {
|
||||
this.show = true;
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
if (this.title == '修改密码') {
|
||||
if (this.form.password !== this.password)
|
||||
return this.msgError('新旧密码不一致');
|
||||
}
|
||||
updateInfo(this.form).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
// store.commit('SET_NAME', this.form.username);
|
||||
// this.dialogVisible = false;
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/';
|
||||
});
|
||||
});
|
||||
|
||||
// if(this.title=='修改登录手机号'){
|
||||
|
||||
// }else if(this.title=='修改密码'){
|
||||
|
||||
// }
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.account_page {
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
.list_l {
|
||||
display: flex;
|
||||
.list_icon {
|
||||
margin-right: 15px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5 url(~@/assets/image/icon9.png) no-repeat center
|
||||
center;
|
||||
background-size: 32%;
|
||||
}
|
||||
.password {
|
||||
background-image: url(~@/assets/image/icon10.png);
|
||||
}
|
||||
.list_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
.text {
|
||||
color: #999;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.phone {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
src/views/home/info.vue
Normal file
244
src/views/home/info.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="info_page">
|
||||
<div class="box">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
style="width:514px"
|
||||
>
|
||||
<el-form-item label="企业全称">
|
||||
<el-input v-model="form.companyName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业行业">
|
||||
<el-input v-model="form.companyType"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户姓名">
|
||||
<el-input v-model="form.nickName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户职位">
|
||||
<el-input v-model="form.note"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业地址" required>
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="addressType">
|
||||
<el-select
|
||||
v-model="form.addressType"
|
||||
placeholder="请选择"
|
||||
@change="handleCity"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionList1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="cityId">
|
||||
<el-select v-model="form.cityId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in optionList2"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业画像" prop="labelIdList">
|
||||
<el-button size="small" @click="open">设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="box_r">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px;border-radius:50%"
|
||||
:src="avatar"
|
||||
:preview-src-list="[avatar]"
|
||||
>
|
||||
</el-image>
|
||||
<singleUpload v-model="url" text="修改头像" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="企业画像设置" :visible.sync="dialogVisible" width="20%">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item
|
||||
:label="item.name"
|
||||
v-for="(item, index) in labelList"
|
||||
:key="item.id"
|
||||
>
|
||||
<el-select v-model="arr[index]" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="i in item.labelList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="setIds">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import store from '@/store';
|
||||
import { uploadAvatar } from '@/api/user';
|
||||
import {
|
||||
getDictListByStatus,
|
||||
updateCompanyUser,
|
||||
getLabelSetting,
|
||||
userInfo
|
||||
} from '@/api/home/info';
|
||||
import singleUpload from '@/components/Upload/singleUpload';
|
||||
export default {
|
||||
components: { singleUpload },
|
||||
computed: {
|
||||
...mapGetters(['avatar'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
form: {
|
||||
companyName: '',
|
||||
companyType: '',
|
||||
nickName: '',
|
||||
note: '',
|
||||
addressType: '',
|
||||
cityId: '',
|
||||
address: '',
|
||||
labelIdList: ''
|
||||
},
|
||||
optionList1: [
|
||||
{
|
||||
value: 1,
|
||||
label: '地级市'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '合肥区县'
|
||||
}
|
||||
],
|
||||
optionList2: [],
|
||||
dialogVisible: false,
|
||||
labelList: [],
|
||||
arr: [],
|
||||
rules: {
|
||||
addressType: [{ required: true, message: '请选择', trigger: 'change' }],
|
||||
cityId: [{ required: true, message: '请选择', trigger: 'change' }]
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
url() {
|
||||
uploadAvatar({ icon: this.url }).then(res => {
|
||||
store.commit('SET_AVATAR', this.url);
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
userInfo().then(({ data }) => {
|
||||
if (data) {
|
||||
data.addressType = data.addressType - 0;
|
||||
if (data.addressType == 1) {
|
||||
this.getType(true, data);
|
||||
} else {
|
||||
this.getCity(true, data);
|
||||
}
|
||||
}
|
||||
getLabelSetting({ companyId: data.companyId || 1 }).then(({ data }) => {
|
||||
this.labelList = data;
|
||||
this.arr = data.map(item =>
|
||||
item.labelList
|
||||
? item.labelList.filter(v => v.isHas)[0]
|
||||
? item.labelList.filter(v => v.isHas)[0].id
|
||||
: ''
|
||||
: undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 地级市切换
|
||||
handleCity(e) {
|
||||
this.form.cityId = '';
|
||||
// 地级市
|
||||
if (e === 1) {
|
||||
this.getType(false);
|
||||
} else {
|
||||
this.getCity(false);
|
||||
}
|
||||
},
|
||||
// 获取地级市
|
||||
getType(edit, info) {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.optionList2 = data;
|
||||
console.log(info);
|
||||
if (edit) this.form = info;
|
||||
});
|
||||
},
|
||||
// 获取地级市
|
||||
getCity(edit, info) {
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.optionList2 = data;
|
||||
if (edit) this.form = info;
|
||||
});
|
||||
},
|
||||
open() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setIds() {
|
||||
this.form.labelIdList = this.arr.filter(item => item);
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
updateCompanyUser(this.form).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
this.getUserInfo();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info_page {
|
||||
.box {
|
||||
display: flex;
|
||||
.box_r {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.el-image {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/deep/.el-upload-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
src/views/home/mine.vue
Normal file
90
src/views/home/mine.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="mine_page p0-100">
|
||||
<div class="mine_l">
|
||||
<router-link :to="item.path" v-for="(item, i) in list" :key="i">
|
||||
<div :class="i == index ? 'active' : ''" @click="index = i">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</router-link>
|
||||
<div @click="logout">退出登录</div>
|
||||
</div>
|
||||
<div class="mine_r">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
list: [
|
||||
{
|
||||
path: '/mine/info',
|
||||
name: '基本信息'
|
||||
},
|
||||
{
|
||||
path: '/mine/account',
|
||||
name: '账户安全'
|
||||
},
|
||||
{
|
||||
path: '/mine/ollection',
|
||||
name: '我的收藏'
|
||||
},
|
||||
{
|
||||
path: '/mine/news',
|
||||
name: '消息通知'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async logout() {
|
||||
this.$confirm('确定退出账号吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/';
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mine_page {
|
||||
display: flex;
|
||||
.mine_l {
|
||||
width: 310px;
|
||||
max-height: 340px;
|
||||
background-color: #f8f8f8;
|
||||
margin-right: 10px;
|
||||
border-radius: 6px;
|
||||
padding: 20px 0;
|
||||
div {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
// div:hover {
|
||||
// color: #fff;
|
||||
// font-weight: bold;
|
||||
// background-color: #3394ff;
|
||||
// }
|
||||
.active {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background-color: #3394ff;
|
||||
}
|
||||
}
|
||||
.mine_r {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
src/views/home/news.vue
Normal file
5
src/views/home/news.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
消息通知
|
||||
</div>
|
||||
</template>
|
||||
124
src/views/home/ollection.vue
Normal file
124
src/views/home/ollection.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="ollection_page">
|
||||
<div class="list" v-for="item in policyList" :key="item.id">
|
||||
<div class="item">
|
||||
<div style="max-width:520px">
|
||||
<h4 class="pointer text_hidden_one" @click="handleItem(item.id)">
|
||||
{{ item.title }}
|
||||
</h4>
|
||||
<div class="info">
|
||||
<div>来源：{{ item.source }}</div>
|
||||
<div>发布：{{ parseTime(item.textDate, '{y}-{m}-{d}') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag effect="dark" type="warning" v-if="item.cutOffTime">
|
||||
截止时间{{ parseTime(item.cutOffTime, '{y}-{m}-{d}') }}
|
||||
</el-tag>
|
||||
<el-button type="info" size="mini" @click="cancelItem(item.id)">
|
||||
<i class="el-icon-star-on"></i><span>取消收藏</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getPolicyList"
|
||||
/>
|
||||
<popup
|
||||
:dialogVisible="dialogVisible"
|
||||
:type="type"
|
||||
:formData="formData"
|
||||
@close="dialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getPolicy } from '@/api/home/info';
|
||||
import { cancel } from '@/api/search';
|
||||
import { getPolicyInfo } from '@/api/search';
|
||||
import popup from '../components/dialog';
|
||||
export default {
|
||||
components: {
|
||||
popup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
total: 0,
|
||||
policyList: [],
|
||||
dialogVisible: false,
|
||||
type: 'policy',
|
||||
formData: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogVisible(a, b) {
|
||||
// getPolicyList
|
||||
if (!a) {
|
||||
this.formData = {};
|
||||
this.getPolicyList();
|
||||
}
|
||||
},
|
||||
formData: {
|
||||
handler: function() {
|
||||
this.$nextTick(() => {
|
||||
this.formatRichText(this.formData.downloadUrl);
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
methods: {
|
||||
getPolicyList() {
|
||||
getPolicy(this.queryParams).then(({ data }) => {
|
||||
this.policyList = data.list;
|
||||
this.total = data.total;
|
||||
});
|
||||
},
|
||||
handleItem(id) {
|
||||
this.dialogVisible = true;
|
||||
getPolicyInfo({ policyId: id }).then(({ data }) => {
|
||||
this.formData = data;
|
||||
});
|
||||
},
|
||||
cancelItem(policyId) {
|
||||
cancel({ policyId }).then(res => {
|
||||
this.msgSuccess('操作成功');
|
||||
this.getPolicyList();
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPolicyList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ollection_page {
|
||||
min-height: 280px;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.el-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/home/userAvatar.vue
Normal file
176
src/views/home/userAvatar.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
v-bind:src="options.img"
|
||||
@click="editCropper()"
|
||||
title="点击上传头像"
|
||||
class="img-circle img-lg"
|
||||
/>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@opened="modalOpened"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="options.img"
|
||||
:info="true"
|
||||
:autoCrop="options.autoCrop"
|
||||
:autoCropWidth="options.autoCropWidth"
|
||||
:autoCropHeight="options.autoCropHeight"
|
||||
:fixedBox="options.fixedBox"
|
||||
@realTime="realTime"
|
||||
v-if="visible"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<div class="avatar-upload-preview">
|
||||
<img :src="previews.url" :style="previews.img" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-row>
|
||||
<el-col :lg="2" :md="2">
|
||||
<el-upload
|
||||
action="#"
|
||||
:http-request="requestUpload"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-button size="small">
|
||||
上传
|
||||
<i class="el-icon-upload el-icon--right"></i>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 2 }" :md="2">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
size="small"
|
||||
@click="changeScale(1)"
|
||||
></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
size="small"
|
||||
@click="changeScale(-1)"
|
||||
></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button
|
||||
icon="el-icon-refresh-left"
|
||||
size="small"
|
||||
@click="rotateLeft()"
|
||||
></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button
|
||||
icon="el-icon-refresh-right"
|
||||
size="small"
|
||||
@click="rotateRight()"
|
||||
></el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
|
||||
<el-button type="primary" size="small" @click="uploadImg()"
|
||||
>提 交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store';
|
||||
import { VueCropper } from 'vue-cropper';
|
||||
import { uploadAvatar } from '@/api/user';
|
||||
|
||||
export default {
|
||||
components: { VueCropper },
|
||||
props: {
|
||||
user: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: '修改头像',
|
||||
options: {
|
||||
img: store.getters.avatar, //裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
autoCropWidth: 200, // 默认生成截图框宽度
|
||||
autoCropHeight: 200, // 默认生成截图框高度
|
||||
fixedBox: true // 固定截图框大小 不允许改变
|
||||
},
|
||||
previews: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 编辑头像
|
||||
editCropper() {
|
||||
this.open = true;
|
||||
},
|
||||
// 打开弹出层结束时的回调
|
||||
modalOpened() {
|
||||
this.visible = true;
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload() {},
|
||||
// 向左旋转
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
// 向右旋转
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
// 图片缩放
|
||||
changeScale(num) {
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
// 上传预处理
|
||||
beforeUpload(file) {
|
||||
if (file.type.indexOf('image/') == -1) {
|
||||
this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
this.options.img = reader.result;
|
||||
};
|
||||
}
|
||||
},
|
||||
// 上传图片
|
||||
uploadImg() {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
debugger;
|
||||
let formData = new FormData();
|
||||
formData.append('avatarfile', data);
|
||||
uploadAvatar(formData).then(response => {
|
||||
this.open = false;
|
||||
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||
store.commit('SET_AVATAR', this.options.img);
|
||||
this.msgSuccess('修改成功');
|
||||
this.visible = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
// 实时预览
|
||||
realTime(data) {
|
||||
this.previews = data;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user