hy-app 0.1.1

package/components/hy-popup/hy-popup.vue

@@ -0,0 +1,269 @@
+<template>
+  <view class="hy-popup">
+    <HyOverlay
+      :show="show"
+      @click="overlayClick"
+      v-if="overlay"
+      :zIndex="zIndex"
+      :duration="overlayDuration"
+      :customStyle="overlayStyle"
+      :opacity="overlayOpacity"
+    ></HyOverlay>
+    <HyTransition
+      :show="show"
+      :customStyle="transitionStyle"
+      :mode="positionMode"
+      :duration="duration"
+      @afterEnter="afterEnter"
+      @click="clickHandler"
+    >
+      <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
+      <view class="hy-popup__content" :style="[contentStyle]">
+        <!--        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>-->
+        <slot></slot>
+        <view
+          v-if="closeable"
+          @tap.stop="close"
+          class="hy-popup__content__close"
+          :class="['hy-popup__content__close--' + closeIconPos]"
+          hover-class="hy-popup__content__close--hover"
+          hover-stay-time="150"
+        >
+          <HyIcon
+            :name="IconConfig.CLOSE"
+            color="#909399"
+            size="18"
+            bold
+          ></HyIcon>
+        </view>
+        <!--        <hy-safe-bottom v-if="safeAreaInsetBottom"></hy-safe-bottom>-->
+      </view>
+    </HyTransition>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, ref, toRefs, watch } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getWindowInfo } from "../../utils";
+import { IconConfig } from "../../config";
+
+// 组件
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  duration,
+  show,
+  closeOnClickOverlay,
+  mode,
+  zIndex,
+  bgColor,
+  round,
+  customStyle,
+  zoom
+} = toRefs(props);
+const emit = defineEmits(["open", "close", "click", "update:show"]);
+
+const overlayDuration = ref(duration.value + 50);
+
+watch(
+  () => show.value,
+  (newValue) => {
+    if (newValue) {
+      // #ifdef MP-WEIXIN
+      // const children = this.$children
+      // retryComputedComponentRect(children)
+      // #endif
+    }
+  }
+);
+
+const transitionStyle = computed(() => {
+  const style: CSSProperties = {
+    zIndex: zIndex.value,
+    position: "fixed",
+    display: "flex"
+  };
+  if (mode.value !== "center") {
+    style[mode.value] = 0;
+  }
+  switch (mode.value) {
+    case "left":
+    case "right":
+      style.bottom = 0;
+      style.top = 0;
+      break;
+    case "top":
+    case "bottom":
+      style.left = 0;
+      style.right = 0;
+      break;
+    case "center":
+      Object.assign(style, {
+        alignItems: "center",
+        "justify-content": "center",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      });
+      break;
+    default:
+      break;
+  }
+
+  return style;
+});
+const contentStyle = computed(() => {
+  const style: CSSProperties = {};
+  // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
+  // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
+  const { safeAreaInsets } = getWindowInfo();
+  if (mode.value !== "center") {
+    style.flex = 1;
+  }
+  // 背景色，一般用于设置为transparent，去除默认的白色背景
+  if (bgColor.value) {
+    style.backgroundColor = bgColor.value;
+  }
+  if (round.value) {
+    const value = addUnit(round.value);
+    switch (mode.value) {
+      case "top":
+        style.borderBottomLeftRadius = value;
+        style.borderBottomRightRadius = value;
+        break;
+      case "bottom":
+        style.borderTopLeftRadius = value;
+        style.borderTopRightRadius = value;
+        break;
+      case "center":
+        style.borderRadius = value;
+        break;
+      default:
+        break;
+    }
+  }
+  return Object.assign(style, customStyle.value || {});
+});
+const positionMode = computed(() => {
+  if (mode.value === "center") {
+    return zoom.value ? "fade-zoom" : "fade";
+  }
+  if (mode.value === "left") {
+    return "slide-left";
+  }
+  if (mode.value === "right") {
+    return "slide-right";
+  }
+  if (mode.value === "bottom") {
+    return "slide-up";
+  }
+  if (mode.value === "top") {
+    return "slide-down";
+  }
+});
+
+// 点击遮罩
+const overlayClick = () => {
+  if (closeOnClickOverlay.value) {
+    emit("update:show", false);
+    emit("close");
+  }
+};
+const close = () => {
+  emit("update:show", false);
+  emit("close");
+};
+const afterEnter = () => {
+  emit("open");
+};
+const clickHandler = () => {
+  // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
+  if (mode.value === "center") {
+    overlayClick();
+  }
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+$u-popup-flex: 1 !default;
+$u-popup-content-background-color: #fff !default;
+
+.hy-popup {
+  flex: $u-popup-flex;
+
+  &__content {
+    background-color: $u-popup-content-background-color;
+    position: relative;
+
+    &--round-top {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    &--round-left {
+      border-top-left-radius: 0;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 10px;
+    }
+
+    &--round-right {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 0;
+    }
+
+    &--round-bottom {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--round-center {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    &__close {
+      position: absolute;
+
+      &--hover {
+        opacity: 0.4;
+      }
+    }
+
+    &__close--top-left {
+      top: 15px;
+      left: 15px;
+    }
+
+    &__close--top-right {
+      top: 15px;
+      right: 15px;
+    }
+
+    &__close--bottom-left {
+      bottom: 15px;
+      left: 15px;
+    }
+
+    &__close--bottom-right {
+      right: 15px;
+      bottom: 15px;
+    }
+  }
+}
+</style>

package/components/hy-popup/props.ts

@@ -0,0 +1,21 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  show: false,
+  overlay: true,
+  mode: "bottom",
+  duration: 300,
+  closeable: false,
+  overlayStyle: {},
+  overlayOpacity: 0.5,
+  closeOnClickOverlay: true,
+  zIndex: 10075,
+  safeAreaInsetBottom: true,
+  safeAreaInsetTop: false,
+  closeIconPos: "top-right",
+  round: 0,
+  zoom: true,
+  bgColor: ""
+};
+
+export default defaultProps;

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

@@ -0,0 +1,68 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否展示弹窗 (默认 false )
+   * */
+  show: boolean;
+  /**
+   * @description 是否显示遮罩 （默认 true ）
+   * */
+  overlay?: boolean;
+  /**
+   * @description 弹出方向（默认 'bottom' ）
+   * */
+  mode?: HyApp.LayoutType;
+  /**
+   * @description 动画时长，单位ms （默认 300 ）
+   * */
+  duration?: number;
+  /**
+   * @description 是否显示关闭图标（默认 false ）
+   * */
+  closeable?: boolean;
+  /**
+   * @description 自定义遮罩的样式
+   * */
+  overlayStyle?: CSSProperties;
+  /**
+   * @description 遮罩透明度，0-1之间（默认 0.5）
+   * */
+  overlayOpacity?: number;
+  /**
+   * @description 点击遮罩是否关闭弹窗 （默认  true ）
+   * */
+  closeOnClickOverlay?: boolean;
+  /**
+   * @description 层级 （默认 10075 ）
+   * */
+  zIndex?: number;
+  /**
+   * @description 是否为iPhoneX留出底部安全距离 （默认 true ）
+   * */
+  safeAreaInsetBottom?: boolean;
+  /**
+   * @description 是否留出顶部安全距离（状态栏高度） （默认 false ）
+   * */
+  safeAreaInsetTop?: boolean;
+  /**
+   * @description 自定义关闭图标位置（默认 'top-right' ）
+   * */
+  closeIconPos?: "top-left" | "top-right";
+  /**
+   * @description 圆角值（默认 0）
+   * */
+  round?: number;
+  /**
+   * @description 当mode=center时 是否开启缩放（默认 true ）
+   * */
+  zoom?: boolean;
+  /**
+   * @description 背景颜色
+   * */
+  bgColor?: string;
+  /**
+   * @description 自定义样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-price/hy-price.vue

@@ -0,0 +1,86 @@
+<!--
+  Description: 价格的样式
+-->
+
+<template>
+  <text class="hy-price" :style="priceStyle" @tap="handleClick">
+    <text class="hy-price__prefix">{{ symbol }}</text>
+    <text
+      class="hy-price__text"
+      :style="[
+        { 'font-size': `${Number(fontSize) + Number(fontSize) * 0.8}rpx` }
+      ]"
+      >{{ priceOne[0] }}
+    </text>
+    <text class="hy-price__decimal">
+      {{ "." + priceOne[1].slice(0, num) }}
+    </text>
+  </text>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { text, textColor, weight, fontSize, slant, customStyle } = toRefs(props);
+const emit = defineEmits(["click"]);
+
+/**
+ * @description 价格整体样式
+ * */
+const priceStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    color: textColor.value,
+    fontWeight: weight.value,
+    fontStyle: slant.value ? "oblique" : "",
+    fontSize: addUnit(fontSize.value)
+  };
+
+  return Object.assign(style, customStyle);
+});
+
+/**
+ * @description 价格处理
+ * */
+const priceOne = computed(() => {
+  let value = "";
+  if (typeof text.value !== "string") {
+    value = text.value.toString();
+  } else {
+    value = text.value;
+  }
+  if (/\./g.test(value)) {
+    if (Number(value)) {
+      return value.split(".");
+    } else {
+      return ["0", "00"];
+    }
+  } else {
+    return [value, "000000"];
+  }
+});
+
+/**
+ * @description 点击事件
+ * */
+const handleClick = () => {
+  emit("click", text.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.hy-price {
+  font-size: 32rpx;
+  font-weight: 500;
+  margin-top: 5px;
+  &__prefix {
+    font-size: 24rpx;
+  }
+  &__decimal {
+    font-size: 24rpx;
+  }
+}
+</style>

package/components/hy-price/props.ts

@@ -0,0 +1,13 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  text: "0.00",
+  symbol: "￥",
+  num: 2,
+  textColor: "#FE3232",
+  fontSize: 22,
+  weight: 500,
+  slant: false
+};
+
+export default defaultProps;

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

@@ -0,0 +1,36 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 传入金额值
+   * */
+  text: string | number;
+  /**
+   * @description 金额符号（默认：￥）
+   * */
+  symbol?: string;
+  /**
+   * @description 保留小数点后几位数（默认：2）
+   * */
+  num?: number;
+  /**
+   * @description 字体颜色（默认：#FE3232）
+   * */
+  textColor?: string;
+  /**
+   * @description 字体大小（默认：22）
+   * */
+  fontSize?: string | number;
+  /**
+   * @description 字体粗细（默认：500）
+   * */
+  weight?: string | number;
+  /**
+   * @description 是否倾斜（默认：false）
+   * */
+  slant?: boolean;
+  /**
+   * @description 自定义样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-qrcode/hy-qrcode.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="hy-qrcode" @longpress="onLongPress">
+    <view class="hy-qrcode__content" @click="preview">
+      <!-- #ifndef APP-NVUE -->
+      <canvas
+        class="hy-qrcode__canvas"
+        :id="cid"
+        :canvas-id="cid"
+        :style="{ width: addUnit(size), height: addUnit(size) }"
+      />
+      <!-- #endif -->
+      <view
+        v-if="showLoading && loading"
+        class="hy-qrcode__loading"
+        :style="{ width: addUnit(size), height: addUnit(size) }"
+      >
+        <HyIcon :name="IconConfig.LOADING" is-rotate></HyIcon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import QRCode from "./qrcode.js";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { text, allowPreview } = toRefs(props);
+const emit = defineEmits(["result", "preview", "longPress"]);
+
+const instance = getCurrentInstance();
+const loading = ref(false);
+const qrcode = ref("");
+const result = ref("");
+
+onMounted(() => {
+  initQrCode();
+});
+
+const initQrCode = () => {
+  if (text.value) {
+    loading.value;
+    qrcode.value = new QRCode({
+      context: instance, // 上下文环境
+      canvasId: props.cid, // canvas-id
+      usingComponents: props.usingComponents, // 是否是自定义组件
+      showLoading: false, // 是否显示loading
+      loadingText: props.loadingText, // loading文字
+      text: text.value, // 生成内容
+      size: props.size, // 二维码大小
+      background: props.background, // 背景色
+      foreground: props.foreground, // 前景色
+      pdground: props.pdGround, // 定位角点颜色
+      correctLevel: props.lv, // 容错级别
+      image: props.icon, // 二维码图标
+      imageSize: props.iconSize, // 二维码图标大小
+      cbResult: function (res: any) {
+        // 生成二维码的回调
+        _result(res);
+      }
+    });
+  } else {
+    uni.showToast({
+      title: "二维码内容不能为空",
+      icon: "none",
+      duration: 2000
+    });
+  }
+};
+
+const _result = (res: any) => {
+  loading.value = false;
+  result.value = res;
+  emit("result", res);
+};
+
+const _saveCode = () => {
+  if (result.value != "") {
+    uni.saveImageToPhotosAlbum({
+      filePath: result.value,
+      success: function () {
+        uni.showToast({
+          title: "二维码保存成功",
+          icon: "success",
+          duration: 2000
+        });
+      }
+    });
+  }
+};
+/**
+ * @description 预览
+ * */
+const preview = (e) => {
+  // 预览图片
+  // console.log(this.result)
+  if (allowPreview.value) {
+    uni.previewImage({
+      urls: [result.value],
+      longPressActions: {
+        itemList: ["保存二维码图片"],
+        success: function (data) {
+          // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+          switch (data.tapIndex) {
+            case 0:
+              _saveCode();
+              break;
+          }
+        },
+        fail: function (err) {
+          console.error(err.errMsg);
+        }
+      }
+    });
+  }
+  emit("preview", result.value, e);
+};
+
+const onLongPress = () => {
+  emit("longPress");
+};
+</script>
+
+<style lang="scss" scoped>
+.hy-qrcode {
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7f7f7;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  &__content {
+    position: relative;
+
+    &__canvas {
+      position: fixed;
+      top: -99999rpx;
+      left: -99999rpx;
+      z-index: -99999;
+    }
+  }
+}
+</style>

package/components/hy-qrcode/props.ts

@@ -0,0 +1,20 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  cid: "hy-qrcode-canvas" + Math.random().toString(),
+  size: 200,
+  text: "",
+  show: true,
+  background: "#ffffff",
+  foreground: "#000000",
+  pdGround: "#000000",
+  usingComponents: true,
+  lv: 3,
+  icon: "",
+  iconSize: 40,
+  showLoading: true,
+  loadingText: "二维码生成中",
+  allowPreview: false
+};
+
+export default defaultProps;