book-shop/pages-mine/components/discounts-item.vue

<template>
	<view class="coupon" >
		<view class="chuo" v-if="data.status==1">
			已使用
		</view>
		<view class="chuo" v-else-if="data.status==3">
			已过期
		</view>
		<view class="left">
			<view class="discount">
				<text>￥</text>
				<text>{{ data.amount }}</text>
			</view>
			<view class="standard">满{{ data.min_amount }}可用</view>
		</view>
		<view class="right">
			<view class="title">{{ data.title }}</view>
			<view class="date">有效期至 {{ formatDateF(data.limit_time*1000) }}</view>
		</view>
		<view class="select" v-if="select"></view>
	</view>
</view>
</template>

<script>
import { formatDate } from '@/utils/tools.js'
const app = getApp();
export default {
	props: {
		select:{
			type:Boolean,
			default:false
		},
		data: {
			type: Object,
			default: () => {
				return {};
			}
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		formatDateF(v){
			return formatDate(v);
		},
	},
	onLoad() {
		this.getUserCouponList();
	}
};
</script>

<style lang="scss" scoped>
.coupon {
	width: 100%;
	height: 174rpx;
	background-image: url('@/pages-mine/static/discounts-bg.png');
	background-size: cover;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	padding-bottom: 34rpx;
	position: relative;

	.left {
		margin-right: 60rpx;
		margin-left: 50rpx;
		.discount {
			text:nth-child(1) {
				font-size: 22rpx;
				color: $app-theme-text-money-color;
			}
			text:nth-child(2) {
				font-size: 64rpx;
				color: $app-theme-text-money-color;
			}
		}
		.standard {
			font-size: 20rpx;
			color: $app-theme-card-gray-color;
		}
	}
	.right {
		.title {
			font-size: 32rpx;
			color: $app-theme-text-black-color;
			margin-bottom: 32rpx;
		}
		.date {
			font-size: 20rpx;
			color: $app-theme-card-gray-color;
		}
	}

	.select {
		height: 60rpx;
		width: 60rpx;
		background-image: url('@/pages-mine/static/discounts-select.png');
		background-size: cover;
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		z-index: $app-zIndex-absolute;
	}
}

.chuo{
	position: absolute;
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, .5);
	top: 40rpx;
	right: 40rpx;
	transform: rotate(30deg);
	font-size: 24rpx;
}
</style>