源文件

jeepay-ui-uapp-agent/components/newComponents/JHeaderTitle/JHeaderTitle.vue

@@ -0,0 +1,126 @@
+<template>
+  <view
+    class="wrapper"
+    :style="{ paddingTop: menu.top + 'px', backgroundColor: bgColor }"
+    :class="{ isPrimary: props.bgColor == '$primaryColor' }"
+  >
+    <!-- #ifdef APP-PLUS || H5  -->
+    <view class="status-bar"> </view>
+    <!-- #endif -->
+    <view
+      class="header-wrapper"
+      :style="{ backgroundColor: bgColor, color: color, height: menu.height + 'px', lineHeight: menu.height + 'px' }"
+    >
+      <view class="header-left" @tap="navBack" v-if="back">
+        <image :src="imgUrl" mode="scaleToFill" />
+      </view>
+      <view class="header-left logo-out" v-if="logOut" @tap="loginOut">
+        <image :src="imgUrl" mode="scaleToFill" />退出登录</view
+      >
+      <view class="header-text">{{ title }}</view>
+    </view>
+  </view>
+  <!-- <view class="wrapper-block" :style="{ backgroundColor: bgColor, paddingBottom: pdB }"></view> -->
+</template>
+
+<script setup>
+import { ref, watch } from "vue"
+import user from "@/hooks/user.js"
+const props = defineProps({
+  bgColor: {
+    type: String,
+    default: "#fff",
+  },
+  title: {
+    type: String,
+    default: "首页",
+  },
+  color: {
+    type: String,
+    default: "#000",
+  },
+  pdB: {
+    type: String,
+    default: "100rpx",
+  },
+  imgUrl: {
+    type: String,
+    default: "/static/iconImg/left-arrow.svg",
+  },
+  back: {
+    type: Boolean,
+    default: true,
+  },
+  logOut: { type: Boolean, default: false },
+})
+const emits = defineEmits(["back"])
+let menu = { top: 0, height: "" }
+// #ifdef MP-WEIXIN
+menu = uni.getMenuButtonBoundingClientRect()
+// #endif
+const navBack = () => {
+  emits("back")
+  uni.navigateBack({
+    fail: (err) => {},
+  })
+}
+const loginOut = () => {
+  user.logout()
+  uni.showToast({
+    icon: "none",
+    title: "退出成功",
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  position: sticky;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding-bottom: 10rpx;
+  z-index: 50;
+  .status-bar {
+    height: var(--status-bar-height);
+    width: 100%;
+  }
+  .header-wrapper {
+    position: relative;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+    font-weight: 700;
+    .header-left {
+      position: absolute;
+      top: 50%;
+      left: 30rpx;
+      width: 50rpx;
+      height: 50rpx;
+      transform: translateY(-50%);
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .logo-out {
+      display: flex;
+      align-items: center;
+      width: 150rpx;
+      font-size: 25rpx;
+      image {
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+  }
+}
+.wrapper-block {
+  height: var(--status-bar-height);
+}
+
+.isPrimary {
+  background: $primaryColor !important;
+}
+</style>