验证码

components/captcha/captcha.js

@@ -0,0 +1,106 @@
+// components/captcha/captcha.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    phone: {
+      type: String,
+      required: true
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    generateCode: '-999999', // 点击发送验证码时生成的验证码
+    userCode: '',   // 用户输入的验证码
+    defaultCode: '989898', // 测试时使用
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+/**
+     * 监听验证码输入
+     * @param {*} e 
+     */
+    onInputCode(e) {
+      this.setData({
+        userCode: e.detail.value
+      })
+    },
+    // 获取验证码
+    getCode() {
+      const { phone } = this.data;
+      if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
+        wx.showToast({
+          title: '请输入有效的手机号码',
+          icon: 'none'
+        });
+        return;
+      }
+      const generateCode = this.generateCode(); // 本地生成验证码（用于发送）
+      // 保存验证码到 data
+      this.setData({ generateCode });
+      wx.cloud.callFunction({
+        // 云函数名称
+        name: 'lxp',
+        // 传给云函数的参数
+        data: {
+          mobile: this.data.phone,
+          code: generateCode,
+        },
+      }).then(res => {
+        if (res.result.response.code === 200) {
+          console.log('数据获取成功 =>', res.result.response);
+          wx.showToast({
+            title: '验证码发送成功',
+            icon: 'none'
+          });
+        } else {
+          console.error('数据获取失败 =>', res.result.response);
+          wx.showToast({
+            title: '验证码发送失败',
+            icon: 'none'
+          });
+        }
+      }).catch(error => {
+        console.error(error)
+        wx.showToast({
+          title: '验证码发送失败',
+          icon: 'none'
+        });
+      })
+    },
+
+    /**
+     * 生成验证码
+     */
+    generateCode() {
+      return Math.floor(100000 + Math.random() * 900000).toString();
+    },
+
+    /**
+     * 校验验证码
+     */
+    validCaptcha() {
+      const { generateCode, userCode, defaultCode } = this.data
+      const flag = generateCode === userCode || defaultCode === userCode
+      const result = {
+        flag,
+        msg: '',
+      }
+      if (!flag) {
+        result.msg = '验证码输入错误'
+      }
+      if (!userCode) {
+        result.msg = '请输入验证码'
+      }
+      return result
+    },
+  }
+})

components/captcha/captcha.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/captcha/captcha.wxml

@@ -0,0 +1,8 @@
+<!--components/captcha/captcha.wxml-->
+<view class="input-group">
+  <label>验证码</label>
+  <view style="display: flex;">
+    <input style="width: 95%;margin-right: 3%;" type="text" placeholder="请输入验证码" bindinput="onInputCode"/>
+    <button bindtap="getCode" class="get-code-btn">获取验证码</button>
+  </view>
+</view>

components/captcha/captcha.wxss

@@ -0,0 +1,35 @@
+/* components/captcha/captcha.wxss */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rpx;
+}
+
+.input-group label {
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.input-group input {
+  height: 80rpx;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  border-radius: 12rpx;
+}
+.get-code-btn {
+  width: 300rpx !important;
+  height: 80rpx;
+  background-color: #fff;
+  color: #409eff;
+  border: 1rpx solid #409eff;
+  border-radius: 4rpx;
+  padding: 20rpx 0rpx;
+  /* margin-left: 20rpx; */
+  margin-top: 1rpx;
+  font-size: 28rpx;
+  border-radius: 12rpx;
+}

package-lock.json

@@ -1,15 +1,25 @@
 {
   "name": "ls-admin",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "requires": true,
-  "dependencies": {
-    "@cloudbase/wx-cloud-client-sdk": {
+  "packages": {
+    "": {
+      "name": "ls-admin",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@cloudbase/wx-cloud-client-sdk": "^1.6.1",
+        "vant-weapp": "^0.5.29"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/@cloudbase/wx-cloud-client-sdk": {
       "version": "1.6.1",
       "resolved": "https://registry.npmmirror.com/@cloudbase/wx-cloud-client-sdk/-/wx-cloud-client-sdk-1.6.1.tgz",
       "integrity": "sha512-TeLhz+LMlTe1bZiCbwflU2nXX4FHXnLk1ojbrOfY9ki1gO1gYll9Snl2g3zBhiTGye/OfhzBEDCwVhGxzOxs4Q=="
     },
-    "vant-weapp": {
+    "node_modules/vant-weapp": {
       "version": "0.5.29",
       "resolved": "https://registry.npmmirror.com/vant-weapp/-/vant-weapp-0.5.29.tgz",
       "integrity": "sha512-RMc0Ga914XFwspw2WuOMU8bOHlIkua8X1DoQ/KPnGQzjwT1uEL4S7W186EmaHF1wN2krB9BVd0LdRRt39dGh6Q=="

pages/login/login.js

@@ -93,6 +93,24 @@ Page({
       return;
     }
 
+    if (!/^1[3-9]\d{9}$/.test(phone)) {
+      wx.showToast({
+        title: '输入的手机号码有误',
+        icon: 'none'
+      });
+      return;
+    }
+
+    const childComponent = this.selectComponent('#registorCaptcha');
+      const result = childComponent.validCaptcha()
+      if (!result.flag) {
+        wx.showToast({
+          title: result.msg,
+          icon: 'none'
+        });
+        return
+      }
+
     try {
       // 查询校验
       const { data } = await models.wx_teacher_user.get({
@@ -105,7 +123,6 @@ Page({
         },
         envType: "prod",
       });
-
       if (data && Object.keys(data).length > 0) {
         const user = Array.isArray(data) ? data[0] : data;
         if (user.delete === 1) {

pages/login/login.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "captcha": "/components/captcha/captcha"
+  },
   "navigationBarTitleText": "绑定手机号"
 }

pages/login/login.wxml

@@ -25,6 +25,7 @@
         <input value="{{phone}}" bindinput="onPhoneInput" type="text" placeholder="请输入常用的手机号码" />
       </view>
     </view>
+    <captcha id="registorCaptcha" phone="{{phone}}" />
     <!-- <view class="input-group">
       <label>验证码</label>
       <view style="display: flex;">

pages/logins/logins.js

@@ -2,7 +2,6 @@ import { models, db } from '../../utils/cloudbase.js'
 Page({
   data: {
     phone: '', // 用户输入的手机号码
-    code: ''   // 用户输入的验证码
   },
 
   // 监听手机号码输入
@@ -12,48 +11,32 @@ Page({
     });
   },
 
-  // 监听验证码输入
-  onInputCode(e) {
-    this.setData({
-      code: e.detail.value
-    });
-  },
-
-  // 获取验证码
-  getCode() {
+  // 确定按钮点击事件
+  async onConfirm() {
     const { phone } = this.data;
-    if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
+    if (!phone) {
       wx.showToast({
-        title: '请输入有效的手机号码',
+        title: '请输入手机号码',
         icon: 'none'
       });
       return;
     }
-
-    const code = this.generateCode(); // 本地生成验证码（用于发送）
-
-    // 保存验证码到 data
-    this.setData({ code });
-
-    console.log(code, 'codecode');
-
-  },
-
-  
-  generateCode() {
-    return Math.floor(100000 + Math.random() * 900000).toString();
-  },
-
-  // 确定按钮点击事件
-  async onConfirm() {
-    const { phone, code } = this.data;
-    if (!phone || !code) {
+    if (!/^1[3-9]\d{9}$/.test(phone)) {
       wx.showToast({
-        title: '请输入手机号码和验证码',
+        title: '输入的手机号码有误',
         icon: 'none'
       });
       return;
     }
+    const childComponent = this.selectComponent('#loginCaptcha');
+    const result = childComponent.validCaptcha()
+    if (!result.flag) {
+      wx.showToast({
+        title: result.msg,
+        icon: 'none'
+      });
+      return
+    }
 
     const { data } = await models.wx_teacher_user.list({
       filter: {

pages/logins/logins.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "captcha": "/components/captcha/captcha"
+  },
   "navigationBarTitleText": "登录"
 }

pages/logins/logins.wxml

@@ -16,13 +16,7 @@
         <input bindinput="onInputPhone" type="text" placeholder="请输入常用的手机号码" />
       </view>
     </view>
-    <view class="input-group">
-      <label>验证码</label>
-      <view style="display: flex;">
-        <input style="width: 95%;margin-right: 3%;" type="text" placeholder="请输入验证码" bindinput="onInputCode"/>
-        <button bindtap="getCode" class="get-code-btn">获取验证码</button>
-      </view>
-    </view>
+    <captcha id="loginCaptcha" phone="{{phone}}" />
     <navigator url="/pages/login/login" open-type="navigate">您还没有账号，去注册</navigator>
     <button bindtap="onConfirm" class="confirm-btn">登录</button>
   </view>

pages/logins/logins.wxss

@@ -25,20 +25,6 @@
   border-radius: 12rpx;
 }
 
-.get-code-btn {
-  width: 300rpx !important;
-  height: 80rpx;
-  background-color: #fff;
-  color: #409eff;
-  border: 1rpx solid #409eff;
-  border-radius: 4rpx;
-  padding: 20rpx 0rpx;
-  /* margin-left: 20rpx; */
-  margin-top: 1rpx;
-  font-size: 28rpx;
-  border-radius: 12rpx;
-}
-
 .confirm-btn {
   background-color: #409eff;
   color: white;

project.config.json

@@ -1,7 +1,7 @@
 {
   "compileType": "miniprogram",
   "cloudfunctionRoot": "cloud/",
-  "libVersion": "trial",
+  "libVersion": "3.8.11",
   "packOptions": {
     "ignore": [],
     "include": []
@@ -38,5 +38,6 @@
     "tabSize": 2
   },
   "appid": "wx06f2b1b09ac5684f",
-  "simulatorPluginLibVersion": {}
+  "simulatorPluginLibVersion": {},
+  "cloudfunctionTemplateRoot": "cloudfunctionTemplate/"
 }

project.private.config.json

@@ -19,5 +19,6 @@
     "checkInvalidKey": true,
     "ignoreDevUnusedFiles": true
   },
-  "libVersion": "3.8.11"
+  "libVersion": "3.8.11",
+  "condition": {}
 }