cycgs/src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl

<!-- 消息回复 && 关注回复 -->
<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\-\.,@?^=%&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>