junzitang/pagesT/components/coupon/VipView.vue

<template>
	<!-- 会员卡面板 -->
	<view class="mask" :class="!maskState ? 'none' : maskState ? 'show' : ''">
		<view class="shadow-bg"></view>
		<view class="mask-content" @click.stop.prevent="stopPrevent">
			<view class="dont-use"><text @click="dontUse">不使用会员卡</text></view>
			<view v-for="(item) in vipList" :key="item.id" @click="selvip(item)" style="margin:10rpx 0">
				<view class="bg_color" :class="item.styleId===1?'card-style-golden':item.styleId===2?'card-style-erythrine':item.styleId===3?'card-style-gray':item.styleId===4?'card-style-brown':item.styleId===5?'card-style-blue':item.styleId===6?'card-style-black':''">
					<view class="clearfix">
						<view class="float_left">
							<view class="vip-name">
								<image class="vip-img" src="https://onlineimg.qianniao.vip/vip-icon.png" mode="aspectFit" />
								<text class="vip-name-tit">{{item.name}}</text>
							</view>
							<view class="expiration">有效期至：{{ item.effectiveDate === 5 ? '长期有效' : item.effectiveMonth + '个月'}}</view>
						</view>
						<view class="float_right discount">
							<text class="rmb-ic">￥</text>
							{{$_utils.formatNub(item.price)}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			maskState: {
				type: Boolean,
				default: false
			},
			vipList: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		onLoad() {
			this.vipList()
		},
		data() {
			return {}
		},
		methods: {
			stopPrevent() {},
			//不使用优惠
			dontUse() {
				this.$emit('dontUse');
			},
			// 选择优惠券
			selvip(row) {
				this.$emit('selvip', row);
			}
		}
	};
</script>

<style lang="scss">
	/* 优惠券面板 */
	.mask {
		position: fixed;
		left: 0;
		top: 100%;
		// bottom: 0;
		width: 100%;
		// background: rgba(0, 0, 0, 0);
		z-index: 9995;
		height: 100vh;
		transition: 0.3s;

		.shadow-bg {
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.mask-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			z-index: 9995;
			// transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;

			.dont-use {
				text-align: right;
				color: #666;
				font-size: 24upx;
				padding: 20upx 30upx;
			}
		}

		&.none {
			top: 100%;

			.shadow-bg {
				display: none;
			}

			.mask-content {
				transform: translateY(100%);
			}
		}

		&.show {
			top: 0;

			.shadow-bg {
				display: block;
			}

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	.card-style-golden {
		background: linear-gradient(to right, #c1a167, #e9d5aa);
	}

	.card-style-erythrine {
		background: linear-gradient(to right, #745757, #966d6d);
	}

	.card-style-gray {
		background: linear-gradient(to right, #434247, #7a7985);
	}

	.card-style-brown {
		background: linear-gradient(to right, #736e6c, #978c8c);
	}

	.card-style-blue {
		background: linear-gradient(to right, #576074, #6d7b96);
	}

	.card-style-black {
		background: linear-gradient(to right, #373737, #4a4a4a);
	}

	.bg_color {
		position: relative;
		margin: 0 auto;
		width: 600upx;
		border-radius: 10upx;
		color: #FFFFFF;
		padding: 20upx;

		.vip-img {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			opacity: 0.9;
		}

		.vip-name {
			font-size: 30upx;

			.vip-name-tit {
				padding-left: 15upx;
			}
		}

		.discount {
			font-size: 60upx;
			font-weight: bold;
			text-align: right;

			.rmb-ic {
				font-weight: 400;
				font-size: 24upx;
				margin-right: 10upx;
			}
		}

		.expiration {
			padding: 10upx 0;
			font-size: 24upx;
			color: rgba($color: #ffffff, $alpha: 0.7);
		}
	}
</style>