shicai/pages/product/common/groupBottom.vue

<template>
	<view class="goods-pay-box ">
		<view class="goods-pay-buttom flex" v-if="!seckillObj.stop">
			<view class="goods-pay bg-pinks">
			<!-- 	<view class="goods-pay-o flex">
					<view class="title">本单发起人奖金</view>
					<view class="money">{{peopleMoney}}元</view>
				</view>
				<view class="goods-pay-t">
					本单销售额佣金
					<text>？%</text>
				</view> -->
				发起拼团得奖金
			</view>
			<view class="goods-pay bg-danger" @click="buy(1)"><view class="goods-buttom">一键开团</view></view>
		</view>
		<view class="goods-pay-stop" v-else>活动已结束</view>
	</view>
</template>

<script>
export default {
	props: {
		peoplePrize: {
			default:0
		},
		seckillObj: {
			type: Object,
			default: function() {
				return {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0 //秒钟
				};
			}
		}
	},
	computed: {
		peopleMoney() {
			return +this.peoplePrize 
		}
	},
	data() {
		return {};
	},
	methods: {
		buy(ls) {
			this.$emit('buy', ls);
		}
	}
};
</script>

<style lang="scss">
// 底部拼团、秒杀支付按钮
.goods-pay-box {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	width: 100%;
	height: 100rpx;
	line-height: 1;
	color: #ffffff;
	padding: 10rpx 30rpx;
	text-align: center;
	font-size: $font-lg;
	background-color: #ffffff;
	.goods-pay-buttom {
		overflow: hidden;
		border-radius: 99rpx;
		height: 100%;
	}
	.bgLine {
		background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
	}
	// 拼团支付按钮
	.goods-pay {
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		justify-content: center;
		height: 100rpx;
		font-size: 22rpx;
		.goods-buttom {
			font-size: 35rpx;
			width: 100%;
		}

		&.bg-danger {
			// background:linear-gradient(14deg,rgba(254,107,38,1),rgba(255,50,40,1));
			background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
		}
		.goods-pay-o {
			border: 1px solid #f9dcdd;
			.title {
				background:linear-gradient(14deg,rgba(254,107,38,1),rgba(255,50,40,1));
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
				line-height: 1;
				flex-shrink: 0;
			}
			.money {
				padding: 5rpx 10rpx;
				color: #ff0919;
				flex-grow: 1;
			}
		}
		.goods-pay-t {
			padding: 5rpx 10rpx;
			color: #ff0919;
			text {
				padding: 5rpx 10rpx;
				color: rgba(249, 220, 221, 1);
			}
		}
		.goods-pay-o,
		.goods-pay-t {
			width: 260rpx;
			border-radius: 5rpx;
			background-color: #fff5f4;
			border: 1px solid #f9dcdd;
		}
	}
	.bg-pinks {
		// background: linear-gradient(90deg, #f9dcdd, #feeeee);
		background: #f3eafe;
		// color: #FD1A2B !important;
		color: #b574f2;
		font-size: 32rpx !important;
		font-weight: bold;
	}
	.goods-pay-stop,
	.goods-pay {
		padding: 15rpx 0;
		height: 100%;
		width: 100%;
	}
	.goods-pay-stop {
		background: $color-gray;
		line-height: 70rpx;
	}
}
</style>