crowd-test-service-frontend/src/pages/DetailPage/ExpertDetail.vue

<template>
  <div class="create-container">
    <div class="create-body" v-loading="loading">
      <el-form :model="expert" label-width="12%" class="demo">
        <el-form-item label="用户名称" prop="name">
          <span>{{expert.name}}</span>
        </el-form-item>
        <el-form-item label="用户图标" prop="photo">
          <!--          <span  class="badge">{{expert.photo}}</span>-->
          <img :src="expert.photo" style="width: 50px; height: 50px;"/>
        </el-form-item>
<!--        <el-form-item label="性别" prop="count">-->
<!--          <span>{{expert.gender}}</span>-->
<!--        </el-form-item>-->
        <el-form-item label="简介" prop="address">
          <span class="badge">{{expert.introduction}}</span>
        </el-form-item>
<!--        <el-form-item label="接包次数" prop="count">-->
<!--          <span>{{expert.taskCount}}</span>-->
<!--        </el-form-item>-->
        <el-form-item>
          <div class="btn btn-medium" @click="back()">返回</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    import Http from '@/js/http.js'
    import Apis from '@/js/api.js'
    import {notify} from '@/constants/index'
    import {getAllReportTypes, storageGet} from '@/js/index'

    export default {
        name: 'ExpertDetail',
        components: {},
        data() {
            return {
                expert: {},
                loading: false,
                id: 0,
                expert: {
                    name: '',
                    photo: '',
                    introduction: '',
                    // gender: '',
                },
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            init() {
                this.id = this.$route.params.id
                this.loadData()
            },
            back() {
                this.$router.push({
                    name: 'ExpertList'
                })
            },
            loadData() {
                this.showLoading()
                Http.get(Apis.EXPERT.GET_DETAIL.replace('{id}', this.id)).then((res) => {
                    console.log(res)
                    this.expert.name = res.data.name
                    this.expert.photo = res.data.photo
                    // this.expert.gender = res.data.gender
                    this.expert.introduction = res.data.introduction
                    // this.expert.address = res.data.address
                    this.hideLoading()
                }).catch((error) => {
                    this.hideLoading()
                    notify('error', '打开详情失败:' + error.data)
                })
            },
            setUserInfo() {
                this.expert = storageGet('expert')
            },
            showLoading() {
                this.loading = true
            },
            hideLoading() {
                this.loading = false
            }
        },
        watch: {
            expertType(val) {
                this.expertType = val
            }
        }
    }
</script>

<style>
  .demo {
    font-size: 32px;
  }

  .el-form-item {
    max-height: 120px !important;
    overflow: auto;
  }
</style>