工作记录1

1. 在react中给图片加上路径，应该使用require

<img src={require("图片相对路径")} />

2. 要做一个回到顶部的功能，可以使用点击事件onClick搭配window.scrollTo来实现。

<div onClick={scrollToTop}></div>
const scrollToTop = ()=> {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    })
}

3. 在事件嵌套的时候，为了阻止事件冒泡捕获，可以在里面那层点击事件中，使用event.stopPropagation()；

<template>
    <view class="outer" @click="handleOuterClick">
        <view class="inner" @click.stop="handleInnerClick">内部元素</view>
    </view>
</template>
<script>
export default {
  methods: {
    handleOuterClick() {
      console.log('外部元素被点击');
    },
    handleInnerClick(event) {
      event.stopPropagation();  // 使用 .stop 修饰符阻止事件冒泡
      console.log('内部元素被点击');
    }
  }
}
</script>

4. 在使用BasicTable时，有一个需求。简单来说就是这个表格，每一行是有复选框的，当选中了大于等于1行数据时，需要显示“批量通过”或“批量拒绝”按钮，否则禁用。所以原本通过:rowSelection="{onChange:(value) => onSelectChange(value)}"来调用onSelectChange方法进而起停用那两个按钮。但是现在需求变了，当“当前行的status的值为1的时候”，我需要禁用当前行的复选框。于是，我将代码改造成了这样：

:rowSelection="rowSelection"
const rowSelection :any = computed(() => {
    return {
        onChange:onSelectChange,
        getCheckboxProps:(record:any)=>{
            if(record.status ===1){
                return {disabled:true}
            }else{
                return {}
            }
        }
    }
})

5. 机构注册登录页的逻辑

header --> index.tsx

在登录页面头部，一进页面，也就是在useEffect里面，根据localStorage.getItem判断是否有用户信息：

如果有的话，头部展示用户信息中的“用户手机号”+“退出登录”按钮。

如果没有的话，头部展示“立即登录”按钮。

其中，如果点击“退出登录”按钮，就用window.localStorage.removeItem从本地删除用户信息，并将本地的“用户登录状态”localStorage.setItem("status", "0");和“用户手机号”setContactMobile("");初始化。

如果点击“立即登录”按钮，就通过navigate(`login`)跳转到登录界面。

Login --> index.tsx

在登录界面，有“手机号+验证码”和“手机号+密码”两种登录方式。这个登录的功能，只是为了查询这个手机号此时的状态。

如果没有注册过该手机号，可以点击“立即注册”按钮，通过navigate(`/register`)跳转到注册页面。

如果已经注册过该手机号，可以点击“登录”按钮，查询此手机号的状态，在查询成功后，用localStorage.setItem存储一下用户信息和用户状态（此时会返回3种状态“1-此名称的机构在审核中 2-此名称的机构审核通过 3-此名称的机构审核失败”）

localStorage.setItem("userInfo", JSON.stringify(formValues));

localStorage.setItem("status", response.status);

接着通过navigate(`/register?status1=${response.status}&domain1=${response.domain}`)，在跳转到register页面的同时携带status参数过去。

register --> content.tsx

在注册页面，不同的status状态值它的页面展示是不一样的。

当status等于0时，说明还未注册，此时页面展示的就是机构注册页。

当status等于1时，说明此机构在审核中，此时页面展示的就是审核中的状态及与之对应的文字。

当status等于2时，说明此机构已经审核通过，此时页面展示的就是审核通过的状态及与之对应的文字。

当status等于3时，说明此机构的审核申请被驳回，此时页面展示的就是审核被驳回的状态及与之对应的文字。

机构注册页，有以下input输入框

“请输入机构名称”

这里做了名称查重处理，在失去焦点也就是onBlur的时候，调用方法调用接口查重，将返回的结果赋值给setIsNameRepeat(response);并做判断不同的名称状态给出不同的提示。

“请输入管理员姓名”

“请输入管理员手机号”，这里做了手机号查重处理，在失去焦点也就是onBlur的时候，调用方法，手机号比较特殊，需要校验，例如通过正则校验输入的到底是不是手机号等等。通过校验之后才去调取接口查询“手机号查重”的结果，并将其通过setPhoneStatus赋值，并在页面中做判断不同的手机状态给出不同的提示。

“请输入图片验证码”

这里除了一个input输入框还有一张图片，图片是接口返回的，在页面初始化和点击这个图片的时候都会调用接口以刷新图片。

“请输入验证码”

这里除了验证码输入框，还有一个“发送验证码”的按钮。验证码输入框限制输入最大长度为6位数，并且也在失去焦点的时候做一些校验。

首先校验输入的验证码是否为空，如果为空就给setCodeStatus赋值为1，不为空后，再校验输入的验证码是否为6位数，不为6位数字的话，就给setCodeStatus赋值为2，剩下的就给setCodeStatus赋值为3，并在页面中做判断以展示不同状态对应的不同页面。

其次，在点击“发送验证码”按钮时，调用方法首先判断是否已经处在倒计时状态，如果是的话，就不做任何判断并给出提示“60s内不能重新发送验证码”。

如果不是，且名字校验没问题的话，就开始校验手机号，手机号没问题的话，就开始校验图片验证码，图片验证码也没问题的话，就会开始倒计时，此时按钮变成“重新发送 (${timer}s)”。

“请输入管理员账号密码”

“注册”按钮

点击注册按钮，调用handleRegister方法，在handleRegister方法中，首页校验手机号，手机号没问题再校验图片验证码，图片验证码也没问题就校验短信验证码，校验都通过后就给出提示“提交注册申请成功”。

在校验图片验证码的时候，用setIsimageCodeValid()来存储图片验证码校验的结果，并在useEffect里面监测它的变化：如果校验错误就提示用户输入正确的验证码，如果校验正确就开始发送验证码并开启倒计时。

但是这样有一个问题，就是useEffect({},[A])，它在页面初始化和A变化的时候，都会执行，也就是说，我用来检测图片验证码的来作不同的判断的内容，在最初的时候，if或者else肯定会执行一个，这样显然是不对的，那么就要想办法让它一开始进入的时候不执行。

于是我新加了一个字段firstRender，默认给它的值为true。然后在useEffect里的判断那里，外面多套一层，如果是第一次，就什么都不做。同时在点击“发送验证码”来校验图片验证码的时候，把它的值改为setFirstRender(false)。这样就做到了第一次进来的时候并不执行useEffect里面的内容。

但是这样还是会有一个问题。因为发送验证码这个动作是在校验图片验证码的正确与否之后的，在第一次点击发送验证码的时候，会校验并监测到isImageCodeValid的值，假设是对的，这时setIsimageCodeValid就会存储值为true，假设这60s用户错过了，60s之后用户又点击发送验证码，但这一次却并不能成功发送验证码，因为这一次点击依然是会走校验图片验证码那一步的，但这个时候setIsimageCodeValid的值依然是true，就等于isImageCodeValid的值没有变化，isImageCodeValid的值没有变化的话，那useEffect里面的内容就不会执行，也就没有发送验证码了。

于是，我又新加了一个字段clickStatus，让每次点击“发送验证码”的时候，它的值都发生变化，然后在useEffect里面监测它的变化，这样每一次点击“发送验证码”这个按钮，都会执行useEffect里面的内容了。所以最终，useEffect应该是这样的：

useEffect((）=>{
 if(!firstRender){
   if(!isimageCodeValid){
        //给出错误提示
    }else{
        //调用接口发送验证码
    }
  }
},[isimageCodeValid, firstRender, clickStatus])

verifyPhoneNumber，verifyImgCode，这两个校验在点击“发送验证码”和“注册”时候都会执行，另外，点击“注册”还会verfyCode 校验短信验证码。

所以整体的逻辑就是：

点击“发送验证码”按钮，先判断是否已经处在倒计时状态，如果是的话，就不做任何判断并给出提示“60s内不能重新发送验证码”。如果不是，就校验名字是否重复，名字校验没问题的话，就开始校验手机号，手机号没问题的话，就开始校验图片验证码，图片验证码也没问题的话，就会开始倒计时，此时按钮变成“重新发送 (${timer}s)”。

点击“注册”按钮，先校验手机号，手机号没问题的话，就开始校验图片验证码，图片验证码没问题的话，就校验短信验证码（在校验短信验证码的时候，校验没问题就提交注册申请），都没问题就提示“提交注册申请成功”。