登录模块 ​

<script lang="ts" setup>

+ //  1. 定义props类型
+ interface Props {
+   title?: string
+   rightText?: string
+ }

+ // 2. 定义props
+ defineProps<Props>()

+ // 4. 定义Emits:
+ interface Emits {
+   (e: 'click-right'): void
+ }

+ const emit = defineEmits<Emits>()
</script>

<template>


  <van-nav-bar
-   title="标题"
-   right-text="右侧文字"

+  // 3. 动态绑定props
+   :title="title"
+   :right-text="rightText"

+  // 5. 绑定click-right事件
+   @click-right="emit('click-right')"

	left-arrow
	placeholder
	fixed
  />
</template>

// ... 省略其它代码

<script lang="ts" setup>
+ // ...省略其它代码
interface Props {
  title?: string
  rightText?: string
+ // 1. props中定义一个onBack函数
  onBack?: () => void
}


+  const router = useRouter()

+ // 2. 封装默认行为
+ const clickLeft = () => {
+  if (props.onBack) return props.onBack()
+   router.back()
+ }
</script>

<template>
  <!-- 3. 绑定默认行为 -->
  <van-nav-bar
    :title="title"
    left-arrow
    :right-text="rightText"
    @click-right="emits('click-right')"
+   @click-left="clickLeft"
  />
</template>

<script setup lang="ts">
+ interface Props {
+   options: {
+     label: string
+     value: string | number
+   }[]
+ }

+ defineProps<Props>()
</script>

<template>
  <div class="cp-radio-btn">
+    <a class="item" href="javascript:;" v-for="item in options" :key="item.value">
+      {{ item.label }}
+    </a>
  </div>
</template>

import CpNavBar from '@/components/CpNavBar.vue'
+import CpRadioBtn from '@/components/CpRadioBtn.vue'

declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar
+   CpRadioBtn: typeof CpRadioBtn
  }
}

<script setup lang="ts">

export interface Props {
  options: { label: string; value: string | number }[]
  // 1.  定义props，`modelValue`
  // 💥💥 注意定义为可选属性
+ modelValue?: string | number
}
defineProps<Props>()

// 2. 定义emits，`update:ModelValue`事件
+ interface Emits {
+   (name: 'update:modelValue', value: string | number): void
+ }
+ const emit = defineEmits<Emits>()

</script>

<template>
  <div class="cp-radio-btn">
    <a
      v-for="item in options"
      :key="item.value"
      class="item"
      href="javascript:;"
      // 3. 动态class控制选中效果
+      :class="{ active: item.value === modelValue }"
			// 4. 点击触发自定义事件
+      @click="emit('update:modelValue', item.value)"
    >
      {{ item.label }}
    </a>
  </div>
</template>

+ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+ import path from 'path'


export default defineConfig({
  plugins: [

+    // 省略其它代码
+    createSvgIconsPlugin({
+      // 指定图标文件夹，绝对路径（NODE代码）
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
+    })
  ],

import router from './router'
+import 'virtual:svg-icons-register'

import 'vant/lib/index.css'

+import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar
    CpRadioBtn: typeof CpRadioBtn
+    CpIcon: typeof CpIcon
  }
}

<van-field
    placeholder="请输入手机号"
    type="tel"
+    v-model="mobile"
  />
  <van-field
    placeholder="请输入密码"
    type="password"
+     v-model="password"
  />

<van-field
    placeholder="请输入手机号"
    type="tel"
+    :rules="mobileRules"
  />
  <van-field
    placeholder="请输入密码"
    type="password"
+    :rules="passwordRules"
  />

+ import persist from 'pinia-plugin-persistedstate'

const app = createApp(App)

+ const pinia = createPinia()
// 使用pinia插件
+ pinia.use(persist)

app.use(pinia)
// ...省略其它代码

export const useUserStore = defineStore(
  'cp-user',
  () => {

+   // ...省略其它代码

  },
+  {
+    persist: true
+  }
)

import { createApp } from 'vue'
import App from './App.vue'
- import persist from 'pinia-plugin-persistedstate'
+ import pinia from './stores'

const app = createApp(App)

- const pinia = createPinia()
- pinia.use(persist)

app.use(pinia)

-import { useUserStore } from './stores/user'
+import { useUserStore } from './stores'

<div class="login-head">
-  <h3>密码登录</h3>
+  <h3>{{ isPass ? '密码登录' : '短信验证码登录' }}</h3>

-  <a href="javascript:;">
+  <a href="javascript:;" @click="isPass = !isPass">

-	 <span>短信验证码登录</span>
+    <span>{{ isPass ? '短信验证码登录' : '密码登录' }}</span>
    <van-icon name="arrow" />
    </a>
</div>

<van-field
+        v-show="isPass"
        v-model="password"
        :rules="passwordRules"
        placeholder="请输入密码"
        :type="show ? 'text' : 'password'"
      >
        <template #button>
          <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`" />
        </template>
    </van-field>
+      <van-field
+        v-show
+        placeholder="短线验证码"
+      />

<van-field
        v-else
        placeholder="请输入验证码"
+       v-model="code"
        type="digit"
+        :rules="[
+          { required: true, message: '请输入验证码' },
+          { pattern: /^\d{6}$/, message: '验证码6个数字' }
+        ]"
      >
+        <template #button>
+          <span class="btn-send">发送验证码</span>
+        </template>
      </van-field>

const sendCode = async () => {
+  // 2. 调用API
+  const { data } = await sendCodeAPI(mobile.value)
+  showSuccessToast('发送成功')
+  // 3. 保存验证码，真实情况在手机端接收验证码
+  code.value = data.code

  second.value = 60
  timerId = window.setInterval(() => {
    second.value--
    if (second.value === 0) window.clearInterval(timerId)
  }, 1000)
}

// 表单提交
const onLogin = async () => {
  if (!agree.value) return showToast('请勾选我已同意')
-	 const res = await loginAPI(mobile.value, password.value)
+  const res = isPass.value
+    ? await loginAPI(mobile.value, password.value)
+    : await loginByCodeAPI(mobile.value, code.value)
  store.saveUser(res.data)
  showSuccessToast('登陆成功')
  router.push('/')
}