Merge branch 'master' of http://gitlab.corp.qinqinxiaobao.com:9880/hrs_app_h5/bill

.env.development

 VUE_APP_OIDC_CONFIG = '{ "authority": "http://106.120.107.150:5000", "client_id": "teamix-team-manager-web-pc", "client_secret": "123456", "redirect_uri": "http://localhost:8080/callback.html", "response_type": "id_token token", "scope": "workapps.client api.workapps.user api.workapps.org api.workapps.open openid","post_logout_redirect_uri":"http://localhost:8080", "silent_redirect_uri": "http://localhost:8080/silent-renew-oidc.html", "automaticSilentRenew": true,"accessTokenExpiringNotificationTime":60,"filterProtocolClaims":true,"loadUserInfo":true }'
 
-VUE_APP_API_BASEURL = 'http://organization.test.hrs100.cn/api/hrs/'
+VUE_APP_API_BASEURL = 'http://organization.test.hrs100.cn:18080/api/user/'
 
 VUE_APP_PUBLIC_DIR='/'

src/api/More/index.js

 import { AjaxRequest } from "../index";
 import urls from "./urls";
+import token from "../../store/modules/token"
+
+const usermemberId = token.state.usermemberId;
+console.log('userid', usermemberId);
 
 export default {
 
     // get数据
-    async getData(comid, id, name) {
-        const url = `${urls.host}/${comid}/${urls.getData}/departments`
-        const params = { 'param1': id, 'param2': name };
-        return AjaxRequest.get(url, params);
-    },
-    async getMonth(comid, deptid, name) {
-        const url = `${urls.host}/${comid}/${urls.getMonth}/departments`
-        const params = { 'param1': deptid, 'param2': name };
-        return AjaxRequest.get(url, params);
+    async getMoreList() {
+        const url = urls.getMoreList(usermemberId);
+        return AjaxRequest.get(url);
     },
-    async getCycle(comid, deptid, name) {
-        const url = `${urls.host}/${comid}/${urls.getCycle}/departments`
-        const params = { 'param1': deptid, 'param2': name };
-        return AjaxRequest.get(url, params);
+    async getMoreSummary() {
+      const url = urls.getMoreSummary(usermemberId);
+        return AjaxRequest.get(url);
     },
 };

src/api/More/urls.js

+var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
+
 export default {
-    host: "/host",
-    getData: '/getdata',
-    getMonth: '/getmonth',
-    getCycle: '/getcycle'
-  };
\ No newline at end of file
+  getMoreList (usermemberId) {
+    let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/moresvc/receipt/list';
+    url = url.replace('{usermemberId}', usermemberId);
+    return url;
+  },
+  getMoreSummary (usermemberId) {
+    let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/moresvc/summary';
+    url = url.replace('{usermemberId}', usermemberId);
+    return url;
+  }
+};
+
+  // http://organization.test.hrs100.cn:18080/api/user/bill/account/206484/moresvc/receipt/list
+  // http://organization.test.hrs100.cn:18080/api/user/bill/account/206484/moresvc/summary
\ No newline at end of file

src/assets/js/MescrollMixins.js

+const MescrollMixins = {
+	data() {
+		mescroll: null
+	},
+	beforeRouteEnter(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
+		next(vm => {
+			// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
+			vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
+		})
+	},
+	beforeRouteLeave(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
+		// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
+		this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
+		next()
+	}
+}
+
+export default MescrollMixins

src/store/index.js

@@ -5,6 +5,7 @@ import oidcSettings from "../utils/oidcSettings";
 import bill from './modules/bill'
 import token from './modules/token'
 import any from './modules/any'
+import more from './modules/more'
 
 Vue.use(Vuex)
 
@@ -13,6 +14,7 @@ export default new Vuex.Store({
     bill,
     token,
     any,
+    more,
     oidc: vuexOidcCreateStoreModule(oidcSettings)
   }
 });

src/store/modules/more.js

+import types from "../types";
+import api from '../../api/More'
+
+let morelist = []
+let moreSummary = {}
+const state = { moreSummary, morelist }
+
+const getters = {
+  getMoreList (state) {
+    const temp = localStorage.getItem('morelist');
+    if (temp) {
+      state.morelist = JSON.parse(temp);
+    }
+    return state.morelist;
+  },
+  getMoreSummary (state) {
+    //state.summary = localStorage.getItem("bill_summary");
+    return state.moreSummary;
+  },
+}
+
+const mutations = {
+  [types.CHANGE_MORE_LIST] (state, morelist) {
+    state.morelist = morelist;
+    try {
+      localStorage.setItem("morelist", JSON.stringify(morelist));
+    } catch (error) { }
+  },
+  [types.CHANGE_MORE_SUMMARY] (state, moreSummary) {
+    state.moreSummary = moreSummary;
+    try {
+      localStorage.setItem("moreSummary", moreSummary);
+    } catch (error) { }
+  },
+}
+
+const actions = {
+  loadMoreList ({ commit }) {
+    return new Promise((resolve, reject) => {
+      api.getMoreList().then(res => {
+        if (res && res.status) {
+          morelist = res.data.list;
+          commit(types.CHANGE_MORE_LIST, morelist);
+          resolve(morelist)
+        } else {
+          reject(res.message);
+        }
+      })
+    });
+  },
+  loadMoreSummary ({ commit }) {
+    return new Promise((resolve, reject) => {
+      api.getMoreSummary().then(res => {
+        if (res && res.status) {
+          moreSummary = res.data;
+          commit(types.CHANGE_MORE_SUMMARY, moreSummary);
+          resolve(moreSummary);
+        } else {
+          reject(res.message)
+        }
+      })
+    });
+  }
+}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
\ No newline at end of file

src/store/types.js

@@ -8,6 +8,8 @@ const CHANGE_RECEIPT_LIST = 'CHANGE_RECEIPT_LIST';
 const CHANGE_RECEIPT_DETAIL = 'CHANGE_RECEIPT_DETAIL';
 const CHANGE_CURRENT_PERIOD='CHANGE_CURRENT_PERIOD';
 const CHANGE_CURRENT_BEGINDATE="CHANGE_CURRENT_BEGINDATE";
+const CHANGE_MORE_LIST="CHANGE_MORE_LIST";
+const CHANGE_MORE_SUMMARY="CHANGE_MORE_SUMMARY";
 export default {
     CHANGE_BILL_PERIOD,
     CHANGE_BILL_SUMMARY,
@@ -17,5 +19,7 @@ export default {
     CHANGE_RECEIPT_DETAIL,
     CHANGE_CURRENT_PERIOD,
     CHANGE_CURRENT_BEGINDATE,
+    CHANGE_MORE_LIST,
+    CHANGE_MORE_SUMMARY,
 }
 

src/views/Bill/record.vue

@@ -3,30 +3,27 @@
     <div class="header">
       <HeaderW :title="title" />
     </div>
+
+    <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
       <div class="container-wrap" id="container-wrap">
-      <!--公积金扣费-->
-      <div class="list">
+        <div class="list" v-for="(item, index) in dataList" :key="index">
           <div class="title">
-          <div class="title_info">公积金扣费</div>
-          <i>-160.00</i>
+            <div class="title_info">{{ item.feeType }}</div>
+            <i>{{ item.amount }}</i>
           </div>
           <p>
-          <span>11-20 12:20</span>
+            <span>{{ item.dateTime }}</span>
           </p>
         </div>
-      <mescroll-vue
-        ref="mescroll"
-        :up="mescrollUp"
-        @init="mescrollInit"
-        class="scrollView"
-      ></mescroll-vue>
       </div>
+    </mescroll-vue>
   </div>
 </template>
 
 <script>
 import { Icon } from "vant";
 import { HeaderW } from "@/components";
+import MescrollMixins from "../../assets/js/MescrollMixins.js";
 import MescrollVue from "mescroll.js/mescroll.vue";
 import { mapActions } from "vuex";
 export default {
@@ -35,58 +32,78 @@ export default {
     [Icon.name]: Icon,
     MescrollVue
   },
+  mixins: [MescrollMixins],
   data() {
     return {
       title: "11月资金记录",
-      data: {
-        index: 1,
-        size: 10,
-        length: 15,
-        list: [
-          {
-            feeType: "五险扣费",
-            dateTime: "2020-04-20 09:36:24",
-            amount: "-703.42"
-          },
-          {
-            feeType: "账单扣费",
-            dateTime: "2020-04-17 19:35:21",
-            amount: "-20.00"
-          }
-        ]
-      },
-      mescroll: null, // mescroll实例对象
       mescrollUp: {
-        // 上拉加载的配置.
-        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
-        //以下是一些常用的配置,当然不写也可以的.
+        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
         page: {
-          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
-          size: 10 //每页数据条数,默认10
+          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+          size: 10 // 每页数据的数量
         },
-        noMoreSize: 25, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
+        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
         toTop: {
-          //回到顶部按钮
-          src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
-          offset: 1000 //列表滚动1000px才显示回到顶部按钮
+          src: "./static/mescroll/mescroll-totop.png" // 回到顶部按钮的图片路径,支持网络图
         },
-        htmlContent:
-          '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容
         empty: {
-          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
-          warpId: "container-wrap", //父布局的id (1.3.5版本支持传入dom元素)
-          icon: "../../../assets/images/data-empty.png", //图标,默认null,支持网络图
-          tip: "暂无内容" //提示
+          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
+          warpId: "dataList", // 父布局的id;
+          icon: "./static/mescroll/mescroll-empty.png", // 图标,支持网络图
+          tip: "暂无相关数据~" // 提示
         },
-        htmlLoading:
-          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
-        htmlNodata: '<p class="upwarp-nodata">-- END --</p>' //无数据的布局
+        lazyLoad: {
+          use: true // 是否开启懒加载,默认false
+        }
       },
-      articleList: [] // 列表数据
+      dataList: []
     };
   },
   methods: {
     ...mapActions(["loadRecord"]),
+    // mescroll组件初始化的回调,可获取到mescroll对象
+    mescrollInit(mescroll) {
+      this.mescroll = mescroll;
+    },
+    upCallback(page, mescroll) {
+      this.loadRecord({ accountId: "2319680", page: page.num, pageSize: "10" }).then(
+        resdata => {
+          console.log(JSON.stringify(resdata));
+          let arr = resdata.list;
+          // 如果是第一页需手动制空列表
+          if (page.num === 1) this.dataList = [];
+          // 把请求到的数据添加到列表
+          this.dataList = this.dataList.concat(arr);
+          // 数据渲染成功后,隐藏下拉刷新的状态
+          this.$nextTick(() => {
+            mescroll.endSuccess(arr.length);
+          });
+        },
+        err => {
+          mescroll.endErr();
+        }
+      );
+      // 模拟联网
+      // this.getListDataFromNet(
+      //   this.pdType,
+      //   page.num,
+      //   page.size,
+      //   arr => {
+      //     // 如果是第一页需手动制空列表
+      //     if (page.num === 1) this.dataList = [];
+      //     // 把请求到的数据添加到列表
+      //     this.dataList = this.dataList.concat(arr);
+      //     // 数据渲染成功后,隐藏下拉刷新的状态
+      //     this.$nextTick(() => {
+      //       mescroll.endSuccess(arr.length);
+      //     });
+      //   },
+      //   () => {
+      //     // 联网异常,隐藏上拉和下拉的加载进度
+      //     mescroll.endErr();
+      //   }
+      // );
+    },
     onClickLeft() {
       console.log(1);
     },
@@ -125,13 +142,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.mescroll {
-  position: fixed;
-  padding-bottom: 1rem;
-  top: 2px;
-  bottom: 0;
-  height: auto;
-}
 .container-wrap {
   padding: 0 16px;
   .list {

src/views/More/detail.vue

@@ -4,24 +4,14 @@
       <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
     </div>
     <div class="container">
-      <div class="list">
+      <div class="list" v-for="(item, index) in list" :key="index">
         <div class="title">
-          <div class="title_info">{{data.base.service_type}}</div>
-          <i>{{data.base.base_fee}}</i>
+          <div class="title_info">{{ item.orderName }}</div>
+          <i>{{ item.dueAmount }}</i>
         </div>
         <p>
-          <span>截止扣费日期{{data.base.pay_time_date}}</span>
-          <i>{{data.base.status}}</i>
-        </p>
-      </div>
-      <div class="list">
-        <div class="title">
-          <div class="title_info">{{data.service.service_type}}</div>
-          <i>{{data.service.base_fee}}</i>
-        </div>
-        <p>
-          <span>截止扣费日期{{data.service.pay_time_date}}</span>
-          <i>{{data.service.status}}</i>
+          <span>截止扣费日期{{ item.dueDate }}</span>
+          <i>{{ item.statusDesc }}</i>
         </p>
       </div>
     </div>
@@ -30,6 +20,7 @@
 
 <script>
 import { NavBar, Icon } from "vant";
+import { mapGetters } from "vuex";
 export default {
   components: {
     [NavBar.name]: NavBar,
@@ -37,33 +28,24 @@ export default {
   },
   data() {
     return {
-      title: "详情",
-      data: {
-        base: {
-          service_type: "吴医生工商代理工本费",
-          base_fee: 400.0,
-          pay_time_date: "2019-12-20",
-          status: "已扣费"
-        },
-        service:{
-          service_type: "吴医生工商代理服务费",
-          base_fee: 200.0,
-          pay_time_date: "2019-12-20",
-          status: "未扣费"
-        }
-      }
+      title: "",
+      list: []
     };
   },
-  methods: {
-    onClickLeft() {
-      console.log(1);
+  computed: {
+    ...mapGetters(["getMoreList"])
   },
+  methods: {
     navLeftArrowClick() {
       this.$router.go(-1);
     }
   },
   mounted() {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
+    const index = parseInt(this.$route.query.index);
+    const name=this.$route.query.name;
+    this.title=name;
+    this.list = this.getMoreList[index].details;
   }
 };
 </script>

src/views/More/index.vue

@@ -10,11 +10,11 @@
           <div class="header_content">
             <div class="fund">
               <span>账户余额</span>
-              <i>{{data.balance}}</i>
+              <i>{{ summary.balance }}</i>
             </div>
             <div class="paid">
               <span>待付金额</span>
-              <i class="paid_color">{{data.toBePayAmount}}</i>
+              <i class="paid_color">{{ summary.waitPay }}</i>
             </div>
           </div>
           <div class="header_info">
@@ -22,7 +22,7 @@
               <img src alt />
               <span>充值</span>
             </div>
-            <div class="right" @click="toPage(2)">
+            <div class="right" @click="toPage()">
               <img src alt />
               <span>资金记录</span>
             </div>
@@ -30,18 +30,18 @@
         </div>
       </div>
       <div class="box">
-        <div class="list">
-          <div class="list_title" @click="toPage(3)">
-            <div class="title">{{data.detail.service_type}}</div>
+        <div class="list" v-for="(item, index) in list" :key="index">
+          <div class="list_title" @click="toNextPage(index, item.productName)">
+            <div class="title">{{ item.productName }}</div>
             <van-icon name="arrow" class="arrow_right" />
           </div>
           <p>
             <span>应付金额</span>
-            <i>{{data.detail.toPayAmount}}</i>
+            <i>{{ item.totalAmount }}</i>
           </p>
           <p>
             <span>待付金额</span>
-            <i>{{data.detail.toBePayAmount}}</i>
+            <i>{{ item.waitPayAmount }}</i>
           </p>
         </div>
       </div>
@@ -52,9 +52,7 @@
 <script>
 import { NavBar, Icon } from "vant";
 import { TabHeader } from "@/components";
-import MeScroll from 'mescroll.js'
-import 'mescroll.js/mescroll.min.css'
-
+import { mapActions } from "vuex";
 export default {
   components: {
     [Icon.name]: Icon,
@@ -62,41 +60,48 @@ export default {
   },
   data() {
     return {
-      title: "人事服务",
-      data:{
-        balance:0,
-        toBePayAmount:0,
-        detail:{
-          service_type:"吴医生工商代理",
-          toPayAmount:0,
-          toBePayAmount:0
-        }
+      title: "",
+      list: [],
+      summary: {
+        accountId: 0,
+        balance: 0,
+        waitPay: 0
       }
     };
   },
   methods: {
-    onClickLeft() {
-      console.log(1);
+    ...mapActions(["loadMoreList", "loadMoreSummary"]),
+    toPage() {
+      this.$router.push({ name: "billrecord" });
     },
-    toPage(flag) {
-      if(flag === 2){
-        this.$router.push({ name: "morerecord"});
-      }
-      if (flag === 3) {
-        this.$router.push({ name: "moredetail"});
+    toNextPage(index, name) {
+      this.$router.push({ name: "moredetail", query: { index, name } });
+    },
+    async getData() {
+      await this.loadMoreSummary().then(
+        data => {
+          this.summary = data;
+        },
+        err => {
+          console.log(err);
         }
-      
+      );
+      await this.loadMoreList().then(
+        data => {
+          this.list = data;
         },
-    getData() {
-      const res = null;
-      this.data.topay = res.money;
+        err => {
+          console.log(err);
+        }
+      );
     },
     navLeftArrowClick() {
       this.$router.go(-1);
     }
   },
-  mounted() {
+  async mounted() {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
+    await this.getData();
   }
 };
 </script>