合并

MrShi

3 天以前 9fb9e0b5b7c2664552f06a683fe1204525d8fd4e

 mini-program/pagesA/pages/shop_points/shop_points.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,329 @@
<template>
   <view class="points">
		
      <view class="info-rule" @click="jumpService">积分规则</view>
      <view class="head" :style="{ backgroundImage: 'url(' + backImage + ')', height: 'calc(' + (navHeight + statusbarHeight + 'px + 376rpx)') }">
         <view :style="{ width: '100%', height: navHeight + statusbarHeight + 'px' }"></view>
         <view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' , backgroundImage: 'url(' + backHeadImage + ')'}">
            <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
            <view class="head-bar-nav" :style="{ height: navHeight + 'px' }" >
               <image src="/static/icon/nav_ic_bac@2x.png" mode="widthFix" @click="jumpBack"></image>
               <text>我的积分</text>
               <image src="/static/icon/nav_ic_bac@2x.png" mode="widthFix" style="opacity: 0;"></image>
            </view>
         </view>
         <view class="info">
            <view class="info-a">当前积分</view>
            <view class="info-b">{{countData.surplusIntegral || 0}}</view>
            <view class="info-c">
               <image src="/static/icon/ic_tixing@2x.png" mode="widthFix"></image>
               <text>{{countData.expiredIntegral || 0}}积分即将过期</text>
            </view>
         </view>
         <view class="list">
            <view class="list-title">
               <view class="list-title-name">积分明细</view>
               <view class="list-title-cate">
                  <view  :class="'list-title-cate-row '+(active ==0?'active':'')" @click="changeActive(0)"  >全部</view>
                  <view  :class="'list-title-cate-row '+(active ==1?'active':'')" @click="changeActive(1)">获得</view>
                  <view  :class="'list-title-cate-row '+(active ==2?'active':'')" @click="changeActive(2)">扣除</view>
               </view>
            </view>
            <view class="list-item"  v-for="(item, index) in dataList" :key="index">
               <view class="list-item-left">
                  <text>{{item.content || ''}}</text>
                  <text>{{item.createDate || ''}}</text>
               </view>
               <view class="list-item-num" :style="item.type==1?'color:red':''">{{item.type==1?'-':'+'}}{{item.num||0}}</view>
            </view>
            <view v-if="!hasNext" class="nomore">已加载全部</view>
         </view>
      </view>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken'])
      },
      data() {
         return {
            currentPage:1,
            total:0,
            shop:{},
            active:0,
            hasNext:true,
            dataList:[],
            countData:{},
            backHeadImage:'',
            backImage: require('@/static/images/jifen_bg@2x.png')
         };
      },
      onReachBottom(){
         this.getDataList( );
      },
      onPageScroll(e){
          console.log('全局页面滚动', e);
          if(e.scrollTop >= 20){
             this.backHeadImage = this.backImage
          }else{
              this.backHeadImage = ''
          }
      },
      onShow() {
          this.shop  ={}
          this.checkShopLogin()
          this.active=0
          this.shop = this.shopInfo || {}
          this.getCountData()
          this.getFirstPageData()
      },
      methods:{
         getFirstPageData(){
            this.currentPage = 0
            this.hasNext=true
            this.total=0
            this.dataList=[]
            this.getDataList()
         },
         changeActive(index){
            this.active=index
            this.getFirstPageData()
         },
         showRule(){
             console.log("==================================",this.showPhone)
         },
         async  getCountData(){
               var that =this 
               let res = await that.$u.api.getIntegralData({  userType: 1, tokenType:1  })
               if (res.code === 200) {  
                  this.countData = res.data  
               } 
         },
         async  getDataList(){
               if(this.loading || !this.hasNext){
                  return
               }
               this.loading=true
               this.currentPage =   this.currentPage+1
               if(this.currentPage == 1){
                  this.hasNext =true
                  this.dataList=[]
               }
               var that =this 
               let res = await that.$u.api.findIntegralRecordPage({
                     capacity:10,
                     model: {
                        type: this.active === 1?0:(this.active===2?1:''), 
                        userType: 1
                     },
                     page:this.currentPage
                  });
                  console.log(res)
               if (res.code === 200 ) { 
                  if ( res.data && res.data.page ===this.currentPage) { 
                     res.data.records = res.data.records||[]
                      that.dataList.push(...res.data.records)
                      that.total=res.data.total
                      if( this.currentPage >= res.data.pageCount||0){
                         that.hasNext=false
                      }else{
                         that.hasNext=true
                      }
                  }
               } 
               this.loading=false
         },
         jumpBack(){
            uni.navigateBack({ delta: 1 });
         },
         jumpService() {
            uni.navigateTo({
               url: '/pagesA/pages/rich-text-page/rich-text-page?flag='+2
            })
         },
         checkShopLogin(){
            var that =this
            if( this.shopInfo ==null || this.shopInfo.id==null ||  this.shopToken==null || this.shopToken==''){
               uni.navigateTo({
                  url: '/pages/login/login'
               })
            } 
         } 
      }
   }
</script>

<style>
   page {
      background-color: #F9F9FB;
   }
</style>
<style lang="scss" scoped>
   .points {
      width: 100%;
      .info-rule{
         float: right;
         margin-top:214rpx;
         width: 140rpx;
         // height: 52rpx;
         padding: 5px 0;
         background: #FFFFFF;
         border-radius: 36rpx 0rpx 0rpx 36rpx;
			
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         font-size: 24rpx;
         color: #333333;
         line-height: 34rpx;
         text-align: center;
         font-style: normal;
      }
      .head {
         width: 100%;
         height: 424rpx;
         padding: 0 30rpx;
         box-sizing: border-box;
         background-repeat: no-repeat;
         background-size: 100% 100%;
			
         .list {
            width: 100%;
            display: flex;
            flex-direction: column;
            background: #FFFFFF;
            border-radius: 16rpx;
            margin-top: 30rpx;
            padding: 34rpx 30rpx;
            padding-bottom: 60rpx;
            box-sizing: border-box;
            .list-title {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .list-title-name {
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #222222;
               }
               .active {
                  color: #004096 !important;
                  background: #F8F9FB !important;
               }
               .list-title-cate {
                  display: flex;
                  align-items: center;
                  .list-title-cate-row {
                     width: 96rpx;
                     height: 56rpx;
                     line-height: 56rpx;
                     text-align: center;
                     background: #F8F9FB;
                     border-radius: 28rpx;
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #333333;
                     margin-left: 20rpx;
                  }
               }
            }
            .list-item {
               width: 100%;
               height: 154rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               border-bottom: 1rpx solid #E5E5E5;
               .list-item-left {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-evenly;
                  text {
                     &:nth-child(1) {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #999999;
                     }
                  }
               }
               .list-item-num {
                  flex-shrink: 0;
                  margin-left: 30rpx;
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #222222;
               }
            }
         }
         .info {
            width: 100%;
            padding: 30rpx 0;
            box-sizing: border-box;
            .info-a {
               font-weight: 400;
               font-size: 26rpx;
               color: #333333;
            }
            .info-b {
               font-weight: bold;
               font-size: 72rpx;
               color: #222222;
            }
            .info-c {
               width: 100%;
               display: flex;
               align-items: center;
               margin-top: 20rpx;
               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 10rpx;
               }
               text {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #777777;
               }
            }
         }
		
         .head-bar {
            width: 100%;
            position: fixed;
            padding: 0 30rpx;
            box-sizing: border-box;
            top: 0;
            left: 0;
            z-index: 999;
		
            .head-bar-nav {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
		
               image {
                  width: 44rpx;
                  height: 44rpx;
               }
		
               text {
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #111111;
               }
            }
         }
      }
   }
</style>