我的评价页面实现

src/api/PersonalCenter/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-15 14:26:14
  * @LastEditors: wangcc
- * @LastEditTime: 2022-08-24 18:01:54
+ * @LastEditTime: 2022-08-25 11:02:34
  * @FilePath: \veterans_client_web\src\api\PersonalCenter\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
@@ -72,4 +72,17 @@ export function getIdInfo(params) {
     method: 'get',
     params
   })
+}
+
+/**
+ * 查询我的面试列表
+ * @param {*} params
+ * @returns
+ */
+ export function myInterviewList(params) {
+  return request({
+    url: '/app/delivery/myInterviewList',
+    method: 'get',
+    params
+  })
 }

src/views/PersonalCenter/Evaluate/EvaluateIndex.vue

@@ -2,11 +2,342 @@
  * @Description: 我的评价
  * @Author: 空白格
  * @Date: 2022-08-24 10:00:07
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-24 10:00:07
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-08-25 14:33:46
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\Evaluate\EvaluateIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>我的评价</div>
+  <div>
+    <banner title="我的评价" :breadcrumb="false"></banner>
+    <div class="breadcrumb">
+      <div class="_container">
+        <div class="banner-breadcrumb-breadcrumb">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/personalcenter'}">我的</el-breadcrumb-item>
+            <el-breadcrumb-item>我的评价</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+    </div>
+    <div class="deliverBox">
+      <div class="_container">
+        <div class="box-list">
+          <h1>全部评价</h1>
+          <div style="display:table">
+            <div class="deliverList-box">
+              <div class="line"></div>
+              <h3 class="title-h3">电子技术课程</h3>
+              <div class="deliver">
+                <div class="log">
+                  <img src="@/assets/images/log.png" alt />
+                </div>
+                <div class="center">
+                  <h3>王珊珊</h3>
+                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
+                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
+                </div>
+                <div class="right-box">
+                  <span class="time">2020.8.24</span>
+                </div>
+              </div>
+            </div>
+            <div class="deliverList-box">
+              <div class="line"></div>
+              <h3 class="title-h3">电子技术课程</h3>
+              <div class="deliver">
+                <div class="log">
+                  <img src="@/assets/images/log.png" alt />
+                </div>
+                <div class="center">
+                  <h3>王珊珊</h3>
+                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
+                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
+                </div>
+                <div class="right-box">
+                  <span class="time">2020.8.24</span>
+                </div>
+              </div>
+            </div>
+            <div class="deliverList-box">
+              <div class="line"></div>
+              <h3 class="title-h3">电子技术课程</h3>
+              <div class="deliver">
+                <div class="log">
+                  <img src="@/assets/images/log.png" alt />
+                </div>
+                <div class="center">
+                  <h3>王珊珊</h3>
+                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
+                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
+                </div>
+                <div class="right-box">
+                  <span class="time">2020.8.24</span>
+                </div>
+              </div>
+            </div>
+            <div class="deliverList-box">
+              <div class="line"></div>
+              <h3 class="title-h3">电子技术课程</h3>
+              <div class="deliver">
+                <div class="log">
+                  <img src="@/assets/images/log.png" alt />
+                </div>
+                <div class="center">
+                  <h3>王珊珊</h3>
+                  <el-rate v-model="value" disabled text-color="#ff9900"></el-rate>
+                  <p class="comment">老师讲课很生动，学到了很多东西，学了又想学，西，学了又想学西，学了又想学西，学了又想学</p>
+                </div>
+                <div class="right-box">
+                  <span class="time">2020.8.24</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="pagination" v-if="total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="queryParams.pageSize"
+              :total="total"
+              @current-change="currentChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import banner from '@/components/BannerBreadcrumb/index.vue';
+export default {
+  name: 'EvaluateIndex',
+  components: { banner },
+  data() {
+    return {
+      value: 3,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        schoolName: undefined
+      },
+      total: 0,
+      loading: false,
+    };
+  },
+  methods: {
+    /**
+     * 分页切换触发
+     * @date 2022-08-16
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getList();
+    },
+    /**
+     * 获取列表
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getList() {
+      this.loading = true;
+      // myInterviewList(this.queryParams).then((res) => {
+      //   this.deliverList = res.rows;
+      //   this.total = Number(res.total);
+      //   this.loading = false;
+      // });
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+._container {
+  width: 1200px !important;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  max-width: none !important;
+}
+._container:after,
+._container:before {
+  display: table;
+  content: ' ';
+  clear: both;
+}
+.breadcrumb {
+  background-color: #f5f7fa;
+  height: 70px;
+  display: flex;
+  align-items: center;
+}
+.banner-breadcrumb-breadcrumb {
+  .el-breadcrumb {
+    font-size: 18px;
+  }
+  :deep(.el-breadcrumb__inner.is-link) {
+    color: #7e7e7e;
+    font-weight: normal;
+  }
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #ff0000;
+  }
+}
+.box-list {
+  background-color: #fff;
+  padding: 10px 0 80px 0;
+  display: table;
+  width: 100%;
+  h1 {
+    color: #222222;
+    font-size: 26px;
+    margin: 19px 20px;
+  }
+  .deliver {
+    cursor: pointer;
+    width: 100%;
+    height: 93px;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    float: left;
+    .log {
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #e2e2e2;
+      border-radius: 4px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .center {
+      width: 340px;
+      h3 {
+        color: #1a1a1a;
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-family: 'SourceHanSansCN';
+      }
+      p {
+        color: #666666;
+        font-size: 14px;
+        line-height: 20px;
+        .meta_cell {
+          display: inline-block;
+          margin-right: 5px;
+        }
+        .meta_cell:after {
+          padding: 0 1px 0 4px;
+          display: inline-block;
+          color: #919090;
+          content: '|';
+        }
+        .meta_cell:last-child:after {
+          content: '';
+        }
+      }
+      .comment {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .right-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: right;
+      span {
+        text-align: right;
+      }
+      .pir {
+        color: #ef651f;
+        font-size: 20px;
+      }
+      .time {
+        color: #999999;
+        font-size: 14px;
+        margin-top: 56px;
+      }
+      .postStatus {
+        line-height: 40px;
+        color: #0f0f0f;
+      }
+    }
+  }
+}
+.pagination {
+  text-align: center;
+  margin-top: 20px;
+  :deep(.el-pager .active) {
+    background-color: #ff3939;
+  }
+  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+    background-color: #ff3939;
+  }
+}
+.deliverList-box {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 0, 0, 0.11);
+  padding: 10px 20px;
+  margin: 10px 20px;
+  transition: 0.5s;
+  border-radius: 3px;
+  width: 518px;
+  position: relative;
+  float: left;
+  .title-h3 {
+    color: #222222;
+    line-height: 40px;
+    font-size: 20px;
+  }
+  .line {
+    width: 4px;
+    height: 30px;
+    position: absolute;
+    background-color: #ef651f;
+    left: 0;
+    top: 16px;
+  }
+}
+.deliverList-box:hover {
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
+}
+.interview-state {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ccc;
+  line-height: 50px;
+  font-size: 22px;
+  color: #3ca7fe;
+  .grey {
+    color: #999999;
+  }
+  .green {
+    color: #709078;
+  }
+  .red {
+    color: #ff3939;
+  }
+}
+.button-btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+.video {
+  width: 200px;
+}
+</style>
+

src/views/PersonalCenter/Interview/InterviewIndex.vue

@@ -2,11 +2,312 @@
  * @Description: 我的面试
  * @Author: 空白格
  * @Date: 2022-08-24 09:56:29
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-24 09:56:29
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-08-25 12:00:37
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\Interview\InterviewIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>我的面试</div>
+  <div>
+    <banner title="我的面试" :breadcrumb="false"></banner>
+    <div class="breadcrumb">
+      <div class="_container">
+        <div class="banner-breadcrumb-breadcrumb">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/personalcenter'}">我的</el-breadcrumb-item>
+            <el-breadcrumb-item>我的面试</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+    </div>
+    <div class="deliverBox">
+      <div class="_container">
+        <div class="box-list">
+          <h1>全部面试</h1>
+          <div style="display:table">
+            <div class="deliverList-box" v-for="(item,index) in deliverList" :key="index">
+              <div class="interview-state">
+                <h3 v-if="item.status == 0">未查看</h3>
+                <h3 v-if="item.status == 10">已查看</h3>
+                <h3 v-if="item.status == 11" class="red">不合适</h3>
+                <h3 v-if="item.status == 20">已邀请面试</h3>
+                <h3 v-if="item.status == 30">已接收面试</h3>
+                <h3 v-if="item.status == 40" class="grey">已拒绝面试</h3>
+                <h3 v-if="item.status == 50" class="green">面试通过</h3>
+                <h3 v-if="item.status == 60" class="red">面试未通过</h3>
+                <h3 v-if="item.status == 70" class="grey">未参加面试</h3>
+                <h3 v-if="item.status == 80" class="grey">已拒绝入职</h3>
+                <span class="interview-time">{{item.updateTime.slice(0,10)}}</span>
+              </div>
+              <div class="deliver">
+                <div class="log">
+                  <img :src="item.companyLogoUrl" alt />
+                </div>
+                <div class="center">
+                  <h3>{{item.postName}}</h3>
+                  <p>
+                    <span class="meta_cell">{{item.provinceName}}</span>
+                    <span class="meta_cell" v-if="item.workYear == 0">经验不限</span>
+                    <span class="meta_cell" v-if="item.workYear == 1">1~3年</span>
+                    <span class="meta_cell" v-if="item.workYear == 2">3年以上</span>
+                    <span class="meta_cell" v-if="item.workYear == 3">5年以上</span>
+                    <span class="meta_cell" v-if="item.educationBg == 1">小学</span>
+                    <span class="meta_cell" v-if="item.educationBg == 2">初中</span>
+                    <span class="meta_cell" v-if="item.educationBg == 3">中专</span>
+                    <span class="meta_cell" v-if="item.educationBg == 4">高中</span>
+                    <span class="meta_cell" v-if="item.educationBg == 5">大专</span>
+                    <span class="meta_cell" v-if="item.educationBg == 6">本科</span>
+                    <span class="meta_cell" v-if="item.educationBg == 7">硕士</span>
+                    <span class="meta_cell" v-if="item.educationBg == 8">博士</span>
+                  </p>
+                  <p>{{item.companyName}}</p>
+                </div>
+                <div class="right-box">
+                  <span
+                    class="pir"
+                    v-if="item.postStatus == 1"
+                  >{{item.lowestSalary}}K-{{item.highestSalary}}K</span>
+                  <span class="postStatus" v-if="item.postStatus == 0">职位已下架</span>
+                  <span class="time">{{item.createTime.slice(0,10)}}</span>
+                </div>
+              </div>
+              <div class="button-btn"  v-if="item.status == 30">
+                <el-button size="medium" disabled type="primary" class="video">发起视频面试</el-button>
+              </div>
+            </div>
+          </div>
+          <div class="pagination" v-if="total">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="queryParams.pageSize"
+              :total="total"
+              @current-change="currentChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+import banner from '@/components/BannerBreadcrumb/index.vue';
+import { myInterviewList } from '@/api/PersonalCenter/index';
+export default {
+  name: 'DeliverIndex',
+  components: { banner },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        schoolName: undefined
+      },
+      total: 0,
+      loading: false,
+      deliverList: []
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /**
+     * 分页切换触发
+     * @date 2022-08-16
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.getList();
+    },
+    /**
+     * 获取列表
+     * @date 2022-08-11
+     * @returns {any}
+     */
+    getList() {
+      this.loading = true;
+      myInterviewList(this.queryParams).then((res) => {
+        this.deliverList = res.rows;
+        this.total = Number(res.total);
+        this.loading = false;
+      });
+    }
+    // detail(item) {
+    //   this.$router.push({
+    //     name: 'EnterprisePositionIndex',
+    //     query: { positionId: item.id }
+    //   });
+    // }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+._container {
+  width: 1200px !important;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  max-width: none !important;
+}
+._container:after,
+._container:before {
+  display: table;
+  content: ' ';
+  clear: both;
+}
+.breadcrumb {
+  background-color: #f5f7fa;
+  height: 70px;
+  display: flex;
+  align-items: center;
+}
+.banner-breadcrumb-breadcrumb {
+  .el-breadcrumb {
+    font-size: 18px;
+  }
+  :deep(.el-breadcrumb__inner.is-link) {
+    color: #7e7e7e;
+    font-weight: normal;
+  }
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #ff0000;
+  }
+}
+.box-list {
+  background-color: #fff;
+  padding: 10px 0 80px 0;
+  display: table;
+  width: 100%;
+  h1 {
+    color: #222222;
+    font-size: 26px;
+    margin: 19px 20px;
+  }
+  .deliver {
+    cursor: pointer;
+    width: 100%;
+    height: 93px;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    float: left;
+    .log {
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #e2e2e2;
+      border-radius: 4px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .center {
+      width: 340px;
+      h3 {
+        color: #1a1a1a;
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-family: 'SourceHanSansCN';
+      }
+      p {
+        color: #666666;
+        font-size: 14px;
+        line-height: 20px;
+        .meta_cell {
+          display: inline-block;
+          margin-right: 5px;
+        }
+        .meta_cell:after {
+          padding: 0 1px 0 4px;
+          display: inline-block;
+          color: #919090;
+          content: '|';
+        }
+        .meta_cell:last-child:after {
+          content: '';
+        }
+      }
+    }
+    .right-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: right;
+      span {
+        text-align: right;
+      }
+      .pir {
+        color: #ef651f;
+        font-size: 20px;
+      }
+      .time {
+        color: #999999;
+        font-size: 14px;
+      }
+      .postStatus {
+        line-height: 40px;
+        color: #0f0f0f;
+      }
+    }
+  }
+}
+.pagination {
+  text-align: center;
+  margin-top: 20px;
+  :deep(.el-pager .active) {
+    background-color: #ff3939;
+  }
+  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+    background-color: #ff3939;
+  }
+}
+.deliverList-box {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 0, 0, 0.11);
+  padding: 0 20px;
+  margin: 10px 20px;
+  transition: 0.5s;
+  border-radius: 3px;
+  width: 518px;
+  float: left;
+}
+.deliverList-box:hover {
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.11);
+}
+.interview-state {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed #ccc;
+  line-height: 50px;
+  font-size: 22px;
+  color: #3ca7fe;
+  .grey {
+    color: #999999;
+  }
+  .green {
+    color: #709078;
+  }
+  .red {
+    color: #ff3939;
+  }
+}
+.button-btn{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+.video {
+  width: 200px;
+}
+</style>