渠道活码

project/src/components/channelCode/addLimit.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-table v-loading="loading" ref="multipleTable"
+              border
+              :height='height'
+              :data="tableData"
+              tooltip-effect="dark"
+              :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+              style="width: 100%">
+      <el-table-column label="全部成员" align="center">
+        <template slot-scope="scope">
+          <div>{{scope.row ? scope.row : '-'}}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <div class="c-00B38A pointer lMar8">删除</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "addLimit",
+  data(){
+    return{
+      loading: false,
+      dataLoading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      height: '',
+      tableData:[]
+    }
+  },
+  watch:{
+    'propsData.initFlag'(){
+      this.init(1)
+    }
+  },
+  created() {
+    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
+    this.init(1)
+  },
+  methods:{
+    goDataAanlyse(id){
+      this.$router.push('/dataAnalyse/'+id)
+    },
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.batchAddCustomer_statistic, {
+        params:{
+          start_date: '2022-05-14',
+          end_date: '2022-06-13',
+          page: type == 'export' ? 1 : this.page,
+          pagesize: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            this.tableData = res.rst.data
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

project/src/components/channelCode/codeIndex.vue

@@ -56,7 +56,7 @@ export default {
       this.customer_val = ''
     },
     createdchannel_code(){//新建渠道活码
-
+      this.$router.push('/createChannelCode')
     }
   }
 }

project/src/components/channelCode/createChannelCode.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <div class="backBox" @click="$router.go(-1)">
+     <div class="back">
+       <i class="el-icon-back"></i>
+       <span>返回</span>
+     </div>
+   </div>
+
+    <div v-if="!loading" class="bg-ffffff createMassMsg" style="padding: 15px 30px;">
+      <div class="self-hint" style="margin-top:10px;width:730px">
+        <i class="el-icon-message-solid"></i>
+        <div>
+          <div>1.新建渠道活码最多可发送10条消息（包含1条文字消息和9条附加消息）</div>
+          <div>2.附加消息包括图片、连接、小程序</div>
+          <div>3.渠道欢迎语将在客户加为好友后20秒内发送，网络延迟可能造成发送失败</div>
+        </div>
+      </div>
+      <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="channelName" clearable size="small"></el-input>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>选择分组</label>
+        <el-select v-model="group_val" clearable placeholder="请选择">
+          <el-option
+            v-for="item in groupArrs"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <div class="newGroupCss">新建分组</div>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>使用客服</label>
+        <self-customerservice title='' width="300px"
+                              :afferent_users='user_id_list'
+                              @customerDefine="(val)=>{user_id_list=val;}"></self-customerservice>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>选择标签</label>
+        <enterprise-tag title="" width="300px"
+                        :afferent_obj='afferent_tag_obj'
+                        :reset='resetFlag' @tagDefine="tagDefine" style="margin:0;margin-top: 10px"></enterprise-tag>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>渠道欢迎语</label>
+        <edit-con source="welcom"
+                  :afferent_content='main_msg_data.content'
+                  :afferent_attachments='main_msg_data.attachments'
+                  @editContent="(val)=>{main_msg_data.content = val}"
+                  @changeAttachment='getAttachment'></edit-con>
+      </div>
+      <h3 class="bigTitle" style="margin-top:20px">
+        分时段欢迎语:
+        <el-switch v-model="is_day_parting"
+                   @change="switchChange" active-color="#13ce66"
+                   inactive-color="#ddd"></el-switch>
+      </h3>
+      <template v-if="is_day_parting">
+        <div class="self-hint" style="margin-top:10px;width:750px;margin-left:70px;margin-top:20px">
+          <p>分时段欢迎语 ：</p>
+          <div>
+            <p>1、员工上下班不同时间段可设置不同欢迎语；</p>
+            <p>2、分时段之外的时间将发送欢迎语。</p>
+          </div>
+        </div>
+        <div class="regulations regulations2" v-for="(item,index) in timeIntervalList" :key="index+'fenshiduan'">
+          <label style="margin-top:30px;text-align:right">时段{{index+1}}：</label>
+          <welcom-edit :deleteFlag='timeIntervalList.length==1?false:true'
+                       :editInfo="item"
+                       @welcomEditCon='(val)=>{getWelcomEdit(val,index)}'
+                       @deleteWelcomCon='deleteWelcomCon(index)'></welcom-edit>
+        </div>
+        <div class="add_welcom_hint" @click="addWelcom">
+          <i class="el-icon-circle-plus-outline"></i>
+          <span>添加分时段欢迎语</span>
+        </div>
+      </template>
+      <div class="self-hint" style="margin-top:20px;width:750px;margin-left:70px">
+        <i class="el-icon-message-solid"></i>
+        <div>
+          <p>1、新建欢迎语最多可发送1条文字消息和9个附件</p>
+          <p>2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息</p>
+          <p>3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功</p>
+        </div>
+      </div>
+      <div class="line" style="margin-top:20px"></div>
+      <h3 class="bigTitle" style="margin-top:20px">高级设置: </h3>
+      <div class="regulations">
+        <label><em>*</em>客户备注</label>
+        <template>
+          <el-input style="width: 300px"
+                    v-if="node_radio==2"
+                    placeholder="请输入客户备注"
+                    size="small"
+                    v-model="customerNote">
+            <template slot="prepend">客户昵称-</template>
+          </el-input>
+          <el-input style="width: 300px"
+                    size="small"
+                    v-if="node_radio==1"
+                    placeholder="请输入客户备注"
+                    v-model="customerNote">
+            <template slot="append">-客户昵称</template>
+          </el-input>
+        </template>
+       <div style="display: flex;margin-left: 20px">
+         <el-radio v-model="node_radio" :label="1">备注在昵称后</el-radio>
+         <el-radio v-model="node_radio" :label="2">备注在昵称前</el-radio>
+       </div>
+      </div>
+      <div class="regulations" style="margin-left: 100px">
+        <div>示例</div>
+        <div class="customerNoteBox">
+          <img src="../../assets/img/cs_logo.png" alt="" style="width: 30px;height: 30px;margin-right: 8px">
+          <div class="flex-align-center">
+            <template v-if="node_radio==2"><span class="c-000">{{customerNote}}</span> -客户昵称</template>
+            <template v-if="node_radio==1">客户昵称- <span class="c-000">{{customerNote}}</span></template>
+          </div>
+        </div>
+      </div>
+      <div class="regulations">
+        <label>客服添加上限</label>
+        <el-switch v-model="add_limit"
+                   @change="switchLimit" active-color="#13ce66"
+                   inactive-color="#ddd"></el-switch>
+      </div>
+      <template v-if="add_limit">
+
+
+      </template>
+
+
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import enterpriseTag from '@/components/assembly/screen/enterpriseTagFC.vue'
+import editCon from '@/components/assembly/editCon.vue'
+import welcomEdit from '@/components/assembly/welcom_edit.vue'
+export default {
+  name: "createChannelCode",
+  components:{
+    selfCustomerservice,
+    enterpriseTag,
+    editCon,
+    welcomEdit
+  },
+  data(){
+    return{
+      loading:false,
+      channelName:'',
+      is_day_parting: false,
+      group_val:0,
+      groupArrs:[
+        {
+          label:'分组一',
+          value:0
+        }
+      ],
+
+      user_id_list: [],
+      afferent_tag_obj: {
+        tag_id_list: []
+      },
+      resetFlag: false,
+      main_msg_data: {
+        "is_day_parting": 0,
+        "weeks": [],
+        "start_time": "",
+        "end_time": "",
+        "content": '',
+        "attachments": []
+      },
+      deleteTimeIntervalList: [],//删除的分时段列表
+      timeIntervalList: [],//分时段列表
+      customerNote:'',//客户备注
+      node_radio:1,
+      add_limit:true
+    }
+  },
+  created(){
+
+  },
+  methods:{
+    tagDefine (data) {//标签选择回调
+      if (data.tag_id_list && data.tag_id_list.length != 0) {
+        this.tag_info = data.tag_id_list
+      } else {
+        this.tag_info = []
+      }
+    },
+    getAttachment (val) {
+      this.main_msg_data.attachments = val;
+    },
+    switchChange () {//分时段开关打开
+      if (this.is_day_parting && this.timeIntervalList.length == 0) {
+        this.timeIntervalList.push(this.init_welcom_con)
+      }
+    },
+    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)
+    },
+    addWelcom () {//添加分时段
+      this.timeIntervalList.push(this.init_welcom_con)
+    },
+    switchLimit(){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../customOperate/create.scss";
+.customerNoteBox{
+  display: flex;
+  padding:10px;
+  border: 1px solid #ddd;
+  margin-left: 20px;
+}
+.newGroupCss{
+  color: #00b38a;
+  font-size: 14px;
+  margin-left: 10px;
+}
+</style>

project/src/router/allRouter.js

@@ -40,6 +40,7 @@ const importRecordDetial = () => import(/* webpackChunkName: 'importRecordDetial
 // const massMsgDetail = () => import(/* webpackChunkName: 'massMsgDetail' */ '@/components/customOperate/massMsgDetail/index.vue')
 const codeIndex = () => import(/* webpackChunkName: 'codeIndex' */ '@/components/channelCode/codeIndex.vue')
 const code_dataAnalyse = () => import(/* webpackChunkName: 'dataAnalyse' */ '@/components/channelCode/dataAnalyse.vue')
+const createChannelCode = () => import(/* webpackChunkName: 'createChannelCode' */ '@/components/channelCode/createChannelCode.vue')
 //
 
 // name与菜单配置的页面路由一致
@@ -122,6 +123,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'createChannelCode',
+        name: 'codeIndex',
+        component: createChannelCode,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '新建渠道活码'
+        }
+      },
+      {
         path: 'importRecord',
         name: 'batchAddFriend',
         component: importRecord,