初步完成tab3

houtai/src/apis/tab3.js

@@ -1,45 +1,41 @@
 import axios from '../utils/request'
-// 获取鹏城云脑-安防管理
-export const securityList = (data) => {
+// 获取列表
+export const studentList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/security/list',
+    url: '/cms/student/list',
     data
   })
 }
-// 修改
-export const securitySave = (data) => {
+// 排序
+export const studentSort = (id, sort) => {
   return axios({
-    method: 'post',
-    url: '/cms/security/save',
-    data
+    url: `/cms/student/sort/${id}/${sort}`
   })
 }
-// 监控画面-列表
-export const securityVideoList = (data) => {
+// 是否显示
+export const studentDisplay = (id, display) => {
   return axios({
-    method: 'post',
-    url: '/cms/security/video/list',
-    data
+    url: `/cms/student/display/${id}/${display}`
   })
 }
-// 监控画面-编辑-新增
-export const videoSave = (data) => {
+// 点击删除
+export const studentRemove = (id) => {
   return axios({
-    method: 'post',
-    url: '/cms/security/video/save',
-    data
+    url: `/cms/student/remove/${id}`
   })
 }
-// 监控画面-详情通过id
-export const videoDetailById = (id) => {
+// 新增、编辑
+export const studentSave = (data) => {
   return axios({
-    url: `/cms/security/video/detail/${id}`
+    method: 'post',
+    url: '/cms/student/save',
+    data
   })
 }
-// 删除
-export const videoRemove = (id) => {
+// 通过id获取详情
+export const studentDetail = (id) => {
   return axios({
-    url: `/cms/security/video/remove/${id}`
+    url: `/cms/student/detail/${id}`
   })
 }

houtai/src/views/tab1/index.vue

@@ -169,6 +169,8 @@ export default {
       this.formData.searchKey = ''
       this.formData.sortType = 0
       this.time = ''
+      this.formData.pageNum = 1
+      this.goodsList(this.formData)
     },
     // 点击查询
     searchBtn () {

houtai/src/views/tab1/tab1Look.vue

@@ -53,6 +53,7 @@
       <div class="row">
         <div>{{ conLeftId === "model" ? "实物图片" : "封面图片" }}：</div>
         <el-image
+          v-if="srcList.length!==0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"

houtai/src/views/tab2/index.vue

@@ -3,7 +3,9 @@
     <div class="insideTop">
       学院领导管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab2Add')">新增领导信息</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab2Add')"
+          >新增领导信息</el-button
+        >
       </div>
     </div>
     <div class="obstruct"></div>
@@ -63,8 +65,13 @@
             </template>
           </el-table-column>
           <el-table-column label="封面图片" width="120">
-            <template #default='{row}'>
-              <img class="table_img" :src="baseURL+row.thumb" alt="" :onerror="defaultImg" />
+            <template #default="{ row }">
+              <img
+                class="table_img"
+                :src="baseURL + row.thumb"
+                alt=""
+                :onerror="defaultImg"
+              />
             </template>
           </el-table-column>
           <el-table-column prop="visit" label="阅读"> </el-table-column>
@@ -73,22 +80,40 @@
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">
             <template #default="{ row }">
-              <el-input type="text" v-model="row.sort" @blur="changeSort(row.sort,row.id)"></el-input>
+              <el-input
+                type="text"
+                v-model="row.sort"
+                @blur="changeSort(row.sort, row.id)"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
+          <el-table-column label="是否显示">
             <template #default="{ row }">
-                <el-switch v-model="row.display" active-color="#b9412e" :active-value='1' :inactive-value='0' @change='changeSwit($event,row.id)'>
+              <el-switch
+                v-model="row.display"
+                active-color="#b9412e"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeSwit($event, row.id)"
+              >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="lookGood(row.id)"
-                >查看</el-button
+              <el-button type="text" @click="lookGood(row.id)">查看</el-button>
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="editLeader(row.id)"
+                >编辑</el-button
+              >
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="delLeader(row.id)"
+                >删除</el-button
               >
-              <el-button type="text" v-if="!row.display" @click="editLeader(row.id)">编辑</el-button>
-              <el-button type="text" v-if="!row.display" @click="delLeader(row.id)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -110,7 +135,12 @@
 
 <script>
 import axios from '@/utils/request'
-import { leaderList, leaderSort, leaderDisplay, leaderRemove } from '@/apis/tab2'
+import {
+  leaderList,
+  leaderSort,
+  leaderDisplay,
+  leaderRemove
+} from '@/apis/tab2'
 export default {
   name: 'tab2',
   components: {},
@@ -177,6 +207,8 @@ export default {
       this.formData.searchKey = ''
       this.formData.sortType = 0
       this.time = ''
+      this.formData.pageNum = 1
+      this.leaderList(this.formData)
     },
     // 点击查询
     searchBtn () {
@@ -201,7 +233,7 @@ export default {
         this.$message.success('操作成功')
         this.leaderList(this.formData)
       } else this.$message.warning(res.msg)
-    }, // 分页器方法
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
@@ -274,7 +306,7 @@ export default {
 <style lang='less' scoped>
 .tab2 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab2/tab2Add.vue

@@ -66,8 +66,8 @@
             v-model="time"
             type="monthrange"
             range-separator="-"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
           >
           </el-date-picker>
         </el-form-item>
@@ -137,7 +137,7 @@ export default {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }],
         sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
         politics: [{ required: true, message: '不能为空', trigger: 'change' }],
-        job: [{ required: true, message: '不能为空', trigger: 'change' }]
+        job: [{ required: true, message: '不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -161,7 +161,7 @@ export default {
         if (res.code === 0) {
           this.$message.success('操作成功')
           this.$router.push('/layout/tab2')
-        }
+        } else this.$message.warning(res.msg)
         // console.log(998, obj)
       } catch (error) {
         console.log(error)

houtai/src/views/tab2/tab2Look.vue

@@ -35,6 +35,7 @@
       <div class="row">
         <div>领导照片：</div>
         <el-image
+          v-if="srcList.length!==0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
@@ -61,6 +62,7 @@ export default {
   data () {
     // 这里存放数据
     return {
+      baseURL: '',
       myObj: {},
       time: '',
       srcList: []

houtai/src/views/tab3/index.vue

@@ -3,7 +3,9 @@
     <div class="insideTop">
       学籍管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab3Add')">新增学籍信息</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab3Add')"
+          >新增学籍信息</el-button
+        >
       </div>
     </div>
     <div class="obstruct"></div>
@@ -29,17 +31,17 @@
         ></el-input>
         <span class="search_k">排序：</span>
         <el-select
-          v-model="formData.type"
+          v-model="formData.sortType"
           placeholder="请选择"
           style="width: 240px"
         >
-          <el-option label="发布时间" value="time"></el-option>
-          <el-option label="排序编号" value="number"></el-option>
+          <el-option label="发布时间" :value="0"></el-option>
+          <el-option label="排序编号" :value="1"></el-option>
         </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
-          <el-button type="primary">查 询</el-button>
-          <el-button>重 置</el-button>
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+          <el-button @click="resetBtn">重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -54,41 +56,64 @@
           </el-table-column>
           <el-table-column label="姓名" width="200">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.name">{{ row.name }}</span>
             </template>
           </el-table-column>
           <el-table-column label="学籍号" width="200">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.num">{{ row.num }}</span>
             </template>
           </el-table-column>
           <el-table-column label="封面图片" width="120">
-            <template #default>
-              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            <template #default="{ row }">
+              <img
+                class="table_img"
+                :src="baseURL + row.thumb"
+                alt=""
+                :onerror="defaultImg"
+              />
             </template>
           </el-table-column>
-          <el-table-column prop="name1" label="阅读"> </el-table-column>
-          <el-table-column prop="name1" label="发布人"> </el-table-column>
-          <el-table-column prop="name2" label="发布时间" width="200">
+          <el-table-column prop="visit" label="阅读"> </el-table-column>
+          <el-table-column prop="creatorName" label="发布人"> </el-table-column>
+          <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">
             <template #default="{ row }">
-              <el-input type="text" v-model="row.name1"></el-input>
+              <el-input
+                type="text"
+                v-model="row.sort"
+                @blur="changeSort(row.sort, row.id)"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
+          <el-table-column label="是否显示">
             <template #default="{ row }">
-              <el-switch v-model="row.name3" active-color="#b9412e">
+              <el-switch
+                v-model="row.display"
+                active-color="#b9412e"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeSwit($event, row.id)"
+              >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="lookGood(row.id)"
-                >查看</el-button
+              <el-button type="text" @click="lookGood(row.id)">查看</el-button>
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="editLeader(row.id)"
+                >编辑</el-button
+              >
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="delLeader(row.id)"
+                >删除</el-button
               >
-              <el-button type="text" v-if="!row.name3">编辑</el-button>
-              <el-button type="text" v-if="!row.name3">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -109,36 +134,30 @@
 </template>
 
 <script>
+import {
+  studentList,
+  studentSort,
+  studentDisplay,
+  studentRemove
+} from '@/apis/tab3'
+import axios from '@/utils/request'
 export default {
   name: 'tab3',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        sortType: 0
       },
-      tableData: [
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -151,17 +170,79 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击编辑
+    editLeader (id) {
+      this.$router.push({
+        path: '/layout/tab3Add',
+        query: { id }
+      })
+    },
+    // 点击删除
+    delLeader (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await studentRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.studentList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }, // 点击开关
+    async changeSwit (val, id) {
+      const res = await studentDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.studentList(this.formData)
+      } else this.$message.warning(res.msg)
+      // console.log(998, val, id)
+    },
+    // 排序
+    async changeSort (val, id) {
+      // console.log(998, val, id)
+      if (Number(val) < 1) return this.$message.warning('不能小于1')
+      const res = await studentSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.studentList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+      this.formData.pageNum = 1
+      this.studentList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.studentList(this.formData)
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.studentList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.studentList(this.formData)
+    },
+    // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab3Look'
-        // query: { conLeftId: this.conLeft }
+        path: '/layout/tab3Look',
+        query: { id }
       })
     },
     // 时间处理----------------
@@ -196,10 +277,21 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表函数
+    async studentList (data) {
+      const res = await studentList(data)
+      console.log(998, res)
+      this.total = res.data.total
+      this.tableData = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.studentList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -214,7 +306,7 @@ export default {
 <style lang='less' scoped>
 .tab3 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab3/tab3Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab3Add">
     <div class="insideTop">
-      学籍管理 > 新增学籍信息
+      学籍管理 > {{ruleForm.id?'编辑':'新增'}}学籍信息
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -27,12 +27,12 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="性别：" prop="sex">
-          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
-          <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
+          <el-radio v-model="ruleForm.sex" label="M">男</el-radio>
+          <el-radio v-model="ruleForm.sex" label="F">女</el-radio>
         </el-form-item>
-        <el-form-item label="政治面貌：" prop="face">
+        <el-form-item label="政治面貌：" prop="politics">
           <el-select
-            v-model="ruleForm.face"
+            v-model="ruleForm.politics"
             placeholder="请选择"
             style="width: 500px"
           >
@@ -51,28 +51,28 @@
             <el-option label="群众" value="群众"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="学籍号：" prop="position">
+        <el-form-item label="学籍号：" prop="num">
           <el-input
-            v-model="ruleForm.position"
+            v-model="ruleForm.num"
             maxlength="25"
             show-word-limit
             style="width: 500px"
           ></el-input>
         </el-form-item>
-        <el-form-item label="专业：" prop="major">
+        <el-form-item label="专业：" prop="job">
           <el-input
-            v-model="ruleForm.major"
+            v-model="ruleForm.job"
             maxlength="25"
             show-word-limit
             style="width: 500px"
           ></el-input>
         </el-form-item>
-        <el-form-item label="任期：">
+        <el-form-item label="学年：">
           <i class="biaoshi biaoshi1"></i>
           <el-date-picker
             style="width: 500px"
             v-model="time"
-            type="daterange"
+            type="monthrange"
             range-separator="-"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
@@ -84,17 +84,17 @@
           <i class="biaoshi biaoshi2"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/student/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
             <div v-if="ruleForm.thumb" class="imgdiv">
               <img
-                style="width: 100%; height: 100%"
+                style="max-width: 200px; max-height: 200px;display: block;"
                 :src="baseURL + ruleForm.thumb"
               />
               <i
@@ -114,13 +114,15 @@
       <div id="div1" style="z-index: 1"></div>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary"  @click="saveLeader">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { studentSave, studentDetail } from '@/apis/tab3'
+import axios from '@/utils/request'
 import E from 'wangeditor'
 export default {
   name: 'tab3Add',
@@ -134,20 +136,18 @@ export default {
       token: '',
       ruleForm: {
         name: '',
-        sex: '1',
-        face: '',
-        position: '',
-        startTime: '',
-        endTime: '',
-        major: '',
+        sex: 'M',
+        politics: '',
+        num: '',
+        job: '',
         thumb: ''
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }],
         sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        face: [{ required: true, message: '不能为空', trigger: 'change' }],
-        position: [{ required: true, message: '不能为空', trigger: 'change' }],
-        major: [{ required: true, message: '不能为空', trigger: 'change' }]
+        politics: [{ required: true, message: '不能为空', trigger: 'change' }],
+        num: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        job: [{ required: true, message: '不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -155,17 +155,33 @@ export default {
   computed: {},
   // 监控data中的数据变化
   watch: {
-    time (val) {
-      this.handleSelect(val)
-    }
   },
   // 方法集合
   methods: {
+    // 点击保存
+    async saveLeader () {
+      if (this.ruleForm.thumb === '') { return this.$message.warning('图片不能为空') }
+      if (!this.time) { return this.$message.warning('学年不能为空') }
+      if (this.editor.txt.html() === '') { return this.$message.warning('校园动态不能为空') }
+      try {
+        await this.$refs.ruleForm.validate()
+        const obj = { ...this.ruleForm, description: this.editor.txt.html(), tenure: this.time[0] + ',' + this.time[1] }
+        const res = await studentSave(obj)
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          this.$router.push('/layout/tab3')
+        } else this.$message.warning(res.msg)
+        // console.log(998, obj)
+      } catch (error) {
+        console.log(error)
+        this.$message.warning('有字段不符合要求')
+      }
+    },
     // 上传图片
     beforethumbUpload (file) {
       // console.log(998, file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
+      const sizeOk = file.size / 1024 / 1024 < 20
       const typeOk =
         file.type === 'image/png' ||
         file.type === 'image/jpeg' ||
@@ -176,7 +192,7 @@ export default {
           this.$message.error('照片格式有误！')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过5M！')
+          this.$message.error('照片大小超过20M！')
           reject(file)
         } else if (file.name.length > 32) {
           this.$message.error('照片名字不能超过32个字！')
@@ -204,45 +220,17 @@ export default {
         .catch(() => {
           this.$message.info('已取消')
         })
-    },
-    // 时间处理----------------
-    handleSelect (e) {
-      const date = []
-      for (const i in e) {
-        date.push(this.gettime(e[i]))
-      }
-      this.ruleForm.startTime = date[0]
-      if (date[1]) {
-        this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
-      }
-      if (e === null) this.ruleForm.endTime = ''
-    },
-    gettime (data) {
-      const value =
-        data.getFullYear() +
-        '-' +
-        this.checkTime(data.getMonth() + 1) +
-        '-' +
-        this.checkTime(data.getDate()) +
-        ' ' +
-        this.checkTime(data.getHours()) +
-        ':' +
-        this.checkTime(data.getMinutes()) +
-        ':' +
-        this.checkTime(data.getSeconds())
-      return value
-    },
-    checkTime (i) {
-      if (i < 10) {
-        i = '0' + i
-      }
-      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
     // 初始化富文本
     // 富文本
     this.editor = new E('#div1')
@@ -264,7 +252,16 @@ export default {
     this.editor.config.uploadImgShowBase64 = true // 图片地址
     this.editor.config.showLinkVideo = false
     this.editor.create()
-    this.editor.txt.html('66666666666666666')
+    // 如果是编辑
+    if (this.$route.query.id) {
+      const res = await studentDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data
+      console.log(998, res)
+      // 富文本回显
+      this.editor.txt.html(res.data.description)
+      // 日期回显
+      this.time = res.data.tenure.split(',')
+    }
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -324,6 +321,16 @@ export default {
       width: 80px;
       margin: 15px auto 0;
     }
+    .imgdiv {
+      max-width: 200px;
+      max-height: 200px;
+      &>img{
+        border: 10px solid #ccc;
+      }
+    }
+    .el-icon-circle-close {
+      font-size: 24px;
+    }
   }
 }
 </style>

houtai/src/views/tab3/tab3Look.vue

@@ -14,31 +14,32 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>姓名：</div>
-        <span>某某某</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>性别：</div>
-        <span>男</span>
+        <span>{{myObj.sex==='M'?'男':'女'}}</span>
       </div>
       <div class="row">
         <div>政治面貌：</div>
-        <span>中共党员</span>
+        <span>{{myObj.politics}}</span>
       </div>
       <div class="row">
         <div>学籍号：</div>
-        <span>123051100544</span>
+        <span>{{myObj.num}}</span>
       </div>
       <div class="row">
         <div>专业：</div>
-        <span>机械自动化</span>
+        <span>{{myObj.job}}</span>
       </div>
       <div class="row">
-        <div>任期：</div>
-        <span>2010年10月-2019年6月</span>
+        <div>学年：</div>
+        <span>{{time}}</span>
       </div>
       <div class="row">
         <div>学生照片：</div>
         <el-image
+          v-if="srcList.length!==0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
@@ -47,25 +48,28 @@
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
       </div>
       <div class="con_top">校园动态</div>
-      <div id="div1">校园动态</div>
+      <div id="div1" v-html="myObj.description"></div>
     </div>
   </div>
 </template>
 
 <script>
+import moment from 'moment'
+import { studentDetail } from '@/apis/tab3'
+import axios from '@/utils/request'
 export default {
   name: 'tab3Look',
   components: {},
   data () {
     // 这里存放数据
     return {
-      value: true,
-      srcList: [
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
-      ]
+      baseURL: '',
+      myObj: {},
+      time: '',
+      srcList: []
     }
   },
   // 监听属性 类似于data概念
@@ -75,8 +79,18 @@ export default {
   // 方法集合
   methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await studentDetail(Number(this.$route.query.id))
+      this.myObj = res.data
+      this.srcList = [this.baseURL + res.data.thumb]
+      // 处理日期
+      this.time = moment((res.data.tenure.split(','))[0]).format('YYYY年MM月') + '-' + moment((res.data.tenure.split(','))[1]).format('YYYY年MM月')
+    }
+  }, // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前