refactor：消费记录

.idea/inspectionProfiles/Project_Default.xml

@@ -4,7 +4,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="16">
+          <list size="17">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -21,6 +21,7 @@
             <item index="13" class="java.lang.String" itemvalue="u-sticky" />
             <item index="14" class="java.lang.String" itemvalue="u-tabs" />
             <item index="15" class="java.lang.String" itemvalue="view" />
+            <item index="16" class="java.lang.String" itemvalue="u-datetime-picker" />
           </list>
         </value>
       </option>

myPages/transactionRecord/index.rpx.css

@@ -0,0 +1,30 @@
+.page{
+    padding: 0 32rpx;
+}
+.xialaImage{
+    width: 26rpx;
+    height: 26rpx;
+    margin-top: 25rpx;
+    margin-left: 5rpx;
+}
+.left{
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 72rpx;
+}
+.right{
+    width: 500rpx;
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 72rpx;
+
+}
+.statistics{
+    margin-top: 28rpx;
+    height: 72rpx;
+    background: #F7F7F7;
+}

myPages/transactionRecord/index.vue

@@ -1,60 +1,118 @@
 <template>
     <view class="page">
-
+        <u-sticky  :disabled="isSticky">
+            <View class=" tabs">
+                <u-tabs :list="tabList" :scrollable="false"
+                        lineWidth="30"
+                        lineColor="#FFE05C"
+                        :activeStyle="{
+            					color: '#333333',
+            					fontWeight: 'bold',
+            					transform: 'scale(1.05)'
+       							 }"
+                        :current="tabIndex" @click="clickTab"></u-tabs>
+            </View>
+
+            <view class="statistics flex-row justify-between ">
+                <view class="left flex-row" @click="showDate">
+                    <text>{{dataTime || '全部'}}</text>
+                    <image class="xialaImage" src="/static/transaction/u5.png"></image>
+                </view>
+                <view class="right flex-row justify-around">
+                    <text>储值￥{{tranFlowstatistic.rechargeAmount || 0}}</text>
+                    <text>消费-￥{{tranFlowstatistic.consumeAmount || 0 }}</text>
+                    <text>退款-￥{{tranFlowstatistic.refundAmount || 0 }}</text>
+                </view>
+            </view>
+
+        </u-sticky>
+
+        <!-- 订单列表 -->
+        <view :style="{'height':windowHeight}" >
+            <swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
+                <swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index" >
+                    <view>
+                        <mescroll-item ref="MescrollItem" :i="index"  :index="tabIndex" :dataTime="dataTime" :tabs="tabList" :height="windowHeight">
+                        </mescroll-item>
+                    </view>
+                </swiper-item>
+            </swiper>
+        </view>
+
+
+        <u-datetime-picker
+                :show="serviceTimeShow"
+                v-model="value1"
+                mode="year-month"
+                :closeOnClickOverlay="true"
+                @confirm="sureChooseDate()"
+        ></u-datetime-picker>
 
 
     </view>
 </template>
 <script>
+    import MescrollItem from "./module/mescrollUni-item.vue";
 
     export default {
+        components: {
+            MescrollItem
+        },
         data() {
             return {
+                windowHeight:'',
+                tabIndex:0,
+                tabList: [{
+                    name: '全部',
+                }, {
+                    name: '消费'
+                }, {
+                    name: '储值',
+                }, {
+                    name: '退款'
+                }],
+
                 showDataLoading: false,
                 serviceTimeShow: false,
                 show: false,
                 mode: 'single',
-                currentTab: 'tab1', // 当前选中的 Tab
-                currentServiceTab: 'orderTab1', // 当前选中的 Tab
                 searchTime: '2023-8-9',
-                reqParm: {
-                    auth: true,
-                    pageSize: 20,
-                    pageNum: 1,
-                    dataTime: null,
-                },
                 value1: '',
+                dataTime:'',
                 tranRecordsList: [],
                 tranFlowstatistic: {}
             };
         },
         onLoad() {
-            // 查询交易列表
-            this.transactionRecordsList();
+            let sysInfo = uni.getSystemInfoSync()
+            this.windowHeight =sysInfo.windowHeight-94+'px'//除标题栏栏外的屏幕可用高度
+
             this.value1 = Date.now();
             // 查询交流流水统计
             this.transactionFlowstatistic();
         },
         methods: {
+
+            clickTab(e){
+                this.tabIndex = e.index
+            },
+            swiperChange(e){
+                this.tabIndex = e.detail.current
+                // if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
+                // 	this.$refs.MescrollItem[e.detail.current].downCallback()
+                // }
+            },
+
+
             // 确定选择的服务日期
-            sureChooseDate(){
+            sureChooseDate(e){
                 this.serviceTimeShow = false;
-                // this.reqParm.startTime = uni.$u.timeFormat(this.value1, 'yyyy-mm-dd hh:MM:ss');
-                this.reqParm.dataTime = uni.$u.timeFormat(this.value1, 'yyyy-mm');
+                this.dataTime = uni.$u.timeFormat(e.value, 'yyyy-mm');
+                this.$refs.MescrollItem[this.tabIndex].downCallback()
+
             },
             // 交易列表
-            transactionRecordsList(){
-                let that = this;
-                that.showDataLoading = true;
-                this.$api.transactionRecordsList({data:this.reqParm}).then((res)=>{
-                    that.tranRecordsList = res.data.rows;
-                    that.showDataLoading = false;
-                }).catch(() =>{
-                    uni.showToast({
-                        title: "操作失败"
-                    })
-                });
-            },
+
             // 查询交易流水统计
             transactionFlowstatistic(){
                 let that = this;
@@ -68,28 +126,6 @@
                     })
                 });
             },
-            // 服务订单
-            changeServiceTab(tab){
-                // 交易号类型(订单号、退款单号):1 消费 2 充值 3退款
-                if(tab == 'orderTab1'){
-                    delete this.reqParm.tradeNoType;
-                } else if(tab == 'orderTab2'){
-                    this.reqParm.tradeNoType = '2';
-                } else if(tab == 'orderTab3'){
-                    this.reqParm.tradeNoType = '1';
-                } else if(tab == 'orderTab4'){
-                    this.reqParm.tradeNoType = '3';
-                }
-                // 处理查询参数
-                if(!this.reqParm.dataTime){
-                    let time = this.reqParm.dataTime;
-                    this.reqParm.beginTime = time+'-01 00:00:00';
-                    this.reqParm.endTime = this.maxDate(this.reqParm.beginTime);
-                }
-                this.transactionFlowstatistic();
-                this.transactionRecordsList();
-                this.currentServiceTab = tab;
-            },
 
             // 详情
             orderDetail(item){
@@ -133,150 +169,6 @@
     };
 </script>
 <style lang="scss" scoped>
-
-    /* 服务订单内容*/
-    .service-order-tab-bar{
-        background: #fff;
-        display: flex;
-        justify-content: space-around;
-        height: 50px;
-        background-color: #f5f5f5;
-        .service-order-tab-item{
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            color: #333;
-            line-height: 26px;
-        }
-        .service-order-tab-item.active {
-            color: #ff0000;
-        }
-
-        .underline {
-            border-bottom: 2px solid #ff0000;
-        }
-    }
-
-    .h-search{
-        font-size: 14px;
-        display: flex;
-        padding-left: 12px;
-        padding-top: 12px;
-        padding-right: 12px;
-        .h-time{
-            width: 30%;
-            display: flex;
-            color: #333333;
-            .time{
-                padding-right: 2px;
-            }
-        }
-        .h-name{
-            width: 70%;
-            text-align: right;
-            display: flex;
-            justify-content: flex-end;
-            color: #999999;
-            .name{
-                padding-right: 6px;
-            }
-        }
-    }
-
-    .service-order{
-        background: #fff;
-        margin-top: 12px;
-        padding-top: 12px;
-    }
-
-    /* 门店列表 */
-    .store-wrap{
-        border-radius: 2px;
-        .row-list{
-            padding-bottom: 12px;
-            padding-left: 12px;
-            padding-right: 12px;
-            .store-content{
-                display: flex;
-                padding-bottom: 12px;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                .store-img{
-                    width: 60px;
-                    .title-name{
-                        width: 42px;
-                        height: 42px;
-                        color: #fff;
-                        border-radius: 25px;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                    }
-                    .orange{
-                        background: #93D21A;
-                    }
-                    .skyblue{
-                        background: #ED569F;
-                    }
-                    .pink{
-                        background: #FFAF36;
-                    }
-                }
-                .content{
-                    width: 100%;
-                    padding-left: 8px;
-                    padding-top: 2px;
-                    .title-price{
-                        display: flex;
-                        .title{
-                            width: 60%;
-                            font-family: "黑体", sans-serif;
-                        }
-                        .price{
-                            text-align: right;
-                            width: 40%;
-                            color: #333333;
-                            font-weight: 600;
-                        }
-                    }
-
-                    .desc{
-                        display: flex;
-                        font-size: 12px;
-                        .time{
-                            color: #999999;
-                            width: 60%;
-                        }
-                        .balance{
-                            text-align: right;
-                            width: 40%;
-                            color: #999999;
-                        }
-                    }
-
-                }
-
-            }
-
-        }
-
-    }
-
-    /* 产品订单 */
-    .product-order{
-        margin-top: 12px;
-    }
-
-    /* 底部 */
-    .footer{
-        margin-top: 30px;
-        height: 120px;
-        font-size: 12px;
-        text-align: center;
-        color: #666;
-    }
-
+    @import '/common/css/common.css';
+    @import './index.rpx.css';
 </style>

myPages/transactionRecord/module/index.rpx.css

@@ -0,0 +1,54 @@
+.item{
+    height: 156rpx;
+    border-bottom: 1px solid #EEEEEE;
+}
+.leftText{
+    width: 84rpx;
+    height: 84rpx;
+    text-align: center;
+    color: #FFFFFF;
+    line-height: 84rpx;
+    border-radius: 42rpx;
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    margin-top: 32rpx ;
+}
+.rightText{
+    margin-top: 32rpx;
+    width: 590rpx;
+    padding: 0 20rpx;
+}
+.text1{
+    height: 44rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 44rpx;
+}
+
+.text2{
+    height: 44rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 44rpx;
+}
+.text3{
+    height: 40rpx;
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40rpx;
+}
+.backColor1{
+    background: #ED569F;
+}
+.backColor2{
+    background: #93D21A;
+}
+.backColor3{
+    background: #FFAF36;
+}

myPages/transactionRecord/module/mescrollUni-item.vue

@@ -0,0 +1,161 @@
+<template>
+	<!--
+    swiper中的transfrom会使fixed失效,此时用height固定高度;
+    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
+    -->
+	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
+	<!-- top的高度等于悬浮菜单tabs的高度 -->
+	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
+		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
+		<view>
+
+			<view class="item" v-for="(item,index) in list" :key="index">
+				<view class="flex-row justify-between" >
+					<view class="leftText" :class="{'backColor1':item.tradeNoType == '1','backColor2':item.tradeNoType == '2','backColor3':item.tradeNoType == '3'}">
+						<text v-if="item.tradeNoType == '1'">消费</text>
+						<text v-if="item.tradeNoType == '2'">充值</text>
+						<text v-if="item.tradeNoType == '3'">退款</text>
+					</view>
+					<view class="rightText flex-col">
+						<view class=" flex-row justify-between">
+							<text class="text1">{{item.remark}}</text>
+							<text class="text2" v-if="item.tradeNoType == '2'">￥{{item.amount}}</text>
+							<text class="text2" v-else>-￥{{item.amount}}</text>
+						</view>
+						<view class=" flex-row justify-between">
+							<text class="text3">{{item.createTime}}</text>
+							<text class="text3">账户余额：￥{{item.beforeBalance}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+		</view>
+
+	</mescroll-uni>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
+	export default {
+		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
+		components: {
+		},
+
+		data() {
+			return {
+				downOption: {
+					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
+				},
+				upOption: {
+					auto: false, // 不自动加载
+					// page: {
+					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+					// 	size: 10 // 每页数据的数量
+					// },
+					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+					empty: {
+						icon: '/static/imageIcon/empty.png',
+						tip: '暂无内容', // 提示
+						// btnText: '去看看'
+					},
+					textNoMore: '没有更多了'
+				},
+				list:[],
+			}
+		},
+		props: {
+			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			dataTime:{
+				type:String,
+				default(){
+					return ''
+				}
+			},
+
+			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			height: [Number, String], // mescroll的高度
+
+		},
+		watch:{
+
+		},
+
+		created(){
+		},
+
+		methods: {
+
+
+			/*下拉刷新的回调 */
+			downCallback() {
+				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
+				// loadSwiper();
+				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+				this.mescroll.resetUpScroll()
+			},
+			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+			upCallback(page) {
+
+				//联网加载数据
+				let httpData = {
+					page:page.num,
+					pageSize:10,
+					dataTime:this.dataTime,
+					tradeNoType:this.index
+				}
+				if (this.index ===0){
+					httpData.tradeNoType = ''
+				}
+				this.$api.transactionRecordsList(httpData).then((res) => {
+					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+					this.mescroll.endSuccess(res.data.rows.length,res.data.rows.length === 10);
+					//设置列表数据
+					if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
+					this.list = this.list.concat(res.data.rows); //追加新数据
+					console.log(this.list)
+				}).catch((err) => {
+					//联网失败, 结束加载
+					this.mescroll.endErr();
+				})
+
+
+			},
+
+			//点击空布局按钮的回调
+			emptyClick() {
+				uni.showToast({
+					title: '点击了按钮,具体逻辑自行实现'
+				})
+			},
+			// 搜索
+			doSearch() {
+				this.list = []; // 先清空列表,显示加载进度
+				this.mescroll.resetUpScroll();
+			},
+
+			goOrderDetail(id){
+				uni.navigateTo({
+					url:'/orderPages/orderDetail/index?id='+id
+				})
+			},
+		}
+	}
+</script>
+<style>
+	@import '/common/css/common.css';
+	@import './index.rpx.css';
+
+</style>