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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
  2. 90
      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

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

@ -53,6 +53,14 @@
<el-tab-pane label="图文管理" name="article">
<span slot="label">
<i class="el-icon-picture"></i>图文管理</span>
<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>
</el-form-item>

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

@ -24,15 +24,52 @@
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
<div class="footer">
<i class="el-icon-star-off"></i>
<a>插入超链接</a>
<!-- 插入超链接 -->
<el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
<el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
<el-form-item label="文本内容" prop='text'>
<el-input v-model="hyperlinkForm.text" size='mini'></el-input>
</el-form-item>
<el-form-item label="链接地址" prop='link'>
<el-input v-model="hyperlinkForm.link" size='mini'></el-input>
</el-form-item>
<el-form-item style="margin:0">
<el-row type='flex' justify='end'>
<el-col span='6'>
<el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
</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">
<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">
<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>
@ -61,9 +98,54 @@
],
},
activeName: 'text',
// 超链接
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
},
}
})

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 {
font-weight: initial;
font-size: 12px;
color: #aaa;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #ddd;
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #ddd;
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
@ -125,6 +125,7 @@ textarea::-webkit-input-placeholder {
}
.ms-admin-message-reply .ms-container {
display: flex;
height: 256px;
}
.ms-admin-message-reply .ms-container .message-reply-tabs {
padding-left: 12px;
@ -148,10 +149,11 @@ textarea::-webkit-input-placeholder {
}
.ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
padding: 0 20px;
border: 1px solid #ddd;
border: 1px solid #e6e6e6;
}
.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 {
padding: 0 !important;
@ -174,7 +176,7 @@ textarea::-webkit-input-placeholder {
bottom: 66px;
font-weight: initial;
font-size: 12px;
color: #aaa;
color: #999;
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 {
@ -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 {
height: 127px !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 {
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 {
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-container {
display: flex;
height: 256px;
.message-reply-tabs {
padding-left: 12px;
}
@ -31,10 +32,12 @@
}
.el-tabs__content {
border: 1px solid @borderColor;
height: calc(~'100% - 42px');
.el-tab-pane {
padding: 0 !important;
width: 100%;
.ms-flex();
// 文字回复
>.el-form {
width: 100%;
.ms-message-reply-content {
@ -53,6 +56,7 @@
border: none !important;
border-bottom: 1px solid @borderColor !important;
}
// 底部插入超链接
.footer {
height: 58px;
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