WenWuGuanJia/user_fenbao/huoDong/huoDong.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="我的活动" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="order-list" v-if="signupActivityList.length > 0">
			<view class="item" @click="details(item.id)" v-for="(item,index) in signupActivityList" :key="index">
				<view class="no">
					<view><text class="label">活动:</text><text>{{item.activity_title}}</text></view>
					<text class="create-time"></text>
				</view>

				<view class="order-content">
					<view class="pay-item">
						<view>
							<text class="label">姓名:</text>
							<text>{{item.name}}</text>
						</view>
						<view style="text-align: right;">
							<text class="label">手机号:</text>
							<text>{{item.mobile}}</text>
						</view>
					</view>
					<view class="pay-item">
						<view>
							<text class="label">活动时段:</text>
							<text>{{item.start_time}}~{{item.end_time}}</text>
						</view>
					</view>
				</view>
				<view class="footer">
					<text class="price">￥{{item.price}}</text>
					<view class="status">
						<text class="label">订单状态:</text><text>{{item.status_text}}</text>
						<!-- <button @click="details(item.id)" class="cu-btn round bg-gradual-orange"
							v-if="item.status ==='0'">去付款</button>
						<button @click="cancelGym" class="cu-btn round bg-gradual-orange"
							v-if="item.status==1">取消订单</button> -->
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else text="暂未报名活动" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
let that;
export default {
	onLoad(option) {
		that = this;
	},
	onShow(option) {
		that.getUserSignupActivity();
	},
	data() {
		return {
			signupActivityList: []
		};
	},
	methods: {
		details(id) {
			console.log('details')
			uni.navigateTo({
				url: '/user_fenbao/huoDong/details?id=' + id
			});
		},
		getUserSignupActivity() {
			this.$api.getUserSignupActivity(
				{
				},
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.signupActivityList = data.data;
						// console.log(that.bannerlist);
					}
				}
			);
		},
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
	
		.order-list {
			.label {
	
				display: inline-block;
				margin-right: 6rpx;
			}
	
			.item {
				background: #f9f9f9;
				color: #000;
				margin: 20rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 5rpx solid #fde6d2;
	
				.label {
					color: #000;
				}
	
				.no {
					border-bottom: 2rpx solid #cfcfcf;
					display: flex;
					padding: 20rpx;
	
					.create-time {
						flex: 1;
						text-align: right;
					}
				}
	
				.footer {
					padding: 20rpx;
					display: flex;
					align-items: center;
	
					.price {
						color: #4e4e4e;
						font-weight: 600;
					}
	
					.status {
						flex: 1;
						text-align: right;
					}
	
					u-button {
						margin-left: 20rpx;
					}
				}
	
				.order-content {
					border-bottom: 2rpx solid #cfcfcf;
					padding-top: 20rpx;
	
					.pay-item {
						padding: 0 20rpx;
						margin-bottom: 20rpx;
						display: flex;
	
						>view {
							flex: 1;
						}
					}
				}
			}
		}
}
</style>