WeChatAppH5/pages/couponCenter/ticket-item.vue

<template>
	<view class="ticket-item">
		<view class="ticket-item-content">
			<view class="ticket-tag zw-one-row" v-if="cardVal.categoryName">{{cardVal.categoryName}}</view>
			<view class="ticket-item-num">
				<text class="money"><text>￥</text>{{cardVal.couponAmount || 0}}</text>
			</view>
			<view class="ticket-item-info">
				<view class="info-item info-title">{{cardVal.cardTypeName}}</view>
				<view class="info-item info-val">使用地址：<text>{{cardVal.csmNameList}}</text> </view>
				<view class="info-item info-val">使用时间：<text>{{ cardVal.activeTime}} - {{cardVal.expireTime}}</text>
				</view>
				<view class="info-btn" v-if="cardVal.status === 'ACTIVED'" @click.stop="onUse(cardVal)">使用</view>
				<view class="info-btn info-invalid" v-if="cardVal.status === 'USED'">已使用</view>
				<view class="info-btn info-invalid" v-if="cardVal.status === 'EXPIRED'">已过期</view>
			</view>
		</view>
		<!-- <view class="ticket-explain">
			<view :class="['explain-text' , explainAll ? '' : 'zw-one-row common-text']">
				<rich-text :nodes="cardVal.useNotice"></rich-text>
			</view>
			<view class="iconfont-icon" @click.stop="explainAll = !explainAll">
				<text :class="['iconfont_yige' , explainAll ?  'show-explain' : 'hide-explain']">&#xe65f;</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			cardVal: {
				type: Object,
				default: null,
				require: true
			}
		},
		data() {
			return {
				explainAll: false
			}
		},
		methods: {
			onUse(card) {
				const data = {
					appletOriginalId: card.ymtcAppId,
					address: card.linkUrl
				};
				this.$openWXminiprogram(data, 0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ticket-item {
		width: 100%;
		overflow: hidden;
		background: linear-gradient(0deg, #faedd5, #fef6eb 48%, #faedd5);
		border: 2rpx solid #fdd3ab;
		border-radius: 20rpx;
		padding: 0 24rpx;
		position: relative;

		.ticket-tag {
			position: absolute;
			left: 2rpx;
			top: 2rpx;
			min-width: 129rpx;
			max-width: calc(100% - 4rpx);
			height: 44rpx;
			padding: 5rpx 29rpx;
			background: #fa6037;
			border-radius: 18rpx 0px 18rpx 0px;
			text-align: center;
			line-height: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.ticket-item-content {
		padding: 55rpx 0 22rpx;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		border-bottom: 1rpx dashed #ffcc9b;

		.ticket-item-num {
			width: 180rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #e2403e;
			font-size: 44rpx;

			.money {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				align-content: center;

				text {
					font-size: 32rpx;
					line-height: 38rpx;
				}
			}

		}

		.ticket-item-info {
			border-left: 1rpx dashed #ffcc9b;
			width: calc(100% - 180rpx);
			padding-left: 38rpx;

			.info-item {
				margin-bottom: 10rpx;
			}

			.info-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 38rpx;
			}

			.info-val {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
				line-height: 28rpx;

				text {
					color: #808080;
				}
			}

			.info-btn {
				margin-top: 20rpx;
				width: 141rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #feb16c, #fa6137);
				border: 1rpx solid #fa6037;
				border-radius: 29rpx;
				font-size: 24rpx;
				line-height: 54rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}

			.info-invalid {
				background: #D1D1D1 !important;
				border-color: #D1D1D1;
				color: #333333;
			}
		}
	}

	.ticket-explain {
		width: 100%;
		min-height: 70rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;

		.explain-text {
			width: calc(100% - 50rpx);
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
		}
    
    .common-text {
      /deep/ div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        // -webkit-box-orient: vertical;
      }
    }

		.iconfont-icon {

			width: 50rpx;
			text-align: right;

			.iconfont_yige {
				display: inline-block;
				font-size: 30rpx;
				color: #666666;
				line-height: 40rpx;
				transition: transform .5s;
			}

			.hide-explain {
				transform: rotate(90deg);
			}

			.show-explain {
				transform: rotate(-90deg);
			}
		}
	}
</style>