qimall/backend/views/components/common/storeDiy/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-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>