zhangsiye/mini/components/UserIdentityBtn/IdentityType.vue

<template>
  <view
    class="identity-type dir-left-nowrap"
    :class="{
      vip: isVip,
      normal: isNormal
    }"
  >
    <view class="static-text main-center cross-center">会员身份</view>
    <view class="identity-box dir-left-nowrap">
      <view class="user-type main-center cross-center">{{ isVip?'福卡会员':'普通用户' }}</view>
      <view class="discount main-center cross-center">
        {{ isVip?'享受福卡特权':'享受普通优惠' }}
        <u-text :text="price" mode="price" color="#ffffff" />
      </view>
    </view>
    <view class="checked main-center cross-center">
      <i v-if="checked" class="iconfont icon-checked" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'IdentityType',
  props: {
    price: {
      type: Number,
      default: 0
    },
    isVip: {
      type: Boolean,
      default: false
    },
    isNormal: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  @import '@/static/css/mixin.scss';
  $vipHeight: 60;
  $height: $vipHeight + 8;
  .identity-type{
    margin: 10rpx 0;
    color: #fff;
    font-size: 28rpx;
    .static-text{
      height: #{$height}rpx;
      flex-shrink: 0;
      width: 150rpx;
      background-color: #888D93;
    }
    .identity-box{
      background: linear-gradient(#A6ADBF, #7E8796);
      flex: 1;
      .user-type{
        height: #{$height}rpx;
        width: 180rpx;

      }
      .discount{
        flex: 1;
        height: #{$height}rpx;
      }
    }
    .checked{
      height: #{$height}rpx;
      width: 100rpx;
      .iconfont{
        font-size: 46rpx;
        color: $text-grey-color;
      }
    }
    &.vip,
    &.normal{
      .static-text{
        background-color: #F9D2B5;
        color: #3D434F;
      }
    }
    &.vip{
      .identity-box {
        @include vipBorder;

        .user-type {
          height: #{$vipHeight}rpx;
        }

        .discount {
          height: #{$vipHeight}rpx;
        }
      }
    }
    &.normal{
      .identity-box{
        @include background;
      }
    }
  }
</style>