fangliaoxiaochengxv/subPages/coupon/couponItem.vue

<template>
	<view class="coupon-item" @click="onClick" :style="{
        background: `url(${youhuiquan_bgimg}) no-repeat center top`,
        backgroundSize: '100% 100%',
      }">
		<view class="left"  >
			<view :class="['img-wrap', { disabled: config.disabled }]">
				<text class="unit">￥</text>
				<text class="number">{{ getNumber(data.coupon_price) }}</text>
			</view>
			<view class="info-wrap">
				<view class="title">{{ data.coupon_name || data.coupon_title }}</view>
				<view class="docs mtb12">满{{ data.use_min_price }}元使用</view>
				<view class="docs">{{ getFormatTime(data.start_time) }}~{{
            getFormatTime(data.end_time)
          }}</view>
			</view>
		</view>
		<view :class="[
        'right-btn',
        { disabled: config.disabled, btnPlain: config.btnPlain },
      ]">
			{{ config.btnText }}
		</view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	export default {
		props: {
			config: {
				type: Object,
				default: () => ({
					disabled: Boolean,
					btnPlain: Boolean,
					btnText: String,
				}),
			},
			data: {
				type: Object,
				default: () => ({}),
			},
		},
    data() {
      return {
        youhuiquan_bgimg: '',
      }
    },
    mounted() {
      const configs = uni.getStorageSync("configs");
      console.log(configs)
      if (configs) {
        this.youhuiquan_bgimg = configs.cs_youhuiquan_bgimg
      }
    },
		methods: {
			getNumber(data) {
				return Number(data);
			},
			getFormatTime(time) {
				return dayjs(time).format("YYYY-MM-DD");
			},
			onClick() {
        console.log("onClickonClickonClickonClickonClickonClick")
        console.log("this.config.disabled",this.config.disabled)
				if (this.config.disabled) {
					return;
				}
				this.$emit("on-click", this.data);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 184rpx;
		background-color: #fff;
    border: none;
		padding-right: 30rpx;
		//box-shadow: -2rpx 5rpx 15rpx 2rpx rgba(190, 190, 190, 0.25);
		margin-bottom: 20rpx;

		.left {
			display: flex;
			align-items: center;
      border: none;
			.img-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 185rpx;
				height: 184rpx;
        color: #AC7B43 ;
        border: none;
        font-weight: 700;

				.unit {
					font-size: 36rpx;
					margin-top: 22rpx;
				}

				.number {
					font-size: 72rpx;
				}
			}

			.info-wrap {
				margin-left: 38rpx;

				.title {
					line-height: 39rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #0c0f17;
				}

				.docs {
					font-size: 24rpx;
					font-weight: 500;
					color: #87898a;
					line-height: 34rpx;

					&.mtb12 {
						margin: 12rpx 0;
					}
				}
			}
		}

		.right-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 144rpx;
			height: 56rpx;
			font-size: 24rpx;
			line-height: 1;
			font-weight: 500;
			color: #ffffff;
			background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%);
			border-radius: 292rpx  292rpx   292rpx   292rpx ;
			&.btnPlain {
				//background: #ffffff;
        background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%);
				color: #ffffff;
			}
			&.disabled {
				background: #f2f2f2;
				color: #767676;
			}
		}
	}
</style>