|
|
@@ -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>
|
