crm/web/src/views/company/follow/info.vue

<template>
  <div>
    <el-row :gutter="20" class="detail">

      <el-col :span="24">
        <h3>基本信息</h3>
      </el-col>

      <el-col :span="24">
        <label>学校（校区）:</label> <span>{{ info.first_name }}</span>
      </el-col>

      <el-col :span="24">
        <label>跟进关系人:</label>
        <el-table :data="[{second_name: info.second_name, weixin: info.weixin, phone: info.phone, position: info.position}]" style="width: 60%; margin-top: 10px">
          <el-table-column prop="second_name" label="姓名"  />
          <el-table-column prop="position" label="职位"  />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="weixin" label="微信号" />
        </el-table>
      </el-col>

      <el-col :span=24>
        <label>微信聊天记录:</label>
        <div style="margin-top: 10px">
          <el-image
              style="max-width: 100px; max-height: 180px; margin-right: 10px"
              v-for="(url, index) in info.chat_imgs"
              :key="index"
              :src="url + '!max100'"
              show-progress
              :initial-index="index"
              :preview-src-list="info.chat_imgs"
              fit="cover"
              previewTeleported
          />
        </div>
      </el-col>

      <el-col :span="24">
        <label>跟进记录详情:</label>
        <ElCard shadow="never" v-html="info.detail" style="padding: 10px; margin-top: 20px"/>
      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts">
// 初始化表单数据
import {followApi} from "@/api/followApi";
import {onMounted} from "vue";

const DefaultData = <Api.Follow.FollowInfo>{
  id: 0,
  chat_imgs: [],
  detail: '',
  create_date: '',
  first_name: '', //
  second_name: '', //
  user_name: '', //
  avatar:'',
  phone: '', // 手机号,
  weixin: '', // 微信号,
  position: '', // 职位,
}
const info = reactive<Api.Follow.FollowInfo>({ ...DefaultData })
onMounted(() => {
  followApi.companyInfo(parseInt(useRoute().query.id as string)).then((res) => {
    Object.assign(info, res)
  })
})
</script>

<style scoped>
.detail {
  padding-top: 20px;
  font-size: 14px;
  .el-col {
    margin-bottom: 30px;
    label {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
</style>