@sugarat/easypicker2-client 2.4.1

package/src/pages/home/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="home">
+    <!-- 顶部导航栏 -->
+    <header>
+      <HomeHeader />
+    </header>
+    <h1 class="title">EasyPicker</h1>
+
+    <!-- 简介 -->
+    <section class="introduce">
+      <p v-for="(item, index) in introduces" :key="index">{{ item }}</p>
+    </section>
+    <section class="introduce">
+      <p>
+        <router-link to="/login">点我登陆</router-link>
+      </p>
+      <p>
+        <router-link to="/register">没有账号? 去注册</router-link>
+      </p>
+    </section>
+    <footer>
+      <!-- 底部导航栏 -->
+      <HomeFooter />
+    </footer>
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import HomeHeader from '@components/HomeHeader/index.vue'
+import HomeFooter from '@components/HomeFooter/index.vue'
+
+const introduces: string[] = reactive([
+  '一款在线文件收取助手',
+  '自动归档,记录每次提交的文件信息与提交人信息',
+  '随时随地下载,查看收取详细情况',
+])
+
+</script>
+
+<style lang="scss" scoped>
+.home {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+  min-height: 100vh;
+}
+.title {
+  color: aliceblue;
+  text-align: center;
+  font-weight: lighter;
+  font-size: 60px;
+  padding-top: 22vh;
+}
+.introduce {
+  padding: 10px;
+  color: aliceblue;
+  text-align: center;
+  p {
+    margin-top: 10px;
+  }
+  a {
+    color: aliceblue;
+    font-weight: bold;
+  }
+}
+footer {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  // margin-top: 25vh;
+}
+</style>

package/src/pages/login/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="login">
+    <login-panel>
+      <!-- 表单输入区域 -->
+      <div class="inputArea">
+        <div>
+          <el-input
+            :placeholder="accountLogin ? '输入账号/手机号' : '输入手机号'"
+            :prefix-icon="accountLogin ? User : Phone"
+            v-model="account"
+            clearable
+          >
+            <template #append>
+              <template v-if="accountLogin">
+                <el-button @click="accountLogin = !accountLogin"
+                  >验证码登录</el-button
+                >
+              </template>
+              <template v-else>
+                <el-button @click="accountLogin = !accountLogin"
+                  >账号登录</el-button
+                >
+              </template>
+            </template>
+          </el-input>
+        </div>
+        <div>
+          <el-input
+            maxlength="16"
+            minlength="6"
+            :type="accountLogin ? 'password' : 'number'"
+            :placeholder="accountLogin ? '请输入密码' : '请输入验证码'"
+            :prefix-icon="Lock"
+            v-model="pwd"
+            :show-password="accountLogin"
+            clearable
+          >
+            <template #append>
+              <el-button v-if="accountLogin">
+                <router-link style="color: #909399" to="/reset"
+                  >忘记密码?</router-link
+                >
+              </el-button>
+              <!-- 获取验证码 -->
+              <el-button :disabled="time !== 0" @click="getCode" v-else>{{
+                codeText
+              }}</el-button>
+            </template>
+          </el-input>
+        </div>
+        <div class="tc">
+          <el-checkbox v-model="remember">记住登录信息?</el-checkbox>
+        </div>
+        <div class="tc">
+          <el-button @click="login()" type="primary" class="fw-w100"
+            >登录</el-button
+          >
+        </div>
+        <el-divider></el-divider>
+        <div class="links">
+          <router-link to="/register">快速注册</router-link>
+        </div>
+        <div class="links" style="margin-top: 20px">
+          <el-link target="_blank" href="https://support.qq.com/product/444158"
+            >问题反馈?</el-link
+          >
+        </div>
+      </div>
+    </login-panel>
+  </div>
+</template>
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import loginPanel from '@components/loginPanel.vue'
+import { User, Phone, Lock } from '@element-plus/icons-vue'
+import { rMobilePhone, rPassword, rVerCode } from '@/utils/regExp'
+import { formatDate } from '@/utils/stringUtil'
+import { PublicApi, UserApi } from '@/apis'
+
+const account = ref('')
+const pwd = ref('')
+const remember = ref(false)
+const accountLogin = ref(true)
+const $store = useStore()
+const $router = useRouter()
+const redirectDashBoard = (system?: boolean) => {
+  if (system) {
+    $router.replace({
+      name: 'config'
+    })
+    return
+  }
+  const { redirect } = $router.currentRoute.value.query
+  if (redirect) {
+    $router.replace({
+      path: `${redirect}`
+    })
+    return
+  }
+
+  $router.replace({
+    name: 'dashboard'
+  })
+}
+const checkForm = () => {
+  if (account.value.length === 11) {
+    if (!rMobilePhone.test(account.value)) {
+      ElMessage.warning('手机号格式不正确')
+      return false
+    }
+  }
+  // else if (!rAccount.test(account.value)) {
+  // 兼容老平台数据,不校验账号
+  // ElMessage.warning('帐号格式不正确(4-11位 数字字母)')
+  // return false
+  // }
+
+  if (accountLogin.value && !rPassword.test(pwd.value)) {
+    ElMessage.warning('密码格式不正确(6-16位 支持字母/数字/下划线)')
+    return false
+  }
+
+  if (!accountLogin.value && !rVerCode.test(pwd.value)) {
+    ElMessage.warning('验证码不正确(4位 数字)')
+    return false
+  }
+  return true
+}
+const codeText = ref('获取验证码')
+const time = ref(0)
+const refreshCodeText = () => {
+  if (time.value === 0) {
+    codeText.value = '获取验证码'
+    return
+  }
+  codeText.value = `${time.value}s`
+  time.value -= 1
+  setTimeout(refreshCodeText, 1000)
+}
+const getCode = () => {
+  if (!rMobilePhone.test(account.value)) {
+    ElMessage.warning('手机号格式不正确')
+    return
+  }
+  PublicApi.getCode(account.value)
+    .then(() => {
+      time.value = 120
+      refreshCodeText()
+      ElMessage.success('获取成功,请注意查看手机短信')
+    })
+    .catch((err) => {
+      const { code: c } = err
+      const msg = '注册失败,未知错误'
+      const options = {
+        1006: '手机号格式不正确'
+      }
+      ElMessage.error(options[c] || msg)
+    })
+}
+
+const loginErrorMsg = (err: any, msg: string) => {
+  const { code, data } = err
+  const msgs: any = {
+    1010: '账号已被封禁,有疑问请联系管理员',
+    1009: `账号已被冻结,解冻时间${
+      data?.openTime && formatDate(new Date(data.openTime))
+    }`
+  }
+  ElMessage.error({
+    type: 'error',
+    message: msgs[code] || msg
+  })
+}
+const login = () => {
+  if (!checkForm()) {
+    return
+  }
+  // 账号密码
+  if (accountLogin.value) {
+    if (remember.value) {
+      localStorage.setItem(
+        'userinfo',
+        JSON.stringify({
+          account: account.value,
+          pwd: pwd.value,
+          remember: remember.value
+        })
+      )
+    } else {
+      localStorage.removeItem('userinfo')
+    }
+    UserApi.login(account.value, pwd.value)
+      .then((res) => {
+        const { token, system } = res.data
+        $store.commit('user/setToken', token)
+        $store.commit('user/setSystem', system)
+        ElMessage.success({
+          message: '登录成功',
+          duration: 500
+        })
+        redirectDashBoard(system)
+      })
+      .catch((err) => {
+        loginErrorMsg(err, '密码不正确')
+      })
+  } else {
+    // 手机号验证码登录
+    UserApi.codeLogin(account.value, pwd.value)
+      .then((res) => {
+        const { token } = res.data
+        $store.commit('user/setToken', token)
+        $store.commit('user/setSystem', false)
+        ElMessage.success({
+          message: '登录成功',
+          duration: 500
+        })
+        redirectDashBoard()
+      })
+      .catch((err) => {
+        loginErrorMsg(err, '验证码不正确')
+      })
+  }
+}
+onMounted(() => {
+  const token = localStorage.getItem('token')
+  if (token) {
+    redirectDashBoard(localStorage.getItem('system') === 'true')
+    return
+  }
+  const info = localStorage.getItem('userinfo')
+  if (info) {
+    const user = JSON.parse(info)
+    account.value = user.account
+    pwd.value = user.pwd
+    remember.value = user.remember
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.login {
+  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+  min-height: 100vh;
+}
+
+.inputArea {
+  // padding: 1rem;
+  margin: 0 auto;
+  max-width: 320px;
+  div {
+    margin-top: 10px;
+  }
+  :deep(.el-input-group__append) {
+    width: 80px;
+    padding: 0 10px;
+  }
+}
+// 登录按钮下方链接
+.links {
+  display: flex;
+  justify-content: center;
+  a {
+    color: #409eff;
+    margin-left: 10px;
+  }
+}
+</style>

package/src/pages/register/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="register">
+    <login-panel>
+      <div class="inputArea">
+        <div>
+          <el-input
+            maxlength="11"
+            placeholder="输入账号"
+            :prefix-icon="User"
+            v-model="account"
+            clearable
+          ></el-input>
+        </div>
+        <div>
+          <el-input
+            maxlength="16"
+            minlength="6"
+            type="password"
+            placeholder="请输入密码"
+            :prefix-icon="Lock"
+            v-model="pwd1"
+            show-password
+            clearable
+          ></el-input>
+        </div>
+        <div>
+          <el-input
+            maxlength="16"
+            minlength="6"
+            type="password"
+            placeholder="请再次输入密码"
+            :prefix-icon="Lock"
+            v-model="pwd2"
+            show-password
+            clearable
+          ></el-input>
+        </div>
+        <div class="tc">
+          <el-checkbox v-model="bindPhone">绑定手机</el-checkbox>
+          <el-tooltip
+            effect="dark"
+            content="可用于修改/找回密码"
+            placement="top-start"
+          >
+            <el-icon :size="16">
+              <QuestionFilled />
+            </el-icon>
+          </el-tooltip>
+        </div>
+        <div v-if="bindPhone">
+          <el-input
+            maxlength="11"
+            placeholder="输入手机号"
+            :prefix-icon="Phone"
+            v-model="phone"
+            clearable
+          ></el-input>
+        </div>
+        <div v-if="bindPhone">
+          <el-input
+            maxlength="4"
+            type="number"
+            placeholder="请输入验证码"
+            :prefix-icon="Lock"
+            v-model="code"
+            clearable
+          >
+            <template #append>
+              <el-button :disabled="time !== 0" @click="getCode">{{
+                codeText
+              }}</el-button>
+            </template>
+          </el-input>
+        </div>
+        <div class="tc">
+          <el-button @click="handleRegister" type="primary">注册</el-button>
+        </div>
+        <el-divider></el-divider>
+        <div class="links">
+          <router-link to="/login">已有账号,去登陆</router-link>
+        </div>
+        <div class="links" style="margin-top: 20px">
+          <el-link target="_blank" href="https://support.qq.com/product/444158"
+            >问题反馈?</el-link
+          >
+        </div>
+      </div>
+    </login-panel>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import loginPanel from '@components/loginPanel.vue'
+import { useStore } from 'vuex'
+import { User, Lock, Phone, QuestionFilled } from '@element-plus/icons-vue'
+import { rAccount, rMobilePhone, rPassword, rVerCode } from '@/utils/regExp'
+import { PublicApi, UserApi } from '@/apis'
+
+const $store = useStore()
+const account = ref('')
+const pwd1 = ref('')
+const pwd2 = ref('')
+const phone = ref('')
+const code = ref('')
+const $router = useRouter()
+const bindPhone = ref(false)
+const codeText = ref('获取验证码')
+const time = ref(0)
+const refreshCodeText = () => {
+  if (time.value === 0) {
+    codeText.value = '获取验证码'
+    return
+  }
+  codeText.value = `${time.value}s`
+  time.value -= 1
+  setTimeout(refreshCodeText, 1000)
+}
+const getCode = () => {
+  if (!rMobilePhone.test(phone.value)) {
+    ElMessage.warning('手机号格式不正确')
+    return
+  }
+  PublicApi.getCode(phone.value).then(() => {
+    time.value = 120
+    refreshCodeText()
+    ElMessage.success('获取成功,请注意查看手机短信')
+  })
+}
+const checkForm = () => {
+  if (!rAccount.test(account.value)) {
+    ElMessage.warning('帐号格式不正确(4-11位 数字字母)')
+    return false
+  }
+
+  if (!rPassword.test(pwd1.value)) {
+    ElMessage.warning('密码格式不正确(6-16位 支持字母/数字/下划线)')
+    return false
+  }
+  if (pwd1.value !== pwd2.value) {
+    ElMessage.warning('两次输入的密码不一致')
+    return false
+  }
+  if (bindPhone.value) {
+    if (!rMobilePhone.test(phone.value)) {
+      ElMessage.warning('手机号格式不正确')
+      return false
+    }
+    if (!rVerCode.test(code.value)) {
+      ElMessage.warning('验证码不正确(4位 数字)')
+      return false
+    }
+  }
+  return true
+}
+const handleRegister = () => {
+  if (!checkForm()) {
+    return
+  }
+  UserApi.register({
+    account: account.value,
+    pwd: pwd1.value,
+    bindPhone: bindPhone.value,
+    phone: phone.value,
+    code: code.value
+  })
+    .then((res) => {
+      const { token } = res.data
+      $store.commit('user/setToken', token)
+      ElMessage.success('注册成功')
+      $router.replace({
+        name: 'dashboard'
+      })
+    })
+    .catch((err) => {
+      const { code: c } = err
+      const msg = '注册失败,未知错误'
+      const options: any = {
+        1001: '账号已存在',
+        1002: '手机号已被注册',
+        1003: '验证码不正确',
+        1004: '密码格式不正确',
+        1006: '手机号格式不正确'
+      }
+      ElMessage.error(options[c] || msg)
+    })
+}
+</script>
+<style scoped lang="scss">
+.register {
+  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+  min-height: 100vh;
+}
+
+.inputArea {
+  margin: 0 auto;
+  max-width: 320px;
+  > div {
+    margin-top: 10px;
+  }
+}
+.links {
+  display: flex;
+  justify-content: center;
+  a {
+    color: #409eff;
+    margin-left: 10px;
+  }
+}
+</style>