mabao/pages/personal/coupon/coupon_details.vue

<template>
	<view style="width: 100%;height: 100%;background-color: #0B73B9;">
		<view class="v">
			<view class="" style="font-size: 28rpx;color: #666;">
				{{datainfo.title}}
			</view>
			<view class="" style="font-size: 56rpx;margin-top: 28rpx;margin-bottom: 10rpx;" v-if="datainfo.type == 1">
				￥{{datainfo.money/100}}
			</view>
			<view class="" style="font-size: 56rpx;margin-top: 28rpx;margin-bottom: 10rpx;" v-else>
				{{datainfo.discount}}折
			</view>
			<view class="">
				{{datainfo.name}}
			</view>
			<view class="buttomstyle">
				{{datainfo.status==1?'未使用':datainfo.status==2?'已使用':'已过期'}}
			</view>
		</view>
		<view class="details">
			<view class="title">
				有效期
			</view>
			<view class="">
				{{formatDate(datainfo.start_time*1000)}} - {{formatDate(datainfo.end_time*1000)}}
			</view>
			<view class="title">
				使用规则
			</view>
			<view class="">
				{{datainfo.rules||'暂无使用规则'}}
			</view>
			<view class="title">
				使用说明
			</view>
			<view class="">
				{{datainfo.desc||'暂无使用说明'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(op) {
			this.datainfo = op.data
			console.log(this.datainfo)
			this.datainfo = JSON.parse(this.datainfo)
		},
		data() {
			return {
				datainfo: '',

			}
		},
		methods: {

		},
	}
</script>

<style>
	Page {
		height: 100%;
	}

	.v {
		background-color: #fff;
		margin: 0 25rpx;
		text-align: center;
		padding-top: 60rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		color: #353535;
		font-size: 32rpx;
		position: relative;
		top: 25rpx;
	}

	.details {
		background-color: #fff;
		margin: -2rpx 25rpx 0;
		font-size: 28rpx;
		padding: 25rpx 40rpx 65rpx;
		border-bottom-left-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.details>.title {
		color: #b0b0b0;
		font-size: 26rpx;
		margin-bottom: 25rpx;
		margin-top: 50rpx;
	}

	.buttomstyle {
		background-color: #fff;
		color: #0B73B9;
		/* border: 0.5px solid #ff4544; */
		height: 56rpx;
		line-height: 52rpx;
		width: 240rpx;
		margin: 35rpx auto 0;
		font-size: 30rpx;
		border-radius: 28rpx;
	}
</style>