qimall/backend/views/components/common/diy/style-components/commission-info/style1.php

<template id="commission-info-style1">
    <div class="commission-info-style1" :style="[cardStyle]">
        <div class="my-income-container">
            <span :style="[myIncomeStyle]">{{cardText}}</span>
        </div>
        <div class="money-container">
            <span class="money-container-item-1" :style="[moneyStyle]">
                <span v-if="getIsHiddenUnit">￥</span>
                <span v-if="getIsHiddenMoney">0.94</span>
                <span v-else>****</span>
                <img style="max-width: 24px;max-height: height 24px;margin-left:8px" :src="getEyeImg">
            </span>
            <span class="money-container-item-2" :style="[withdrawBtnStyle]">提现</span>
        </div>
        <div v-if="getIsHiddenDetail">
            <span class="account-container-item" :style="[accountDetailsBtnStyle]">账单详情</span>
        </div>
        <div class="remind-container">
            <span class="remind-container-item" :style="[reminderStyle]">
                <span class="remind-container-item-1"> <img style="max-width: 24px;max-height: height 24px;" :src="getRemindImg"></span>
                <span>{{remindText}}</span>
            </span>
        </div>
    </div>
</template>

<script>
    Vue.component('commission-info-style1', {
        name: "commission-info-style1",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#commission-info-style1',
        data() {
            return {
                remindText: '每月25~31号可提现结算收益',
                cardText: '我的收益（元）',
            }
        },
        watch: {
            "activeItem.data": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        if (newVal.reminderInfo) {
                            this.remindText = newVal.reminderInfo.text
                        }
                        if (newVal.dependentInfo) {
                            this.cardText = newVal.dependentInfo.cardText
                        }
                    }
                },
                immediate: true
            },

        },
        computed: {
            cardStyle() {
                var bgColor = this.activeItem.computedStyle.tabSelectColor
                var shadowColor = this.activeItem.computedStyle.cardShadowColor
                var type = this.activeItem.computedStyle.cardBgType
                var brTop = this.activeItem.computedStyle.compRadiusTop,
                    brBottom = this.activeItem.computedStyle.compRadiusBot;
                var style = {
                    backgroundColor: `${bgColor}`,
                    borderRadius: `${brTop}px ${brTop}px ${brBottom}px ${brBottom}px`
                }

                if (shadowColor) {
                    style['box-shadow'] = `${shadowColor} 0px 0px 25px`
                }
                if (type == 2) {
                    style.backgroundImage = `url(${this.activeItem.computedStyle.tabSelectImg})`
                    style.backgroundSize = `cover`
                }
                return style
            },

            withdrawBtnStyle() {
                return {
                    backgroundColor: this.activeItem.computedStyle.withdrawBtnColor
                }
            },
            accountDetailsBtnStyle() {
                let style = {
                    backgroundColor: this.activeItem.computedStyle.accountDetailsBtnColor
                }
                return style
            },
            myIncomeStyle() {
                return {
                    color: this.activeItem.computedStyle.myIncomeColor,
                    fontSize: '17px'
                }
            },
            moneyStyle() {
                return {
                    color: this.activeItem.computedStyle.moneyColor,
                    fontSize: '24px'
                }
            },
            reminderStyle() {
                return {
                    backgroundColor: this.activeItem.computedStyle.reminderBgColor
                }
            },
            getRemindImg() {
                let remindImg = this.activeItem.computedStyle.reminderImg
                return remindImg ? remindImg : 'resources/img/decorate/commission-info/bell.png'
            },
            getIsHiddenDetail() {
                let dependentInfo = this.activeItem.data.dependentInfo || {}
                return dependentInfo.isHiddenDetail == 1 ? false : true
            },
            getIsHiddenUnit() {
                let dependentInfo = this.activeItem.data.dependentInfo || {}
                return dependentInfo.isHiddenUnit == 1 ? false : true
            },
            permission() {
                let obj = {
                    memberCode: false,
                    news: false,
                    set: false,
                    centerPage: false
                }
                let type = ['memberCode', 'news', 'set', 'centerPage']
                let data = this.activeItem.computedStyle.contentList1 || [0, 1, 2, 3]
                data.forEach((index) => {
                    const key = type[index]
                    obj[key] = true
                })
                return obj
            },
            getIsHiddenMoney() {
                let dependentInfo = this.activeItem.data.dependentInfo || {}
                return dependentInfo.isHiddenMoney == 1 ? false : true
            },
            getEyeImg() {
                const view = "resources/img/decorate/commission-info/view.png"
                const hide = "resources/img/decorate/commission-info/hide.png"
                return this.getIsHiddenMoney ? view : hide
            },
        }
    });
</script>

<style>
    .commission-info-style1 {
        padding: 8px;
        background-color: #E40A0A;
    }

    .my-income-container {
        padding: 10px 0 0 13px;
    }

    .money-container {
        display: flex;
        justify-content: space-between;
        padding: 4px 10px;
    }

    .money-container-item-1 {
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: bold;
        font-size: 26px
    }

    .money-container-item-2 {
        display: inline-block;
        padding: 6px 30px;
        border-radius: 20px;
        color: #fff
    }

    .remind-container {
        padding-top: 6px;
        padding-bottom: 10px;
        color: #fff;
    }

    .remind-container-item {
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 20px;
        color: #fff;
        margin-left: 10px;
    }

    .remind-container-item-1 {
        display: inline-block;
        padding-right: 3px;
        padding-top: 2px;
    }

    .account-container {
        padding: 10px 0
    }

    .account-container-item {
        display: inline-block;
        padding: 6px 30px;
        border-radius: 20px;
        color: #fff;
        margin-left: 10px;
    }
</style>