修复login模块

src/pages/login/index.compositions.js

+import {reactive, ref} from "vue"
+//表单数据
+export const loginForm = reactive({
+    username: '',
+    password: '',
+    verifyCode: ''
+})
+export const loginCode = ref('')
+//表单规则
+export const rules = reactive({
+    username: {
+        rules: [
+            {
+                required: true,
+                errorMessage: '请输入账号'
+            }
+        ]
+    },
+    password: {
+        rules: [
+            {
+                required: true,
+                errorMessage: '请输入密码'
+            }
+        ]
+    },
+    verifyCode: {
+        rules: [
+            {
+                required: true,
+                errorMessage: '请输入验证码'
+            }
+        ]
+    }
+})
\ No newline at end of file

src/pages/login/index.functionals.js

+import { loginCode, loginForm } from './index.compositions'
+import { getGifCaptchaApi } from '@/api/user'
+
+export const getGifCaptcha = async () => {
+    const params = {
+        username: loginForm.username
+    }
+    const res = await getGifCaptchaApi(params, { arraybuffer: true })
+    if (res) {
+        loginCode.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
+    }
+}
\ No newline at end of file

src/pages/login/index.scss

+page {
+    background: #fff;
+}
+.login-wrap {
+    padding: 50rpx;
+    .login-title {
+        font-weight: bold;
+        font-size: 40rpx;
+        margin-bottom: 100rpx;
+    }
+    .verify-code {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        image {
+            margin-left: 10rpx;
+            width: 200rpx;
+            height: 70rpx;
+        }
+    }
+    .login-btn {
+        margin-top: 50rpx;
+        width: 100%;
+    }
+}
\ No newline at end of file

src/pages/login/index.vue

@@ -3,72 +3,32 @@
         <view class="login-title">Mocp</view>
         <uni-forms ref="loginFormRef" :modelValue="loginForm" :rules="rules" label-position="top">
             <uni-forms-item label="账号" name="username">
-                <uni-easyinput type="text" v-model="loginForm.username" placeholder="请输入账号" />
+                <uni-easyinput v-model="loginForm.username" placeholder="请输入账号" type="text" />
             </uni-forms-item>
             <uni-forms-item label="密码" name="password">
-                <uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入密码" />
+                <uni-easyinput v-model="loginForm.password" placeholder="请输入密码" type="password" />
             </uni-forms-item>
             <uni-forms-item label="验证码" name="verifyCode">
                 <view class="verify-code">
-                    <uni-easyinput type="text" v-model="loginForm.verifyCode" placeholder="请输入验证码" />
-                    <image :src="loginCode" mode="scaleToFill" v-if="loginCode" />
+                    <uni-easyinput v-model="loginForm.verifyCode" placeholder="请输入验证码" type="text" />
+                    <image v-if="loginCode" :src="loginCode" mode="scaleToFill" />
                 </view>
             </uni-forms-item>
         </uni-forms>
-        <button type="primary" size="mini" @tap="handleLogin" class="login-btn">登录</button>
+        <button class="login-btn" size="mini" type="primary" @tap="handleLogin">登录</button>
     </view>
 </template>
 
 <script setup>
-import { reactive, ref, toRaw, watch } from 'vue'
-import { getGifCaptchaApi, loginApi } from '@/api/user'
+import { ref, toRaw, watch } from 'vue'
+import { loginApi } from '@/api/user'
 import { debounce } from 'lodash'
 import message from '@/utils/message'
 
-//表单数据
-const loginForm = reactive({
-    username: '',
-    password: '',
-    verifyCode: ''
-})
-//表单规则
-const rules = reactive({
-    username: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入账号'
-            }
-        ]
-    },
-    password: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入密码'
-            }
-        ]
-    },
-    verifyCode: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入验证码'
-            }
-        ]
-    }
-})
+import { loginCode, loginForm, rules } from './index.compositions'
 //获取验证码
-const loginCode = ref('')
-const getGifCaptcha = async () => {
-    const params = {
-        username: loginForm.username
-    }
-    const res = await getGifCaptchaApi(params, { arraybuffer: true })
-    if (res) {
-        loginCode.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
-    }
-}
+import { getGifCaptcha } from './index.functionals'
+
 watch(
     () => loginForm.username,
     debounce((value) => {
@@ -92,29 +52,5 @@ const handleLogin = async () => {
 </script>
 
 <style lang="scss">
-page {
-    background: #fff;
-}
-.login-wrap {
-    padding: 50rpx;
-    .login-title {
-        font-weight: bold;
-        font-size: 40rpx;
-        margin-bottom: 100rpx;
-    }
-    .verify-code {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        image {
-            margin-left: 10rpx;
-            width: 200rpx;
-            height: 70rpx;
-        }
-    }
-    .login-btn {
-        margin-top: 50rpx;
-        width: 100%;
-    }
-}
+@import "index.scss";
 </style>