qimall/backend/views/components/common/diy/style-components/member-info/style2.php

<template id="member-info-style2">
    <div class="member-info-style2">
        <div class="user-info flex">
            <div class="user-avarat">
                <img class="default_picture" :src="static_img_prefix+'/default_picture.png'" />
            </div>
            <div class="member-box">
                <div class="flex-y-center">
                    <div class="user-name" :style="{color:levelStyle.nameColor}">张三还是李四</div>
                </div>
                <div class="flex-y-center user-level-box">
                    <div class="user-level" v-if="permission.level">
                        <img class="level-icon" :src="static_img_prefix+'/diy/member-info/level.png'" alt="">
                        普通会员
                    </div>
                    <div class="user-level" v-if="activeItem.data.PluginUserLevel">
                        <img class="level-icon" :src="static_img_prefix+'/diy/member-info/plugin_userLevel.png'" alt="">
                        默认等级
                    </div>
                    <div class="user-auto">
                        <img class="auto-icon" :src="static_img_prefix+'/diy/member-info/auth.png'" />
                        已认证
                    </div>
                </div>
                <div class="user-level-box flex">
                    <div class="invite_code" :style="{color:levelStyle.nameColor}">
                        邀请码:HN678910
                    </div>
                    <el-divider direction="vertical" style="color:#FFF"></el-divider>
                    <div class="user-id" :style="{color:levelStyle.nameColor}">
                        ID:123456
                    </div>
                </div>
            </div>
            <div class="nav-right">
                <div class="btn-box" :style="iconStyle" v-if="permission.set">设置<i class="el-icon-arrow-right"></i></div>
                <div class="btn-box" :style="iconStyle" v-if="permission.centerPage">主页<i class="el-icon-arrow-right"></i></div>
            </div>
        </div>
        <div class="assets-info" :style="cardStyle">
            <div class="assets-info-bg-color" :class="isCardCradient ? 'bg-color-cradient-active':''">
                <div class="assets-info-bg" :class="isCardPattern ? 'bg-pattern-active':''" :style="cardPatternUrl">
                    <!-- 循环渲染 后台组件无法滚动，处理为只显示三个 -->
                    <div :class="currencyClass" :style="[assetStyle]">
                        <template v-for="(item,index) in assetList">
                            <div :key="index" v-if="index < showNum">
                                <div class="cate-num">100</div>
                                <div>{{item.title}}</div>
                            </div>
                        </template>
                    </div>

                    <div :style="hyphenStyle" class="indicator">
                        <div class="indeic-1"></div>
                        <div class="indeic-2"></div>

                    </div>
                    <div>
                    </div>
                </div>
            </div>
</template>

<script>
    Vue.component('member-info-style2', {
        name: "member-info-style2",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#member-info-style2',
        data() {
            return {
                static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>' + '/static',
                isCardPattern: true,
                isCardCradient: true,
                showNum: 50
            }
        },
        computed: {
            hyphenStyle() {
                let currencyStyle = this.activeItem.data.currencyStyle || 1
                let style = {}
                if (currencyStyle == 1) {
                    style['text-align'] = 'center'
                } else {
                    style['display'] = 'none'
                }
                return style
            },
            currencyClass() {
                let currencyStyle = this.activeItem.data.currencyStyle || 1
                this.showNum = currencyStyle == 1 ? 3 : 50;
                return currencyStyle == 1 ? 'flex' : 'assets-info-grid';
            },
            iconStyle() {
                let obj = {
                    'color': this.activeItem.computedStyle.iconColor || '#333',
                    'border-color': this.activeItem.computedStyle.iconColor || '#333',
                }
                return obj
            },
            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;
                brTop = brTop == undefined ? 10 : brTop
                brBottom = brBottom == undefined ? 10 : brBottom
                var style = {
                    borderRadius: `${brTop}px ${brTop}px ${brBottom}px ${brBottom}px`
                }
                if (bgColor != null) {
                    style['backgroundColor'] = `${bgColor}`
                }
                var cardStyle = this.activeItem.computedStyle.cardStyle || []
                this.isCardPattern = cardStyle.includes('pattern')
                this.isCardCradient = cardStyle.includes('cradient')
                if (shadowColor) {
                    style['box-shadow'] = `${shadowColor} 0px 0px 25px`
                }
                if (type == 2) {
                    style.backgroundImage = `url(${this.activeItem.computedStyle.tabSelectImg})`
                    style.backgroundSize = `cover`
                }
                return style
            },
            levelStyle() {
                let {
                    nameColor,
                    memColor,
                    memBgColor
                } = this.activeItem.computedStyle
                var obj = {
                    nameColor: nameColor || '#fff',
                    levelColor: memColor || '#fff',
                    levelBgColor: memBgColor || '#000',
                }
                return obj
            },
            assetStyle() {
                var {
                    assetColor
                } = this.activeItem.computedStyle

                return {
                    color: assetColor
                }
            },
            permission() {
                let obj = {
                    memberCode: false,
                    level: false,
                    set: false,
                    centerPage: false
                }
                let type = ['memberCode', 'level', 'set', 'centerPage']
                let data = this.activeItem.computedStyle.contentList1 || [0, 1, 2, 3]
                data.forEach((index) => {
                    const key = type[index]
                    obj[key] = true
                })
                console.log('会员组件', data, obj)
                return obj
            },
            assetList() {
                let data = this.activeItem.data.contentList2 || []
                if (data.length) {
                    const list = this.$capitals.filter(item => {
                        return data.indexOf(item.code) !== -1
                    })
                    return list
                }
                return []
            },
            cardPatternUrl() {
                if (this.isCardPattern) {
                    let url = this.static_img_prefix + '/diy/member-info/bg-pattern.png';
                    return {
                        'background-image': `url(${url})`
                    }
                }
                return {}
            }


        },
    });
</script>

<style lang="scss" scoped>
    .member-info-style2 {
        background-color: transparent;
        margin-top: 25px;

        .icon-info .icon {
            width: 24px;
            height: 24px;
            line-height: 24px;
            margin-left: 6px;
            text-align: center;
        }

        .icon-info .icon>i {
            font-size: 15px;
        }

        .user-avarat {
            width: 60px;
            height: 60px;
            margin-right: 8px;
            border-radius: 50%;
            background-color: #eee;

            .default_picture {
                width: 60px;
                height: 60px;
            }
        }

        .nav-right {
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #333;
            font-size: 11px;
            align-items: center;

            .btn-box {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 46px;
                height: 18px;
                border-radius: 9px;
                border: 0.5px solid #333;
                text-align: center;
            }

            .btn-box+.btn-box {
                margin-top: 10px;
            }

            .el-icon-arrow-right {
                font-size: 8px;
                margin-left: 2px;
            }
        }



        .user-info {
            position: relative;
        }

        .member-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
        }

        .user-name {
            font-size: 14px;
            font-weight: bold;
        }

        .user-level-box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .user-level {
            display: flex;
            align-items: center;
            color: #E6800B;
            background: linear-gradient(180deg, #FFEC8B 0%, #FFE030 100%);
            height: 16px;
            line-height: 16px;
            border-radius: 20px;
            text-align: right;
            padding-right: 8px;
            font-size: 11px;
            font-weight: bold;
            margin-right: 6px;
        }

        .user-level>.level-icon {
            width: 19px;
            height: 19px;
            border-radius: 50%;
            margin-right: 3px;
        }

        .user-auto {
            margin-left: 4px;
            background: #FFE7D2;
            border: 1px solid #FF8720;
            display: flex;
            align-items: center;
            color: #FF8720;
            height: 16px;
            line-height: 16px;
            border-radius: 20px;
            text-align: right;
            padding-right: 8px;
            font-size: 10px;
            white-space: nowrap;

            .auto-icon {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 3px;
                margin-left: -7px;
            }
        }

        .invite_code,
        .user-id {
            display: flex;
            align-items: center;
            color: #333;
            background: transparent;
            height: 16px;
            line-height: 16px;
            border-radius: 20px;
            padding: 0 6px;
            font-size: 11px;
        }

        .assets-info {
            font-size: 12px;
            color: #fff;
            margin-top: 20px;
            border-radius: 10px;
            background-color: #F54B4A;
            overflow: hidden;
        }

        .bg-color-cradient-active {
            background: linear-gradient(164deg, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
        }

        .assets-info-bg {
            padding: 20px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .assets-info .cate-num {
            margin-bottom: 4px;
            font-size: 16px;
            line-height: 1.5;
            font-weight: bold;
        }

        .assets-info-bg>.flex>div {
            flex: 1;
            text-align: center;
        }

        .assets-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            grid-row-gap: 20px;
        }

        .assets-info-grid>div {
            text-align: center;
        }

        .indicator {
            display: flex;
            justify-content: center;
            padding-top: 7px;
            position: relative;
            bottom: -12px;
        }

        .indicator>div {
            width: 14px;
            height: 3px;
            background: #FFFFFF;
            border-radius: 2px 2px 2px 2px;
        }

        .indeic-2 {
            margin-left: 4px;
            opacity: 0.4;
        }
    }
</style>