<template> <view class="container"> <view class="integral-mine-info"> <view class="integral-info-round"> <view class="integral-number" :style="{fontSize: integralData.usableIntegral >= 1000000 ? '26px' : (integralData.usableIntegral >= 100000 ? '31px' :'')}"> {{integralData.usableIntegral}} </view> <view class="integral-text">可用积分</view> <view class="integral-text">累计{{integralData.totalIntegral}}</view> </view> </view> <view class="integral-list-box"> <view class="integral-tab"> <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A" inactive-color="#666666" :bold="false" height="90" bar-width="120"></u-tabs> </view> <scroll-view class="integral-list" scroll-y="true" @scrolltolower="handleLoadMore" v-if="!tabIndex"> <view class="integral-row" v-for="(item, index) in integralList1" :key="index"> <view class="integral-icon"></view> <view class="integral-info"> <view class="integral-title">{{item.behaviorType == 1 ? '购物赠送' : (item.behaviorType == 2 ? '消费扣减' : '消费扣减')}}</view> <view class="integral-date">{{item.addTime}}</view> </view> <view class="integral-number">+{{item.integralValue}}</view> </view> </scroll-view> <scroll-view class="integral-list" scroll-y="true" @scrolltolower="handleLoadMore" v-else> <view class="integral-row" v-for="(item, index) in integralList2" :key="index"> <view class="integral-icon"></view> <view class="integral-info"> <view class="integral-title">{{item.behaviorType == 1 ? '购物赠送' : (item.behaviorType == 2 ? '消费扣减' : '消费扣减')}}</view> <view class="integral-date">{{item.reduceTime}}</view> </view> <view class="integral-number">-{{item.integralValue}}</view> </view> </scroll-view> </view> <u-top-tips ref="uTips"></u-top-tips> </view> </template> <script> const NET = require('@/utils/request') const API = require('@/config/api') export default { data() { return { integralData: { usableIntegral: 0, totalIntegral: 0, }, tabIndex: 0, tabList: [{ name: '收入积分' }, { name: '支出积分' }, ], pageIndex1: 1, isOver1: false, integralList1: [], pageIndex2: 1, isOver2: false, integralList2: [], } }, onLoad() { NET.request(API.getIntegral, {}, 'POST').then(res => { this.integralData = res.data }).catch(res => { this.$refs.uTips.show({ title: '获取个人积分失败', type: 'warning', }) }) this.getIntegraList(1) this.getIntegraList(2) }, onPullDownRefresh() { this.pageIndex1 = 1 this.integralList1 = [] this.pageIndex2 = 1 this.integralList2 = [] this.getIntegraList(1, 'refresh') this.getIntegraList(2, 'refresh') }, methods: { // 切换tab changeTabs(index) { this.tabIndex = index; }, // 懒加载 handleLoadMore() { if (this.tabIndex == 0) { if (!this.isOver1) { this.pageIndex1++ this.getIntegraList(1) } } else { if (!this.isOver2) { this.pageIndex2++ this.getIntegraList(2) } } }, // 获取全部商品 getIntegraList(type, refresh) { NET.request(API.getIntegralList, { behavior: type, pageIndex: this['pageIndex' + type], pageSize: 10, }, 'POST').then(res => { if (refresh == 'refresh') { uni.stopPullDownRefresh(); } this['isOver' + type] = res.data.integralList.length != 10 this['integralList' + type] = this['integralList' + type].concat(res.data.integralList) }).catch(res => { this.$refs.uTips.show({ title: '获取商品列表失败', type: 'warning', }) }) }, }, } </script> <style> page { background-color: #f7f7f7; } </style> <style lang="less" scoped> page { width: 100%; height: 100%; } .container { width: 100%; height: 100%; float: left; background-color: #f7f7f7; .integral-mine-info { width: 100%; height: 180px; float: left; background-size: 100% 180px; background-position: center; background-repeat: no-repeat; background-image: url(@/static/images/integralBg.jpg); .integral-info-round { width: 118px; height: 118px; float: left; position: relative; left: 50%; transform: translateX(-50%); margin-top: 22px; background: #FFFFFF; border: 4px solid rgba(18, 148, 88, 0.38); border-radius: 50%; .integral-number { width: 100%; height: 40px; float: left; margin: 26px 0 4px 0; font-size: 36px; font-family: PingFang SC; color: #52A63A; line-height: 40px; text-align: center; } .integral-text { width: 100%; height: 16px; float: left; font-size: 12px; font-family: PingFang SC; color: #52A63A; line-height: 16px; text-align: center; } } } .integral-list-box { width: calc(100% - 30px); height: calc(100% - 150px); float: left; margin: -30px 15px 0 15px; background-color: #FFFFFF; .integral-tab { width: 100%; height: 45px; float: left; border-bottom: 1px solid #EFEFEF; } .integral-list { width: 100%; height: calc(100% - 46px); float: left; .integral-row { width: 100%; height: 70px; float: left; box-sizing: border-box; border-bottom: 1px solid #EFEFEF; .integral-icon { width: 8px; height: 8px; float: left; margin: 22px 10px 0 10px; background: #52A63A; border-radius: 50%; } .integral-info { width: calc(100% - 120px); height: 100%; float: left; .integral-title { width: 100%; height: 18px; float: left; font-size: 15px; font-family: PingFang SC; color: #222222; line-height: 18px; margin: 16px 0 6px 0; } .integral-date { width: 100%; height: 16px; float: left; font-size: 12px; font-family: PingFang SC; color: #888888; line-height: 16px; } } .integral-number { width: 80px; height: 100%; float: right; margin-right: 12px; font-size: 15px; font-family: PingFang SC; font-weight: bold; color: #52A63A; line-height: 70px; text-align: right; } } } } } </style>