hy-app 0.1.1

package/components/hy-navbar/hy-navbar.vue

@@ -0,0 +1,194 @@
+<template>
+  <view class="hy-navbar" :style="customStyle">
+    <view
+      class="hy-navbar__placeholder"
+      v-if="fixed && placeholder"
+      :style="{
+        height: addUnit(getPx(height) + statusBarHeight)
+      }"
+    ></view>
+    <view
+      :class="[fixed && 'hy-navbar--fixed']"
+      :style="{ paddingTop: addUnit(safeAreaInsets?.top) }"
+    >
+      <view
+        :class="[border && 'hy-border-bottom', 'hy-navbar__content']"
+        :style="{
+          height: addUnit(height),
+          backgroundColor: bgColor
+        }"
+      >
+        <view
+          class="hy-navbar__content__left"
+          hover-class="hy-navbar__content__left--hover"
+          hover-start-time="150"
+          @tap="leftClick"
+        >
+          <slot name="left">
+            <HyIcon
+              v-if="leftIcon"
+              :name="leftIcon"
+              :size="leftIconSize"
+              :color="leftIconColor"
+            ></HyIcon>
+            <text
+              v-if="leftText"
+              :style="{
+                color: leftIconColor
+              }"
+              class="hy-navbar__content__left__text"
+              >{{ leftText }}</text
+            >
+          </slot>
+        </view>
+        <slot name="center">
+          <view class="hy-navbar__content__center">
+            <text
+              class="hy-navbar__content__center--title"
+              :style="[
+                {
+                  width: addUnit(titleWidth),
+                  color: titleColor
+                },
+                titleStyle
+              ]"
+              >{{ title }}</text
+            >
+            <text
+              class="hy-navbar__content__center--sub"
+              :style="[
+                {
+                  width: addUnit(titleWidth),
+                  color: titleColor
+                },
+                titleStyle
+              ]"
+              >{{ sub }}</text
+            >
+          </view>
+        </slot>
+        <view
+          class="hy-navbar__content__right"
+          v-if="$slots.right || rightIcon || rightText"
+          @tap="rightClick"
+        >
+          <slot name="right">
+            <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
+            <text v-if="rightText" class="hy-navbar__content__right__text">{{
+              rightText
+            }}</text>
+          </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getPx } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const emit = defineEmits(["leftClick", "rightClick"]);
+
+const { safeAreaInsets } = uni.getSystemSetting();
+const { statusBarHeight } = uni.getWindowInfo();
+
+/**
+ * @description 点击左侧区域
+ * */
+const leftClick = () => {
+  // 如果配置了autoBack，自动返回上一页
+  emit("leftClick");
+  if (config.interceptor.navbarLeftClick != null) {
+    config.interceptor.navbarLeftClick();
+  } else {
+    if (this.autoBack) {
+      uni.navigateBack();
+    }
+  }
+};
+/**
+ * @description 点击右侧区域
+ * */
+const rightClick = () => {
+  emit("rightClick");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-navbar {
+  &--fixed {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 11;
+  }
+
+  &__content {
+    @include flex(row);
+    align-items: center;
+    height: 44px;
+    background-color: #9acafc;
+    position: relative;
+    justify-content: center;
+
+    &__left,
+    &__right {
+      padding: 0 13px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      @include flex(row);
+      align-items: center;
+    }
+
+    &__left {
+      left: 0;
+
+      &--hover {
+        opacity: 0.7;
+      }
+
+      &__text {
+        font-size: 15px;
+        margin-left: 3px;
+      }
+    }
+
+    &__center {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      &--title {
+        font-size: $hy-font-size-subtitle;
+        color: $hy-color-title;
+      }
+      &--sub {
+        font-size: $hy-font-size-hint;
+        color: $hy-color-hint;
+      }
+    }
+
+    &__right {
+      right: 0;
+
+      &__text {
+        font-size: 15px;
+        margin-left: 3px;
+      }
+    }
+  }
+}
+.hy-border-bottom {
+  border-bottom: $hy-border-line;
+}
+</style>

package/components/hy-navbar/props.ts

@@ -0,0 +1,24 @@
+import IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  safeAreaInsetTop: true,
+  placeholder: false,
+  fixed: true,
+  border: false,
+  leftIcon: IconConfig.LEFT,
+  leftText: "",
+  rightText: "",
+  rightIcon: "",
+  title: "",
+  sub: "",
+  titleColor: "",
+  bgColor: "#ffffff",
+  titleWidth: "400rpx",
+  height: "44px",
+  leftIconSize: 20,
+  leftIconColor: "",
+  autoBack: false
+};
+
+export default defaultProps;

package/components/hy-navbar/typing.d.ts

@@ -0,0 +1,81 @@
+import { CSSProperties } from "vue";
+import { IconConfig } from "../../config";
+
+export default interface IProps {
+  /**
+   * @description 是否开启顶部安全区适配  （默认 true ）
+   * */
+  safeAreaInsetTop?: boolean;
+  /**
+   * @description 固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
+   * */
+  placeholder?: boolean;
+  /**
+   * @description 导航栏是否固定在顶部 （默认 true ）
+   * */
+  fixed?: boolean;
+  /**
+   * @description 导航栏底部是否显示下边框 （默认 false ）
+   * */
+  border?: boolean;
+  /**
+   * @description 左边返回图标的名称，只能为uview-pls自带的图标 （默认 'left' ）
+   * */
+  leftIcon?: string;
+  /**
+   * @description 左边的提示文字
+   * */
+  leftText?: string;
+  /**
+   * @description 右边的提示文字
+   * */
+  rightText?: string;
+  /**
+   * @description 右边返回图标的名称，只能为uview-plus自带的图标
+   * */
+  rightIcon?: string;
+  /**
+   * @description 导航栏标题，如设置为空字符，将会隐藏标题占位区域
+   * */
+  title?: string;
+  /**
+   * @description 导航栏副标题
+   * */
+  sub?: string;
+  /**
+   * @description 文字颜色 （默认 '' ）
+   * */
+  titleColor?: string;
+  /**
+   * @description 导航栏背景设置 （默认 '#ffffff' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
+   * */
+  titleWidth?: string | number;
+  /**
+   * @description 导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
+   * */
+  height?: string | number;
+  /**
+   * @description 左侧返回图标的大小（默认 20px ）
+   * */
+  leftIconSize?: string | number;
+  /**
+   * @description 左侧返回图标的颜色（默认 #303133 ）
+   * */
+  leftIconColor?: string;
+  /**
+   * @description 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
+   * */
+  autoBack?: boolean;
+  /**
+   * @description 标题的样式，对象或字符串
+   * */
+  titleStyle?: CSSProperties;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-notice-bar/hy-column-notice.vue

@@ -0,0 +1,130 @@
+<template>
+  <view class="hy-notice" @tap="clickHandler">
+    <slot name="icon">
+      <view class="hy-notice__left-icon" v-if="icon">
+        <HyIcon :name="icon" :color="color" size="19"></HyIcon>
+        <!--        <HyIcon :name="icon" :color="color" size="19"></HyIcon>-->
+      </view>
+    </slot>
+    <swiper
+      :disable-touch="disableTouch"
+      :vertical="step ? false : true"
+      circular
+      :interval="duration"
+      :autoplay="true"
+      class="hy-notice__swiper"
+      @change="noticeChange"
+    >
+      <swiper-item
+        v-for="(item, index) in text"
+        :key="index"
+        class="hy-notice__swiper__item"
+        :style="{ justifyContent: justifyContent }"
+      >
+        <text class="hy-notice__swiper__item__text" :style="[textStyle]">{{
+          item
+        }}</text>
+      </swiper-item>
+    </swiper>
+    <view
+      class="hy-notice__right-icon"
+      v-if="['link', 'closable'].includes(mode)"
+    >
+      <HyIcon
+        v-if="mode === 'link'"
+        :name="IconConfig.RIGHT"
+        :size="17"
+        :color="color"
+      ></HyIcon>
+      <HyIcon
+        v-if="mode === 'closable'"
+        :name="IconConfig.CLOSE"
+        :size="16"
+        :color="color"
+        @click="close"
+      ></HyIcon>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties, toRefs, computed, ref } from "vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { text, fontSize, color } = toRefs(props);
+const emit = defineEmits(["click", "close"]);
+
+const index = ref(0);
+
+/**
+ * @description 文字内容的样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  style.color = color.value;
+  style.fontSize = addUnit(fontSize.value);
+  return style;
+});
+
+const noticeChange = (e: any) => {
+  index.value = e.detail.current;
+};
+
+/**
+ * @description 点击通告栏
+ * */
+const clickHandler = (index: number) => {
+  emit("click", index);
+};
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-notice {
+  @include flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left-icon {
+    align-items: center;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    margin-left: 5px;
+    align-items: center;
+  }
+
+  &__swiper {
+    height: 16px;
+    @include flex;
+    align-items: center;
+    flex: 1;
+
+    &__item {
+      @include flex;
+      align-items: center;
+      overflow: hidden;
+
+      &__text {
+        font-size: 14px;
+        color: $hy-warning;
+      }
+    }
+  }
+}
+</style>

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -0,0 +1,82 @@
+<template>
+  <view
+    class="u-notice-bar"
+    v-if="show"
+    :style="[
+      {
+        backgroundColor: bgColor
+      },
+      customStyle
+    ]"
+  >
+    <template v-if="direction === 'column' || (direction === 'row' && step)">
+      <HyColumnNotice
+        :color="color"
+        :bgColor="bgColor"
+        :text="text"
+        :mode="mode"
+        :step="step"
+        :icon="icon"
+        :disable-touch="disableTouch"
+        :fontSize="fontSize"
+        :duration="duration"
+        :justifyContent="justifyContent"
+        @close="close"
+        @click="click"
+      ></HyColumnNotice>
+    </template>
+    <template v-else>
+      <HyRowNotice
+        :color="color"
+        :bgColor="bgColor"
+        :text="text"
+        :mode="mode"
+        :fontSize="fontSize"
+        :speed="speed"
+        :url="url"
+        :linkType="linkType"
+        :icon="icon"
+        @close="close"
+        @click="click"
+      ></HyRowNotice>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+// 组件
+import HyRowNotice from "./hy-row-notice.vue";
+import HyColumnNotice from "./hy-column-notice.vue";
+
+const show = ref(true);
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const emit = defineEmits(["click", "close"]);
+
+/**
+ * @description 点击通告栏
+ * */
+const click = (index: number) => {
+  emit("click", index);
+};
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+  show.value = false;
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.u-notice-bar {
+  overflow: hidden;
+  padding: 9px 12px;
+  flex: 1;
+}
+</style>

package/components/hy-notice-bar/hy-row-notice.vue

@@ -0,0 +1,182 @@
+<template>
+  <view class="hy-notice" @tap="clickHandler">
+    <slot name="icon">
+      <view class="hy-notice__left-icon" v-if="icon">
+        <HyIcon :name="icon" :color="color" size="19"></HyIcon>
+      </view>
+    </slot>
+    <view class="hy-notice__content" ref="hy-notice__content">
+      <view
+        ref="hy-notice__content__text"
+        class="hy-notice__content__text"
+        :style="animationStyle"
+      >
+        <text
+          v-for="(item, index) in innerText"
+          :key="index"
+          :style="textStyle"
+          >{{ item }}</text
+        >
+      </view>
+    </view>
+    <view
+      class="hy-notice__right-icon"
+      v-if="['link', 'closable'].includes(mode)"
+    >
+      <HyIcon
+        v-if="mode === 'link'"
+        :name="IconConfig.RIGHT"
+        :size="17"
+        :color="color"
+      ></HyIcon>
+      <HyIcon
+        v-if="mode === 'closable'"
+        @click="close"
+        :name="IconConfig.CLOSE"
+        :size="16"
+        :color="color"
+      ></HyIcon>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, toRefs, computed, CSSProperties } from "vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+import { addUnit, getRect, sleep } from "../../utils";
+import { IconConfig } from "../../config";
+
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { text, speed, fontSize, color } = toRefs(props);
+const emit = defineEmits(["click", "close"]);
+
+const animationDuration = ref<string>("0"); // 动画执行时间
+const animationPlayState = ref<string>("paused"); // 动画的开始和结束执行
+const initValue = ref<string>("");
+
+watch(
+  () => text.value,
+  async (newValue) => {
+    if (Array.isArray(newValue)) initValue.value = newValue.join("，");
+    let boxWidth = 0,
+      textWidth = 0;
+    // 进行一定的延时
+    await sleep();
+    // 查询盒子和文字的宽度
+    textWidth = (await getRect(".hy-notice__content__text")).width;
+    boxWidth = (await getRect(".hy-notice__content")).width;
+    // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+    // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+    animationDuration.value = `${textWidth / speed.value}s`;
+    // 这里必须这样开始动画，否则在APP上动画速度不会改变
+    animationPlayState.value = "paused";
+    await sleep(10);
+    animationPlayState.value = "running";
+  },
+  { immediate: true }
+);
+
+/**
+ * @description 文字内容的样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  style.whiteSpace = "nowrap !important";
+  style.color = color.value;
+  style.fontSize = addUnit(fontSize.value);
+  return style;
+});
+/**
+ * @description 动画的样式
+ * */
+const animationStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  style.animationDuration = animationDuration.value;
+  style.animationPlayState = animationPlayState.value;
+  return style;
+});
+// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
+// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
+const innerText = computed(() => {
+  let result = [],
+    // 每组text标签的字符长度
+    len = 20;
+  const textArr = initValue.value.split("");
+  for (let i = 0; i < textArr.length; i += len) {
+    // 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
+    result.push(textArr.slice(i, i + len).join(""));
+  }
+  return result;
+});
+
+/**
+ * @description 点击通告栏
+ * */
+const clickHandler = (index: number) => {
+  emit("click", index);
+};
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-notice {
+  @include flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left-icon {
+    align-items: center;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    margin-left: 5px;
+    align-items: center;
+  }
+
+  &__content {
+    text-align: right;
+    flex: 1;
+    @include flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+
+    &__text {
+      font-size: 14px;
+      color: $hy-warning;
+      /* #ifndef APP-NVUE */
+      // 这一句很重要，为了能让滚动左右连接起来
+      padding-left: 100%;
+      word-break: keep-all;
+      white-space: nowrap;
+      animation: hy-loop-animation 10s linear infinite both;
+      /* #endif */
+      @include flex(row);
+      line-height: 100%;
+    }
+  }
+}
+
+/* #ifndef APP-NVUE */
+@keyframes hy-loop-animation {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+/* #endif */
+</style>

package/components/hy-notice-bar/props.ts

@@ -0,0 +1,19 @@
+import IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  text: [],
+  direction: "row",
+  step: false,
+  icon: IconConfig.NOTIFICATION_FILL,
+  mode: "",
+  color: "#f9ae3d",
+  bgColor: "#fdf6ec",
+  speed: 80,
+  fontSize: 14,
+  duration: 2000,
+  disableTouch: true,
+  justifyContent: "flex-start"
+};
+
+export default defaultProps;