Skip to content

H
haoban-3
Commit 95bbebf7 by crushh
Options

update: temp

parent 88788c93
Showing with 161 additions and 11 deletions
index.html
......@@ -14,8 +14,8 @@
<link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title>
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.69.css" />
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_cl07xa4zqij.css" /> <!--好办后台3.0-->
<script src="//at.alicdn.com/t/font_1628375_cl07xa4zqij.js"></script>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_b9ejwjvcr7.css" /> <!--好办后台3.0-->
<script src="//at.alicdn.com/t/font_1628375_b9ejwjvcr7.js"></script>
</head>
<body style="min-width: 1400px;" class="damolish">
......
src/api/api.js
......@@ -150,8 +150,7 @@ export const postJsonRequest = (url, params) => {
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: '{}',
params: params,
data: params,
headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token}
});
};
......
src/views/enterprise/salutatorySet.vue
<template>
<div class="daily-set-wrap ">
<div class="daily-set-content border-box">
<div class="admin-tip-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<p class="el-alert__title">由管理员或者业务负责人统一配置后，客户将在添加成员为联系人后收到该欢迎语<br /></p>
</div>
</div>
</div>
<div class="salutatory-set-wrap m-t-20">
<el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form">
<el-form-item label="欢迎语标题" prop="title">
......@@ -25,7 +33,21 @@
</p>
</el-popover>
</div>
<div class="addInfo">
<el-popover placement="top" trigger="click">
<ul class="flex flex-wrap">
<li v-for="(item, index) in uploadList" :key="index + 'emoji'" class="uploadListBox" @click="handleUploadList(item, index)">
<i :class="['iconfont-hb3', item.icon]" style="font-size:20px"></i>
<p>{{ item.title }}</p>
<input type="file" :accept="item.fileType" @change="e => handkeFileChange(e, item)" class="upload-input" />
</li>
</ul>
<p slot="reference" style="display: inline-block;cursor: pointer;"><i class="iconfont-hb3 icontianjiajiahaowubiankuang"></i> <span>添加图片/视频/文件/链接/小程序</span></p>
</el-popover>
<span style="font-size:12px;color:#909399">(附件不超过9个，单个大小不超过2M)</span>
</div>
</el-form-item>
<el-form-item>
<mult-upload :limit="1" :imgList.sync="imglist" />
</el-form-item>
......@@ -47,7 +69,7 @@
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import { getRequest, postForm } from '@/api/api';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import limitTextarea from '@/components/limit-textarea.vue';
......@@ -64,6 +86,31 @@ export default {
welcomeContent: '你好，<微信昵称>',
welcomeImg: ''
},
uploadList: [
{
title: '图片',
icon: 'icontupian',
fileType: '*'
},
{
title: '视频',
icon: 'iconshipin',
fileType: '.mp4'
},
{
title: '文件',
icon: 'iconwenjian',
fileType: '*'
},
{
title: '链接',
icon: 'iconlianjie'
},
{
title: '小程序',
icon: 'iconxiaochengxu'
}
],
imglist: [],
url: '',
rules: {
......@@ -71,10 +118,55 @@ export default {
welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
},
emojiList: emojiArr,
addReplayDialog: false
addReplayDialog: false,
upUrl: ''
};
},
methods: {
handleUploadList(item, index) {
console.log(item);
if (['图片', '视频', '文件'].includes(item.title)) {
document.getElementsByClassName('upload-input')[index].click();
}
},
handkeFileChange(e, item) {
console.log(item);
const file = e.target.files[0]; // only use files[0]
console.log(file);
let fileType = '';
if (item.title == '图片') {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('请上传图片');
return false;
}
fileType = 'jpg';
} else if (item.title == '视频') {
const isVideo = file.type == 'video/mp4';
if (!isVideo) {
this.$message.error('请上传mp4类型的视频文件');
return false;
}
fileType = 'mp4';
} else if (item.title == '文件') {
fileType = '.doc';
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
console.log(e);
};
console.log(fileType);
this.handleRequest(file, fileType);
},
handleRequest(file, fileType) {
let files = new FormData();
files.append('file', file);
postForm(`/haoban-manage3-web/upload-file?fileType=${fileType}`, files).then(res => {
const { data } = res;
console.log(data);
});
},
onClosed() {
this.url = '';
},
......@@ -189,10 +281,46 @@ export default {
};
</script>
<style type="text/scss" lang="scss" scoped>
.upload-input {
display: none;
}
.w-384 {
width: 384px;
width: 555px;
box-sizing: border-box;
}
.addInfo {
padding: 10px 20px;
width: 555px;
background: #f7f8fa;
border-radius: 2px;
position: absolute;
line-height: 20px;
box-sizing: border-box;
span {
margin-left: 8px;
}
p:hover {
color: #2f54eb;
}
}
.uploadListBox {
width: 72px;
height: 60px;
border-radius: 2px;
border: 1px solid #dcdfe6;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
&:hover {
box-shadow: 0px 2px 4px 0px rgba(47, 84, 235, 0.16);
border: 1px solid #2f54eb;
}
}
.uploadListBox + .uploadListBox {
margin-left: 20px;
}
.welcomeContent {
height: 220px;
border: 1px solid #dcdfe6;
......@@ -223,7 +351,7 @@ export default {
}
.welcomeContentItem >>> .el-form-item__content {
position: relative;
width: 384px;
width: 555px;
box-sizing: border-box;
.text-bottom {
position: absolute;
......@@ -232,11 +360,9 @@ export default {
justify-content: space-between;
align-items: center;
height: 38px;
width: 382px;
width: 555px;
box-sizing: border-box;
padding: 0 9px;
// background: #f5f7fa;
.put {
font-size: 12px;
font-weight: 400;
......@@ -253,4 +379,29 @@ export default {
}
}
}
.el-alert--info {
align-items: flex-start;
width: 700px;
padding-top: 5px;
font-size: 14px;
color: #606266;
background: #f7f8fa;
border-radius: 2px;
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
margin-top: 5px;
}
.el-alert__content {
padding-left: 9px;
.el-alert__title {
font-size: 13px;
font-weight: 400;
color: #303133;
line-height: 22px;
}
}
</style>
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