wx-yunyubang-miniprogram/pages/active/my.vue

<template>
	<view class="content">
		<view class="end-title" style="display:none;">
			<view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
				{{item}}
				<view class="line"></view>
			</view>
		</view>
		<view class="end-cont" :class="{dis:btnnum == 0}">
			<view class="statusBox">
				<text v-for="(item,index) in statusLabels" :key="index" @click="changeStatus(item.state)"
					:class="{cur: item.state == status}">{{item.txt}}</text>
			</view>
			<view style="height:120rpx;"></view>
			<view v-if="list.length>0">
				　　<view class="orderCol" v-for="(item, index) in list" :key="item.id" @click="goDetail(item.id)">
					<view class="orderNo">
						<text>订单编号：</text><text>{{item.serial}}</text>
					</view>
					<view class="title">
						<view>{{item.order_name || '暂无'}}<!-- <text class="free">免费</text> -->
						</view>
						<view class="status">{{item.statusName}}</view>
					</view>
					<view class="infoList">
						<view class="infoCol">
							<view class="date">
								<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
								{{timeFormat(item.created_at, 'yyyy年mm月dd日')}}
							</view>
							<view class="price"><text>¥</text>{{item.total}}</view>
						</view>
						<!--<view class="infoCol"><view class="address"><image mode="heightFix" src="../../static/icon_dizhi.png"></image>苏州·园区星海街188号苏州万怡大酒店南栋大酒店南栋</view></view>-->
					</view>
					<view class="btn">
						<text @click.stop="goDetail(item.id)"> 查看 </text>
						<text v-if="item.state=='unpaid'" class="pay" @click.stop="goPay(item.id)"> 支付 </text>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="info-none"> {{list.length>0?"":"暂无数据"}} </view>
			</view>

		</view>
		<view class="end-cont" :class="{dis:btnnum == 1}">
			<view class="statusBox">
				<text>待付款</text>
				<text class="cur">待服务</text>
				<text>已服务</text>
				<text>待评价</text>
			</view>
			　　<view class="orderCol">
				<view class="title">
					<view>33孕期保健Q&A<text class="free">免费</text></view>
					<view class="status">待参加</view>
				</view>
				<view class="infoList">
					<view class="infoCol">
						<view class="date">
							<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>2021-02-10 14:00
						</view>
						<view class="price"><text>¥</text>100</view>
					</view>
					<view class="infoCol">
						<view class="address">
							<image mode="heightFix" src="../../static/icon_dianpu@2x.png"></image>苏州·园区星海街188号苏州万怡大酒店
						</view>
					</view>
				</view>
				<view class="btn"><text>投诉</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '../../utils/weixin.js';
	//{"0":"待确认","10":"待支付","20":"进行中","100":"已完成"}
	export default {
		data() {
			return {
				info: {
					token: ''
				},
				btnnum: 0,
				items: ["活动订单", "商品订单"],
				count: "",
				token: '',
				page: 1,
				list: [],
				status: "",
				statusLabels: [{
					state: "",
					txt: "全部"
				}, 
				// {
				// 	state: "unpaid",
				// 	txt: "待支付"
				// }, 
				{
					state: "ongoing",
					txt: "待参加"
				}, {
					state: "finished",
					txt: "已参加"
				}],
				user_info: {},
				openid: ""
			}
		},
		onLoad(options) {
			const userInfo = uni.getStorageSync('userInfo')
			this.info.phone = userInfo.user_info.phone
			this.token = userInfo.access_token;
			var that = this;
			if (!weixin.isNull(options.status))
				this.status = options.status
			weixin.getOpenidInfo(info => {
				that.user_info = info.user_info
			}, false)
			this.openid = that.user_info.openid;
		},
		onShow() {
			this.list = []
			this.getOrderList(1)
		},
		onReachBottom() {
			this.getOrderList(this.page + 1)
		},
		methods: {
			timeFormat(time,format){
				//this.util.
			},
			changeStatus(status) {
				this.status = status
				this.list = []
				this.getOrderList(1)
			},
			change(e) {
				this.count = e
				this.btnnum = e
				console.log(this.count)
			},
			goDetail(id) {
				uni.navigateTo({
					url: "../orderPackageDetail/orderPackageDetail?id=" + id
				})
			},
			goPay(id) {
				var that = this;
				weixin.request({
					api: '/api/member/order-payment',
					method: 'GET',
					data: {
						order_id: id,
						openid: this.openid
					},
					utilSuccess: res => {

						weixin.getOpenidInfo(() => {}, true);
						setTimeout(function() {
							uni.hideLoading();
							that.showPop = false;
						}, 100);
						try {
							let payParams = JSON.parse(res.jsApiParameters)
							payParams.provider = 'wxpay'
							payParams.success = result => {
								that.status = "ongoing";
								that.loadData(that.currentPage);
							}
							payParams.fail = result => {
								console.log(result);
							}
							wx.requestPayment(payParams);

						} catch (err) {
							console.log(err)
						} finally {
							// finallyCode - 无论 try / catch 结果如何都会执行的代码块
						}
					},
					utilFail: res => {
						uni.showToast({
							title: res
						})
						console.log(res);
					}
				})
			},
			getOrderList(page) {
				const userInfo = uni.getStorageSync('userInfo')
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				var data = {
					page: page,
					page_size: 6,
					token: userInfo.access_token
				}
				if (this.status != "") {
					data = {
						...data,
						state: this.status
					};
				}
				var that = this;
				uni.request({
					url: this.baseUrl + '/api/member/get-orders',
					method: 'GET',
					data: data,
					success: r => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);

						var hasNoMore = that.list.length < 5 && page > 1;
						if (hasNoMore || r.data.data.length == 0 && page > 1) {
							// 已加载到最后一页
							uni.showToast({
								title: '已加载到最后一页',
								icon: 'none'
							});
							return;
						}

						for (var m of r.data.data) {
							var mod = this.statusLabels.filter((p) => {
								return p.state == m.state;
							})[0];
							if (mod)
								m.statusName = mod.txt;
						}
						this.list = this.list.concat(r.data.data);
						this.page = page;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.info-none {
		padding: 40rpx;
		color: #6E6E6E;
	}

	.end-title {
		display: flex;
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 12px 0px #DEE4E7;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.end-title view {
		flex-grow: 1;
		text-align: center;
		position: relative;

		.line {
			position: absolute;
			width: 128rpx;
			height: 8rpx;
			background: #FF578A;
			border-radius: 4rpx;
			bottom: 0;
			left: 50%;
			margin-left: -64rpx;
			display: none;
		}
	}

	.end-cont {
		display: none;
		// padding-top:88rpx;
	}

	.orderNo {
		padding: 20rpx 0rpx;
	}

	.btna {
		color: #FF578A;
	}

	.btna .line {
		display: block !important;
	}

	.dis {
		display: block;
	}

	.orderCol {
		background: #fff;
		border-radius: 16rpx;
		width: 710rpx;
		margin: 20rpx auto 0 auto;
		padding: 0 30rpx;
		box-sizing: border-box;

		.title {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			.free {
				display: inline-block;
				width: 58rpx;
				height: 32rpx;
				background: #FF753E;
				border-radius: 6rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
				margin-left: 10rpx;
			}

			.status {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
		}

		.btn {
			display: flex;
			justify-content: flex-end;
			padding: 30rpx 0;


			text {
				display: block;
				width: 160rpx;
				height: 64rpx;
				border-radius: 8rpx;
				border: 2rpx solid #DEDEDE;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				text-align: center;
				line-height: 64rpx;
				margin-left: 20rpx;
			}

			text.pay {
				border: 2rpx solid #FF578A;
				color: #FF578A;
			}
		}

		.infoList {
			.infoCol {
				display: flex;
				justify-content: space-between;
				color: #666;
				font-size: 28rpx;
				line-height: 1.8;
				align-items: center;
				align-content: center;

				.date image {
					width: 26rpx;
					height: 26rpx;
					display: inline-block;
					margin-right: 12rpx;
				}

				.bulid {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.bulid image {
					width: 25rpx;
					height: 26rpx;
					display: inline-block;
					margin-right: 12rpx;
				}

				.address {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.address image {
					width: 24rpx;
					height: 26rpx;
					display: inline-block;
					margin-right: 12rpx;
				}

				.price {
					font-size: 36rpx;
					font-weight: 500;
					color: #FF578A;

					text {
						font-size: 28rpx;
						margin-right: 5rpx;
					}
				}
			}
		}
	}

	.statusBox {
		width: 750rpx;
		margin: 2rpx auto;
		box-sizing: border-box;
		height: 120rpx;
		background: #fff;
		display: flex;
		padding: 0 30rpx;
		justify-content: space-around;
		align-items: center;
		align-content: center;
		color: #666;
		font-size: 28rpx;
		position: fixed;
		left: 0;
		top: -1rpx;

		text {
			display: block;
			width: 156rpx;
			height: 64rpx;
			background: #F0F0F0;
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
		}

		.cur {
			background: #FF578A;
			color: #fff;
		}
	}
</style>