yihuo/pages/award_detail/pay_freedom.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view class="relative">
                <view class="title">
                    自由超神
                    <view class="close" @click="close">
                        <text class="cuIcon-close"></text>
                    </view>
                </view>
            </view>
            <view class="paddingX15 btnList">
                <view v-for="(item, pIndex) in btns" :key="pIndex" class="marginB17">
                    <view
                        class="relative btn"
                        :class="{ active: checkNum == item }"
                        @click="checkNum = item"
                    >
                        {{ item }}
                        <text class="unit">发</text>

                        <view v-if="checkNum == item" class="checkIcon cuIcon-check"></view>
                    </view>
                </view>
            </view>
            <view class="flex-align-center paddingT13">
                <view class="relative submitBtn" :style="{ backgroundImage: 'url(' + ossurl.mine.butbj + ')' }" @click="pay">
                    <view class="">确认选择{{ price }}</view>
                </view>
            </view>
            <view class="fill"></view>
        </view>
    </view>
</template>

<script>
    import { throttle } from '@/utils'
    import resource from '@/utils/resource'
	import ossurl from '@/utils/ossurl'

    const btns = [10, 20, 30, 40, 50]
    export default {
        props: {
            data: Object,
            poolId: [Number,String]
        },
        data() {
            return {
				ossurl,
                resource,
                visible: false,
                checkNum: btns[0][0],
                btns: btns
            }
        },
        computed: {
            price() {
                if (!this.checkNum) return ''
                let tp = 0
                let price = `¥${(this.data.price * this.checkNum).toFixed(2)}`
                switch (this.checkNum) {
                    case 10:
                        tp = this.data.specialPriceTen
                            ? `优惠价 ¥${this.data.specialPriceTen}`
                            : price
                        break
                    case 20:
                        tp = this.data.specialPriceTwenty
                            ? `优惠价 ¥${this.data.specialPriceTwenty}`
                            : price
                        break
                    case 30:
                        tp = this.data.specialPriceThirty
                            ? `优惠价 ¥${this.data.specialPriceThirty}`
                            : price
                        break
                    case 40:
                        tp = this.data.specialPriceForty
                            ? `优惠价 ¥${this.data.specialPriceForty}`
                            : price
                        break
                    case 50:
                        tp = this.data.specialPriceFifty
                            ? `优惠价 ¥${this.data.specialPriceFifty}`
                            : price
                        break
                }
                return tp
            }
        },
        methods: {
            show() {
                this.visible = true
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            },
            pay() {
                if (!this.checkNum) return
                this.$emit('pay', this.checkNum)
                this.close()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        padding: 0 28rpx;
        background: #fff;
        border-radius: 15px 15px 0px 0px !important;
        .title {
            text-align: center;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            padding: 44rpx 0 48rpx 0;
            position: relative;
        }
        .x {
            width: 32rpx;
            height: 32rpx;
        }
        .close {
            position: absolute;
            right: 0rpx;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
        .btnList {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 30rpx;
        }
        .btn {
            width: 258rpx;
            height: 80rpx;
            background: #fff7e3;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            opacity: 1;

            font-size: 40rpx;
            font-weight: bold;
            color: #000000;
            text-align: center;
            line-height: 80rpx;
            position: relative;
            .unit {
                font-size: 24rpx;
                font-weight: 500;
            }
            &.active {
                background-color: #FFE957;
            }
            .checkIcon {
                position: absolute;
                bottom: 0;
                right: 0;
                color: #FFE957;
                background-color: #000000;
                height: 30rpx;
                width: 36rpx;
                font-size: 26rpx;
                line-height: 30rpx;
                border-radius: 24rpx 0 12rpx 0;
            }
        }

        .flag {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .btn-text {
            position: absolute;
            bottom: 10rpx;
        }
        .fill {
            height: 68rpx;
        }
        .submitBtn {
            width: 358rpx;
            height: 80rpx;
            border-radius: 178rpx 178rpx 178rpx 178rpx;
            font-size: 28rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #000000;
            line-height: 80rpx;
            text-align: center;
        }
    }
</style>