boss/pages/main/index/persona.vue

<template>
  <div>
    <div class="title">程序员用户画像</div>
    <div>
      <div>
        <span class="sub-title">活跃度：</span>
        <span class="i-content">
          <span v-if="active">活跃用户</span>
          <span v-if="lost">流失用户</span>
          <span v-if="nonActive">不活跃用户</span>
          <span v-if="back">回流用户</span>
          <span v-if="loyal">忠实用户</span>
        </span>
      </div>
      <div>
        <span class="sub-title">活跃时间段（最近7天）：</span>
        <span class="i-content">
         <span v-if="active">{{activePeriod}}</span>
      </span>
      </div>
      <div>
        <span class="sub-title">常用设备（最近7天）：</span>
        <span class="i-content">
         <span>手机（{{equipment.computer}}次），电脑（{{equipment.mobile}}次）</span>
      </span>
      </div>
      <div>
        <span class="sub-title">收入情况：</span>
        <span class="i-content income">
          <span>整包{{incomeCount.package/100}}元</span>
          <span>云端{{incomeCount.cloud/100}}元</span>
          <span>雇佣{{incomeCount.hire/100}}元</span>
        <span class="clickable" @click="goUserBill()">查看详细记录>></span>
      </span>
      </div>
    </div>
    <div class="title">基本信息及身份特征</div>
    <div class="content">
      <div class="dev-main clear">
        <div class="dev-left">
          <div class="grid-content">
            <img
              class="dev-head point"
              @click="clickUserID(userInfo.uid)"
              :src="userInfo.icon_url"
              alt
            />
            <p class="blackc">{{userInfo.uid}}</p>
            <p class="lblack font13">¥{{userInfo.work_price}}</p>
            <p v-if="userInfo.realname_re=='2'">
              <span class="state-of">已签约</span>
            </p>
          </div>
        </div>
        <div class="dev-center">
          <div class="grid-content">
            <div class="clear">
              <div class="floatl">
                <span class="lblue point blod" @click="clickUserID(userInfo.uid)">{{userInfo.nickname}}</span>
                <span v-if="userInfo.realname" class="lblack font13">({{userInfo.realname}})</span>
                <span class="blod">{{userInfo.occupation_name}}</span>
                <span v-if="userInfo.direction_name">/{{userInfo.direction_name}}</span>
              </div>
              <div class="floatr dev-mark clear">
                <span v-if="userInfo.in_black_list==1" class="dev-dark">{{'黑名单'}}</span>
                <span v-if="userInfo.city_op_name">{{userInfo.city_op_name}}</span>
                <span v-if="userInfo.industry_name">{{userInfo.industry_name}}</span>
                <span v-if="userInfo.work_year_name">{{userInfo.work_year_name}}</span>
                <span>{{userInfo.on_project==0&&userInfo.on_job==0&&userInfo.on_hire==0 ?'空闲':'工作中'}}</span>
              </div>
            </div>
            <div class="dev-infor">
              <p>
                <span class="blod black">技能：</span>

                <span>{{userInfo.skill_description}}</span>
              </p>
              <p>
                <span class="blod black">项目：</span>

                <span v-for="(itms,ind) in userInfo.works" :key="itms.uid">
                  {{itms.name}}
                  <span v-if="ind!=userInfo.works.length-1">,</span>
                </span>
              </p>
              <p>
                <span class="blod black">公司：</span>

                <span>{{userInfo.company}}</span>
                <span>{{userInfo.title}}</span>
              </p>
              <p style="padding-top:22px;">
                <span class="blod black">认证：</span>

                <span v-for="(itms,ind) in userInfo.certTags" :key="itms.uid">
                  {{itms.tag_name}}
                  <span v-if="ind!=userInfo.certTags.length-1">,</span>
                </span>
              </p>
            </div>
          </div>
        </div>
        <div class="dev-right">
          <div class="grid-content">
            <div class="dev-detail">
              <p>
                <span class="blod black">意愿：</span>
                <span>{{userInfo.willing}}</span>
              </p>
              <p>
                <span class="blod black">接单：</span>
                <span v-if="userInfo.work_status==1">
                  <span v-if="userInfo.work_option==0 ">接受所有派单及预约机会</span>
                  <span v-if="userInfo.work_option==3">只接受平台派单和认证企业预约</span>
                  <span v-if="userInfo.work_option==1">只接受平台派单</span>
                </span>
                <span v-else>
                  <span>不接单</span>
                </span>
              </p>
              <p>
                <span class="blod black">数量：</span>
                <span v-if="userInfo.doing_project_num">项目：{{userInfo.doing_project_num}},</span>
                <span v-if="userInfo.doing_job_num">云端：{{userInfo.doing_job_num}},</span>
                <span v-if="userInfo.doing_hire_num">雇佣：{{userInfo.doing_hire_num}},</span>
              </p>
              <p>
                <span class="blod black">权重：</span>
                <span>{{userInfo.appoint_weight}}</span>
              </p>
              <p style="padding-top:22px;">
                <span class="blod black">评价：</span>

                <el-rate
                  disabled
                  class="inlineb"
                  style="    vertical-align: top;"
                  v-model="userInfo.rating"
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                ></el-rate>
                <span v-if="userInfo.rating_count" class="lblack">({{userInfo.rating_count}})</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title">企业用户行为特征</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录(7天内)" name="login">
        <el-table border style="width: 100%" :data="loginData">
          <el-table-column prop="loginTypeName" label="登录方式"></el-table-column>
          <el-table-column prop="client_type" label="登录名称">
            <template slot-scope="scope">
              <span v-if="scope.row.client_type == 'android' || scope.row.client_type == 'ios'">手机</span>
              <span v-else>电脑</span>
            </template>
          </el-table-column>
          <el-table-column prop="loginTimeFormat" label="登录时间"></el-table-column>
          <el-table-column prop="client_type" label="登录环境">
            <template slot-scope="scope">{{scope.row.client_type}} {{scope.row.version}}</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="搜索记录" name="search">
        <el-table border style="width: 100%" :data="searchData">
          <el-table-column prop="keyword" label="关键词"></el-table-column>
          <el-table-column prop="created_at" label="操作时间">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.created_at,'Y-m-d H:i')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="app_type" label="操作设备"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="聊天(7天内)" name="liaotian">
        <el-table border style="width: 100%" :data="liaotianData">
          <el-table-column prop="demander_uid" label="发起者">
            <template slot-scope="scope">
              <span class="lblue point blod" @click="clickUserID(scope.row.demander_uid)">{{scope.row.demander_uid}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="developer_uid" label="被发起者">
            <template slot-scope="scope">
            <span class="lblue point blod" @click="clickUserID(scope.row.developer_uid)">{{scope.row.developer_uid}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="发起时间">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.create_time,'Y-m-d H:i')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chat_total_time" label="聊天时长"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="认证记录" name="renzheng">
        <el-table border style="width: 100%" :data="renzhengData">
          <el-table-column prop="name" label="项目名称"></el-table-column>
          <el-table-column prop="cert_status_name" label="认证状态"></el-table-column>
<!--          <el-table-column prop="check_failed_times" label="当前认证失败次数"></el-table-column>-->
          <el-table-column prop="certified_times" label="认证通过次数"></el-table-column>
          <el-table-column prop="uid" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="clickCheckCert(scope.row)">查看详情>></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="ping单记录" name="ping">
        <el-table border style="width: 100%" :data="pingData">
          <el-table-column prop="create_time" label="操作时间">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.create_time)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="client_type" label="操作设备">
            <template slot-scope="scope">{{scope.row.client_type}} {{scope.row.version}}</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="其它行为操作记录" name="other">
        <el-table border style="width: 100%" :data="otherData">
          <el-table-column prop="name" label="行为名称"></el-table-column>
          <el-table-column prop="create_time" label="发生时间">
            <template slot-scope="scope">
              <span>{{formatDate(scope.row.create_time,'Y-m-d H:i')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="client_type" label="操作设备">
            <template slot-scope="scope">{{scope.row.client_type}} {{scope.row.version}}</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div style="margin-top: 20px">
      <el-pagination
        background
        @current-change="changePagination"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userInfo: {},
        active: false,
        back: false,
        nonActive: false,
        loyal: false,
        lost: false,
        activePeriod: '',
        equipment: {
          computer: 0,
          mobile: 0
        },
        incomeCount: {
          package: 0,     //整包
          cloud: 0,       //云端
          hire: 0,        //雇佣
        },
        income: null,
        certs: [],
        total: 0,
        pageSize: 20,
        page: 1,
        uid: this.$route.query.uid,
        realNameAuditTimes: 0,
        signAuditTimes: 0,
        activeName: 'login',
        loginData: [],       //登录数据
        searchData: [],       //搜索记录数据
        liaotianData: [],       //聊天数据
        renzhengData: [],       //认证数据
        pingData: [],       //ping数据
        otherData: [],       //其他操作数据
      };
    },
    created() {
      this.loadPersona();
      this.loadCerts();
      this.loadLoginLog();
    },
    methods: {
      formatDate(time,format = '') {
        if (time === "0") {
          return "--";
        }
        let now = new Date(time * 1000);
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minute < 10) {
          minute = "0" + minute;
        }
        if (second < 10) {
          second = "0" + second;
        }
        return (format == ''?
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
            :
            year +
            "-" +
            month +
            "-" +
            date +
            " " +
            hour +
            ":" +
            minute
        );
      },
      async loadPersona() {
        let res = await this.$post("/api/admin/user/persona", {uid: this.uid});
        this.userInfo = res.data.userInfo;
        this.active = res.data.active;
        (this.nonActive = res.data.nonActive), (this.loyal = res.data.loyal);
        this.back = res.data.return;
        this.lost = res.data.lost;
        this.incomeCount = res.data.incomeCount;
        this.income = res.data.income;
        this.realNameAuditTimes = res.data.realNameAuditTimes;
        this.signAuditTimes = res.data.signAuditTimes;
        this.activePeriod = res.data.activePeriod;
        this.equipment = res.data.equipment;

      },
      async loadCerts() {
        let res = await this.$post("/api/admin/cert/getUserList", {
          uid: this.uid,
          page: 1,
          page_size: 100
        });
        this.certs = res.data.list;
      },
      async loadLoginLog() {
        let res;
        switch (this.activeName) {
          case "login":
            res = await this.$post("/api/admin/user/lastSevenDaysLoginLog", {
              uid: this.uid,
              page: this.page
            });
            this.loginData = res.data.list;
            this.pageData(res);
            break;
          case 'search':
            res = await this.$post("/api/admin/user/searchLog", {
              uid: this.uid,
              page: this.page
            });
            this.searchData = res.data.list;
            this.pageData(res);
            break;
          case 'liaotian':
            res = await this.$post("/api/admin/user/chatLog", {
              uid: this.uid,
              page: this.page
            });
            this.liaotianData = res.data.list;
            this.pageData(res);
            break;
            case 'renzheng':
              let res = await this.$post("/api/admin/cert/getUserList", {
                uid: this.uid,
                page: this.page,
                // page_size: 100
              });
              this.renzhengData = res.data.list;
              this.pageData(res);
              break;
          case 'ping':
            res = await this.$post("/api/admin/user/pingLog", {
              uid: this.uid,
              page: this.page
            });
            this.pingData = res.data.list;
            this.pageData(res);
            break;
            case 'other':
              res = await this.$post("/api/admin/user/behaviorLog", {
                uid: this.uid,
                page: this.page
              });
              this.otherData = res.data.list;
              this.pageData(res);
              break;
        }

      },
      pageData(res){
        this.pageSize = res.data.pageSize * 1;
        this.total = res.data.total * 1;
      },
      goUserBill() {
        window.location.href = "/main/user_bills?user=" + this.uid;
      },
      clickCheckCert(item) {
        window.open(
          this.$store.state.domainConfig.rooterUrl +
          `/main/dev_check_detail?uid=${item.uid}&cert_id=${item.cert_id}`
        );
      },
      goSignVerify(item) {
        window.open(
          this.$store.state.domainConfig.siteUrl +
          `/rooter/outsourcecoderitem?uid=${this.uid}`
        );
      },
      goRealNameVerify(item) {
        window.open(
          this.$store.state.domainConfig.siteUrl +
          `/rooter/realnameVerifyAuditItem?uid=${this.uid}`
        );
      },
      clickUserID(uid) {
        console.log(uid);
        window.open(
          this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
        );
      },

      // 页码变动
      changePagination(page) {
        this.page = page;
        this.loadLoginLog();
      },
      handleClick(tab, event) {
        this.clearData();
        this.loadLoginLog();
      },
      clearData() {
        this.page = 1;
        this.total = 0;
      }
    }
  };
</script>
<style lang="scss">
  .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 64px;
  }

  .sub-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 48px;
    padding-left: 32px;
  }

  .content {
    padding-left: 32px;
    font-size: 12px;
  }
  .i-head-content div{
    height: 22px;
  }
  .i-content{
    font-size: 12px;
  }

  .dev-main {
    margin: 0 auto;
    padding: 37px 9px 20px 23px;
    background: white;
    width: 1000px;

    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .dev-main > div {
    float: left;
  }

  .dev-left {
    width: 112px;
    text-align: center;
  }

  .state-of {
    display: inline-block;
    background: rgba(243, 243, 243, 1);
    font-size: 14px;
    color: #888888;
    padding: 3px 11px;
  }

  .dev-left p {
    padding: 3px 0;
  }

  .dev-center {
    width: 594px;
  }

  .dev-right {
    width: 260px;
  }

  .dev-detail {
    border-left: 1px solid #e0e0e0;
    padding: 3px 0 3px 19px;
  }

  .dev-detail > p {
    padding-top: 3px;
    padding-right: 10px;
    font-size: 13px;
    color: #505050;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dev-head {
    width: 74px;
    border-radius: 50%;
    overflow: hidden;
  }

  .dev-mark {
    margin-right: 22px;
  }

  .dev-mark > span {
    float: left;
    padding: 2px 9px;
    color: #888888;
    font-size: 14px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    margin-right: 7px;
    height: 23px;
    line-height: 18px;
  }

  .dev-mark .dev-dark {
    float: left;
    padding: 2px 9px;
    color: white;
    font-size: 14px;
    background: #999999;
    border: 1px solid #999999;
    border-radius: 2px;
    margin-right: 7px;
  }

  .dev-infor {
    padding-top: 2px;
  }

  .dev-infor > p {
    padding-top: 3px;
    padding-right: 10px;
    font-size: 13px;
    color: #505050;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .clear::after {
    display: block;
    clear: both;
    content: "";
  }

  .inlineb {
    display: inline-block;
  }

  .floatl {
    float: left;
  }

  .floatr {
    float: right;
  }

  .income span {
    margin-left: 20px;
  }
</style>