Skip to content

O
online-edu-admin
Commit e1985a0d authored by liuyang's avatar liuyang
Browse files
Options

修改企业头像上传

parent 61eb8650
Show whitespace changes
Inline Side-by-side
Showing with 93 additions and 30 deletions
src/views/biz/enterprise/index.vue
View file @ e1985a0d
...@@ -55,26 +55,21 @@ ...@@ -55,26 +55,21 @@
> >
<a-row <a-row
type="flex" type="flex"
justify="space-between" justify="start"
align="start" align="middle"
> >
<!-- 头像 --> <!-- 头像 -->
<a-col :span="4"> <a-col :span="4">
<a-avatar <a-avatar
v-if="!record.logoUrl || record.logoUrl == ''"
shape="square"
:size="64"
icon="user"
/>
<a-avatar
v-if="record.logoUrl && record.logoUrl != ''"
shape="square" shape="square"
:size="64" :size="64"
:src="record.logoUrl" :src="record.logoUrl && record.logoUrl != '' ? record.logoUrl : ''"
:icon="!record.logoUrl || record.logoUrl == '' ? 'user' : ''"
/> />
</a-col> </a-col>
<!-- 企业名称 --> <!-- 企业名称 -->
<a-col :span="20"> <a-col>
<span style="margin: 10px;">{{record.name}}</span> <span style="margin: 10px;">{{record.name}}</span>
</a-col> </a-col>
</a-row> </a-row>
...@@ -86,26 +81,22 @@ ...@@ -86,26 +81,22 @@
> >
<a-row <a-row
type="flex" type="flex"
justify="space-between" justify="start"
align="middle" align="middle"
> >
<!-- 头像 --> <!-- 头像 -->
<a-col :span="4"> <a-col :span="4">
<a-avatar <a-avatar
v-if="!record.adminAvatarUrl || record.adminAvatarUrl == ''" v-if=""
shape="square"
:size="64"
icon="user"
/>
<a-avatar
v-if="record.adminAvatarUrl && record.adminAvatarUrl != ''"
shape="square" shape="square"
:size="64" :size="64"
:src="record.adminAvatarUrl" :src="record.adminAvatarUrl && record.adminAvatarUrl != '' ? record.adminAvatarUrl : ''"
:icon="!record.adminAvatarUrl || record.adminAvatarUrl == '' ? 'user' : ''"
/> />
</a-col> </a-col>
<!-- 管理员姓名、昵称，注册时间 --> <!-- 管理员姓名、昵称，注册时间 -->
<a-col :span="20"> <a-col>
<a-space <a-space
direction="vertical" direction="vertical"
align="start" align="start"
...@@ -172,25 +163,43 @@ ...@@ -172,25 +163,43 @@
<a-form-model-item <a-form-model-item
label="企业LOGO" label="企业LOGO"
prop="logoUrl" prop="logoUrl"
>
<a-upload
name="avatarUpload"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
@change="handleUpload"
:customRequest="uploadLogo"
> >
<a-avatar <a-avatar
v-if="!formModel.logoUrl || formModel.logoUrl == ''" v-if="formModel.logoUrl"
shape="square" shape="square"
:size="64" :size="128"
icon="user" :src="formModel.logoUrl"
@click="changeLogo" @click="changeLogo"
/> />
<a-avatar <div v-else>
v-if="formModel.logoUrl && formModel.logoUrl != ''" <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
<!-- <a-avatar
v-if=""
shape="square" shape="square"
:size="64" :size="64"
:src="formModel.logoUrl" :icon="!formModel.logoUrl || formModel.logoUrl == '' ? 'user' : ''"
:src="formModel.logoUrl && formModel.logoUrl != '' ? formModel.logoUrl : ''"
@click="changeLogo" @click="changeLogo"
/> /> -->
<a-input
<!-- <a-input
v-model="formModel.logoUrl" v-model="formModel.logoUrl"
type="hidden" type="hidden"
> > -->
</a-input> </a-input>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item
...@@ -260,6 +269,7 @@ ...@@ -260,6 +269,7 @@
import { fetchList, addObj, putObj } from "@/api/biz/enterprise"; import { fetchList, addObj, putObj } from "@/api/biz/enterprise";
import { disposereq, timestampToTime, timestampToymd } from "@/utils/util"; import { disposereq, timestampToTime, timestampToymd } from "@/utils/util";
import { pca, pcaa } from "area-data"; import { pca, pcaa } from "area-data";
import { uploadFile } from "@/api/biz/resource";
let columns = [ let columns = [
{ {
...@@ -325,6 +335,7 @@ export default { ...@@ -325,6 +335,7 @@ export default {
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
}, },
uploadLoading: false,
loading: false, loading: false,
modalVisible: false, modalVisible: false,
modalTitle: "添加", modalTitle: "添加",
...@@ -492,7 +503,45 @@ export default { ...@@ -492,7 +503,45 @@ export default {
changeLogo() { changeLogo() {
console.log("changeLogo click"); console.log("changeLogo click");
}, },
beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
this.$message.info("只能上传图片");
}
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error("Image must smaller than 10MB!");
}
return isJpgOrPng && isLt2M;
}, },
handleUpload(info){
if (info.file.status === "uploading") {
this.uploadLoading = true;
return;
}
if (info.file.status === 'done') {
this.uploadLoading = false;
return;
}
},
uploadLogo(data){
const formData = new FormData();
formData.append("file", data.file);
uploadFile(formData)
.then((res) => {
if (res.data.resp_code == 200) {
this.formModel.logoUrl = res.data.datas.url;
} else {
this.$message.info("上传失败");
}
})
.catch((err) => {
disposereq(this, err);
});
}
},
}; };
</script> </script>
<style> <style>
...@@ -524,4 +573,17 @@ export default { ...@@ -524,4 +573,17 @@ export default {
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;
} }
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment