hy-app 0.4.1 → 0.4.2

package/components/hy-login/ThePhoneLogin.vue

@@ -1,106 +0,0 @@
-<template>
-  <view class="user-login">
-    <u-form
-      :model="phoneForm"
-      ref="formRef"
-      :rules="phoneRules"
-      labelWidth="30"
-    >
-      <!--手机号输入-->
-      <u-form-item prop="phone">
-        <u-input
-          v-model="phoneForm.phone"
-          placeholder="请输入手机号"
-          :clearable="true"
-          border="bottom"
-        >
-          <!-- #ifndef APP-PLUS-NVUE -->
-          <template #prefix>
-            <u-icon name="phone" :color="themeColor"></u-icon>
-          </template>
-          <!-- #endif -->
-        </u-input>
-      </u-form-item>
-
-      <!--验证码输入-->
-      <u-form-item prop="code">
-        <u-input
-          v-model="phoneForm.code"
-          border="bottom"
-          placeholder="请填写验证码"
-          :color="themeColor"
-        >
-          <!-- #ifndef APP-PLUS-NVUE -->
-          <template #prefix>
-            <u-icon name="fingerprint" :color="themeColor"></u-icon>
-          </template>
-          <!-- #endif -->
-        </u-input>
-        <!-- #ifndef APP-PLUS-NVUE -->
-        <template #right>
-          <u-button
-            text="获取验证码"
-            :color="themeColor"
-            size="mini"
-          ></u-button>
-        </template>
-        <!-- #endif -->
-      </u-form-item>
-    </u-form>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from "vue";
-import { storeToRefs } from "pinia";
-import { useUserInfo } from "../../store";
-
-interface IProps {
-  themeColor: string;
-  customPhoneValidator: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  themeColor: "",
-  customPhoneValidator: () => ({})
-});
-
-const userInfoStore = useUserInfo();
-const { phoneForm } = storeToRefs(userInfoStore);
-const formRef = ref(null);
-
-const phoneRules = reactive({
-  phone: [
-    {
-      required: true,
-      message: "请先输入手机号",
-      // 可以单个或者同时写两个触发验证方式
-      trigger: ["change"]
-    },
-    props.customPhoneValidator
-  ],
-  code: [
-    {
-      type: "string",
-      required: true,
-      message: "请输入验证码",
-      // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"]
-    }
-  ]
-});
-
-/**
- * 登录效验
- * */
-const loginFn = () => {
-  return new Promise((resolve) => {
-    formRef.value.validate().then((res) => {
-      resolve();
-    });
-  });
-};
-defineExpose({
-  loginFn
-});
-</script>

package/components/hy-login/TheUserLogin.vue

@@ -1,271 +0,0 @@
-<template>
-  <view class="user-login">
-    <HyForm
-      ref="form_1Ref"
-      :columns="userColumns"
-      :formData="userForm"
-      :input="{ border: 'bottom' }"
-    ></HyForm>
-
-    <!-- 记住密码 -->
-    <view class="mui-input-row mui-checkbox">
-      <HyCheckbox
-        :columns="rememberList"
-        shape="square"
-        :active-color="themeColor"
-        v-model="rememberPsw"
-        @change="checkboxChange"
-      ></HyCheckbox>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
-import { onHide } from '@dcloudio/uni-app'
-import { storeToRefs } from 'pinia'
-import { useUserInfo } from '../../store'
-import { decryptData, encryptData } from '../../utils'
-import { FormTypeEnum } from '../../typing'
-import { IconConfig } from '../../config'
-import type { UserLoginInfoVo } from './typing'
-
-// 组件
-import HyCheckbox from '../hy-checkbox/hy-checkbox.vue'
-import HyForm from '@/package/components/hy-form-group/hy-form-group.vue'
-
-interface IProps {
-  themeColor: string
-  prefix: string
-  isShowPwd: boolean
-  userPlaceholder: string
-  pwdPlaceholder: string
-  customUserValidator: Record<string, any>
-  customPwdValidator: Record<string, any>
-  userNumValidator: Record<string, any>
-  pwdNumValidator: Record<string, any>
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  themeColor: '',
-  prefix: 'hy',
-  isShowPwd: false,
-  userPlaceholder: '',
-  pwdPlaceholder: '',
-  customUserValidator: () => ({}),
-  customPwdValidator: () => ({}),
-  userNumValidator: () => ({}),
-  pwdNumValidator: () => ({}),
-})
-const emit = defineEmits(['handleHistory', 'handleCheckbox'])
-const userInfoStore = useUserInfo()
-const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore)
-
-const showChoice = ref<boolean>(false)
-const showPwd = ref<boolean>(false)
-const userColumns = computed(() => [
-  {
-    field: 'userName',
-    label: '',
-    type: FormTypeEnum.TEXT,
-    input: {
-      clearable: true,
-      placeholder: props.userPlaceholder,
-      prefixIcon: {
-        name: IconConfig.MINE,
-        color: props.themeColor,
-      },
-      suffixIcon: {
-        name: showChoice.value ? IconConfig.ARROW_UP_FILL : IconConfig.ARROW_DOWN_FILL,
-        color: props.themeColor,
-      },
-      onSuffix: () => {
-        showChoice.value = !showChoice.value
-      },
-    },
-    rules: [props.customUserValidator, props.userNumValidator],
-  },
-  {
-    field: 'password',
-    label: '',
-    type: showPwd.value ? FormTypeEnum.TEXT : FormTypeEnum.PASSWORD,
-    input: {
-      clearable: true,
-      placeholder: props.pwdPlaceholder,
-      prefixIcon: {
-        name: IconConfig.LOCK,
-        color: props.themeColor,
-      },
-      suffixIcon: {
-        name: showPwd.value ? IconConfig.EYE : IconConfig.EYE_CLOSE,
-        color: props.themeColor,
-      },
-      onSuffix: () => {
-        showPwd.value = !showPwd.value
-      },
-    },
-    rules: [props.customUserValidator, props.pwdNumValidator],
-  },
-])
-const rememberList = reactive([{ label: '记住密码', value: 1 }])
-const form_1Ref = ref<InstanceType<typeof HyForm>>()
-// 效验用户名和密码
-const userRules = reactive({
-  userName: [
-    {
-      required: true,
-      message: '请先输入账号',
-      // 可以单个或者同时写两个触发验证方式
-      trigger: ['blur', 'change'],
-    },
-    props.customUserValidator,
-    props.userNumValidator,
-  ],
-  password: [
-    {
-      required: true,
-      message: '请输入密码',
-      // 可以单个或者同时写两个触发验证方式
-      trigger: ['blur', 'change'],
-    },
-    props.pwdNumValidator,
-    props.customPwdValidator,
-  ],
-})
-const rememberPassword = ref(false)
-const account = uni.getStorageSync(`${props.prefix}_account`)
-const accountList = uni.getStorageSync(`${props.prefix}_choiceList`)
-
-onMounted(() => {
-  if (!account) return
-  const result = decryptData(account)
-  console.log(result)
-  //有缓存就赋值给文本没有就清空
-  rememberPsw.value = result?.rememberPsw
-  //获取缓存的账号和密码
-  userForm.value.userName = result?.userName
-  userForm.value.password = result?.password
-
-  if (accountList) {
-    choiceList.value = decryptData(accountList) as UserLoginInfoVo[]
-  }
-})
-
-onHide(() => {
-  // if (!account) return;
-  //获取缓存的账号和密码
-  const { userName, password } = decryptData(account)
-  if (choiceList.value.length) {
-    // 过滤数判断是否有一样的账号
-    const filterArr = choiceList.value.filter((item) => {
-      return item.user === userName
-    })
-    // 有一样的账号退出函数不执行下面的
-    if (filterArr.length) return
-  }
-  // 判断是否有保存账号和密码
-  if (userName && password) {
-    // 数组前面加数据
-    choiceList.value.unshift({
-      user: userName,
-      pwd: password,
-    })
-    // 数组最多只放三个账号
-    if (choiceList.value.length >= 5) {
-      choiceList.value.splice(5, 1)
-    }
-    uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
-  }
-})
-
-/**
- * 登录效验
- * */
-const loginFn = () => {
-  return new Promise((resolve, reject) => {
-    form_1Ref.value
-      ?.handleSubmit()
-      .then((res) => {
-        resolve('success' + res)
-      })
-      .catch((err) => {
-        reject('error' + err)
-      })
-  })
-}
-
-/**
- * 勾选是否记住密码
- * */
-const checkboxChange = () => {
-  emit('handleCheckbox', rememberPassword.value)
-}
-
-/**
- * 选择历史账号
- * */
-const btnChoiceClick = (index: number) => {
-  showChoice.value = false
-  userForm.value.name = choiceList.value[index].user
-  userForm.value.pwd = choiceList.value[index].pwd
-  emit('handleHistory')
-}
-
-/**
- * 长按操作历史账户
- * 0-复制
- * 1-删除
- * */
-const extensionFun = (index: number, username: string) => {
-  switch (index) {
-    case 0:
-      const i = choiceList.value.findIndex((item) => item.user === username)
-      choiceList.value.splice(i, 1)
-      uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
-      break
-    default:
-      break
-  }
-}
-
-defineExpose({
-  loginFn,
-})
-</script>
-
-<style lang="scss" scoped>
-.user-login {
-  ::v-deep .u-input__content__subfix-icon {
-    position: relative;
-
-    .dialog-view {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      border-radius: 20rpx;
-      border: 1rpx solid #cacaca;
-      background-color: white;
-      position: absolute;
-      overflow: hidden;
-      top: 50rpx;
-      right: 10rpx;
-      z-index: 999;
-
-      .dialog-title {
-        white-space: nowrap;
-        height: 100%;
-        color: #a6a6a6;
-        overflow: hidden;
-        font-size: 28rpx;
-        text-align: center;
-        padding: 10rpx 30rpx;
-        border-top: 1rpx solid rgba(128, 128, 128, 0.233);
-      }
-    }
-  }
-
-  .iconfont {
-    font-size: 40rpx;
-  }
-}
-</style>

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

@@ -1,288 +0,0 @@
-<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"
-        @handleCheckbox="handleCheckbox"
-      />
-      <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, computed, watch } from "vue";
-import { storeToRefs } from "pinia";
-import { encryptData } from "../../utils";
-import { useUserInfo } from "../../store";
-import defaultProps from "./props";
-import type 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<InstanceType<typeof TheUserLogin>>();
-const phoneLoginRef = ref<InstanceType<typeof ThePhoneLogin>>();
-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.userName;
-      // let pwd = userForm.value.password;
-      await userLoginRef.value?.loginFn();
-      //缓存账号和密码
-      if (rememberPsw.value) {
-        uni.setStorageSync(
-          `${props.prefix}_account`,
-          encryptData({
-            rememberPsw: rememberPsw.value,
-            ...userForm.value,
-          }),
-        );
-      } else {
-        // 如果没有选记住密码就移除之前保存的
-        uni.removeStorageSync(`${props.prefix}_account`);
-        uni.setStorageSync(
-          `${props.prefix}_account`,
-          encryptData({ rememberPsw: rememberPsw.value }),
-        );
-      }
-      emit("login", userForm.value);
-      break;
-    case "phone":
-      await phoneLoginRef.value?.loginFn();
-      break;
-    default:
-      break;
-  }
-};
-
-/**
- * 点击下面小菜单
- * */
-const clickMenuFn = (index: number) => {
-  emit("handleClickMenu", index);
-};
-
-/**
- * @description 记住密码
- * */
-const handleCheckbox = () => {};
-</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

@@ -1,32 +0,0 @@
-import type IProps from "./typing";
-
-const defaultProps: IProps = {
-  logo: "",
-  loginType: 0,
-  themeColor: "#20D56E",
-  prefix: "hy",
-  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;