hy-app 0.1.2 → 0.1.4

package/components/hy-submitBar/props.ts

@@ -0,0 +1,22 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  menus: [],
+  fixed: true,
+  border: true,
+  leftLoading: false,
+  rightLoading: false,
+  iconColor: "",
+  iconLabelColor: "#909193FF",
+  textColor: "",
+  showLeftBtn: true,
+  showRightBtn: true,
+  leftBtnText: "加入购物车",
+  rightBtnText: "立即购买",
+  leftBtnColor: "#ed3f14",
+  rightBtnColor: "#ff7900",
+  shape: "circle",
+  warn: 300,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,88 @@
+import type { CSSProperties } from "vue";
+import type BadgeProps from "../hy-badge/props";
+
+interface IconMenus {
+  /**
+   * @description icon图标
+   * */
+  icon: string;
+  /**
+   * @description 文本
+   * */
+  text: string;
+  /**
+   * @description 徽标值
+   * */
+  badge?: BadgeProps["badge"];
+}
+
+export default interface IProps {
+  /**
+   * @description 左边菜单栏
+   * */
+  menus?: IconMenus[];
+  /**
+   * @description 绝对定位
+   * */
+  fixed?: boolean;
+  /**
+   * @description 是否显示边框
+   * */
+  border?: boolean;
+  /**
+   * @description 加载左边按钮loading
+   * */
+  leftLoading?: boolean;
+  /**
+   * @description 加载右边按钮loading
+   * */
+  rightLoading?: boolean;
+  /**
+   * @description 左边icon的颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description 左边文字的颜色
+   * */
+  iconLabelColor?: string;
+  /**
+   * @description 右边按钮文字颜色
+   * */
+  textColor?: string;
+  /**
+   * @description 显示左边按钮
+   * */
+  showLeftBtn?: boolean;
+  /**
+   * @description 显示右边按钮
+   * */
+  showRightBtn?: boolean;
+  /**
+   * @description 左边按钮文字
+   * */
+  leftBtnText?: string;
+  /**
+   * @description 右边按钮文字
+   * */
+  rightBtnText?: string;
+  /**
+   * @description 左边按钮颜色，支持渐变色
+   * */
+  leftBtnColor?: string;
+  /**
+   * @description 有边按钮颜色，支持渐变色
+   * */
+  rightBtnColor?: string;
+  /**
+   * @description 按钮的形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 按钮点击等待时长（运用了节流方法）
+   * */
+  warn?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -6,7 +6,7 @@
   >
     <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
     <view
-      :class="wrapperClass"
+      :class="wrapperClass(index)"
       :ref="`hy-subsection__item--${index}`"
       :style="itemStyle"
       @tap="clickHandler(item, index)"
@@ -21,16 +21,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, onMounted, watch } from "vue";
+import {computed, toRefs, ref, onMounted, watch, getCurrentInstance} from "vue";
 import type { CSSProperties } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
-import type { SubSectionListVo } from "./typing";
+import type { SubSectionVo } from "./typing";
 import { addUnit, getRect, guid } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
   modelValue,
+  current,
   list,
   mode,
   activeColor,
@@ -42,6 +43,7 @@ const {
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
+const instance = getCurrentInstance();
 // 组件尺寸
 const itemRect = ref<UniApp.NodeInfo>({
   width: 0,
@@ -50,12 +52,6 @@ const itemRect = ref<UniApp.NodeInfo>({
 const innerCurrent = ref<number>(0);
 const guidClass = guid();
 
-watch(
-  () => modelValue.value,
-  (newVal: string) => {},
-  { immediate: true },
-);
-
 /**
  * @description 容器样式
  * */
@@ -71,15 +67,16 @@ const wrapperStyle = computed<CSSProperties>(() => {
  * @description 容器类名
  * */
 const wrapperClass = computed(() => {
-  return [
-    "hy-subsection__item",
-    "cursor-pointer",
-    `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
-    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",
-  ];
+  return (index: number) => {
+    return [
+      "hy-subsection__item",
+      "cursor-pointer",
+      `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
+      index < list.value.length - 1 && "hy-subsection__item--no-border-right",
+      index === 0 && "hy-subsection__item--first",
+      index === list.value.length - 1 && "hy-subsection__item--last",
+    ];
+  };
 });
 /**
  * @description 滑块的样式
@@ -123,17 +120,15 @@ const barClass = computed(() => {
 /**
  * @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;
-  };
+const itemStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (mode.value === "subsection") {
+    // 设置border的样式
+    style.borderColor = activeColor.value;
+    style.borderWidth = "1px";
+    style.borderStyle = "solid";
+  }
+  return style;
 });
 /**
  * @description 分段器文字颜色
@@ -164,18 +159,20 @@ onMounted(() => {
  * @description 初始化
  * */
 const init = () => {
-  innerCurrent.value = list.value.findIndex(
-    (item: string | SubSectionListVo) => {
-      if (typeof item === "string") {
-        return item === modelValue.value;
-      } else {
-        return item[fieldNames.value.value] === modelValue.value;
-      }
-    },
-  );
+  innerCurrent.value = list.value.findIndex((item: SubSectionVo) => {
+    if (typeof item === "string" || typeof item === "number") {
+      return item === modelValue.value;
+    } else {
+      return item[fieldNames.value.value] === modelValue.value;
+    }
+  });
+
+  // 设置默认值当没有找的时候导致样式问题
+  innerCurrent.value =
+    innerCurrent.value === -1 ? current.value : innerCurrent.value;
 
   // TODO： 多个数组在一起计算宽度， 宽度不一样会有问题，所以必须加guidClass随机数
-  getRect(`.hy-subsection__item--0__${guidClass}`).then((size) => {
+  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then((size) => {
     itemRect.value = size as UniApp.NodeInfo;
   });
 };
@@ -183,21 +180,21 @@ const init = () => {
 /**
  * @description 判断值
  * */
-const getValue = (item: string | SubSectionListVo) => {
+const getValue = (item: SubSectionVo) => {
   return typeof item === "object" ? item[fieldNames.value.value] : item;
 };
 
 /**
  * @description 判断展示文本
  * */
-const getName = (item: string | SubSectionListVo) => {
+const getName = (item: SubSectionVo) => {
   return typeof item === "object" ? item[fieldNames.value.label] : item;
 };
 
 /**
  * @description 点击事件
  * */
-const clickHandler = (temp: string | SubSectionListVo, index: number) => {
+const clickHandler = (temp: SubSectionVo, index: number) => {
   // 值改变才触发
   if (innerCurrent.value !== index) {
     emit("change", index);
@@ -208,94 +205,5 @@ const clickHandler = (temp: string | SubSectionListVo, index: number) => {
 </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;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-subsection/index.scss

@@ -0,0 +1,82 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.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: $hy-border-radius-sm;
+    align-items: stretch;
+
+    &__bar {
+      background-color: #ffffff;
+      border-radius: $hy-border-radius-sm;
+    }
+  }
+
+  &--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-radius: $hy-border-radius-sm 0 0 $hy-border-radius-sm;
+    }
+
+    &--center {
+      border-radius: 0;
+    }
+
+    &--last {
+      border-radius: 0 $hy-border-radius-sm $hy-border-radius-sm 0;
+    }
+  }
+
+  &__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: $hy-border-radius-sm;
+      border-bottom-left-radius: $hy-border-radius-sm;
+    }
+
+    &--last {
+      border-top-right-radius: $hy-border-radius-sm;
+      border-bottom-right-radius: $hy-border-radius-sm;
+    }
+
+    &__text {
+      font-size: 12px;
+      line-height: 14px;
+      @include flex;
+      align-items: center;
+      transition-property: color;
+      transition-duration: 0.3s;
+    }
+  }
+}

package/components/hy-subsection/props.ts

@@ -3,6 +3,7 @@ import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
   modelValue: "",
+  current: 0,
   list: [],
   fieldNames: {
     label: "name",

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

@@ -1,17 +1,26 @@
 import type { CSSProperties } from "vue";
 import { HyApp } from "@/package/typing/modules/common";
 
-export interface SubSectionListVo extends HyApp.FieldNamesType {
+export interface SubSectionItemVo extends HyApp.FieldNamesType {
   name: string;
-  value: string;
+  value: string | number;
 }
 
+export type SubSectionVo = string | number | SubSectionItemVo;
+
 export default interface IProps {
-  modelValue: string;
+  /**
+   * @description 接收值
+   * */
+  modelValue: string | number;
+  /**
+   * @description 默认值 (默认0)
+   * */
+  current?: number;
   /**
    * @description tab的数据
    * */
-  list: (string | SubSectionListVo)[];
+  list: SubSectionVo[];
   /**
    * @description list的键值
    * */