-
{{form.first}}
-
消息类别：{{form.keyword1}}
-
通知用户：{{form.keyword2}}
-
通知内容：{{form.keyword3}}
-
更新时间：{{initUpdateTime}}
+
{{templateInput.first}}
+
+ {{item.name}}：{{item.value}}
+
+
{{templateInput.remark}}
-
@@ -95,6 +80,16 @@ export default {
name: 'add-mass',
components: { },
data(){
+ const checkUrl = (rule, value, callback) => {
+ let urlrReg = /^((https?|ftp):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(\/\w\.-]*)*\/?/;
+ if(urlrReg.test(value)) {
+ callback();
+ } else if (this.form.articleId !== '') {
+ callback();
+ } else {
+ callback(`请输入正确的网址`);
+ }
+ };
return {
buttonList: [], // 头部按钮，例子： {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
firstData: '{{first.DATA}}:',
@@ -113,6 +108,7 @@ export default {
keyword2: '' /* || '财商36问' */, //更新内容
keyword3: '',
remark: '' /* || '请点击内容查看详情' */, //内容详情
+ tempId: '' || '-kOhlwJPhO7v3WW3rAdmNs76lR7ZpQEJtbVSY8Y35Eg', //模板id
},
article: '', //选择文章
// 文章列表
@@ -128,12 +124,17 @@ export default {
],
// 预览dialog
previewShow: false,
+ // 要预览的页面字段
+ previewData: [],
// form验证
rules: {
subject: [
{ required: true, message: '请输入消息主题', trigger: 'blur' },
],
- first: [
+ tempId: [
+ { required: true, message: '请选择模板消息', trigger: 'blur' },
+ ],
+ /* first: [
{ required: true, message: '请填写消息模板内容', trigger: 'blur' },
],
keyword1: [
@@ -145,35 +146,70 @@ export default {
keyword3: [
{ required: true, message: '请填写消息模板内容', trigger: 'blur' },
],
- remark: [
+ keyword4: [
{ required: true, message: '请填写消息模板内容', trigger: 'blur' },
],
- messageSubject: [
+ keyword5: [
{ required: true, message: '请填写消息模板内容', trigger: 'blur' },
],
+ remark: [
+ { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+ ], */
articleContent: [
- { required: true, message: '请选择文章获取填写外部URL', trigger: 'blur' },
+ { required: true, validator: checkUrl, message: '请输入正确的外部URL', trigger: 'blur' },
],
selfGroupId: [
{ required: true, message: '请选择群发分组', trigger: 'blur' },
],
- }
+ },
+ // 模板消息列表
+ templateMsgList: [],
+ // 模板内容
+ templateMsgCon: [
+ {
+ key: 'first',
+ name: '{{first.DATA}}',
+ },
+ {
+ key: 'keyword1',
+ name: '消息类别：{{keyword1.DATA}}',
+ },
+ {
+ key: 'keyword2',
+ name: '通知用户：{{keyword2.DATA}}',
+ },
+ {
+ key: 'keyword3',
+ name: '通知内容：{{keyword3.DATA}}',
+ },
+ {
+ key: 'remark',
+ name: '{{remark.DATA}}'
+ }
+ ],
+ // 动态生成的input
+ templateInput: {},
+ tempData: [] || [
+ {first: 'first', remark: 'remark'}
+ ]
}
},
computed: {
// 初始弹窗更新时间
initUpdateTime() {
return initTime(new Date(), 'ymdhm'); //更新时间
- }
+ },
},
activated() {
this.getSelfGroups();
this.getArticlesGroup();
+ this.getTemplateMsgList();
},
mounted() {
},
created() {
this.getSelfGroups();
+ this.getTemplateMsgList();
this.getArticlesGroup();
},
methods: {
@@ -215,23 +251,39 @@ export default {
},
// 查看白名单
onCheckList() {},
+ // objectToArray
+ objectToArray(obj) {
+ let arr = [];
+ for(let i in obj) {
+ // arr.push (obj[i] ) //返回属性值
+ arr.push(obj[i]) //返回键名
+ };
+ return arr;
+ },
// 立即发送
onSend() {
+ this.tempData.push(this.templateInput);
+ console.log("tempData", JSON.stringify(this.templateInput));
// 拼接所需字段
- let keywordStr = this.form.keyword1 + ',' + this.form.keyword2 + ',' + this.form.keyword3;
let reqBody = {
send_now: true, //true 是立即发送， false是保存
subject: this.form.subject,
- template_id: '1',
+ template_id: this.form.tempId,
self_group_id: this.form.selfGroupId,
article_id: this.form.articleId || 0,
- first: this.form.first,
- remark: this.form.remark,
- keyword: keywordStr,
+ mptemplate_content: JSON.stringify(this.templateInput),
url: this.form.articleContent
};
this.$refs['form'].validate((valid) => {
if(valid) {
+ const isCanSave = this.checkTemplateInput();
+ if(!isCanSave) {
+ this.$message({
+ type: "error",
+ message: "请完善模板内容"
+ });
+ return
+ }
this.addGroupSender(reqBody, '群发');
} else {
this.$message({
@@ -240,25 +292,43 @@ export default {
});
}
});
- //this.addGroupSender(reqBody);
+ },
+ // 验证动态模板
+ checkTemplateInput() {
+ console.log("templateInput", this.templateInput);
+ // 获取模板输入框的实际数量
+ let tempInputLen = this.templateMsgCon.length;
+ console.log("tempInputLen", tempInputLen);
+ // 计算模板输入的数量
+ let tempLen = (Object.keys(this.templateInput).length);
+ if( tempLen !== tempInputLen) {
+ return false
+ } else {
+ return true
+ }
},
// 保存
onSave() {
// 拼接所需字段
- let keywordStr = this.form.keyword1 + ',' + this.form.keyword2 + ',' + this.form.keyword3;
let reqBody = {
send_now: false, //true 是立即发送， false是保存
subject: this.form.subject,
- template_id: '1',
+ template_id: this.form.tempId,
self_group_id: this.form.selfGroupId,
article_id: this.form.articleId || 0,
- first: this.form.first,
- remark: this.form.remark,
- keyword: keywordStr,
+ mptemplate_content: JSON.stringify(this.templateInput),
url: this.form.articleContent
};
this.$refs['form'].validate((valid) => {
if(valid) {
+ const isCanSave = this.checkTemplateInput();
+ if(!isCanSave) {
+ this.$message({
+ type: "error",
+ message: "请完善模板内容"
+ });
+ return
+ }
this.addGroupSender(reqBody, '保存');
} else {
this.$message({
@@ -298,7 +368,20 @@ export default {
},
// 预览
onPreview() {
+ const isCanSave = this.checkTemplateInput();
+ if(!isCanSave) {
+ this.$message({
+ type: "error",
+ message: "请先完善模板内容"
+ });
+ return
+ }
this.previewShow = true;
+ this.tempData.push(this.templateInput);
+ let previewArr = this.objectToArray(this.tempData[0]).slice(1, this.objectToArray(this.tempData[0]).length - 1);
+ this.previewData.forEach((value, index) => {
+ value['value'] = previewArr[index];
+ });
},
// 预览确认
onConfirm() {
@@ -321,6 +404,62 @@ export default {
this.form.selfGroupId = value;
console.log("选择的对象分组", value);
}
+ },
+ // 获取消息模板列表
+ getTemplateMsgList() {
+ APIWechatFans.getTemplateMsgList()
+ .then(res => {
+ let telpData = res.data;
+ this.templateMsgList = telpData.map(item => {
+ return {
+ label: item.title,
+ value: item.template_id
+ }
+ });
+ // 默认显示第一个模板id
+ this.getTemplateMsgListById(this.templateMsgList[0].value);
+ })
+ },
+ // 根据模板id获取对应模板消息
+ getTemplateMsgListById(id) {
+ APIWechatFans.getTemplateById(id)
+ .then(res => {
+ console.log("res", res);
+ let data = res.data;
+ let splitData = data.content.split('\\n');
+ this.templateMsgCon = splitData.map(item => {
+ return {
+ name: item,
+ key: item.substring( item.indexOf("{{") + 2, item.indexOf(".DATA"))
+ }
+ });
+ this.previewData = splitData.splice(1, splitData.length - 2 ).map(item => {
+ return {
+ name: item.substring( 0, item.indexOf("：")),
+ key: item.substring( item.indexOf("{{") + 2, item.indexOf(".DATA"))
+ }
+ });
+ })
+ },
+ // 选择模板消息
+ onSelectTemp(value) {
+ console.log("选择了模板消息", value);
+ this.form.tempId = value;
+ this.templateInput = {};
+ this.getTemplateMsgListById(value);
+ },
+ // 清空url填写
+ onClearUrl() {
+ this.form.articleContent = '';
+ if( this.form.articleId ) {
+ this.form.articleId = '';
+ }
+ },
+ onClearSelect() {
+ this.form.articleContent = '';
+ },
+ onOpenUrl() {
+ window.open(this.form.articleContent);
}
}
}
@@ -381,6 +520,7 @@ export default {
flex-direction: column;
padding: 0 40px;
border-bottom: 1px solid #d8dce5 ;
+ overflow-y: scroll;
}
.fot {
width: 100%;
@@ -388,6 +528,9 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
+ &:hover {
+ cursor: pointer;
+ }
}
}
.preview-btn {
diff --git a/src/views/message-manage/main/mass-list/index.vue b/src/views/message-manage/main/mass-list/index.vue
index 079c6b9..411834c 100644
--- a/src/views/message-manage/main/mass-list/index.vue
+++ b/src/views/message-manage/main/mass-list/index.vue
@@ -1,7 +1,7 @@
@@ -20,7 +20,7 @@
/>
搜索
-