ylrz_scrm_companyUI/src/views/qw/qwChat/userDetail/index.vue

<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      用户详情
    </div>

    <div class="contentx">
      <div class="desct">
        基本信息
      </div>
      <el-descriptions title="" :column="3" border>

        <el-descriptions-item label="会员id" >
          <span>{{item.userId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户昵称" >
          <span>{{item.nickname}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户头像" >
          <el-image v-if="item.avatar!=null"
                    style="width: 50px;"
                    :src="item.avatar">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="手机号码" >
          <span>{{item.phone}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="用户积分" >
          <span>{{item.integral}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="状态" >
             <span>
                   <dict-tag :options="userOptions" :value="item.status"/>
             </span>
        </el-descriptions-item>

        <el-descriptions-item label="上级昵称" >
          <span>{{item.tuiName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="上级手机号码" >
          <span>{{item.tuiPhone}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="推广员关联时间" >
          <span>{{item.tuiTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="下级人数" >
          <span>{{item.tuiUserCount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="最后一次登录ip" >
          <span>{{item.lastIp}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="余额" >
          <span>{{item.balance}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" >
          <span>{{item.createTime}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="更新时间" >
          <span>{{item.updateTime}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="contentx" v-if="item.userId != null" >
      <div class="desct">
        用户订单
      </div>
      <userStorerDetails  ref="userDetails" />
    </div>

    <div class="contentx" v-if="item.userId != null" >
      <div class="desct">
        用户看客记录
      </div>
      <userCourseWatchLog  ref="userWatchLog" />
    </div>
  </div>
</template>

<script>
import {getUserInfoBySessionId} from "@/api/users/user";
import userStorerDetails from "@/views/qw/qwChat/userDetail/userStorerDetails.vue"
import userCourseWatchLog from "@/views/qw/qwChat/userDetail/userCourseWatchLog.vue";

export default {
  name: "userDetail",
  components: {
    userStorerDetails,
    userCourseWatchLog
  },
  data() {
    return {
      userOptions: [],
      item: {},
    }
  },
  created() {
    this.getDicts("sys_user_status").then(response => {
      this.userOptions = response.data;
    });
  },
  methods: {
    getDetail(sessionId) {
      this.item = {}
      const params = {
        sessionId: sessionId
      }
      getUserInfoBySessionId(params).then(response => {
        this.item = response.data;
        if (this.item.userId != null) {
            setTimeout(() => {
              this.$refs.userDetails.getUserDetails(this.item.userId);
            }, 1);
          setTimeout(() => {
            this.$refs.userWatchLog.getUserWatchLog(this.item.userId);
          }, 1);
        }
      })
    },
  }
}
</script>
<style>

.contentx{
  height: 100%;
  background-color: #fff;
  padding: 0px 20px 20px;


  margin: 20px;
}
.el-descriptions-item__label.is-bordered-label{
  font-weight: normal;
}
.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}
.desct{
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}
</style>