<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" v-if="many == 1" @click="buy(1)"><view class="goods-buttom">一键开团</view></view> <!-- 多规格 --> <view class="goods-pay bg-danger" v-else @click="buys"><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 //秒钟 }; } }, many:{ default:9 } }, computed: { peopleMoney() { return +this.peoplePrize } }, data() { return {}; }, methods: { buy(ls) { this.$emit('buy', ls); }, buys(){ this.$emit('specOPne'); } } }; </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, #5dbc7c 0%, #5dbc7c 100%); } .goods-pay-o { border: 1px solid #ddffdf; .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: #ddffdf; // color: #FD1A2B !important; color: #5dbc7c; 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>