vue 个人中心会员卡片组件

项目需求：

项目个人中心页会员卡片组件

slot插槽规则：

• 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

组件:

<template>
  <view class="hm-balance-card" >
    <view class="box " :class="options" name="cardColorTwo" @tap="onCard">
        <view class="trimStrip" id="trimStrip"></view>
        <view class="" >
            <slot name="header"></slot>
        </view>
        <view class="">
            <slot  name="middle"></slot>
        </view>
        <view class="">
            <slot  name="footer"></slot>
        </view>
    </view>
   </view>
</template>
<script>
export default {
  name: 'HmBalanceCard',
  props: {
    options: {
      type: String,
      default: 'cardColorNone'  ,//.cardColorOne | cardColorTwo | cardColorThree | cardColorNone
     }
  },
  data() {
    return {};
  },
  mounted() {
        this.$nextTick(function(){
            let dom = document.getElementById('trimStrip')
            setTimeout(()=>{
                dom.style.width='45px'
                dom.style.left="500px"
            },100)
        })
            // animation: reflectLight .6s ;
            // @keyframes reflectLight {
            //   from {
            //   left: -100px;
            //   width: 20px;
            //   }
            //   to {
            //    width: 45px;
            //    left: 500px;
            //   }
            // }
}

  },
  methods:{
      onCard(){
          this.$emit("on-card",true)
      }
  }
};
</script>
<style lang="less" scoped>

.hm-balance-card{
    padding: 10px 4%;
    .box {
        border-radius: 30upx;
        overflow: hidden;
         position: relative;
         background-size: cover;
         min-height: 176px;
    }
    
}
.cardColorOne{
    background:linear-gradient(left top, #668282 0%, #ccd6d0 100%);
}
.cardColorTwo{
    background:linear-gradient(left top, #bb8d09 0%, #ffd04c 100%);
}
.cardColorThree{
    background: url('http://www.eleve.cn/houminhua/zs.png');
    background-color:#000;
}
.cardColorNone{
    background:linear-gradient(left top, #c1c1c1 0%, #b7b7b7 100%);
}
.trimStrip {
 content: ' ';
 position: absolute;
 background: #fff;
 top: 0;
 height: 300px;
 width: 20px;
 left: -100px;
 opacity: 0.3;
 transition: all 0.6s ease-out;
 transform: skewX(-30deg);
}

</style>

填充插槽内容

<vipCard :options="memberGrade" @on-card="toMemberInfo($event)">
        <!-- <vipCard > -->
            <view class="headerBox" slot="header">
                <view class="headerImgname">
                    <view class="face">
                        <image :src="userinfo.headimgurl ? userinfo.headimgurl : headerimg"></image>
                    </view>
                    <view class="">
                        <view class="name">{{userinfo.real_name?userinfo.real_name:'暂无'}}</view>
                        <view class="vipka">VIP</view>
                    </view>
                </view>
                <view class="viptype">
                    <view class="sm text-gray cuIcon-crown"></view>
                    <view class="vipStylet">{{DiscountInformation}}</view>
                </view>
            </view>
            <view class="middle-view" slot="middle"  v-if="DiscountInformation.grade_info&&DiscountInformation.grade_info.grade_benefits.length>0&&isvipBoole()">
                <view class="contentBox">
                    <view class="message value">{{getzhecou(DiscountInformation.grade_info.grade_benefits[1].benefits_condition)+'折'}}</view>
                    <view class="message value">{{(getvipDiscount(DiscountInformation.grade_info.grade_benefits[0].benefits_condition)+'%')}}</view>
                    <view class="message value">{{(getvipDiscount(DiscountInformation.grade_info.grade_benefits[2].benefits_condition)+'%')}}</view>
                </view>
                
                    <view class="contentBox">
                        <view class="message msg">购物折扣</view>
                        <view class="message msg">邀请佣金</view>
                        <view class="message msg">邀请成长值</view>
                    </view>
            </view>
            <view class="margin-tb-sm text-center" slot="middle" v-else>
                    <button type="default" class="cu-btn round bg-yellow" @tap="openMembership">立即开通会员</button>
            </view>
            
            <view class="expirationTime" v-if="DiscountInformation&&DiscountInformation.create_time" slot="footer">
                <text class="" style="" @click="MembershipRules"> 会员规则 ></text>
                <view class="">入会时间：{{DiscountInformation.create_time}}</view>
            </view>
        </vipCard>

效果图

GIF 11-44-51.gif