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

front-end/mall4uni/src/pages/register/register.scss

@@ -1,124 +1,146 @@
+/* 容器样式 */
 .con {
-  background: #fff;
-  height: 100%;
-  margin-top: 50px;
+  background: #fff; /* 设置容器的背景颜色为白色 */
+  height: 100%; /* 容器的高度占满父元素的100% */
+  margin-top: 50px; /* 容器与页面顶部的距离为50像素 */
 }
+
+/* 图像样式 */
 image {
-  display: block;
-  width: 150rpx;
-  height: 150rpx;
-  margin: auto;
-  border-radius: 50%;
-  width: 150rpx;
-  height: 150rpx;
-  margin-bottom: 8%;
+  display: block; /* 确保图像作为块级元素显示，避免与其他元素在同一行 */
+  width: 150rpx; /* 图像宽度为150响应式像素 */
+  height: 150rpx; /* 图像高度为150响应式像素 */
+  margin: auto; /* 使图像水平居中 */
+  border-radius: 50%; /* 将图像设置为圆形（50%创建一个圆形） */
+  width: 150rpx; /* 重复定义图像宽度为150响应式像素 */
+  height: 150rpx; /* 重复定义图像高度为150响应式像素 */
+  margin-bottom: 8%; /* 图像底部外边距为父元素高度的8% */
 }
+
+/* 登录表单样式 */
 .login-form {
-  width: 90%;
-  margin: 0 auto;
-  margin-bottom: 20%;
+  width: 90%; /* 表单宽度为父元素宽度的90% */
+  margin: 0 auto; /* 表单左右外边距自动，实现水平居中 */
+  margin-bottom: 20%; /* 表单底部外边距为父元素高度的20%，确保与下方内容有足够的间距 */
 }
+
+/* 授权按钮样式 */
 .authorized-btn {
-  width: 90%;
-  margin: 0 auto;
-  text-align: center;
-  background-color: #0ab906;
-  border: 1rpx solid #0ab906;
-  color: #fff;
-  border-radius: 6rpx;
-  font-size: 26rpx;
-  padding: 8rpx;
-  margin-top: 80rpx;
-  border: 1rpx solid #0ab906;
-  border-radius: 6rpx;
-  font-size: 26rpx;
-  padding: 8rpx;
-  margin-top: 80rpx;
+  width: 90%; /* 按钮宽度为父元素宽度的90% */
+  margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
+  text-align: center; /* 按钮内的文本居中对齐 */
+  background-color: #0ab906; /* 按钮背景颜色设置为绿色 */
+  border: 1rpx solid #0ab906; /* 按钮边框为1响应式像素宽，颜色为绿色 */
+  color: #fff; /* 按钮文字颜色设置为白色 */
+  border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
+  font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
+  padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
+  margin-top: 80rpx; /* 按钮顶部外边距为80响应式像素 */
+  border: 1rpx solid #0ab906; /* 重复定义按钮边框为1响应式像素宽，颜色为绿色 */
+  border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
+  font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
+  padding: 8rpx; /* 重复定义按钮内边距 */
+  margin-top: 80rpx; /* 重复定义按钮顶部外边距 */
 }
+
+/* 返回首页按钮样式 */
 .to-idx-btn {
-  width: 90%;
-  margin: 0 auto;
-  text-align: center;
-  background-color: #eeeeee;
-  color: #333;
-  border-radius: 6rpx;
-  font-size: 26rpx;
-  padding: 8rpx;
-  margin-top: 30rpx;
-  border-radius: 6rpx;
-  font-size: 26rpx;
-  padding: 8rpx;
-  margin-top: 30rpx;
+  width: 90%; /* 按钮宽度为父元素宽度的90% */
+  margin: 0 auto; /* 按钮左右外边距自动，实现水平居中 */
+  text-align: center; /* 按钮内的文本居中对齐 */
+  background-color: #eeeeee; /* 按钮背景颜色设置为浅灰色 */
+  color: #333; /* 按钮文字颜色设置为深灰色 */
+  border-radius: 6rpx; /* 按钮边角圆滑度，半径为6响应式像素 */
+  font-size: 26rpx; /* 按钮文字大小设置为26响应式像素 */
+  padding: 8rpx; /* 按钮内边距，即文字与按钮边缘之间的距离 */
+  margin-top: 30rpx; /* 按钮顶部外边距为30响应式像素 */
+  border-radius: 6rpx; /* 重复定义按钮边角圆滑度，半径为6响应式像素 */
+  font-size: 26rpx; /* 重复定义按钮文字大小为26响应式像素 */
+  padding: 8rpx; /* 重复定义按钮内边距 */
+  margin-top: 30rpx; /* 重复定义按钮顶部外边距 */
 }
+
+/* 表单标题样式 */
 .form-title {
-  width: 100%;
-  margin-bottom: 50rpx;
-  font-size: 32rpx;
-  text-align: center;
-  color: #00a0e9;
-  margin-bottom: 50rpx;
-  font-size: 32rpx;
+  width: 100%; /* 标题宽度为100%，即占满整个父元素的宽度 */
+  margin-bottom: 50rpx; /* 标题底部外边距为50响应式像素 */
+  font-size: 32rpx; /* 标题字体大小设置为32响应式像素 */
+  text-align: center; /* 标题文本居中对齐 */
+  color: #00a0e9; /* 标题文字颜色设置为蓝色 */
+  margin-bottom: 50rpx; /* 重复定义标题底部外边距为50响应式像素 */
+  font-size: 32rpx; /* 重复定义标题字体大小为32响应式像素 */
 }
+
+/* 表单项样式 */
 .item {
-  display: block;
-  margin-bottom: 30rpx;
-  margin-bottom: 30rpx;
+  display: block; /* 确保每个表单项作为一个单独的块级元素显示 */
+  margin-bottom: 30rpx; /* 每个表单项底部外边距为30响应式像素 */
+  margin-bottom: 30rpx; /* 重复定义每个表单项底部外边距为30响应式像素 */
 }
+
+/* 账号输入框样式 */
 .account {
-  display: flex;
-  background: #f8f8f8;
-  padding: 15rpx;
-  box-sizing: border-box;
-  font-size: 26rpx;
-  align-items: center;
+  display: flex; /* 使用弹性布局来排列子元素 */
+  background: #f8f8f8; /* 输入框背景颜色设置为浅灰色 */
+  padding: 15rpx; /* 输入框内边距为15响应式像素 */
+  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
+  font-size: 26rpx; /* 输入框内的字体大小设置为26响应式像素 */
+  align-items: center; /* 子元素垂直居中对齐 */
+
   input {
-    padding-left: 20rpx;
-    width: 75%;
-    padding-left: 20rpx;
+    padding-left: 20rpx; /* 输入框内部左侧留出20响应式像素的空间 */
+    width: 75%; /* 输入框宽度为父元素宽度的75% */
+    padding-left: 20rpx; /* 重复定义输入框内部左侧留出20响应式像素的空间 */
   }
 }
-button {
-  &::after {
-    border: 0 !important;
-  }
+
+/* 移除按钮默认边框 */
+button::after {
+  border: 0 !important; /* 移除按钮点击时出现的默认边框，使用!important确保覆盖其他样式 */
 }
+
+/* 操作区域样式 */
 .operate {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: flex; /* 使用弹性布局来排列子元素 */
+  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
+  align-items: center; /* 子元素垂直居中对齐 */
 }
 
+/* 注册链接样式 */
 .to-register {
-  font-size: 28rpx;
-  color: #00AAFF;
-  font-size: 28rpx;
+  font-size: 28rpx; /* 链接字体大小设置为28响应式像素 */
+  color: #00AAFF; /* 链接文字颜色设置为蓝色 */
+  font-size: 28rpx; /* 重复定义链接字体大小为28响应式像素 */
 }
+
+/* 错误提示样式 */
 .error {
   .error-text {
-    display: block;
-    width: 100%;
-    font-size: 28rpx;
-    color: #e43130;
-    text-align: left;
-    margin-top: 10rpx;
-    font-size: 28rpx;
-    margin-top: 10rpx;
+    display: block; /* 错误信息作为块级元素显示 */
+    width: 100%; /* 错误信息宽度为100%，即占满整个父元素的宽度 */
+    font-size: 28rpx; /* 错误信息字体大小设置为28响应式像素 */
+    color: #e43130; /* 错误信息文字颜色设置为红色 */
+    text-align: left; /* 错误信息文本左对齐 */
+    margin-top: 10rpx; /* 错误信息顶部外边距为10响应式像素 */
+    font-size: 28rpx; /* 重复定义错误信息字体大小为28响应式像素 */
+    margin-top: 10rpx; /* 重复定义错误信息顶部外边距 */
+
     .warning-icon {
-      display: inline-block;
-      color: #fff;
-      width: 26rpx;
-      height: 26rpx;
-      line-height: 26rpx;
-      background: #e43130;
-      border-radius: 50%;
-      text-align: center;
-      margin-right: 12rpx;
-      font-size: 22rpx;
-      width: 26rpx;
-      height: 26rpx;
-      line-height: 26rpx;
-      margin-right: 12rpx;
-      font-size: 22rpx;
+      display: inline-block; /* 警告图标作为行内块级元素显示 */
+      color: #fff; /* 警告图标文字颜色设置为白色 */
+      width: 26rpx; /* 警告图标宽度为26响应式像素 */
+      height: 26rpx; /* 警告图标高度为26响应式像素 */
+      line-height: 26rpx; /* 警告图标行高设置为26响应式像素，以确保文字垂直居中 */
+      background: #e43130; /* 警告图标背景颜色设置为红色 */
+      border-radius: 50%; /* 警告图标边角设置为圆形 */
+      text-align: center; /* 警告图标文字居中对齐 */
+      margin-right: 12rpx; /* 警告图标右侧留出12响应式像素的空间 */
+      font-size: 22rpx; /* 警告图标内的字体大小设置为22响应式像素 */
+      width: 26rpx; /* 重复定义警告图标宽度为26响应式像素 */
+      height: 26rpx; /* 重复定义警告图标高度为26响应式像素 */
+      line-height: 26rpx; /* 重复定义警告图标行高 */
+      margin-right: 12rpx; /* 重复定义警告图标右侧留出12响应式像素的空间 */
+      font-size: 22rpx; /* 重复定义警告图标内的字体大小 */
     }
   }
 }

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

@@ -1,77 +1,68 @@
 <template>
   <view class="register">
+    <!-- 注册页面的主容器 -->
     <view class="con">
+      <!-- 显示应用logo -->
       <image src="@/static/logo.png" />
-      <!-- 登录 -->
+
+      <!-- 登录表单 -->
       <view class="login-form">
-        <view :class="['item',errorTips==1? 'error':'']">
+        <!-- 账号输入项 -->
+        <view :class="['item', errorTips == 1 ? 'error' : '']">
+          <!-- 根据错误提示状态动态添加错误类 -->
           <view class="account">
-            <text class="input-item">
-              账号
-            </text>
-            <input
-              type="text"
+            <text class="input-item">账号</text> <!-- 输入项标签 -->
+            <input type="text"
                    data-type="account"
                    placeholder-class="inp-palcehoder"
                    placeholder="请输入账号名称"
-              @input="getInputVal"
-            >
+                   @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
+            />
           </view>
-          <view
-            v-if="errorTips==1"
-            class="error-text"
-          >
-            <text class="warning-icon">
-              !
-            </text>
+          <!-- 错误提示信息，仅当 errorTips 为 1 时显示 -->
+          <view v-if="errorTips == 1" class="error-text">
+            <text class="warning-icon">!</text> <!-- 警告图标 -->
             请输入账号！
           </view>
         </view>
-        <view :class="['item',errorTips==2? 'error':'']">
+
+        <!-- 密码输入项 -->
+        <view :class="['item', errorTips == 2 ? 'error' : '']">
+          <!-- 根据错误提示状态动态添加错误类 -->
           <view class="account">
-            <text class="input-item">
-              密码
-            </text>
-            <input
-              type="password"
+            <text class="input-item">密码</text> <!-- 输入项标签 -->
+            <input type="password"
                    data-type="password"
                    placeholder-class="inp-palcehoder"
                    placeholder="请输入密码"
-              @input="getInputVal"
-            >
+                   @input="getInputVal" <!-- 监听输入事件，获取用户输入的值 -->
+            />
           </view>
-          <view
-            v-if="errorTips==2"
-            class="error-text"
-          >
-            <text class="warning-icon">
-              !
-            </text>
+          <!-- 错误提示信息，仅当 errorTips 为 2 时显示 -->
+          <view v-if="errorTips == 2" class="error-text">
+            <text class="warning-icon">!</text> <!-- 警告图标 -->
             请输入密码！
           </view>
         </view>
+
+        <!-- 操作区域 -->
         <view class="operate">
-          <view
-            class="to-register"
-            @tap="toLogin"
-          >
+          <!-- 去登录链接 -->
+          <view class="to-register" @tap="toLogin">
             已有账号？
             <text>去登录></text>
           </view>
         </view>
       </view>
 
+      <!-- 按钮区域 -->
       <view>
-        <button
-          class="authorized-btn"
-          @tap="toRegister"
-        >
+        <!-- 注册按钮 -->
+        <button class="authorized-btn" @tap="toRegister">
           注册
         </button>
-        <button
-          class="to-idx-btn"
-          @tap="toIndex"
-        >
+        <!-- 返回首页按钮 -->
+        <button class="to-idx-btn" @tap="toIndex">
           回到首页
         </button>
       </view>
@@ -80,87 +71,114 @@
 </template>
 
 <script setup>
-import { encrypt } from '@/utils/crypto.js'
+  import { encrypt } from '@/utils/crypto.js'; // 导入加密工具函数
 
-/**
+  /**
    * 生命周期函数--监听页面显示
    */
-onShow(() => {
-  // 头部导航标题
+  onShow(() => {
+    // 设置页面头部导航标题
     uni.setNavigationBarTitle({
       title: '用户注册'
-  })
-})
+    });
+  });
+
+  // 定义响应式变量，用于存储用户输入的账号和密码
+  const principal = ref(''); // 账号
+  const credentials = ref(''); // 密码
 
-const principal = ref('') // 账号
-const credentials = ref('') // 密码
-/**
- * 输入框的值
+  // 定义响应式变量，用于控制错误提示的状态
+  const errorTips = ref(0); // 0: 无错误, 1: 账号输入错误, 2: 密码输入错误
+
+  /**
+   * 获取输入框的值
+   * @param e - 触发事件对象
    */
-const getInputVal = (e) => {
-  const type = e.currentTarget.dataset.type
-  if (type == 'account') {
-    principal.value = e.detail.value
-  } else if (type == 'password') {
-    credentials.value = e.detail.value
+  const getInputVal = (e) => {
+    const type = e.currentTarget.dataset.type; // 获取输入框类型（账号或密码）
+    if (type === 'account') {
+      principal.value = e.detail.value; // 更新账号值
+    } else if (type === 'password') {
+      credentials.value = e.detail.value; // 更新密码值
     }
-}
+  };
 
-const errorTips = ref(0) // 输入错误提示:  1账号输入  2密码输入
-/**
- * 注册
+  /**
+   * 注册功能
    */
-const toRegister = () => {
-  if (principal.value.length == 0) {
-    errorTips.value = 1
-  } else if (credentials.value.length == 0) {
-    errorTips.value = 2
-  } else {
-    errorTips.value = 0
-
-    uni.showLoading()
+  const toRegister = () => {
+    // 验证账号是否为空
+    if (principal.value.length === 0) {
+      errorTips.value = 1; // 设置错误提示为账号输入错误
+    }
+    // 验证密码是否为空
+    else if (credentials.value.length === 0) {
+      errorTips.value = 2; // 设置错误提示为密码输入错误
+    }
+    else {
+      errorTips.value = 0; // 清除错误提示
+
+      // 显示加载中提示
+      uni.showLoading();
+
+      // 发送注册请求
       http.request({
         url: '/user/register',
         method: 'post',
         data: {
-        userName: principal.value,
-        passWord: encrypt(credentials.value)
+          userName: principal.value, // 用户名
+          passWord: encrypt(credentials.value) // 加密后的密码
         }
       })
         .then(() => {
-        uni.hideLoading()
+          // 关闭加载中提示
+          uni.hideLoading();
+
+          // 显示注册成功提示
           uni.showToast({
             title: '注册成功，请登录',
             icon: 'none',
             duration: 1500
-        })
+          });
+
+          // 1.8秒后跳转到登录页面
           setTimeout(() => {
             uni.navigateTo({
               url: '/pages/accountLogin/accountLogin'
+            });
+          }, 1800);
         })
-        }, 1800)
-      })
+        .catch((error) => {
+          console.error('注册失败:', error); // 处理注册失败的情况
+          uni.hideLoading(); // 关闭加载中提示
+          uni.showToast({
+            title: '注册失败，请稍后再试',
+            icon: 'none',
+            duration: 1500
+          });
+        });
     }
-}
-/**
- * 去登陆
+  };
+
+  /**
+   * 跳转到登录页面
    */
-const toLogin = () => {
+  const toLogin = () => {
     uni.navigateTo({
       url: '/pages/accountLogin/accountLogin'
-  })
-}
+    });
+  };
 
-/**
+  /**
    * 回到首页
    */
-const toIndex = () => {
+  const toIndex = () => {
     uni.switchTab({
       url: '/pages/index/index'
-  })
-}
+    });
+  };
 </script>
 
 <style lang="scss" scoped>
-@import "./register.scss";
+  @import "./register.scss"; /* 引入外部样式文件 */
 </style>

front-end/mall4uni/src/pages/search-page/search-page.scss

@@ -1,119 +1,139 @@
+/* 搜索栏样式 */
 .search-bar {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  color: #777;
-  background: #fff;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
-  z-index: 3;
+  width: 100%; /* 搜索栏宽度占满整个父元素 */
+  position: fixed; /* 固定定位，使搜索栏始终位于页面顶部 */
+  top: 0; /* 距离页面顶部0像素 */
+  left: 0; /* 距离页面左侧0像素 */
+  color: #777; /* 搜索栏内文本颜色为浅灰色 */
+  background: #fff; /* 搜索栏背景颜色为白色 */
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07); /* 添加轻微的阴影效果，增强立体感 */
+  z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
+
   .search-box {
-    position: relative;
-    height: 60rpx;
-    background: #f7f7f7;
-    z-index: 999;
-    width: 80%;
-    margin-left: 70rpx;
-    border-radius: 50rpx;
-    margin: 20rpx 0 20rpx 20rpx;
+    position: relative; /* 相对定位，用于内部元素的绝对定位 */
+    height: 60rpx; /* 搜索框高度为60响应式像素 */
+    background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
+    z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他元素之上 */
+    width: 80%; /* 搜索框宽度为父元素宽度的80% */
+    margin-left: 70rpx; /* 搜索框左侧外边距为70响应式像素 */
+    border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+    margin: 20rpx 0 20rpx 20rpx; /* 上下外边距为20响应式像素，右侧外边距为0，左侧外边距为20响应式像素 */
+
     .search-img {
-      width: 32rpx;
-      height: 32rpx;
-      position: absolute;
-      left: 20rpx;
-      top: 14rpx;
-      display: block;
+      width: 32rpx; /* 搜索图标宽度为32响应式像素 */
+      height: 32rpx; /* 搜索图标高度为32响应式像素 */
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+      left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
+      top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
+      display: block; /* 确保图标作为块级元素显示 */
     }
   }
+
   .search-hint {
-    font-size: 28rpx;
-    position: absolute;
-    right: 30rpx;
-    top: 31rpx;
-    color: #eb2444;
+    font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
+    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+    right: 30rpx; /* 提示文本距离右侧30响应式像素 */
+    top: 31rpx; /* 提示文本距离顶部31响应式像素 */
+    color: #eb2444; /* 提示文本颜色为红色 */
   }
 }
+
+/* 搜索输入框样式 */
 .sear-input {
-  height: 60rpx;
-  border-radius: 50rpx;
-  border: 0;
-  margin: 0 30rpx 0 64rpx;
-  line-height: 48rpx;
-  vertical-align: top;
-  background: #f7f7f7;
-  font-size: 28rpx;
+  height: 60rpx; /* 输入框高度为60响应式像素 */
+  border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+  border: 0; /* 移除默认边框 */
+  margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
+  line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
+  vertical-align: top; /* 垂直对齐方式为顶部 */
+  background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
+  font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
 }
+
+/* 搜索结果显示区域样式 */
 .search-display {
-  background: #fff;
-  padding: 20rpx;
-  margin-top: 100rpx;
+  background: #fff; /* 背景颜色为白色 */
+  padding: 20rpx; /* 内边距为20响应式像素 */
+  margin-top: 100rpx; /* 顶部外边距为100响应式像素，确保与搜索栏有足够的间距 */
+
   .title-text {
-    padding: 30rpx 0;
-    font-size: 30rpx;
-    color: #666;
+    padding: 30rpx 0; /* 上下内边距为30响应式像素 */
+    font-size: 30rpx; /* 标题文本字体大小为30响应式像素 */
+    color: #666; /* 标题文本颜色为深灰色 */
   }
 }
+
+/* 热门搜索样式 */
 .hot-search {
   .hot-search-tags {
-    overflow: hidden;
-    font-size: 26rpx;
-    text-align: center;
-    padding-bottom: 30rpx;
+    overflow: hidden; /* 隐藏超出容器的内容 */
+    font-size: 26rpx; /* 标签字体大小为26响应式像素 */
+    text-align: center; /* 标签文本居中对齐 */
+    padding-bottom: 30rpx; /* 底部内边距为30响应式像素 */
+
     .tags {
-      display: block;
-      max-width: 100%;
-      overflow: hidden;
-      float: left;
-      border-radius: 50rpx;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      background-color: #f2f2f2;
-      box-sizing: border-box;
-      margin-right: 20rpx;
-      margin-bottom: 20rpx;
-      padding: 10rpx 30rpx;
+      display: block; /* 标签作为块级元素显示 */
+      max-width: 100%; /* 标签最大宽度为100% */
+      overflow: hidden; /* 隐藏超出标签的内容 */
+      float: left; /* 标签左浮动，实现水平排列 */
+      border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+      white-space: nowrap; /* 防止文本换行 */
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+      background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
+      box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
+      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
+      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
+      padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
     }
   }
 }
+
+/* 历史搜索样式 */
 .history-search {
   .title-text.history-line {
-    position: relative;
-    border-top: 2rpx solid #e1e1e1;
+    position: relative; /* 相对定位，用于内部元素的绝对定位 */
+    border-top: 2rpx solid #e1e1e1; /* 顶部边框为2响应式像素宽，颜色为浅灰色 */
   }
+
   .his-search-tags {
-    overflow: hidden;
-    font-size: 26rpx;
-    text-align: center;
-    display: inline-block;
+    overflow: hidden; /* 隐藏超出容器的内容 */
+    font-size: 26rpx; /* 标签字体大小为26响应式像素 */
+    text-align: center; /* 标签文本居中对齐 */
+    display: inline-block; /* 作为行内块级元素显示 */
+
     .tags {
-      max-width: 300rpx;
-      overflow: hidden;
-      float: left;
-      border-radius: 50rpx;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      background-color: #f2f2f2;
-      box-sizing: border-box;
-      margin-right: 20rpx;
-      margin-bottom: 20rpx;
-      padding: 10rpx 30rpx;
+      max-width: 300rpx; /* 标签最大宽度为300响应式像素 */
+      overflow: hidden; /* 隐藏超出标签的内容 */
+      float: left; /* 标签左浮动，实现水平排列 */
+      border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+      white-space: nowrap; /* 防止文本换行 */
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+      background-color: #f2f2f2; /* 标签背景颜色为浅灰色 */
+      box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
+      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
+      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
+      padding: 10rpx 30rpx; /* 内边距为10和30响应式像素 */
     }
   }
 }
+
+/* 清除历史记录按钮样式 */
 .clear-history {
   image {
-    width: 32rpx;
-    height: 32rpx;
-    position: absolute;
-    right: 10rpx;
-    top: 30rpx;
+    width: 32rpx; /* 图标宽度为32响应式像素 */
+    height: 32rpx; /* 图标高度为32响应式像素 */
+    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+    right: 10rpx; /* 图标距离右侧10响应式像素 */
+    top: 30rpx; /* 图标距离顶部30响应式像素 */
   }
 }
+
+/* 搜索结果为空时的提示样式 */
 .search-tit-empty {
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  width: 100%;
-  font-size: 24rpx;
-  color: #aaa;
+  display: block; /* 作为块级元素显示 */
+  margin: 0 auto; /* 水平居中 */
+  text-align: center; /* 文本居中对齐 */
+  width: 100%; /* 宽度为100%，即占满整个父元素 */
+  font-size: 24rpx; /* 提示文本字体大小为24响应式像素 */
+  color: #aaa; /* 提示文本颜色为浅灰色 */
 }

front-end/mall4uni/src/pages/search-page/search-page.vue

@@ -2,84 +2,86 @@
   <view class="container">
     <!-- 搜索框 -->
     <view class="search-bar">
+      <!-- 搜索输入框 -->
       <view class="search-box">
-        <input
-          placeholder="输入关键字搜索"
-          class="sear-input"
-          confirm-type="search"
-          :value="prodName"
-          @confirm="toSearchProdPage"
-          @input="getSearchContent"
-        >
-        <image
-          src="@/static/images/icon/search.png"
-          class="search-img"
+        <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
+        class="sear-input" <!-- 应用样式类 sear-input -->
+        confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
+        :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
+        @confirm="toSearchProdPage" <!-- 监听用户按下确认键时触发搜索 -->
+        @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
+        />
+        <!-- 搜索图标 -->
+        <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
+          class="search-img" <!-- 应用样式类 search-img -->
         />
       </view>
-      <text
-        class="search-hint"
-        @tap="goBackIndex"
+      <!-- 取消按钮 -->
+      <text class="search-hint" <!-- 应用样式类 search-hint -->
+        @tap="goBackIndex" <!-- 点击取消按钮返回首页 -->
       >
         取消
       </text>
     </view>
 
+    <!-- 搜索结果显示区域 -->
     <view class="search-display">
       <!-- 热门搜索 -->
       <view class="hot-search">
         <view class="title-text">
+          <!-- 热门搜索标题 -->
           热门搜索
         </view>
-        <view
-          v-if="hotSearchList && hotSearchList.length"
+        <!-- 如果有热门搜索数据，则显示标签 -->
+        <view v-if="hotSearchList && hotSearchList.length" <!-- 条件渲染，只有当 hotSearchList 存在且非空时显示 -->
           class="hot-search-tags"
         >
           <block
-            v-for="(item, index) in hotSearchList"
-            :key="index"
+            v-for="(item, index) in hotSearchList" <!-- 遍历热门搜索列表 -->
+            :key="index" <!-- 使用索引作为唯一标识 -->
           >
             <text
-              class="tags"
-              :data-name="item.content"
-              @tap="onHistSearch"
+              class="tags" <!-- 应用样式类 tags -->
+              :data-name="item.content" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
+              @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
             >
-              {{ item.title }}
+              {{ item.title }} <!-- 显示标签文本 -->
             </text>
           </block>
         </view>
-        <view
-          v-else
-          class="search-tit-empty"
-        >
+        <!-- 如果没有热门搜索数据，显示暂无数据提示 -->
+        <view v-else
+              class="search-tit-empty">
           暂无数据
         </view>
       </view>
 
       <!-- 搜索历史 -->
-      <view
-        v-if="recentSearch && recentSearch.length"
+      <view v-if="recentSearch && recentSearch.length" <!-- 条件渲染，只有当 recentSearch 存在且非空时显示 -->
         class="history-search"
       >
-        <view class="title-text history-line">
+        <view class="title-text history-line"> <!-- 搜索历史标题 -->
           搜索历史
+          <!-- 清除历史记录按钮 -->
           <view class="clear-history">
             <image
-              src="@/static/images/icon/clear-his.png"
-              @tap="clearSearch"
+              src="@/static/images/icon/clear-his.png" <!-- 清除图标图片路径 -->
+              @tap="clearSearch" <!-- 点击清除图标时清空历史记录 -->
             />
           </view>
         </view>
+        <!-- 遍历最近搜索历史并显示 -->
         <block
-          v-for="(item, index) in recentSearch"
-          :key="index"
+          v-for="(item, index) in recentSearch" <!-- 遍历最近搜索历史列表 -->
+          :key="index" <!-- 使用索引作为唯一标识 -->
         >
           <view class="his-search-tags">
             <text
-              class="tags"
-              :data-name="item"
-              @tap="onHistSearch"
+              class="tags" <!-- 应用样式类 tags -->
+              :data-name="item" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
+              @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
             >
-              {{ item }}
+              {{ item }} <!-- 显示历史记录文本 -->
             </text>
           </view>
         </block>
@@ -89,95 +91,114 @@
 </template>
 
 <script setup>
-const hotSearchList = ref([])
-/**
+  import { ref } from 'vue'; // 导入 Vue 的 ref 函数，用于创建响应式变量
+
+  // 定义响应式变量，用于存储热门搜索列表
+  const hotSearchList = ref([]);
+
+  /**
    * 生命周期函数--监听页面显示
    */
-onShow(() => {
+  onShow(() => {
+    // 发送请求获取热门搜索数据
     http.request({
-    url: '/search/hotSearchByShopId',
-    method: 'GET',
+      url: '/search/hotSearchByShopId', // API 请求地址
+      method: 'GET', // 请求方法为 GET
       data: {
-      number: 10,
-      shopId: 1,
-      sort: 1
+        number: 10, // 获取前10个热门搜索
+        shopId: 1, // 商店ID
+        sort: 1 // 排序方式
       }
     })
       .then(({ data }) => {
-      hotSearchList.value = data
-    })
-  // 获取历史搜索
-  getRecentSearch()
-})
+        hotSearchList.value = data; // 将获取到的数据赋值给 hotSearchList
+      });
+
+    // 获取历史搜索记录
+    getRecentSearch();
+  });
 
-const prodName = ref('')
-/**
+  // 定义响应式变量，用于存储用户输入的商品名称
+  const prodName = ref('');
+
+  /**
    * 生命周期函数--监听页面隐藏
    */
-onHide(() => {
-  prodName.value = ''
-})
+  onHide(() => {
+    prodName.value = ''; // 当页面隐藏时清空输入框内容
+  });
+
+  // 定义响应式变量，用于存储最近搜索历史
+  const recentSearch = ref([]);
 
-const recentSearch = ref([])
-/**
- * 获取历史搜索
+  /**
+   * 获取历史搜索记录
    */
-const getRecentSearch = () => {
-  recentSearch.value = uni.getStorageSync('recentSearch')
-}
+  const getRecentSearch = () => {
+    // 从本地存储中获取最近搜索历史
+    recentSearch.value = uni.getStorageSync('recentSearch') || [];
+  };
 
-/**
+  /**
    * 搜索提交
    */
-const toSearchProdPage = () => {
-  if (prodName.value.trim()) {
+  const toSearchProdPage = () => {
+    if (prodName.value.trim()) { // 检查输入框内容是否为空或仅包含空白字符
       // 记录最近搜索
-    let recentSearchStorage = uni.getStorageSync('recentSearch') || []
-    recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value)
-    recentSearchStorage.unshift(prodName.value)
-    if (recentSearchStorage.length > 10) {
-      recentSearchStorage.pop()
+      let recentSearchStorage = uni.getStorageSync('recentSearch') || []; // 从本地存储获取最近搜索历史
+      recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value); // 移除重复的搜索关键词
+      recentSearchStorage.unshift(prodName.value); // 将新的搜索关键词添加到数组开头
+      if (recentSearchStorage.length > 10) { // 如果超过10个记录，移除最后一个
+        recentSearchStorage.pop();
       }
-    uni.setStorageSync('recentSearch', recentSearchStorage) // 跳转到商品列表页
+      uni.setStorageSync('recentSearch', recentSearchStorage); // 更新本地存储中的最近搜索历史
+
+      // 跳转到商品列表页，并传递搜索关键词
       uni.navigateTo({
-      url: '/pages/search-prod-show/search-prod-show?prodName=' + prodName.value
-    })
+        url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(prodName.value)}`
+      });
     }
-}
+  };
 
-/**
+  /**
    * 清空搜索历史
    */
-const clearSearch = () => {
-  uni.removeStorageSync('recentSearch')
-  getRecentSearch()
-}
+  const clearSearch = () => {
+    // 从本地存储中移除最近搜索历史
+    uni.removeStorageSync('recentSearch');
+    // 重新获取最近搜索历史（此时应为空）
+    getRecentSearch();
+  };
 
-/**
+  /**
    * 返回首页
    */
-const goBackIndex = () => {
+  const goBackIndex = () => {
+    // 返回上一页
     uni.navigateBack({
-    url: '/pages/search-page/search-page'
-  })
-}
+      delta: 1 // 返回一级页面
+    });
+  };
 
-/**
+  /**
    * 输入商品名获取数据 || 绑定输入值
    */
-const getSearchContent = (e) => {
-  prodName.value = e.detail.value
-}
+  const getSearchContent = (e) => {
+    // 更新 prodName 的值为用户输入的内容
+    prodName.value = e.detail.value;
+  };
 
-/**
+  /**
    * 点击搜素历史
    */
-const onHistSearch = (e) => {
-  prodName.value = e.currentTarget.dataset.name
-  toSearchProdPage()
-}
+  const onHistSearch = (e) => {
+    // 将点击的历史记录设置为当前输入框的值
+    prodName.value = e.currentTarget.dataset.name;
+    // 触发搜索操作
+    toSearchProdPage();
+  };
 </script>
 
 <style scoped lang="scss">
-@use './search-page.scss';
+  @use './search-page.scss'; /* 引入外部样式文件 */
 </style>

front-end/mall4uni/src/pages/search-prod-show/search-prod-show.scss

@@ -1,184 +1,218 @@
+/* 容器样式 */
 .container {
-  background: #f4f4f4;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
+
   .empty {
-    text-align: center;
-    color: #999;
-    font-size: 26rpx;
+    text-align: center; /* 文本居中对齐 */
+    color: #999; /* 文本颜色为灰色 */
+    font-size: 26rpx; /* 字体大小为26响应式像素 */
   }
+
   .empty.empty-top {
-    margin-top: 300rpx;
+    margin-top: 300rpx; /* 顶部外边距为300响应式像素，用于在页面顶部显示空状态时有足够的间距 */
   }
 }
+
+/* 固定定位的盒子样式 */
 .fixed-box {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-  background: #fff;
+  position: fixed; /* 固定定位，使盒子始终位于页面顶部 */
+  width: 100%; /* 宽度占满整个父元素 */
+  top: 0; /* 距离页面顶部0像素 */
+  z-index: 999; /* 设置较高的堆叠顺序，确保盒子在其他内容之上 */
+  background: #fff; /* 背景颜色为白色 */
+
   .tabs {
-    width: 100%;
-    height: 80rpx;
-    line-height: 80rpx;
-    padding: 10rpx 0;
-    z-index: 999;
-    background: #fff;
+    width: 100%; /* 宽度占满整个父元素 */
+    height: 80rpx; /* 高度为80响应式像素 */
+    line-height: 80rpx; /* 行高设置为80响应式像素，确保文本垂直居中 */
+    padding: 10rpx 0; /* 上下内边距为10响应式像素 */
+    z-index: 999; /* 设置较高的堆叠顺序，确保标签栏在其他内容之上 */
+    background: #fff; /* 背景颜色为白色 */
+
     &::after {
-      content: '';
-      background-color: #e1e1e1;
-      left: 0;
-      height: 1px;
-      transform-origin: 50% 100% 0;
-      bottom: 0;
-      position: absolute;
-      display: block;
-      width: 100%;
-    }
+      content: ''; /* 伪元素内容为空 */
+      background-color: #e1e1e1; /* 伪元素背景颜色为浅灰色 */
+      left: 0; /* 伪元素距离左侧0像素 */
+      height: 1px; /* 伪元素高度为1像素 */
+      transform-origin: 50% 100% 0; /* 伪元素变换原点为底部中心 */
+      bottom: 0; /* 伪元素距离底部0像素 */
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+      display: block; /* 确保伪元素作为块级元素显示 */
+      width: 100%; /* 伪元素宽度为100%，即占满整个父元素 */
+    }
+
     .tab-item {
-      display: inline-block;
-      width: 33.33%;
-      text-align: center;
-      font-size: 28rpx;
+      display: inline-block; /* 标签项作为行内块级元素显示 */
+      width: 33.33%; /* 每个标签项占据父元素宽度的33.33%，实现三等分 */
+      text-align: center; /* 文本居中对齐 */
+      font-size: 28rpx; /* 字体大小为28响应式像素 */
     }
+
     .tab-item.on {
-      color: #eb2444;
+      color: #eb2444; /* 当前选中的标签项文本颜色为红色 */
     }
   }
 }
+
+/* 搜索栏样式 */
 .search-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  color: #777;
-  background: #fff;
-  z-index: 3;
-  padding: 0 30rpx;
-  box-sizing: border-box;
-  margin: 30rpx 0;
+  display: flex; /* 使用弹性布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: space-between; /* 内容左右对齐 */
+  width: 100%; /* 宽度占满整个父元素 */
+  color: #777; /* 搜索栏内文本颜色为浅灰色 */
+  background: #fff; /* 搜索栏背景颜色为白色 */
+  z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
+  padding: 0 30rpx; /* 左右内边距为30响应式像素 */
+  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
+  margin: 30rpx 0; /* 上下外边距为30响应式像素 */
+
   .search-box {
-    position: relative;
-    height: 60rpx;
-    background: #f7f7f7;
-    z-index: 999;
-    width: 80%;
-    border-radius: 50rpx;
-    margin-right: 30rpx;
-    flex: 1;
+    position: relative; /* 相对定位，用于内部元素的绝对定位 */
+    height: 60rpx; /* 搜索框高度为60响应式像素 */
+    background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
+    z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他内容之上 */
+    width: 80%; /* 搜索框宽度为父元素宽度的80% */
+    border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+    margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
+    flex: 1; /* 搜索框占据剩余空间 */
+
     .search-img {
-      width: 32rpx;
-      height: 32rpx;
-      position: absolute;
-      left: 20rpx;
-      top: 14rpx;
-      display: block;
+      width: 32rpx; /* 搜索图标宽度为32响应式像素 */
+      height: 32rpx; /* 搜索图标高度为32响应式像素 */
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+      left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
+      top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
+      display: block; /* 确保图标作为块级元素显示 */
     }
   }
+
   .search-hint {
-    font-size: 28rpx;
-    position: absolute;
-    right: 30rpx;
-    top: 31rpx;
-    color: #eb2444;
+    font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
+    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+    right: 30rpx; /* 提示文本距离右侧30响应式像素 */
+    top: 31rpx; /* 提示文本距离顶部31响应式像素 */
+    color: #eb2444; /* 提示文本颜色为红色 */
   }
+
   .search-list-img {
-    width: 40rpx;
-    height: 40rpx;
-    font-size: 0;
+    width: 40rpx; /* 图标宽度为40响应式像素 */
+    height: 40rpx; /* 图标高度为40响应式像素 */
+    font-size: 0; /* 移除默认字体大小，防止影响图标显示 */
     image {
-      width: 100%;
-      height: 100%;
+      width: 100%; /* 图片宽度为100%，即占满父元素 */
+      height: 100%; /* 图片高度为100%，即占满父元素 */
     }
   }
 }
+
+/* 搜索输入框样式 */
 .sear-input {
-  height: 60rpx;
-  border-radius: 50rpx;
-  border: 0;
-  margin: 0 30rpx 0 64rpx;
-  line-height: 48rpx;
-  vertical-align: top;
-  background: #f7f7f7;
-  font-size: 28rpx;
+  height: 60rpx; /* 输入框高度为60响应式像素 */
+  border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+  border: 0; /* 移除默认边框 */
+  margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
+  line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
+  vertical-align: top; /* 垂直对齐方式为顶部 */
+  background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
+  font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
 }
+
+/* 商品展示区域样式 */
 .prod-show {
-  background: #fff;
+  background: #fff; /* 背景颜色为白色 */
+
   .prod-items {
-    float: left;
-    background: #fff;
-    padding-bottom: 20rpx;
-    box-sizing: border-box;
+    float: left; /* 商品项左浮动，实现水平排列 */
+    background: #fff; /* 商品项背景颜色为白色 */
+    padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
+    box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
   }
 }
+
 .prod-items {
-  margin: 0 20rpx;
+  margin: 0 20rpx; /* 左右外边距为20响应式像素 */
 }
+
+/* 热销商品容器样式 */
 .hotsale-item-cont {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: flex; /* 使用弹性布局 */
+  flex-wrap: wrap; /* 允许换行 */
+  justify-content: space-between; /* 内容左右对齐 */
 }
+
+/* 商品列表样式 */
 .prod-list {
-  padding-top: 150rpx;
-  min-height: calc(100vh - 150rpx);
+  padding-top: 150rpx; /* 顶部内边距为150响应式像素，确保与固定头部有足够的间距 */
+  min-height: calc(100vh - 150rpx); /* 最小高度为视口高度减去150响应式像素 */
+
   .cont-item {
-    padding: 0 20rpx 20rpx 20rpx;
+    padding: 0 20rpx 20rpx 20rpx; /* 内边距为上下20响应式像素，左右20响应式像素 */
+
     .show-item {
       .more-prod-pic {
-        text-align: center;
-        width: 170rpx;
-        height: 170rpx;
-        font-size: 0;
+        text-align: center; /* 图片文本居中对齐 */
+        width: 170rpx; /* 图片容器宽度为170响应式像素 */
+        height: 170rpx; /* 图片容器高度为170响应式像素 */
+        font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
+
         .more-pic {
-          width: 100%;
-          height: 100%;
-          vertical-align: middle;
-        }
-      }
-      position: relative;
-      display: flex;
-      justify-content: flex-start;
-      padding: 20rpx;
-      border-radius: 20rpx;
-      background: #fff;
-      margin-bottom: 20rpx;
-      box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
+          width: 100%; /* 图片宽度为100%，即占满父元素 */
+          height: 100%; /* 图片高度为100%，即占满父元素 */
+          vertical-align: middle; /* 图片垂直居中对齐 */
+        }
+      }
+
+      position: relative; /* 相对定位，用于内部元素的绝对定位 */
+      display: flex; /* 使用弹性布局 */
+      justify-content: flex-start; /* 内容左对齐 */
+      padding: 20rpx; /* 内边距为20响应式像素 */
+      border-radius: 20rpx; /* 圆角边框，半径为20响应式像素 */
+      background: #fff; /* 背景颜色为白色 */
+      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
+      box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加轻微的阴影效果，增强立体感 */
+
       .prod-text-right {
-        margin-left: 20rpx;
-        width: 75%;
+        margin-left: 20rpx; /* 左侧外边距为20响应式像素 */
+        width: 75%; /* 占据父元素宽度的75% */
+
         .cate-prod-info {
-          font-size: 22rpx;
-          color: #999;
-          margin: 10rpx 0 20rpx 0;
+          font-size: 22rpx; /* 字体大小为22响应式像素 */
+          color: #999; /* 文本颜色为灰色 */
+          margin: 10rpx 0 20rpx 0; /* 上下外边距分别为10和20响应式像素 */
         }
+
         .go-to-buy {
-          font-size: 26rpx;
-          background: #eb2444;
-          color: #fff;
-          border-radius: 50rpx;
-          width: 150rpx;
-          text-align: center;
-          padding: 8rpx 3rpx;
-          position: absolute;
-          right: 20rpx;
-          bottom: 20rpx;
-        }
+          font-size: 26rpx; /* 字体大小为26响应式像素 */
+          background: #eb2444; /* 背景颜色为红色 */
+          color: #fff; /* 文本颜色为白色 */
+          border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
+          width: 150rpx; /* 宽度为150响应式像素 */
+          text-align: center; /* 文本居中对齐 */
+          padding: 8rpx 3rpx; /* 内边距为8和3响应式像素 */
+          position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+          right: 20rpx; /* 按钮距离右侧20响应式像素 */
+          bottom: 20rpx; /* 按钮距离底部20响应式像素 */
+        }
+
         .prod-text.more {
-          margin: 0;
-          height: 78rpx;
-          font-size: 28rpx;
-          display: -webkit-box;
-          word-break: break-all;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          color: #000;
-        }
+          margin: 0; /* 移除默认外边距 */
+          height: 78rpx; /* 高度为78响应式像素 */
+          font-size: 28rpx; /* 字体大小为28响应式像素 */
+          display: -webkit-box; /* 使用Webkit的多行文本溢出处理 */
+          word-break: break-all; /* 允许单词内断行 */
+          overflow: hidden; /* 隐藏超出容器的内容 */
+          text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+          display: -webkit-box; /* 重复声明以确保兼容性 */
+          -webkit-line-clamp: 2; /* 限制显示两行文本 */
+          -webkit-box-orient: vertical; /* 文本方向为垂直 */
+          color: #000; /* 文本颜色为黑色 */
+        }
+
         .prod-price.more {
-          font-size: 28rpx;
-          color: #eb2444;
-          font-family: arial;
+          font-size: 28rpx; /* 字体大小为28响应式像素 */
+          color: #eb2444; /* 文本颜色为红色 */
+          font-family: arial; /* 字体系列为Arial */
         }
       }
     }

front-end/mall4uni/src/pages/search-prod-show/search-prod-show.vue

@@ -2,54 +2,52 @@
   <view class="container">
     <!-- 搜索框 -->
     <view class="fixed-box">
+      <!-- 固定定位的盒子，通常用于页面顶部导航栏或标签栏 -->
       <view class="search-bar">
+        <!-- 搜索栏容器 -->
         <view class="search-box">
-          <input
-            placeholder="输入关键字搜索"
-            class="sear-input"
-            :value="prodName"
-            confirm-type="search"
-            @input="getSearchContent"
-            @confirm="toSearchConfirm"
-          >
-          <image
-            src="@/static/images/icon/search.png"
-            class="search-img"
+          <!-- 搜索输入框容器 -->
+          <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
+          class="sear-input" <!-- 应用样式类 sear-input -->
+          :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
+          confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
+          @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
+          @confirm="toSearchConfirm" <!-- 监听用户按下确认键时触发搜索 -->
+          />
+          <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
+            class="search-img" <!-- 应用样式类 search-img -->
           />
         </view>
-        <view
-          class="search-list-img"
-          @tap="changeShowType"
+        <view class="search-list-img" <!-- 切换显示类型的图标容器 -->
+          @tap="changeShowType" <!-- 点击切换显示类型 -->
         >
           <image
-            v-if="showType==1"
-            src="@/static/images/icon/search-col.png"
+            v-if="showType == 1" <!-- 当 showType 为 1 时显示此图标 -->
+            src="@/static/images/icon/search-col.png" <!-- 图标图片路径 -->
           />
           <image
-            v-if="showType==2"
-            src="@/static/images/icon/search-col2.png"
+            v-if="showType == 2" <!-- 当 showType 为 2 时显示此图标 -->
+            src="@/static/images/icon/search-col2.png" <!-- 图标图片路径 -->
           />
         </view>
       </view>
       <view class="tabs">
-        <text
-          :class="'tab-item complete ' + (sts==0?'on':'')"
-          data-sts="0"
-          @tap="onStsTap"
+        <!-- 标签栏容器 -->
+        <text :class="'tab-item complete ' + (sts == 0 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
+          data-sts="0" <!-- 数据属性，用于标识当前标签 -->
+          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
         >
           综合
         </text>
-        <text
-          :class="'tab-item ' + (sts==1?'on':'')"
-          data-sts="1"
-          @tap="onStsTap"
+        <text :class="'tab-item ' + (sts == 1 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
+          data-sts="1" <!-- 数据属性，用于标识当前标签 -->
+          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
         >
           销量
         </text>
-        <text
-          :class="'tab-item ' + (sts==2?'on':'')"
-          data-sts="2"
-          @tap="onStsTap"
+        <text :class="'tab-item ' + (sts == 2 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
+          data-sts="2" <!-- 数据属性，用于标识当前标签 -->
+          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
         >
           价格
         </text>
@@ -58,61 +56,54 @@
 
     <!-- 商品列表 -->
     <view class="prod-list">
+      <!-- 商品列表容器 -->
       <!-- 横向列表 -->
-      <view
-        v-if="showType==1"
+      <view v-if="showType == 1" <!-- 条件渲染，只有当 showType 为 1 时显示横向列表 -->
         class="prod-show"
       >
-        <view class="hotsale-item-cont">
+        <view class="hotsale-item-cont"> <!-- 热销商品容器 -->
           <block
-            v-for="(item, index) in searchProdList"
-            :key="index"
+            v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
+            :key="index" <!-- 使用索引作为唯一标识 -->
           >
             <production
-              :item="item"
-              sts="6"
+              :item="item" <!-- 传递商品项数据 -->
+              sts="6" <!-- 传递状态码，可能是用于样式或其他逻辑 -->
             />
           </block>
         </view>
       </view>
 
       <!-- 纵向列表 -->
-      <view
-        v-if="showType==2"
+      <view v-if="showType == 2" <!-- 条件渲染，只有当 showType 为 2 时显示纵向列表 -->
         class="cont-item"
       >
         <block
-          v-for="(item, index) in searchProdList"
-          :key="index"
+          v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
+          :key="index" <!-- 使用索引作为唯一标识 -->
         >
           <view
-            class="show-item"
-            :data-prodid="item.prodId"
-            @tap="toProdPage"
+            class="show-item" <!-- 商品项容器 -->
+            :data-prodid="item.prodId" <!-- 传递商品ID -->
+            @tap="toProdPage" <!-- 点击商品项时跳转到商品详情页 -->
           >
-            <view class="more-prod-pic">
+            <view class="more-prod-pic"> <!-- 商品图片容器 -->
               <image
-                :src="item.pic"
-                class="more-pic"
+                :src="item.pic" <!-- 动态绑定图片路径 -->
+                class="more-pic" <!-- 应用样式类 more-pic -->
               />
             </view>
-            <view class="prod-text-right">
-              <view class="prod-text more">
-                {{ item.prodName }}
+            <view class="prod-text-right"> <!-- 商品文本信息容器 -->
+              <view class="prod-text more"> <!-- 商品名称 -->
+                {{ item.prodName }} <!-- 显示商品名称 -->
               </view>
-              <view class="cate-prod-info">
-                {{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评
+              <view class="cate-prod-info"> <!-- 商品评价信息 -->
+                {{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评 <!-- 显示评价数量和好评率 -->
               </view>
-              <view class="prod-price more">
-                <text class="symbol">
-                  ￥
-                </text>
-                <text class="big-num">
-                  {{ wxs.parsePrice(item.price)[0] }}
-                </text>
-                <text class="small-num">
-                  .{{ wxs.parsePrice(item.price)[1] }}
-                </text>
+              <view class="prod-price more"> <!-- 商品价格 -->
+                <text class="symbol">￥</text> <!-- 人民币符号 -->
+                <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分价格 -->
+                <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分价格 -->
               </view>
             </view>
           </view>
@@ -120,9 +111,8 @@
       </view>
 
       <!-- 空占位 -->
-      <view
-        v-if="!searchProdList.length"
-        :class="['empty',showType==1? 'empty-top':'']"
+      <view v-if="!searchProdList.length" <!-- 条件渲染，只有当搜索结果为空时显示空占位 -->
+        :class="['empty', showType == 1 ? 'empty-top' : '']" <!-- 动态绑定类名，根据 showType 决定是否添加 'empty-top' 类 -->
       >
         暂无结果
       </view>
@@ -131,93 +121,128 @@
 </template>
 
 <script setup>
-const wxs = number()
-const prodName = ref('')
-/**
+  import { ref } from 'vue'; // 导入 Vue 的 ref 函数，用于创建响应式变量
+
+  // 定义一个工具函数对象，假设它是从某个模块导入的
+  const wxs = number(); // 这里假设 `number` 是一个函数，返回一个包含解析价格方法的对象
+
+  // 定义响应式变量，用于存储用户输入的商品名称
+  const prodName = ref('');
+
+  /**
    * 生命周期函数--监听页面加载
    */
-onLoad((options) => {
-  prodName.value = options.prodName
-})
+  onLoad((options) => {
+    // 如果页面加载时有传递参数，则将参数中的 prodName 赋值给 prodName 变量
+    prodName.value = options.prodName;
+  });
 
-/**
+  /**
    * 生命周期函数--监听页面显示
    */
-onShow(() => {
-  toLoadData()
-})
+  onShow(() => {
+    // 页面每次显示时调用 toLoadData 方法加载数据
+    toLoadData();
+  });
 
-const showType = ref(2)
-const changeShowType = () => {
+  // 定义响应式变量，用于控制商品列表的显示类型（1: 横向列表, 2: 纵向列表）
+  const showType = ref(2);
+
+  // 切换商品列表显示类型的方法
+  const changeShowType = () => {
+    // 切换 showType 的值，实现横向和纵向列表之间的切换
     if (showType.value == 1) {
-    showType.value = 2
+      showType.value = 2;
     } else {
-    showType.value = 1
+      showType.value = 1;
     }
-}
+  };
 
-/**
+  /**
    * 输入商品获取数据
- * @param e
+   * @param e - 事件对象
    */
-const getSearchContent = (e) => {
-  prodName.value = e.detail.value
-}
+  const getSearchContent = (e) => {
+    // 更新 prodName 的值为用户输入的内容
+    prodName.value = e.detail.value;
+  };
+
+  // 定义响应式变量，用于存储当前排序方式（0: 综合, 1: 销量, 2: 价格）
+  const sts = ref(0);
 
-const sts = ref(0)
-const searchProdList = ref([])
-/**
+  // 定义响应式变量，用于存储搜索结果列表
+  const searchProdList = ref([]);
+
+  /**
    * 请求热门搜索商品接口
    */
-const toLoadData = () => {
+  const toLoadData = () => {
+    // 发送请求获取搜索结果数据
     http.request({
-    url: '/search/searchProdPage',
-    method: 'GET',
+      url: '/search/searchProdPage', // API 请求地址
+      method: 'GET', // 请求方法为 GET
       data: {
-      current: 1,
-      prodName: prodName.value,
-      size: 10,
-      sort: sts.value
+        current: 1, // 当前页码
+        prodName: prodName.value, // 搜索关键词
+        size: 10, // 每页显示的商品数量
+        sort: sts.value // 排序方式
       }
     })
       .then(({ data }) => {
-      searchProdList.value = data.records
-    })
-}
+        // 将获取到的数据赋值给 searchProdList
+        searchProdList.value = data.records;
+      });
+  };
 
-/**
+  /**
    * 当前搜索页二次搜索商品
+   * @param e - 事件对象
    */
-const toSearchConfirm = (e) => {
+  const toSearchConfirm = (e) => {
+    // 检查输入框内容是否为空
     if (e.detail.value) {
-    let recentSearch = uni.getStorageSync('recentSearch') || []
-    recentSearch = recentSearch.filter(item => item !== prodName.value)
-    recentSearch.unshift(prodName.value)
+      // 获取最近搜索历史
+      let recentSearch = uni.getStorageSync('recentSearch') || [];
+      // 移除重复的搜索关键词
+      recentSearch = recentSearch.filter(item => item !== prodName.value);
+      // 将新的搜索关键词添加到数组开头
+      recentSearch.unshift(prodName.value);
+      // 如果超过10个记录，移除最后一个
       if (recentSearch.length > 10) {
-      recentSearch.pop()
+        recentSearch.pop();
       }
-    uni.setStorageSync('recentSearch', recentSearch)
+      // 更新本地存储中的最近搜索历史
+      uni.setStorageSync('recentSearch', recentSearch);
     }
+    // 跳转到商品列表页，并传递搜索关键词
     uni.redirectTo({
-    url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value
-  })
-}
+      url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(e.detail.value)}`
+    });
+  };
 
-/**
+  /**
    * 状态点击事件
+   * @param e - 事件对象
    */
-const onStsTap = (e) => {
-  sts.value = e.currentTarget.dataset.sts
-  toLoadData()
-}
+  const onStsTap = (e) => {
+    // 更新 sts 的值为当前点击的标签对应的排序方式
+    sts.value = e.currentTarget.dataset.sts;
+    // 重新加载数据
+    toLoadData();
+  };
 
-const toProdPage = (e) => {
+  /**
+   * 跳转到商品详情页
+   * @param e - 事件对象
+   */
+  const toProdPage = (e) => {
+    // 跳转到商品详情页，并传递商品ID
     uni.navigateTo({
-    url: '/pages/prod/prod?prodid=' + e.currentTarget.dataset.prodid
-  })
-}
+      url: `/pages/prod/prod?prodid=${e.currentTarget.dataset.prodid}`
+    });
+  };
 </script>
 
 <style scoped lang="scss">
-@use './search-prod-show.scss';
+  @use './search-prod-show.scss'; /* 引入外部样式文件 */
 </style>