手机登录，去除无效按钮

gerson

2024-08-11 81a60aa4fb7ee1689518918ceb9122f5d257e2fc

手机登录，去除无效按钮

 miniprogram/api/account.ts

@@ -28,7 +28,7 @@
};

//发送短信验证码
export const loginVerifyMessage = async (params) => {
export const loginVerifyMessage = async (params,extraData={}) => {
  return http.request({
    url: TEL_LOGIN_URL,
    method: 'POST',
@@ -36,11 +36,12 @@
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    ...extraData
  });
};

//发送短信验证码登录
export const loginMessageUser = async (params) => {
export const loginMessageUser = async (params,extraData={}) => {
  return http.request({
    url: Get_LOGIN_SMS,
    method: 'POST',
@@ -48,5 +49,6 @@
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    ...extraData
  });
};

 miniprogram/app.js

@@ -13,7 +13,10 @@
    address: {},
  // å½“前点击的 sectionAId
    sectionAId:'',
    sectionB:null
    sectionB:null,
    user:{
      phoneNum:'',
    }
  },

  onShow() {

 miniprogram/pages/login/login.ts

@@ -5,14 +5,15 @@
// å¯¼å…¥æœ¬åœ°å­˜å‚¨ api
import { setStorage } from '@/utils/storage'
// å¯¼å…¥æŽ¥å£ API å‡½æ•°
import { PostLogin } from '@/api/account';
import { loginMessageUser, loginVerifyMessage, PostLogin } from '@/api/account';
// å¯¼å…¥ ComponentWithStore æ–¹æ³•
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
// å¯¼å…¥ store å¯¹è±¡
import { accountStore } from '@/stores/accountStore'

import {STATIC_FILE_BASE_URL} from '@/config/constants'

import { STATIC_FILE_BASE_URL } from '@/config/constants'
import { verifyPhone } from '@/utils/toolsValidate';
const app = getApp();
// ä½¿ç”¨ ComponentWithStore æ–¹æ³•æ›¿æ¢ Component æ–¹æ³•æž„造页面
ComponentWithStore({
  // è®©é¡µé¢å’Œ Store å¯¹è±¡å»ºç«‹å…³è”
@@ -23,23 +24,116 @@
  },
  data: {
    activeTab: 'account',
    user: 'tc',
    password: 'a',
    STATIC_FILE_BASE_URL
    user: '',
    password: '',
    STATIC_FILE_BASE_URL,
    countNum: null,
    countTimer: null,
    phoneNumber: '',
    verifyCode: '',
  },
  lifetimes: {
    attached() {
      wx.hideHomeButton();
    },

  },
  pageLifetimes: {
    hide() {
      this.resetContent();
    }
  },

  methods: {

    resetContent() {
      switch (this.data.activeTab) {
        case 'account':
          this.setData({
            user: '',
            password: '',
          })
          break;
        case 'cellPhoneNumber':
          this.setData({
            phoneNumber: '',
            verifyCode: '',
          })
          this.stopCount();
          this.setData({
            countNum: null
          })
        default:
          break;
      }

    },
    tabChange: function (event) {
      this.setData({
        activeTab: event.detail.name
      })

      this.resetContent();
    },
    async getSMSClick() {
      if (this.data.countNum !== null) {
        return;
      }
      if (!this.data.phoneNumber) {
        toast({
          title: '请输入手机号码！'
        });
        return;
      }
      console.log(this.data.phoneNumber);
      const isValid = verifyPhone(this.data.phoneNumber)
      console.log(isValid);
      
      if (!isValid) {
        toast({
          title: '请输入正确的手机号码！'
        });
        return;
      }
      this.setData({
        verifyCode: ''
      })
      const res = await loginVerifyMessage({
        phone: this.data.phoneNumber
      },{
        noAuth: true
      })
      
      if (!res?.json_ok) {
        return;
      }
      this.startCount();
    },
    stopCount() {
      clearInterval(this.data.countTimer)
    },

    startCount() {
      this.stopCount();
      this.setData({
        countNum: 60
      })
      this.data.countTimer = setInterval(() => {
        if (this.data.countNum === 0) {
          this.setData({
            countNum: null
          })
          clearInterval(this.data.countTimer);
          return;
        }
        this.setData({
          countNum: this.data.countNum - 1
        })
      }, 1000);
    },

    handlePhoneNumName(phoneStr){
     return phoneStr.substr(0,3)+"****"+phoneStr.substr(7);
    },

    // æŽˆæƒç™»å½•
    login: wx.$_.debounce(async function () {

@@ -65,22 +159,54 @@
          }, {
            noAuth: true
          });
          if (!res.json_ok || !res.hswatersession) {
            toast({
              title: res.json_msg
            })
            return;
          }
          setStorage('username', this.data.user);
          this.setUsername(this.data.user);
          app.globalData.user.phoneNum = '';

          break;
        case 'cellPhoneNumber':

          if (!this.data.phoneNumber) {
            toast({
              title: '请输入手机号码！'
            });
            return;
          }
          if (!verifyPhone(this.data.phoneNumber)) {
            toast({
              title: '请输入正确的手机号码！'
            });
            return;
          }
          if (!this.data.verifyCode) {
            toast({
              title: '请输入验证码！'
            });
            return;
          }
          res = await loginMessageUser({
            phone: this.data.phoneNumber,
            code: this.data.verifyCode,
          }, {
            noAuth: true
          });
          const phoneName = this.handlePhoneNumName(this.data.phoneNumber) 
          setStorage('username',phoneName);
          this.setUsername(phoneName);
          app.globalData.user.phoneNum = this.data.phoneNumber;
          break;
        default:
          break;
      }
      if (!res.json_ok || !res.hswatersession) {
        toast({
          title: res.json_msg
        })
        return;
      }
      setStorage('session', res.hswatersession);
      this.setSession(res.hswatersession)
      setStorage('username', this.data.user);
      this.setUsername(this.data.user);

      wx.switchTab({
        url: '/pages/question/question'
      });

 miniprogram/pages/login/login.wxml

@@ -13,15 +13,19 @@
      <van-tab name="account" title="账号登录">
        <van-cell-group>
          <van-field model:value="{{ user }}" placeholder="账号" />
          <van-field model:value="{{ password }}" placeholder="密码" border="{{ false }}" />
          <van-field model:value="{{ password }}" placeholder="密码" type="password" border="{{ false }}" />
        </van-cell-group>
      </van-tab>
      <van-tab name="cellPhoneNumber" title="验证码登录">
        <van-cell-group>
          <van-field value="{{ user }}" placeholder="手机号码">
            <text slot="button" class="sms-send-btn font-bold font23">获取验证码</text>
          <van-field model:value="{{ phoneNumber }}" placeholder="手机号码">
            <text wx:if="{{countNum===null}}" slot="button" class="sms-send-btn font-bold font23" bind:tap="getSMSClick">获取验证码</text>

            <text wx:else slot="button" class="sms-send-btn font-bold font23 text-gray-300" >{{countNum+'秒后重试'}}</text>


          </van-field>
          <van-field value="{{ sms }}" center clearable label="" placeholder="请输入短信验证码" use-button-slot>
          <van-field model:value="{{ verifyCode }}" center clearable label="" placeholder="请输入短信验证码" use-button-slot>

          </van-field>
        </van-cell-group>

 miniprogram/pages/my/my.js

@@ -1,5 +1,5 @@
import { clearStorage } from "@/utils/storage"

import { clearStorage,getStorage } from "@/utils/storage"
const app = getApp();
// pages/my/my.ts
Component({

@@ -7,7 +7,8 @@
   * é¡µé¢çš„初始数据
   */
  data: {

    userName:getStorage('username'),
    phoneNumber: app.globalData.user.phoneNum
  },
  methods:{
    logout(){

 miniprogram/pages/my/my.wxml

@@ -4,24 +4,24 @@
  <view>
    <view class="flex-items-center">
      <text class="ywicon icon-morentouxiang bg-gray-300 rounded-full text-gray-500 mr-20" style="font-size: 73rpx;"></text>
      <text class="font25 font-bold">183799|免费用户</text>
      <text class="font25 font-bold">{{userName}}</text>
    </view>
    <fui-list marginTop="40">
      <fui-list-cell highlight="{{false}}">账号名

        <text class="text-gray-400">u645782</text>
        <text class="text-gray-400">{{userName}}</text>

      </fui-list-cell>
      <fui-list-cell arrow>
      <!-- <fui-list-cell arrow>
        <text>修改密码</text>
      </fui-list-cell>
      </fui-list-cell> -->
      <fui-list-cell>
        <text>手机号</text>
        <text class="text-gray-400">未绑定</text>
        <text class="text-gray-400">{{phoneNumber || '未绑定'}}</text>
      </fui-list-cell>
      <fui-list-cell arrow>
      <!-- <fui-list-cell arrow>
        <text>使用浏览器登录</text>
      </fui-list-cell>
      </fui-list-cell> -->
      <!-- <fui-list-cell arrow>
        <text>切换账号密码登录</text>
      </fui-list-cell> -->

 miniprogram/pages/question/question.ts

@@ -21,6 +21,7 @@
import { ErrorCode } from "@/utils/http";
import { ComponentWithComputed, } from "miniprogram-computed";
import { uuid } from "@/utils/uuid";
import { getStorage } from "@/utils/storage";

const app = getApp();
// pages/question/question.js
@@ -132,8 +133,16 @@
    displaySampleList: [],
    section_a_id: '',
    sample_id: '',
  },
    userName:getStorage('username'),

  },
  onClickClear(){
    console.log('clear');
    
    this.setData({
      sendText:''
    })
  },
  async getSampleList() {
    const res = await getSelectSample({
      section_b_id: '',

 miniprogram/pages/question/question.wxml

@@ -20,10 +20,10 @@
                {{item.sample_title}}
              </view>
            </view>
            <view class="w-300  ml-auto mr-auto mt-30 text-white font28 py-18" style="text-align: center;background: linear-gradient(to right,#37d0e0,#5988e0);border-radius: 300rpx">
            <!-- <view class="w-300  ml-auto mr-auto mt-30 text-white font28 py-18" style="text-align: center;background: linear-gradient(to right,#37d0e0,#5988e0);border-radius: 300rpx">
              <text class="ywicon icon-maikefeng"></text>
              å¼€å¯è¯­éŸ³å¯¹è¯å§~
            </view>
            </view> -->
          </view>
        </block>
        <block wx:else>
@@ -52,9 +52,11 @@
    </scroll-view>
  </view>
  <view class="flex-0 flex-items-center py-20" style="background-color: #f4f6f8;">
    <text class="font46 ywicon icon-fenxiang flex-0 mx-15"></text>
    <van-field left-icon="replay" custom-class="py-3 flex-items-center van-field" input-class="ml-10" type="textarea" autosize placeholder="在这里输入你的问题" class="flex-auto" model:value="{{sendText}}" bind:change="onSendTextChange" size="large"></van-field>
    <text class="font45 ywicon {{!sendText? 'icon-dianhua1':'icon-fasongxiaoxi'}} flex-0 mx-15" bind:tap="inputRighBtnClick"></text>
    <!-- <text class="font46 ywicon icon-fenxiang flex-0 mx-15"></text> -->
    <text class="font46  flex-0 mx-15"></text>
    <van-field icon="cross" bind:click-icon="onClickClear"  custom-class="py-3 flex-items-center van-field" input-class="ml-10" type="textarea" autosize placeholder="在这里输入你的问题" class="flex-auto" model:value="{{sendText}}" bind:change="onSendTextChange" size="large"></van-field>
    <!-- <text class="font45 ywicon {{!sendText? 'icon-dianhua1':'icon-fasongxiaoxi'}} flex-0 mx-15" bind:tap="inputRighBtnClick"></text> -->
    <text class="font45 ywicon {{!sendText? 'icon-fasongxiaoxi':'icon-fasongxiaoxi'}} flex-0 mx-15" bind:tap="inputRighBtnClick"></text>
  </view>
  <fui-drawer model:show="{{drawerIsShow}}" direction="left">
    <view class="w-450 flex flex-col relative h-full" >
@@ -62,7 +64,7 @@
      <view class="p-15 flex flex-col justify-between" style="background-color: #e8f0fd;">
        <view class="flex-items-center">
          <text class="ywicon icon-morentouxiang bg-gray-300 rounded-full font60 text-gray-500 mr-20"></text>
          <text class="font25 font-bold">183799|免费用户</text>
          <text class="font25 font-bold">{{userName}}</text>
        </view>
        <view class="flex-items-center justify-between mt-20">
          <van-button class="" color="#000000" custom-style="font-size:20rpx;height:50rpx" round size="small" icon="plus" bind:tap="newChatRoomClick">新建聊天室</van-button>

 miniprogram/pages/scene/scene.wxml

@@ -9,7 +9,7 @@
            <text class="ywicon icon-{{iconList[index]}} text-blue-600 font55"></text>
            <!-- <image src="/assets/scene/scene_2.png"></image> -->
            <text class="font-bold font32 my-7">{{item.section_name}}</text>
            <text class="font26 overflow-hidden multi-over-ellisis" style="-webkit-line-clamp: 3;">{{item.section_title}}</text>
            <text class="font26 overflow-hidden over-ellisis-3" style="-webkit-line-clamp: 3;">{{item.section_title}}</text>
          </view>
        </view>
      </block>

 miniprogram/utils/common.ts

@@ -22,4 +22,5 @@
    }, {}) as Record<string, T | T[]>;

    return result;
};
};


 miniprogram/utils/toolsValidate.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@

/**
 * æ‰‹æœºå·ç 
 * @param val å½“前值字符串
 * @returns è¿”回 true: æ‰‹æœºå·ç æ­£ç¡®
 */
export function verifyPhone(val: string) {
    // false: æ‰‹æœºå·ç ä¸æ­£ç¡®
    // if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
    if (!/^1[3456789]\d{9}$/.test(val)) return false;
	
    // true: æ‰‹æœºå·ç æ­£ç¡®
    else return true;
}