静态页面

src/pages/PaiJiang/PaiJiangGuanLi/index.vue

@@ -3,14 +3,14 @@
     <MainPageContainer :ShowMainHeader="true" :ShowMainTabBar="true" :MainTabBarActiveId="2" :MainHeaderTitle="`派奖管理`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreIcon="`iconjilu`" :MainHeaderMoreText="`派奖记录`" :MainHeaderMoreClick="() => { this.$router.push({ name: 'PaiJiangJiLu' }) }">
       <div class="PageContainer flex-v">
         <!-- 搜索 -->
-        <div class="Search">
+        <!-- <div class="Search">
           <div class="flex-h">
             <i class="iconfont iconsousuo"></i>
             <div class="flex-item">
               <input type="text" placeholder="请输入您要查询的派奖类型">
             </div>
           </div>
-        </div>
+        </div> -->
 
         <!-- nav -->
         <div class="Nav flex-h">
@@ -27,23 +27,23 @@
         <!-- 列表 -->
         <div class="ListContainer flex-item">
           <div>
-            <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">
-                    <a class="iconfont iconweigouxuan"></a>
+                  <li v-for="(item, index) in PageList" :key="index" class="flex-h">
+                    <a class="iconfont" :class="[item.Active ? 'icongouxuan active' : 'iconweigouxuan']" @click="SelectItem(item, index)"></a>
                     <div class="flex-item">
                       <div class="Title flex-h">
-                        <span class="flex-item">竞足胜平负</span>
-                        <span>1注</span>
-                        <span>1倍</span>
-                        <span><em>2.00</em>元</span>
+                        <span class="flex-item">{{item.customerBetting.lotteryName}}</span>
+                        <span>{{item.customerBetting.notesNum}}注</span>
+                        <span>{{item.customerBetting.bettingTimes}}倍</span>
+                        <span><em>{{item.customerBetting.totalPrice}}</em>元</span>
                       </div>
-                      <span>订单编号：TE20200810000146179970</span>
-                      <span>出票时间：2020-08-10 15:10:10</span>
+                      <span>订单编号：{{item.orderId}}</span>
+                      <span>出票时间：{{ToolClass.DateFormat(item.createDate)}}</span>
                       <div class="Res">
-                        <span>过关方式：2串1</span>
-                        <span>奖金：<em>5.20元</em></span>
+                        <span v-if="item.customerBetting.lotteryId === 'basketball' || item.customerBetting.lotteryId === 'football'">过关方式：{{item.customerBetting.bettingPlan.passName}}</span>
+                        <span>奖金：<em>{{item.customerBetting.winAmount}}元</em></span>
                       </div>
                     </div>
                   </li>
@@ -55,14 +55,14 @@
 
         <!-- 底部栏 -->
         <div class="Bottom flex-h">
-          <a class="iconfont iconweigouxuan"></a>
-          <span>全选</span>
+          <!-- <a class="iconfont" :class="[SelectNum === PageList.length ? 'icongouxuan active' : 'iconweigouxuan']" @click="SelectAll"></a>
+          <span>全选</span> -->
           <div class="flex-item">
             <div>
-              <span>合计：<em>5.20元</em></span>
+              <span>合计：<em>{{TotalPrice}}元</em></span>
             </div>
           </div>
-          <a>派奖</a>
+          <a @click="SendMoney" :class="{'active': !DataLock}">{{DataLock ? '正在提交' : '派奖'}}</a>
         </div>
       </div>
     </MainPageContainer>
@@ -73,26 +73,44 @@
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      PageList: [],
+      Done: null,
+      PageData: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      Timer: null,
+      HasNextPage: true,
+      DataLock: false,
       SwiperOptions: {
         slidesPerView: 'auto'
       },
-      ActiveNavId: 1,
+      SelectNum: 0,
+      ActiveNavId: 'all',
+      IsAll: false,
+      TotalPrice: 0,
       NavList: [
-        { Name: '全部彩种', Id: 1 },
-        { Name: '双色球', Id: 2 },
-        { Name: '大乐透', Id: 3 },
-        { Name: '排列三', Id: 4 },
-        { Name: '排列五', Id: 5 },
-        { Name: '足球', Id: 6 },
-        { Name: '篮球', Id: 7 }
+        { Name: '全部彩种', Id: 'all' },
+        { Name: '双色球', Id: 'double-color' },
+        { Name: '大乐透', Id: 'lottery' },
+        { Name: '排列三', Id: 'p3' },
+        { Name: '排列五', Id: 'p5' },
+        { Name: '足球', Id: 'football' },
+        { Name: '篮球', Id: 'basketball' }
       ]
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo,
+      CurrentShopOrderList: x => x.CurrentShopOrderList
+    }),
     MySwiper () {
       return this.$refs.MySwiper.swiper
     }
@@ -109,13 +127,112 @@ export default {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EmptyCurrentShopOrderList'
+    ]),
+    ...mapUserActions([
+      'GetCurrentShopOrderList',
+      'SendPrize'
+    ]),
+    SendMoney () { // 派奖
+      if (this.DataLock || this.SelectNum === 0) return
+      this.DataLock = true
+      let OrderId = []
+      let Index = null
+      this.PageList.map((item, index) => {
+        if (item.Active) {
+          Index = index
+          OrderId.push(item.orderId)
+        }
+      })
+      this.SendPrize({ urlData: { id: OrderId.join(',') } }).then(() => {
+        this.Toast('派奖成功')
+        this.PageList.splice(Index, 1)
+        this.DataLock = false
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    },
+    SelectAll () {
+      if (this.SelectNum === this.PageList.length) {
+        this.PageList.map((item) => {
+          item.Active = false
+        })
+      } else {
+        this.PageList.map((item) => {
+          item.Active = true
+        })
+      }
+      this.CheckList()
+    },
+    SelectItem (item, index) {
+      if (!item.Active) {
+        this.PageList.map((item) => {
+          item.Active = false
+        })
+      }
+      item.Active = !item.Active
+      this.CheckList()
+    },
+    CheckList () {
+      this.SelectNum = 0
+      this.TotalPrice = 0
+      this.PageList.map((item) => {
+        if (item.Active) {
+          this.SelectNum += 1
+          this.TotalPrice += item.customerBetting.winAmount
+        }
+      })
+    },
+    Init (done = () => { }) { // 初始化
+      this.EmptyCurrentShopOrderList()
+      this.PageList = []
+      this.PageData.pageNum = 1
+      this.HasNextPage = true
+      this.DataLock = false
+      this.ToGetPageList(done)
+    },
+    ToGetPageList (done = () => { }) { // 获取页面列表
+      if (this.HasNextPage) {
+        let QueryData = { ...this.PageData, isCashed: true }
+        if (this.ActiveNavId !== 'all') {
+          QueryData.lotteryId = this.ActiveNavId
+        }
+        this.GetCurrentShopOrderList({ queryData: { ...QueryData } }).then((res) => {
+          let Arr = res.data.data.records || []
+          Arr.map((item) => {
+            this.PageList.push({ ...item, Active: false })
+          })
+          this.HasNextPage = res.data.data.total > this.CurrentShopOrderList.length
+          done()
+        }).catch(() => {
+          done()
+        })
+      }
+    },
     CutNav (id) {
       this.ActiveNavId = id
+      this.EmptyCurrentShopOrderList()
+      this.PageList = []
+      this.$refs.MyScroller.triggerPullToRefresh(true)
+    },
+    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/PaiJiang/PaiJiangGuanLi/page.scss

@@ -173,14 +173,20 @@
           font-size: 0.2rem;
           margin-left: 0.15rem;
           color: #999;
+          &.active {
+            color: #d91d36;
+          }
         }
         &:last-child {
           font-size: 0.16rem;
           color: #fff;
-          background: #d91d36;
+          background: #ccc;
           padding: 0 0.3rem;
           line-height: 0.5rem;
           margin-left: 0.1rem;
+          &.active {
+            background: #d91d36;
+          }
         }
       }
       > span {

src/pages/PaiJiang/PaiJiangJiLu/index.vue

@@ -2,6 +2,16 @@
   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :MainHeaderTitle="`派奖记录`" :ShowMainHeaderBack="true">
       <div class="PageContainer flex-v">
+        <!-- 搜索 -->
+        <!-- <div class="Search">
+          <div class="flex-h">
+            <i class="iconfont iconsousuo"></i>
+            <div class="flex-item">
+              <input type="text" placeholder="请输入您要查询的派奖类型">
+            </div>
+          </div>
+        </div> -->
+
         <!-- nav -->
         <div class="Nav flex-h">
           <div class="flex-item">
@@ -17,22 +27,23 @@
         <!-- 列表 -->
         <div class="ListContainer flex-item">
           <div>
-            <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 PageList" :key="index" class="flex-h">
+                    <!-- <a class="iconfont" :class="[item.Active ? 'icongouxuan active' : 'iconweigouxuan']" @click="SelectItem(item, index)"></a> -->
                     <div class="flex-item">
                       <div class="Title flex-h">
-                        <span class="flex-item">竞足胜平负</span>
-                        <span>1注</span>
-                        <span>1倍</span>
-                        <span><em>2.00</em>元</span>
+                        <span class="flex-item">{{item.customerBetting.lotteryName}}</span>
+                        <span>{{item.customerBetting.notesNum}}注</span>
+                        <span>{{item.customerBetting.bettingTimes}}倍</span>
+                        <span><em>{{item.customerBetting.totalPrice}}</em>元</span>
                       </div>
-                      <span>订单编号：TE20200810000146179970</span>
-                      <span>出票时间：2020-08-10 15:10:10</span>
+                      <span>订单编号：{{item.orderId}}</span>
+                      <span>出票时间：{{ToolClass.DateFormat(item.createDate)}}</span>
                       <div class="Res">
-                        <span>过关方式：2串1</span>
-                        <span>奖金：<em>5.20元</em></span>
+                        <span v-if="item.customerBetting.lotteryId === 'basketball' || item.customerBetting.lotteryId === 'football'">过关方式：{{item.customerBetting.bettingPlan.passName}}</span>
+                        <span>奖金：<em>{{item.customerBetting.winAmount}}元</em></span>
                       </div>
                     </div>
                   </li>
@@ -50,26 +61,44 @@
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      PageList: [],
+      Done: null,
+      PageData: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      Timer: null,
+      HasNextPage: true,
+      DataLock: false,
       SwiperOptions: {
         slidesPerView: 'auto'
       },
-      ActiveNavId: 1,
+      SelectNum: 0,
+      ActiveNavId: 'all',
+      IsAll: false,
+      TotalPrice: 0,
       NavList: [
-        { Name: '全部彩种', Id: 1 },
-        { Name: '双色球', Id: 2 },
-        { Name: '大乐透', Id: 3 },
-        { Name: '排列三', Id: 4 },
-        { Name: '排列五', Id: 5 },
-        { Name: '足球', Id: 6 },
-        { Name: '篮球', Id: 7 }
+        { Name: '全部彩种', Id: 'all' },
+        { Name: '双色球', Id: 'double-color' },
+        { Name: '大乐透', Id: 'lottery' },
+        { Name: '排列三', Id: 'p3' },
+        { Name: '排列五', Id: 'p5' },
+        { Name: '足球', Id: 'football' },
+        { Name: '篮球', Id: 'basketball' }
       ]
     }
   },
   computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo,
+      CurrentShopOrderList: x => x.CurrentShopOrderList
+    }),
     MySwiper () {
       return this.$refs.MySwiper.swiper
     }
@@ -86,13 +115,112 @@ export default {
     })
   },
   methods: {
+    ...mapUserMutations([
+      'EmptyCurrentShopOrderList'
+    ]),
+    ...mapUserActions([
+      'GetCurrentShopOrderList',
+      'SendPrize'
+    ]),
+    SendMoney () { // 派奖
+      if (this.DataLock || this.SelectNum === 0) return
+      this.DataLock = true
+      let OrderId = []
+      let Index = null
+      this.PageList.map((item, index) => {
+        if (item.Active) {
+          Index = index
+          OrderId.push(item.orderId)
+        }
+      })
+      this.SendPrize({ urlData: { id: OrderId.join(',') } }).then(() => {
+        this.Toast('派奖成功')
+        this.PageList.splice(Index, 1)
+        this.DataLock = false
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    },
+    SelectAll () {
+      if (this.SelectNum === this.PageList.length) {
+        this.PageList.map((item) => {
+          item.Active = false
+        })
+      } else {
+        this.PageList.map((item) => {
+          item.Active = true
+        })
+      }
+      this.CheckList()
+    },
+    SelectItem (item, index) {
+      if (!item.Active) {
+        this.PageList.map((item) => {
+          item.Active = false
+        })
+      }
+      item.Active = !item.Active
+      this.CheckList()
+    },
+    CheckList () {
+      this.SelectNum = 0
+      this.TotalPrice = 0
+      this.PageList.map((item) => {
+        if (item.Active) {
+          this.SelectNum += 1
+          this.TotalPrice += item.customerBetting.winAmount
+        }
+      })
+    },
+    Init (done = () => { }) { // 初始化
+      this.EmptyCurrentShopOrderList()
+      this.PageList = []
+      this.PageData.pageNum = 1
+      this.HasNextPage = true
+      this.DataLock = false
+      this.ToGetPageList(done)
+    },
+    ToGetPageList (done = () => { }) { // 获取页面列表
+      if (this.HasNextPage) {
+        let QueryData = { ...this.PageData }
+        if (this.ActiveNavId !== 'all') {
+          QueryData.lotteryId = this.ActiveNavId
+        }
+        this.GetCurrentShopOrderList({ queryData: { ...QueryData } }).then((res) => {
+          let Arr = res.data.data.records || []
+          Arr.map((item) => {
+            this.PageList.push({ ...item, Active: false })
+          })
+          this.HasNextPage = res.data.data.total > this.CurrentShopOrderList.length
+          done()
+        }).catch(() => {
+          done()
+        })
+      }
+    },
     CutNav (id) {
       this.ActiveNavId = id
+      this.EmptyCurrentShopOrderList()
+      this.PageList = []
+      this.$refs.MyScroller.triggerPullToRefresh(true)
+    },
+    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/PaiJiang/PaiJiangJiLu/page.scss

@@ -7,6 +7,31 @@
     width: 100%;
     height: 100%;
     position: relative;
+    > .Search {
+      padding: 0.1rem 0.15rem;
+      > div {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: 0.3rem;
+        background: #fff;
+        align-items: center;
+        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+        > i {
+          font-size: 0.2rem;
+          color: #999;
+          margin-left: 0.1rem;
+        }
+        > div {
+          > input {
+            width: 100%;
+            font-size: 0.12rem;
+            line-height: 0.2rem;
+            padding: 0.05rem 0;
+          }
+        }
+      }
+    }
     > .Nav {
       position: relative;
       overflow: hidden;
@@ -137,5 +162,59 @@
         }
       }
     }
+    > .Bottom {
+      background: #fff;
+      align-items: center;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      position: relative;
+      z-index: 4;
+      > a {
+        &.iconfont {
+          font-size: 0.2rem;
+          margin-left: 0.15rem;
+          color: #999;
+          &.active {
+            color: #d91d36;
+          }
+        }
+        &:last-child {
+          font-size: 0.16rem;
+          color: #fff;
+          background: #ccc;
+          padding: 0 0.3rem;
+          line-height: 0.5rem;
+          margin-left: 0.1rem;
+          &.active {
+            background: #d91d36;
+          }
+        }
+      }
+      > span {
+        font-size: 0.15rem;
+        line-height: 0.5rem;
+        margin-left: 0.1rem;
+        color: #666;
+      }
+      > div {
+        position: relative;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          > span {
+            display: block;
+            text-align: right;
+            font-size: 0.15rem;
+            color: #333;
+            > em {
+              font-size: 0.15rem;
+              color: #d91d36;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
   }
 }

src/store/user/index.js

@@ -79,6 +79,11 @@ export default {
     }
   },
   actions: {
+    SendPrize (context, payload) { // 派奖
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.SendPrize, context, payload, 1000)
+      })
+    },
     GetAliAppId (context, payload) { // 获取阿里pay id
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.GetAliAppId, context, payload, 1000)

src/util/Api.js

@@ -2,6 +2,10 @@
 const prefix = process.env.NODE_ENV === 'production' ? '/api' : '/api'
 
 const $api = {
+  SendPrize: { // 派奖
+    method: 'put',
+    url: `${prefix}/shop/sent-award/order/:id`
+  },
   GetAliAppId: { // 获取阿里pay id
     method: 'get',
     url: `${prefix}/shop/alipay/appid`