WenWuGuanJia/user_fenbao/huoDong/details.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="ban">
			<view class="order">
				<view class="attribute">
					<view class="label">
						<text>活动：</text>
					</view>
					<view class="value">
						<text>{{item.activity_title}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>姓名：</text>
					</view>
					<view class="value">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>手机号：</text>
					</view>
					<view class="value">
						<text>{{item.mobile}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>身份证号：</text>
					</view>
					<view class="value">
						<text>{{item.id_card}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>日程安排：</text>
					</view>
					<view class="value">
						<text>{{item.start_time}}~{{item.end_time}}</text>
					</view>
				</view>

				<view class="attribute">
					<view class="label">
						<text>描述：</text>
					</view>
					<view class="value">
						<text>{{item.desc}}</text>
					</view>
				</view>
				<view class="attribute" v-for="(value,key) in item.params" :key="key">
					<view class="label">
						<text>{{ key }}:</text>
					</view>
					<view class="value">
						<text>{{value}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>费用：</text>
					</view>
					<view class="value">
						<text>￥{{item.price}}</text>
					</view>
				</view>
				<view class="attribute">
					<view class="label">
						<text>积分：</text>
					</view>
					<view class="value">
						<text>{{item.price}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
let that;
	export default {
		data() {
			return {
				scrollTop: 0,
				item: []
			};
		},
		onLoad(option) {
			that = this;
			that.getUserSignupActivityDetails(option.id);
		},
		methods: {
			getUserSignupActivityDetails(id) {
				this.$api.getUserSignupActivityDetails(
					{
						signup_id: id
					},
					data => {
						if (data.code == 0) {
							that.$common.errorToShow(data.msg);
							return;
						} else {
							that.item = data.data;
							if (that.item.params === 'undefined' || that.item.params === '' || that.item.params === [] || that.item.params === null) {
							}else {
								that.item.params = Object.assign({}, ...that.item.params);
							}
							console.log(that.item, 'item');
						}
					}
				);
			},
		}
	}
</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%;
	
	.ban {
		position: relative;
		width: 92%;
		margin: auto;
	}
	
	.order {
		.attribute {
			display: flex;
			margin-bottom: 10rpx;
			background: #f0f0f0;
			padding: 20rpx;

			.label {
				display: inline-block;
				width: 140rpx;

				.icon-daohang {
					color: #000000;
					font-size: 40rpx;
					margin-right: 20rpx;
					display: block;
				}
			}

			.value {}
		}
	}

	.bottom {
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;

		.tips {
			text-align: center;
			color: $uni-color-primary;
			font-size: 24rpx;
		}
	}

	.friend {
		text-align: center;
	}

	.footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 126rpx;
		width: 100%;

		.tips {
			text-align: center;
			color: #ff7950;
			font-size: 24rpx;
		}
	}
	.scroll-Y {
			height: 400rpx;
		}
}
</style>