ak
/
msopen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Signed-off-by: yinxr 插入超链接交互

This commit is contained in:
yinxr 2019-02-11 14:57:51 +08:00
parent a40c4fb02e
commit 8cb9e90ae7
4 changed files with 315 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
View File

@ -1,94 +1,102 @@
<!-- 自定义菜单 --> <!-- 自定义菜单 -->
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css"> <link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'"> <div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
<el-container class="ms-custom-container"> <el-container class="ms-custom-container">
<el-header class="ms-header" height="50px"> <el-header class="ms-header" height="50px">
<el-row> <el-row>
<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button> <el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button> <el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button> <el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
</el-row> </el-row>
</el-header> </el-header>
<el-container class="ms-container"> <el-container class="ms-container">
<el-aside> <el-aside>
<el-container> <el-container>
<el-header>公众号</el-header> <el-header>公众号</el-header>
<el-main></el-main> <el-main></el-main>
<el-footer> <el-footer>
<el-button icon="el-icon-date"></el-button> <el-button icon="el-icon-date"></el-button>
<div class="ms-create-menu"> <div class="ms-create-menu">
<div class="ms-create-sub-menu"> <div class="ms-create-sub-menu">
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button> <el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button> <el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
</div> </div>
<el-button icon="el-icon-plus"></el-button> <el-button icon="el-icon-plus"></el-button>
</div> </div>
</el-footer> </el-footer>
</el-container> </el-container>
</el-aside> </el-aside>
<el-main> <el-main>
<el-card class="custom-menu-card" shadow="never"> <el-card class="custom-menu-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>新建菜单</span> <span>新建菜单</span>
</div> </div>
<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px"> <el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name"> <el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
<el-input v-model="customMenuForm.name" size='mini'></el-input> <el-input v-model="customMenuForm.name" size='mini'></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span> <span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item> </el-form-item>
<el-form-item label="菜单内容" class="ms-custom-menu-content"> <el-form-item label="菜单内容" class="ms-custom-menu-content">
<el-tabs v-model="activeName" @tab-click=""> <el-tabs v-model="activeName" @tab-click="">
<el-tab-pane label="图片" name="picture"> <el-tab-pane label="图片" name="picture">
<span slot="label"> <span slot="label">
<i class="el-icon-picture"></i>图片</span> <i class="el-icon-picture"></i>图片</span>
<div onclick="materialBankFormVue.open()"> <div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i> <i class="el-icon-picture-outline"></i>
<span>从素材库选择</span> <span>从素材库选择</span>
</div> </div>
<div onclick="newPicFormVue.open()"> <div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<span>新建图片</span> <span>新建图片</span>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="图文管理" name="article"> <el-tab-pane label="图文管理" name="article">
<span slot="label"> <span slot="label">
<i class="el-icon-picture"></i>图文管理</span> <i class="el-icon-picture"></i>图文管理</span>
</el-tab-pane> <div onclick="materialBankFormVue.open()">
</el-tabs> <i class="el-icon-picture-outline"></i>
</el-form-item> <span>从素材库选择</span>
</el-form> </div>
</el-card> <div onclick="newPicFormVue.open()">
</el-main> <i class="el-icon-plus"></i>
</el-container> <span>新建图文</span>
</el-container> </div>
</el-tab-pane>
</el-tabs>
</el-form-item>
</el-form>
</el-card>
</el-main>
</el-container>
</el-container>
</div> </div>
<script> <script>
var customMenuVue = new Vue({ var customMenuVue = new Vue({
el: "#custom-menu", el: "#custom-menu",
data: { data: {
customMenuForm: { customMenuForm: {
name: '', name: '',
}, },
customMenuFormRules: { customMenuFormRules: {
name: [{ name: [{
required: true, required: true,
message: '请输入菜单名称', message: '请输入菜单名称',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
{ {
min: 1, min: 1,
max: 5, max: 5,
message: '长度在 1 到 5 个字符', message: '长度在 1 到 5 个字符',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
} }
], ],
}, },
addSubMenuShow: false, //子菜单添加弹窗 addSubMenuShow: false, //子菜单添加弹窗
activeName: 'picture' activeName: 'picture'
}, },
methods: { methods: {
} }
}) })
</script> </script>

208
src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl
View File

@ -1,70 +1,152 @@
<!-- 消息回复 && 关注回复 --> <!-- 消息回复 && 关注回复 -->
<link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css"> <link rel="stylesheet" href="../../../../static/mweixin/css/message-reply.css">
<div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'"> <div id="message-reply" class="ms-message-reply ms-weixin-content" v-if="menuVue.menuActive == '消息回复'||menuVue.menuActive == '关注时回复'">
<el-container class="ms-admin-message-reply"> <el-container class="ms-admin-message-reply">
<el-header class="ms-header" height="50px"> <el-header class="ms-header" height="50px">
<el-row> <el-row>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button> <el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button> <el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
</el-row> </el-row>
</el-header> </el-header>
<el-container> <el-container>
<el-header class="ms-tr ms-header"> <el-header class="ms-tr ms-header">
<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"> <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search">
</el-input> </el-input>
</el-header> </el-header>
<em-main class="ms-container"> <em-main class="ms-container">
<div>回复内容</div> <div>回复内容</div>
<el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs"> <el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs">
<el-tab-pane label="文字" name="text"> <el-tab-pane label="文字" name="text">
<el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm"> <el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm">
<el-form-item class="ms-message-reply-content"> <el-form-item class="ms-message-reply-content">
<el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'> <el-input type="textarea" v-model="messageReplyForm.reply" :autosize="{ minRows: 4, maxRows: 4}" resize='none'>
</el-input> </el-input>
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i> <i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
<div class="footer"> <div class="footer">
<i class="el-icon-star-off"></i> <i class="el-icon-star-off"></i>
<a>插入超链接</a> <!-- 插入超链接 -->
</div> <el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
</el-form-item> <el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
</el-form> <el-form-item label="文本内容" prop='text'>
</el-form> <el-input v-model="hyperlinkForm.text" size='mini'></el-input>
</el-tab-pane> </el-form-item>
<el-tab-pane label="图片" name="picture"> <el-form-item label="链接地址" prop='link'>
</el-tab-pane> <el-input v-model="hyperlinkForm.link" size='mini'></el-input>
<el-tab-pane label="图文" name="article"> </el-form-item>
</el-tab-pane> <el-form-item style="margin:0">
</el-tabs> <el-row type='flex' justify='end'>
</em-main> <el-col span='6'>
</el-container> <el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
</el-container> </el-col>
<el-col span='6'>
<el-button @click="cancelLink" size='mini'>取消</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<a slot="reference">插入超链接</a>
</el-popover>
</div>
</el-form-item>
</el-form>
</el-form>
</el-tab-pane>
<el-tab-pane label="图片" name="picture" class="message-reply-picture">
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图片</span>
</div>
</el-tab-pane>
<el-tab-pane label="图文" name="article" class="message-reply-article">
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图文</span>
</div>
</el-tab-pane>
</el-tabs>
</em-main>
</el-container>
</el-container>
</div> </div>
<script> <script>
var messageReplyVue = new Vue({ var messageReplyVue = new Vue({
el: "#message-reply", el: "#message-reply",
data: { data: {
messageReplyForm: { messageReplyForm: {
reply: '', reply: '',
}, },
messageReplyFormRules: { messageReplyFormRules: {
name: [{ name: [{
required: true, required: true,
message: '请输入菜单名称', message: '请输入菜单名称',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
}, },
{ {
min: 1, min: 1,
max: 5, max: 5,
message: '长度在 1 到 5 个字符', message: '长度在 1 到 5 个字符',
trigger: ['blur', 'change'] trigger: ['blur', 'change']
} }
], ],
}, },
activeName: 'text', activeName: 'text',
}, // 超链接
methods: { hyperlinkForm: {
text: "",
link: "",
},
hyperlinkRule: {
text: [{
required: true,
message: '请输入超链接显示的文本内容',
trigger: 'blur'
},
{
min: 1,
max: 50,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
}
],
link: [{
required: true,
message: '请输入超链接地址',
trigger: 'change'
}, {
validator: function (rule, value, callback) {
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
callback() : callback('链接不合法')
}
}],
},
popoverShow:false,//弹出层显示与否的状态值
},
methods: {
// 保存超链接
saveLink: function () {
var that = this;
that.$refs.hyperlinkForm.validate(function (boolean,object) {
if(boolean){
// 校验成功
that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>`
that.cancelLink()
}
})
},
// 取消超链接
cancelLink: function () {
this.$refs.hyperlinkForm.resetFields();
this.popoverShow = false
},
}
} })
})
</script> </script>

51
src/main/webapp/static/mweixin/css/message-reply.css
View File

@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
font-weight: initial; font-weight: initial;
font-size: 12px; font-size: 12px;
color: #aaa; color: #999;
resize: none; resize: none;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
/*滚动条的圆角*/ /*滚动条的圆角*/
background-color: #ddd; background-color: #e6e6e6;
/*滚动条的背景颜色*/ /*滚动条的背景颜色*/
} }
.ms-container { .ms-container {
@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px; height: 55px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 10px 25px 10px; padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #e6e6e6;
} }
.ms-weixin-dialog .el-dialog__header .el-dialog__title { .ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold; font-weight: bold;
@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333; color: #333;
} }
.ms-weixin-dialog .el-dialog__footer { .ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd; border-top: 1px solid #e6e6e6;
padding: 15px !important; padding: 15px !important;
} }
.ms-hover { .ms-hover {
@ -125,6 +125,7 @@ textarea::-webkit-input-placeholder {
} }
.ms-admin-message-reply .ms-container { .ms-admin-message-reply .ms-container {
display: flex; display: flex;
height: 256px;
} }
.ms-admin-message-reply .ms-container .message-reply-tabs { .ms-admin-message-reply .ms-container .message-reply-tabs {
padding-left: 12px; padding-left: 12px;
@ -148,10 +149,11 @@ textarea::-webkit-input-placeholder {
} }
.ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll { .ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
padding: 0 20px; padding: 0 20px;
border: 1px solid #ddd; border: 1px solid #e6e6e6;
} }
.ms-message-reply .message-reply-tabs .el-tabs__content { .ms-message-reply .message-reply-tabs .el-tabs__content {
border: 1px solid #ddd; border: 1px solid #e6e6e6;
height: calc(100% - 42px);
} }
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane { .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane {
padding: 0 !important; padding: 0 !important;
@ -174,7 +176,7 @@ textarea::-webkit-input-placeholder {
bottom: 66px; bottom: 66px;
font-weight: initial; font-weight: initial;
font-size: 12px; font-size: 12px;
color: #aaa; color: #999;
cursor: pointer; cursor: pointer;
} }
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover { .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover {
@ -185,7 +187,7 @@ textarea::-webkit-input-placeholder {
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea { .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea {
height: 127px !important; height: 127px !important;
border: none !important; border: none !important;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid #e6e6e6 !important;
} }
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer { .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer {
height: 58px; height: 58px;
@ -213,3 +215,36 @@ textarea::-webkit-input-placeholder {
.ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover { .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover {
cursor: pointer; cursor: pointer;
} }
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article {
padding: 20px !important;
height: 100%;
}
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div {
flex: 1;
border: 1px dashed #e6e6e6;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div i,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div i {
font-weight: bolder;
font-size: 20px;
color: #0099ff;
}
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div span,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div span {
margin-top: 8px;
line-height: 1;
}
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:hover,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:hover {
cursor: pointer;
}
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:last-child,
.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:last-child {
margin-left: 20px;
}

33
src/main/webapp/static/mweixin/message-reply.less
View File

@ -2,6 +2,7 @@
.ms-admin-message-reply { .ms-admin-message-reply {
.ms-container { .ms-container {
display: flex; display: flex;
height: 256px;
.message-reply-tabs { .message-reply-tabs {
padding-left: 12px; padding-left: 12px;
} }
@ -31,10 +32,12 @@
} }
.el-tabs__content { .el-tabs__content {
border: 1px solid @borderColor; border: 1px solid @borderColor;
height: calc(~'100% - 42px');
.el-tab-pane { .el-tab-pane {
padding: 0 !important; padding: 0 !important;
width: 100%; width: 100%;
.ms-flex(); .ms-flex();
// 文字回复
>.el-form { >.el-form {
width: 100%; width: 100%;
.ms-message-reply-content { .ms-message-reply-content {
@ -53,6 +56,7 @@
border: none !important; border: none !important;
border-bottom: 1px solid @borderColor !important; border-bottom: 1px solid @borderColor !important;
} }
// 底部插入超链接
.footer { .footer {
height: 58px; height: 58px;
padding: 0 14px; padding: 0 14px;
@ -77,6 +81,35 @@
} }
} }
} }
// 图片回复
.message-reply-picture,.message-reply-article{
padding:20px !important;
height: 100%;
>div {
flex: 1;
border: 1px dashed @borderColor;
.ms-flex(center);
align-items: center;
flex-direction: column;
i {
.ms-font(20px, @themeColor, bolder);
}
span {
margin-top: 8px;
line-height: 1;
}
&:hover {
cursor: pointer;
}
}
>div:last-child {
margin-left: 20px;
}
}
// 图文回复
.message-reply-article{
}
} }
} }
} }