Skip to content

H
haoban-3
Commit 95bbebf7 by crushh
Options

update: temp

parent 88788c93
Showing with 308 additions and 165 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/salutatory.vue
......@@ -2,7 +2,7 @@
<div>
<div class="warp">
<h2>加好友配置</h2>
<span class="echoData">发送【好办欢迎语】+【带导购参数的会员小程序卡片】</span>
<span class="echoData" v-show="friendSettingType">{{ friendSettingTypeOption[friendSettingType] }}</span>
<el-button type="text" style="margin-left: 20px;" @click="openDialog">去配置</el-button>
</div>
<div class="daily-set-wrap">
......@@ -14,35 +14,44 @@
<p class="el-alert__title">
1. 因企业微信接口限制，若在企微管理端为相关人员配置欢迎语，好办设置欢迎语不会生效；<br />
2. 若使用好办欢迎语，请关闭其他企业自建应用/第三方应用的欢迎语配置； <br />
3. 在此处所自定义配置的欢迎语基础上，系统将默认包含“带参会员小程序卡片”，以便门店员工添加客户好友后，引导客户进入带参会员小程序页面授权微信信息，进而使得系统将企业客户与GIC后台某客户对应起来；
3. 在此处所自定义配置的欢迎语基础上，系统将默认包含“带参会员小程序卡片”，以便门店员工添加客户好友后，引导客户进入带参会员小程序页面授权微信信息，进而使得系统将企业客户与GIC后台某客户对应起来；<br />
4. 如果导购没有绑定导购code，没有主门店信息，则无法发送好办欢迎语；
</p>
</div>
</div>
</div>
<div class="flex flex-space-between m-b-20 m-t-20">
<el-input placeholder="请输入标题" maxlength="50" v-model="searchInput" class="w-264" style="width: 264px;" clearable> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
<el-input placeholder="请输入标题" maxlength="50" v-model="title" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
<el-button type="primary" @click="changeRoute">新建欢迎语</el-button>
</div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%' }">
<el-table-column prop="title" label="标题" width="220" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.title }}</template>
<template slot-scope="{ row }">{{ row.title }}</template>
</el-table-column>
<el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.welcomeContent }}</template>
<template slot-scope="{ row }">{{ row.welcomeContent }}</template>
</el-table-column>
<el-table-column label="附件">
<template slot-scope="scope">
<el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><i class="iconfont iconwenjianleixingtupian" /> {{ scope.row.c1 }} </el-popover>
<template slot-scope="{ row }">
<el-popover placement="top-start" trigger="click">
<div class="flexBox" v-for="item in row.welcomeMediaList" :key="item.welcomeMediaId">
<svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
<span class="popverText">{{ item.mediaTitle }}</span>
</div>
<div slot="reference" class="flexBox" v-if="row.welcomeMediaList && row.welcomeMediaList.length">
<svg-icon :iconname="iconType[row.welcomeMediaList[0].mediaType]" size="40" style="margin-right: 10px;"> </svg-icon>
<span class="wrapText"> {{ row.welcomeMediaList[0].mediaTitle }}</span>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间" width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.updateTime }}</template>
<template slot-scope="{ row }">{{ row.updateTime }}</template>
</el-table-column>
<el-table-column prop="operatorName" label="操作人" width="120" show-overflow-tooltip> </el-table-column>
<el-table-column prop="suitDepartmentName" label="适用范围" width="120" show-overflow-tooltip> </el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<template slot-scope="{ row }">
<el-button type="text">编辑</el-button>
<el-button type="text">删除</el-button>
</template>
......@@ -50,38 +59,71 @@
</el-table>
</div>
</div>
<el-dialog title="加好友配置" :visible.sync="dialogVisible" width="599px" :before-close="handleClose">
<el-dialog title="加好友配置" :visible.sync="dialogVisible" width="570px" :before-close="handleClose">
<el-form label-width="100px">
<el-form-item label="加好友配置">
<el-radio :label="1" v-model="valueVal">发送【好办欢迎语】+【带导购参数的会员小程序卡片】</el-radio>
<el-radio :label="2" v-model="valueVal">发送【好办欢迎语】+【带导购参数的公众号二维码】</el-radio>
<el-radio :label="2" v-model="valueVal">不发送【好办欢迎语】</el-radio>
<el-radio :label="2" v-model="valueVal">发送【好办欢迎语】</el-radio>
<el-radio :label="Number(key)" v-model="type" v-for="(val, key) in friendSettingTypeOption" :key="key">{{ val }}</el-radio>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button type="primary" :loading="btnLoading" @click="saveSetting">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { postJsonRequest, getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
props: {},
data() {
return {
form: {},
openFlag: 0,
valueVal: 1,
friendSettingTypeOption: {
1: '发送【好办欢迎语】+【带导购参数的会员小程序卡片】',
2: '发送【好办欢迎语】+【带导购参数的公众号二维码】',
3: '发送【好办欢迎语】',
4: '不发送【好办欢迎语】，用企微欢迎语'
},
title: '',
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
friendSettingType: '',
type: 1,
friendSettingId: '',
btnLoading: false,
dialogVisible: false,
iconType: {
1: 'iconwenjianleixingtupian',
2: 'iconwenjianleixingshipin',
3: 'iconwenjianleixing-wenjian',
4: 'iconwenjianleixing-lianjie'
},
tableData: [
{
title: '华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语',
welcomeContent: '华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语',
c1: '图片名称图片名称图片名称图片名称图片名称',
welcomeMediaList: [
{
welcomeMediaId: '121',
mediaTitle: '图片名称图片名称图片名称图片名称图片名称',
mediaType: 1
},
{
welcomeMediaId: '11',
mediaTitle: '视频名称视频名称视频名称视频名称视频名称视频名称视频名称视频名称视频名称视频名称',
mediaType: 2
},
{
welcomeMediaId: '12',
mediaTitle: '文件名称文件名称文件名称文件名称文件名称文件名称文件名称文件名称文件名称文件名称文件名称',
mediaType: 3
},
{
welcomeMediaId: '13',
mediaTitle: 'http://baidusadsssssssssssssssssssssssssssssssasasa.com',
mediaType: 4
}
],
updateTime: '2021-12-12 12:11:00',
operatorName: '稻米',
g1: '百度一下你就知道',
......@@ -90,11 +132,64 @@ export default {
]
};
},
filters: {},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
this.getSetting();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
methods: {
/**
* 输入
*/
toInput: _debounce(function(e, value) {
this.getData();
}, 500),
/**
* 搜索标签清空
*/
clearSearch() {
this.getData();
},
openDialog() {
this.dialogVisible = true;
},
getSetting() {
getRequest('/haoban-manage3-web/welcome/get/friend-setting', { wxEnterpriseId: this.wxEnterpriseId }).then(res => {
let resData = res.data;
if (resData.code == 0 && resData.result) {
const { friendSettingId, friendSettingType } = resData.result;
this.friendSettingId = friendSettingId;
this.type = friendSettingType;
this.friendSettingType = friendSettingType;
}
});
},
saveSetting() {
let data = {
friendSettingId: this.friendSettingId,
wxEnterpriseId: this.wxEnterpriseId,
friendSettingType: this.type
};
this.btnLoading = true;
postJsonRequest('/haoban-manage3-web/welcome/save/friend-setting', data)
.then(res => {
console.log(res);
let resData = res.data;
if (resData.code == 0 && resData.result) {
this.$message.success(resData.message);
this.dialogVisible = false;
this.getSetting();
}
})
.finally(() => {
this.btnLoading = false;
});
},
/**
* 跳转
*/
......@@ -106,72 +201,27 @@ export default {
* 获取数据
*/
getData() {
const that = this;
getRequest('/haoban-manage3-web/get-welcome', {})
postJsonRequest('/haoban-manage3-web/welcome/list', { title: this.title, wxEnterpriseId: this.wxEnterpriseId })
.then(res => {
let resData = res.data;
if (resData.errorCode == 1 && resData.result) {
that.form = { ...resData.result };
that.openFlag = resData.result.openFlag;
if (resData.code == 0 && resData.result) {
this.tableData = resData.result;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
.catch(error => {
this.$message.error({
duration: 1000,
message: error.message
});
});
},
setWelcome(val) {
const that = this;
that.$refs.form.validate(value => {
if (value) {
this.$confirm('是否确认修改欢迎语启用状态？', '提示')
.then(() => {
getRequest('/haoban-manage3-web/set-welcome', { openFlag: val })
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.$message.success({
duration: 1000,
message: '设置成功'
});
window.location.reload();
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
})
.catch(() => {
that.openFlag = that.openFlag === 1 ? 0 : 1;
});
}
});
}
},
watch: {},
mounted() {
const that = this;
that.$emit('showTab', 4);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-ebecf0 {
background: #ebecf0;
}
.warp {
background: #fff;
margin-bottom: 10px;
......@@ -190,36 +240,6 @@ export default {
}
}
.color-c0c4cc {
display: inline-block;
line-height: 34px;
padding-left: 10px;
color: #c0c4cc;
}
.condition-tips {
display: inline-block;
vertical-align: middle;
line-height: 32px;
}
.p-l-30 {
padding-left: 30px;
}
.p-l-40 {
padding-left: 40px;
}
.p-l-55 {
padding-left: 55px;
}
.p-l-85 {
padding-left: 85px;
}
.m-l-20 {
margin-left: 20px;
}
.line-50 {
height: 50px;
line-height: 50px;
}
.el-alert--info {
align-items: flex-start;
width: 700px;
......@@ -255,58 +275,31 @@ export default {
}
}
}
.salutatory-wrap {
// height: 160px;
background: #f5f7fa;
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: 47px;
padding: 0 20px 0 29px;
.left {
font-size: 14px;
font-weight: 600;
color: #303133;
line-height: 20px;
}
.right {
.date {
font-size: 12px;
font-weight: 400;
color: #909399;
line-height: 17px;
margin-right: 30px;
}
}
}
.line {
box-sizing: border-box;
border: 1px solid #e4e7ed;
border-style: none none solid none;
.el-radio + .el-radio {
margin-left: 0;
}
.flexBox {
display: flex;
justify-content: flex-start;
align-items: center;
.wrapText {
width: 90%;
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom {
padding: 16px 20px 21px 29px;
.el-form-item {
>>> .el-form-item__label {
padding: 0;
}
>>> .el-form-item__label,
>>> .el-form-item__content {
line-height: 20px;
font-size: 14px;
font-weight: 400;
color: #303133;
}
}
.popverText {
font-size: 12px;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.welcome-text {
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
.flexBox + .flexBox {
margin-top: 10px;
}
</style>
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