进步积分

src/api/ProgressiveIntegral/index.js

@@ -0,0 +1,36 @@
+/**
+ * @Description: 
+ * @Author: gcz
+ * @Date: 2022-08-26 10:48:12
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-26 10:49:40
+ * @FilePath: \veterans_client_web\src\api\ProgressiveIntegral\index.js
+ * @Copyright: Copyright (c) 2016~2022 by gcz, All Rights Reserved. 
+ */
+import request from '@/utils/request'
+/**
+ * 积分统计
+ * @param {*} params
+ * @returns
+ */
+export function getIntegralCount(params) {
+  return request({
+    url: '/app/integral/count',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 积分列表
+ * @param {*} params
+ * @returns
+ */
+export function getIntegralList(params) {
+  return request({
+    url: '/app/integral/list',
+    method: 'get',
+    params
+  })
+}
+
+

src/views/PersonalCenter/ProgressPoints/ProgressPointsIndex.vue

@@ -2,11 +2,294 @@
  * @Description: 进步积分
  * @Author: 空白格
  * @Date: 2022-08-24 10:06:50
- * @LastEditors: 空白格
- * @LastEditTime: 2022-08-24 10:06:50
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-08-26 14:20:56
  * @FilePath: \veterans_client_web\src\views\PersonalCenter\ProgressPoints\ProgressPointsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div>进步积分</div>
+  <div class="">
+    <section class="banner">
+      <div class="total">{{totalCount}}</div>
+      <div class="sub-title">
+        <img src="@/assets/images/progresspoints-title.png" alt="">
+        <span class="text">累计获得积分</span>
+        <img src="@/assets/images/progresspoints-title.png" alt="">
+      </div>
+      <div class="behavior">
+        <span class="item" v-for="(item, index) in behaviorList" :key="index">
+					<b class="num">{{ item.count }}</b>个{{ item.type == 1 ? '加' : '减' }}分行为</span>
+      </div>
+    </section>
+    <section class="wrap">
+      <section class="explain">
+        <div class="top u-flex u-row-between">
+          <div class="title">获得进步积分可以</div>
+          <div class="link" @click="jumpPage('/personalcenter/progresspoints/integralrule')">积分规则 ></div>
+        </div>
+        <div class="explain-list u-flex u-row-between">
+          <div class="list-item u-flex u-row-between">
+            <div class="text">
+              <div class="han">推荐工作</div>
+              <div class="en">Recommended work</div>
+            </div>
+            <img src="@/assets/images/progresspoints-good.png" alt="">
+          </div>
+          <div class="list-item u-flex u-row-between">
+            <div class="text">
+              <div class="han">优先分班</div>
+              <div class="en">priority placement</div>
+            </div>
+            <img src="@/assets/images/progresspoints-class.png" alt="">
+          </div> 
+          <div class="list-item u-flex u-row-between">
+            <div class="text">
+              <div class="han">专家辅导</div>
+              <div class="en">Expert guidance</div>
+            </div>
+            <img src="@/assets/images/progresspoints-home.png" alt="">
+          </div>       
+        </div>
+      </section>
+    </section>
+    <section class="wrap">
+        <div class="integral-list">
+          <div class="integral-list-item u-flex u-row-between" v-for="(item,index) in integralList" :key="index">
+            <div class="left">
+              <div class="name u-line-1">{{ item.remark }}</div>
+              <div class="time">{{ item.createTime }}</div>
+            </div>
+            <div class="right">
+              <div v-if="item.type === 1">+{{ item.integral }}</div>
+							<div v-else class="reduce">-{{ item.integral }}</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>
+        <el-empty description="列表数据为空" v-else></el-empty>
+    </section>
+    
+  </div>
 </template>
+
+<script>
+import { getIntegralCount, getIntegralList } from "@/api/ProgressiveIntegral";
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      // 积分列表
+      integralList: [],
+      // 积分行为
+      behaviorList: [],
+      // 总分
+      totalCount: 0,
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.handleGetIntegralCount();
+    this.handleGetIntegralList();
+  },
+  methods: {
+    handleGetIntegralCount() {
+      getIntegralCount().then((res) => {
+        let list = []
+						res.data.forEach(item => {
+							if (item.type == 0) {
+								const obj = {
+									type: 1, count: 0, total: 0
+								}
+								if (res.data.length == 1) {
+									list.push(obj)
+								}
+							} else  if (item.type == 1) {
+								const obj = {
+									type: 0, count: 0, total: 0
+								}
+								if (res.data.length == 1) {
+									list.push(obj)
+								}
+							}
+						});
+						if (list.length == 1) {
+							list = list.concat(res.data)
+						}
+						this.behaviorList = list
+						// 计算总分
+						let total = 0
+						this.totalCount = res.data.reduce((total, item) => total + item.total, 0)
+      });
+    },
+    handleGetIntegralList() {
+      getIntegralList(this.queryParams).then((res) => {
+        this.integralList = res.rows;
+        this.total = Number(res.total);
+        // console.log("getIntegralCount", res);
+      });
+    },
+    /**
+     * 分页切换触发
+     * @date 2022-08-16
+     * @param {any} page
+     * @returns {any}
+     */
+    currentChange(page) {
+      this.queryParams.pageNum = page;
+      this.handleGetIntegralList();
+    },
+    /**
+     * 跳转到指定页面
+     * @date 2022-08-11
+     * @param {any} path
+     * @returns {any}
+     */
+    jumpPage(path, param) {
+      if (path) {
+        this.$router.push({ path: path, query: param });
+      }
+    },
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+.wrap{
+  width: 1200px;
+  margin: 0 auto;
+}
+.pagination {
+  padding-bottom: 24px;
+  text-align: center;
+  :deep(.el-pager .active) {
+    background-color: #ff3939;
+  }
+  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+    background-color: #ff3939;
+  }
+}
+.banner {
+  text-align: center;
+  position: relative;
+  height: 350px;
+  background: url(@/assets/images/progresspoints-bg.png) no-repeat;
+  background-position: top center;
+  color: #FFF;
+  .total{
+    font-family: PingFangSC-S0pxibold;
+    padding-top: 100px;
+    font-weight: 600;
+    font-size: 50px;
+    letter-spacing: 3.75px;
+    margin-bottom: 10px;
+  }
+  .sub-title{
+    font-size: 14px;
+    margin-bottom: 24px;
+    .text{
+      margin: 0 5px;
+    }
+    img{
+      vertical-align: middle;
+    }
+  }
+  .behavior{
+    .item{
+      display: inline-block;
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      background: rgba(255,255,255,.3);
+      padding: 0 24px;
+      border-radius: 5px;
+      font-size: 14px;
+      & + .item{
+        margin-left: 15px
+      };
+      .num{
+        font-size: 20px;
+        margin-right: 5px;
+        vertical-align: -2px;
+      }
+    }
+  }
+}
+.explain{
+  background: #fff;
+  padding: 20px;
+  margin: 20px auto;
+  .top{
+    margin-bottom: 20px;
+    .title{
+      font-size: 20px;
+      color: #393939;
+    }
+    .link{
+      background: rgba(239, 101, 31, .1);
+      padding: 0 20px;
+      color: rgb(239, 101, 31);
+      height: 26px;
+      line-height: 26px;
+      border-radius: 26px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+  .explain-list{
+    .list-item{
+      box-sizing: border-box;
+      width: 32%;
+      padding: 10px 20px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.10);
+      .han{
+        font-size: 20px;
+        color: #666;
+        margin-bottom: 5px;
+      }
+      .en{
+        font-size: 12px;
+        color: #ccc;
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+.integral-list{
+  background: #fff;
+  padding: 20px;
+  margin-bottom: 24px;
+  &-item{
+    padding: 10px 0;
+    border-bottom: 1px solid #DBDBDB;
+    .name{
+      font-size: 20px;
+      margin-bottom: 5px;
+    }
+    .time{
+      font-size: 12px;
+      color: #B2B2B2;
+    }
+    .right{
+      font-size: 30px;
+      color: #709078;
+      .reduce{
+        color: #EF651F;
+      }
+    }
+  }
+}
+</style>