hy-app 0.4.13 → 0.5.0

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

@@ -1,131 +1,72 @@
 <template>
-  <text
-    :class="['hy-price', customClass]"
-    :style="priceStyle"
-    @tap="handleClick"
-  >
-    <text class="hy-price__prefix">{{ symbol }}</text>
-    <text
-      class="hy-price__text"
-      :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]"
-    >
-      {{ priceOne?.[0] }}
+    <text :class="['hy-price', customClass]" :style="priceStyle" @tap="handleClick">
+        <text class="hy-price__prefix">{{ symbol }}</text>
+        <text class="hy-price__text" :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]">
+            {{ priceOne?.[0] }}
+        </text>
+        <text class="hy-price__decimal">
+            {{ '.' + addZero(priceOne?.[1], num) }}
+        </text>
     </text>
-    <text class="hy-price__decimal">
-      {{ "." + addZero(priceOne?.[1], num) }}
-    </text>
-  </text>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-price",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-price',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { addUnit, getPx, error, addZero } from "../../libs";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, getPx, error, addZero } from '../../libs'
+import priceProps from './props'
+import type { IPriceEmits } from './typing'
 
 /**
  * 业务组件,突出金额小数点前大，小数点后小
  * @displayName hy-price
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 传入金额值 */
-  text: [String, Number] as PropType<string | number>,
-  /** 金额符号 */
-  symbol: {
-    type: String,
-    default: "￥",
-  },
-  /** 比例大小 */
-  ratio: {
-    type: Number,
-    default: 1.4,
-  },
-  /** 保留小数点后几位数 */
-  num: {
-    type: Number,
-    default: 2,
-  },
-  /** 字体颜色 */
-  color: {
-    type: String,
-    default: "#FE3232",
-  },
-  /** 字体大小 */
-  size: {
-    type: [Number, String],
-    default: 12,
-  },
-  /** 字体粗细 */
-  weight: {
-    type: Number,
-    default: 500,
-  },
-  /** 是否倾斜 */
-  slant: {
-    type: Boolean,
-    default: false,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => {},
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits(["click"]);
+const props = defineProps(priceProps)
+const emit = defineEmits<IPriceEmits>()
 
-/**
- * @description 价格整体样式
- * */
+// 价格整体样式
 const priceStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    color: props.color,
-    fontWeight: props.weight,
-    fontStyle: props.slant ? "oblique" : "",
-    fontSize: addUnit(props.size),
-  };
+    const style: CSSProperties = {
+        color: props.color,
+        fontWeight: props.weight,
+        fontStyle: props.slant ? 'oblique' : '',
+        fontSize: addUnit(props.size)
+    }
 
-  return Object.assign(style, props.customStyle);
-});
+    return Object.assign(style, props.customStyle)
+})
 
-/**
- * @description 价格处理
- * */
+// 价格处理
 const priceOne = computed(() => {
-  if (props.text === undefined || props.text === null)
-    return error("text值不能为空");
+    if (props.text === undefined || props.text === null) return error('text值不能为空')
 
-  let value =
-    typeof props.text === "string" ? props.text : props.text.toString();
-  if (/\./g.test(value)) {
-    return Number(value) ? value.split(".") : ["0", "000000"];
-  } else {
-    return [value, "000000"];
-  }
-});
+    let value = typeof props.text === 'string' ? props.text : props.text.toString()
+    if (/\./g.test(value)) {
+        return Number(value) ? value.split('.') : ['0', '000000']
+    } else {
+        return [value, '000000']
+    }
+})
 
-/**
- * @description 点击事件
- * */
+// 点击事件
 const handleClick = () => {
-  emit("click", props.text);
-};
+    emit('click', props.text)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-price/props.ts

@@ -1,14 +1,54 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  text: "",
-  symbol: "￥",
-  ratio: 1.4,
-  num: 2,
-  color: "#FE3232",
-  size: 12,
-  weight: 500,
-  slant: false,
-};
+const priceProps = {
+    /** 传入金额值 */
+    text: {
+        type: [String, Number],
+        default: 0,
+        required: true
+    },
+    /** 金额符号 */
+    symbol: {
+        type: String,
+        default: '￥'
+    },
+    /** 比例大小 */
+    ratio: {
+        type: Number,
+        default: 1.4
+    },
+    /** 保留小数点后几位数 */
+    num: {
+        type: Number,
+        default: 2
+    },
+    /** 字体颜色 */
+    color: {
+        type: String,
+        default: '#FE3232'
+    },
+    /** 字体大小 */
+    size: {
+        type: [Number, String],
+        default: 12
+    },
+    /** 字体粗细 */
+    weight: {
+        type: Number,
+        default: 500
+    },
+    /** 是否倾斜 */
+    slant: {
+        type: Boolean,
+        default: false
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default priceProps

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

@@ -1,40 +1,45 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyPriceProps {
-  /**
-   * @description 传入金额值
-   * */
-  text: string | number
-  /**
-   * @description 金额符号（默认：￥）
-   * */
-  symbol?: string
-  /**
-   * @description 比例大小（默认：1.4）
-   * */
-  ratio?: number
-  /**
-   * @description 保留小数点后几位数（默认：2）
-   * */
-  num?: number
-  /**
-   * @description 字体颜色（默认：#FE3232）
-   * */
-  color?: string
-  /**
-   * @description 字体大小（默认：12）
-   * */
-  size?: string | number
-  /**
-   * @description 字体粗细（默认：500）
-   * */
-  weight?: number
-  /**
-   * @description 是否倾斜（默认：false）
-   * */
-  slant?: boolean
-  /**
-   * @description 自定义样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 传入金额值
+     * */
+    text: string | number
+    /**
+     * @description 金额符号（默认：￥）
+     * */
+    symbol?: string
+    /**
+     * @description 比例大小（默认：1.4）
+     * */
+    ratio?: number
+    /**
+     * @description 保留小数点后几位数（默认：2）
+     * */
+    num?: number
+    /**
+     * @description 字体颜色（默认：#FE3232）
+     * */
+    color?: string
+    /**
+     * @description 字体大小（默认：12）
+     * */
+    size?: string | number
+    /**
+     * @description 字体粗细（默认：500）
+     * */
+    weight?: number
+    /**
+     * @description 是否倾斜（默认：false）
+     * */
+    slant?: boolean
+    /**
+     * @description 自定义样式
+     * */
+    customStyle?: CSSProperties
+}
+
+export interface IPriceEmits {
+    /** 点击事件 */
+    (e: 'click', text: string | number): void
 }

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

@@ -1,221 +1,151 @@
 <template>
-  <view class="hy-qrcode" @longpress="onLongPress">
-    <view class="hy-qrcode__content">
-      <!-- #ifndef APP-NVUE -->
-      <hy-image
-        :src="result"
-        :width="size"
-        :height="size"
-        @click="preview"
-      ></hy-image>
-      <canvas
-        class="hy-qrcode__content--canvas"
-        :id="cid"
-        type="2d"
-        :style="{ width: addUnit(size), height: addUnit(size) }"
-      />
-      <!-- #endif -->
-      <view
-        v-if="showLoading && loading"
-        class="hy-qrcode__content--loading"
-        :style="{ width: addUnit(size), height: addUnit(size) }"
-      >
-        <hy-loading :text="loadingText" direction="column" />
-      </view>
+    <view class="hy-qrcode" @longpress="onLongPress">
+        <view class="hy-qrcode__content">
+            <!-- #ifndef APP-NVUE -->
+            <hy-image :src="result" :width="size" :height="size" @click="preview"></hy-image>
+            <canvas
+                class="hy-qrcode__content--canvas"
+                :id="cid"
+                type="2d"
+                :style="{ width: addUnit(size), height: addUnit(size) }"
+            />
+            <!-- #endif -->
+            <view
+                v-if="showLoading && loading"
+                class="hy-qrcode__content--loading"
+                :style="{ width: addUnit(size), height: addUnit(size) }"
+            >
+                <hy-loading :text="loadingText" direction="column" />
+            </view>
+        </view>
     </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-qrcode",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-qrcode',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref, watch, nextTick } from "vue";
-import type { IQrcodeEmits } from "./typing";
-import QRCode from "./qrcode.js";
-import { addUnit, error } from "../../libs";
+import { getCurrentInstance, ref, watch, nextTick } from 'vue'
+import type { IQrcodeEmits } from './typing'
+import QRCode from './qrcode.js'
+import { addUnit, error } from '../../libs'
+import qrCodeProps from './props'
 // 组件
-import HyLoading from "../hy-loading/hy-loading.vue";
-import HyImage from "../hy-image/hy-image.vue";
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyImage from '../hy-image/hy-image.vue'
 
 /**
  * 根据提供的字符串前端JS生成二维码展示
  * @displayName hy-qrcode
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
-  cid: {
-    type: String,
-    default: "hy-qrcode-canvas" + Math.random().toString(),
-  },
-  /** 二维码大小 */
-  size: {
-    type: Number,
-    default: 200,
-  },
-  /** 二维码内容 */
-  text: String,
-  /** 是否显示二维码 */
-  show: {
-    type: Boolean,
-    default: true,
-  },
-  /** 二维码背景色 */
-  background: {
-    type: String,
-    default: "#ffffff",
-  },
-  /** 二维码颜色 */
-  foreground: {
-    type: String,
-    default: "#000000",
-  },
-  /** 定位角点颜色 */
-  pdGround: {
-    type: String,
-    default: "#000000",
-  },
-  /** 是否是自定义组件 */
-  usingComponents: {
-    type: Boolean,
-    default: true,
-  },
-  /** 容错级别 */
-  lv: {
-    type: Number,
-    default: 3,
-  },
-  /** 二维码中间图标 */
-  icon: String,
-  /** 二维码中间图标大小 */
-  iconSize: {
-    type: Number,
-    default: 40,
-  },
-  /** 显示加载状态 */
-  showLoading: {
-    type: Boolean,
-    default: true,
-  },
-  /** 加载中提示语 */
-  loadingText: {
-    type: String,
-    default: "二维码生成中...",
-  },
-  /** 是否预览 */
-  allowPreview: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits<IQrcodeEmits>();
+const props = defineProps(qrCodeProps)
+const emit = defineEmits<IQrcodeEmits>()
 
-const instance = getCurrentInstance();
-const loading = ref(true);
-const qrcode = ref("");
-const result = ref("");
+const instance = getCurrentInstance()
+const loading = ref(true)
+const qrcode = ref('')
+const result = ref('')
 
 const initQrCode = () => {
-  if (props.text) {
-    qrcode.value = new QRCode({
-      context: instance, // 上下文环境
-      canvasId: props.cid, // canvas-id
-      usingComponents: props.usingComponents, // 是否是自定义组件
-      showLoading: false, // 是否显示loading
-      loadingText: props.loadingText, // loading文字
-      text: props.text, // 生成内容
-      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 {
-    error("二维码内容不能为空");
-  }
-};
+    if (props.text) {
+        qrcode.value = new QRCode({
+            context: instance, // 上下文环境
+            canvasId: props.cid, // canvas-id
+            usingComponents: props.usingComponents, // 是否是自定义组件
+            showLoading: false, // 是否显示loading
+            loadingText: props.loadingText, // loading文字
+            text: props.text, // 生成内容
+            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 {
+        error('二维码内容不能为空')
+    }
+}
 
 // 判断是否显示二维码
 watch(
-  () => props.show,
-  (newValue) => {
-    if (newValue) {
-      nextTick(() => initQrCode());
-    }
-  },
-  { immediate: true },
-);
+    () => props.show,
+    (newValue) => {
+        if (newValue) {
+            nextTick(() => initQrCode())
+        }
+    },
+    { immediate: true }
+)
 
 const _result = (res: any) => {
-  loading.value = false;
-  result.value = res;
-  emit("result", res);
-};
+    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,
-        });
-      },
-    });
-  }
-};
+    if (result.value != '') {
+        uni.saveImageToPhotosAlbum({
+            filePath: result.value,
+            success: function () {
+                uni.showToast({
+                    title: '二维码保存成功',
+                    icon: 'success',
+                    duration: 2000
+                })
+            }
+        })
+    }
+}
 /**
  * @description 预览
  * */
 const preview = (e: Event) => {
-  // 预览图片
-  // console.log(this.result)
-  if (props.allowPreview) {
-    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);
-};
+    // 预览图片
+    // console.log(this.result)
+    if (props.allowPreview) {
+        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");
-};
+    emit('longPress')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>