qimall/backend/views/components/common/storeDiy/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" v-if="permission.level">
                    <div class="user-level" :style="{ color: levelStyle.levelColor, backgroundColor: levelStyle.levelBgColor }">
                        <img class="level-icon" src="resources/img/decorate/mp.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">
                    <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>