refactor：储值订单分页及退款

common/js/api.js

@@ -89,11 +89,11 @@ export default {
 		})
 	},
 
-	// post请求，查询充值订单列表
+	// get请求，查询充值订单列表
 	orderRechargeList(data) {
 		return request({
 			url: '/business/wechat/orderRecharge/list',
-			method: 'POST',
+			method: 'GET',
 			data: data
 		})
 	},

myPages/recharge/index.vue

@@ -297,9 +297,8 @@
 			},
 			// 充值记录
 			gotoTransactionOrderRecords(){
-				uni.$u.route({
-					url: '/pages/transaction/transaction-order-records',
-					params: {}
+				uni.navigateTo({
+					url: '/myPages/rechargeRecord/index',
 				})
 			},
 			// 查看储值协议

myPages/rechargeRecord/index.rpx.css

@@ -0,0 +1,3 @@
+.page{
+    background: #F7F7F7;
+}

myPages/rechargeRecord/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <view class="page">
+        <u-sticky>
+            <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>
+        </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" :tabs="tabList" :height="windowHeight">
+                        </mescroll-item>
+                    </view>
+                </swiper-item>
+            </swiper>
+        </view>
+
+    </view>
+</template>
+<script>
+    import MescrollItem from "./module/mescrollUni-item.vue";
+
+    export default {
+        components: {
+            MescrollItem
+        },
+        data() {
+            return {
+                windowHeight:'',
+                tabIndex:0,
+                tabList: [{
+                    name: '全部',
+                }, {
+                    name: '可退款'
+                }, {
+                    name: '不可退款',
+                }],
+
+
+            };
+        },
+        onLoad() {
+            let sysInfo = uni.getSystemInfoSync()
+            this.windowHeight =sysInfo.windowHeight-44+'px'//除标题栏栏外的屏幕可用高度
+
+        },
+        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()
+                // }
+            },
+
+
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    @import '/common/css/common.css';
+    @import './index.rpx.css';
+</style>

myPages/rechargeRecord/module/index.rpx.css

@@ -0,0 +1,84 @@
+.item{
+    background: #FFFFFF;
+    margin-top: 20rpx;
+    padding: 20rpx 20rpx;
+}
+.h-img{
+    width: 30rpx;
+    height: 30rpx;
+    margin-top: 10rpx;
+}
+.h-text{
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 44rpx;
+    margin-left: 10rpx;
+}
+.a{
+    width: 210rpx;
+    height: 120rpx;
+    background: #FFFCEE;
+    border-radius: 12rpx;
+    margin-top: 20rpx;
+
+
+}
+
+.b{
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    line-height: 70rpx;
+    text-align: center;
+}
+
+.c{
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 50rpx;
+    text-align: center;
+}
+.aColor{
+    color: #333333;
+}
+.bColor{
+    color: #ED569F;
+}
+.cColor{
+    color: #93D21A;
+}
+
+.de{
+    margin-top: 20rpx;
+}
+
+.d{
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 44rpx;
+}
+.e{
+    font-size: 36rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 44rpx;
+}
+.op-btn{
+    margin-top: 20rpx;
+    width: 200rpx;
+    height: 64rpx;
+    background: #FFE05C;
+    border-radius: 32rpx;
+    text-align: center;
+    line-height: 64rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+}

myPages/rechargeRecord/module/mescrollUni-item.vue

@@ -0,0 +1,234 @@
+<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="h-value flex-row">
+					<image class="h-img" src="/static/order/ud7.png" mode=""></image>
+					<text class="h-text">订单编号：{{item.orderNo}}</text>
+				</view>
+				<view class="h-value flex-row">
+					<u-icon name="clock" color="#666666" size="16"></u-icon>
+					<text class="h-text">储值时间：{{item.paymentTime}}</text>
+				</view>
+				<view class="flex-row justify-around">
+					<view>
+						<view class="a">
+							<view class="b aColor">
+								<text>￥{{item.realRechargeAmount || 0}}</text>
+							</view>
+							<view class="c">
+								<text>储值金额</text>
+							</view>
+						</view>
+						<view class="a">
+							<view class="b aColor">
+								<text>￥{{item.rechargeBalance || 0}}</text>
+							</view>
+							<view class="c">
+								<text>储值余额</text>
+							</view>
+						</view>
+					</view>
+					<view>
+						<view class="a">
+							<view class="b bColor">
+								<text>￥{{item.rewardAmount || 0}}</text>
+							</view>
+							<view class="c">
+								<text>赠送金额</text>
+							</view>
+						</view>
+						<view class="a">
+							<view class="b bColor">
+								<text>￥{{item.rewardBalance || 0}}</text>
+							</view>
+							<view class="c">
+								<text>赠送余额</text>
+							</view>
+						</view>
+					</view>
+					<view>
+						<view class="a">
+							<view class="b cColor">
+								<text>{{item.couponNum || 0}}</text>
+							</view>
+							<view class="c">
+								<text>赠送优惠券数</text>
+							</view>
+						</view>
+						<view class="a">
+							<view class="b cColor">
+								<text>{{item.surplusCouponNum || 0}}</text>
+							</view>
+							<view class="c">
+								<text>剩余优惠券数</text>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="flex-row justify-between de">
+					<view class="flex-col">
+						<view class="flex-row">
+							<text class="d">当前可用余额：</text>
+							<text class="e">￥{{item.availableBalance}}</text>
+						</view>
+						<view class="flex-row ">
+							<text class="d">可退余额：</text>
+							<text class="e">￥{{item.refundableBalance}}</text>
+						</view>
+					</view>
+					<view>
+						<view  @click="gotoSubmitTransaction(item)" v-if="item.rechargeBalance > 0 && !item.refundStatus" class="op-btn">
+							<text>申请退款</text>
+						</view>
+						<view v-else-if="item.refundStatus == 1"  class="op-btn">
+							<text>审核中</text>
+						</view>
+						<view v-else-if="item.refundStatus == 2"  class="op-btn">
+							<text>已同意</text>
+						</view>
+						<view v-else-if="item.refundStatus == 3"  class="op-btn">
+							<text>已驳回</text>
+						</view>
+						<view v-else-if="item.refundStatus == 4"  class="op-btn">
+							<text>退款成功
+							</text>
+					</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 = {
+					pageNum:page.num,
+					pageSize:10,
+					type:this.index
+				}
+
+				this.$api.orderRechargeList(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();
+			},
+
+			gotoSubmitTransaction(item){
+				uni.navigateTo({
+					url:'/myPages/transactionPassword/index?data='+JSON.stringify(item)
+				})
+			},
+
+		}
+	}
+</script>
+<style>
+	@import '/common/css/common.css';
+	@import './index.rpx.css';
+
+</style>

myPages/transactionPassword/index.vue

@@ -0,0 +1,113 @@
+<template>
+    <view class="">
+        <view class="h-content">
+            <u--form
+                    labelPosition="left"
+                    :model="reqParm"
+                    ref="form1"
+            >
+                <u-form-item
+                        labelWidth="auto"
+                        labelAlign="right"
+                        prop="tradPassword"
+                        borderBottom
+                >
+                    <u--input
+                            v-model="reqParm.tradPassword"
+                            disabledColor="#ffffff"
+                            placeholder="请输入交易密码"
+                            border="bottom"
+                            type="password"
+                            maxlength="6"
+                    ></u--input>
+                </u-form-item>
+                <u--textarea v-model="reqParm.refundReason" placeholder="请在此处输入退款原因" ></u--textarea>
+            </u--form>
+            <view @click="submitData" class="op-btn">
+                <text>提交</text>
+            </view>
+        </view>
+
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                order:{},
+                reqParm: {
+                    auth: true,
+                    orderNo: null,
+                    tradPassword: '',
+                    refundReason: ''
+                },
+                rules: {
+                    tradPassword: {
+                        required: true,
+                        min: 6,
+                        max: 6,
+                        message: '请输入6位密码',
+                        trigger: ['blur', 'change'],
+                    }
+                },
+            };
+        },
+        onLoad(option) {
+            // 判断Openid是否为空
+            this.order = JSON.parse(option.data)
+            this.reqParm.orderNo = this.order.orderNo;
+        },
+        onReady() {
+            this.$refs.form1.setRules(this.rules)
+        },
+        methods: {
+            submitData() {
+                let that = this;
+                // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
+                this.$refs.form1.validate().then(res => {
+                    that.orderRechargeRefund();
+                }).catch(errors => {
+                    uni.$u.toast('校验失败,请认真填写')
+                })
+
+            },
+            // 退款
+            orderRechargeRefund(){
+                this.$api.orderRechargeRefund(this.reqParm).then((res)=>{
+                    uni.showToast({
+                        title: '已提交申请，请耐心等待'
+                    })
+                    uni.navigateTo({
+                        url: '/myPages/rechargeRecord/index'
+                    });
+                }).catch((err) =>{
+                    uni.showToast({
+                        title: err.msg
+                    })
+                });
+            },
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .h-content{
+        // margin-top: 100px;
+        background: #fff;
+        padding-left: 12px;
+        padding-right: 12px;
+        padding-bottom: 100px;
+        .op-btn{
+            margin: 0 auto;
+            margin-top: 20px;
+            text-align: center;
+            line-height: 42px;
+            width: 343px;
+            height: 42px;
+            background: #FFE05C;
+            border-radius: 27px;
+        }
+    }
+
+</style>

myPages/transactionRecord/module/mescrollUni-item.vue

@@ -111,7 +111,7 @@
 
 				//联网加载数据
 				let httpData = {
-					page:page.num,
+					pageNum:page.num,
 					pageSize:10,
 					dataTime:this.dataTime,
 					tradeNoType:this.index

myPages/transactionRecordDetail/index.vue

@@ -155,4 +155,7 @@
             }
         }
     }
+    .td-text{
+        font-size: 26rpx;
+    }
 </style>

pages.json

@@ -133,6 +133,20 @@
 		{
 			"root": "myPages",
 			"pages": [
+				{
+					"path": "transactionPassword/index",
+					"style": {
+						"navigationBarTitleText": "输入密码",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "rechargeRecord/index",
+					"style": {
+						"navigationBarTitleText": "储值订单",
+						"enablePullDownRefresh": false
+					}
+				},
 				{
 					"path": "transactionRecord/index",
 					"style": {