|
|
@@ -0,0 +1,255 @@
|
|
|
+<template>
|
|
|
+ <div class="overseas-custom-list-wrap">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="switch-box">
|
|
|
+ <el-radio-group v-model="pageSelect">
|
|
|
+ <el-radio-button label="海外客户"></el-radio-button>
|
|
|
+ <el-radio-button label="已隐藏客户"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="select-box">
|
|
|
+ <el-select placeholder="请选择销售"></el-select>
|
|
|
+ <el-input placeholder="客户名称/社会信用码/手机号码/邮箱" style="width:317px;"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-box">
|
|
|
+ <div class="data-select-box">
|
|
|
+ <div class="table-select-box">
|
|
|
+ <ul class="status-box">
|
|
|
+ <li v-for="item in tableTabs" :key="item.Status"
|
|
|
+ :class="['tab',{'act':statusSelect === item.Status}]"
|
|
|
+ @click="changeStatus(item)"
|
|
|
+ >
|
|
|
+ {{`${item.Status}(${item.Count})`}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- 试用小分类 -->
|
|
|
+ <ul class="try-status-box" v-if="statusSelect==='试用'">
|
|
|
+ <li v-for="item in tryTabs" :key="item.TryStage"
|
|
|
+ :class="['trial-item',{'act':act_trialTag === item.TryStage}]"
|
|
|
+ @click="changeTagStatus(item)"
|
|
|
+ >
|
|
|
+ {{item.TryStageStr+'('+item.Count+')'}}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 管理员-选择销售 -->
|
|
|
+ <div class="data-select" v-if="isDataSelectBtnShow&&this.tableData.length">
|
|
|
+ <el-button type="text"><i class="el-icon-plus" style="font-weight: bold;margin-right: 5px;"/>选择销售</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-box">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ @sort-change="handleSortChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ v-for="item in columns" :key="item.key"
|
|
|
+ :prop="item.key" :label="item.label"
|
|
|
+ :min-width="item.minWidth"
|
|
|
+ :sortable="item.sortable?'custom':false"
|
|
|
+ >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <!-- 客户名称 -->
|
|
|
+ <div v-if="item.key==='name'" class="name-box" @click="toCustomDetail">{{row[item.key]}}</div>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <div v-else-if="item.key==='status'" class="status-box">
|
|
|
+ <span>{{row[item.key]}}</span>
|
|
|
+ <div class="select">a</div>
|
|
|
+ </div>
|
|
|
+ <span v-else>{{row[item.key]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template slot="empty">
|
|
|
+ <!-- 管理员展示按钮 -->
|
|
|
+ <div class="data-select" v-if="isDataSelectBtnShow">
|
|
|
+ <el-button type="text"><i class="el-icon-plus" style="font-weight: bold;margin-right: 5px;"/>选择销售</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 非管理员显示暂无数据 -->
|
|
|
+ <div v-else>暂无数据aaa</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ :current-page="currentPage"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="total"
|
|
|
+ style="text-align: right;margin-top:20px"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { customInterence } from '@/api/api.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageSelect:'海外客户',
|
|
|
+ tableTabs:[],
|
|
|
+ tryTabs:[],
|
|
|
+ statusSelect:'全部',//客户状态
|
|
|
+ tagStatusSelect:'全部',//客户试用状态
|
|
|
+ columns:[{
|
|
|
+ label:"客户名称",
|
|
|
+ key:'name'
|
|
|
+ },{
|
|
|
+ label:"国家",
|
|
|
+ key:'from'
|
|
|
+ },{
|
|
|
+ label:"销售",
|
|
|
+ key:'sales'
|
|
|
+ },{
|
|
|
+ label:"状态",
|
|
|
+ key:'status'
|
|
|
+ },{
|
|
|
+ label:"累计点击量",
|
|
|
+ key:'click',
|
|
|
+ sortable:true
|
|
|
+ },{
|
|
|
+ label:"路演数量",
|
|
|
+ key:'roadshow',
|
|
|
+ sortable:true
|
|
|
+ },{
|
|
|
+ label:"最近阅读时间",
|
|
|
+ key:'lasttime',
|
|
|
+ sortable:true
|
|
|
+ },{
|
|
|
+ label:"创建时间",
|
|
|
+ key:'create',
|
|
|
+ sortable:true
|
|
|
+ }],
|
|
|
+ tableData:[{name:"某客户"},{name:"某客户1"},{name:"某客户2"},{name:"某客户3"},{name:"某客户4"},{name:"某客户5"},{name:"某客户6"},{name:"某客户7"},{name:"某客户8"},{name:"某客户9"}],
|
|
|
+ currentPage:1,
|
|
|
+ pageSize:10,
|
|
|
+ total:0
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ RoleType(){
|
|
|
+ return localStorage.RoleType||''
|
|
|
+ },
|
|
|
+ isDataSelectBtnShow(){
|
|
|
+ return (this.RoleType==='admin'||this.RoleType==='ficc_admin')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTableData(){
|
|
|
+ //先用中文客户列表
|
|
|
+ customInterence.customList({
|
|
|
+ PageSize:this.pageSize,
|
|
|
+ CurrentIndex:this.currentPage,
|
|
|
+ Status:this.statusSelect
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ this.tableTabs = res.Data.StatusCount
|
|
|
+ this.tryTabs = res.Data.TryStageCount?res.Data.TryStageCount:[]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //切换客户状态
|
|
|
+ changeStatus(item){
|
|
|
+ this.statusSelect = item.Status
|
|
|
+ this.handlePageChange(1)
|
|
|
+ },
|
|
|
+ //切换客户试用状态
|
|
|
+ changeTagStatus(item){
|
|
|
+ this.tagStatusSelect = item.TryStage
|
|
|
+ this.handlePageChange(1)
|
|
|
+ },
|
|
|
+ handleSortChange(){},
|
|
|
+ handlePageChange(page){
|
|
|
+ this.currentPage = page
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ toCustomDetail(){},
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getTableData()
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.overseas-custom-list-wrap{
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:30px;
|
|
|
+ .top-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .data-box{
|
|
|
+ margin-top:40px;
|
|
|
+ .data-select-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ ul{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .status-box{
|
|
|
+ .tab {
|
|
|
+ width: 129px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-right:1px solid #707070;
|
|
|
+ cursor: pointer;
|
|
|
+ transition-delay: 0.05s;
|
|
|
+ &:hover {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+ &.act {
|
|
|
+ // padding: 9px 24px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #409EFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #409EFF;
|
|
|
+ transform: scale(1.014);
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .try-status-box{
|
|
|
+ padding: 20px 0 0 30px;
|
|
|
+ .trial-item {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 30px;
|
|
|
+ &:hover {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+ &.act {
|
|
|
+ color: #409EFF;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background: #409EFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box{
|
|
|
+ margin-top:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cxmo