bigDataApp/components/customCard/cu-custom.vue

<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action" @tap="BackPage" v-if="isBack">
          <u-icon name="arrow-left" color="#020305" size="32rpx" />
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          <slot name="content"></slot>
        </view>
        <view class="cu-bar-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
    };
  },
  name: "cu-custom",
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var CustomBar = this.CustomBar;
      var bgImage = this.bgImage;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      if (this.textColor) {
        style = `${style}color: ${this.textColor}`;
      }
      return style;
    },
  },
  props: {
    bgColor: {
      type: String,

      default: "",
    },
    isBack: {
      type: [Boolean, String],
      default: false,
    },
    bgImage: {
      type: String,
      default: "",
    },
    textColor: {
      type: String,
      default: "",
    },
    isGoWater: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    BackPage() {
      if (this.isGoWater) {
        uni.switchTab({
          url: "/waterPages/index",
        });
      } else {
        if (getCurrentPages().length < 2 && "undefined" !== typeof __wxConfig) {
          let url = "/" + __wxConfig.pages[0];
          return uni.redirectTo({ url });
        }
        // uni.navigateBack({
        //   delta: 1
        // })
        if (getCurrentPages().length === 1) {
          uni.switchTab({
            url: "/pages/index",
          });
        } else {
          uni.navigateBack({
            delta: 1,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cu-bar {
  display: flex;
  align-items: center;
  position: relative;
  &.bg-transparent {
    background-color: transparent;
  }

  &.bg-gray {
    background-color: #f7f7f7;
  }

  .cu-bar-right {
    position: relative;
    z-index: 10;
    right: 32rpx;
  }
  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #020305;
    font-family: "Source Han Sans CN VF";
    font-weight: 700;
    font-size: 32rpx;
  }
}
</style>