1.对接话费充值 订单页面

Utils/Api.js

@@ -326,6 +326,12 @@ export const getListOutRechargePrice = params => {
 export const orderToUNionPay = params => {
 	return POST('POST', `${base}/outRechargeOrder/orderToPay`, params).then(res => res.data);
 }
+//工会卡支付
 export const hltUnionCardPayUnion = params => {
 	return POST('POST', `${base}/outRechargeOrder/hltUnionCardPay`, params).then(res => res.data);
 }
+//话费列表
+export const getUserOrderListhuafei = params => {
+	return POST('GET', `${base}/outRechargeOrder/getUserOrderList`, params).then(res => res.data);
+}
+

pages.json

@@ -511,6 +511,16 @@
 				"backgroundColorTop": "#0083f5",
 				"navigationBarTextStyle": "white"
 			}
+		},{
+			"path": "unionPay-orderList/unionPay-orderList",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationBarTitleText": "话费订单",
+				"backgroundTextStyle": "light",
+				"navigationBarBackgroundColor": "#0083f5",
+				"backgroundColorTop": "#0083f5",
+				"navigationBarTextStyle": "white"
+			}
 		}
 		]
 	}],

pages/tabBar/user/user.vue

@@ -54,6 +54,21 @@
 				</view>
 			</view>
 		</view>
+		<!-- 话费充值 -->
+		<view class="order">
+			<!-- 订单类型 -->
+			<view class="title">话费充值</view>
+			<view class="list">
+				<view class="box" v-for="(row,index) in huafeiList" :key="index" @tap="toOrdehuafeirList(index)">
+					<uni-badge style="width: 20px;position: absolute; left: 15%;" v-if="row.text == '待支付' && therrNum "
+						:text="therrNum" type="error" size="normal"></uni-badge>
+					<view class="img">
+						<view class="icon" :class="row.icon"></view>
+					</view>
+					<view class="text">{{row.text}}</view>
+				</view>
+			</view>
+		</view>
 		<!-- 工具栏 -->
 		<view class="toolbar">
 			<view class="title">卡券中心</view>
@@ -164,6 +179,26 @@
 						icon: "pingjia"
 					}
 				],
+				huafeiList:[
+					{
+							text: '待支付',
+							icon: "fukuan"
+						},
+						{
+							text: '已支付',
+							icon: "fahuo"
+						},
+						{
+							text: '已完成',
+							icon: "shouhuo"
+						}, {
+							text: '已取消',
+							icon: "pingjia"
+						}, {
+							text: '已退款',
+							icon: "tuihuo"
+						}
+				],
 				// 工具栏列表
 				mytoolbarList: [{
 						url: '/pages/goods/recording/recording?id=1',
@@ -349,6 +384,12 @@
 					url: '../../user/order_list/order_list?tbIndex=' + index
 				})
 			},
+			//话费充值
+			toOrdehuafeirList(index) {
+				uni.navigateTo({
+					url: '../../../subPages/unionPay-orderList/unionPay-orderList?tbIndex=' + index
+				})
+			},
 			toLogin() {
 				uni.showToast({
 					title: '请登录',

subPages/unionPay-orderList/unionPay-orderList.vue

@@ -0,0 +1,396 @@
+<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">
+					<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" @click="jumpDetails(row.id)">
+						<view class="width70 flleft fotlt ">
+							<view class="font16 fontwig6 text1 fcor333">
+								{{row.remarks}}
+							</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.payType == 1 || row.payType == 3">
+								￥{{row.payPrice}}
+							</view>
+							<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;" v-else>
+								<image style="width: 15px;height: 15px;"
+									src="../../../static/img/jfx.png">
+								</image>{{row.payPrice*100}}
+							</view>
+							<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.status]}}</view>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+	
+</template>
+<script>
+	import {
+		getUserOrderListhuafei
+	} 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: {
+					1: '等待付款',
+					2: '订单已支付',
+					3: '订单已完成',
+					5: '订单已取消',
+					4: '订单已退款'
+				},
+				// 退换货
+				orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'],
+				//订单列表 演示数据
+				orderList: [],
+				list: [],
+				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.list = this.orderList[tbIndex];
+			this.tabbarIndex = tbIndex;
+			this.typeId = tbIndex;
+			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}`;
+			}
+		},
+		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()
+					}
+				})
+
+
+			},
+			showType(tbIndex) {
+				this.tabbarIndex = tbIndex;
+				this.pageNum = 1;
+				this.orderList = []
+				this.isNoMoreData = false;
+				if (tbIndex == 0) {
+					this.typeId = '';
+				} else {
+					this.typeId = tbIndex;
+				}
+				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>