登录

README.md

@@ -21,12 +21,6 @@
 
 </div>
 
-> 作者目前失业状态（5月底公司裁员，公司大规模裁员的那种），求工作，城市不限（一二线城市为主），薪资OPEN，大厂优先，有推荐的请联系我，万分感激。（接受加班，周末 on call 也OK）
->
-> 微信与手机同号：`156 9200 4664`，备注：`工作推荐`。
->
-> 211硕士，8年工作经验，Vue, react, uniapp, nodejs都OK，有Sass项目开发经验。
-
 `unibest` —— 最好的 `uniapp` 开发框架，由 `uniapp` + `Vue3` + `Ts` + `Vite5` + `UnoCss` + `wot-ui` + `z-paging` 构成，使用了最新的前端技术栈，无需依靠 `HBuilderX`，通过命令行方式运行 `web`、`小程序` 和 `App`（编辑器推荐 `VSCode`，可选 `webstorm`）。
 
 `unibest` 内置了 `约定式路由`、`layout布局`、`请求封装`、`请求拦截`、`登录拦截`、`UnoCSS`、`i18n多语言` 等基础功能，提供了 `代码提示`、`自动格式化`、`统一配置`、`代码片段` 等辅助功能，让你编写 `uniapp` 拥有 `best` 体验 （ `unibest 的由来`）。
@@ -54,15 +48,15 @@
 
 ## 📦 运行（支持热更新）
 
-- web平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。
-- weixin平台：`pnpm dev:mp-weixin` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。
-- APP平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。
+- web 平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。
+- weixin 平台：`pnpm dev:mp-weixin` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。
+- APP 平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios 基座。
 
 ## 🔗 发布
 
-- web平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 `manifest.config.ts` 文件的 `h5.router.base` 属性进行修改。
-- weixin平台：`pnpm build:mp-weixin`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
-- APP平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP云打包。
+- web 平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到 web 服务器，如 nginx 运行。如果最终不是放在根目录，可以在 `manifest.config.ts` 文件的 `h5.router.base` 属性进行修改。
+- weixin 平台：`pnpm build:mp-weixin`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
+- APP 平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP 云打包。
 
 ## 📄 License
 

src/pages.json

@@ -93,6 +93,13 @@
         "navigationBarTitleText": "欢迎登录"
       }
     },
+    {
+      "path": "pages/phone/phone",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "手机登录"
+      }
+    },
     {
       "path": "pages/serch/serch",
       "type": "page",

src/pages/index/index.vue

@@ -145,7 +145,7 @@ const addBattle = (val) => {
 }
 
 onMounted(() => {
-  logins()
+  // logins()
 })
 
 // 测试 uni API 自动引入

src/pages/login/login.vue

@@ -16,7 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-// code here
+defineOptions({
+  name: 'Login',
+})
 </script>
 
 <style lang="scss" scoped>

src/pages/my/my.vue

@@ -5,20 +5,29 @@
 </route>
 
 <template>
-  <view class="text-center px-4 pt-20">
-    <view class="con-top">
-      <view class="h1 mb-8 mt-10">科湃腾肉牛系统</view>
-      <view class="h3 mb-10 pt-4">让牧场管理更专业、更简单、更高效</view>
+  <view class="text-center container">
+    <view class="px-10 pt-20 pb-20 top-box">
+      <view class="con-top">
+        <view class="h1 mb-8 mt-10">科湃腾肉牛系统</view>
+        <view class="h3 mb-10 pt-4">简化牧场管理，从这里开始！</view>
+      </view>
+      <view class="btn mt-10 user">用户一键登录</view>
+      <view class="btn mt-10 tel" @click="getPhone">手机号安全登录</view>
+      <text class="mt-10 title">
+        <wd-radio :value="1">我已认真阅读并同意《服务协议》、《隐私政策》</wd-radio>
+      </text>
     </view>
-    <view class="btn mt-10">用户一键登录</view>
-    <text class="mt-10 title">
-      <wd-radio :value="1">我已认真阅读并同意《服务协议》、《隐私政策》</wd-radio>
-    </text>
   </view>
 </template>
 
 <script lang="ts" setup>
-// code here
+defineOptions({
+  name: 'Login',
+})
+
+const getPhone = () => {
+  uni.navigateTo({ url: '/pages/telPhone/telPhone' })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -33,12 +42,24 @@
 
 .btn {
   color: #fff;
-  background-color: #f59e0b;
-  border-radius: 70rpx;
-  height: 100rpx;
-  line-height: 100rpx;
-  font-size: 38rpx;
-  width: 90%;
-  margin: 0 auto;
+  border-radius: 60rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 36rpx;
+  margin: 30rpx auto;
+}
+.user {
+  background-color: #eea441;
+  margin-bottom: 50rpx;
+}
+.tel {
+  background-color: #2a9d8f;
+}
+.container {
+  // background-color: #fafafa;
+  height: 100vh;
+}
+.top-box {
+  background-color: #fff;
 }
 </style>

src/pages/phone/phone.vue

@@ -0,0 +1,106 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '手机登录' },
+}
+</route>
+
+<template>
+  <view class="text-center px-5">
+    <view class="text-green-500">
+      <wd-form ref="form" :model="model">
+        <wd-cell-group border>
+          <wd-input
+            prop="phoneNumber"
+            clearable
+            size="large"
+            v-model="model.phoneNumber"
+            placeholder="请输入手机号"
+            type="number"
+            @change="rolePhone"
+            :rules="[{ required: true, message: '请输入手机号' }]"
+          />
+          <view class="num-box">
+            <wd-input
+              prop="verificationCode"
+              clearable
+              size="large"
+              type="number"
+              v-model="model.verificationCode"
+              placeholder="请输验证码"
+              :rules="[{ required: true, message: '请输验证码' }]"
+            />
+            <view class="codeBtn">
+              <wd-button type="primary" @click="sendCode" :disabled="isClick">获取验证码</wd-button>
+            </view>
+          </view>
+        </wd-cell-group>
+        <view class="footer">
+          <wd-button type="primary" size="large" @click="handleSubmit" :disabled="isClick" block>
+            提交
+          </wd-button>
+        </view>
+      </wd-form>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'wot-design-uni'
+
+const message = useMessage()
+const isClick = ref(true)
+const model = reactive<{
+  phoneNumber: string
+  verificationCode: string
+}>({
+  phoneNumber: '',
+  verificationCode: '',
+})
+
+const form = ref()
+
+// 短信获取验证码
+const sendCode = () => {
+  // 接口请求
+}
+
+// 校验手机号正确咋显示按钮
+const rolePhone = (tel) => {
+  console.log(tel, '手机号')
+  const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
+  if (reg.test(tel)) {
+    isClick.value = false
+  } else {
+    isClick.value = true
+  }
+}
+// 提交验证码
+const handleSubmit = () => {
+  form.value
+    .validate()
+    .then(({ valid, errors }) => {
+      if (valid) {
+        message.show('校验通过')
+        uni.setStorageSync('userToken', 123) // 存储用户信息
+      }
+    })
+    .catch((error) => {
+      console.log(error, 'error')
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+//
+.footer {
+  padding: 24rpx;
+}
+.num-box {
+  position: relative;
+}
+.codeBtn {
+  position: absolute !important;
+  top: 22rpx;
+  right: 10rpx;
+}
+</style>

src/types/uni-pages.d.ts

@@ -10,6 +10,7 @@ interface NavigateToOptions {
        "/pages/battleForm/battleForm" |
        "/pages/login/login" |
        "/pages/my/my" |
+       "/pages/phone/phone" |
        "/pages/serch/serch";
 }
 interface RedirectToOptions extends NavigateToOptions {}

src/utils/validate.js

@@ -0,0 +1,90 @@
+export default {
+  /**
+   * 只能是英文和数字
+   * @param {*} rule 定义正则
+   * @param {*} value 传入的值
+   * @param {*} callback 返回函数
+   */
+  EnglishAndNum(rule, value, cb, text) {
+    const reg = new RegExp('^[a-zA-Z0-9]+$')
+    if (rule.required) {
+      if (!value) {
+        cb(new Error('请输入信息'))
+      } else if (!reg.test(value)) {
+        cb(new Error('只能输入英文和数字'))
+      } else {
+        cb()
+      }
+    } else if (value && !reg.test(value)) {
+      cb(new Error('只能输入英文和数字'))
+    } else {
+      cb()
+    }
+  },
+  /**
+   * 只能是数字正整数
+   * @param {*} rule 定义正则
+   * @param {*} value 传入的值
+   * @param {*} callback 返回函数
+   */
+  positiveInteger(rule, value, cb) {
+    const reg = new RegExp('^[0-9]*$')
+    if (rule.required) {
+      if (!value) {
+        cb(new Error('请输入信息'))
+      } else if (!reg.test(value)) {
+        cb(new Error('只能输入正整数'))
+      } else {
+        cb()
+      }
+    } else if (value && !reg.test(value)) {
+      cb(new Error('只能输入正整数'))
+    } else {
+      cb()
+    }
+  },
+  /**
+   * 数字 可以带小数
+   * @param {*} rule 定义正则
+   * @param {*} value 传入的值
+   * @param {*} callback 返回函数
+   */
+  validateNumber(rule, value, cb) {
+    const reg = new RegExp('^[+]?[0-9]*\\.?[0-9]+$')
+    if (rule.required) {
+      if (!value && Number(value) !== 0) {
+        cb(new Error('请输入信息'))
+      } else if (!reg.test(value)) {
+        cb(new Error('只能输入正数字'))
+      } else {
+        cb()
+      }
+    } else if (value && !reg.test(value)) {
+      cb(new Error('只能输入正数字'))
+    } else {
+      cb()
+    }
+  },
+  /**
+   * 验证手机号是否正确
+   * @param {*} rule 定义正则
+   * @param {*} value 传入的值
+   * @param {*} callback 返回函数
+   */
+  validatePhone(rule, value, callback) {
+    const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
+    if (rule.required) {
+      if (!value) {
+        callback(new Error('请输入手机号码'))
+      } else if (!reg.test(value)) {
+        callback(new Error('请输入正确的手机号码'))
+      } else {
+        callback()
+      }
+    } else if (value && !reg.test(value)) {
+      callback(new Error('请输入正确的手机号码'))
+    } else {
+      callback()
+    }
+  },
+}