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,item.is_used)"
					: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.active_name || '暂无'}}<!-- <text class="free">免费</text> -->
						</view>
						<view class="status">
							{{item.statusName}}
						</view>
					</view>
					<view class="infoList">
						<u-row gutter="16" class="infoCol">
							<u-col span="4">
								<view class="date">								
									<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
									开始时间：
								</view>
							</u-col>
							<u-col span="8" v-if="item.start_date">
								<view>{{$u.timeFormat(new Date(item.start_date.replace(/-/g,'/')), 'yyyy年mm月dd日')}} {{item.start_time}}</view>
							</u-col>
							<u-col span="4">
								<view class="date">								
									<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
									结束时间：
								</view>
							</u-col>
							<u-col span="8" v-if="item.end_date">
								<view>{{$u.timeFormat(new Date(item.end_date), 'yyyy年mm月dd日')}} {{item.end_time}}</view>
							</u-col>
							<u-col span="4">
								<view class="date">
									<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
									活动地点：
								</view>
							</u-col>
							<u-col span="8" v-if="item.address">
								{{item.address}}
							</u-col>
						</u-row>
						
						<!--<view class="infoCol"><view class="address"><image mode="heightFix" src="../../static/icon_dizhi.png"></image>苏州·园区星海街188号苏州万怡大酒店南栋大酒店南栋</view></view>-->
					</view>
					<view class="btn">
						<text v-if="item.statusName=='待参加'" @click.stop="showCode(item.apply)"> 核销码 </text>
						<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>
		
			<u-popup class="codepop" v-model="showCodes" mode="center" closeable="true">
				<view class="userBox" style="padding:0 120rpx 60rpx 120rpx;">
					<view class="userInfoContent" style="padding: 40rpx;font-size: 28rpx;">
						<text class="">核销码：{{codetext}}</text>
					</view>
					<view class="qrcode">
						<canvas canvas-id='qrcode' style="width: 170px;height:170px;margin: 0 auto;">

						</canvas>
					</view>
				</view>
			</u-popup>
		
		<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';
	import uQRCode from "@/utils/qrcode.js"
	//{"0":"待确认","10":"待支付","20":"进行中","100":"已完成"}
	export default {
		data() {
			return {
				info: {
					token: ''
				},
				btnnum: 0,
				items: ["活动订单", "商品订单"],
				count: "",
				token: '',
				page: 1,
				list: [],
				status: "",
				is_used:"",
				showview:false,
				showCodes:false,
				codetext:"",
				statusLabels: [{
					state: "",
					txt: "全部",
					is_used:""
				}, 
				// {
				// 	state: "unpaid",
				// 	txt: "待支付"
				// }, 
				{
					state: "ongoing",
					txt: "待参加",
					is_used:0
				}, {
					state: "finished",
					txt: "已参加",
					is_used:1
				}],
				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
				for(var k of this.statusLabels){
					if(k.state==options.status){
						this.is_used = k.is_used
					}
				}
			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: {
			changeStatus(status,used) {
				this.status = status
				this.is_used = used
				this.list = []
				this.getOrderList(1)
			},
			change(e) {
				this.count = e
				this.btnnum = e
				console.log(this.count)
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/active/detail?id=" + id
				})
			},
			showCode(apply){
					if(apply.length<1){
						return
					}
					let text = "1234"
					for(var k of apply){
						text = k.code
					}
					if(!text){
						uni.showModal({
							title: '',
							content: "暂无核销码",
							showCancel: false
						});
						return
					}
					this.codetext = text
					console.log("text",text)
					var id = "qrcode";
					// if (qrcode) {
					// 	id = qrcode
					// }
					this.showCodes = true
					uQRCode.make({
						canvasId: id,
						componentInstance: this,
						text: text,
						size: 170,
						// margin: 10,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H,
						success: res => {
							
						}
					})
				
			},
			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,
					myself:1,
					is_used:this.is_used,
				}
				if (this.status != "") {
					data = {
						...data,
						state: this.status
					};
				}
				var that = this;
				uni.request({
					url: this.baseUrl + '/api/member/active-list',
					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) {
							if(m.apply){
								m.statusName = m.apply[0]['used_time']?'已参加':"待参加"
							}
							
						}
						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>