说明：1、前端单词收藏夹页面根据后端分页实现无限滚动

2021-12-31 14:02:16 +08:00 · 2021-12-31 14:02:16 +08:00 · 30e193bcd4
parent 0b2edf4817
commit 30e193bcd4
4 changed files with 193 additions and 27 deletions
--- a/ruoyi-ui/src/api/business/english/word.js
+++ b/ruoyi-ui/src/api/business/english/word.js
@ -50,3 +50,12 @@ export function delWord(id) {
    method: 'delete'
  })
 }
+
+//查询收藏夹英语单词
+export function collectWord(query){
+  return request({
+    url: '/english/word/collect',
+    method: 'get',
+    params: query
+  })
+}
--- a/ruoyi-ui/src/views/business/english/word/collect.vue
+++ b/ruoyi-ui/src/views/business/english/word/collect.vue
@ -1,39 +1,188 @@
-<template>
-  <div class="infinite-list-wrapper" style="overflow:auto">
-    <ul
-      class="list"
-      v-infinite-scroll="load"
-      infinite-scroll-disabled="disabled">
-      <li v-for="i in count" class="list-item">{{ i }}</li>
-    </ul>
+<template xmlns="http://www.w3.org/1999/html">
+  <div class="sea_main_con test-5" @mouseenter="onMouseover" @mouseleave="onMouseout">
+    <div class="infinite-list-wrapper">
+      <ul
+        class="list"
+        v-infinite-scroll="loadMore"
+        infinite-scroll-disabled="disabled"
+        infinite-scroll-distance="20"
+      >
+        <el-row>
+          <el-col :span="8" v-for="(say, index) in sayLists" :key="index" class="item-img">
+            <el-card :body-style="{ padding: '0px' }">
+              <div style="padding: 14px;">
+                <span>

-
-    <p v-if="loading">加载中...</p>
+                  <el-tag type="info"
+                          size="medium"
+                  >英：{{ say.englishWord }}
+                  </el-tag>
+                </span>
+                <div class="bottom clearfix">
+                  <time class="time">
+                    <el-tag type="warning"
+                            size="medium"
+                            color=""
+                    >中：{{ say.chineseWord }}
+                    </el-tag>
+                  </time>
+                  <el-button icon="el-icon-search" circle class="button"></el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <!--</li>-->
+      </ul>
+      <div class="load_icon">
+        <p v-if="loading">加载中<i class="el-icon-loading"/></p>
+        <p v-if="noMore">没有更多了~~~~</p>
+      </div>
+    </div>
  </div>
 </template>

 <script>
+import {collectWord} from "@/api/business/english/word";
+
 export default {
-  name: "collect",
  data() {
    return {
-      count: 10,
-      loading: false
+      loading: false,
+      seen: true,
+      currentDate: new Date(),
+      sayLists: [],
+      // 每次请求回来的数据的个数
+      everyList: 1,
+
+      queryParams: {
+        pageNum: 1,
+        pageSize: 21
+      },
    }
  },
  computed: {
+    noMore() {
+      return this.everyList < 1;
+    },
    disabled() {
-      return this.loading
+      return this.loading || this.noMore
    }
  },
  methods: {
-    load() {
+    loadMore() {
      this.loading = true
      setTimeout(() => {
-        this.count += 2
+        // this.count += 2
+
+        collectWord(this.queryParams).then((response) => {
+          console.log(response.data)
+          this.everyList = response.data.records.length;
+          for (var i = 0; i < response.data.records.length; i++) {
+            this.sayLists.push(response.data.records[i])
+          }
+        }, (error) => {
+
+        })
+        this.queryParams.pageNum += 1;
        this.loading = false
-      }, 200)
+      }, 150)
+    },
+    onMouseover() {
+      this.seen = true;
+    },
+    onMouseout() {
+      this.seen = false;
    }
+
  }
 }
 </script>
+
+<style scoped class="scss">
+
+.item-img {
+  margin-left: 60px;
+  margin-top: 20px;
+}
+
+.sea_main_con {
+  width: 1002px;
+  height: 800px;
+  border: 1px #b8b7b7 solid;
+  overflow-y: scroll;
+  border-radius: 4px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2px;
+  margin-bottom: 5px;
+}
+
+.test-5::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+.test-5::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  background-color: rgb(103, 194, 58);
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.test-5::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #ededed;
+  border-radius: 10px;
+}
+
+.time {
+  font-size: 13px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.button {
+  padding: 0;
+  float: right;
+}
+
+.image {
+  width: 100%;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both
+}
+
+.el-col-8 {
+  width: 24.3%;
+}
+
+.load_icon {
+  width: 100%;
+  text-align: center;
+}
+</style>
--- a/ruoyi-ui/src/views/business/english/word/index.vue
+++ b/ruoyi-ui/src/views/business/english/word/index.vue
@ -85,6 +85,7 @@
        </el-button>
      </el-col>
      <el-col :span="1.5">
+        <router-link :to="'/openapi/english/collect/'" class="link-type">
        <el-button
          type="warning"
          plain
@ -93,10 +94,9 @@
          @click="handleCollect"
          v-hasPermi="['english:word:collect']"
        >
-          <router-link :to="'/openapi/english/collect/'" class="link-type">
            收藏夹
-          </router-link>
        </el-button>
+        </router-link>

      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@ -155,7 +155,7 @@

    <!-- 修改英语单词对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body >
-      <el-form ref="formEdit" :model="form" :rules="rulesEdit" label-width="80px">
+      <el-form ref="formEdit" :model="form" :rules="rulesEdit" label-width="80px" v-loading="loadingEdit">
        <el-form-item label="英语单词" prop="englishWord">
          <el-input v-model="form.englishWord" placeholder="请输入英语单词"/>
        </el-form-item>
@ -189,7 +189,7 @@
          </el-select>
        </el-form-item>
      </el-form>
-      <div slot="footer" class="dialog-footer" v-loading="loadingEdit">
+      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitFormEdit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
@ -197,7 +197,7 @@

    <!--添加英语对话框-->
    <el-dialog :title="title" :visible.sync="openAdd" width="500px" append-to-body>
-      <el-form ref="formAdd" :model="form" :rules="rulesAdd" label-width="80px">
+      <el-form ref="formAdd" :model="form" :rules="rulesAdd" label-width="80px" v-loading="loadingEdit">
        <el-form-item label="中英文" prop="content">
          <el-input v-model="form.content" placeholder="请输入中文或英文"/>
        </el-form-item>
@ -442,7 +442,10 @@ export default {
                this.loadingEdit= false
                this.open = false;
                this.getList();
+              }).catch(err =>{
+                this.loadingEdit= false
              });
+
            }
          }
        }
@ -453,11 +456,16 @@ export default {
      this.$refs["formAdd"].validate(valid => {
          if (valid) {
            if (this.form.id == null) {
+              this.loadingEdit= true
              addWord(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.openAdd = false;
+                this.loadingEdit= false
                this.getList();
+              }).catch(err =>{
+                this.loadingEdit= false
              });
+
            }
          }
        }
--- a/xjs-business/xjs-business-english/src/main/java/com/xjs/word/service/impl/EnglishWordServiceImpl.java
+++ b/xjs-business/xjs-business-english/src/main/java/com/xjs/word/service/impl/EnglishWordServiceImpl.java
@ -79,13 +79,13 @@ public class EnglishWordServiceImpl implements IEnglishWordService {
            if (Objects.isNull(r.getData().getErrorCode())) {
                //指定to为翻译字典转换的内容
                englishWord.setContent(r.getData().getTo());
-                //添加缓存到redis并设置7天有效时间
-                Map<String, Object> build = new HashMap<>();
-                build.put(hkey, englishWord);
-                redisService.setCacheMap(TRAN_DICT, build);
-                redisService.expire(TRAN_DICT, TRAN_DICT_EXPIRE, TimeUnit.DAYS);
            }
        }
+        //添加缓存到redis并设置7天有效时间
+        Map<String, Object> build = new HashMap<>();
+        build.put(hkey, englishWord);
+        redisService.setCacheMap(TRAN_DICT, build);
+        redisService.expire(TRAN_DICT, TRAN_DICT_EXPIRE, TimeUnit.DAYS);
        return englishWord;
    }