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

<template id="member-info-style1">
    <div class="member-info-style1" :style="[cardStyle]">
        <div class="icon-info" :style="iconStyle">
            <!-- <div class="icon" v-if="permission.memberCode">
                <i class="iconfont icon-a-31erweima"></i>
            </div> -->
            <div class="icon" v-if="permission.set">
                <i class="iconfont icon-shezhi"></i>
            </div>
            <!-- <div class="icon" v-if="permission.news">
                <i class="iconfont icon-xiaoxi"></i>
            </div> -->
        </div>
        <div class="user-info flex">
            <div class="user-avarat">
                <img class="default_picture" :src="static_img_prefix+'/default_picture.png'" />
            </div>
            <div class="flex">
                <div class="user-top 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" :style="{ color: levelStyle.levelColor, backgroundColor: levelStyle.levelBgColor }">
                        <img class="level-icon" src="resources/img/decorate/mp.png" alt="">
                        普通会员
                    </div>
                    <div class="user-level" v-if="activeItem.data.PluginUserLevel">
                        <img class="level-icon" src="resources/img/decorate/plugin_userLevel.png'" alt="">
                        默认等级
                    </div>
                    <div class="user-auto" v-if="permission.level">
                        <img class="auto-icon" :src="static_img_prefix+'/diy/member-info/auth.png'" />
                        已认证
                    </div>
                </div>
                <div class="user-level-box">
                    <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" v-if="permission.centerPage" :style="{color:levelStyle.nameColor}">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <div class="assets-info">
            <!-- 循环渲染 后台组件无法滚动，处理为只显示三个-->
            <div :class="currencyClass" :style="[assetStyle]">
                <template v-for="(item,index) in assetList">
                    <div :key="index" v-if="index<showNum">
                        <div class="moeny">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>
</template>

<script>
    Vue.component('member-info-style1', {
        name: "member-info-style1",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#member-info-style1',
        data() {
            return {
                static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>' + '/static',
                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 || '#fff',
                    'background-color': this.activeItem.computedStyle.iconBgColor || '#000',

                }
                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}`
                }
                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('会员组件', 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 []
            }
        }
    });
</script>






<style lang="scss" scoped>
    .flex-y-center {
        display: flex;
        align-items: center;
    }

    .member-info-style1 {
        padding: 30px 20px 16px 20px;
        background-color: #E40A0A;
        position: relative;
        overflow: auto;

        .icon-info {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            right: 0;
            top: 0;
            width: 28px;
            height: 23px;
            border-radius: 0px 0 0px 12px;
        }

        /* .icon-info .icon {
        width: 24px;
        height: 24px;
    } */

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

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

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

        .nav-right {
            display: flex;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            color: #fff;
            font-size: 12px;
            align-items: center;
        }

        .el-icon-arrow-right {
            font-size: 16px;
        }

        .user-info {
            position: relative;
        }

        .user-info>.flex {
            flex-direction: column;
            justify-content: center;
        }

        .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: #FFF;
            background: #000;
            height: 15px;
            line-height: 15px;
            border-radius: 20px;
            text-align: right;
            padding-right: 8px;
            font-size: 11px;
            font-weight: bold;
            white-space: nowrap;
            margin-right: 6px;
        }

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

        .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;
            padding-top: 30px;
        }

        .assets-info .moeny {
            font-size: 16px;
            line-height: 1.5;
            font-weight: bold;
        }

        .assets-info>.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: 20px;
        }

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

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