群发助手

src/components/groupSend/index.vue

@@ -97,7 +97,7 @@
             active-color="#13ce66"
             inactive-color="#ff4949"/>
         </el-form-item>
-        <el-form-item label="时间" v-if="searchFrom.is_test">
+        <el-form-item label="时间" v-if="searchFrom.type === 1">
           <el-date-picker
             v-model="searchFrom.time"
             type="datetimerange"
@@ -107,6 +107,13 @@
             :default-time="['00:00:00','23:59:59']">
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="类型">
+          <el-radio-group v-model="searchFrom.type">
+            <el-radio :label="1">48时内关注但未购课用户</el-radio>
+            <el-radio :label="2">有体验课但没有正式课用户</el-radio>
+            <el-radio :label="3">未购正课用户</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-row>
           <el-col :span="16">
             <el-form-item label="用户ID">
@@ -172,6 +179,83 @@
               </div>
             </el-upload>
           </el-tab-pane>
+          <el-tab-pane label="图文" name="news">
+            <div v-if="newsContent && newsContent.content && newsContent.content.news_item">
+              <div class="news-media" style="display: inline-block">
+                <el-card :body-style="{ padding: '0px' }">
+                  <div v-for="(child, childIndex) in newsContent.content.news_item" style="position: relative">
+                    <div v-if="newsContent.content.news_item.length === 1" class="single-cover">
+                      <div class="title">{{child.title}}</div>
+                      <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
+                      <div class="digest">{{child.digest}}</div>
+                      <a class="preview" :href="child.url" target="_blank">
+                        预览文章
+                      </a>
+                    </div>
+                    <div v-else-if="newsContent.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
+                      <div v-if="childIndex === 0" class="muti-cover">
+                        <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
+                        <div class="bottom-title">{{child.title}}</div>
+                      </div>
+                      <div class="next-cover clear-both" v-else>
+                        <span class="next-title">{{child.title}}</span>
+                        <img class="next-img" :src="child.thumb_url"/>
+                      </div>
+                      <a class="preview" :href="child.url" target="_blank">
+                        预览文章
+                      </a>
+                    </div>
+                  </div>
+                </el-card>
+              </div>
+              <i class="el-icon-delete" @click="newsContent=''" style="display: inline-block"></i>
+            </div>
+            <div class="display-b">
+              <div class="choose_item" style="color: #888;" @click="getMediaList()">+从素材库中选择</div>
+            </div>
+            <div v-if="showMedia && mediaList.length > 0">
+              <el-table
+                :data="mediaList"
+                @row-click="onChooseMedia"
+                style="width: 100%">
+                <el-table-column
+                  prop="media_id"
+                  label="mediaId">
+                </el-table-column>
+                <el-table-column
+                  label="URL">
+                  <template slot-scope="scope">
+                    <div class="news-media" style="display: inline-block;width: 200px;" v-if="scope.row.content && scope.row.content.news_item">
+                      <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
+                        <div v-if="scope.row.content.news_item.length === 1" class="single-cover">
+                          <div class="title">{{child.title}}</div>
+                          <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
+                          <div class="digest">{{child.digest}}</div>
+                          <a class="preview" :href="child.url" target="_blank">
+                            预览文章
+                          </a>
+                        </div>
+                        <div v-else-if="scope.row.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
+                          <div v-if="childIndex === 0" class="muti-cover">
+                            <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
+                            <div class="bottom-title">{{child.title}}</div>
+                          </div>
+                          <div class="next-cover clear-both" v-else>
+                            <span class="next-title">{{child.title}}</span>
+                            <img class="next-img" :src="child.thumb_url"/>
+                          </div>
+                          <a class="preview" :href="child.url" target="_blank">
+                            预览文章
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <page2 :total="total" v-model="mediaPage.nowPage" :limit="mediaPage.limit" @pageChange="onMediaPageChange" @sizeChange="onMediaSizeChange"/>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </el-form>
     <span slot="footer" class="dialog-footer">
@@ -236,14 +320,16 @@
 </template>
 
 <script>
-  import {uploadFileApi,getMsgListApi,sendMsgApi,getUserListApi} from "../../service/api";
+  import {uploadFileApi,getMsgListApi,sendMsgApi,getUserListApi,getMediaListApi} from "../../service/api";
   import page from '../framework/page'
+  import page2 from '../framework/page'
   import emotion from '../framework/Emotion/index'
   import CommonJs from '../../util/common';
   export default {
     name: "index",
     components: {
       page,
+      page2,
       emotion
     },
     data() {
@@ -251,6 +337,11 @@
         nowPage: 1,
         total: 0,
         limit: 10,
+        mediaPage: {
+          nowPage: 1,
+          total: 0,
+          limit: 10,
+        },
         show: false,
         loading: false,
         activeName: 'text',
@@ -261,7 +352,10 @@
         fileList: [],
         imageContent: '',
         videoContent: '',
-        searchFrom: {},
+        searchFrom: {
+          type: 1,
+          is_test: false
+        },
         tableData: [],
         fileUid: null,
         userDialog: {
@@ -273,7 +367,12 @@
         userList: [],
         searchUserFrom: {},
         multipleSelection: [],
-        showEmotion: false
+        showEmotion: false,
+        showMedia: false,
+        mediaList: [],
+        imageContent: null,
+        videoContent: null,
+        newsContent: null
       }
     },
     filters: {
@@ -359,7 +458,20 @@
       },
       send(){
         let json = {}
-        if(this.searchFrom.is_test){
+//        if(this.searchFrom.is_test){
+//          if(this.searchFrom.time && this.searchFrom.time.length > 0){
+//            json.start_at = CommonJs.dateFmt(this.searchFrom.time[0],"yyyy-MM-dd hh:mm:ss");
+//            json.end_at = CommonJs.dateFmt(this.searchFrom.time[1],"yyyy-MM-dd hh:mm:ss")
+//          } else {
+//            this.$message({
+//              type: 'error',
+//              message: '请选择时间!'
+//            });
+//            return
+//          }
+//        }
+        json.type = this.searchFrom.type
+        if(this.searchFrom.type === 1){
           if(this.searchFrom.time && this.searchFrom.time.length > 0){
             json.start_at = CommonJs.dateFmt(this.searchFrom.time[0],"yyyy-MM-dd hh:mm:ss");
             json.end_at = CommonJs.dateFmt(this.searchFrom.time[1],"yyyy-MM-dd hh:mm:ss")
@@ -378,6 +490,7 @@
             type: 'error',
             message: '请加入内部人员!'
           });
+          return;
         }
         let _content = {}
         _content.type = this.activeName;
@@ -414,9 +527,19 @@
             _content.content = this.videoContent.content;
             _content.url = this.videoContent.url
           }
+        } else if (this.activeName === 'news'){
+            if (this.newsContent && this.newsContent.media_id) {
+              _content.media_id =  this.newsContent.media_id
+            } else {
+              this.$message({
+                type: 'error',
+                message: '请选择图文!'
+              });
+            }
         }
         json.content = JSON.stringify(_content)
         json.is_test = this.searchFrom.is_test ? 2 : 1
+        console.log("json", json);
         sendMsgApi(json).then((res)=>{
           this.$message({
             message: res,
@@ -431,6 +554,7 @@
         this.content = '';
         this.videoContent = null;
         this.imageContent = null;
+        this.newsContent = null;
         this.activeName === 'text';
         this.searchFrom = {};
         this.fileList = [];
@@ -446,6 +570,15 @@
           this.total = res.total
         })
       },
+      onMediaPageChange(val){
+        this.mediaPage.nowPage = val
+        this.getMediaList()
+      },
+      onMediaSizeChange(){
+        this.mediaPage.nowPage = 1
+        this.mediaPage.limit = val
+        this.getMediaList()
+      },
       onPageChange(val){
         this.nowPage = val
         this.getMsgList()
@@ -544,6 +677,40 @@
       handleEmotion (i) {
         this.content += i
       },
+      onChooseMedia(val){
+        if (this.type === 'image') {
+          this.imageContent = val
+        } else if (this.type === 'video'){
+          this.videoContent = val
+        } else if (this.type === 'news'){
+          this.newsContent = val
+        }
+        this.showMedia = false;
+      },
+      getMediaList(){
+        let type = this.activeName;
+        let json = {
+          type: type,
+          page: this.mediaPage.nowPage,
+          limit: this.mediaPage.limit
+        };
+        this.loading = true;
+        this.showMedia = true;
+        getMediaListApi(json).then(res=>{
+          this.loading = false;
+          this.type = type;
+          this.mediaList = res.item;
+          this.mediaPage.total = res.total_count;
+          if (this.total === 0 ) {
+            this.$message({
+              showClose: true,
+              message: '暂无数据'
+            });
+          }
+        }).catch(() => {
+          this.loading = false;
+        })
+      },
     },
     mounted(){
       this.getMsgList();
@@ -594,4 +761,149 @@
     vertical-align: middle;
     display: inline-block;
   }
+  .img {
+    position: relative;
+    width: 25%;
+  img {
+    width: 100%;
+  }
+  .el-icon-delete {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: none;
+  }
+  }
+  .img:hover img{
+    opacity: 0.3;
+  }
+  .img:hover .el-icon-delete{
+    display: block;
+  }
+  .tool_bar {
+    float: right;
+    margin-top: 20px;
+  }
+  .choose_item {
+    margin-bottom: 25px;
+    color: rgb(136, 136, 136);
+    height: 80px;
+    line-height: 80px;
+    width: 45%;
+    border: 1px dashed;
+    text-align: center;
+  }
+  .display-b {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .my-teacher {
+    width: 25%;
+    height: 80px;
+    background-color: #eee;
+    line-height: 80px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .news-media {
+    padding: 10px;
+    width: 25%;
+  }
+  .news-media img{
+    width: 100%;
+  }
+  .s-news img {
+    width: 50px;
+    float: right;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 400;
+    display: block;
+    line-height: 1.2;
+    color: #353535;
+  }
+  .digest {
+    padding-top: 12px;
+    color: #9A9A9A;
+    font-size: 14px;
+  }
+  .single-cover {
+    /*padding: 20px 15px 15px;*/
+  }
+  .muti-cover {
+    position: relative;
+    padding: 20px 15px 0 15px;
+  }
+  .bottom-title {
+    color: #FFFFFF;
+    background-color: rgba(0, 0, 0, 0.55);
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    bottom: 0;
+    padding: 8px 12px;
+  }
+  .next-cover {
+    padding: 12px 15px;
+    position: relative;
+  }
+  .next-img {
+    float: right;
+    margin-left: 12px;
+    width: 60px !important;
+    height: 60px !important;
+  }
+  .next-title {
+    overflow: hidden;
+    font-weight: 400;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    color: #353535;
+  }
+  .single-cover:hover .preview,.bottomCover:hover .preview{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+  }
+  .preview {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    text-decoration: none;
+  }
+  .f-bt {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .ellip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+<style>
+  .el-radio-group {
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .el-radio+.el-radio {
+     margin-left: 0;
+  }
+  .el-radio {
+    margin-bottom: 6px;
+  }
 </style>