high-mini/subPages/unionPay-orderList/unionPay-orderList.vue

<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="orderList.length==0">
					<image :src="imagewxUrl+imgadres"></image>
				</view>
				<view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpDetails(row.id)">
					<view class="width96 height40">
						<view class="width50 flleft aliitem fotlt font16">
							<image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image>
							话费充值
						</view>
						<view class="width50 flright fotrt fcor666 font15">
							{{row.createTimed | formatDate('-')}}
						</view>
					</view>
					<view class="width96 line1 mart10"></view>

					<view class="width96 height60 mart10">
						<view class="width70 flleft fotlt ">
							<view class="font16 fontwig6 text1 fcor333">
								{{row.operatorName}}
							</view>
							<view class="font15 text1 fcor999 mart5">
								数量 : 1
							</view>
						</view>
						<view class="width30 flright fotrt fcor666 font15 fotrt">
							<view class="font16 fontwig6 text1 fcor333" v-if="row.payRealPrice">
								￥{{row.payRealPrice}}
							</view>
							<view class="font16 fontwig6 text1 fcor333" v-else>
								￥0
							</view>
							<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.payStatus]}}</view>
						</view>
					</view>
					<view class="width96 line1 mart10 marb5" v-if="row.payStatus == 101">
					</view>
					<view class="btns" v-if="row.payStatus == 101">
						<block>
							<view class="default" @tap.stop="cancelRechargeOrder(row.id)">取消订单</view>
							<view class="pay" @tap.stop="toPayment(row)">付款</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	import {
		getUserOrderListhuafei,
		cancelRechargeOrder
	} from '../../Utils/Api.js';
	let app = getApp()
	export default {
		data() {
			return {
				headerPosition: "fixed",
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				imgadres1: 'dhf.png',
				headerTop: "0px",
				typeText: {
					101: '等待付款',
					102: '订单已支付',
					100: '订单已完成',
					104: '订单已取消',
					105: '订单已退款'
				},
				// 退换货
				orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'],
				//订单列表 演示数据
				orderList: [],
				tabbarIndex: 0,
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
				loadingText: '',
				typeId: '',
				imageUrl: app.globalData.imgUrl,
				reFresh: ""
			}
		},

		onLoad(option) {
			// #ifdef H5
			this.headerTop = '44px';
			// #endif
			let tbIndex = parseInt(option.tbIndex) + 1;
			this.tabbarIndex = tbIndex;
			if (tbIndex == 0) {
				this.typeId = '';
			}
			if (tbIndex == 1) {
				this.typeId = 101;
			}
			if (tbIndex == 2) {
				this.typeId = 102;
			}
			if (tbIndex == 3) {
				this.typeId = 100;
			}
			if (tbIndex == 4) {
				this.typeId = 104;
			}
			if (tbIndex == 5) {
				this.typeId = 105;
			}
			this.getUserOrderListhuafei();
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},
		onReachBottom() {
			this.getUserOrderListhuafei();
		},
		filters: {
			toFixed: function(x) {
				return parseFloat(x).toFixed(2);
			},
			//过滤器 用于格式化时间
			formatDate: function(value, spe = '/') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		watch: {
			//监听reFresh,如果有修改就执行监听器
			reFresh: function() {
				this.tabbarIndex = 0;
				this.typeId = '';
				this.pageNum = 1;
				this.orderList = []
				this.isNoMoreData = false;
				this.getUserOrderListhuafei();
			}
		},
		methods: {
			//查询订单列表
			getUserOrderListhuafei() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let statusId = this.typeId;

				let pagenum = this.pageNum;
				let params = {
					status: statusId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}

				getUserOrderListhuafei(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list != '') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.orderList = this.orderList.concat(res.return_data.list);
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.orderList = [];
						uni.hideLoading()
					}
				})
			},
			//跳转详情
			jumpDetails(e) {
				uni.navigateTo({
					url: '../rechargeDetails/rechargeDetails?id=' + e
				})
			},
			//取消订单
			cancelRechargeOrder(row) {
				let that = this;
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							let params = {
								orderId: row,
							}
							cancelRechargeOrder(params).then(res => {
								if (res.return_code == '000000') {
									uni.hideLoading();
									uni.showToast({
										title: res.return_data,
										icon: 'none',
										duration: 2000
									})
									this.pageNum = 1;
									this.orderList = []
									this.isNoMoreData = false;
									that.getUserOrderListhuafei();
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
									uni.hideLoading()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//去支付
			toPayment(row) {
				uni.redirectTo({
					url: '../recharge-pay/recharge-pay?goodsId=' + row.goodsId + '&payPrice=' + row.payRealPrice+'&orderId='+row.id
				})
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.pageNum = 1;
				this.orderList = []
				this.isNoMoreData = false;
				if (tbIndex == 0) {
					this.typeId = '';
				}
				if (tbIndex == 1) {
					this.typeId = 101;
				}
				if (tbIndex == 2) {
					this.typeId = 102;
				}
				if (tbIndex == 3) {
					this.typeId = 100;
				}
				if (tbIndex == 4) {
					this.typeId = 104;
				}
				if (tbIndex == 5) {
					this.typeId = 105;
				}
				this.getUserOrderListhuafei();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.zspec {
		font-size: 22rpx;
		background-color: #0083f5;
		color: #FFFFFF;
		height: 40rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 44px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 0 15rpx;
		border-radius: 4px;
		margin-bottom: 10px;
		margin-left: 5px;
	}


	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f8f8f8;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: #0083f5;
					border-bottom: solid 4upx #0083f5;
				}
			}

		}
	}

	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 70vw;
					margin-top: 150px;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: calc(100% - 40upx);
				padding: 10upx 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 20upx;

				.type {
					font-size: 26upx;
					color: #0083f5;
					height: 50upx;
					display: flex;
					align-items: center;
				}

				.order-info {
					width: 100%;
					display: flex;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 25vw;

						image {
							width: 25vw;
							height: 25vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 10upx;
						position: relative;

						.name {
							width: 100%;
							font-size: 18px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.spec {
							color: #a7a7a7;
							font-size: 14px;
						}

						.price-number {
							width: 100%;
							font-size: 15px;
							display: flex;

							.price {
								font-size: 14px;
								margin-right: 5upx;
							}

						}
					}
				}

				.detail {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					height: 60upx;
					font-size: 26upx;

					.sum {
						padding: 0 8upx;
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 30upx;
						}
					}

				}

				.btns {
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					view {
						min-width: 120upx;
						height: 70rpx;
						padding: 0 20upx;
						border-radius: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #ccc;
						color: #666;
					}

					.pay {
						background-color: #0083f5;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>