hy-app 0.1.1

package/components/hy-steps/hy-steps.vue

@@ -0,0 +1,352 @@
+<template>
+  <view :class="[`hy-steps--${direction}`, 'hy-steps']">
+    <template v-for="(item, i) in list" :key="i">
+      <view
+        ref="hy-steps-item"
+        :class="[`hy-steps-item--${direction}`, 'hy-steps-item']"
+      >
+        <!--	线条	-->
+        <view
+          v-if="i + 1 < list.length"
+          :class="[`hy-steps-item__line--${direction}`, 'hy-steps-item__line']"
+          :style="lineStyle(item, i)"
+        ></view>
+        <view
+          :class="[
+            `hy-steps-item__wrapper--${direction}`,
+            dot && `hy-steps-item__wrapper--${direction}--dot`,
+            'hy-steps-item__wrapper'
+          ]"
+          :style="itemStyleInner"
+        >
+          <slot name="icon" :error="item.error" :index="i">
+            <view
+              class="hy-steps-item__wrapper__dot"
+              v-if="dot"
+              :style="{
+                backgroundColor: statusColor(i, item.error)
+              }"
+            >
+            </view>
+            <view
+              class="hy-steps-item__wrapper__icon"
+              v-else-if="activeIcon || inactiveIcon"
+            >
+              <HyIcon
+                :name="i <= current ? activeIcon : inactiveIcon"
+                :size="iconSize"
+                :color="i <= current ? activeColor : inactiveColor"
+              >
+              </HyIcon>
+            </view>
+            <view
+              v-else
+              :style="{
+                backgroundColor:
+                  statusClass(i, item.error) === 'process'
+                    ? activeColor
+                    : 'transparent',
+                borderColor: statusColor(i, item?.error)
+              }"
+              class="hy-steps-item__wrapper__circle"
+            >
+              <text
+                v-if="
+                  statusClass(i, item.error) === 'process' ||
+                  statusClass(i, item.error) === 'wait'
+                "
+                class="hy-steps-item__wrapper__circle__text"
+                :style="{
+                  color: i == current ? '#ffffff' : inactiveColor
+                }"
+                >{{ i + 1 }}</text
+              >
+              <HyIcon
+                v-else
+                :color="
+                  statusClass(i, item.error) === 'error' ? 'error' : activeColor
+                "
+                :size="iconSize"
+                :name="
+                  statusClass(i, item.error) === 'error'
+                    ? IconConfig.CLOSE
+                    : IconConfig.CHECK_MASK
+                "
+              ></HyIcon>
+            </view>
+          </slot>
+        </view>
+
+        <!-- 内容 -->
+        <view
+          class="hy-steps-item__content"
+          :class="[`hy-steps-item__content--${direction}`]"
+          :style="[contentStyle]"
+        >
+          <slot name="content" :record="item" :index="i">
+            <template>
+              <slot name="title" :title="item.title" :index="i">
+                <text
+                  :style="{
+                    lineHeight: '20px',
+                    fontSize: current == i ? '14px' : '13px',
+                    color: i == current ? '#2c405a' : '#555555'
+                  }"
+                  >{{ item.title }}</text
+                >
+              </slot>
+              <slot name="desc" :desc="item.desc" :index="i">
+                <text :style="{ fontSize: '12px', color: '#999' }">{{
+                  item.desc
+                }}</text>
+              </slot>
+            </template>
+          </slot>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs, ref, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps, { StepListVo } from "./typing";
+import { addUnit, getRect } from "../../utils";
+import { ColorConfig, IconConfig } from "../../config";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { current, direction, dot, inactiveColor, activeColor } = toRefs(props);
+const emit = defineEmits(["click", "update:current"]);
+
+const showLine = ref(false);
+const size = ref<UniApp.NodeInfo>({
+  height: 0,
+  width: 0
+});
+
+const lineStyle = computed(() => {
+  return (temp: StepListVo, index: number): CSSProperties => {
+    const style: CSSProperties = {};
+    if (direction.value === "row") {
+      style.width = addUnit(size.value.width);
+      style.left = addUnit(size.value.width! / 2);
+    } else {
+      style.height = addUnit(size.value.height);
+      // style.top = addUnit(size.width / 2)
+    }
+    style.backgroundColor = temp.error
+      ? ColorConfig.error
+      : index < current.value
+      ? activeColor.value
+      : inactiveColor.value;
+    return style;
+  };
+});
+// const itemStyleInner = () => {
+// 	return {
+// 		...itemStyle.value
+// 	}
+// }
+const itemStyleInner = computed(() => {
+  return {};
+});
+/**
+ * @description 状态类名
+ * */
+const statusClass = computed(() => {
+  return (index: number, error: boolean = false) => {
+    if (current.value == index) {
+      return error ? "error" : "process";
+    } else if (error) {
+      return "error";
+    } else if (current.value > index) {
+      return "finish";
+    } else {
+      return "wait";
+    }
+  };
+});
+const statusColor = computed(() => {
+  return (index: number, error: boolean) => {
+    let colorTmp = "";
+    switch (statusClass.value(index, error)) {
+      case "finish":
+        colorTmp = activeColor.value;
+        break;
+      case "error":
+        colorTmp = ColorConfig.error;
+        break;
+      case "process":
+        colorTmp = dot.value ? activeColor.value : "transparent";
+        break;
+      default:
+        colorTmp = inactiveColor.value;
+        break;
+    }
+    return colorTmp;
+  };
+});
+
+const contentStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (direction.value === "column") {
+    style.marginLeft = dot.value ? "2px" : "6px";
+    style.marginTop = dot.value ? "0px" : "6px";
+  } else {
+    style.marginTop = dot.value ? "2px" : "6px";
+    style.marginLeft = dot.value ? "2px" : "6px";
+  }
+
+  return style;
+});
+
+onMounted(() => {
+  getStepsItemRect();
+});
+
+// 获取组件的尺寸，用于设置横线的位置
+const getStepsItemRect = () => {
+  getRect(".hy-steps-item").then((rect) => {
+    size.value = rect as UniApp.NodeInfo;
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-steps {
+  @include flex;
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &--row {
+    flex-direction: row;
+    flex: 1;
+    /* #ifdef MP */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    /* #endif */
+  }
+
+  &-item {
+    flex: 1;
+    @include flex;
+
+    &--row {
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    &--column {
+      position: relative;
+      flex-direction: row;
+      justify-content: flex-start;
+      padding-bottom: 5px;
+    }
+
+    &__wrapper {
+      @include flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      background-color: #fff;
+      border-radius: 50px;
+
+      &--column {
+        width: 20px;
+        height: 20px;
+
+        &--dot {
+          height: 20px;
+          width: 20px;
+        }
+      }
+
+      &--row {
+        width: 20px;
+        height: 20px;
+
+        &--dot {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      &__circle {
+        width: 20px;
+        height: 20px;
+        /* #ifndef APP-NVUE */
+        box-sizing: border-box;
+        flex-shrink: 0;
+        /* #endif */
+        border-radius: 100px;
+        border-width: 1px;
+        border-color: $hy-tips-color;
+        border-style: solid;
+        @include flex(row);
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.3s;
+
+        &__text {
+          color: $hy-tips-color;
+          font-size: 11px;
+          @include flex(row);
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          line-height: 11px;
+        }
+      }
+
+      &__dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 100px;
+        background-color: $hy-color-subtitle;
+      }
+    }
+
+    &__content {
+      @include flex;
+      flex: 1;
+
+      &--row {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &--column {
+        flex-direction: column;
+        justify-content: flex-start;
+        margin-left: 6px;
+        min-height: 60px;
+      }
+    }
+
+    &__line {
+      position: absolute;
+      background: $hy-tips-color;
+
+      &--row {
+        top: 10px;
+        height: 1px;
+      }
+
+      &--column {
+        width: 1px;
+        left: 10px;
+      }
+    }
+  }
+}
+</style>

package/components/hy-steps/props.ts

@@ -0,0 +1,15 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  direction: "row",
+  current: 0,
+  activeColor: "#3c9cff",
+  inactiveColor: "#969799",
+  activeIcon: "",
+  inactiveIcon: "",
+  dot: false,
+  iconSize: 17
+};
+
+export default defaultProps;

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

@@ -0,0 +1,58 @@
+import { CSSProperties } from "vue";
+
+export interface StepListVo {
+  /**
+   * @description 标题
+   * */
+  title?: string;
+  /**
+   * @description 描述
+   * */
+  desc?: string;
+  /**
+   * @description 是否错误
+   * */
+  error?: boolean;
+}
+export default interface IProps {
+  /**
+   * @description 设置当前处于第几步 (默认 0 )
+   * */
+  current: number;
+  /**
+   * @description 步骤条的数据集
+   * */
+  list: StepListVo[];
+  /**
+   * @description row-横向，column-竖向 (默认 'row' )
+   * */
+  direction?: HyApp.PermutationType;
+  /**
+   * @description 激活状态颜色 (默认 '#3c9cff' )
+   * */
+  activeColor?: string;
+  /**
+   * @description 未激活状态颜色 (默认 '#969799' )
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 激活状态的图标
+   * */
+  activeIcon?: string;
+  /**
+   * @description 未激活状态图标
+   * */
+  inactiveIcon?: string;
+  /**
+   * @description 是否显示点类型 (默认 false )
+   * */
+  dot?: boolean;
+  /**
+   * @description 图标大小  (默认 17 )
+   * */
+  iconSize?: string | number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-subsection/hy-subsection.vue

@@ -0,0 +1,272 @@
+<template>
+  <view
+    ref="hy-subsection"
+    :class="[`hy-subsection--${mode}`, 'hy-subsection']"
+    :style="[customStyle, wrapperStyle]"
+  >
+    <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
+    <view
+      :class="wrapperClass"
+      :ref="`hy-subsection__item--${index}`"
+      :style="itemStyle"
+      @tap="clickHandler(index)"
+      v-for="(item, index) in list"
+      :key="index"
+    >
+      <text class="hy-subsection__item__text" :style="[textStyle(index)]">{{
+        getText(item)
+      }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs, ref, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getRect } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  current,
+  list,
+  mode,
+  activeColor,
+  fontSize,
+  bold,
+  bgColor,
+  inactiveColor,
+  keyName
+} = toRefs(props);
+const emit = defineEmits(["change"]);
+
+// 组件尺寸
+const itemRect = ref<UniApp.NodeInfo>({
+  width: 0,
+  height: 0
+});
+const innerCurrent = ref<number>(0);
+
+/**
+ * @description 容器样式
+ * */
+const wrapperStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  // button模式时，设置背景色
+  if (mode.value === "button") {
+    style.backgroundColor = bgColor.value;
+  }
+  return style;
+});
+/**
+ * @description 容器类名
+ * */
+const wrapperClass = computed(() => {
+  return [
+    "hy-subsection__item",
+    "cursor-pointer",
+    `hy-subsection__item--${innerCurrent.value}`,
+    innerCurrent.value < list.value.length - 1 &&
+      "hy-subsection__item--no-border-right",
+    innerCurrent.value === 0 && "hy-subsection__item--first",
+    innerCurrent.value === list.value.length - 1 && "hy-subsection__item--last"
+  ];
+});
+/**
+ * @description 滑块的样式
+ * */
+const barStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  style.width = `${itemRect.value.width}px`;
+  style.height = `${itemRect.value.height}px`;
+  // 通过translateX移动滑块，其移动的距离为索引*item的宽度
+  style.transform = `translateX(${
+    innerCurrent.value * itemRect.value.width!
+  }px)`;
+  if (mode.value === "subsection") {
+    // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
+    style.backgroundColor = activeColor.value;
+  }
+  return style;
+});
+/**
+ * @description 滑块的类目
+ * */
+const barClass = computed(() => {
+  let className: string[] = ["hy-subsection__bar", "cursor-pointer"];
+  const className_2 = [
+    mode.value === "button" && "hy-subsection--button__bar",
+    innerCurrent.value === 0 &&
+      mode.value === "subsection" &&
+      "hy-subsection__bar--first",
+    innerCurrent.value > 0 &&
+      innerCurrent.value < list.value.length - 1 &&
+      mode.value === "subsection" &&
+      "hy-subsection__bar--center",
+    innerCurrent.value === list.value.length - 1 &&
+      mode.value === "subsection" &&
+      "hy-subsection__bar--last"
+  ].filter(Boolean) as string[];
+  className = className.concat(className_2);
+
+  return className;
+});
+/**
+ * @description 分段器item的样式
+ * */
+const itemStyle = computed(() => {
+  return (): CSSProperties => {
+    const style: CSSProperties = {};
+    if (mode.value === "subsection") {
+      // 设置border的样式
+      style.borderColor = activeColor.value;
+      style.borderWidth = "1px";
+      style.borderStyle = "solid";
+    }
+    return style;
+  };
+});
+/**
+ * @description 分段器文字颜色
+ * */
+const textStyle = computed(() => {
+  return (index: number): CSSProperties => {
+    const style: CSSProperties = {};
+    style.fontWeight =
+      bold.value && innerCurrent.value === index ? "bold" : "normal";
+    style.fontSize = addUnit(fontSize.value);
+    // subsection模式下，激活时默认为白色的文字
+    if (mode.value === "subsection") {
+      style.color = innerCurrent.value === index ? "#fff" : inactiveColor.value;
+    } else {
+      // button模式下，激活时文字颜色默认为activeColor
+      style.color =
+        innerCurrent.value === index ? activeColor.value : inactiveColor.value;
+    }
+    return style;
+  };
+});
+
+onMounted(() => {
+  init();
+});
+
+/**
+ * @description 初始化
+ * */
+const init = () => {
+  innerCurrent.value = current.value;
+  getRect(".hy-subsection__item--0").then((size) => {
+    itemRect.value = size as UniApp.NodeInfo;
+  });
+};
+/**
+ * @description 判断展示文本
+ * */
+const getText = (item: string | Record<string, string>) => {
+  return typeof item === "object" ? item[keyName.value] : item;
+};
+/**
+ * @description 点击事件
+ * */
+const clickHandler = (index: number) => {
+  // 值改变才触发
+  if (innerCurrent.value !== index) {
+    emit("change", index);
+  }
+  innerCurrent.value = index;
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-subsection {
+  @include flex;
+  position: relative;
+  overflow: hidden;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  box-sizing: border-box;
+  /* #endif */
+
+  &--button {
+    height: 35px;
+    background-color: rgb(238, 238, 239);
+    padding: 3px;
+    border-radius: 4px;
+    align-items: stretch;
+
+    &__bar {
+      background-color: #ffffff;
+      border-radius: 4px !important;
+    }
+  }
+
+  &--subsection {
+    height: 32px;
+  }
+
+  &__bar {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    transition-property: transform, color;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    /* #endif */
+
+    &--first {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    &--center {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    &--last {
+      border-top-left-radius: 0px;
+      border-bottom-left-radius: 0px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
+
+  &__item {
+    @include flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+    position: relative;
+
+    &--no-border-right {
+      border-right-width: 0 !important;
+    }
+
+    &--first {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+
+    &--last {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+
+    &__text {
+      font-size: 12px;
+      line-height: 14px;
+      @include flex;
+      align-items: center;
+      transition-property: color;
+      transition-duration: 0.3s;
+    }
+  }
+}
+</style>

package/components/hy-subsection/props.ts

@@ -0,0 +1,16 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  list: [],
+  current: 0,
+  activeColor: ColorConfig.success,
+  inactiveColor: "#303133",
+  mode: "button",
+  fontSize: 12,
+  bold: true,
+  bgColor: "#eeeeef",
+  keyName: "name"
+};
+
+export default defaultProps;