静态页面

package-lock.json

           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
           }
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
         }
       }
     },
         "vary": "~1.1.2"
       },
       "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        },
         "statuses": {
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "version": "6.9.4",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
+      "integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc="
     },
     "query-string": {
       "version": "4.3.4",
         "tough-cookie": "~2.4.3",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        }
       }
     },
     "request-promise-core": {

package.json

     "exports-loader": "^0.7.0",
     "js-md5": "^0.7.3",
     "md5": "^2.3.0",
+    "qs": "^6.9.4",
     "script-loader": "^0.7.2",
     "vant": "^2.10.3",
     "vue": "^2.5.2",

src/components/common/MainPageContainer/index.vue

       ''
     ]),
     ...mapUserActions([
-      'SignIn'
+      'SignIn',
+      'GetCurrentShopInfo'
     ]),
     Init () { // 初始化
       if (this.UserInfo === null) {
               // this.$router.push({ name: 'SignIn' })
             } else {
               this.$emit('UserInfoChange')
+              this.GetCurrentShopInfo().then(() => { // 获取当前店铺信息
+                this.$emit('ShopInfoChange')
+              })
             }
           }).catch(() => {
             // this.$router.push({ name: 'SignIn' })

src/pages/CaiMinGuanLi/CaiMinLieBiao/index.vue

   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`全部彩民`" :ShowMainHeaderBack="true">
       <div class="Content">
-        <scroller :on-refresh="Refresh">
+        <scroller :on-refresh="Refresh" :on-infinite="Infinite" ref="MyScroller">
           <div class="Container">
             <ul>
-              <li v-for="(item, index) in 15" :key="index" class="flex-h">
+              <li v-for="(item, index) in CurrentShopAllCustomer" :key="index" class="flex-h">
                 <div class="Icon">
                   <img src="" class="centerLabel cover" alt="">
                 </div>
                 <div class="flex-item">
                   <div>
-                    <span>叭叭叭</span>
-                    <span>2天前，下单2元未出票</span>
+                    <span>{{item.name}}</span>
+                    <span>{{ToolClass.DateFormat(item.createDate)}}</span>
                   </div>
                 </div>
-                <span>2.00</span>
+                <!-- <span>2.00</span> -->
               </li>
             </ul>
           </div>
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      PageData: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      Timer: null,
+      HasNextPage: true,
+      DataLock: false
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo,
+      CurrentShopAllCustomer: x => x.CurrentShopAllCustomer
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    this.EmptyCurrentShopAllCustomer()
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EmptyCurrentShopAllCustomer'
+    ]),
+    ...mapUserActions([
+      'GetShopAllCustomer'
+    ]),
+    Init (done = () => { }) { // 初始化
+      this.EmptyCurrentShopAllCustomer()
+      this.PageData.pageNum = 1
+      this.HasNextPage = true
+      this.DataLock = false
+      this.ToGetPageList(done)
+    },
+    ToGetPageList (done = () => { }) { // 获取页面列表
+      if (this.HasNextPage) {
+        this.GetShopAllCustomer({ queryData: { ...this.PageData, from: 'all' } }).then((res) => {
+          this.HasNextPage = res.data.data.total > this.CurrentShopAllCustomer.length
+          done()
+        }).catch(() => {
+          done()
+        })
+      }
+    },
+    Infinite (done) { // 上拉加载
+      this.Timer = window.setTimeout(() => {
+        if (this.HasNextPage) {
+          this.PageData.pageNum += 1
+          this.ToGetPageList(done)
+        } else {
+          this.$refs.MyScroller.finishInfinite(true)
+        }
+      }, 1000)
+    },
     Refresh (done) { // 页面下拉刷新
-      window.setTimeout(() => {
+      if (!this.DataLock) {
+        this.Init(done)
+      } else {
         done()
-      }, 1000)
+      }
     }
   }
 }

src/pages/CaiMinGuanLi/ShouYe/index.vue

         <div class="flex-item">
           <div>
             <div class="Content">
-              <scroller :on-refresh="Refresh">
+              <scroller :on-refresh="Refresh" :on-infinite="Infinite" ref="MyScroller">
                 <div class="Container">
                   <ul>
-                    <li v-for="(item, index) in 15" :key="index" class="flex-h">
+                    <li v-for="(item, index) in CurrentShopCustomer" :key="index" class="flex-h">
                       <div class="Icon">
-                        <img src="" class="centerLabel cover" alt="">
+                        <img :src="item.avatar" class="centerLabel cover" alt="">
                       </div>
                       <div class="flex-item">
                         <div>
-                          <span>叭叭叭</span>
-                          <span>2天前，下单2元未出票</span>
+                          <span>{{item.name}}</span>
+                          <span>{{ToolClass.DateFormat(item.createDate)}}</span>
                         </div>
                       </div>
-                      <span>2.00</span>
+                      <!-- <span>2.00</span> -->
                     </li>
                   </ul>
                 </div>
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      PageData: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      Timer: null,
+      HasNextPage: true,
+      DataLock: false
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo,
+      CurrentShopCustomer: x => x.CurrentShopCustomer
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    this.EmptyCurrentShopCustomer()
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EmptyCurrentShopCustomer'
+    ]),
+    ...mapUserActions([
+      'GetShopCustomer'
+    ]),
+    Init (done = () => { }) { // 初始化
+      this.EmptyCurrentShopCustomer()
+      this.PageData.pageNum = 1
+      this.HasNextPage = true
+      this.DataLock = false
+      this.ToGetPageList(done)
+    },
+    ToGetPageList (done = () => { }) { // 获取页面列表
+      if (this.HasNextPage) {
+        this.GetShopCustomer({ queryData: { ...this.PageData, from: 'order' } }).then((res) => {
+          this.HasNextPage = res.data.data.total > this.CurrentShopCustomer.length
+          done()
+        }).catch(() => {
+          done()
+        })
+      }
+    },
+    Infinite (done) { // 上拉加载
+      this.Timer = window.setTimeout(() => {
+        if (this.HasNextPage) {
+          this.PageData.pageNum += 1
+          this.ToGetPageList(done)
+        } else {
+          this.$refs.MyScroller.finishInfinite(true)
+        }
+      }, 1000)
+    },
     Refresh (done) { // 页面下拉刷新
-      window.setTimeout(() => {
+      if (!this.DataLock) {
+        this.Init(done)
+      } else {
         done()
-      }, 1000)
+      }
     }
   }
 }

src/pages/index/ShouYe/index.vue

 <template>
   <div class="Page">
-    <MainPageContainer :MainHeaderTitle="`订单管理`" :MainTabBarActiveId="1" :ShowMainHeader="true" :ShowMainTabBar="true" :ShowMainHeaderMore="true" :MainHeaderMoreIcon="`icondaojishi`" :MainHeaderMoreText="`全部彩种`" :MainHeaderMoreClick="() => { $router.push({ name: 'DingDanChaXun' }) }">
+    <MainPageContainer :MainHeaderTitle="`订单管理`" :MainTabBarActiveId="1" :ShowMainHeader="true" :ShowMainTabBar="true">
       <div class="PageContainer flex-v">
         <a class="flex-h">
           <i class="iconfont icontongzhi"></i>
         <!-- 内容 -->
         <div class="flex-item">
           <div>
-            <div class="Content">
-              <scroller :on-refresh="Refresh">
+            <div class="Content" v-if="UserInfo !== null">
+              <scroller :on-refresh="Refresh" :on-infinite="Infinite" ref="MyScroller">
                 <div class="Container">
                   <ul>
-                    <li v-for="(item, index) in 15" :key="index">
+                    <li v-for="(item, index) in CurrentShopOrderList" :key="index">
                       <div class="Res">
                         <div class="Num flex-h">
                           <div class="Icon">
-                            <img src="../../../assets/img/icon5.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'double-color'" src="../../../assets/img/icon5.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'lottery'" src="../../../assets/img/icon4.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'p5'" src="../../../assets/img/icon2.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'p3'" src="../../../assets/img/icon7.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'football'" src="../../../assets/img/icon3.png" class="centerLabel contain" alt="">
+                            <img v-if="item.customerBetting.lotteryId === 'basketball'" src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
                           </div>
-                          <span>双色球</span>
+                          <span v-if="item.customerBetting.lotteryId === 'double-color'">双色球</span>
+                          <span v-if="item.customerBetting.lotteryId === 'lottery'">大乐透</span>
+                          <span v-if="item.customerBetting.lotteryId === 'p5'">排列5</span>
+                          <span v-if="item.customerBetting.lotteryId === 'p3'">排列3</span>
+                          <span v-if="item.customerBetting.lotteryId === 'football'">足球</span>
+                          <span v-if="item.customerBetting.lotteryId === 'basketball'">篮球</span>
                           <div class="flex-item">
-                            <ul>
+                            <ul v-if="item.customerBetting.lotteryId === 'lottery' || item.customerBetting.lotteryId === 'double-color'">
                               <li>01</li>
                               <li>01</li>
                               <li>01</li>
                               <li class="active">01</li>
                               <li class="active">01</li>
                             </ul>
+                            <span v-if="item.customerBetting.lotteryId === 'football' || item.customerBetting.lotteryId === 'basketball'">{{item.customerBetting.planName}} 预计奖金：{{item.customerBetting.expectedEarning}}</span>
                           </div>
                         </div>
                         <div class="Count flex-h">
-                          <span class="flex-item"><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
-                          <span>第202076期</span>
-                          <span>2020-08-14 18:43:22</span>
+                          <span class="flex-item" v-if="item.customerBetting.lotteryId !== 'football' && item.customerBetting.lotteryId !== 'basketball'"><em>1</em>注<em>1</em>倍<em>2.00</em>元</span>
+                          <span class="flex-item" v-else>{{item.customerBetting.notesNum}}注{{item.customerBetting.totalPrice}}元</span>
+                          <span v-if="item.customerBetting.lotteryId !== 'football' && item.customerBetting.lotteryId !== 'basketball'">第202076期</span>
+                          <span>{{ToolClass.DateFormat(item.customerBetting.createDate)}}</span>
                         </div>
                       </div>
                       <div class="Time flex-h">
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      PageData: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      Timer: null,
+      HasNextPage: true,
+      DataLock: false
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo,
+      CurrentShopOrderList: x => x.CurrentShopOrderList
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    this.EmptyCurrentShopOrderList()
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EmptyCurrentShopOrderList'
+    ]),
+    ...mapUserActions([
+      'GetCurrentShopOrderList'
+    ]),
+    Init (done = () => { }) { // 初始化
+      this.EmptyCurrentShopOrderList()
+      this.PageData.pageNum = 1
+      this.HasNextPage = true
+      this.DataLock = false
+      this.ToGetPageList(done)
+    },
+    ToGetPageList (done = () => { }) { // 获取页面列表
+      if (this.HasNextPage) {
+        this.GetCurrentShopOrderList({ queryData: { ...this.PageData } }).then((res) => {
+          this.HasNextPage = res.data.data.total > this.CurrentShopOrderList.length
+          done()
+        }).catch(() => {
+          done()
+        })
+      }
+    },
+    Infinite (done) { // 上拉加载
+      this.Timer = window.setTimeout(() => {
+        if (this.HasNextPage) {
+          this.PageData.pageNum += 1
+          this.ToGetPageList(done)
+        } else {
+          this.$refs.MyScroller.finishInfinite(true)
+        }
+      }, 1000)
+    },
     Refresh (done) { // 页面下拉刷新
-      window.setTimeout(() => {
+      if (!this.DataLock) {
+        this.Init(done)
+      } else {
         done()
-      }, 1000)
+      }
     }
   }
 }

src/pages/index/ShouYe/page.scss

                       margin-right: 0.1rem;
                     }
                     > .flex-item {
+                      > span {
+                        display: block;
+                        font-size: 0.1rem;
+                        line-height: 0.2rem;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                       > ul {
                         width: 100%;
                         font-size: 0;

src/store/user/index.js

 export default {
   namespaced: true,
   state: {
+    CurrentShopCustomer: [], // 当前店铺顾客列表
+    CurrentShopAllCustomer: [], // 当前店铺所有顾客列表
+    CurrentShopOrderList: [], // 当前店铺订单列表
+    CurrentShopInfo: null, // 当前店铺信息
     UserInfo: null, // 用户信息
     UserOrderList: [ // 用户订单
       { createDate: '2020-08-14  15:10:20', dateNum: '202076期', type: '超级大乐透', amount: 2, id: 1, orderNum: 'TE202008140000146179970', status: '已撤单' },
     },
     EmptyUserInfo (state) { // 清空用户信息
       state.UserInfo = null
+    },
+    UpdateCurrentShopInfo (state, data) { // 更新当前店铺信息
+      state.CurrentShopInfo = data || null
+    },
+    UpdateCurrentShopOrderList (state, data) { // 更新当前店铺订单列表
+      state.CurrentShopOrderList = state.CurrentShopOrderList.concat(data.records || [])
+    },
+    EmptyCurrentShopOrderList (state) { // 清空当前店铺订单列表
+      state.CurrentShopOrderList = []
+    },
+    UpdateCurrentShopCustomer (state, data) { // 更新当前店铺顾客列表
+      state.CurrentShopCustomer = state.CurrentShopCustomer.concat(data.records || [])
+    },
+    EmptyCurrentShopCustomer (state) { // 清空当前店铺顾客列表
+      state.CurrentShopCustomer = []
+    },
+    UpdateCurrentShopAllCustomer (state, data) { // 更新当前店铺所有顾客列表
+      state.CurrentShopAllCustomer = state.CurrentShopAllCustomer.concat(data.records || [])
+    },
+    EmptyCurrentShopAllCustomer (state) { // 清空当前店铺所有顾客列表
+      state.CurrentShopAllCustomer = []
     }
   },
   actions: {
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.SignIn, context, payload, 1000, 'UpdateUserInfo')
       })
+    },
+    GetCurrentShopInfo (context, payload) { // 获取当前店铺信息
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetCurrentShopInfo, context, payload, 1000, 'UpdateCurrentShopInfo')
+      })
+    },
+    GetCurrentShopOrderList (context, payload) { // 获取当前店铺订单列表
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetCurrentShopOrderList, context, payload, 1000, 'UpdateCurrentShopOrderList')
+      })
+    },
+    GetShopCustomer (context, payload) { // 获取当前店铺用户列表
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetShopCustomer, context, payload, 1000, 'UpdateCurrentShopCustomer')
+      })
+    },
+    GetShopAllCustomer (context, payload) { // 获取当前店铺所有用户列表
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.GetShopCustomer, context, payload, 1000, 'UpdateCurrentShopAllCustomer')
+      })
     }
   }
 }

src/util/Api.js

   SignIn: { // 登录
     method: 'post',
     url: `${prefix}/shop/login`
+  },
+  GetCurrentShopInfo: { // 获取当前店铺信息
+    method: 'get',
+    url: `${prefix}/shop/current`
+  },
+  GetCurrentShopOrderList: { // 获取当前店铺订单列表
+    method: 'get',
+    url: `${prefix}/shop/order`
+  },
+  GetShopCustomer: { // 获取店铺用户列表
+    method: 'get',
+    url: `${prefix}/shop/customer`
   }
 }
 

src/util/PublicMethod.js

 /* eslint-disable */
 import Axios from 'axios'
+import qs from 'qs'
 const ToolClass = {
   Axios (resolve, reject, target, context, payload = {}, code = 0, commit = null, params = null, hasdata = false) { // Axios
+    let Data = null
+    let Url = null
+    if (payload.urlData !== undefined) {
+      Url = this.ReplaceURLParams(target.url, payload.urlData)
+    } else {
+      Url = target.url
+    }
+    if (payload.queryData !== undefined) {
+      Url += '?' + qs.stringify(payload.queryData)
+    }
+    if (payload.data !== undefined) {
+      Data = payload.data
+    }
+    let Header = {}
+    if (window.localStorage.Jwt !== undefined && window.localStorage.JwtTime !== undefined && window.localStorage.JwtTime + 24 * 60 * 60 * 1000 >= Date.now()) { // 本地获取token
+      Header['x-authorization-jwt'] = window.localStorage.Jwt
+    }
     Axios({
       method: target.method,
-      url: target.url,
-      ...payload
+      url: Url,
+      data: { ...Data },
+      headers: { ...Header }
     }).then(res => {
+      const token = res.headers['x-authorization-jwt']
+      if (token) { // 更新本地存储token
+        window.localStorage.Jwt = token
+        window.localStorage.JwtTime = Date.now()
+      }
       if (res.data.code - 0 === code - 0) {
         if (commit !== null) {
           context.commit(commit, params === null ? res.data.data : hasdata ? { ...params, data: res.data.data } : params)
     return false
   },
   DateFormat (timestamp) { // 格式化时间
-    let Date = new Date(timestamp - 0)
+    let aDate = new Date(timestamp)
     let yy = new Date(timestamp).getFullYear()
     let mm = new Date(timestamp).getMonth() + 1
     let dd = new Date(timestamp).getDate()
-    let hh = Date.getHours()
-    let min = Date.getMinutes()
-    let ss = Date.getSeconds()
-    return `${yy}-${mm}-${dd} ${hh}:${min}:${ss}`
+    let hh = aDate.getHours()
+    let min = aDate.getMinutes()
+    let ss = aDate.getSeconds()
+    return `${yy}-${mm > 9 ? mm : `0${mm}`}-${dd > 9 ? dd : `0${dd}`} ${hh > 9 ? hh : `0${hh}`}:${min > 9 ? min : `0${min}`}:${ss > 9 ? ss : `0${ss}`}`
   },
   WindowClick (callback) { // window点击事件
     let WindowClickFn = window.onclick