hy-app 0.1.1

package/README.md

@@ -0,0 +1,42 @@
+## 使用文档地址
+[华玥组件库](https://gxh-component.vercel.app/)
+
+## 安装教程
+
+```angular2html
+<!--只支持vue3+uniapp的项目-->
+pnpm install hy-app
+
+node版本 >= 16.14.*
+```
+
+## 如何再div里面使用方法
+```javascript
+// main.ts使用方法
+import { globalRegister } from "hy-app";
+import { createSSRApp } from "vue";
+export function createApp () {
+    const app = createSSRApp(App);
+    app.use(globalRegister);
+    return {
+        app,
+    };
+}
+```
+```vue
+<template>
+  <!-- 获取0-10之间的随机数 -->
+  <div>{{ $hy.random(1,10) }}</div>
+</template>
+```
+
+## 在小程序里面配置全局组件
+```json
+{
+  "easycom": {
+    "custom": {
+      "^hy-(.*)": "hy-app/components/hy-$1/hy-$1.vue"
+    }
+  }
+}
+```

package/api/http.ts

@@ -0,0 +1,138 @@
+import {
+  HttpRequestConfig,
+  HttpInterceptorManager,
+  HttpResponse
+} from "../typing";
+import { objectToUrlParams } from "../utils";
+
+export default class Http {
+  /**
+   * 默认请求配置
+   */
+  config: HttpRequestConfig = {
+    baseURL: "",
+    url: "",
+    data: {},
+    dataType: "json",
+    header: {},
+    method: "POST",
+    responseType: "text",
+    timeout: 10000
+  };
+
+  /**
+   * @description 拦截器
+   */
+  interceptor = {
+    /**
+     * @description 请求拦截 请求配置
+     * @param config
+     */
+    request: (config: HttpRequestConfig) => {
+      if (config) {
+        this.requestBefore(config);
+      }
+    },
+    /**
+     * @description 响应拦截
+     * @param success 成功响应
+     * @param fail 失败响应
+     */
+    response: (
+      success: (response: HttpResponse) => any,
+      fail: (error: HttpResponse) => any
+    ) => {
+      if (success) {
+        this.responseSuccess = success;
+      }
+      if (fail) {
+        this.responseFail = fail;
+      }
+    }
+  };
+
+  /**
+   * @description 请求拦截
+   * @param config 请求配置
+   */
+  requestBefore(config: HttpRequestConfig) {
+    return config;
+  }
+
+  /**
+   * @description 成功响应
+   * @param response
+   */
+  responseSuccess(response: UniNamespace.RequestSuccessCallbackResult) {
+    return response;
+  }
+
+  /**
+   * @description 失败响应
+   * @param response
+   */
+  responseFail(response: UniNamespace.GeneralCallbackResult) {
+    return response;
+  }
+
+  /**
+   * @description uni异步请求
+   * @param options 请求配置
+   */
+  async request(options: Record<string, any>) {
+    options.url = this.config.baseURL + options.url || this.config.url;
+    options.data = options.data || this.config.data;
+    options.header = options.header || this.config.header;
+    options.method = options.method || this.config.method;
+    options.responseType = options.responseType || this.config.responseType;
+    options.timeout = options.timeout || this.config.timeout;
+    return new Promise<any>((resolve, reject) => {
+      options = this.requestBefore(options);
+      uni.request({
+        url: options.url,
+        data: options.data,
+        header: options.header,
+        method: options.method,
+        timeout: options.timeout,
+        success: (response: UniNamespace.RequestSuccessCallbackResult) => {
+          resolve(this.responseSuccess(response));
+        },
+        fail: (error: UniNamespace.GeneralCallbackResult) => {
+          reject(this.responseFail(error));
+        }
+      });
+    });
+  }
+
+  /**
+   * post请求
+   * @param url 请求地址
+   * @param params 请求JSON参数
+   * @param options 请求配置
+   */
+  post(url: string, params?: any, options?: Record<string, any>) {
+    return this.request({
+      url: url,
+      method: "POST",
+      data: params,
+      ...options
+    });
+  }
+
+  /**
+   * get请求
+   * @param url 请求地址
+   * @param params URL查询参数
+   * @param options 请求配置
+   */
+  get(url: string, params?: any, options?: Record<string, any>) {
+    if (params) {
+      url += "?" + objectToUrlParams(params);
+    }
+    return this.request({
+      url: url,
+      method: "GET",
+      ...options
+    });
+  }
+}

package/api/index.ts

@@ -0,0 +1 @@
+export * from "./http";

package/common/index.ts

@@ -0,0 +1 @@
+export * from "./versionControl";

package/common/versionControl.ts

@@ -0,0 +1,102 @@
+export const appInit = {
+    data() {
+        return {
+            version: ""
+        }
+    },
+    /**
+     * app更新下载版本
+     * @param version 最新版本号
+     * @param description 版本描述
+     * @param url 最新版本下载链接
+     * @returns
+     * */
+    updateVersion(content):void {
+        const { version, description, url } = content
+        plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
+            this.version = widgetInfo.version as string
+            let _this = this
+
+            // 1代表app新包版本号大于本地版本号
+            if (this.compareVersion(version, this.version) === 1) {
+                uni.showModal({
+                    title: `发现新版本V${version}`,
+                    content: `更新内容：${description}`,
+                    success: function (res1) {
+                        if (res1.confirm) {
+                            _this.downloadApp(url)
+                        }
+                    }
+                });
+            }
+        });
+    },
+    /**
+     * 进行版本更新检查操作
+     * */
+    compareVersion(version1: string, version2: string) {
+        const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
+        const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
+
+        return this.isUpdateVersion(newVersion1 ,newVersion2);
+    },
+    /**
+     * 计算版本号大小,转化大小
+     * */
+    toNum(a: number | string){
+        const c = a.toString().split('.');
+        const num_place = ["", "0", "00", "000", "0000"],
+            r = num_place.reverse();
+        for (let i = 0; i < c.length; i++){
+            const len=c[i].length;
+            c[i]=r[len]+c[i];
+        }
+        return c.join('');
+    },
+    /**
+     * 检测版本号是否需要更新
+     * */
+    isUpdateVersion(a: number | string, b: number | string) {
+        const numA = this.toNum(a);
+        const numB = this.toNum(b);
+        return numA > numB ? 1 : numA < numB ? -1 : 0;
+    },
+    /**
+     * 下载新的app版本
+     * */
+    downloadApp(downloadUrl: string) {
+        uni.showLoading({
+            title: '更新中……'
+        })
+        uni.downloadFile({
+            // 存放最新安装包的地址
+            url: downloadUrl,
+            success: (downloadResult) => {
+                uni.hideLoading();
+                if (downloadResult.statusCode === 200) {
+                    plus.runtime.install(downloadResult.tempFilePath,{
+                        force: false
+                    }, function() {
+                        plus.runtime.restart();
+                    }, function(e) {
+                        uni.showToast({
+                            title: "安装失败",
+                            icon: "none"
+                        })
+                    });
+                } else {
+                    uni.showToast({
+                        title: "更新失败",
+                        icon: "none"
+                    })
+                }
+            },
+            fail: (err) => {
+                uni.showToast({
+                    title: "下载失败",
+                    icon: "none"
+                })
+            }
+        });
+    }
+}

package/components/dialog/TheDialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="dialog dialog-shade">
+    <view class="dialog-container">
+      <u-image
+        class="dialog-container__icon"
+        bgColor="transparent"
+        :src="icon"
+        :width="140"
+        :height="140"
+      ></u-image>
+      <view class="dialog-container__title">{{ title }}</view>
+      <view class="dialog-container__content">{{ content }}</view>
+
+      <view class="dialog-container__btn">
+        <u-button
+          v-if="showCancel"
+          :text="cancelText"
+          :color="cancelColor"
+          :shape="shape"
+          size="large"
+          @click="result(false)"
+        ></u-button>
+        <u-button
+          :text="confirmText"
+          :color="confirmColor"
+          :shape="shape"
+          size="large"
+          @click="result(true)"
+        ></u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+/**
+ * @用途
+ * @author Pino
+ * @创建时间 2023-01-11 15:19
+ **/
+import dialog from "./index";
+
+export interface DialogParam {
+  icon?: string;
+  title?: string;
+  content?: string;
+  confirmText?: string;
+  cancelText?: string;
+  shape?: "circle" | "square";
+  confirmColor?: string;
+  cancelColor?: string;
+  showCancel?: boolean;
+  result?: Function; // 回调用户操作结果
+}
+const props = withDefaults(defineProps<DialogParam>(), {
+  icon: "https://pic1.imgdb.cn/item/67a74cbdd0e0a243d4fd160b.png",
+  title: "提示",
+  content: "",
+  confirmText: "确认",
+  cancelText: "取消",
+  shape: "circle",
+  confirmColor: "#906FFE",
+  cancelColor: "",
+  showCancel: false,
+  result: () => {}
+});
+
+const close = () => dialog.close();
+
+const result = (isSure: boolean) => {
+  console.log(props);
+  console.log(props.result);
+  if (props.result)
+    props.result({
+      confirm: isSure,
+      cancel: isSure
+    });
+  close();
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  position: fixed;
+  z-index: 999999;
+  &-shade {
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &-container {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    border-radius: 40px;
+    background: #ffffff;
+    width: 90%;
+    //height: 300px;
+    padding: 40px 20px;
+    text-align: center;
+
+    &__icon {
+      position: absolute;
+      top: -100px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &__title {
+      margin: 20px 0;
+      font-size: 50rpx;
+    }
+    &__content {
+      margin: 20px 0;
+      font-size: 30rpx;
+      color: #c3d8db;
+    }
+    &__btn {
+      display: flex;
+      .u-button {
+        margin: 30px 10px 20px;
+      }
+    }
+  }
+}
+</style>

package/components/dialog/index.ts

@@ -0,0 +1,38 @@
+import { createApp } from "vue";
+import AlertDialogCom, { DialogParam } from "./TheDialog.vue";
+import { ResultParam } from "../../typing";
+
+export default class Dialog {
+  private static mountNode: HTMLElement | null = null;
+
+  public static show(param: DialogParam) {
+    let app = createApp(AlertDialogCom, { ...param });
+    this.mountNode = document.createElement("div");
+    app.mount(this.mountNode);
+    document.body.appendChild(this.mountNode);
+  }
+
+  // await用法
+  // let res = await DialogAialog.showByAwait({
+  //     title: '提示',
+  //     content: '确定要作废该条订单吗?',
+  // })
+  // if (res.confirm) {
+  //
+  // } else if (res.cancle) {
+  //     console.log('web', '用户取消')
+  // }
+  public static showByAwait(param: DialogParam): Promise<ResultParam> {
+    return new Promise((resolve, reject) => {
+      param.result = (res: ResultParam) => resolve(res);
+      this.show(param);
+    });
+  }
+
+  public static close() {
+    if (!this.mountNode) return;
+    document.body.removeChild(this.mountNode);
+    this.mountNode = null;
+    // console.log('close', 'DialogAialog已销毁')
+  }
+}