导师详情

src/components/PlatformList/Tutors.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <div class="inner d-flex flex-wrap">
+    <div class="inner d-flex flex-wrap" v-if="lists && lists.length">
       <div
         :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
         :key="index"
         class="item-box"
-        v-for="(item, index) in list"
+        v-for="(item, index) in lists"
       >
-        <p @click="detail(item.id)" class="font-24 my-3" style="cursor: pointer">{{ item.name }}</p>
+        <p class="font-24 my-3" style="cursor: pointer">{{ item.name }}</p>
         <p
-          @click="detail(item.id)"
           class="font-16"
           style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
-        >编号：{{ item.identifier }}</p>
+        >所在单位：{{ item.company }}</p>
+        <p class="font-16" style="color: rgba(0, 0, 0, 0.45); cursor: pointer">职务：{{ item.duties }}</p>
         <p class="font-16 baseColor item-more">
-          <intention-model :btn-name="btnName" :type-data="getId(item.id)" style="cursor: pointer" />
+          <model :item="item" style="cursor: pointer" />
         </p>
       </div>
     </div>
@@ -36,10 +36,10 @@
 <script>
 import { mapMutations, mapState } from 'vuex';
 import { selTeacher } from 'config/api';
-import IntentionModel from '../Introduce/IntentionModel.vue';
+import Model from './components/Model.vue';
 export default {
   name: 'PlatformList',
-  components: { IntentionModel },
+  components: { Model },
   props: {
     fruitIpt: { type: String, default: '' },
     achList: { type: Array, default: () => [] },
@@ -48,7 +48,7 @@ export default {
 
   data() {
     return {
-      list: [],
+      lists: [],
       current: 1,
       pageSize: 12,
       total: 0,
@@ -83,6 +83,7 @@ export default {
      */
     async getData() {
       try {
+        this.lists = [];
         const params = {
           param: {
             pageNum: this.current,
@@ -95,24 +96,21 @@ export default {
         const res = await selTeacher(params);
         const { code, msg, data } = res.data;
         if (code === 200) {
-          this.list = data.list;
+          data.forEach(item => {
+            item.services.forEach(service => {
+              this.lists.push(service);
+            });
+          });
+
+          console.log('this.lists: ', this.lists);
           this.total = parseInt(data.total);
+        } else {
+          this.$message.error(msg || '获取失败');
         }
       } catch (error) {
         console.log(error);
       }
     },
-    // 点击查看详情
-    detail(id) {
-      this.setAchId(id);
-      this.$router.push('/NewPlatform/AchDet');
-    },
-    getId(Id) {
-      return (this.typeData = {
-        type: 2,
-        Id,
-      });
-    },
   },
 };
 </script>

src/components/PlatformList/components/Model.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <a-button @click="showModal">查看详情</a-button>
+    <a-modal
+      :confirm-loading="confirmLoading"
+      :visible="visible"
+      @cancel="handleCancel"
+      @ok="handleCancel"
+      title="详情"
+      width="40%"
+    >
+      <a-form :form="form">
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="公司名称"
+        >
+          <span>{{ item.company || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="职务/职称"
+        >
+          <span>{{ item.duties || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="姓名"
+        >
+          <span>{{ item.name || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="性别"
+        >
+          <span>{{ item.sex || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="照片"
+        >
+          <img
+            :src="item.teacherPhoto"
+            style="width: 100%; cursor: pointer"
+            v-if="item.teacherPhoto"
+          />
+          <span v-else>暂无</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="简介"
+        >
+          <span>{{ item.intro || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="服务案例"
+        >
+          <span>{{ item.serviceCase || '暂无' }}</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="分类"
+        >
+          <span v-if="item.categoryList && item.categoryList.length">
+            <span :key="index" v-for="(category,index) in item.categoryList">{{ category }}</span>
+          </span>
+          <span v-else>暂无</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="聘书"
+        >
+          <img :src="item.offer" style="width: 100%; cursor: pointer" v-if="item.offer" />
+          <span v-else>暂无</span>
+        </a-form-item>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="简历"
+        >
+          <img :src="item.resume" style="width: 100%; cursor: pointer" v-if="item.resume" />
+          <span v-else>暂无</span>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+const formItemLayout = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 18 },
+};
+const formTailLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18, offset: 6 },
+};
+export default {
+  name: 'Model',
+  props: {
+    item: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'submit' }),
+      visible: false,
+      formItemLayout,
+      formTailLayout,
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    // 显示表单输入框
+    showModal() {
+      this.visible = true;
+    },
+    // 取消显示
+    handleCancel(e) {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.must-color {
+  color: red;
+}
+
+.code_img {
+  height: 32px;
+  width: 120px;
+}
+</style>