uniIM/colorui/components/cu-custom.vue

<template>
  <view class="cu-custom"  style="z-index:9999">
    <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
      <!-- <view class="action border-custom" v-if="isBack" style="width:160rpx;">
        <text class="cuIcon-back text-white" @tap="back"></text>
        <text class="cuIcon-homefill text-white" @tap="toHome"></text>
      </view> -->
	  <view class="action" v-if="isBack" style="width:100rpx;" @tap="back">
	    <text class="cuIcon-back" style="color:#333333"></text>
	  </view>
      <view class="action" v-if="!isBack" style="width:160rpx;">

      </view>
      <view class="content" :style="[{top:statusBar + 'px'}]">
        <slot name="content"></slot>
      </view>
      <view class="action right" style="width:160rpx;">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
  <!-- #ifdef APP-PLUS|H5 -->
  <view :style="[{height:customBar*2 + 'upx'}]"></view>
  <!-- #endif -->
  <!-- #ifdef MP -->
  <view :style="[{height:(customBar + 13) + 'px'}]"></view>
  <!-- #endif -->
</template>

<script setup>
import {useChatStore} from "@/store/chatStore";
import {computed, getCurrentInstance, ref} from "vue";


const {proxy} = getCurrentInstance();
const chatStore = useChatStore();
const statusBar = ref(proxy.statusBar);
const customBar = ref(proxy.customBar);

const props = defineProps({
  bgColor: {
    type: String,
    default: ''
  },
  isBack: {
    type: [Boolean, String],
    default: false
  },
  isShare: {
    type: [Boolean, String],
    default: true
  },
  bgImage: {
    type: String,
    default: ''
  },
});

const style = computed(() => {
  // #ifdef MP
  let st = `height:${customBar.value*2}rpx;padding-top:${statusBar.value}px;`;
  // // #endif
  // #ifndef MP
  let st = `height:${customBar.value*2}upx;padding-top:${statusBar.value}upx;`;
  // // #endif
  if (props.bgImage) {
    st = `${st}background-image:url(${props.bgImage});`;
  }
  return st;
})

const back = () => {
  // #ifdef H5
  let canBack = true
  const pages = getCurrentPages()
  if ('pages/index/index' === pages[0].route) {
    chatStore.setOpenChatId(null);
  }
  // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回
  if (pages.length > 1) {
    uni.navigateBack()
    return;
  }
  // #endif
  uni.navigateBack()
}

const toHome = () => {
  uni.reLaunch({
    url: "/pages/index/index"
  })
}
</script>

<style scoped>
.cu-bar {
  background-size: cover;
}

.cu-bar .right {
  justify-content: flex-end;
}
.border-custom{
	height:70%!important;
}
</style>