refactor: 手机端-国内/海外/企标重构-增加下拉加载功能

src/components/hzwlComponents/phone/PhoneScroll.vue

@@ -85,18 +85,27 @@ export default {
             this.bs.finishPullUp()
           })
 
+          this.bs.on('scroll', (x, y ,z) => {
+            console.log(x,y,z)
+          })
+
         } else {
           this.bs.refresh()
         }
       })
     },
+    scrollTo (x, y ,time, easing) {
+      if (this.bs) {
+        this.bs.scrollTo(x, y, time, easing)
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
 .scroll-wrapper {
-  height: calc(100vh - 131px);
+  /*height: calc(100vh - 131px);*/
   overflow: hidden;
   position: relative;
 }

src/pages/phone/components/standardSystemTree.vue

@@ -9,7 +9,7 @@
        :lazy="false"
        :show-checkbox="true"
        node-key="id"
-       :default-expanded-keys="[data[0].id]"
+       :default-expanded-keys="data.length > 0 ? [data[0].id] : []"
        :check-strictly="true"
        :expand-on-click-node="false"
        :check-on-click-node="true"

src/pages/phone/domesticStand/index.vue

@@ -0,0 +1,341 @@
+<template>
+  <div id="domestic-stand">
+    <div class="search-head">
+      <div class="head-title">
+        <span class="left-title" @click="back"> < </span>
+        <span class="right-title">{{titleName}}</span>
+      </div>
+      <div style="display: flex;align-items: center">
+        <van-search
+            style="flex: 1;padding-right: 0"
+            v-model="searchQuery.selectValue"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+        >
+          <template #action>
+            <div @click="onSearch">搜索</div>
+          </template>
+        </van-search>
+        <div @click="onChoose" style="color: #fff;padding: 10px 12px 0 0">
+          <van-icon name="filter-o" color="#fff"  />
+        </div>
+      </div>
+    </div>
+
+    <PhoneScroll
+        ref="scroll"
+        height="calc(100vh - 100px)"
+        :data="list"
+        :total="total"
+        :loading="loading"
+        :pullingUpHandler="pullingUpHandler">
+      <div style="padding-top: 10px">
+        <div class="card-content"
+             v-for="item in list"
+             :key="item.id"
+             @click="jumpDetails(item)">
+          <div class="standTitle">
+            <div v-if="$route.query.standType === 'POLICY'"  class="title">{{item.lawsNumber}}</div>
+            <div v-else class="title">{{ item.stand_code || item.numbershow }}</div>
+          </div>
+
+          <div class="standContent">
+            <div class="standState">{{(item.nameshow && item.nameshow !== '') ? item.nameshow : (item.standName && item.standName !== '') ? item.standName : item.standEnName }}</div>
+            <div class="standSubTime" v-if="$route.query.standType === 'POLICY'">标准状态:
+              <span v-if="lawsMap[item.lawsTextState] === '作废'"
+                    style="color: #F56C6C; padding-left: 5px;">
+                            {{ lawsMap[item.lawsTextState] }}
+               </span>
+              <span v-else-if="lawsMap[item.lawsTextState] === '参考' || lawsMap[item.lawsTextState] === '被代替' || lawsMap[item.lawsTextState] === '现行有效'"
+                    style="color: #35720B; padding-left: 5px;">
+                            {{ lawsMap[item.lawsTextState] }}
+               </span>
+              <span v-else style=" padding-left: 5px;">
+                            {{ lawsMap[item.lawsTextState] }}
+               </span>
+            </div>
+            <div class="standSubTime" v-else-if="$route.query.standType === 'bussstand'" >标准状态:
+              <span v-if="item.textStatusBussName === '废止'" style="color: #F56C6C; padding-left: 5px;"> {{ item.textStatusBussName }} </span>
+              <span v-else-if="item.textStatusBussName === '参考' || item.textStatusBussName === '被代替'" style="color: #35720B; padding-left: 5px;">{{ item.textStatusBussName }}</span>
+              <span v-else style=" padding-left: 5px;">{{ item.textStatusBussName }}</span>
+            </div>
+            <div class="standSubTime" v-else >标准状态:
+              <span v-if="textStatusMap[item.textStatus] === '废止'"
+                    style="color: #F56C6C; padding-left: 5px;">
+                            {{ textStatusMap[item.textStatus] }}
+               </span>
+              <span v-else-if="textStatusMap[item.textStatus] === '参考' || textStatusMap[item.textStatus] === '被代替'"
+                    style="color: #35720B; padding-left: 5px;">
+                            {{ textStatusMap[item.textStatus] }}
+               </span>
+              <span v-else style=" padding-left: 5px;">
+                            {{ textStatusMap[item.textStatus] }}
+               </span>
+            </div>
+          </div>
+
+          <div class="content-time">
+            <div style="margin-top: 10px">
+                  <span style="padding-left: 10px;min-width: 200px;">
+                    发布日期： {{ item.issueTime ? (item.issueTime !== '' ? $moment(item.issueTime).format("YYYY-MM-DD") : "          ") : "          " }}
+                  </span>
+              <span style="padding-left: 15px;" v-if="$route.query.standType === 'POLICY'">实施日期： {{item.XCXSSRQLAWS}}</span>
+              <span style="padding-left: 15px;" v-else-if="$route.query.standType === 'bussstand'">实施日期： {{item.putTime}}</span>
+              <span style="padding-left: 15px;" v-else>实施日期： {{item.SSRQ}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PhoneScroll>
+
+    <standardSystemPopup :init-keys="searchQuery.standSystem" @searchQuery="setSearchQuery" ref="standardSystemPopupRef" />
+  </div>
+</template>
+
+<script>
+import PhoneScroll from "@/components/hzwlComponents/phone/PhoneScroll";
+import standardSystemPopup from "../components/standardSystemPopup";
+
+export default {
+  name: "domesticStand",
+  components: {
+    PhoneScroll,
+    standardSystemPopup,
+  },
+  data () {
+    return {
+      titleName: '',
+      searchQuery: {
+        selectIndex: 'stand',
+        selectValue: '',
+        standSystem: [],
+        textStatus: '现行有效',
+        selectType: 'titleSearch',
+        standType: 'INLAND',
+        page: 1,
+        pageSize: 20
+      },
+      total: 0,
+      loading: false,
+      list: [],
+      url: {
+        searchSarBykey: 'search/searchCenter/searchSarBykey'
+      },
+      textStatusMap: {},
+      natureMap:{},
+      lawsMap:{},
+    }
+  },
+  created() {
+    switch (this.$route.query.standType) {
+      case 'INLAND':
+        this.titleName = '国内标准法规库'
+        break
+      case 'FOREIGN':
+        this.titleName = '海外标准法规库'
+        break
+      case 'bussstand':
+        this.titleName = '企业标准'
+        break
+      case 'POLICY':
+        this.titleName = '国内外政策库'
+        break
+    }
+    this.getDicTypeListCode()
+    this.getData()
+  },
+  methods: {
+    pullingUpHandler () {
+      if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) {
+        this.searchQuery.page = this.searchQuery.page + 1
+        this.getData()
+      }
+    },
+    onSearch () {
+      this.list = []
+      this.searchQuery.page = 1
+      // 返回顶部
+      this.$refs.scroll.scrollTo(0, 0)
+      this.getData()
+    },
+    getData () {
+      switch (this.$route.query.standType) {
+        case 'INLAND':
+          this.searchQuery.selectIndex = 'stand'
+          this.searchQuery.standType = 'INLAND'
+          break
+        case 'FOREIGN':
+          this.searchQuery.selectIndex = 'stand'
+          this.searchQuery.standType = 'FOREIGN'
+          break
+        case 'bussstand':
+          this.searchQuery.selectIndex = 'bussstand'
+          this.searchQuery.standType = 'bussstand'
+          break
+        case 'POLICY':
+          this.searchQuery.selectIndex = 'laws'
+          this.searchQuery.standType = 'laws'
+          break
+      }
+      const config = {
+        _this: this,
+        loading: 'loading'
+      }
+      this.$http._postData("search/searchCenter/searchSarBykey", this.searchQuery, config).then(res => {
+        if (res.ok) {
+          this.total = res.data.count
+
+          if (this.searchQuery.page === 1) {
+            this.list = res.data.list
+          } else {
+            this.list = [...this.list, ...res.data.list]
+          }
+        }
+      })
+    },
+    onChoose () {
+      this.$refs.standardSystemPopupRef.open()
+    },
+    setSearchQuery (searchQuery) {
+      this.searchQuery.standSystem = searchQuery.checkedKeys
+      this.searchQuery.textStatus = searchQuery.textStatusName
+      this.onSearch()
+    },
+    getDicTypeListCode () {
+      this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
+        this.dict = {...res.data}
+        this.setMap(this.dict.WBZTCLASS, 'textStatusMap')
+        this.setMap(this.dict.lawsTextState, 'lawsMap')
+        this.setMap(this.dict.SARPROPERTY, 'natureMap')
+      })
+    },
+    setMap(data, key) {
+      data.forEach(item => {
+        this.$set(this[key], item.value, item.label);
+      });
+    },
+    //返回上一个页面
+    back(){
+      this.$router.push('/phoneHome')
+    },
+    jumpDetails(item){
+      if (this.$route.query.standType === 'INLAND') {
+        this.$router.push({
+          name: 'domesticDetails',
+          query: {
+            id: item.id,
+            pageType: 'INLAND_STAND'
+          }
+        })
+      } else if (this.$route.query.standType === 'FOREIGN') {
+        this.$router.push({
+          name: 'domesticDetails',
+          query: {
+            id: item.id,
+            pageType: 'FOREIGN_STAND'
+          }
+        })
+      } else if (this.$route.query.standType === 'bussstand') {
+        this.$router.push({
+          name: 'domesticDetails',
+          query: {
+            id: item.id,
+            pageType: 'BUSS'
+          }
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+#domestic-stand {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #F6F6F6;
+
+  .search-head {
+    width: 100%;
+    height: 100px;
+    background: #3170A8;
+  }
+
+  .head-title {
+    color: #FFFFFF;
+    line-height: 40px;
+    font-size: 18px;
+
+  .left-title {
+    margin-left: 10px;
+  }
+
+  .right-title {
+    float: right;
+    margin-right: 34%;
+  }
+
+  }
+  .van-search {
+    background: #3170A8;
+    padding: 10px 12px 0 12px;
+  }
+
+  .van-search__content {
+    background: #8DB2D0;
+  }
+
+  .van-search__action {
+    color: #FFFFFF;
+  }
+}
+.card-content{
+  width: 95%;
+  height: auto;
+  margin: 10px;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
+  .standTitle{
+    .title{
+      font-size: 3.4vw;
+      color: #333333;
+      font-weight: 600;
+      height: auto;
+      line-height: 20px;
+      padding: 5px 10px;
+      text-align: left;
+      border-bottom: 1px solid #cccccc;
+    }
+  }
+  .standContent{
+    font-size: 3.4vw;
+    color: #333333;
+    font-weight: 500;
+    margin-top: 5px;
+    .standState{
+      height: auto;
+      padding-left: 10px;
+      line-height: 25px;
+    }
+    .standSubTime{
+      padding-left: 10px;
+      height: auto;
+      line-height: 25px;
+    }
+  }
+  .content-time{
+    font-size: 3.4vw;
+    width: 100%;
+    height: 35px;
+    margin-top: 5px;
+    border-top: 1px solid #cccccc;
+  }
+}
+.card-content:first-child{
+  margin-top: 0;
+}
+</style>

src/router/index.js

@@ -114,8 +114,11 @@ const routes = [
   {
     path: '/domesticStand',
     name: 'domesticStand',
+    component: () => import('@/pages/phone/domesticStand/index')
+    /*
     component: () =>
       import('@/pages/phone/domesticStand')
+     */
   },
   {
     path: '/domesticDetails',