下拉刷新

common/apis/recharge.js

@@ -11,3 +11,7 @@ export const getPayInfo = params => {
 	return http.post('/api/weixin/miniprogram/pay',params);
 } 
 
+// 充值记录
+export const getOrderList = page => {
+	return http.get('/api/user/orderlist',{page:page});
+} 

components/common/empty.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="empty-box">
-		<image :src="statics.emptyImg" style="width: 296rpx; height: 296rpx;"></image>
+		<image :src="icon" style="width: 296rpx; height: 296rpx;"></image>
 		<view class="ft14 cl-notice mt20">
 			{{title}}
 		</view>
@@ -13,6 +13,9 @@
 			title:{
 				type:String,
 				default:'暂无普通用户优惠券',
+			},icon:{
+				type:String,
+				default:"/static/img/common/empty.png"
 			}
 		},
 		data(){

pages.json

@@ -423,14 +423,14 @@
 		, {
 			"path": "pages/client/orders/orders",
 			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
+				"navigationBarTitleText": "充值记录",
+				"enablePullDownRefresh": true
 			}
 
 		}, {
 			"path": "pages/client/consume/consume",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "消费记录",
 				"enablePullDownRefresh": false
 			}
 
@@ -443,7 +443,7 @@
             }
             
         }
-	],
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "正在载入",

pages/client/components/pay/recharge.vue

@@ -9,11 +9,11 @@
 			<block v-for="(item,key) in list" :key="key">
 				<view @click="selectItem(item)" class="box mt16  options-item"
 					:class="item.id == select.id ?'select' :'' " v-if="item.type =='COIN'">
-					<p><text v-if="item.is_first_pay" class="ft14 top-lab">首冲</text></p>
+					<p><text v-if="item.is_first_pay" class="ft14 top-lab">首充</text></p>
 					<text class="ft18 pirice-txt txt-other" :style="item.is_first_pay ==1 ? '': 'padding-top:  25px;'">
 						{{item.price}}元</text>
 					<p class="ft14 cz-desc-txt txt-other">{{item.price_text}} <text
-							class="ft14 pirice-txt">+{{item.given}}币</text></p>
+							class="ft14 pirice-txt">+{{item.given}}K币</text></p>
 					<p class="ft14 cz-desc-txt txt-other" :class="item.id == select.id ?'select_text' :'given-txt' ">
 						{{item.given_amount}} <text v-if="item.id == select.id" class="ft14 xz-hh">&#10003;️</text> </p>
 				</view>

pages/client/member/index.vue

@@ -106,7 +106,7 @@
 						name: '充值记录',
 						type: 'link',
 						model: '',
-						link: '/pages/client/orders/oreders',
+						link: '/pages/client/orders/orders',
 						icon: this.$config.zystaticUrl + '/static/img/wode/wd-cz.png',
 						show: 1
 					},

pages/client/orders/orders.vue

@@ -1,22 +1,90 @@
-<template>
-	<view>
+<template>
+	<view class="body pd16_15">
+		<view class="jilu-box" v-show="list.length > 0" >
+			<view class="pb10 jilu-item"  v-for="(item,key) in list" :key="key">
+				<view class="jilu-item-box">
+					<text class="ft12 jilu-txt">订单号:{{item.trade_no}}</text>
+					<text class="ft12 jilu-txt">{{item.status}}</text>
+				</view>
+				<view class="jilu-item-box" >
+					<view class="jilu-items">
+						<image class="pay-icon" src="/static/img/orders/cj-icon.png" mode=""></image>
+						<view class="lines">
+							<text class="ft14" style="font-weight: bold;">{{item.pay_name}}</text>
+							<text class="ft12 jilu-txt">时间:{{item.pay_end_at}}</text>
+						</view>
+					</view>
+					<view class="lines">
+						<text class="ft14 jilu-txt" style="text-align: right;font-weight: bold;color:  #FF9800;">{{item.pay_result}}K币</text>
+						<text class="ft12 jilu-txt">实付金额：&yen;20.00</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="empty-box" v-if="list.length <  1 && show">
+			<image src="/static/img/orders/emty.png" mode=""></image>
+			<p class="ft14 line-1-txt">暂无充值记录</p>
+			<p class="ft14 line-2-txt">小充一笔，看更多好剧吧</p>
+			<navigator url="/pages/client/pay/pay">
+				<view class="ft16 btn-box"><text class="ft12 btn-cz">去充值</text> </view>
+			</navigator>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {getOrderList} from "@/common/apis/recharge.js"
+	export default {
+		data() {
+			return {
+				page: 1,
+				hasMore:true,
+				list: [],
+				show:false
+			}
+		},onLoad() {
+			
+		},onShow() {
+			this.page = 1;
+			this.hasMore = true;
+			this.getList();
+			uni.hideLoading();
+		},onPullDownRefresh() {
 		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
+			this.page = 1;
+			this.list = [];
+			this.getList();
+			uni.stopPullDownRefresh();
+		},onReachBottom() {
+			console.log("到底了")
+			if(!this.hasMore){
+				return false;
 			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>
+			this.getList();
+		},
+		methods: {
+			async getList() {
+				
+				if(this.page<=1 ){
+					this.show = false;
+				}
+				let res = await getOrderList(this.page);
+				if(res){
+					if(this.page >= res.last_page){
+						this.hasMore =  false;
+					}else{
+						this.page++;
+					}
+					res.data.forEach((item, index) => {
+						this.list.push(item);
+					})
+				}
+				this.show =true;
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("style/orders.css");
+</style>

pages/client/orders/style/orders.css

@@ -0,0 +1,82 @@
+.body {
+	background-color: #ffffff;
+}
+
+.empty-box {
+	padding: 20px;
+	justify-content: center;
+	text-align: center;
+}
+
+.line-1-txt {
+	text-align: center;
+}
+
+.line-2-txt {
+	text-align: center;
+	color: #9e9e9e;
+}
+
+.btn-cz {
+	width: 80px;
+	text-align: center;
+	color: #fff;
+	background-color: #FF9800;
+	text-align: center;
+	border-radius: 100px;
+	padding: 3px 15px;
+}
+
+.btn-box {
+	background-color: #fff;
+	width: 100%;
+	text-align: center;
+	display: block;
+	margin-top: 5px;
+}
+
+.jilu-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-radius: 0px;
+	background: #FFFFFF;
+}
+
+.jilu-item {
+	margin-top: 10px;
+	display: flex;
+	flex-direction: column;
+	border-bottom: solid 1rpx #d4d4d4;
+}
+
+.jilu-item:first{
+	margin-top: 0px;
+}
+.jilu-item-box{
+	display: flex;
+	justify-content: space-between;
+}
+.jilu-txt {
+	color: #9e9e9e;
+	line-height: 30px;
+}
+.lines{
+	display: flex;
+	flex-direction: column;
+	justify-content:  flex-end;
+
+}
+.jilu-items{
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	
+}
+.pay-icon{
+	margin-top: 15px;
+	margin-right: 10px;
+	align-items: center;
+	width: 30px;
+	height: 30px;
+}