渠道活码

project/src/components/channelCode/codeIndex.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="con">
+    <div class="searchBox">
+      <el-button type="primary" size="mini" @click="createdchannel_code">新建渠道活码</el-button>
+      <self-input label_name="搜索渠道" @inputChange='(val)=>{channel_val = val;initFlag=!initFlag}'></self-input>
+      <self-input label_name="客服" @inputChange='(val)=>{customer_val = val;initFlag=!initFlag}'></self-input>
+      <div class="reset" @click="resetEvent">重置</div>
+    </div>
+    <div class="mainBox">
+      <div class="groupBox">
+        <groupList></groupList>
+      </div>
+      <div class="tableBox">
+        <publicTable
+          :propsData="{
+            desCol:desCol,
+            source:'codeIndex',
+            initFlag:initFlag,
+            channel_val:channel_val,
+            customer_val:customer_val
+          }"
+          ></publicTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import publicTable from './publicTable.vue'
+import groupList from './groupList.vue'
+export default {
+  name: "codeIndex",
+  components:{
+    publicTable,
+    selfInput,
+    groupList
+  },
+  data() {
+    return {
+      initFlag:false,
+      channel_val:'',
+      customer_val:'',
+      desCol:[
+        { prop: "name", label: "渠道名称" },
+        { prop: "assign_count", label: "创建人" },
+        { prop: "waiting_add_count", label: "分组" },
+        { prop: "passed_count", label: "扫码总人数",}
+      ],
+    }
+  },
+  methods:{
+    resetEvent () {//重置
+      this.initFlag = !this.initFlag
+      this.channel_val = ''
+      this.customer_val = ''
+    },
+    createdchannel_code(){//新建渠道活码
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.con{
+  padding-right: 10px;
+  .searchBox{
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    padding: 5px 10px ;
+    position: relative;
+    .reset {
+      width: 80px;
+      height: 30px;
+      background: #00b38a;
+      border-radius: 100px 3px 3px 3px;
+      border: 1px solid #d2d2d2;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 30px;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      letter-spacing: 2px;
+      cursor: pointer;
+    }
+  }
+  .mainBox{
+    display: flex;
+    align-items: flex-start;
+    margin-top: 10px;
+    .groupBox{
+      width: 20%;
+      background-color: #fff;
+      flex-shrink: 0;
+      margin-right: 10px;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+    }
+    .tableBox{
+      flex: 1;
+      background-color: #fff;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+    }
+  }
+}
+
+</style>

project/src/components/channelCode/dialogGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    custom-class="channel_code_group"
+    :title="propsData.dialogTitle+'分组'"
+    :visible.sync="dialogVisible"
+    width="30%">
+    <div class="dialogBox">
+      <div class="lable">分组名称</div>
+      <el-input
+        size="small"
+        placeholder="请输入内容"
+        maxlength="8"
+        v-model="groupName"
+        clearable>
+      </el-input>
+    </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible=false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="dialogVisible=false">确 定</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "dialogGroup",
+  props:['propsData'],
+  data(){
+    return{
+      groupName:'',
+      dialogTitle:'',
+      dialogVisible:false,
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.channel_code_group{
+  .dialogBox{
+    display: flex;
+    align-items: center;
+    .lable{
+      font-weight: 600;
+      margin-right: 10px;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+</style>

project/src/components/channelCode/groupList.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="title">
+      <span class="fWeight600 c-000 f14">渠道分组</span>
+      <span class="addGroupBox" @click="$refs.dialogGroupRef.dialogVisible = true">
+        <i class="el-icon-plus f12"></i>
+        添加分组
+      </span>
+    </div>
+    <div class="listBox">
+      <div v-for="item in listArrs" :key="item.id" class="item_css"
+           @click="itemClick(item.id)"
+           :class="acIdx==item.id ? 'ac_css' : ''">
+        <i class="el-icon-folder"></i>
+        <span>{{item.name ? item.name : '-'}}</span>
+        <span class="lMarauto">
+<!--          <span class="c-ddd">{{item.nums||item.nums==0 ? item.nums : '-'}}</span>-->
+
+          <el-dropdown @command="handleCommand">
+            <span class="el-dropdown-link">
+              <i class="el-icon-more"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown" >
+              <el-dropdown-item :command="'editName/'+item.id+'/'+item.name">修改名称</el-dropdown-item>
+              <el-dropdown-item :command="'deleGroup/'+item.id">删除分组</el-dropdown-item>
+              <el-dropdown-item :command="'moveUp/'+item.id">上移</el-dropdown-item>
+              <el-dropdown-item :command="'moveDown/'+item.id">下移</el-dropdown-item>
+              <el-dropdown-item :command="'placeTop/'+item.id">置顶</el-dropdown-item>
+              <el-dropdown-item :command="'placeBottom/'+item.id">置底</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+        </span>
+
+      </div>
+    </div>
+
+    <dialogGroup
+      ref="dialogGroupRef"
+      :propsData="{
+      dialogTitle:dialogTitle
+    }"></dialogGroup>
+  </div>
+</template>
+
+<script>
+import dialogGroup from './dialogGroup.vue'
+export default {
+  name: "groupList",
+  components:{
+    dialogGroup
+  },
+  data(){
+    return{
+      dialogTitle:'',
+      acIdx:0,
+      listArrs:[
+        {
+          id:0,
+          name:'全部',
+          nums:0
+        },
+        {
+          id:1,
+          name:'默认分组',
+          nums:0
+        },
+        {
+          id:2,
+          name:'自定义分组',
+          nums:0
+        }
+      ]
+
+    }
+  },
+  methods:{
+    handleCommand(command){
+      let eventName = command.split('/')[0]
+      let id = command.split('/')[1]
+      let name = command.split('/')[2]
+      if(eventName == 'editName'){
+        this.deleGroup(name)
+      }
+
+    },
+    deleGroup(name){//删除分组
+      this.$nextTick(()=>{
+        this.dialogTitle = '修改'
+        this.$refs.dialogGroupRef.groupName = name
+        this.$refs.dialogGroupRef.dialogVisible = true
+      })
+    },
+
+    itemClick(id){
+      this.acIdx = id
+    },
+    showMore(){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title{
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .addGroupBox{
+    color: #00b38a;
+    font-size: 13px;
+    cursor: pointer;
+
+  }
+}
+.listBox{
+  margin-top: 10px;
+  .item_css{
+    display: flex;
+    align-items: center;
+    padding: 15px 10px;
+    font-size: 14px;
+    cursor: pointer;
+    border-left: 2px solid transparent;
+    .el-icon-folder{
+      margin-right: 4px;
+      color: #00b38a;
+    }
+    .el-icon-more{
+      //transform:rotate(90deg);
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .ac_css,.item_css:hover{
+    border-left: 2px solid #00b38a;
+    background-color: rgba(0,179,138,0.1);
+  }
+
+}
+</style>

project/src/components/channelCode/publicTable.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+  <!-- table -->
+    <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%">
+      <template v-for="item in propsData.desCol">
+        <el-table-column :key="item.prop" :label="item.label" align="center"
+                         :show-overflow-tooltip="item.showOverTooltip"
+                         :min-width="item.min_width?item.min_width:120">
+          <template #header v-if="item.tooltip">
+            {{item.label?item.label:'-'}}
+            <el-tooltip class="disinblock" :content="item.tooltip" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            <div>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</div>
+          </template>
+        </el-table-column>
+      </template>
+
+
+      <el-table-column label="操作" align="center" min-width="180px">
+        <template slot-scope="scope">
+          <template v-if="propsData.source=='codeIndex'">
+            <div class="flex">
+              <div class="c-00B38A pointer">禁用</div>
+              <div class="c-00B38A pointer lMar8">删除</div>
+              <div class="c-00B38A pointer lMar8">复制</div>
+              <div class="c-00B38A pointer lMar8">下载</div>
+              <div class="c-00B38A pointer lMar8">分析数据</div>
+            </div>
+          </template>
+        </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: "publicTable",
+  props:['propsData'],
+  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:{
+
+    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 lang="scss" scoped>
+
+</style>

project/src/router/allRouter.js

@@ -34,6 +34,7 @@ const wxAccountList = () => import(/* webpackChunkName: 'wxAccountList' */ '@/co
 const thePublicTrend = () => import(/* webpackChunkName: 'thePublicTrend' */ '@/components/dataBoard/thePublicTrend.vue')
 const playletFansActTrend = () => import(/* webpackChunkName: 'playletFansActTrend' */ '@/components/dataBoard/playletFansActTrend.vue')
 const batchAddFriend = () => import(/* webpackChunkName: 'batchAddFriend' */ '@/components/marketingGuest/batchAddFriend/index.vue')
+const codeIndex = () => import(/* webpackChunkName: 'codeIndex' */ '@/components/channelCode/codeIndex.vue')
 const importRecord = () => import(/* webpackChunkName: 'importRecord' */ '@/components/marketingGuest/batchAddFriend/addFriend/importRecord.vue')
 const importRecordDetial = () => import(/* webpackChunkName: 'importRecordDetial' */ '@/components/marketingGuest/batchAddFriend/addFriend/importRecordDetial.vue')
 // const putOnwarning = () => import(/* webpackChunkName: 'putOnwarning' */ '@/components/dataBoard/putOnwarning/warningManage.vue')
@@ -99,6 +100,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'codeIndex',
+        name: 'codeIndex',
+        component: codeIndex,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '渠道活码'
+        }
+      },
+      {
         path: 'importRecord',
         name: 'batchAddFriend',
         component: importRecord,