积分规则组件

src/components/RuleScopeSelector.vue

@@ -92,28 +92,49 @@
       </div>
     </template>
     <div class="container">
-      <scroller>
+<!--      <scroller>-->
+<!--        <van-cell-group inset>-->
+<!--          <van-cell-->
+<!--            v-for="(item,index) in list"-->
+<!--            :key="index"-->
+<!--            @click="onSelected(item)"-->
+<!--          >-->
+<!--            <template slot="label">-->
+<!--              <span class="record green" v-if="item.min_point <= 0">{{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>-->
+<!--              <span class="record red" v-if="item.min_point > 0">+ {{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>-->
+<!--              <span class="type">{{$getTypesName(item.pt_id)}}</span>-->
+<!--            </template>-->
+<!--            <template slot="icon">-->
+<!--              <van-checkbox v-model="item.selected" shape="square" style="margin-right: 0.16rem;" />-->
+<!--            </template>-->
+<!--            <template slot="title">-->
+<!--              <div class="item-remark">{{item.remark}}</div>-->
+<!--            </template>-->
+<!--          </van-cell>-->
+
+<!--        </van-cell-group>-->
+<!--        <div style="height: 1rem;"></div>-->
+<!--      </scroller>-->
+      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite" no-data-text="没有了噢" :list="pageList">
         <van-cell-group inset>
           <van-cell
-            v-for="(item,index) in list"
+            v-for="(item,index) in pageList"
             :key="index"
             @click="onSelected(item)"
           >
-            <template slot="label">
+            <template #label>
               <span class="record green" v-if="item.min_point <= 0">{{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
               <span class="record red" v-if="item.min_point > 0">+ {{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
               <span class="type">{{$getTypesName(item.pt_id)}}</span>
             </template>
-            <template slot="icon">
+            <template #icon>
               <van-checkbox v-model="item.selected" shape="square" style="margin-right: 0.16rem;" />
             </template>
-            <template slot="title">
+            <template #title>
               <div class="item-remark">{{item.remark}}</div>
             </template>
           </van-cell>
-
         </van-cell-group>
-        <div style="height: 1rem;"></div>
       </scroller>
     </div>
 
@@ -167,6 +188,8 @@
 </template>
 
 <script>
+import {_debounce} from "../utils/auth";
+
 export default {
   name:'RuleScopeSelector',
   props:{
@@ -200,7 +223,10 @@ export default {
       itemSelected:[],
       currentRuleId:0,
       keyword:'',
-      showRule:false
+      showRule:false,
+      page:1,
+      pageSize:10,
+      pageList:[],
     }
   },
   watch:{
@@ -217,20 +243,28 @@ export default {
         this.getRuleScope()
       }
     },
+    currentRuleId(v){
+      this.$refs.scroller.triggerPullToRefresh()
+    },
+    keyword:_debounce(function (v){
+      this.$refs.scroller.triggerPullToRefresh()
+    }),
+
+
   },
   computed:{
-    list(){
-      if (this.currentRuleId > 0){
-        if (!this.itemObject[`rule_${this.currentRuleId}`]) return []
-        this.items = []
-        this.initItems({1:this.itemObject[`rule_${this.currentRuleId}`]})
-      } else {
-        if (!this.itemObject) return []
-        this.items = []
-        this.initItems(this.itemObject)
-      }
-      return this.items.filter(item => this.keyword ? item.remark.indexOf(this.keyword) > -1 : true)
-    },
+    // list(){
+    //   if (this.currentRuleId > 0){
+    //     if (!this.itemObject[`rule_${this.currentRuleId}`]) return []
+    //     this.items = []
+    //     this.initItems({1:this.itemObject[`rule_${this.currentRuleId}`]})
+    //   } else {
+    //     if (!this.itemObject) return []
+    //     this.items = []
+    //     this.initItems(this.itemObject)
+    //   }
+    //   return this.items.filter(item => this.keyword ? item.remark.indexOf(this.keyword) > -1 : true)
+    // },
   },
   methods:{
     initItems(itemObj){
@@ -260,7 +294,8 @@ export default {
           if (res.data.code === 1){
             this.ruleTree = res.data.data.rule_tree
             this.itemObject = res.data.data.item_list
-            this.initItems(this.itemObject)
+            // this.initItems(this.itemObject)
+            this.$refs.scroller.triggerPullToRefresh()
           }
         })
     },
@@ -303,7 +338,61 @@ export default {
     clear(){
       this.itemSelected = []
       this.initItems(this.itemObject)
-    }
+    },
+    calculateItem(){
+      this.items = []
+      let itemObjects = []
+      if (!this.itemObject) return
+      if (this.currentRuleId > 0){
+        if (!this.itemObject[`rule_${this.currentRuleId}`]) {
+          this.items = []
+          return
+        }
+        itemObjects = {1:this.itemObject[`rule_${this.currentRuleId}`]}
+      } else {
+        itemObjects = this.itemObject
+      }
+      Object.values(itemObjects)
+        .forEach((item) => {
+          item.filter(record => this.keyword ? record.remark.indexOf(this.keyword) > -1 : true)
+            .forEach((record) => {
+              let temp = {
+                ...record,
+                selected:this.itemSelected.some(i => i.id === record.id)
+              }
+              this.items.push(temp)
+            })
+        })
+    },
+    calculatePage(callback){
+      if (this.items.length <= 0) {
+        this.pageList = []
+        return
+      }
+      let start = (this.page - 1) * this.pageSize
+      let end = start + this.pageSize
+
+      let appends = this.items.slice(start,end)
+
+      if (this.page === 1){
+        this.pageList= appends
+      }else {
+        if (appends.length) this.pageList.splice(this.pageList.length,0,...appends)
+      }
+
+      if (typeof callback === 'function') callback(appends.length < this.pageSize)
+    },
+    onRefresh(done){
+      console.log('on refresh')
+      this.page = 1
+      this.calculateItem()      //计算需要展示的数据
+      this.calculatePage(done)
+    },
+    onInfinite(done){
+      console.log('on infinite')
+      this.page += 1
+      this.calculatePage(done)
+    },
   },
   mounted() {}
 }