sunjianxi
/
cycgs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
yinxr 7 years ago
parent a40c4fb02e
commit 8cb9e90ae7
4 changed files with 315 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 180
      src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
  2. 208
      src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl
  3. 51
      src/main/webapp/static/mweixin/css/message-reply.css
  4. 33
      src/main/webapp/static/mweixin/message-reply.less

180
src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
Unescape 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
Unescape 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
Unescape 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
Unescape 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{
}
} }
} }
} }
Write Preview
Loading…
Cancel
Save