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 @@ ...@@ -14,8 +14,8 @@
<link rel="shortcut icon" href="./favicon.ico" /> <link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title> <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="//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--> <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_cl07xa4zqij.js"></script> <script src="//at.alicdn.com/t/font_1628375_b9ejwjvcr7.js"></script>
</head> </head>
<body style="min-width: 1400px;" class="damolish"> <body style="min-width: 1400px;" class="damolish">
......
src/api/api.js
...@@ -150,8 +150,7 @@ export const postJsonRequest = (url, params) => { ...@@ -150,8 +150,7 @@ export const postJsonRequest = (url, params) => {
return Vue.axios({ return Vue.axios({
method: 'post', method: 'post',
url: `${local}${url}`, url: `${local}${url}`,
data: '{}', data: params,
params: params,
headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token} headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token}
}); });
}; };
......
src/views/enterprise/salutatorySet.vue
<template> <template>
<div class="daily-set-wrap "> <div class="daily-set-wrap ">
<div class="daily-set-content border-box"> <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"> <div class="salutatory-set-wrap m-t-20">
<el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form"> <el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form">
<el-form-item label="欢迎语标题" prop="title"> <el-form-item label="欢迎语标题" prop="title">
...@@ -25,7 +33,21 @@ ...@@ -25,7 +33,21 @@
</p> </p>
</el-popover> </el-popover>
</div> </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>
<el-form-item> <el-form-item>
<mult-upload :limit="1" :imgList.sync="imglist" /> <mult-upload :limit="1" :imgList.sync="imglist" />
</el-form-item> </el-form-item>
...@@ -47,7 +69,7 @@ ...@@ -47,7 +69,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getRequest } from '@/api/api'; import { getRequest, postForm } from '@/api/api';
// import { _debounce } from '@/common/js/public'; // import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg'; // import showMsg from '@/common/js/showmsg';
import limitTextarea from '@/components/limit-textarea.vue'; import limitTextarea from '@/components/limit-textarea.vue';
...@@ -64,6 +86,31 @@ export default { ...@@ -64,6 +86,31 @@ export default {
welcomeContent: '你好，<微信昵称>', welcomeContent: '你好，<微信昵称>',
welcomeImg: '' welcomeImg: ''
}, },
uploadList: [
{
title: '图片',
icon: 'icontupian',
fileType: '*'
},
{
title: '视频',
icon: 'iconshipin',
fileType: '.mp4'
},
{
title: '文件',
icon: 'iconwenjian',
fileType: '*'
},
{
title: '链接',
icon: 'iconlianjie'
},
{
title: '小程序',
icon: 'iconxiaochengxu'
}
],
imglist: [], imglist: [],
url: '', url: '',
rules: { rules: {
...@@ -71,10 +118,55 @@ export default { ...@@ -71,10 +118,55 @@ export default {
welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }] welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
}, },
emojiList: emojiArr, emojiList: emojiArr,
addReplayDialog: false addReplayDialog: false,
upUrl: ''
}; };
}, },
methods: { 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() { onClosed() {
this.url = ''; this.url = '';
}, },
...@@ -189,10 +281,46 @@ export default { ...@@ -189,10 +281,46 @@ export default {
}; };
</script> </script>
<style type="text/scss" lang="scss" scoped> <style type="text/scss" lang="scss" scoped>
.upload-input {
display: none;
}
.w-384 { .w-384 {
width: 384px; width: 555px;
box-sizing: border-box; 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 { .welcomeContent {
height: 220px; height: 220px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
...@@ -223,7 +351,7 @@ export default { ...@@ -223,7 +351,7 @@ export default {
} }
.welcomeContentItem >>> .el-form-item__content { .welcomeContentItem >>> .el-form-item__content {
position: relative; position: relative;
width: 384px; width: 555px;
box-sizing: border-box; box-sizing: border-box;
.text-bottom { .text-bottom {
position: absolute; position: absolute;
...@@ -232,11 +360,9 @@ export default { ...@@ -232,11 +360,9 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 38px; height: 38px;
width: 382px; width: 555px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 9px; padding: 0 9px;
// background: #f5f7fa;
.put { .put {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
...@@ -253,4 +379,29 @@ export default { ...@@ -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> </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