update: 素材回显

src/views/ecm/form.vue

@@ -367,7 +367,11 @@
         </h3>
         <div v-if="analyseConfig.statusFlag == 1" style="padding-bottom:10px;color:#303133">
           <div>
-            <label class="w140 text-right inline-block mr10">设置参照组</label>
+            <div class="w140 text-right inline-block mr10">
+              <el-tooltip slot="label" open-delay="200" content="设置后系统按比例随机抽取部分人群不触发任务进行数据参照" placement="top">
+                <label class="tooltip-icon cursor">设置参照组</label>
+              </el-tooltip>
+            </div>
             <el-switch :disabled="!isAdd" v-model="analyseConfig.crowd_flag" :active-value="1" :inactive-value="0" @change="onChangeAnalyseConfig"></el-switch>
           </div>
           <div v-if="analyseConfig.crowd_flag == 1" class="mt20">
@@ -381,7 +385,11 @@
             </el-tooltip>
           </div>
           <div class="mt20">
-            <label class="w140 text-right inline-block mr10">设置营销效果时长</label>
+            <div class="w140 text-right inline-block mr10">
+              <el-tooltip slot="label" open-delay="200" content="任务完成多少天后产生的消费归因此次营销" placement="top">
+                <label class="tooltip-icon cursor">设置营销效果时长</label>
+              </el-tooltip>
+            </div>
             <el-input-number :disabled="!isAdd" controls-position="right" class="w150" :min="3" :max="31" v-model="analyseConfig.marke_days"></el-input-number>
             <span class="ml10">天之内</span>
           </div>

src/views/ecm/marketing-event/components/item-qywx.vue

@@ -3,7 +3,7 @@
     <div class="fz16">{{ qywx.qywxEnterpriseName }}</div>
     <div class="divider"></div>
     <div>{{ item.title }}</div>
-    <div style="margin-top:12px;color:#606266">{{ qywx.remark }}</div>
+    <div style="margin-top:12px;color:#606266;white-space:pre">{{ qywx.remark }}</div>
     <p style="margin-top:12px">
       <span>任务完成方式</span>：
       <el-checkbox label="话务" :value="qywx.telFlag" :true-label="1" :false-label="0" disabled></el-checkbox>

src/views/ecm/marketing-event/components/lib-qywx.vue

@@ -15,9 +15,14 @@
         <el-input show-word-limit v-model="form.title" :maxlength="20"></el-input>
       </el-form-item>
       <el-form-item label="任务描述" prop="remark">
-        <el-input type="textarea" show-word-limit v-model="form.remark" :rows="4" :maxlength="200" resize="none"></el-input>
+        <el-input class="task-desc" type="textarea" show-word-limit v-model="form.remark" :rows="4" :maxlength="200" resize="none"></el-input>
       </el-form-item>
-      <el-form-item label="任务发放规则">
+      <el-form-item>
+        <template slot="label">
+          <el-tooltip slot="label" open-delay="200" content="优先所选用户的内容优先级" placement="top">
+            <span class="tooltip-icon cursor">任务发放规则</span>
+          </el-tooltip>
+        </template>
         <div class="rule-header">
           <span>优先级</span>
           <span>发放对象</span>
@@ -49,6 +54,7 @@
       <div class="task-wrapper">
         <el-checkbox label="会话" v-model="form.chatFlag" :true-label="1" :false-label="0"></el-checkbox>
         <div style="margin-bottom:16px">
+          <material-item v-for="item in materials" :key="item.relation_id" :item="item" @delete="onDeleteMaterial"></material-item>
           <div class="chat-item">
             <i class="el-icon-plus"></i>
             <span class="add-text">添加素材</span>
@@ -135,6 +141,7 @@
 import Draggable from 'vuedraggable';
 import { getEntepriseList } from '../assets/api';
 import TemplateDialog from './qywx-dialog';
+import MaterialItem from './material-item';
 
 export default {
   name: 'lib-qywx',
@@ -152,7 +159,8 @@ export default {
   },
   components: {
     Draggable,
-    TemplateDialog
+    TemplateDialog,
+    MaterialItem
   },
   data() {
     return {
@@ -184,7 +192,8 @@ export default {
       entepriseList: [],
       isEdit: false,
       ecmMarketingTypeRelationId: '',
-      showPopover: false
+      showPopover: false,
+      materials: []
     };
   },
   created() {
@@ -214,11 +223,11 @@ export default {
         this.$message.warning('请至少配置一种任务完成方式');
         return;
       }
-      if (qywx.chatFlag != 0) {
+      if (qywx.chatFlag != 0 && !qywx.chatContent) {
         this.$message.warning('请添加会话素材');
         return;
       }
-      if (qywx.smsFlag != 0) {
+      if (qywx.smsFlag != 0 && !qywx.smsContent) {
         this.$message.warning('请添加短信模板');
         return;
       }
@@ -243,7 +252,7 @@ export default {
       getEntepriseList()
         .then(res => {
           if (res.errorCode === 0) {
-            this.entepriseList = res.result;
+            this.entepriseList = res.result || [];
           } else {
             this.$message({ message: res.message, type: 'error' });
           }
@@ -276,6 +285,9 @@ export default {
         }
       }
       this.form.smsFlag = 1;
+    },
+    onDeleteMaterial(item) {
+      this.materials = this.materials.filter(el => el.relation_id != item.relation_id);
     }
   },
   watch: {
@@ -438,4 +450,10 @@ export default {
     color: #1890ff;
   }
 }
+.task-desc {
+  /deep/ .el-input__count {
+    background-color: transparent;
+    bottom: 0;
+  }
+}
 </style>

src/views/ecm/marketing-event/components/material-item.vue

+<template>
+  <div class="material-item">
+    <el-button class="material-item__delete" type="text" @click="onDelete">删除</el-button>
+    <template v-if="item.type == 1">
+      <div class="text__title">{{ item.title }}</div>
+      <div class="text__content">{{ item.content }}</div>
+    </template>
+    <div class="webpage" v-if="type == 3">
+      <div style="flex:1;min-width:0">
+        <div class="webpage__title">{{ item.title }}</div>
+        <div class="webpage__content">{{ item.content }}</div>
+      </div>
+      <img :src="item.img" />
+    </div>
+    <template v-if="[2, 4].includes(type)">
+      <div class="media__title">{{ item.title }}</div>
+      <div class="media__content">
+        <img :src="item.img" />
+      </div>
+    </template>
+    <div class="file" v-if="type == 5">
+      <img :src="item.img" />
+      <span class="file-title">{{ item.title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'material-item',
+  props: {
+    item: Object
+  },
+  methods: {
+    onDelete() {
+      this.$emit('delete');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.material-item {
+  font-size: 12px;
+  font-weight: 400;
+  color: #303133;
+  line-height: 17px;
+  position: relative;
+  height: 100px;
+  width: 240px;
+  background-color: #f1f3f7;
+  padding: 10px;
+  &__delete {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+  .text-center {
+    text-align: center;
+  }
+}
+.text {
+  &__content {
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+.webpage {
+  margin-top: 13px;
+  display: flex;
+  align-items: center;
+  &__content {
+    margin-top: 10;
+  }
+  &__title,
+  &__content {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.media {
+  &__content,
+  &__title {
+    text-align: center;
+  }
+  &__content {
+    margin-top: 4px;
+  }
+}
+.file {
+  margin-top: 13px;
+  display: flex;
+  align-items: center;
+  &__title {
+    margin-left: 10px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+img {
+  height: 56px;
+  width: 56px;
+}
+</style>