Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao

front-end/mall4uni/src/pages/accountLogin/accountLogin.vue

@@ -1,172 +1,183 @@
 <template>
+  <!-- 使用view标签创建一个类名为"con"的容器元素，作为整个登录页面内容的包裹元素 -->
   <view class="con">
+    <!-- 展示一个图片元素，图片来源为项目中静态资源目录下的"logo.png"文件 -->
     <image src="@/static/logo.png" />
-    <!-- 登录 -->
+    <!-- 登录表单部分的整体容器，类名为"login-form" -->
     <view class="login-form">
+      <!-- 根据"errorTips"的值来动态添加"error"类名，用于控制账号输入框相关的错误提示显示与否，同时基础类名为"item" -->
       <view :class="['item',errorTips==1? 'error':'']">
+        <!-- 账号输入框所在的容器，类名为"account"，内部包含账号提示文本和输入框元素 -->
         <view class="account">
+          <!-- 显示"账号"提示文本，类名为"input-item" -->
           <text class="input-item">
             账号
           </text>
-          <input
+          <!-- 账号输入框，类型为文本输入框（type="text"），绑定了自定义数据属性"data-type"为"account"，
-            type="text"
+          设置了占位符样式类和具体的占位符文本，同时监听输入事件，当输入时会触发"getInputVal"方法 -->
-            data-type="account"
+          <input type="text"
-            placeholder-class="inp-palcehoder"
+                 data-type="account"
-            placeholder="请输入用户名"
+                 placeholder-class="inp-palcehoder"
-            @input="getInputVal"
+                 placeholder="请输入用户名"
-          >
+                 @input="getInputVal">
         </view>
-        <view
+        <!-- 当"errorTips"等于1时，显示这个错误提示文本元素，类名为"error-text"，包含一个警告图标和具体的提示信息 -->
-          v-if="errorTips==1"
+        <view v-if="errorTips==1"
-          class="error-text"
+              class="error-text">
-        >
           <text class="warning-icon">
             !
           </text>
           请输入账号！
         </view>
       </view>
+      <!-- 与账号输入框部分类似，根据"errorTips"的值来动态添加"error"类名，用于控制密码输入框相关的错误提示显示与否，基础类名为"item" -->
       <view :class="['item',errorTips==2? 'error':'']">
         <view class="account">
           <text class="input-item">
             密码
           </text>
-          <input
+          <input type="password"
-            type="password"
+                 data-type="password"
-            data-type="password"
+                 placeholder-class="inp-palcehoder"
-            placeholder-class="inp-palcehoder"
+                 placeholder="请输入密码"
-            placeholder="请输入密码"
+                 @input="getInputVal">
-            @input="getInputVal"
-          >
         </view>
-        <view
+        <view v-if="errorTips==2"
-          v-if="errorTips==2"
+              class="error-text">
-          class="error-text"
-        >
           <text class="warning-icon">
             !
           </text>
           请输入密码！
         </view>
       </view>
+      <!-- 操作相关元素的容器，类名为"operate"，目前里面包含了跳转到注册页面的链接 -->
       <view class="operate">
-        <view
+        <view class="to-register"
-          class="to-register"
+              @tap="toRegitser">
-          @tap="toRegitser"
-        >
           还没有账号？
           <text>去注册></text>
         </view>
       </view>
     </view>
-
+  </view>
-    <view>
+  <!-- 包含登录按钮和回到首页按钮的容器 -->
-      <button
+  <view>
-        class="authorized-btn"
+    <!-- 登录按钮，类名为"authorized-btn"，点击时会触发"login"方法 -->
-        @tap="login"
+    <button class="authorized-btn"
-      >
+            @tap="login">
-        登录
+      登录
-      </button>
+    </button>
-      <button
+    <!-- 回到首页按钮，类名为"to-idx-btn"，点击时会触发"toIndex"方法 -->
-        class="to-idx-btn"
+    <button class="to-idx-btn"
-        @tap="toIndex"
+            @tap="toIndex">
-      >
+      回到首页
-        回到首页
+    </button>
-      </button>
+  </view>
-    </view>
   </view>
 </template>
-
 <script setup>
-import { encrypt } from '@/utils/crypto.js'
+  // 从项目的"@/utils/crypto.js"文件中导入"encrypt"函数，可能用于对密码等敏感信息进行加密处理
+  import { encrypt } from '@/utils/crypto.js'
 
-/**
+  /**
- * 生命周期函数--监听页面显示
+   * 生命周期函数--监听页面显示，当页面显示时执行以下代码
- */
+   * 设置页面头部导航栏的标题为"用户登录"
-onShow(() => {
+   */
-  // 头部导航标题
+  onShow(() => {
-  uni.setNavigationBarTitle({
+    // 头部导航标题
-    title: '用户登录'
+    uni.setNavigationBarTitle({
+      title: '用户登录'
+    })
   })
-})
 
-const principal = ref('') // 账号
+  // 使用Vue的ref函数创建一个响应式数据"principal"，用于存储账号信息，初始值为空字符串
-const errorTips = ref(0) // 错误提示
+  const principal = ref('') // 账号
-watch(
+  // 使用Vue的ref函数创建一个响应式数据"errorTips"，用于控制错误提示的显示，不同的值对应不同的错误情况，初始值为0表示无错误
-  () => principal.value,
+  const errorTips = ref(0) // 错误提示
-  () => {
+  // 监听"principal"数据的变化，当它的值改变时，将"errorTips"的值重置为0，意味着输入新的账号时清除之前可能存在的账号相关错误提示
-    errorTips.value = 0
+  watch(
-  }
+    () => principal.value,
-)
+    () => {
+      errorTips.value = 0
+    }
+  )
 
-const credentials = ref('') // 密码
+  // 使用Vue的ref函数创建一个响应式数据"credentials"，用于存储密码信息，初始值为空字符串
-/**
+  const credentials = ref('') // 密码
- * 输入框的值
+
- */
+  /**
-const getInputVal = (e) => {
+   * 输入框的值发生变化时触发的方法，用于获取输入框输入的值，并根据输入框的类型（账号或密码）分别存储到对应的响应式数据中
-  const type = e.currentTarget.dataset.type
+   * @param {Object} e - 输入事件对象，包含了输入框相关的各种信息，如输入的值、绑定的数据属性等
-  if (type == 'account') {
+   */
-    principal.value = e.detail.value
+  const getInputVal = (e) => {
-  } else if (type == 'password') {
+    const type = e.currentTarget.dataset.type
-    credentials.value = e.detail.value
+    if (type == 'account') {
+      principal.value = e.detail.value
+    } else if (type == 'password') {
+      credentials.value = e.detail.value
+    }
   }
-}
 
-/**
+  /**
- * 登录
+   * 登录按钮点击时触发的方法，用于处理登录逻辑
- */
+   * 首先判断账号和密码是否为空，如果为空则设置相应的错误提示；如果都不为空，则发起登录请求，
-const login = () => {
+   * 将加密后的密码和账号信息作为请求数据发送到服务器的"/login"接口，根据服务器返回结果进行相应处理，
-  if (principal.value.length == 0) {
+   * 登录成功后显示提示信息，并在1秒后跳转到首页
-    errorTips.value = 1
+   */
-  } else if (credentials.value.length == 0) {
+  const login = () => {
-    errorTips.value = 2
+    if (principal.value.length == 0) {
-  } else {
+      errorTips.value = 1
-    errorTips.value = 0
+    } else if (credentials.value.length == 0) {
-    http.request({
+      errorTips.value = 2
-      url: '/login',
+    } else {
-      method: 'post',
+      errorTips.value = 0
-      data: {
+      http.request({
-        userName: principal.value,
+        url: '/login',
-        passWord: encrypt(credentials.value)
+        method: 'post',
-      }
+        data: {
-    })
+          userName: principal.value,
-      .then(({ data }) => {
+          passWord: encrypt(credentials.value)
-        http.loginSuccess(data, () => {
+        }
-          uni.showToast({
+      })
-            title: '登录成功',
+        .then(({ data }) => {
-            icon: 'none',
+          http.loginSuccess(data, () => {
-            complete: () => {
+            uni.showToast({
-              setTimeout(() => {
+              title: '登录成功',
-                wx.switchTab({
+              icon: 'none',
-                  url: '/pages/index/index'
+              complete: () => {
-                })
+                setTimeout(() => {
-              }, 1000)
+                  wx.switchTab({
-            }
+                    url: '/pages/index/index'
+                  })
+                }, 1000)
+              }
+            })
           })
         })
-      })
+    }
   }
-}
 
-/**
+  /**
- * 去注册
+   * 跳转到注册页面的方法，使用uni-app的导航函数，跳转到"/pages/register/register"页面
- */
+   */
-const toRegitser = () => {
+  const toRegitser = () => {
-  uni.navigateTo({
+    uni.navigateTo({
-    url: '/pages/register/register'
+      url: '/pages/register/register'
-  })
+    })
-}
+  }
 
-/**
+  /**
- * 回到首页
+   * 回到首页的方法，使用微信小程序相关的切换页面函数（这里可能是在uni-app中兼容微信小程序的写法），切换到"/pages/index/index"页面
- */
+   */
-const toIndex = () => {
+  const toIndex = () => {
-  wx.switchTab({
+    wx.switchTab({
-    url: '/pages/index/index'
+      url: '/pages/index/index'
-  })
+    })
-}
+  }
 </script>
 
 <style scoped lang="scss">
-@import "./accountLogin.scss";
+  // 导入项目中同目录下的"./accountLogin.scss"样式文件，意味着页面的样式规则大概率会从该文件中获取，
+  // "scoped"属性表示样式作用范围限定在当前组件内，避免样式冲突
+  @import "./accountLogin.scss";
 </style>