You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
4.9 KiB
152 lines
4.9 KiB
<!-- 消息回复 && 关注回复 --> |
|
<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 == '关注时回复'"> |
|
<el-container class="ms-admin-message-reply"> |
|
<el-header class="ms-header" height="50px"> |
|
<el-row> |
|
<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-row> |
|
</el-header> |
|
<el-container> |
|
<el-header class="ms-tr ms-header"> |
|
<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"> |
|
</el-input> |
|
</el-header> |
|
<em-main class="ms-container"> |
|
<div>回复内容</div> |
|
<el-tabs v-model="activeName" @tab-click="" class="message-reply-tabs"> |
|
<el-tab-pane label="文字" name="text"> |
|
<el-form ref="messageReplyForm" :rules='messageReplyFormRules' :model="messageReplyForm"> |
|
<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> |
|
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i> |
|
<div class="footer"> |
|
<i class="el-icon-star-off"></i> |
|
<!-- 插入超链接 --> |
|
<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" 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> |
|
<script> |
|
var messageReplyVue = new Vue({ |
|
el: "#message-reply", |
|
data: { |
|
messageReplyForm: { |
|
reply: '', |
|
}, |
|
messageReplyFormRules: { |
|
name: [{ |
|
required: true, |
|
message: '请输入菜单名称', |
|
trigger: ['blur', 'change'] |
|
}, |
|
{ |
|
min: 1, |
|
max: 5, |
|
message: '长度在 1 到 5 个字符', |
|
trigger: ['blur', 'change'] |
|
} |
|
], |
|
}, |
|
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\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/.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> |