hy-app 0.1.2 → 0.1.3

package/components/hy-text/hy-text.vue

@@ -0,0 +1,238 @@
+<template>
+  <view class="hy-text" v-if="show" :style="wrapStyle" @tap="clickHandler">
+    <text
+      :class="['hy-text__price', type && `hy-text__value--${type}`]"
+      v-if="mode === 'price'"
+      :style="[valueStyle]"
+      >￥</text
+    >
+    <view class="hy-text__prefix-icon" v-if="prefixIcon">
+      <HyIcon :name="prefixIcon" :customStyle="iconStyle"></HyIcon>
+    </view>
+    <template v-if="openType && isMp">
+      <button
+        class="hy-reset-button hy-text__value"
+        :style="[valueStyle]"
+        :data-index="index"
+        :openType="openType"
+        @getuserinfo="onGetUserInfo"
+        @contact="onContact"
+        @getphonenumber="onGetPhoneNumber"
+        @error="onError"
+        @launchapp="onLaunchApp"
+        @opensetting="onOpenSetting"
+        :lang="lang"
+        :session-from="sessionFrom"
+        :send-message-title="sendMessageTitle"
+        :send-message-path="sendMessagePath"
+        :send-message-img="sendMessageImg"
+        :show-message-card="showMessageCard"
+        :app-parameter="appParameter"
+      >
+        {{ value }}
+      </button>
+    </template>
+    <text
+      v-else
+      class="hy-text__value"
+      :style="[valueStyle]"
+      :class="[
+        type && `hy-text__value--${type}`,
+        lines && `hy-text__value--lines`,
+        mode === 'link' && `hy-text__value--link`,
+      ]"
+      >{{ value }}</text
+    >
+    <view class="hy-text__suffix-icon" v-if="suffixIcon">
+      <HyIcon :name="suffixIcon" :customStyle="iconStyle"></HyIcon>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties, nextTick, toRefs } from "vue";
+import type IProps from "./typing";
+import defaultProps from "./props";
+import {
+  addUnit,
+  error,
+  formatName,
+  formatTime,
+  isDate,
+  priceFormat,
+} from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  type,
+  show,
+  text,
+  mode,
+  call,
+  bold,
+  block,
+  color,
+  size,
+  decoration,
+  margin,
+  lines,
+  lineHeight,
+  align,
+  flex,
+  href,
+  format,
+  customStyle,
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const wrapStyle = computed(() => {
+  const style: CSSProperties = {
+    margin: margin.value,
+    justifyContent:
+      align.value === "left"
+        ? "flex-start"
+        : align.value === "center"
+          ? "center"
+          : "flex-end",
+  };
+  // 占满剩余空间
+  if (flex.value) {
+    style.flex = 1;
+    // #ifndef APP-NVUE
+    style.width = "100%";
+    // #endif
+  }
+  return style;
+});
+const valueStyle = computed(() => {
+  const style: CSSProperties = {
+    textDecoration: decoration.value,
+    fontWeight: bold.value ? "bold" : "normal",
+    fontSize: addUnit(size.value),
+  };
+  !type.value && (style.color = color.value);
+  lineHeight.value && (style.lineHeight = addUnit(lineHeight.value));
+  block.value && (style.display = "block");
+  return Object.assign(style, customStyle.value);
+});
+
+/**
+ * @description 格式化值
+ * */
+const value = computed(() => {
+  switch (mode.value) {
+    case "price":
+      // 如果text不为金额进行提示
+      if (!/^\d+(\.\d+)?$/.test(text.value.toString())) {
+        error("金额模式下，text参数需要为金额格式");
+      }
+      // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+      if (typeof format.value === "function") {
+        // 如果用户传入的是函数，使用函数格式化
+        return format.value(text.value);
+      }
+      // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+      return priceFormat(text.value, 2);
+    case "date":
+      // 判断是否合法的日期或者时间戳
+      !isDate(text.value) &&
+        error("日期模式下，text参数需要为日期或时间戳格式");
+      // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+      if (typeof format.value === "function") {
+        // 如果用户传入的是函数，使用函数格式化
+        return format.value(text);
+      }
+      if (format.value) {
+        // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+        return formatTime(text.value, format.value);
+      }
+      console.log(formatTime(text.value, "yyyy-MM-dd"), text.value);
+      // 如果没有设置format，则设置为默认的时间格式化形式
+      return formatTime(text.value, "yyyy-MM-dd");
+    case "phone":
+      // 判断是否合法的手机号
+      // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+      if (typeof format.value === "function") {
+        // 如果用户传入的是函数，使用函数格式化
+        return format.value(text);
+      }
+      if (format.value === "encrypt") {
+        // 如果format为encrypt，则将手机号进行星号加密处理
+        return `${text.value.toString().substring(0, 3)}****${text.value.toString().substring(7)}`;
+      }
+      return text.value;
+    case "name":
+      // 判断是否合法的字符粗
+      if (typeof text.value !== "string") {
+        error("姓名模式下，text参数需要为字符串格式");
+      } else {
+        if (typeof format.value === "function") {
+          // 如果用户传入的是函数，使用函数格式化
+          return format.value(text);
+        }
+        if (format.value === "encrypt") {
+          // 如果format为encrypt，则将姓名进行星号加密处理
+          return formatName(text.value);
+        }
+      }
+      return text.value;
+    case "link":
+      return text.value;
+    default:
+      return text.value;
+  }
+});
+
+const isMp = computed(() => {
+  let mp = false;
+  // #ifdef MP
+  mp = true;
+  // #endif
+  return mp;
+});
+
+const clickHandler = (e) => {
+  // 如果为手机号模式，拨打电话
+  if (call.value && mode.value === "phone") {
+    uni.makePhoneCall({
+      phoneNumber: text.value,
+    });
+  }
+  // 如果是有链接跳转
+  if (href.value && mode.value === "link") {
+    toLink();
+  }
+  emit("click", e);
+};
+
+const toLink = () => {
+  // #ifdef APP-PLUS
+  plus.runtime.openURL(href.value);
+  // #endif
+  // #ifdef H5
+  window.open(href.value);
+  // #endif
+  // #ifdef MP
+  uni.setClipboardData({
+    data: href.value,
+    success: () => {
+      uni.hideToast();
+      nextTick(() => {
+        uni.showToast({ title: "链接已复制，请在浏览器打开" });
+      });
+    },
+  });
+  // #endif
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+@import "../../libs/css/mixin.scss";
+.hy-text__value--lines {
+  @include line-feed(v-bind(lines));
+}
+</style>

package/components/hy-text/index.scss

@@ -0,0 +1,70 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-text {
+  @include flex(row);
+  align-items: center;
+  flex-wrap: nowrap;
+
+  &__price {
+    font-size: 14px;
+    color: $hy-text-color-grey;
+  }
+
+  &__value {
+    font-size: 14px;
+    @include flex;
+    color: $hy-text-color;
+    flex-wrap: wrap;
+    // flex: 1;
+    text-overflow: ellipsis;
+    align-items: center;
+
+    /*链接*/
+    &--link {
+      text-decoration: underline;
+      color: $hy-primary;
+    }
+
+    /*超出出现省略号*/
+    &--lines {
+      @include line-feed(v-bind(lines));
+    }
+
+    &--primary {
+      color: $hy-primary;
+    }
+
+    &--warning {
+      color: $hy-warning;
+    }
+
+    &--success {
+      color: $hy-success;
+    }
+
+    &--info {
+      color: $hy-info;
+    }
+
+    &--error {
+      color: $hy-error;
+    }
+
+    &--main {
+      color: $hy-text-color;
+    }
+
+    &--content {
+      color: $hy-text-color-grey;
+    }
+
+    &--tips {
+      color: $hy-tips-color;
+    }
+
+    &--light {
+      color: $hy-text-color-light;
+    }
+  }
+}

package/components/hy-text/props.ts

@@ -0,0 +1,30 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  text: "",
+  type: "",
+  show: true,
+  prefixIcon: "",
+  suffixIcon: "",
+  mode: "text",
+  href: "",
+  format: "",
+  call: false,
+  openType: "",
+  bold: false,
+  block: false,
+  lines: "",
+  color: "",
+  size: 15,
+  iconStyle: {
+    fontSize: "15px",
+  },
+  decoration: "",
+  margin: "",
+  lineHeight: "",
+  align: "left",
+  wordWrap: "normal",
+  flex: true,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,98 @@
+import type { CSSProperties } from "vue";
+
+export type TextMode = "text" | "price" | "phone" | "name" | "date" | "link";
+
+export default interface IProps {
+  /**
+   * @description 显示的值
+   * */
+  text: string | number;
+  /**
+   * @description 主题颜色
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 是否显示（默认 true ）
+   * */
+  show?: boolean;
+  /**
+   * @description 前置图标
+   * */
+  prefixIcon?: string;
+  /**
+   * @description 后置图标
+   * */
+  suffixIcon?: string;
+  /**
+   * @description 文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+   * */
+  mode?: TextMode;
+  /**
+   * @description mode=link下，配置的链接
+   * */
+  href?: string;
+  /**
+   * @description 格式化规则
+   * */
+  format?: Function | string;
+  /**
+   * @description mode=phone时，点击文本是否拨打电话（默认 false ）
+   * */
+  call?: boolean;
+  /**
+   * @description 小程序的打开方式
+   * */
+  openType?: string;
+  /**
+   * @description 是否粗体，默认normal（默认 false ）
+   * */
+  bold?: boolean;
+  /**
+   * @description 是否块状（默认 false ）
+   * */
+  block?: boolean;
+  /**
+   * @description 文本显示的行数，如果设置，超出此行数，将会显示省略号
+   * */
+  lines?: string | number;
+  /**
+   * @description 文本颜色（默认 '#303133' ）
+   * */
+  color?: string;
+  /**
+   * @description 是否显示字体大小（默认 15 ）遮罩
+   * */
+  size?: number | string;
+  /**
+   * @description 图标的样式 （默认 {fontSize: '15px'} ）
+   * */
+  iconStyle?: CSSProperties;
+  /**
+   * @description 文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+   * */
+  decoration?: "" | "none" | "underline" | "line-through";
+  /**
+   * @description 外边距，对象、字符串，数值形式均可（默认 0 ）
+   * */
+  margin?: string;
+  /**
+   * @description 文本行高
+   * */
+  lineHeight?: string | number;
+  /**
+   * @description 文本对齐方式，可选值left|center|right（默认 'left' ）
+   * */
+  align?: HyApp.CenterType;
+  /**
+   * @description 文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+   * */
+  wordWrap?: "normal" | "break-word" | "anywhere";
+  /**
+   * @description 是否占满剩余空间（默认：true）
+   * */
+  flex?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-textarea/hy-textarea.vue

@@ -187,50 +187,5 @@ const onKeyboardheightchange = (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-textarea {
-  border-radius: 4px;
-  background-color: #fff;
-  position: relative;
-  @include flex;
-  flex: 1;
-  padding: 9px;
-
-  &--radius {
-    border-radius: 4px;
-  }
-
-  &--no-radius {
-    border-radius: 0;
-  }
-
-  &--disabled {
-    background-color: $hy-color-disable-bg;
-  }
-
-  &__field {
-    flex: 1;
-    font-size: 15px;
-    color: #606266ff;
-    width: 100%;
-  }
-
-  &__count {
-    position: absolute;
-    right: 5px;
-    bottom: 2px;
-    font-size: 12px;
-    color: $hy-tips-color;
-    background-color: #ffffff;
-    padding: 1px 4px;
-  }
-}
-.hy-border {
-  border: $hy-border-line;
-  &__bottom {
-    border-bottom: $hy-border-line;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-textarea/index.scss

@@ -0,0 +1,40 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-textarea {
+  border-radius: $hy-border-radius-sm;
+  background-color: #fff;
+  position: relative;
+  @include flex;
+  flex: 1;
+  padding: $hy-border-margin-padding-base;
+
+  &--radius {
+    border-radius: $hy-border-radius-sm;
+  }
+
+  &--no-radius {
+    border-radius: $hy-border-radius-no;
+  }
+
+  &--disabled {
+    background-color: $hy-color-disable-bg;
+  }
+
+  &__field {
+    flex: 1;
+    font-size: 15px;
+    color: #606266ff;
+    width: 100%;
+  }
+
+  &__count {
+    position: absolute;
+    right: 5px;
+    bottom: 2px;
+    font-size: 12px;
+    color: $hy-tips-color;
+    background-color: #ffffff;
+    padding: 1px 4px;
+  }
+}