baodeng_xcx/pages/tj.vue

<template>
	<view class="page">
		<u-navbar :is-back="false"  title="订单" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#fff' title-size='36'
			height='36'	id="navbar">
		</u-navbar>
		<view class="nav"></view>
        <scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white" v-if="orderlist.length != 0">
			<view class="list_item" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.id)">
				<view class="top">
					<view class="">
						充值类-爆灯充值
					</view>
					<view class="">
						<text style="font-size: 26rpx;" v-if="item.status == 'FINISHED'">交易成功</text>
						<text v-if="item.status == 'WAIT PAY'" style="color: #9F9F9F;font-size: 26rpx;">交易取消</text>
						<text v-if="item.status == 'CANCELED'" style="color: #9F9F9F;font-size: 26rpx;">交易取消</text>
						<text style="font-size: 26rpx;" v-if="item.status == 'REFUNDED'">交易成功</text>
						<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_PAY'">待支付</text>
					</view>
				</view>
				<view class="bd">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ubGWMXEuBaNSGPLrcN7P" mode=""></image>
					</view>
					<view class="rt">
						<view class="bai">
							爆灯充值-{{item.suitNum}}次
						</view>
						<view class="hui">
							下单时间：{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="">
						
					</view>
					<view class="">
						<text>金额：￥{{item.payAmount}}</text>
					</view>
				</view>
			</view>
			<view class="wu">
				没有更多订单了...
			</view>
		</scroll-view>
		<view style="width: 480rpx;height: 373rpx;margin: auto;margin-top: 390rpx;" v-else>
		  <image src="https://api.ccttiot.com/smartmeter/img/static/uEiNJh8Rfurw9ORQzlit" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#010000",
				},
				orderlist:[],
				total:'',
				pageNum:1,
				isRefreshing: false
			}
		},
		onShow() {
			this.pageNum = 1 
			this.getlist()
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.getlist()
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			getlist(){
				 this.$u.get(`/app/order?pageNum=${this.pageNum}&pageSize=20&`).then(res =>{
					 if(res.code == 200){
						 this.total = res.total
						 if(this.pageNum == 1){
							 this.orderlist = res.rows
							 this.pageNum++
						 }else{
							 this.orderlist = this.orderlist.concat(res.rows)
							 this.pageNum++
						 }
					 }else if(res.code == 401){
						 uni.showModal({
						   title: '提示',
						   content: '你还未登录，是否去登录？', 
						   success: function (res) {
						     if (res.confirm) {
						       console.log('用户点击确定')
						 	  uni.reLaunch({
						 	  	url:'/pages/login/login'
						 	  })
						     } else if (res.cancel) {
						       console.log('用户点击取消')
						     }
						   }
						 })
					 }
				 })
			},
            // 上拉加载更多
			handqixing(){
				if(this.total > this.orderlist.length){
					this.getlist()
				}else{
					console.log(11);
				}
			},
			// 点击进入订单详情
            btnxq(orderid){
				uni.navigateTo({
					url:'/pages/nearbystores/index?orderid=' + orderid
				}) 
			}			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #111111;
	}
	.list{
		width: 100%;
		height: 86vh;
		overflow: scroll;
		.wu{
			font-size: 24rpx;
			color: #808080;
			width: 100%;
			text-align: center;
			margin-top: 36rpx;
		}
		.list_item{
			width: 702rpx;
			height: 288rpx;
			background: #010000;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			margin-top: 26rpx;
			padding: 22rpx 34rpx;
			box-sizing: border-box;
			.bot{
				display: flex;
				justify-content: space-between;
				padding: 0 2rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #9F9F9F;
				text{
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 28rpx;
				}
			}
			.bd{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.lt{
					image{
						width: 122rpx;
						height: 122rpx;
					}
					margin-right: 42rpx;
				}
				.rt{
					.bai{
						font-size: 26rpx;
						color: #FFFFFF;
						margin-top: 6rpx;
					}
					.hui{
						font-size: 26rpx;
						color: #9F9F9F;
						margin-top: 10rpx;
					}
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
    .nav{
		width: 100%;
		height: 30rpx;
		background-color: #010000;
	}
	
</style>