template-parking-h5/src/components/label-tip/index.vue

<template>
    <div style="width: 100%;height: 100%;">
        <!-- 积分秒杀提示 -->
        <div :class="{'label-tip-box': true, 'blue-label-tip-box': custTypeId === 1, 'green-label-tip-box': custTypeId === 2}">
            <div class="label-tip">{{labelTip}}</div>
        </div>
        <!-- 图片遮罩 使用遮罩时要在其父元素设置相对定位 -->
        <div class="imgBox" :style="{'background-image': 'url('+ imgUrl +')'}" v-if="imgUrl && imgUrl.length > 0 && isShow"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import sellOut from '@/pages/pointsMall/static/images/sellOut.png'
import toSell from '@/pages/pointsMall/static/images/toSell.png'
export default {
    props: {
       labelTip: {
           type: String,
           default: ''
       },
			 // 是否即将售卖
			 isComingSoon: {
				 type: [String, Number],
				 default: ''
			 },
			 // 是否已售罄
			 batchAvailableNum: {
				 type: [String, Number, Boolean],
				 default: ''
			 }
    },
    computed: {
			...mapState({
				custTypeId: state => state.custTypeId
			}),
			imgUrl() { // 通过条件来改变遮罩图
					var url = 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/shopService/info/sellOut.png'
					if (this.isComingSoon == '1') {
						url = 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/shopService/info/toSell.png'
					}
					return url
			},
			isShow() {
				return (this.isComingSoon && this.isComingSoon == '1') || this.batchAvailableNum && this.batchAvailableNum == '0'
			}
	}
}
</script>

<style lang="less" scoped>
@import '../../styles/common.less';

.blue-label-tip-box {
	.color-label-tip-box('blue');
}
.green-label-tip-box {
	.color-label-tip-box('green');
}
.color-label-tip-box(@value) {
	@color: 'color-@{value}';
    position: relative;
	z-index: 10;
    .label-tip {
        width:112px;
        height: 0;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-bottom:50px solid @@color;
        position: absolute;
        top: 28px;
        left: -48px;
        font-size: 26px;
        letter-spacing: 2px;
        color: #C7B299;
        text-align: center;
        line-height: 50px;
        transform: rotate(-45deg);
    }
}
.imgBox {
    width: 100%;
    height: 100%;
    z-index: 20;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0px;
    background-size: 100% 100%;
}
</style>