feat: 入群欢迎语

project/src/assets/config/interface_api.js

@@ -498,6 +498,11 @@ var api = {
   sendData_chatGroupMassMsg: '/api/service/chatGroupMassMsg', // 群发送达数据 - 客户群群发
   sendData_PeriodMassMsg: '/api/service/periodMassMsg', // 群发送达数据 - 智能群发
 
+  welcomeGroup_list: '/api/chatGroup/welcomeTemplateList', // 入群欢迎语 - 配置列表
+  welcomeGroup_del: '/api/chatGroup/delWelcomeTemplate', // 入群欢迎语 - 删除配置
+  welcomeGroup_set: '/api/chatGroup/setWelcomeTemplate', // 入群欢迎语 - 设置配置
+  welcomeGroup_detail: '/api/chatGroup/welcomeTemplateDetail', // 入群欢迎语 - 配置详情
+
 };
 
 export { api };

project/src/components/welcomeGroup/create.scss

@@ -0,0 +1,120 @@
+.backBox {
+  background: #ffffff;
+  padding: 15px;
+  margin-bottom: 10px;
+  .back {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333333;
+    cursor: pointer;
+    display: inline-block;
+  }
+}
+.bigTitle {
+  color: #333333;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: bold;
+}
+.createMassMsg{
+  width: 100%;
+  min-height: 400px;
+ 
+  .line {
+    width: 730px;
+    height: 1px;
+    background: #e9e9e9;
+    margin: 40px 0 20px;
+  }
+  .regulations {
+    display: flex;
+    align-items: flex-start;
+    margin-top: 28px;
+    label {
+      width: 100px;
+      color: #333333;
+      font-size: 14px;
+      line-height: 28px;
+      em {
+        color: #ff0000;
+      }
+    }
+  }
+  .regulations2 {
+    label {
+      width: 70px;
+      line-height: 30px;
+    }
+  }
+}
+.detail_status{
+  line-height: 30px;
+  height: 30px;
+  padding: 3px 10px;
+  border-radius: 21px;
+  font-size: 12px;
+  margin-left: 20px;
+}
+.status_wait{
+  background: #FFF2ED;
+  border: 1px solid #FF864F;
+  color: #FF864F;
+}
+.status_del{
+  background: #FFF5F5;
+  border: 1px solid #FF604D;
+  color: #FF604D;
+}
+.status_fail{
+  background: #F4F4F4;
+  border: 1px solid #ADADAD;
+  color: #ADADAD;
+}
+.status_ing{
+  background: #F4FAFF;
+  border: 1px solid #007AFE;
+  color: #007AFE;
+}
+.status_success{
+  background: #EEFFF3;
+  border: 1px solid #00B38A;
+  color: #00B38A;
+}
+.splitLine {
+  width: 100%;
+  height: 10px;
+  background: #f5f6f8;
+}
+// .switch_self{
+//   display: flex;
+//   align-items: center;
+//   height: 30px;
+//   font-size: 13px;
+//   .switch_self_button{
+//     color: #333333;
+//     padding: 0 8px;
+//     border: 1px solid #e9e9e9;
+//     height: 100%;
+//     line-height: 28px;
+//     border-right: none;
+//     cursor: pointer;
+//     &:last-of-type{
+//       border-top-right-radius: 4px;
+//       border-bottom-right-radius: 4px;
+//       border-right: 1px solid #e9e9e9;
+//     }
+//     &:first-of-type{
+//       border-top-left-radius: 4px;
+//       border-bottom-left-radius: 4px;
+//     }
+//     &.switch_self_button_active{
+//       background: #43B083;
+//       border-color: #43B083;
+//       color: #ffffff;
+//     }
+//   }
+// }
+// <div class="switch_self">
+// <div class="switch_self_button switch_self_button_active">全部员工</div>
+// <div class="switch_self_button">部分员工</div>
+// </div>

project/src/components/welcomeGroup/detail.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="createMassMsg" v-loading="loading">
+    <div v-if="!loading" class="bg-ffffff" style="padding: 15px;">
+      <div class="line" style="margin-top:20px"></div>
+      <h3 class="bigTitle">入群欢迎语素材</h3>
+      <div class="regulations">
+        <label><em>*</em>欢迎语标题</label>
+        <el-input placeholder="例：活动推送/拉新等" style="width:300px" v-model.trim="name" clearable size="small" />
+      </div>
+      <div class="regulations">
+        <label style="margin-top:4px"><em>*</em>欢迎语</label>
+        <editConWelGroup ref="editConWelGroup" source="welcom" :afferent_content='content' :afferent_attachments='attachments' :isKHHYY="true" @editContent="(val)=>{content = val}" @changeAttachment='getAttachment' />
+        <!-- isKHHYY 是否为"客户欢迎语" -->
+      </div>
+      <button class="button" @click="welcomeMsg_set">保存</button>
+    </div>
+  </div>
+</template>
+<script>
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import editConWelGroup from '@/components/assembly/editConWelGroup.vue'
+
+export default {
+  props: {
+    template_id: {
+      type: String | Number,
+      default: () => '',
+    },
+  },
+  components: { selfCustomerservice, editConWelGroup },
+  data () {
+    return {
+      isCopy: this.$route.path.indexOf('welcom_message_copy') != -1,
+      loading: false,
+      editFlag: true,
+      is_day_parting: false,
+      name: '',
+      deleteTimeIntervalList: [],//删除的分时段列表
+      timeIntervalList: [],//分时段列表
+      init_welcom_con: {
+        is_day_parting: 1,//是否为分时段欢迎语 0:否 1:是
+        weeks: [1, 2, 3, 4, 5, 6, 0],
+        start_time: '',
+        end_time: '',
+        content: '',
+        attachments: [],
+      },
+      content: '',
+      attachments: [],
+      dataInfo: {},
+      key_we_index:1
+    }
+  },
+  created () {
+    if (this.template_id) {//详情
+      this.detail()
+    } else {
+      this.loading = false;
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    detail () {//详情
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.welcomeGroup_detail, {
+        params: {
+          template_id: this.template_id
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          console.log('res.rst => ', res.rst)
+          this.dataInfo = res.rst;
+          this.name = res.rst.name;
+          // S 坑：部分浏览器不支持 replaceAll 方法
+          if (String.prototype.replaceAll) {
+            this.content = res.rst.content ? res.rst.content.replaceAll('%NICKNAME%', '「客户昵称」') : '';
+          } else {
+            this.content = res.rst.content ? res.rst.content.replace(/\%NICKNAME\%/g, '「客户昵称」') : '';
+          }
+          // E 坑：部分浏览器不支持 replaceAll 方法
+          if (res.rst.attachments['image']) {
+            this.attachments = [
+              {
+                image: {
+                  media_id: res.rst.attachments['image'].media_id,
+                  pic_url: res.rst.attachments['image'].media_url,
+                },
+                msgtype: 'image'
+              }
+            ]
+          } else if (res.rst.attachments['promote']) {
+            this.attachments = [
+              {
+                promote: {
+                  title: res.rst.attachments['promote'].title,
+                  jump_url: res.rst.attachments['promote'].url,
+                  picurl: res.rst.attachments['promote'].picurl,
+                  desc: res.rst.attachments['promote'].desc,
+                },
+                msgtype: 'promote'
+              }
+            ]
+          } else if (res.rst.attachments['link']) {
+            this.attachments = [
+              {
+                link: {
+                  title: res.rst.attachments['link'].title,
+                  url: res.rst.attachments['link'].url,
+                  picurl: res.rst.attachments['link'].picurl,
+                  desc: res.rst.attachments['link'].desc,
+                },
+                msgtype: 'link'
+              }
+            ]
+          }
+
+          console.log('this.attachments => ', this.attachments)
+
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    getAttachment (val) {
+      this.attachments = val;
+    },
+    getWelcomEdit (val, index) {//分时段编辑
+      this.$set(this.timeIntervalList, index, val)
+    },
+    deleteWelcomCon (index) {//删除分时段
+      if (this.$route.params.rule_id && this.timeIntervalList[index].msg_id) {//删除的分时段内容
+        let obj = JSON.parse(JSON.stringify(this.timeIntervalList[index]))
+        obj.operate = 'del';
+        this.deleteTimeIntervalList.push(obj)
+      }
+      this.timeIntervalList.splice(index, 1)
+      this.key_we_index++;
+    },
+    addWelcom () {//添加分时段
+      this.timeIntervalList.push(this.init_welcom_con)
+      this.key_we_index++;
+    },
+    switchChange () {//分时段开关打开
+      if (this.is_day_parting && this.timeIntervalList.length == 0) {
+        this.timeIntervalList.push(this.init_welcom_con)
+      }
+    },
+    welcomeMsg_set () {//保存
+      if (this.name == '') {
+        this.$message({
+          message: '请输入欢迎语标题！',
+          type: "warning"
+        })
+        return
+      }
+      if (this.content == '') {
+        this.$message({
+          message: '请输入欢迎语内容！',
+          type: "warning"
+        })
+        return
+      }
+      if (this.content != '' && this.$getStrBytes(this.content) > 3000) {
+        this.$message({
+          message: '请检查欢迎语内容，最多3000个字节，已超出！',
+          type: "error"
+        })
+        return
+      }
+
+      if (!this.attachments || !this.attachments.length) {
+        this.$message({
+          message: '请添加欢迎语附件',
+          type: 'error',
+        })
+        return
+      }
+
+      // S 坑：部分浏览器不支持 replaceAll 方法
+      if (String.prototype.replaceAll) {
+        this.content = this.content.replaceAll('「客户昵称」', '%NICKNAME%')
+      } else {
+        this.content = this.content.replace(/「客户昵称」/g, '%NICKNAME%')
+      }
+      // E 坑：部分浏览器不支持 replaceAll 方法
+
+      const params = {
+        template_id: this.template_id ? this.template_id : '',
+        name: this.name,
+        content: this.content,
+      }
+
+      console.log('this.attachments => ', JSON.parse(JSON.stringify(this.attachments)))
+      if (this.attachments[0].msgtype === 'image') {
+        params.attachments = {
+          "image": {
+            "media_id": this.attachments[0].image.media_id
+          }
+        }
+      } else if (this.attachments[0].msgtype === 'link') {
+        params.attachments = {
+          "link": {
+            "title": this.attachments[0].link.title,
+            "picurl": this.attachments[0].link.picurl,
+            "desc": this.attachments[0].link.desc,
+            "url": this.attachments[0].link.url,
+          }
+        }
+      } else if (this.attachments[0].msgtype === 'promote') {
+        params.attachments = {
+          "promote": {
+            "title": this.attachments[0].promote.title,
+            "picurl": this.attachments[0].promote.picurl,
+            "desc": this.attachments[0].promote.desc,
+            "url": this.attachments[0].promote.jump_url,
+          }
+        }
+      } else if (this.attachments[0].msgtype === 'miniprogram') {
+        params.attachments = {
+          "miniprogram": {
+            "title": this.attachments[0].miniprogram.title,
+            "pic_media_id": this.attachments[0].miniprogram.pic_media_id,
+            "appid": this.attachments[0].miniprogram.appid,
+            "page": this.attachments[0].miniprogram.page,
+          }
+        }
+      }
+      params.attachments = JSON.stringify(params.attachments)
+      console.log('params => ', JSON.parse(JSON.stringify(params)))
+      this.$loading(this.$loadingConfig)
+      this.$axios.post(this.URL.BASEURL + this.URL.welcomeGroup_set, params).then((res) => {
+        var res = res.data
+        this.$loading(this.$loadingConfig).close()
+        if (res && res.errno == 0) {
+          this.$emit('close', { isEdit: !!this.template_id })
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.$loading(this.$loadingConfig).close()
+      });
+    },
+    handleGoBack() {
+      this.$router.replace({
+        path: '/welcomeMsg'
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "./create.scss";
+.button {
+  width: 178px;
+  height: 40px;
+  background: #00b38a;
+  border-radius: 5px;
+  color: #ffffff;
+  font-size: 14px;
+  border: none;
+  margin: 40px 100px;
+}
+.add_welcom_hint {
+  color: #00b38a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 90px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  display: inline-block;
+}
+</style>

project/src/components/welcomeGroup/index.vue

@@ -0,0 +1,333 @@
+<template>
+  <div v-loading="loading" class="welcomeGroup-wrap">
+    <div class="screenBox">
+      <div class="filter-wrap">
+        <!-- 标题 -->
+        <selfInputV2 v-model="filter.keyword" label_name="标题" placeholder="请输入标题" :labelWidth="true" @change="onChangeKeyword" style="width: auto" />
+        <!-- 创建人 -->
+        <selfChannelV2 v-model="filter.creator_id" title="创建人" type="circleCreate" placeholder="请选择创建人" :labelWidth="true" @change="onChangeCreatorId" />
+      </div>
+      <el-button type="primary" size="mini" @click="onClickCreateBtn" >新建入群欢迎语</el-button>
+    </div>
+    <el-table :height="height" :data="list" tooltip-effect="dark" style="width: 100%; margin-top: 10px">
+      <el-table-column label="标题" prop="name" min-width="100" align="center" fixed="left" show-overflow-tooltip />
+      <el-table-column label="文本内容" prop="content" align="center" min-width="150" show-overflow-tooltip />
+      <el-table-column label="附件内容" align="left" min-width="180">
+        <template slot-scope="{ row }">
+          <template v-if="row.attachments">
+            <!-- 图片 -->
+            <template v-if="row.attachments.image">
+              <el-image style="width: 40px; height: 40px;" :src="row.attachments.image.media_url" :preview-src-list="[row.attachments.image.media_url]" />
+            </template>
+
+            <!-- 视频 -->
+            <template v-else-if="row.attachments.video">
+              <div class="flex-align-center">
+                <img src="@/assets/img/video_bg.svg" style="width: 50px; height: 40px; margin-left: -4px" />
+                <el-button v-if="row.attachments.video.media_url" type="text" size="mini" @click="onClickShowVideo(row.attachments.video.media_url)" >查看视频</el-button>
+              </div>
+            </template>
+
+            <!-- 文件 -->
+            <template v-else-if="row.attachments.file">
+              <div class="flex-align-center">
+                <img src="@/assets/img/video_bg.svg" style="width: 50px; height: 40px; margin-left: -4px" />
+                <el-button v-if="row.attachments.file.media_url" type="text" size="mini" @click="onClickShowfile(row.attachments.file.media_url)">下载文件</el-button>
+              </div>
+            </template>
+
+            <!-- 图文 -->
+            <template v-else-if="row.attachments.link">
+              <div class="flex-align-center">
+                <el-image style="width: 40px; height: 40px;margin-right: 10px;flex-shrink: 0;" :src="row.attachments.link.picurl" :preview-src-list="[row.attachments.link.picurl]" />
+                <span style="line-height: 16px; cursor: pointer">
+                  <a :href="row.attachments.link.url" target="_blank" class="c-676C97">
+                  <el-tooltip class="disinblock" :content="row.attachments.link.desc" :disabled="row.attachments.link.desc && row.attachments.link.desc.length < 34" placement="top">
+                      <span class="clampTwo">{{
+                        row.attachments.link.desc
+                          ? row.attachments.link.desc
+                          : "-"
+                      }}</span>
+                    </el-tooltip>
+                  </a>
+                </span>
+              </div>
+            </template>
+
+            <!-- 推广链接 -->
+            <template v-else-if="row.attachments.promote">
+              <div class="flex-align-center">
+                 <el-image style="width: 40px; height: 40px;margin-right: 10px;flex-shrink: 0;" :src="row.attachments.promote.picurl" :preview-src-list="[row.attachments.promote.picurl]" />
+                <span style="line-height: 16px; cursor: pointer">
+                  <a :href="row.attachments.promote.url" target="_blank" class="c-676C97">
+                    <el-tooltip class="disinblock" :content="row.attachments.promote.desc" :disabled="row.attachments.promote.desc && row.attachments.promote.desc.length < 34" placement="top">
+                      <span class="clampTwo">{{
+                        row.attachments.promote.desc
+                          ? row.attachments.promote.desc
+                          : "-"
+                      }}</span>
+                    </el-tooltip>
+                  </a>
+                </span>
+              </div>
+            </template>
+
+            <!-- 小程序 -->
+            <template v-else-if="row.attachments.miniprogram">
+              <div class="flex-align-center">
+                <el-image style="width: 40px; height: 40px;margin-right: 10px;flex-shrink: 0;" :src="row.attachments.miniprogram.pic_media_url" :preview-src-list="[row.attachments.miniprogram.pic_media_url]" />
+                <span style="line-height: 16px; cursor: pointer">
+                  <span target="_blank" class="c-676C97">
+                    <el-tooltip class="disinblock" :content="row.attachments.miniprogram.title" :disabled="row.attachments.miniprogram.title && row.attachments.miniprogram.title.length < 34" placement="top">
+                      <span class="clampTwo">{{
+                        row.attachments.miniprogram.title
+                          ? row.attachments.miniprogram.title
+                          : "-"
+                      }}</span>
+                    </el-tooltip>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" align="center" min-width="140">
+        <template slot-scope="{ row }">
+          <div class="customerServiceTagBox">
+            <div class="customerServiceTag">
+              <i class="el-icon-user-solid" /> {{ row.creator }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" prop="update_time" min-width="160" show-overflow-tooltip align="center" />
+      <el-table-column label="操作" min-width="160" align="center" fixed="right">
+        <template slot-scope="{ row }">
+          <span class="btn c-00b38a" @click="onClickEditBtn(row)">编辑</span>
+          <span class="btn c-FF604D" @click="onClickDelBtn(row)">删除</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="pagination.total > 0">
+      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)" />
+    </div>
+
+    <!-- S 查看视频 -->
+    <videoDialog
+      :dialogVisible="videoDialogVisible"
+      :link="currentVideoLink"
+      @close="onCloseVideo"
+    />
+    <!-- E 查看视频 -->
+
+    <!-- 详情 -->
+    <el-drawer size="1200px" :visible.sync="detailVisible" :with-header="false">
+      <detail ref="detail" v-if="detailVisible" :template_id='crtTemplateId' @close="detailClose" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import selfInputV2 from "@/components/assembly/screen/inputV2.vue";
+import selfChannelV2 from "@/components/assembly/screen/channelV2.vue";
+import videoDialog from "./videoDialog.vue";
+import detail from "./detail.vue";
+
+export default {
+  name: "welcomeGroup",
+  components: {
+    selfInputV2,
+    selfChannelV2,
+    videoDialog,
+    detail,
+  },
+  data() {
+    return {
+      height: "",
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        keyword: "",
+        creator_id: "",
+      },
+      list: [],
+
+      videoDialogVisible: false,
+      currentVideoLink: "",
+
+      detailVisible: false,
+      crtTemplateId: '',
+
+    };
+  },
+  created() {
+    this.height = document.documentElement.clientHeight - 200;
+    this.handleGetList();
+  },
+  methods: {
+    // 获取列表数据
+    async handleGetList() {
+      try {
+        this.loading = true;
+        const url = `${this.URL.BASEURL}${this.URL.welcomeGroup_list}`;
+        const params = {
+          keyword: this.filter.keyword,
+          creator_id: this.filter.creator_id,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        };
+        const { data: res = {} } = await this.$axios.get(url, { params });
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.list = res.rst.data;
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err);
+          this.list = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        console.log(error);
+        this.list = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false;
+      }
+    },
+    onChangeKeyword(val) {
+      this.filter.keyword = val;
+      this.pagination.page = 1;
+      this.handleGetList();
+    },
+    onChangeCreatorId(val) {
+      this.filter.creator_id = val || "";
+      this.pagination.page = 1;
+      this.handleGetList();
+    },
+
+    // 监听当前页数变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage;
+      this.handleGetList();
+    },
+
+    // 监听点击“新建配置”
+    onClickCreateBtn() {
+      console.log("onClickCreateBtn => ");
+      this.crtTemplateId = ''
+      this.detailVisible = true
+    },
+    // 监听点击“编辑配置”
+    onClickEditBtn(row) {
+      console.log("onClickEditBtn => row ", JSON.parse(JSON.stringify(row)));
+      this.crtTemplateId = row.template_id
+      this.detailVisible = true
+    },
+    detailClose({ isEdit }) {
+      console.log('detailClose => ', )
+      this.crtTemplateId = ''
+      this.detailVisible = false
+      if (!isEdit) {
+        this.pagination.page = 1;
+      }
+      this.handleGetList();
+    },
+
+    // 监听点击"删除"
+    async onClickDelBtn({ name, template_id }) {
+      try {
+        await this.$confirm(`确定删除【${name}】？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.handleDelRule(template_id)
+      } catch (error) {
+        console.log('error => ', error)
+      }
+    },
+    async handleDelRule(template_id) {
+      try {
+        const url = `${this.URL.BASEURL}${this.URL.welcomeGroup_del}`
+        const params = { template_id }
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0) {
+          this.$message.success('操作成功')
+          this.handleGetList();
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      }
+    },
+
+    onClickShowVideo(videoLink) {
+      if (!videoLink) return false;
+      this.currentVideoLink = videoLink;
+      this.videoDialogVisible = true;
+    },
+    onCloseVideo() {
+      this.currentVideoLink = "";
+      this.videoDialogVisible = false;
+    },
+    onClickShowfile(fileLink) {
+      window.open(fileLink, '_blank')
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.welcomeGroup-wrap {
+  /deep/ .el-switch.is-disabled .el-switch__core {
+    cursor: pointer;
+  }
+  /deep/ .el-switch.is-disabled {
+    opacity: 1;
+  }
+  .screenBox {
+    background: #fff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .filter-wrap {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .btn {
+    cursor: pointer;
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .lableBox_dad {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    .lableBox {
+      font-size: 12px;
+      background-color: #f0f0f0;
+      padding: 4px 8px;
+      margin-top: 5px;
+      margin-right: 4px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

project/src/components/welcomeGroup/videoDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="video-dialog"
+    :title="title"
+    width="550px"
+    :close-on-click-modal="false"
+  >
+    <div class="content-wrap" v-loading="loading">
+      <video :src="link" width="60%" controls />
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" type="primary" @click="handleCancel">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    link: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  computed: {
+    title() {
+      return ``
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // 获取表单数据
+        // this.handleGetFormData()
+      }
+    },
+  },
+  methods: {
+    handleCancel() {
+      // this.handleClearFormData()
+      this.$emit('close')
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      this.form.app_id = ''
+      this.form.account_id = []
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.video-dialog {
+  .content-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -119,6 +119,7 @@ const customerWarn = () => import(/* webpackChunkName: 'customerWarn' */ '@/comp
 
 const InviteIntoGroup = () => import(/* webpackChunkName: 'InviteIntoGroup' */ '@/components/manage/InviteIntoGroup/index.vue')
 const groupTransfer = () => import(/* webpackChunkName: 'groupTransfer' */ '@/components/groupTransfer/index.vue')
+const welcomeGroup = () => import(/* webpackChunkName: 'welcomeGroup' */ '@/components/welcomeGroup/index.vue')
 
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
@@ -1072,6 +1073,16 @@ export var allRouter = [
           title: '客户群分配'
         }
       },
+      {
+        path: 'welcomeGroup',
+        name: 'welcomeGroup',
+        component: welcomeGroup,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '入群欢迎语'
+        }
+      },
     ]
   }
 ]