guanmao-wxapp/pages/mine/exchange/detail.vue

<template>
	<view class="app-container">
		<div v-if="detail">
			<view class="title">兑换码</view>
			<view class="num">{{code}}</view>
			<view class="row">
				<view class="label">活动名称</view>
				<view class="value">{{detail.name}}</view>
			</view>
			<view class="row">
				<view class="label">奖品</view>
				<view class="value">{{detail.couponName}}</view>
			</view>
			<view class="row">
				<view class="label">活动有效期</view>
				<view class="value">{{detail.startTime | dateToYYmmdd}} 至 {{detail.endTime | dateToYYmmdd}}</view>
			</view>
			<view class="row">
				<view class="label">使用有效期</view>
				<view class="value">{{detail.useStartTime | dateToYYmmdd}} 至 {{detail.useEndTime | dateToYYmmdd}}</view>
			</view>
			<view class="row" v-if="detail.couponType == 'SATISFY'">
				<view class="label">使用条件</view>
				<view class="value">购物订单满 {{detail.orderLimitAmount}}元</view>
			</view>
			<view class="row">
				<view class="label">是否兑换</view>
				<view class="value">{{detail.status ? '是':'否'}}</view>
			</view>
			<view class="row">
				<view class="label">兑换时间</view>
				<view class="value">{{detail.userExchangeTime || '-'}}</view>
			</view>
			<view class="row">
				<view class="label">是否使用</view>
				<view class="value">{{detail.use ? '是':'否'}}</view>
			</view>
			<view class="row">
				<view class="label">使用时间</view>
				<view class="value">{{detail.useTime || '-'}}</view>
			</view>
			<view class="row">
				<view class="label">使用说明</view>
				<view class="value">{{detail.useRemark || '-'}}</view>
			</view>
			<view class="row">
				<view class="label">活动说明</view>
				<view class="value">{{detail.remark || '-'}}</view>
			</view>
		</div>
		
		<view class="btn-container" v-if="type == 1">
			<view class="btn" @tap="backPage">继续兑换</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				code: null,
				detail: null,
			}
		},
		
		onLoad({type, code}) {
			this.type = type;
			this.code = code;
			this.getDetail();
		},
		
		methods: {
			getDetail() {
				this.$axios({
					url: '/promotion/luck/draw/detail',
					method: 'post',
					params: {
						code: this.code
					}
				}).then(res => {
					this.detail = res.data;
				})
			},
			
			backPage() {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 140rpx;
		box-sizing: border-box;
		.title {
			font-size: 32rpx;
			color: #999999;
		}
		.num {
			border: 1px solid #eaeaea;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			text-align: center;
			font-size: 36rpx;
			margin-top: 12rpx;
			font-weight: 600;
		}
		.row {
			display: flex;
			justify-content: space-between;
			margin-top: 25rpx;
			.label {
				color: #999999;
				flex-shrink: 0;
				width: 160rpx;
			}
			.value {
				color: #333333;
			}
		}
	}
	
	.btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
		z-index: 99;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3), 0 2px 5px 0 rgba(0, 0, 0, .3);
		.btn {
			height: 80rpx;
			width: 100%;
			text-align: center;
			line-height: 80rpx;
			border-radius: 80rpx;
			background: #FF3F42;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
</style>