hy-app 0.1.1

package/components/hy-login/hy-login.vue

@@ -0,0 +1,283 @@
+<template>
+  <view class="normal-login-container">
+    <view class="logo-content align-center flex justify-center">
+      <image class="image" :src="props.logo" mode="widthFix"></image>
+    </view>
+    <!-- 登录 -->
+    <view class="login-form-content">
+      <view class="form-top">
+        <view
+          class="top-col"
+          v-for="(item, i) in tabs"
+          :key="i"
+          @tap="currentTab = i"
+        >
+          <view class="form-top-title">
+            {{ item.name }}
+          </view>
+          <view
+            :class="i === currentTab ? 'line' : ''"
+            :style="'background:' + props.themeColor"
+          ></view>
+        </view>
+      </view>
+      <TheUserLogin
+        v-if="'user' === indexCode(currentTab)"
+        ref="userLoginRef"
+        :themeColor="props.themeColor"
+        :prefix="props.prefix"
+        :isShowPwd="isShowPwd"
+        :userPlaceholder="userPlaceholder"
+        :pwdPlaceholder="pwdPlaceholder"
+        :customUserValidator="props.customUserValidator"
+        :customPwdValidator="props.customPwdValidator"
+        :userNumValidator="props.userNumValidator"
+        :pwdNumValidator="props.pwdNumValidator"
+      />
+      <ThePhoneLogin
+        v-if="'phone' === indexCode(currentTab)"
+        ref="phoneLoginRef"
+        :themeColor="props.themeColor"
+        :customPhoneValidator="props.customPhoneValidator"
+      />
+      <view class="action-btn">
+        <HyButton class="login-btn" :color="props.themeColor" @click="loginFn"
+          >登录
+        </HyButton>
+      </view>
+      <view class="footer">
+        <view
+          class="footer__tips"
+          v-for="(item, i) in menu"
+          :key="i"
+          @click="clickMenuFn(i)"
+          >{{ item }}</view
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, computed, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { encryptData } from "../../utils";
+import { useUserInfo } from "../../store";
+import defaultProps from "./props";
+import IProps from "./typing";
+
+// 组件
+import TheUserLogin from "./TheUserLogin.vue";
+import ThePhoneLogin from "./ThePhoneLogin.vue";
+import HyButton from "../hy-button/hy-button.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const emit = defineEmits(["login", "handleClickMenu"]);
+
+const userInfoStore = useUserInfo();
+const { userForm, rememberPsw } = storeToRefs(userInfoStore);
+const indexCode = computed(() => {
+  return (temp: string | number) => {
+    switch (Number(props.loginType)) {
+      case 1:
+        return "user";
+      case 2:
+        return "phone";
+      default:
+        if (temp == 0) {
+          return "user";
+        } else {
+          return "phone";
+        }
+    }
+  };
+});
+const selectModel = (temp: number) => {
+  return new Promise((resolve, reject) => {
+    switch (Number(props.loginType)) {
+      case 1:
+        resolve("user");
+        break;
+      case 2:
+        resolve("phone");
+        break;
+      default:
+        if (temp == 0) {
+          resolve("user");
+        } else {
+          resolve("phone");
+        }
+        break;
+    }
+  });
+};
+const tabs = ref([
+  {
+    name: "账号登录"
+  },
+  {
+    name: "验证码登录"
+  }
+]);
+const currentTab = ref(0);
+const userLoginRef = ref<typeof TheUserLogin>(null);
+const phoneLoginRef = ref<typeof ThePhoneLogin>(null);
+watch(
+  () => Number(props.loginType),
+  (newVal) => {
+    tabs.value = computed(() => {
+      switch (newVal) {
+        case 1:
+          return [{ name: "账号登录" }];
+        case 2:
+          return [{ name: "验证码登录" }];
+        default:
+          return [{ name: "账号登录" }, { name: "验证码登录" }];
+      }
+    }).value;
+  },
+  { immediate: true, deep: true }
+);
+
+/**
+ * 登录用户名
+ * */
+const loginFn = async () => {
+  const type = await selectModel(currentTab.value);
+  switch (type) {
+    case "user":
+      let user = userForm.value.name;
+      let pwd = userForm.value.pwd;
+      await userLoginRef.value.loginFn();
+      //缓存账号和密码
+      if (rememberPsw.value == 1) {
+        uni.setStorageSync(
+          `${props.prefix}_account`,
+          encryptData({
+            rememberPsw: rememberPsw.value,
+            userName: user,
+            password: pwd
+          })
+        );
+      } else {
+        // 如果没有选记住密码就移除之前保存的
+        uni.removeStorageSync(`${props.prefix}_account`);
+        uni.setStorageSync(
+          `${props.prefix}_account`,
+          encryptData({ rememberPsw: rememberPsw.value })
+        );
+      }
+      emit("login", { user, pwd });
+      break;
+    case "phone":
+      await phoneLoginRef.value.loginFn();
+      break;
+    default:
+      break;
+  }
+};
+
+/**
+ * 点击下面小菜单
+ * */
+const clickMenuFn = (index: number) => {
+  emit("handleClickMenu", index);
+};
+</script>
+
+<style lang="scss" scoped>
+.normal-login-container {
+  width: 100%;
+  height: 100vh;
+  padding: 0 60rpx;
+  /* #ifndef APP-PLUS-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  //align-items: center;
+
+  /*logo图片展示*/
+  .logo-content {
+    width: 300rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* #ifndef APP-PLUS-NVUE */
+    margin: 0 auto 100rpx;
+    box-sizing: border-box;
+    height: auto;
+    .image {
+      width: 100%;
+      height: auto;
+    }
+    /* #endif */
+  }
+
+  /*登录模块*/
+  .login-form-content {
+    //text-align: center;
+    box-shadow: 0px 5px 4px 0px rgba(200, 200, 200, 0.5);
+    border-radius: 10px;
+    background: #ffffff;
+    padding: 28rpx 50rpx 50rpx;
+
+    .form-top {
+      display: flex;
+      justify-content: space-around;
+      margin-bottom: 40rpx;
+
+      .top-col {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .form-top-title {
+          font-size: 28rpx;
+        }
+
+        .line {
+          width: 90rpx;
+          height: 4rpx;
+          margin-top: 6rpx;
+        }
+      }
+    }
+
+    .mui-input-row {
+      display: flex;
+      /* #ifndef APP-PLUS-NVUE */
+      justify-self: start;
+      /* #endif */
+      margin-top: 27rpx;
+    }
+
+    .action-btn {
+      margin-top: 30rpx;
+    }
+
+    .footer {
+      display: flex;
+      justify-content: space-around;
+      /* #ifndef APP-PLUS-NVUE */
+      margin: auto 20%;
+      /* #endif */
+
+      &__tips {
+        font-size: 12px;
+        margin-top: 27rpx;
+        text-align: center;
+        color: grey;
+        text-decoration: underline;
+      }
+    }
+
+    .xieyi {
+      color: #333;
+      margin-top: 40rpx;
+    }
+  }
+}
+</style>

package/components/hy-login/props.ts

@@ -0,0 +1,32 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  logo: "",
+  loginType: 0,
+  themeColor: "#20D56E",
+  prefix: "gxh",
+  isShowPwd: false,
+  userPlaceholder: "输入您的用户名",
+  pwdPlaceholder: "输入您的密码",
+  menu: ["立即注册", "忘记密码？"],
+  customUserValidator: () => ({}),
+  customPwdValidator: () => ({}),
+  userNumValidator: () => ({}),
+  pwdNumValidator: () => ({
+    min: 6,
+    max: 20,
+    message: "长度在6-20个字符之间",
+    trigger: ["blur", "change"]
+  }),
+  customPhoneValidator: () => ({
+    // 自定义验证函数，见上说明
+    validator: (rule, value, callback) => {
+      // 上面有说，返回true表示校验通过，返回false表示不通过
+      return /^[1][0-9]{10}$/.test(value);
+    },
+    message: "手机号码不正确",
+    trigger: ["change", "blur"]
+  })
+};
+
+export default defaultProps;

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

@@ -0,0 +1,60 @@
+export default interface IProps {
+  /**
+   * @description 登录logo
+   * */
+  logo?: string;
+  /**
+   * @description 登录类型：可选：1-用户密码登录、2-手机验证码登录、其他-两者都可以
+   * */
+  loginType?: number | string;
+  /**
+   * @description 主题颜色
+   * */
+  themeColor?: string;
+  /**
+   * @description 浏览器缓存名称前缀
+   * */
+  prefix?: string;
+  /**
+   * @description 是否需要显示密码操作
+   * */
+  isShowPwd?: boolean;
+  /**
+   * @description 用户输入框占位提示
+   * */
+  userPlaceholder?: string;
+  /**
+   * @description 密码输入框占位提示
+   * */
+  pwdPlaceholder?: string;
+  /**
+   * @description 底部小菜单
+   * */
+  menu?: string[];
+  /**
+   * @description 自定义用户名效验
+   * customUserValidator: {
+   *     validator: (rule, value, callback) => {
+   *     },
+   *     message: '提示信息',
+   *     trigger: ['change','blur'],
+   * }
+   * */
+  customUserValidator?: Record<string, any>;
+  /**
+   * @description 自定义密码效验
+   * */
+  customPwdValidator?: Record<string, any>;
+  /**
+   * @description 用户名输入数量校验
+   * */
+  userNumValidator?: Record<string, any>;
+  /**
+   * @description 密码输入数量校验
+   * */
+  pwdNumValidator?: Record<string, any>;
+  /**
+   * @description 自定义手机效验规则
+   * */
+  customPhoneValidator?: Record<string, any>;
+}

package/components/hy-modal/hy-modal.vue

@@ -0,0 +1,240 @@
+<template>
+  <HyPopup
+    mode="center"
+    :zoom="zoom"
+    :show="show"
+    :customStyle="{
+      borderRadius: '6px',
+      overflow: 'hidden',
+      marginTop: `-${addUnit(negativeTop)}`
+    }"
+    :closeOnClickOverlay="closeOnClickOverlay"
+    :safeAreaInsetBottom="false"
+    :duration="400"
+    @click="clickHandler"
+  >
+    <view
+      class="hy-modal"
+      :style="{
+        width: addUnit(width)
+      }"
+    >
+      <view class="hy-modal__title" v-if="title">{{ title }}</view>
+      <view
+        class="hy-modal__content"
+        :style="{
+          paddingTop: `${title ? 12 : 25}px`
+        }"
+      >
+        <slot>
+          <text class="hy-modal__content__text">
+            {{ content }}
+          </text>
+        </slot>
+      </view>
+      <view
+        class="hy-modal__button-group--confirm-button"
+        v-if="$slots.confirmButton"
+      >
+        <slot name="confirmButton"></slot>
+      </view>
+      <template v-else>
+        <view
+          class="hy-modal__button-group"
+          :style="{
+            flexDirection: buttonReverse ? 'row-reverse' : 'row'
+          }"
+        >
+          <view
+            class="hy-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+            :hover-stay-time="150"
+            hover-class="hy-modal__button-group__wrapper--hover"
+            :class="[
+              showCancelButton &&
+                !showConfirmButton &&
+                'hy-modal__button-group__wrapper--only-cancel'
+            ]"
+            v-if="showCancelButton"
+            @tap.stop="cancelHandler"
+          >
+            <text
+              class="hy-modal__button-group__wrapper__text"
+              :style="{
+                color: cancelColor
+              }"
+              >{{ cancelText }}</text
+            >
+          </view>
+          <view
+            class="hy-modal__button-group__wrapper--line"
+            v-if="showConfirmButton && showCancelButton"
+          ></view>
+          <view
+            class="hy-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+            :hover-stay-time="150"
+            hover-class="hy-modal__button-group__wrapper--hover"
+            :class="[
+              !showCancelButton &&
+                showConfirmButton &&
+                'hy-modal__button-group__wrapper--only-confirm'
+            ]"
+            v-if="showConfirmButton"
+            @tap="confirmHandler"
+          >
+            <HyIcon
+              v-if="loading"
+              :name="IconConfig.LOADING"
+              :isRotate="loading"
+            ></HyIcon>
+            <text
+              v-else
+              class="hy-modal__button-group__wrapper__text"
+              :style="{
+                color: confirmColor
+              }"
+              >{{ confirmText }}</text
+            >
+          </view>
+        </view>
+      </template>
+    </view>
+  </HyPopup>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit } from "../../utils";
+import { IconConfig } from "../../config";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyPopup from "../hy-popup/hy-popup.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { show, asyncClose, closeOnClickOverlay } = toRefs(props);
+const emit = defineEmits(["confirm", "cancel", "close", "update:show"]);
+
+const loading = ref<boolean>(false);
+
+watch(
+  () => show.value,
+  (newValue) => {
+    if (newValue && loading.value) loading.value = false;
+  }
+);
+
+/**
+ * @description 点击确定按钮
+ * */
+const confirmHandler = () => {
+  // 如果配置了异步关闭，将按钮值为loading状态
+  if (asyncClose.value) {
+    loading.value = true;
+  } else {
+    emit("update:show", false);
+  }
+  emit("confirm");
+};
+
+/**
+ * @description 点击取消按钮
+ * */
+const cancelHandler = () => {
+  emit("update:show", false);
+  emit("cancel");
+};
+
+/**
+ * @description 点击遮罩
+ * */
+const clickHandler = () => {
+  if (closeOnClickOverlay.value) {
+    emit("update:show", false);
+    emit("close");
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+$u-modal-border-radius: 6px;
+
+.hy-modal {
+  width: 650rpx;
+  border-radius: $hy-border-radius-base;
+  overflow: hidden;
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: $hy-color-title;
+    text-align: center;
+    padding-top: 25px;
+  }
+
+  &__content {
+    padding: 12px 25px 25px 25px;
+    @include flex;
+    justify-content: center;
+
+    &__text {
+      text-align: v-bind(contentTextAlign);
+      font-size: 15px;
+      color: $hy-text-color-grey;
+      flex: 1;
+    }
+  }
+
+  &__button-group {
+    border-top: $hy-border-line;
+    @include flex;
+
+    &--confirm-button {
+      flex-direction: column;
+      padding: 0 25px 15px 25px;
+    }
+
+    &__wrapper {
+      flex: 1;
+      @include flex;
+      justify-content: center;
+      align-items: center;
+      height: 48px;
+
+      &--line {
+        background: $hy-text-color-light;
+        width: 1px;
+        height: 48px;
+      }
+
+      &--confirm,
+      &--only-cancel {
+        border-bottom-right-radius: $hy-border-radius-base;
+      }
+
+      &--cancel,
+      &--only-confirm {
+        border-bottom-left-radius: $hy-border-radius-base;
+      }
+
+      &--hover {
+        background-color: $hy-bg-color-grey;
+      }
+
+      &__text {
+        color: $hy-color-subtitle;
+        font-size: 16px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

package/components/hy-modal/props.ts

@@ -0,0 +1,24 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  show: false,
+  title: "",
+  content: "",
+  confirmText: "确认",
+  cancelText: "取消",
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmColor: ColorConfig.primary,
+  cancelColor: "#606266",
+  buttonReverse: false,
+  zoom: true,
+  asyncClose: false,
+  closeOnClickOverlay: false,
+  negativeTop: 0,
+  width: "650rpx",
+  confirmButtonShape: "",
+  contentTextAlign: "left"
+};
+
+export default defaultProps;

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

@@ -0,0 +1,70 @@
+export default interface IProps {
+  /**
+   * @description 是否显示模态框，请赋值给show （默认 false ）
+   * */
+  show: boolean;
+  /**
+   * @description 标题内容
+   * */
+  title?: string;
+  /**
+   * @description 模态框内容，如传入slot内容，则此参数无效
+   * */
+  content?: string;
+  /**
+   * @description 确认按钮的文字 （默认 '确认' ）
+   * */
+  confirmText?: string;
+  /**
+   * @description 取消按钮的文字 （默认 '取消' ）
+   * */
+  cancelText?: string;
+  /**
+   * @description 是否显示确认按钮 （默认 true ）
+   * */
+  showConfirmButton?: boolean;
+  /**
+   * @description 是否显示取消按钮 （默认 false ）
+   * */
+  showCancelButton?: boolean;
+  /**
+   * @description 确认按钮的颜色 （默认 '#2979ff' ）
+   * */
+  confirmColor?: string;
+  /**
+   * @description 取消按钮的颜色 （默认 '#606266' ）
+   * */
+  cancelColor?: string;
+  /**
+   * @description 对调确认和取消的位置 （默认 false ）
+   * */
+  buttonReverse?: boolean;
+  /**
+   * @description 是否开启缩放模式 （默认 true ）
+   * */
+  zoom?: boolean;
+  /**
+   * @description 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
+   * */
+  asyncClose?: boolean;
+  /**
+   * @description 是否允许点击遮罩关闭Modal （默认 false ）
+   * */
+  closeOnClickOverlay?: boolean;
+  /**
+   * @description 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
+   * */
+  negativeTop?: number;
+  /**
+   * @description modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
+   * */
+  width?: string | number;
+  /**
+   * @description 确认按钮的样式,如设置，将不会显示取消按钮
+   * */
+  confirmButtonShape?: HyApp.ShapeType;
+  /**
+   * @description 文案对齐方式
+   * */
+  contentTextAlign?: HyApp.LeftRightType | "center";
+}