.

project/src/components/assembly/screen/channel.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="common-screen-item">
+    <label class="common-screen-label">添加渠道</label>
+    <div :class="['common-screen-self-box','common-input-select',value!=''&&clearable?'common-input-select-hover':'']">
+      <span :class="['common-screen-self-con',value==''?'common-screen-self-placeholder':'']">{{value!=''?valueCon.label:'请选择渠道'}}</span>
+      <div class="common-screen-self-icon" @click="clear">
+        <i class="el-icon-arrow-down default-icon"></i>
+        <i class="el-icon-circle-close other-icon"></i>
+      </div>
+      <el-select v-model="value" class="common-screen-opacity-0" placeholder="请选择" @change="change">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      value: '',
+      options: [
+        { label: '未知来源', value: '0' },
+        { label: '扫描二维码', value: '1' },
+        { label: '搜索手机号', value: '2' },
+        { label: '名牌分享', value: '3' },
+        { label: '群聊', value: '4' },
+        { label: '手机通讯录', value: '5' },
+        { label: '微信联系人', value: '6' },
+        { label: '安装第三方应用时自动添加的客服人员', value: '8' },
+        { label: '搜索邮箱', value: '9' },
+        { label: '视频号添加', value: '10' },
+        { label: '内部成员共享', value: '201' },
+        { label: '管理员/负责人分配', value: '202' },
+      ],
+      valueCon: {}
+    }
+  },
+  methods: {
+    clear () {
+      this.value = ''
+      this.valueCon = {}
+    },
+    change () {
+      let arr = this.options.filter((v) => {
+        return v.value == this.value
+      })
+      arr.length > 0 ? this.valueCon = arr[0] : ''
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dateInput {
+  padding: 0 !important;
+  text-align: center;
+}
+</style>

project/src/components/assembly/screen/datePicker.vue

@@ -5,7 +5,7 @@
       <span :class="['common-screen-self-con',!time||time.length==0?'common-screen-self-placeholder':'dateInput']">{{!time||time.length==0?'开始时间 ～ 结束时间' : time[0] + ' ~ ' + time[1]}}</span>
       <div class="common-screen-self-icon" @click="clear">
         <i class="el-icon-date default-icon"></i>
-        <i class="el-icon-error other-icon"></i>
+        <i class="el-icon-circle-close other-icon"></i>
       </div>
       <el-date-picker class="common-screen-opacity-0" size="small" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" value-format="yyyy-MM-dd">
       </el-date-picker>

project/src/components/assembly/screen/gender.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="common-screen-item">
+    <label class="common-screen-label">性别</label>
+    <div :class="['common-screen-self-box','common-input-select',value!=''&&clearable?'common-input-select-hover':'']">
+      <span :class="['common-screen-self-con',value==''?'common-screen-self-placeholder':'']">{{value!=''?valueCon.label:'请选择性别'}}</span>
+      <div class="common-screen-self-icon" @click="clear">
+        <i class="el-icon-arrow-down default-icon"></i>
+        <i class="el-icon-circle-close other-icon"></i>
+      </div>
+      <el-select v-model="value" class="common-screen-opacity-0" placeholder="请选择" @change="change">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      value: '',
+      options: [
+        { label: '男', value: '0' },
+        { label: '女', value: '1' },
+        { label: '未知', value: '2' },
+      ],
+      valueCon: {}
+    }
+  },
+  methods: {
+    clear () {
+      this.value = ''
+      this.valueCon = {}
+    },
+    change () {
+      let arr = this.options.filter((v) => {
+        return v.value == this.value
+      })
+      arr.length > 0 ? this.valueCon = arr[0] : ''
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dateInput {
+  padding: 0 !important;
+  text-align: center;
+}
+</style>

project/src/components/assembly/screen/lossBody.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="common-screen-item">
+    <label class="common-screen-label">流失状态
+      <el-tooltip class="disinblock" content="仅可统计员工授权微伴后的流失客户" placement="top">
+        <i class="el-icon-question"></i>
+      </el-tooltip>
+    </label>
+    <div :class="['common-screen-self-box','common-input-select',value!=''&&clearable?'common-input-select-hover':'']">
+      <span :class="['common-screen-self-con',value==''?'common-screen-self-placeholder':'']">{{value!=''?valueCon.label:'请选择流失状态'}}</span>
+      <div class="common-screen-self-icon" @click="clear">
+        <i class="el-icon-arrow-down default-icon"></i>
+        <i class="el-icon-circle-close other-icon"></i>
+      </div>
+      <el-select v-model="value" class="common-screen-opacity-0" placeholder="请选择" @change="change">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      value: '',
+      options: [
+        { label: '已流失', value: '1' },
+        { label: '未流失', value: '2' },
+      ],
+      valueCon: {}
+    }
+  },
+  methods: {
+    clear () {
+      this.value = ''
+      this.valueCon = {}
+    },
+    change () {
+      let arr = this.options.filter((v) => {
+        return v.value == this.value
+      })
+      arr.length > 0 ? this.valueCon = arr[0] : ''
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dateInput {
+  padding: 0 !important;
+  text-align: center;
+}
+</style>

project/src/components/customManage/manage.vue

@@ -9,34 +9,84 @@
       <enterprise-tag></enterprise-tag>
       <!-- 添加时间 -->
       <date-picker></date-picker>
-      <div class="common-screen-item">
-        <label class="common-screen-label">流失状态
-          <el-tooltip class="disinblock" effect="light" content="投放ROI=投放产生的销售额/ 投放金额" placement="top">
-            <i class="el-icon-question"></i>
-          </el-tooltip>
-        </label>
-        <div class="common-screen-self-box common-input-select">
-          <span class="common-screen-self-con common-screen-self-placeholder">请选择渠道</span>
-          <div class="common-screen-self-icon"><i class="el-icon-arrow-down"></i></div>
+      <!-- 添加渠道 -->
+      <self-channel></self-channel>
+      <!-- 性别 -->
+      <self-gender></self-gender>
+      <!-- 流失状态 -->
+      <loss-body></loss-body>
+      <div class="reset">重置</div>
+    </div>
+    <div class="tableInfo">
+      <div>
+        <div class="flex">
+          <i class="el-icon-user-solid"></i>
+          <div class="totalCustom">共<span>2345</span>个客户</div>
+          <div class="smalLine"></div>
+          <div class="excludeCustom">排除重复客户
+            <el-tooltip class="disinblock" content="该数据为去重后的客户数，若客户添加了多个员工只会统计为1个客户" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+            <span>1000</span>
+          </div>
+          <div class="smalLine"></div>
+          <el-button type="primary" plain size="mini"><i class="el-icon-refresh-right"></i> 更新数据</el-button>
         </div>
+        <div class="selectCustom">已选择0个客户</div>
       </div>
-
-      <div class="common-screen-item">
-        <label class="common-screen-label">添加渠道</label>
-        <div class="common-screen-self-box common-input-select">
-          <span class="common-screen-self-con common-screen-self-placeholder">请选择渠道</span>
-          <div class="common-screen-self-icon"><i class="el-icon-arrow-down"></i></div>
-        </div>
-      </div>
-
-      <div class="common-screen-item">
-        <label class="common-screen-label">性别</label>
-        <div class="common-screen-self-box common-input-select">
-          <span class="common-screen-self-con common-screen-self-placeholder">请选择渠道</span>
-          <div class="common-screen-self-icon"><i class="el-icon-arrow-down"></i></div>
-        </div>
+      <div class="flex">
+        <el-button type="primary" plain size="mini">批量打标签</el-button>
+        <el-button type="primary" plain size="mini">导出Excel</el-button>
       </div>
     </div>
+    <!-- table -->
+    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"></el-table-column>
+      <el-table-column width="200" fixed="left">
+        <template slot-scope="scope" slot="header">
+          <div class="customTitle" slot="reference">{{pageOptionValue==2?'选择当前页面客户':'选择全部客户'}}<i class="el-icon-arrow-down"></i>
+            <el-select v-model="pageOptionValue" class="customTitleSelect" placeholder="请选择" size="mini">
+              <el-option v-for="item in pageOptions" :key="item.id" :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </div>
+        </template>
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+      <el-table-column label="所属客服" width="160" align="center">
+        <template slot-scope="scope">
+          <div class="customerServiceTagBox">
+            <div class="customerServiceTag" v-for="(item,index) in 4"><i class="el-icon-headset"></i>{{ scope.row.name }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" width="160" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column label="标签" width="160" align="center">
+        <template slot-scope="scope">
+          <div class="customerServiceTagBox biaoqian">
+            <div class="customerServiceTag" v-for="(item,index) in 4">{{ scope.row.name }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" width="160" label="客户状态" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column width="160" label="付费情况" align="center">
+        <template slot-scope="scope">
+          <div>已付费(<span class="c-00B38A">3次</span>)</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" width="160" label="添加时间" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column prop="address" width="160" label="上次对话时间" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column prop="address" width="160" label="添加渠道" show-overflow-tooltip align="center"></el-table-column>
+      <el-table-column width="200" label="操作" align="center" fixed="right">
+        <template slot-scope="scope">
+          <div class="flex">
+            <div class="c-00B38A pointer">加入黑名单</div>
+            <div class="c-00B38A pointer">聊天记录</div>
+            <div class="c-00B38A pointer">详情</div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script>
@@ -44,16 +94,56 @@ import selfInput from '@/components/assembly/screen/input.vue'
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
 import enterpriseTag from '@/components/assembly/screen/enterpriseTag.vue'
 import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfChannel from '@/components/assembly/screen/channel.vue'
+import selfGender from '@/components/assembly/screen/gender.vue'
+import lossBody from '@/components/assembly/screen/lossBody.vue'
 export default {
-  components: { selfInput, selfCustomerservice, enterpriseTag, datePicker },
+  components: { selfInput, selfCustomerservice, enterpriseTag, datePicker, selfChannel, selfGender, lossBody },
   data () {
     return {
+      pageOptions: [
+        { name: '全部', id: 1 },
+        { name: '当前页面', id: 2 },
+      ],
+      pageOptionValue: 2,
       input_keyword: '',
+      tableData: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
     }
   },
   methods: {
     init () {
       console.log(this.input_keyword)
+    },
+    handleSelectionChange () {
+
     }
   }
 }
@@ -64,10 +154,116 @@ export default {
   padding: 10px 18px;
   display: flex;
   flex-wrap: wrap;
+  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;
+  }
   .common-screen-item {
     width: 33%;
   }
 }
+.tableInfo {
+  width: 100%;
+  height: 80px;
+  padding: 0 16px;
+  background: #ffffff;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .el-icon-user-solid {
+    color: #00b38a;
+    margin-right: 4px;
+  }
+  .totalCustom {
+    color: #333333;
+    font-size: 14px;
+    line-height: 20px;
+    span {
+      color: #00b38a;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 25px;
+      padding: 0 4px;
+    }
+  }
+  .smalLine {
+    width: 1px;
+    height: 19px;
+    background: #d8d8d8;
+    margin: 0 14px;
+  }
+  .excludeCustom {
+    color: #898d92;
+    font-size: 14px;
+    line-height: 20px;
+    span {
+      color: #00b38a;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 25px;
+      padding: 0 4px;
+    }
+  }
+  .selectCustom {
+    color: #c3cbd6;
+    font-size: 14px;
+    line-height: 20px;
+    margin-left: 20px;
+  }
+}
+.customTitle {
+  position: relative;
+  cursor: pointer;
+  color: #00b38a;
+  line-height: 30px;
+  display: inline-block;
+  i {
+    margin-left: 4px;
+  }
+  .customTitleSelect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+}
+.customerServiceTagBox {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .customerServiceTag {
+    height: 26px;
+    line-height: 26px;
+    background: #00b38a;
+    border-radius: 4px;
+    border: 1px solid #00b38a;
+    color: #ffffff;
+    font-size: 12px;
+    margin: 2px;
+    padding: 0 3px;
+  }
+}
+.biaoqian {
+  .customerServiceTag {
+    background: #f4f4f4;
+    color: #787878;
+    border: 1px solid #d2d2d2;
+  }
+}
+
 @media screen and (min-width: 1600px) {
   .screenBox {
     .common-screen-item {

project/src/style/common.scss

@@ -30,6 +30,13 @@
     .common-screen-self-con{
       padding: 0 15px;
       flex: 1;
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      -webkit-box-orient: vertical;
     }
     .common-screen-self-placeholder{
       color: #c0c4cb;

project/src/style/self.scss

@@ -222,6 +222,9 @@
 .c-FFB055{
   color: #FFB055;
 }
+.c-00B38A{
+  color: #00B38A;
+}
 .c-58BCA6{
   color: #58BCA6;
 }