{"version":3,"file":"su-navbar.js","sources":["../../../../../../src/sheep/ui/su-navbar/su-navbar.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1uYXZiYXIvc3UtbmF2YmFyLnZ1ZQ"],"sourcesContent":["<!-- 自定义导航栏 -->\r\n<template>\r\n  <view class=\"uni-navbar\" :class=\"{ 'uni-dark': dark }\">\r\n    <view\r\n      :class=\"{\r\n        'uni-navbar--fixed': fixed,\r\n        'uni-navbar--shadow': shadow,\r\n        'uni-navbar--border': border,\r\n      }\"\r\n      class=\"uni-navbar__content\"\r\n    >\r\n      <view class=\"fixed-bg\" :class=\"[opacity ? '' : opacityBgUi]\"></view>\r\n      <su-status-bar v-if=\"statusBar\" />\r\n      <view\r\n        :style=\"{\r\n          color: themeColor,\r\n          height: navbarHeight,\r\n          background: backgroundColor,\r\n        }\"\r\n        class=\"uni-navbar__header\"\r\n      >\r\n        <view\r\n          class=\"uni-navbar__header-btns uni-navbar__header-btns-left\"\r\n          :style=\"{ width: leftIconWidth }\"\r\n        >\r\n          <slot name=\"left\">\r\n            <view class=\"uni-navbar__content_view\" v-if=\"leftIcon.length > 0\">\r\n              <view class=\"icon-box ss-flex\">\r\n                <view class=\"icon-button icon-button-left ss-flex ss-row-center\" @tap=\"onClickLeft\">\r\n                  <text class=\"sicon-back\" v-if=\"hasHistory\" />\r\n                  <text class=\"sicon-home\" v-else />\r\n                </view>\r\n                <view class=\"line\"></view>\r\n                <view\r\n                  class=\"icon-button icon-button-right ss-flex ss-row-center\"\r\n                  @tap=\"showMenuTools\"\r\n                >\r\n                  <text class=\"sicon-more\" />\r\n                </view>\r\n              </view>\r\n            </view>\r\n            <view\r\n              :class=\"{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }\"\r\n              class=\"uni-navbar-btn-text\"\r\n              v-if=\"\r\n                titleAlign === 'left' &&\r\n                title.length &&\r\n                sheep.$platform.name !== 'WechatOfficialAccount'\r\n              \"\r\n            >\r\n              <text :style=\"{ color: themeColor, fontSize: '18px' }\">{{ title }}</text>\r\n            </view>\r\n          </slot>\r\n        </view>\r\n        <view v-if=\"tools === 'search'\" class=\"ss-flex-1\">\r\n          <slot name=\"center\">\r\n            <uni-search-bar\r\n              class=\"ss-flex-1 search-box\"\r\n              :radius=\"20\"\r\n              placeholder=\"请输入关键词\"\r\n              cancelButton=\"none\"\r\n              v-model=\"searchModel\"\r\n              @confirm=\"onSearch\"\r\n            />\r\n          </slot>\r\n        </view>\r\n        <view v-else class=\"uni-navbar__header-container\" @tap=\"onClickTitle\">\r\n          <slot name=\"center\">\r\n            <view\r\n              v-if=\"tools === 'title' && titleAlign === 'center' && title.length\"\r\n              class=\"uni-navbar__header-container-inner\"\r\n            >\r\n              <text :style=\"{ color: themeColor, fontSize: '36rpx' }\" class=\"ss-line-1\">\r\n                {{ title }}\r\n              </text>\r\n            </view>\r\n          </slot>\r\n        </view>\r\n      </view>\r\n    </view>\r\n    <view class=\"uni-navbar__placeholder\" v-if=\"placeholder\">\r\n      <su-status-bar v-if=\"statusBar\" />\r\n      <view class=\"uni-navbar__placeholder-view\" :style=\"{ height: navbarHeight }\" />\r\n    </view>\r\n    <!-- 头部问题 -->\r\n    <!-- #ifdef MP -->\r\n    <!-- <view :style=\"[capsuleStyle]\"></view> -->\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\nimport sheep from '@/sheep'\r\nimport { onLoad } from '@dcloudio/uni-app'\r\nimport { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal'\r\nimport { computed, ref } from 'vue'\r\n\r\n/**\r\n * NavBar 自定义导航栏\r\n * @description 导航栏组件，主要用于头部导航\r\n * @property {Boolean} dark 开启黑暗模式\r\n * @property {String} title 标题文字\r\n * @property {String} rightText 右侧按钮文本\r\n * @property {String} leftIcon 左侧按钮图标\r\n * @property {String} rightIcon 右侧按钮图标\r\n * @property {String} color 图标和文字颜色\r\n * @property {String} backgroundColor 导航栏背景颜色\r\n * @property {Boolean} fixed = [true|false] 是否固定顶部\r\n * @property {Boolean} statusBar = [true|false] 是否包含状态栏\r\n * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影\r\n * @event {Function} clickLeft 左侧按钮点击时触发\r\n * @event {Function} clickRight 右侧按钮点击时触发\r\n * @event {Function} clickTitle 中间标题点击时触发\r\n */\r\n\r\nconst getVal = (val) => (typeof val === 'number' ? val + 'px' : val)\r\n\r\nconst emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search'])\r\nconst props = defineProps({\r\n  dark: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  modelValue: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  title: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  titleAlign: {\r\n    type: String,\r\n    default: 'center', // left | center\r\n  },\r\n  rightText: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  leftIcon: {\r\n    type: String,\r\n    default: 'left',\r\n  },\r\n  rightIcon: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  fixed: {\r\n    type: [Boolean, String],\r\n    default: true,\r\n  },\r\n  placeholder: {\r\n    type: [Boolean, String],\r\n    default: true,\r\n  },\r\n  color: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  backgroundColor: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  opacity: {\r\n    type: [Boolean, String],\r\n    default: false,\r\n  },\r\n  opacityBgUi: {\r\n    type: String,\r\n    default: 'bg-white',\r\n  },\r\n  statusBar: {\r\n    type: [Boolean, String],\r\n    default: false,\r\n  },\r\n  shadow: {\r\n    type: [Boolean, String],\r\n    default: false,\r\n  },\r\n  border: {\r\n    type: [Boolean, String],\r\n    default: false,\r\n  },\r\n  height: {\r\n    type: [Number, String],\r\n    default: 44,\r\n  },\r\n  leftWidth: {\r\n    type: [Number, String],\r\n    default: 80,\r\n  },\r\n  rightWidth: {\r\n    type: [Number, String],\r\n    default: 0,\r\n  },\r\n  tools: {\r\n    type: String,\r\n    default: 'title',\r\n  },\r\n  defaultSearch: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n})\r\n\r\nconst capsuleStyle = computed(() => {\r\n  return {\r\n    width: sheep.$platform.capsule.width + 'px',\r\n    height: sheep.$platform.capsule.height + 'px',\r\n    margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px',\r\n  }\r\n})\r\n\r\nconst searchModel = computed(() => {\r\n  return props.defaultSearch\r\n})\r\n\r\nconst themeBgColor = computed(() => {\r\n  if (props.dark) {\r\n    // 默认值\r\n    if (props.backgroundColor) {\r\n      return props.backgroundColor\r\n    } else {\r\n      return props.dark ? '#333' : '#FFF'\r\n    }\r\n  }\r\n  return props.backgroundColor || '#FFF'\r\n})\r\nconst themeColor = computed(() => {\r\n  if (props.dark) {\r\n    // 默认值\r\n    if (props.color) {\r\n      return props.color\r\n    } else {\r\n      return props.dark ? '#fff' : '#333'\r\n    }\r\n  }\r\n  return props.color || '#333'\r\n})\r\nconst navbarHeight = computed(() => {\r\n  return getVal(props.height)\r\n})\r\nconst leftIconWidth = computed(() => {\r\n  return getVal(props.leftWidth)\r\n})\r\nconst rightIconWidth = computed(() => {\r\n  return getVal(props.rightWidth)\r\n})\r\n\r\nfunction onSearch(e) {\r\n  emits('search', e.value)\r\n}\r\n\r\nonLoad(() => {\r\n  if (uni.report && props.title !== '') {\r\n    uni.report('title', props.title)\r\n  }\r\n})\r\n\r\nconst hasHistory = sheep.$router.hasHistory()\r\n\r\nfunction onClickLeft() {\r\n  if (hasHistory) {\r\n    sheep.$router.back()\r\n  } else {\r\n    sheep.$router.go('/modules/mall/index/index')\r\n  }\r\n  emits('clickLeft')\r\n}\r\nfunction onClickRight() {\r\n  showMenuTools()\r\n}\r\nfunction onClickTitle() {\r\n  emits('clickTitle')\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.bg-main {\r\n  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;\r\n  color: #fff !important;\r\n}\r\n.icon-box {\r\n  background: #ffffff;\r\n  box-shadow:\r\n    0px 0px 4rpx rgba(51, 51, 51, 0.08),\r\n    0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);\r\n  border-radius: 30rpx;\r\n  width: 134rpx;\r\n  height: 56rpx;\r\n  margin-left: 8rpx;\r\n  .line {\r\n    width: 2rpx;\r\n    height: 24rpx;\r\n    background: #e5e5e7;\r\n  }\r\n  .sicon-back {\r\n    font-size: 32rpx;\r\n    color: #000;\r\n  }\r\n  .sicon-home {\r\n    font-size: 32rpx;\r\n    color: #000;\r\n  }\r\n  .sicon-more {\r\n    font-size: 32rpx;\r\n    color: #000;\r\n  }\r\n  .icon-button {\r\n    width: 67rpx;\r\n    height: 56rpx;\r\n    &-left:hover {\r\n      background: rgba(0, 0, 0, 0.16);\r\n      border-radius: 30rpx 0px 0px 30rpx;\r\n    }\r\n    &-right:hover {\r\n      background: rgba(0, 0, 0, 0.16);\r\n      border-radius: 0px 30rpx 30rpx 0px;\r\n    }\r\n  }\r\n}\r\n\r\n$nav-height: 44px;\r\n\r\n.fixed-bg {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  top: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n.uni-nav-bar-text {\r\n  /* #ifdef APP-PLUS */\r\n  font-size: 34rpx;\r\n  /* #endif */\r\n  /* #ifndef APP-PLUS */\r\n  font-size: 14px;\r\n  /* #endif */\r\n}\r\n\r\n.uni-nav-bar-right-text {\r\n  font-size: 12px;\r\n}\r\n\r\n.uni-navbar__content {\r\n  position: relative;\r\n  // background-color: #fff;\r\n  // box-sizing: border-box;\r\n  background-color: transparent;\r\n}\r\n\r\n.uni-navbar__content_view {\r\n  // box-sizing: border-box;\r\n}\r\n\r\n.uni-navbar-btn-text {\r\n  /* #ifndef APP-NVUE */\r\n  display: flex;\r\n  /* #endif */\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  line-height: 18px;\r\n}\r\n\r\n.uni-navbar__header {\r\n  /* #ifndef APP-NVUE */\r\n  display: flex;\r\n  /* #endif */\r\n  padding: 0 10px;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  height: $nav-height;\r\n  font-size: 12px;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.uni-navbar__header-btns {\r\n  /* #ifndef APP-NVUE */\r\n  overflow: hidden;\r\n  display: flex;\r\n  /* #endif */\r\n  flex-wrap: nowrap;\r\n  flex-direction: row;\r\n  // min-width: 120rpx;\r\n  min-width: 40rpx;\r\n  // padding: 0 6px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  /* #ifdef H5 */\r\n  cursor: pointer;\r\n  /* #endif */\r\n}\r\n\r\n.uni-navbar__header-btns-left {\r\n  /* #ifndef APP-NVUE */\r\n  display: flex;\r\n  /* #endif */\r\n  width: 120rpx;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.uni-navbar__header-btns-right {\r\n  /* #ifndef APP-NVUE */\r\n  display: flex;\r\n  /* #endif */\r\n  flex-direction: row;\r\n  // width: 150rpx;\r\n  // padding-right: 30rpx;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n}\r\n.uni-navbar__header-container {\r\n  /* #ifndef APP-NVUE */\r\n  // display: flex;\r\n  /* #endif */\r\n  // flex: 1;\r\n  // padding: 0 10px;\r\n  // overflow: hidden;\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%) translateY(-50%);\r\n  top: 50%;\r\n}\r\n\r\n.uni-navbar__header-container-inner {\r\n  /* #ifndef APP-NVUE */\r\n  display: flex;\r\n  /* #endif */\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 12px;\r\n  overflow: hidden;\r\n  // box-sizing: border-box;\r\n}\r\n\r\n.uni-navbar__placeholder-view {\r\n  height: $nav-height;\r\n}\r\n\r\n.uni-navbar--fixed {\r\n  position: fixed;\r\n  z-index: 998;\r\n  /* #ifdef H5 */\r\n  left: var(--window-left);\r\n  right: var(--window-right);\r\n  /* #endif */\r\n  /* #ifndef H5 */\r\n  left: 0;\r\n  right: 0;\r\n  /* #endif */\r\n}\r\n\r\n.uni-navbar--shadow {\r\n  box-shadow: 0 1px 6px #ccc;\r\n}\r\n\r\n.uni-navbar--border {\r\n  border-bottom-width: 1rpx;\r\n  border-bottom-style: solid;\r\n  border-bottom-color: #eee;\r\n}\r\n\r\n.uni-ellipsis-1 {\r\n  overflow: hidden;\r\n  /* #ifndef APP-NVUE */\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  /* #endif */\r\n  /* #ifdef APP-NVUE */\r\n  lines: 1;\r\n  text-overflow: ellipsis;\r\n  /* #endif */\r\n}\r\n\r\n// 暗主题配置\r\n.uni-dark {\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-navbar/su-navbar.vue'\nwx.createComponent(Component)"],"names":["computed","sheep","onLoad","uni"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,UAAM,SAAS,CAAC,QAAS,OAAO,QAAQ,WAAW,MAAM,OAAO;AAEhE,UAAM,QAAQ;AACd,UAAM,QAAQ;AAuFOA,kBAAAA,SAAS,MAAM;AAClC,aAAO;AAAA,QACL,OAAOC,YAAAA,MAAM,UAAU,QAAQ,QAAQ;AAAA,QACvC,QAAQA,YAAAA,MAAM,UAAU,QAAQ,SAAS;AAAA,QACzC,QAAQ,QAAQA,kBAAM,UAAU,OAAO,cAAcA,YAAAA,MAAM,UAAU,QAAQ,SAAS;AAAA,MACvF;AAAA,IACH,CAAC;AAED,UAAM,cAAcD,cAAQ,SAAC,MAAM;AACjC,aAAO,MAAM;AAAA,IACf,CAAC;AAEoBA,kBAAAA,SAAS,MAAM;AAClC,UAAI,MAAM,MAAM;AAEd,YAAI,MAAM,iBAAiB;AACzB,iBAAO,MAAM;AAAA,QACnB,OAAW;AACL,iBAAO,MAAM,OAAO,SAAS;AAAA,QAC9B;AAAA,MACF;AACD,aAAO,MAAM,mBAAmB;AAAA,IAClC,CAAC;AACD,UAAM,aAAaA,cAAQ,SAAC,MAAM;AAChC,UAAI,MAAM,MAAM;AAEd,YAAI,MAAM,OAAO;AACf,iBAAO,MAAM;AAAA,QACnB,OAAW;AACL,iBAAO,MAAM,OAAO,SAAS;AAAA,QAC9B;AAAA,MACF;AACD,aAAO,MAAM,SAAS;AAAA,IACxB,CAAC;AACD,UAAM,eAAeA,cAAQ,SAAC,MAAM;AAClC,aAAO,OAAO,MAAM,MAAM;AAAA,IAC5B,CAAC;AACD,UAAM,gBAAgBA,cAAQ,SAAC,MAAM;AACnC,aAAO,OAAO,MAAM,SAAS;AAAA,IAC/B,CAAC;AACsBA,kBAAAA,SAAS,MAAM;AACpC,aAAO,OAAO,MAAM,UAAU;AAAA,IAChC,CAAC;AAED,aAAS,SAAS,GAAG;AACnB,YAAM,UAAU,EAAE,KAAK;AAAA,IACzB;AAEAE,kBAAAA,OAAO,MAAM;AACX,UAAIC,cAAG,MAAC,UAAU,MAAM,UAAU,IAAI;AACpCA,sBAAAA,MAAI,OAAO,SAAS,MAAM,KAAK;AAAA,MAChC;AAAA,IACH,CAAC;AAED,UAAM,aAAaF,YAAAA,MAAM,QAAQ,WAAY;AAE7C,aAAS,cAAc;AACrB,UAAI,YAAY;AACdA,oBAAK,MAAC,QAAQ,KAAM;AAAA,MACxB,OAAS;AACLA,0BAAM,QAAQ,GAAG,2BAA2B;AAAA,MAC7C;AACD,YAAM,WAAW;AAAA,IACnB;AAIA,aAAS,eAAe;AACtB,YAAM,YAAY;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjRA,GAAG,gBAAgB,SAAS;"}