yihuo/pages/withdraw/rule.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view>
                <view>
                    <view class="title">
                        {{ title }}
                        <view class="close" @click="close">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>
                <view class="content" v-html="data"></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: '',
                data: null,
                visible:false
            }
        },
        computed: {
            title() {
                if (this.type == 'wallet_withdraw_xy') {
                    return '提现协议'
                } else {
                    return '提现规则'
                }
            }
        },
        methods: {
            show(type) {
                this.visible = true
                this.type = type
                this.data = null
                this.refresh()
            },
            refresh() {
                this.getData()
            },
            async getData() {
                const res = await this.$service.user.getParamConfig(this.type)
                this.data = res.data
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .content{
      max-height: 60vh;
      overflow: auto;
      padding-bottom: 60rpx;
    }
    .wrapper {
        background: #fff;
        border-radius: 15px 15px 0px 0px !important;
        overflow: hidden;
        .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;
        }

        .close {
            position: absolute;
            right: 0;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
    }
</style>