hy-app 0.1.1

package/components/hy-address-picker/hy-address-picker.vue

@@ -0,0 +1,262 @@
+<template>
+  <view class="u-datetime-picker">
+    <view
+      v-if="hasInput"
+      class="u-datetime-picker__has-input"
+      @click="onShowByClickInput"
+    >
+      <slot name="trigger" :value="inputValue">
+        <HyInput
+          :placeholder="placeholder"
+          :readonly="!!showByClickInput"
+          v-model="inputValue"
+          :disabled="disabled"
+          :shape="shape"
+          :border="border"
+          :disabledColor="disabledColor"
+          :customStyle="customStyle"
+        ></HyInput>
+        <view class="input-cover"></view>
+      </slot>
+    </view>
+    <HyPicker
+      ref="uPickerRef"
+      :show="show || (hasInput && showByClickInput)"
+      :popupMode="popupMode"
+      :closeOnClickOverlay="closeOnClickOverlay"
+      :columns="columns"
+      :defaultIndex="defaultIndex"
+      :title="title"
+      keyName="name"
+      :itemHeight="itemHeight"
+      :loading="loading"
+      :showToolbar="showToolbar"
+      :visibleItemCount="visibleItemCount"
+      :cancelText="cancelText"
+      :cancelColor="cancelColor"
+      :confirmColor="confirmColor"
+      :toolbarRightSlot="toolbarRightSlot"
+      @close="close"
+      @cancel="cancel"
+      @confirm="confirm"
+      @change="change"
+    >
+      <template #toolbar-right>
+        <slot name="toolbar-right">
+          {{ confirmText }}
+        </slot>
+      </template>
+      <template #toolbar-bottom>
+        <slot name="toolbar-bottom"> </slot>
+      </template>
+    </HyPicker>
+
+    <HyList container-height="" list=""></HyList>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import address from "../../utils/address.json";
+
+// 组件
+import HyInput from "../hy-input/hy-input.vue";
+import HyPicker from "../hy-picker/hy-picker.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { show, modelValue, hasInput, disabled, separator, closeOnClickOverlay } =
+  toRefs(props);
+const emit = defineEmits([
+  "close",
+  "cancel",
+  "confirm",
+  "change",
+  "update:modelValue"
+]);
+
+// 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
+const inputValue = ref<string>(""); // 表单显示值
+const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
+const columns = ref<any[]>([]);
+const uPickerRef = ref<InstanceType<typeof HyPicker> | null>();
+const defaultIndex = ref<number[]>([]);
+
+function normalizeCityName(city: string) {
+  // 定义常见的后缀
+  const suffixes = ["市", "省", "自治区", "特别行政区", "县", "区"];
+  suffixes.forEach((suffix) => {
+    if (city.endsWith(suffix)) {
+      city = city.slice(0, -suffix.length);
+    }
+  });
+  return city;
+}
+/**
+ * @description 判断城市是否相等
+ * */
+const areCitiesEqual = (city1: string, city2: string) => {
+  const normalizedCity1 = normalizeCityName(city1);
+  const normalizedCity2 = normalizeCityName(city2);
+  return normalizedCity1 === normalizedCity2;
+};
+/**
+ * @description 更新各列的值
+ * */
+const updateColumnValue = (value: string) => {
+  let provinceIndex, cityIndex, countyIndex;
+  // 判断是初始化有数据就找到对应索引，无数据默认索引为0
+  if (value) {
+    const addressArr = value.split(separator.value);
+    // 查出省索引
+    provinceIndex = address.findIndex((item) =>
+      areCitiesEqual(item.name, addressArr[0])
+    );
+    // 查出市索引
+    cityIndex = address[provinceIndex].areas.findIndex((item) =>
+      areCitiesEqual(item.name, addressArr[1])
+    );
+
+    // 查出县/区索引
+    countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex(
+      (item) => areCitiesEqual(item.name, addressArr[2])
+    );
+  } else {
+    provinceIndex = 0;
+    cityIndex = 0;
+    countyIndex = 0;
+  }
+  // 省级数组
+  const provinceData = address.map((item) => ({
+    name: item.name,
+    code: item.code
+  }));
+  // 市级数组
+  const cityData = address[provinceIndex].areas.map((item) => ({
+    name: item.name,
+    code: item.code
+  }));
+  // 县/区级数组
+  const areaData = address[provinceIndex].areas[cityIndex].areas;
+
+  // 默认索引
+  defaultIndex.value = [provinceIndex, cityIndex, countyIndex];
+  // 列表
+  columns.value = [provinceData, cityData, areaData];
+};
+
+const init = () => {
+  // 获取当前值
+  inputValue.value = modelValue.value;
+  // 更新列表
+  updateColumnValue(modelValue.value);
+};
+
+onMounted(() => {
+  init();
+});
+
+/**
+ * @description 关闭选择器
+ * */
+const close = () => {
+  if (closeOnClickOverlay.value) {
+    if (hasInput.value) {
+      showByClickInput.value = false;
+    }
+    emit("close");
+  }
+};
+
+/**
+ * @description 点击工具栏的取消按钮
+ * */
+const cancel = () => {
+  if (hasInput.value) {
+    showByClickInput.value = false;
+  }
+  emit("cancel");
+};
+
+/**
+ * @description 点击工具栏的确定按钮
+ * */
+const confirm = ({ value }: { value: Record<string, any>[] }) => {
+  inputValue.value = value.map((item) => item.name).join(separator.value);
+
+  showByClickInput.value = false;
+  emit("update:modelValue", inputValue.value);
+  emit("confirm", {
+    value: inputValue.value
+  });
+};
+
+/**
+ * @description 列发生变化时触发
+ * */
+const change = (e: any) => {
+  const { columnIndex, index, indexs } = e;
+  //如果改变的是第一列
+  if (columnIndex === 0) {
+    const children1 = address[index].areas.map((item) => {
+      return { name: item.name, code: item.code };
+    });
+    uPickerRef.value?.setColumnValues(1, children1);
+    //更换 第二列数据
+    const children2 = address[index].areas[indexs[1]].areas.map((item) => ({
+      ...item
+    }));
+    uPickerRef.value?.setColumnValues(2, children2);
+    //更换 第三列数据
+  }
+  if (columnIndex === 1) {
+    //如果改变的是第二列
+    const children3 = address[indexs[0]].areas[indexs[1]].areas.map((item) => ({
+      ...item
+    }));
+    uPickerRef.value?.setColumnValues(2, children3);
+  }
+
+  // 发出change时间，value为当前选中的时间戳
+  emit("change", {
+    ...e
+  });
+};
+
+const onShowByClickInput = () => {
+  if (!disabled.value) {
+    showByClickInput.value = !showByClickInput.value;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+.hy-datetime-picker {
+  flex: 1;
+  &__has-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      padding: 0 10px;
+    }
+  }
+}
+</style>

package/components/hy-address-picker/props.ts

@@ -0,0 +1,27 @@
+import IProps from "./typing";
+import { DateModeEnum } from "../../typing";
+
+const defaultProps: IProps = {
+  show: false,
+  popupMode: "bottom",
+  showToolbar: true,
+  modelValue: "",
+  title: "",
+  separator: " ",
+  loading: false,
+  itemHeight: 44,
+  cancelText: "取消",
+  confirmText: "确认",
+  cancelColor: "#909193",
+  confirmColor: "#3c9cff",
+  visibleItemCount: 5,
+  closeOnClickOverlay: false,
+  defaultIndex: [],
+  disabled: false,
+  hasInput: false,
+  placeholder: "请选择地址",
+  disabledColor: "#F5F5F5",
+  toolbarRightSlot: false
+};
+
+export default defaultProps;

package/components/hy-address-picker/typing.d.ts

@@ -0,0 +1,98 @@
+import { DateModeEnum } from "../../typing";
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 用于控制选择器的弹出和收起 ( 默认 false )
+   * */
+  show?: boolean;
+  /**
+   * @description 弹出层弹出方向
+   * */
+  popupMode?: HyApp.LayoutType;
+  /**
+   * @description 是否显示顶部的操作栏  ( 默认 true )
+   * */
+  showToolbar?: boolean;
+  /**
+   * @description 绑定值
+   * */
+  modelValue: string;
+  /**
+   * @description 顶部标题
+   * */
+  title?: string;
+  /**
+   * @description 字符串截取数组条件
+   * */
+  separator?: string;
+  /**
+   * @description 是否显示加载中状态   ( 默认 false )
+   * */
+  loading?: boolean;
+  /**
+   * @description 各列中，单个选项的高度   ( 默认 44 )
+   * */
+  itemHeight?: number;
+  /**
+   * @description 取消按钮的文字  ( 默认 '取消' )
+   * */
+  cancelText?: string;
+  /**
+   * @description 确认按钮的文字  ( 默认 '确认' )
+   * */
+  confirmText?: string;
+  /**
+   * @description 取消按钮的颜色  ( 默认 '#909193' )
+   * */
+  cancelColor?: string;
+  /**
+   * @description 确认按钮的颜色  ( 默认 '#3c9cff' )
+   * */
+  confirmColor?: string;
+  /**
+   * @description 每列中可见选项的数量  ( 默认 5 )
+   * */
+  visibleItemCount?: number;
+  /**
+   * @description 是否允许点击遮罩关闭选择器  ( 默认 false )
+   * */
+  closeOnClickOverlay?: boolean;
+  /**
+   * @description 各列的默认索引
+   * @note 类型有问题,需要调整
+   * */
+  defaultIndex?: Array<any>;
+  /**
+   * @description 是否禁用输入框 ( 默认 false )
+   * */
+  disabled?: boolean;
+  /**
+   * @description 输入框是否显示边框 ( 默认 false )
+   * */
+  hasInput?: boolean;
+  /**
+   * @description 输入框提示信息
+   * */
+  placeholder?: string;
+  /**
+   * @description 禁用时候输入框颜色
+   * */
+  disabledColor?: string;
+  /**
+   * @description 右边插槽
+   * */
+  toolbarRightSlot?: boolean;
+  /**
+   * @description 输入框形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 输入框边框
+   * */
+  border?: HyApp.BorderType;
+  /**
+   * @description 自定义输入框外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-avatar/hy-avatar.vue

@@ -0,0 +1,217 @@
+<template>
+  <view
+    class="hy-avatar"
+    :class="avatarClass"
+    :style="avatarStyle"
+    @tap="clickHandler"
+  >
+    <slot>
+      <!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU  -->
+      <open-data
+        v-if="mpAvatar && allowMp"
+        type="userAvatarUrl"
+        :style="[
+          {
+            width: addUnit(size),
+            height: addUnit(size)
+          }
+        ]"
+      />
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
+      <template v-if="mpAvatar && allowMp"></template>
+      <!-- #endif -->
+      <HyIcon
+        v-else-if="icon"
+        :name="icon"
+        :size="fontSize"
+        :color="color"
+      ></HyIcon>
+      <text
+        v-else-if="text"
+        :style="{
+          justifyContent: 'center',
+          textAlign: 'center',
+          color: color,
+          fontSize: fontSize
+        }"
+        >{{ text }}</text
+      >
+      <image
+        class="hy-avatar__image"
+        v-else
+        :class="[`hy-avatar__image--${shape}`]"
+        :src="avatarUrl || defaultUrl"
+        :mode="mode"
+        @error="errorHandler"
+      ></image>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs, ref, watch } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, random } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  src,
+  defaultUrl,
+  text,
+  icon,
+  randomBgColor,
+  colorIndex,
+  bgColor,
+  size,
+  shape,
+  name,
+  customStyle
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const base64Avatar =
+  "data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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";
+// 如果配置randomBgColor参数为true，在图标或者文字的模式下，会随机从中取出一个颜色值当做背景色
+const colors = ref<string[]>([
+  "#ffb34b",
+  "#f2bba9",
+  "#f7a196",
+  "#f18080",
+  "#88a867",
+  "#bfbf39",
+  "#89c152",
+  "#94d554",
+  "#f19ec2",
+  "#afaae4",
+  "#e1b0df",
+  "#c38cc1",
+  "#72dcdc",
+  "#9acdcb",
+  "#77b1cc",
+  "#448aca",
+  "#86cefa",
+  "#98d1ee",
+  "#73d1f1",
+  "#80a7dc"
+]);
+const avatarUrl = ref(src.value);
+const allowMp = ref<boolean>(false);
+
+watch(
+  () => src.value,
+  (newVal) => {
+    avatarUrl.value = newVal;
+    // 如果没有传src，则主动触发error事件，用于显示默认的头像，否则src为''空字符等的时候，会无内容展示
+    if (!newVal) {
+      errorHandler();
+    }
+  },
+  { immediate: true }
+);
+
+const avatarStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    backgroundColor:
+      text.value || icon.value
+        ? randomBgColor.value
+          ? colors.value[colorIndex.value ? colorIndex.value : random(0, 19)]
+          : bgColor.value
+        : "transparent"
+  };
+  if (typeof size.value === "number") {
+    style.width = addUnit(size.value);
+    style.height = addUnit(size.value);
+  }
+
+  return Object.assign(style, customStyle.value);
+});
+const avatarClass = computed<string[]>(() => {
+  const classes: string[] = [`hy-avatar--${shape.value}`];
+  if (typeof size.value === "string") {
+    classes.push(`hy-avatar--${size.value}`);
+  }
+
+  return classes;
+});
+
+const init = () => {
+  // 目前只有这几个小程序平台具有open-data标签
+  // 其他平台可以通过uni.getUserInfo类似接口获取信息，但是需要弹窗授权(首次)，不合符组件逻辑
+  // 故目前自动获取小程序头像只支持这几个平台
+  // #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
+  allowMp.value = true;
+  // #endif
+};
+init();
+
+/**
+ * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+ * */
+const isImg = () => {
+  return src.value.indexOf("/") !== -1;
+};
+// 图片加载时失败时触发
+const errorHandler = () => {
+  avatarUrl.value = defaultUrl.value || base64Avatar;
+};
+
+/**
+ * @description 点击头像
+ * */
+const clickHandler = (e: Event) => {
+  emit("click", name.value, e);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-avatar {
+  @include flex;
+  align-items: center;
+  justify-content: center;
+
+  &--circle {
+    border-radius: $hy-border-radius-circle;
+  }
+
+  &--square {
+    border-radius: $hy-border-margin-padding-sm;
+  }
+
+  &--small {
+    width: $hy-avatar-size-sm;
+    height: $hy-avatar-size-sm;
+  }
+
+  &--medium {
+    width: $hy-avatar-size-base;
+    height: $hy-avatar-size-base;
+  }
+
+  &--large {
+    width: $hy-avatar-size-lg;
+    height: $hy-avatar-size-lg;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    &--circle {
+      border-radius: $hy-border-radius-circle;
+      overflow: hidden;
+    }
+
+    &--square {
+      border-radius: $hy-border-margin-padding-sm;
+    }
+  }
+}
+</style>

package/components/hy-avatar/props.ts

@@ -0,0 +1,20 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  src: "",
+  shape: "circle",
+  size: 40,
+  mode: "scaleToFill",
+  text: "",
+  bgColor: "#c0c4cc",
+  color: "#ffffff",
+  fontSize: 18,
+  icon: "",
+  mpAvatar: false,
+  randomBgColor: false,
+  defaultUrl: "",
+  colorIndex: 0,
+  name: ""
+};
+
+export default defaultProps;

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
+   * */
+  src: string;
+  /**
+   * @description 头像形状  （ circle (默认) | square）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ）
+   * */
+  size?: number | HyApp.SizeType;
+  /**
+   * @description 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ）
+   * */
+  mode?: string;
+  /**
+   * @description 用文字替代图片，级别优先于src
+   * */
+  text?: string;
+  /**
+   * @description 背景颜色，一般显示文字时用 （默认 '#c0c4cc' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 文字颜色 （默认 '#ffffff' ）
+   * */
+  color?: string;
+  /**
+   * @description 文字大小  （默认 18 ）
+   * */
+  fontSize?: number | string;
+  /**
+   * @description 显示的图标
+   * */
+  icon?: string;
+  /**
+   * @description 显示小程序头像，只对百度，微信，QQ小程序有效  （默认 false ）
+   * */
+  mpAvatar?: boolean;
+  /**
+   * @description 是否使用随机背景色  （默认 false ）
+   * */
+  randomBgColor?: boolean;
+  /**
+   * @description 加载失败的默认头像(组件有内置默认图片)
+   * */
+  defaultUrl?: string;
+  /**
+   * @description 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+   * */
+  colorIndex?: number;
+  /**
+   * @description 组件标识符  （默认 'level' ）
+   * */
+  name?: string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}