1/pages/cloudStore/components/couponsAct.vue

<template>
	<view class="coupousAct">
		<view class="search-header">
			<u-input shape="square" maxlength="-1" placeholder="输入激活码" border="none" fontSize="28rpx" color="#AFAFAF"></u-input>
			<view :class="['search-btn','act']">搜索</view>
		</view>
		<view class="cardBody">
			<view :class="['card',{inactive:item.state>2}]" v-for="item in cardList">
				<view class="left">
					<view class="code">编号: {{item.code}}</view>
					<view class="part2">
						<text class="price">{{item.price || '/'}}</text>
						<text class="type">{{item.type}} 498 普通型</text>
					</view>
					<view class="part3">
						发放主体：{{item.bodyName}}
					</view>
					<view class="part4">
						有效期至：{{item.expirationTime | formatDate("yyyy 年 MM 月 dd 日")}}
					</view>
				</view>
				<view class="right">
					<view class="active-btn" v-if="item.state == 0">立即激活</view>
					<image class="active-state" :src="setImage(item.state)"></image>
				</view>
				<view class="top circle" ></view>
				<view class="bottom circle"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				cardList:[{
					state:0
				},{
					state:1
				},{
					state:2
				},{
					state:3
				},{
					state:4
				},
				]
			}
		},
		methods:{
			setImage(state){
				let imageUrl="http://file.hecrab.com/crab-net/yxs-cloud-store-card-state"
				if( state == 1 || state == 2) imageUrl += 1
				if( state == 3 ) imageUrl += 2
				if( state == 4 ) imageUrl += 3
				return imageUrl + ".png"
			}
		}
	}
</script>

<style lang="scss">
	.coupousAct{
		width: 750rpx;
		min-height: 100vh;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 24rpx 36rpx;
		box-sizing: border-box;
	}
	.search-header{
		width: 678rpx;
		height: 92rpx;
		background: #F8FAFB;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26rpx 0 26rpx 20rpx;
		box-sizing: border-box;
		.search-btn{
			width: 144rpx;
			height: 68rpx;
			background: #D2D2D2;
			border-radius: 12rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 39rpx;
			padding-top: 14rpx;
			box-sizing: border-box;
		}
	}
	.card{
		width: 678rpx;
		height: 206rpx;
		background: #FEF1F0;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-top: 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		&.inactive{
			background: #F4F6F6;
			color: #AFAFAF;
			.left .price{
				color: #222222;
				&::before{
					color: #222222;
				}
			}
		}
		.left{
			width: 422rpx;
			height: 170rpx;
			font-size: 24rpx;
			color: #AFAFAF;
			line-height: 34rpx;
			text-align: left;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-right: 2rpx dashed #FFC7B8;
			.price{
				font-weight: 600;
				font-size: 40rpx;
				color: #FF0000;
				line-height: 56rpx;
				text-align: left;
				margin-right: 12rpx;
				&::before{
					content: '¥';
					font-weight: 500;
					font-size: 24rpx;
					color: #FF0000;
					line-height: 34rpx;
					text-align: left;
				}
			}
		}
		.right{
			padding: 42rpx 16rpx 42rpx 0;
			box-sizing: border-box;
			position: relative;
			.active-btn{
				width: 136rpx;
				height: 74rpx;
				background: #EE4D21;
				border-radius: 20rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
			.active-state{
				position: absolute;
				bottom: -38rpx;
				right: -28rpx;
				width: 130rpx;
				height: 128rpx;
			}
		}
		.circle{
			width: 30rpx;
			height: 30rpx;
			border-radius: 15rpx;
			background: #FFFFFF;
			position: absolute;
			right: 216rpx;
			&.top{
				top: -16rpx;
			}
			&.bottom{
				bottom: -16rpx;
			}
		}
	}
	
</style>