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

front-end/mall4uni/src/pages/sub-category/sub-category.scss

@@ -1,110 +1,138 @@
+/* 容器样式 */
 .container {
-  background: #f4f4f4;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
 }
+
+/* 分类标题栏样式 */
 .category-tit {
-  width: 100%;
+  width: 100%; /* 宽度占满整个父元素 */
-  white-space: nowrap;
+  white-space: nowrap; /* 禁止文本换行，确保所有分类项在一行显示 */
-  position: fixed;
+  position: fixed; /* 固定定位，使标题栏始终位于页面顶部 */
-  top: 0px;
+  top: 0px; /* 距离页面顶部0像素 */
-  z-index: 999;
+  z-index: 999; /* 设置较高的堆叠顺序，确保标题栏在其他内容之上 */
-  background-color: #fff;
+  background-color: #fff; /* 背景颜色为白色 */
-  border-bottom: 2rpx solid #f4f4f4;
+  border-bottom: 2rpx solid #f4f4f4; /* 底部边框，使用浅灰色实线 */
-  font-size: 30rpx;
+  font-size: 30rpx; /* 标题文字大小为30响应式像素 */
+
   .category-item {
-    display: inline-block;
+    display: inline-block; /* 分类项作为行内块级元素显示，确保它们在同一行 */
-    padding: 20rpx 10rpx;
+    padding: 20rpx 10rpx; /* 内边距为上下20响应式像素，左右10响应式像素 */
-    margin: 0 20rpx;
+    margin: 0 20rpx; /* 左右外边距为20响应式像素 */
-    box-sizing: border-box;
+    box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
-    font-size: 28rpx;
+    font-size: 28rpx; /* 分类项文字大小为28响应式像素 */
   }
 }
-.prod-item {
+
-  height: calc(100vh - 100rpx);
+/* 当前选中的分类项样式 */
-}
 .on {
-  border-bottom: 4rpx solid #e43130;
+  border-bottom: 4rpx solid #e43130; /* 底部边框，使用红色实线，表示当前选中 */
-  color: #e43130;
+  color: #e43130; /* 文本颜色为红色 */
+}
+
+/* 商品项容器样式 */
+.prod-item {
+  height: calc(100vh - 100rpx); /* 高度为视口高度减去100响应式像素，确保与固定头部有足够的间距 */
 }
+
+/* 隐藏滚动条样式 */
 ::-webkit-scrollbar {
-  width: 0;
+  width: 0; /* 滚动条宽度为0 */
-  height: 0;
+  height: 0; /* 滚动条高度为0 */
-  color: transparent;
+  color: transparent; /* 滚动条颜色为透明 */
 }
+
+/* 空状态样式 */
 .empty {
-  margin-top: 200rpx;
+  margin-top: 200rpx; /* 顶部外边距为200响应式像素，确保空状态提示在页面中间 */
 }
+
+/* 商品项样式 */
 .prod-items {
-  width: 345rpx;
+  width: 345rpx; /* 商品项宽度为345响应式像素 */
-  display: inline-block;
+  display: inline-block; /* 作为行内块级元素显示，确保它们在同一行 */
-  background: #fff;
+  background: #fff; /* 背景颜色为白色 */
-  padding-bottom: 20rpx;
+  padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
-  box-sizing: border-box;
+  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
-  box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
+  box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2); /* 添加轻微的阴影效果，增强立体感 */
+
   &:nth-child(2n-1) {
-    margin: 20rpx 10rpx 10rpx 20rpx;
+    margin: 20rpx 10rpx 10rpx 20rpx; /* 奇数商品项的外边距设置 */
   }
+
   &:nth-child(2n) {
-    margin: 20rpx 20rpx 10rpx 10rpx;
+    margin: 20rpx 20rpx 10rpx 10rpx; /* 偶数商品项的外边距设置 */
   }
+
   .hot-imagecont {
     .hotsaleimg {
-      width: 341rpx;
+      width: 341rpx; /* 图片宽度为341响应式像素 */
-      height: 341rpx;
+      height: 341rpx; /* 图片高度为341响应式像素 */
     }
-    font-size: 0;
+
-    text-align: center;
+    font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
+    text-align: center; /* 图片居中对齐 */
   }
+
   .hot-text {
     .hotprod-text {
-      font-size: 28rpx;
+      font-size: 28rpx; /* 商品名称文字大小为28响应式像素 */
-      white-space: nowrap;
+      white-space: nowrap; /* 禁止文本换行 */
-      overflow: hidden;
+      overflow: hidden; /* 隐藏超出容器的内容 */
-      text-overflow: ellipsis;
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
     }
-    margin-top: 20rpx;
+
-    padding: 0 10rpx;
+    margin-top: 20rpx; /* 顶部外边距为20响应式像素 */
+    padding: 0 10rpx; /* 左右内边距为10响应式像素 */
+
     .prod-info {
-      min-height: 30rpx;
+      min-height: 30rpx; /* 最小高度为30响应式像素 */
-      font-size: 22rpx;
+      font-size: 22rpx; /* 商品信息文字大小为22响应式像素 */
-      color: #999;
+      color: #999; /* 文本颜色为灰色 */
-      white-space: nowrap;
+      white-space: nowrap; /* 禁止文本换行 */
-      overflow: hidden;
+      overflow: hidden; /* 隐藏超出容器的内容 */
-      text-overflow: ellipsis;
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
     }
+
     .prod-text-info {
-      position: relative;
+      position: relative; /* 相对定位，用于内部元素的绝对定位 */
-      height: 70rpx;
+      height: 70rpx; /* 高度为70响应式像素 */
-      line-height: 70rpx;
+      line-height: 70rpx; /* 行高设置为70响应式像素，确保文本垂直居中 */
-      font-family: Arial;
+      font-family: Arial; /* 字体系列为Arial */
+
       .hotprod-price {
-        display: inline;
+        display: inline; /* 价格文本作为行内元素显示 */
-        font-size: 26rpx;
+        font-size: 26rpx; /* 价格文字大小为26响应式像素 */
-        color: #eb2444;
+        color: #eb2444; /* 价格颜色为红色 */
       }
+
       .basket-img {
-        width: 50rpx;
+        width: 50rpx; /* 购物车图标宽度为50响应式像素 */
-        height: 50rpx;
+        height: 50rpx; /* 购物车图标高度为50响应式像素 */
-        position: absolute;
+        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-        right: 0;
+        right: 0; /* 购物车图标距离右侧0像素 */
-        bottom: 7rpx;
+        bottom: 7rpx; /* 购物车图标距离底部7响应式像素 */
-        padding: 8rpx;
+        padding: 8rpx; /* 内边距为8响应式像素 */
       }
     }
   }
 }
+
+/* 更多商品样式 */
 .more-prod {
   .prod-text-right {
     .prod-info {
-      font-size: 22rpx;
+      font-size: 22rpx; /* 商品信息文字大小为22响应式像素 */
-      color: #999;
+      color: #999; /* 文本颜色为灰色 */
-      white-space: nowrap;
+      white-space: nowrap; /* 禁止文本换行 */
-      overflow: hidden;
+      overflow: hidden; /* 隐藏超出容器的内容 */
-      text-overflow: ellipsis;
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
     }
   }
 }
+
+/* 空状态占位样式 */
 .empty-wrap {
-  color: #aaa;
+  color: #aaa; /* 文本颜色为浅灰色 */
-  text-align: center;
+  text-align: center; /* 文本居中对齐 */
-  padding-top: 400rpx;
+  padding-top: 400rpx; /* 顶部内边距为400响应式像素，确保空状态提示在页面中间 */
 }

front-end/mall4uni/src/pages/sub-category/sub-category.vue

@@ -1,71 +1,65 @@
 <template>
   <view class="Mall4j container">
     <!-- 顶部子分类tab -->
-    <scroll-view
+    <scroll-view scroll-x="true" <!-- 允许水平滚动 -->
-      scroll-x="true"
+      class="category-tit" <!-- 应用样式类 category-tit -->
-      class="category-tit"
+      :scroll-into-view="intoView" <!-- 滚动到指定元素，确保选中的分类项可见 -->
-      :scroll-into-view="intoView"
+      :scroll-with-animation="true" <!-- 滚动时启用动画效果 -->
-      :scroll-with-animation="true"
     >
       <block
-        v-for="(item, index) in subCategoryList"
+        v-for="(item, index) in subCategoryList" <!-- 遍历子分类列表，动态生成每个分类项 -->
-        :key="index"
+        :key="index" <!-- 使用索引作为唯一标识 -->
       >
         <view
-          :id="'sw' + item.categoryId"
+          :id="'sw' + item.categoryId" <!-- 动态设置每个分类项的ID -->
-          :class="'category-item ' + (item.categoryId==categoryId? 'on':'')"
+          :class="'category-item ' + (item.categoryId == categoryId ? 'on' : '')" <!-- 动态绑定类名，当前选中的分类项添加 'on' 类 -->
-          :data-id="item.categoryId"
+          :data-id="item.categoryId" <!-- 传递分类ID -->
-          @tap="onSubCategoryTap"
+          @tap="onSubCategoryTap" <!-- 点击分类项时触发切换分类的方法 -->
         >
-          {{ item.categoryName }}
+          {{ item.categoryName }} <!-- 显示分类名称 -->
         </view>
       </block>
     </scroll-view>
+
     <!-- 商品列表 -->
     <view class="prod-item">
+      <!-- 商品列表容器 -->
       <block v-if="prodList.length">
-        <block
+        <!-- 条件渲染，只有当商品列表不为空时显示商品项 -->
-          v-for="(prod, key) in prodList"
+        <block v-for="(prod, key) in prodList" <!-- 遍历商品列表，动态生成每个商品项 -->
-          :key="key"
+          :key="key" <!-- 使用索引作为唯一标识 -->
         >
           <view
-            class="prod-items"
+            class="prod-items" <!-- 商品项容器 -->
-            :data-prodid="prod.prodId"
+            :data-prodid="prod.prodId" <!-- 传递商品ID -->
-            @tap="toProdPage"
+            @tap="toProdPage" <!-- 点击商品项时跳转到商品详情页 -->
           >
-            <view class="hot-imagecont">
+            <view class="hot-imagecont"> <!-- 商品图片容器 -->
               <image
-                :src="prod.pic"
+                :src="prod.pic" <!-- 动态绑定商品图片路径 -->
-                class="hotsaleimg"
+                class="hotsaleimg" <!-- 应用样式类 hotsaleimg -->
               />
             </view>
-            <view class="hot-text">
+            <view class="hot-text"> <!-- 商品文本信息容器 -->
-              <view class="hotprod-text">
+              <view class="hotprod-text"> <!-- 商品名称 -->
-                {{ prod.prodName }}
+                {{ prod.prodName }} <!-- 显示商品名称 -->
               </view>
-              <view class="prod-info">
+              <view class="prod-info"> <!-- 商品简介 -->
-                {{ prod.brief }}
+                {{ prod.brief }} <!-- 显示商品简介 -->
               </view>
-              <view class="prod-text-info">
+              <view class="prod-text-info"> <!-- 商品价格信息 -->
-                <view class="price">
+                <view class="price"> <!-- 价格容器 -->
-                  <text class="symbol">
+                  <text class="symbol">￥</text> <!-- 人民币符号 -->
-                    ￥
+                  <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text> <!-- 显示整数部分价格 -->
-                  </text>
+                  <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text> <!-- 显示小数部分价格 -->
-                  <text class="big-num">
-                    {{ wxs.parsePrice(prod.price)[0] }}
-                  </text>
-                  <text class="small-num">
-                    .{{ wxs.parsePrice(prod.price)[1] }}
-                  </text>
                 </view>
               </view>
             </view>
           </view>
         </block>
       </block>
-      <view
+      <view v-else <!-- 条件渲染，只有当商品列表为空时显示空状态提示 -->
-        v-else
+        class="empty-wrap" <!-- 应用样式类 empty-wrap -->
-        class="empty-wrap"
       >
         暂无商品数据~
       </view>
@@ -74,104 +68,147 @@
 </template>
 
 <script setup>
-const wxs = number()
+  import { ref, nextTick } from 'vue'; // 导入 Vue 的 ref 和 nextTick 函数
-
+
-const parentId = ref('')
+  // 定义一个工具函数对象，假设它是从某个模块导入的
-const categoryId = ref(0)
+  const wxs = number(); // 这里假设 `number` 是一个函数，返回一个包含解析价格方法的对象
-/**
+
- * 生命周期函数--监听页面加载
+  // 定义响应式变量，用于存储父分类ID
- */
+  const parentId = ref('');
-onLoad((options) => {
+
-  parentId.value = options.parentId
+  // 定义响应式变量，用于存储当前选中的子分类ID
-  categoryId.value = options.categoryId
+  const categoryId = ref(0);
-  getSubCategory()
+
-  getProdList()
+  /**
-})
+   * 生命周期函数--监听页面加载
-
+   */
-const current = ref(1)
+  onLoad((options) => {
-const pages = ref(0)
+    // 将页面加载时传递的参数赋值给响应式变量
-/**
+    parentId.value = options.parentId;
- * 页面上拉触底事件的处理函数
+    categoryId.value = options.categoryId;
- */
+
-onReachBottom(() => {
+    // 获取子分类数据和商品列表数据
-  if (current.value < pages.value) {
+    getSubCategory();
-    current.value = current.value + 1
+    getProdList();
-    getProdList()
+  });
-  }
+
-})
+  // 定义响应式变量，用于存储当前页码
-
+  const current = ref(1);
-const intoView = ref('')
+
-const subCategoryList = ref([])
+  // 定义响应式变量，用于存储总页数
-/**
+  const pages = ref(0);
- * 获取顶栏子分类数据
+
- */
+  /**
-const getSubCategory = () => {
+   * 页面上拉触底事件的处理函数
-  http.request({
+   */
-    url: '/category/categoryInfo',
+  onReachBottom(() => {
-    method: 'GET',
+    // 如果当前页码小于总页数，则加载下一页商品
-    data: {
+    if (current.value < pages.value) {
-      parentId: parentId.value
+      current.value = current.value + 1;
-    }
+      getProdList();
-  })
-    .then(({ data }) => {
-      subCategoryList.value = data
-      nextTick(() => {
-        intoView.value = 'sw' + categoryId.value
-      })
-    })
-}
-
-const prodList = ref([])
-const isLoaded = ref(false) // 列表是否加载完毕
-/**
- * 根据分类id获取商品列表数据
- */
-const getProdList = () => {
-  isLoaded.value = false
-
-  http.request({
-    url: '/prod/pageProd',
-    method: 'GET',
-    data: {
-      categoryId: categoryId.value,
-      current: current.value,
-      size: 10,
-      sort: 0,
-      isAllProdType: true
     }
-  })
+  });
-    .then(({ data }) => {
+
-      isLoaded.value = true
+  // 定义响应式变量，用于控制滚动到哪个分类项
-      prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records)
+  const intoView = ref('');
-      current.value = data.current
+
-      pages.value = data.pages
+  // 定义响应式变量，用于存储子分类列表
+  const subCategoryList = ref([]);
+
+  /**
+   * 获取顶栏子分类数据
+   */
+  const getSubCategory = () => {
+    // 发送请求获取子分类数据
+    http.request({
+      url: '/category/categoryInfo', // API 请求地址
+      method: 'GET', // 请求方法为 GET
+      data: {
+        parentId: parentId.value // 传递父分类ID
+      }
     })
-}
+      .then(({ data }) => {
-
+        // 将获取到的数据赋值给 subCategoryList
-/**
+        subCategoryList.value = data;
- * 切换顶部分类
+
- */
+        // 使用 nextTick 确保 DOM 更新后执行滚动操作
-const onSubCategoryTap = (e) => {
+        nextTick(() => {
-  categoryId.value = e.currentTarget.dataset.id
+          intoView.value = 'sw' + categoryId.value; // 滚动到当前选中的分类项
-  current.value = 1
+        });
-  pages.value = 0
+      });
-  intoView.value = 'sw' + e.currentTarget.dataset.id
+  };
-  getProdList()
+
-}
+  // 定义响应式变量，用于存储商品列表
-
+  const prodList = ref([]);
-/**
+
- * 跳转商品下详情
+  // 定义响应式变量，用于标记列表是否加载完毕
- */
+  const isLoaded = ref(false);
-const toProdPage = (e) => {
+
-  const prodid = e.currentTarget.dataset.prodid
+  /**
-  if (prodid) {
+   * 根据分类ID获取商品列表数据
-    uni.navigateTo({
+   */
-      url: '/pages/prod/prod?prodid=' + prodid
+  const getProdList = () => {
+    isLoaded.value = false; // 标记列表正在加载
+
+    // 发送请求获取商品列表数据
+    http.request({
+      url: '/prod/pageProd', // API 请求地址
+      method: 'GET', // 请求方法为 GET
+      data: {
+        categoryId: categoryId.value, // 传递当前选中的分类ID
+        current: current.value, // 当前页码
+        size: 10, // 每页显示的商品数量
+        sort: 0, // 排序方式（这里固定为0）
+        isAllProdType: true // 是否获取所有类型的商品
+      }
     })
-  }
+      .then(({ data }) => {
-}
+        isLoaded.value = true; // 标记列表加载完毕
+
+        // 如果是第一页，则直接赋值；否则将新数据追加到已有数据中
+        prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records);
+
+        // 更新当前页码和总页数
+        current.value = data.current;
+        pages.value = data.pages;
+      });
+  };
+
+  /**
+   * 切换顶部分类
+   * @param e - 事件对象
+   */
+  const onSubCategoryTap = (e) => {
+    // 更新当前选中的分类ID
+    categoryId.value = e.currentTarget.dataset.id;
+
+    // 重置分页参数
+    current.value = 1;
+    pages.value = 0;
+
+    // 更新滚动位置，确保选中的分类项可见
+    intoView.value = 'sw' + e.currentTarget.dataset.id;
+
+    // 重新加载商品列表数据
+    getProdList();
+  };
+
+  /**
+   * 跳转商品详情页
+   * @param e - 事件对象
+   */
+  const toProdPage = (e) => {
+    const prodid = e.currentTarget.dataset.prodid; // 获取商品ID
+
+    // 如果商品ID存在，则跳转到商品详情页
+    if (prodid) {
+      uni.navigateTo({
+        url: `/pages/prod/prod?prodid=${prodid}`
+      });
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-@import "./sub-category.scss";
+  @import "./sub-category.scss"; /* 引入外部样式文件 */
 </style>

front-end/mall4uni/src/pages/submit-order/submit-order.scss

@@ -1,429 +1,489 @@
+/* 容器样式 */
 .container {
-  background: #f4f4f4;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
 }
+
+/* 提交订单区域样式 */
 .submit-order {
-  margin-bottom: 100rpx;
+  margin-bottom: 100rpx; /* 底部外边距为100响应式像素 */
-  padding-bottom: 160rpx;
+  padding-bottom: 160rpx; /* 底部内边距为160响应式像素 */
-  .delivery-addr {
+
-    position: relative;
+  .delivery-addr { /* 配送地址样式 */
-    background: #fff;
+    position: relative; /* 相对定位，用于内部元素的绝对定位 */
-    .addr-icon {
+    background: #fff; /* 背景颜色为白色 */
-      width: 32rpx;
+
-      height: 32rpx;
+    .addr-icon { /* 地址图标样式 */
-      display: block;
+      width: 32rpx; /* 图标宽度为32响应式像素 */
-      position: absolute;
+      height: 32rpx; /* 图标高度为32响应式像素 */
-      left: 30rpx;
+      display: block; /* 作为块级元素显示 */
-      top: 24rpx;
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-      image {
+      left: 30rpx; /* 距离左侧30响应式像素 */
-        width: 100%;
+      top: 24rpx; /* 距离顶部24响应式像素 */
-        height: 100%;
+
+      image { /* 图片样式 */
+        width: 100%; /* 宽度占满父元素 */
+        height: 100%; /* 高度占满父元素 */
       }
     }
-    .user-info {
+
-      padding-top: 20rpx;
+    .user-info { /* 用户信息样式 */
-      line-height: 48rpx;
+      padding-top: 20rpx; /* 顶部内边距为20响应式像素 */
-      word-wrap: break-word;
+      line-height: 48rpx; /* 行高设置为48响应式像素 */
-      word-break: break-all;
+      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
-      overflow: hidden;
+      word-break: break-all; /* 强制文本在任意字符处换行 */
-      text-overflow: ellipsis;
+      overflow: hidden; /* 隐藏超出容器的内容 */
-      display: -webkit-box;
+      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
-      -webkit-line-clamp: 1;
+      display: -webkit-box; /* 使用Webkit盒模型 */
-      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1; /* 限制文本显示为1行 */
-      .item {
+      -webkit-box-orient: vertical; /* 文本垂直排列 */
-        font-size: 30rpx;
+
-        margin-right: 30rpx;
+      .item { /* 用户信息项样式 */
-        vertical-align: top;
+        font-size: 30rpx; /* 文字大小为30响应式像素 */
-        display: inline-block;
+        margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
+        vertical-align: top; /* 垂直对齐方式为顶部 */
+        display: inline-block; /* 作为行内块级元素显示 */
       }
     }
-    .addr {
+
-      font-size: 26rpx;
+    .addr { /* 地址样式 */
-      line-height: 36rpx;
+      font-size: 26rpx; /* 文字大小为26响应式像素 */
-      color: #999;
+      line-height: 36rpx; /* 行高设置为36响应式像素 */
-      width: 90%;
+      color: #999; /* 文本颜色为灰色 */
-      padding-bottom: 20rpx;
+      width: 90%; /* 宽度为父元素的90% */
-      margin-top: 15rpx;
+      padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
-      word-wrap: break-word;
+      margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
+      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
     }
-    .arrow {
+
-      width: 15rpx;
+    .arrow { /* 箭头样式 */
-      height: 15rpx;
+      width: 15rpx; /* 宽度为15响应式像素 */
-      border-top: 2rpx solid #777;
+      height: 15rpx; /* 高度为15响应式像素 */
-      border-right: 2rpx solid #777;
+      border-top: 2rpx solid #777; /* 上边框为2响应式像素宽的灰色实线 */
-      transform: rotate(45deg);
+      border-right: 2rpx solid #777; /* 右边框为2响应式像素宽的灰色实线 */
-      position: absolute;
+      transform: rotate(45deg); /* 旋转45度形成箭头形状 */
-      right: 30rpx;
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-      top: 60rpx;
+      right: 30rpx; /* 距离右侧30响应式像素 */
+      top: 60rpx; /* 距离顶部60响应式像素 */
     }
-    .arrow.empty {
+
-      top: 39rpx;
+    .arrow.empty { /* 空状态下的箭头样式 */
+      top: 39rpx; /* 距离顶部39响应式像素 */
     }
   }
 }
-.delivery-addr {
+
-  .addr-bg {
+.delivery-addr { /* 配送地址样式（重复定义，可能用于覆盖或扩展） */
-    .add-addr {
+  .addr-bg { /* 地址背景样式 */
-      .plus-sign {
+    .add-addr { /* 添加地址按钮样式 */
-        color: #eb2444;
+      .plus-sign { /* 加号样式 */
-        border: 2rpx solid #eb2444;
+        color: #eb2444; /* 文本颜色为红色 */
-        padding: 0rpx 6rpx;
+        border: 2rpx solid #eb2444; /* 边框为2响应式像素宽的红色实线 */
-        margin-right: 10rpx;
+        padding: 0rpx 6rpx; /* 内边距为上下0响应式像素，左右6响应式像素 */
+        margin-right: 10rpx; /* 右侧外边距为10响应式像素 */
       }
-      font-size: 28rpx;
+
-      color: #666;
+      font-size: 28rpx; /* 文字大小为28响应式像素 */
-      display: flex;
+      color: #666; /* 文本颜色为深灰色 */
-      align-items: center;
+      display: flex; /* 使用Flex布局 */
-      padding: 30rpx 0;
+      align-items: center; /* 垂直居中对齐 */
+      padding: 30rpx 0; /* 上下内边距为30响应式像素 */
     }
-    padding: 0 30rpx;
+
+    padding: 0 30rpx; /* 左右内边距为30响应式像素 */
   }
-  .addr-bg.whole {
+
-    padding: 0 39rpx 0 77rpx;
+  .addr-bg.whole { /* 整个地址背景样式 */
+    padding: 0 39rpx 0 77rpx; /* 左右内边距分别为39响应式像素和77响应式像素 */
   }
 }
-.addr-bg {
+
-  .add-addr {
+.addr-bg { /* 地址背景样式（重复定义，可能用于覆盖或扩展） */
-    .plus-sign-img {
+  .add-addr { /* 添加地址按钮样式 */
-      width: 32rpx;
+    .plus-sign-img { /* 加号图片样式 */
-      height: 32rpx;
+      width: 32rpx; /* 宽度为32响应式像素 */
-      font-size: 0;
+      height: 32rpx; /* 高度为32响应式像素 */
-      margin-right: 10rpx;
+      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
-      image {
+      margin-right: 10rpx; /* 右侧外边距为10响应式像素 */
-        width: 100%;
+
-        height: 100%;
+      image { /* 图片样式 */
+        width: 100%; /* 宽度占满父元素 */
+        height: 100%; /* 高度占满父元素 */
       }
     }
   }
 }
-.prod-item {
+
-  background-color: #fff;
+.prod-item { /* 商品项样式 */
-  margin-top: 15rpx;
+  background-color: #fff; /* 背景颜色为白色 */
-  font-size: 28rpx;
+  margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
-  .item-cont {
+  font-size: 28rpx; /* 文字大小为28响应式像素 */
-    .prod-pic {
+
-      image {
+  .item-cont { /* 商品内容样式 */
-        width: 180rpx;
+    .prod-pic { /* 商品图片样式 */
-        height: 180rpx;
+      image { /* 图片样式 */
-        width: 100%;
+        width: 180rpx; /* 宽度为180响应式像素 */
-        height: 100%;
+        height: 180rpx; /* 高度为180响应式像素 */
+        width: 100%; /* 宽度占满父元素 */
+        height: 100%; /* 高度占满父元素 */
       }
-      font-size: 0;
+
-      display: block;
+      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
-      width: 160rpx;
+      display: block; /* 作为块级元素显示 */
-      height: 160rpx;
+      width: 160rpx; /* 宽度为160响应式像素 */
-      overflow: hidden;
+      height: 160rpx; /* 高度为160响应式像素 */
-      background: #fff;
+      overflow: hidden; /* 隐藏超出容器的内容 */
-      margin-right: 16rpx;
+      background: #fff; /* 背景颜色为白色 */
+      margin-right: 16rpx; /* 右侧外边距为16响应式像素 */
     }
-    display: flex;
+
-    align-items: center;
+    display: flex; /* 使用Flex布局 */
-    padding: 30rpx;
+    align-items: center; /* 垂直居中对齐 */
-    border-bottom: 2rpx solid #f1f1f1;
+    padding: 30rpx; /* 内边距为30响应式像素 */
-    .prod-info {
+    border-bottom: 2rpx solid #f1f1f1; /* 底部边框为2响应式像素宽的浅灰色实线 */
-      margin-left: 10rpx;
+
-      font-size: 28rpx;
+    .prod-info { /* 商品信息样式 */
-      width: 100%;
+      margin-left: 10rpx; /* 左侧外边距为10响应式像素 */
-      position: relative;
+      font-size: 28rpx; /* 文字大小为28响应式像素 */
-      height: 160rpx;
+      width: 100%; /* 宽度占满父元素 */
-      -webkit-flex: 1;
+      position: relative; /* 相对定位，用于内部元素的绝对定位 */
-      -ms-flex: 1;
+      height: 160rpx; /* 高度为160响应式像素 */
-      -webkit-box-flex: 1;
+      flex: 1; /* 占用剩余空间 */
-      -moz-box-flex: 1;
+
-      flex: 1;
+      .prodname { /* 商品名称样式 */
-      .prodname {
+        font-size: 28rpx; /* 文字大小为28响应式像素 */
-        font-size: 28rpx;
+        line-height: 40rpx; /* 行高设置为40响应式像素 */
-        line-height: 40rpx;
+        max-height: 86rpx; /* 最大高度为86响应式像素 */
-        max-height: 86rpx;
+        overflow: hidden; /* 隐藏超出容器的内容 */
-        overflow: hidden;
+        display: -webkit-box; /* 使用Webkit盒模型 */
-        display: -webkit-box;
+        -webkit-line-clamp: 2; /* 限制文本显示为2行 */
-        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical; /* 文本垂直排列 */
-        -webkit-box-orient: vertical;
+        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
-        text-overflow: ellipsis;
+        word-break: break-all; /* 强制文本在任意字符处换行 */
-        word-break: break-all;
       }
-      .prod-info-cont {
+
-        color: #999;
+      .prod-info-cont { /* 商品信息内容样式 */
-        line-height: 40rpx;
+        color: #999; /* 文本颜色为灰色 */
-        margin-top: 10rpx;
+        line-height: 40rpx; /* 行高设置为40响应式像素 */
-        font-size: 22rpx;
+        margin-top: 10rpx; /* 顶部外边距为10响应式像素 */
-        overflow: hidden;
+        font-size: 22rpx; /* 文字大小为22响应式像素 */
-        display: -webkit-box;
+        overflow: hidden; /* 隐藏超出容器的内容 */
-        -webkit-line-clamp: 1;
+        display: -webkit-box; /* 使用Webkit盒模型 */
-        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1; /* 限制文本显示为1行 */
-        text-overflow: ellipsis;
+        -webkit-box-orient: vertical; /* 文本垂直排列 */
-        word-break: break-all;
+        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+        word-break: break-all; /* 强制文本在任意字符处换行 */
       }
     }
   }
-  .order-num {
+
-    padding: 20rpx 30rpx;
+  .order-num { /* 订单数量样式 */
-    display: flex;
+    padding: 20rpx 30rpx; /* 内边距为上下20响应式像素，左右30响应式像素 */
-    justify-content: space-between;
+    display: flex; /* 使用Flex布局 */
-    font-size: 28rpx;
+    justify-content: space-between; /* 水平两端对齐 */
-    .clear-btn {
+    font-size: 28rpx; /* 文字大小为28响应式像素 */
-      width: 32rpx;
+
-      height: 32rpx;
+    .clear-btn { /* 清空按钮样式 */
-      font-size: 0;
+      width: 32rpx; /* 宽度为32响应式像素 */
-      vertical-align: top;
+      height: 32rpx; /* 高度为32响应式像素 */
-      margin-top: 6rpx;
+      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
-      margin-left: 42rpx;
+      vertical-align: top; /* 垂直对齐方式为顶部 */
-      position: relative;
+      margin-top: 6rpx; /* 顶部外边距为6响应式像素 */
-      &::after {
+      margin-left: 42rpx; /* 左侧外边距为42响应式像素 */
-        content: " ";
+      position: relative; /* 相对定位，用于内部元素的绝对定位 */
-        display: block;
+
-        position: absolute;
+      &::after { /* 清空按钮后的竖线样式 */
-        left: -10px;
+        content: " "; /* 生成伪元素 */
-        top: 1px;
+        display: block; /* 作为块级元素显示 */
-        width: 1px;
+        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-        height: 12px;
+        left: -10px; /* 距离左侧-10像素 */
-        background: #ddd;
+        top: 1px; /* 距离顶部1像素 */
+        width: 1px; /* 宽度为1像素 */
+        height: 12px; /* 高度为12像素 */
+        background: #ddd; /* 背景颜色为浅灰色 */
       }
-      .clear-list-btn {
+
-        width: 100%;
+      .clear-list-btn { /* 清空列表按钮样式 */
-        height: 100%;
+        width: 100%; /* 宽度占满父元素 */
-        vertical-align: middle;
+        height: 100%; /* 高度占满父元素 */
+        vertical-align: middle; /* 垂直居中对齐 */
       }
     }
   }
-  .total-num {
+
-    text-align: right;
+  .total-num { /* 总数量样式 */
-    padding: 20rpx 30rpx;
+    text-align: right; /* 文本右对齐 */
-    font-size: 28rpx;
+    padding: 20rpx 30rpx; /* 内边距为上下20响应式像素，左右30响应式像素 */
-    .prodprice {
+    font-size: 28rpx; /* 文字大小为28响应式像素 */
-      display: inline-block;
+
-      color: #333;
+    .prodprice { /* 商品价格样式 */
+      display: inline-block; /* 作为行内块级元素显示 */
+      color: #333; /* 文本颜色为深灰色 */
     }
-    .prodcount {
+
-      margin-right: 20rpx;
+    .prodcount { /* 商品数量样式 */
+      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
     }
   }
-  .price-nums {
+
-    .prodprice {
+  .price-nums { /* 价格和数量样式 */
-      position: absolute;
+    .prodprice { /* 商品价格样式 */
-      bottom: 0;
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+      bottom: 0; /* 距离底部0响应式像素 */
     }
-    .prodcount {
+
-      position: absolute;
+    .prodcount { /* 商品数量样式 */
-      bottom: 5rpx;
+      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-      right: 0;
+      bottom: 5rpx; /* 距离底部5响应式像素 */
-      color: #999;
+      right: 0; /* 距离右侧0响应式像素 */
-      font-family: verdana;
+      color: #999; /* 文本颜色为灰色 */
+      font-family: verdana; /* 字体系列为Verdana */
     }
   }
 }
-.order-state {
+
-  display: flex;
+.order-state { /* 订单状态样式 */
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐 */
 }
-.order-msg {
+
-  background: #fff;
+.order-msg { /* 订单消息样式 */
-  margin-top: 15rpx;
+  background: #fff; /* 背景颜色为白色 */
-  padding: 0 30rpx;
+  margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
-  font-size: 28rpx;
+  padding: 0 30rpx; /* 左右内边距为30响应式像素 */
-  .msg-item {
+  font-size: 28rpx; /* 文字大小为28响应式像素 */
-    border-top: 2rpx solid #f1f1f1;
+
-    &:first-child {
+  .msg-item { /* 消息项样式 */
-      border: 0;
+    border-top: 2rpx solid #f1f1f1; /* 顶部边框为2响应式像素宽的浅灰色实线 */
+
+    &:first-child { /* 第一个消息项样式 */
+      border: 0; /* 移除边框 */
     }
-    .item {
+
-      position: relative;
+    .item { /* 消息项内容样式 */
-      display: flex;
+      position: relative; /* 相对定位，用于内部元素的绝对定位 */
-      padding: 16rpx 0;
+      display: flex; /* 使用Flex布局 */
-      align-items: center;
+      padding: 16rpx 0; /* 上下内边距为16响应式像素 */
-      .item-tit {
+      align-items: center; /* 垂直居中对齐 */
-        line-height: 48rpx;
+
+      .item-tit { /* 消息标题样式 */
+        line-height: 48rpx; /* 行高设置为48响应式像素 */
       }
-      .item-txt {
+
-        -webkit-box-flex: 1;
+      .item-txt { /* 消息文本样式 */
-        -moz-box-flex: 1;
+        flex: 1; /* 占用剩余空间 */
-        flex: 1;
+        font-family: arial; /* 字体系列为Arial */
-        font-family: arial;
+        max-height: 48rpx; /* 最大高度为48响应式像素 */
-        max-height: 48rpx;
+        overflow: hidden; /* 隐藏超出容器的内容 */
-        overflow: hidden;
+        line-height: 48rpx; /* 行高设置为48响应式像素 */
-        line-height: 48rpx;
+        display: -webkit-box; /* 使用Webkit盒模型 */
-        display: -webkit-box;
+        -webkit-line-clamp: 1; /* 限制文本显示为1行 */
-        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical; /* 文本垂直排列 */
-        -webkit-box-orient: vertical;
+        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
-        text-overflow: ellipsis;
+        word-break: break-all; /* 强制文本在任意字符处换行 */
-        word-break: break-all;
       }
-      .item-txt.price {
+
-        padding: 0;
+      .item-txt.price { /* 价格文本样式 */
-        text-align: right;
+        padding: 0; /* 移除内边距 */
+        text-align: right; /* 文本右对齐 */
       }
-      input {
+
-        flex: 1;
+      input { /* 输入框样式 */
+        flex: 1; /* 占用剩余空间 */
       }
-      .coupon-btn {
+
-        display: block;
+      .coupon-btn { /* 优惠券按钮样式 */
-        margin: 0 30rpx;
+        display: block; /* 作为块级元素显示 */
-        line-height: 28rpx;
+        margin: 0 30rpx; /* 左右外边距为30响应式像素 */
-        color: #999;
+        line-height: 28rpx; /* 行高设置为28响应式像素 */
+        color: #999; /* 文本颜色为灰色 */
       }
-      .arrow {
+
-        width: 15rpx;
+      .arrow { /* 箭头样式 */
-        height: 15rpx;
+        width: 15rpx; /* 宽度为15响应式像素 */
-        border-top: 2rpx solid #999;
+        height: 15rpx; /* 高度为15响应式像素 */
-        border-right: 2rpx solid #999;
+        border-top: 2rpx solid #999; /* 上边框为2响应式像素宽的灰色实线 */
-        transform: rotate(45deg);
+        border-right: 2rpx solid #999; /* 右边框为2响应式像素宽的灰色实线 */
-        position: absolute;
+        transform: rotate(45deg); /* 旋转45度形成箭头形状 */
-        right: 0rpx;
+        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
+        right: 0rpx; /* 距离右侧0响应式像素 */
       }
     }
-    .item.payment {
+
-      border-top: 2rpx solid #f1f1f1;
+    .item.payment { /* 支付项样式 */
-      color: #eb2444;
+      border-top: 2rpx solid #f1f1f1; /* 顶部边框为2响应式像素宽的浅灰色实线 */
+      color: #eb2444; /* 文本颜色为红色 */
     }
-    .item.coupon {
+
-      border-bottom: 2rpx solid #e1e1e1;
+    .item.coupon { /* 优惠券项样式 */
+      border-bottom: 2rpx solid #e1e1e1; /* 底部边框为2响应式像素宽的浅灰色实线 */
     }
   }
 }
-.submit-order-footer {
+
-  position: fixed;
+.submit-order-footer { /* 提交订单页脚样式 */
-  bottom: 0;
+  position: fixed; /* 固定定位，确保始终位于页面底部 */
-  width: 100%;
+  bottom: 0; /* 距离页面底部0像素 */
-  max-width: 750rpx;
+  width: 100%; /* 宽度占满整个屏幕 */
-  background: #fff;
+  max-width: 750rpx; /* 最大宽度为750响应式像素 */
-  margin: auto;
+  background: #fff; /* 背景颜色为白色 */
-  display: -webkit-flex;
+  margin: auto; /* 水平居中 */
-  display: -webkit-box;
+  display: -webkit-flex; /* 使用Webkit Flex布局 */
-  display: -moz-box;
+  display: -webkit-box; /* 使用Webkit盒模型 */
-  display: -ms-flexbox;
+  display: -moz-box; /* 使用Mozilla盒模型 */
-  display: flex;
+  display: -ms-flexbox; /* 使用IE Flex布局 */
-  font-size: 26rpx;
+  display: flex; /* 使用标准Flex布局 */
-  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  font-size: 26rpx; /* 文字大小为26响应式像素 */
-  .sub-order {
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 添加轻微的阴影效果 */
-    flex: 1;
+
-    margin: 0 30rpx;
+  .sub-order { /* 订单提交按钮样式 */
-    line-height: 100rpx;
+    flex: 1; /* 占用剩余空间 */
-    display: block;
+    margin: 0 30rpx; /* 左右外边距为30响应式像素 */
-    text-align: left;
+    line-height: 100rpx; /* 行高设置为100响应式像素 */
-    font-size: 28rpx;
+    display: block; /* 作为块级元素显示 */
-    .item-txt {
+    text-align: left; /* 文本左对齐 */
-      .price {
+    font-size: 28rpx; /* 文字大小为28响应式像素 */
-        display: inline;
+
-        color: #eb2444;
+    .item-txt { /* 订单金额样式 */
-        font-size: 28rpx;
+      .price { /* 价格样式 */
+        display: inline; /* 作为行内元素显示 */
+        color: #eb2444; /* 文本颜色为红色 */
+        font-size: 28rpx; /* 文字大小为28响应式像素 */
       }
     }
   }
-  .footer-box {
+
-    padding: 0 10rpx;
+  .footer-box { /* 页脚按钮样式 */
-    width: 200rpx;
+    padding: 0 10rpx; /* 左右内边距为10响应式像素 */
-    background: #eb2444;
+    width: 200rpx; /* 宽度为200响应式像素 */
-    text-align: center;
+    background: #eb2444; /* 背景颜色为红色 */
-    line-height: 100rpx;
+    text-align: center; /* 文本居中对齐 */
-    color: #fff;
+    line-height: 100rpx; /* 行高设置为100响应式像素 */
+    color: #fff; /* 文本颜色为白色 */
   }
 }
-.clearfix {
+
-  &:after {
+.clearfix { /* 清除浮动样式 */
-    content: " ";
+  &:after { /* 生成伪元素清除浮动 */
-    display: table;
+    content: " "; /* 生成空内容 */
-    clear: both;
+    display: table; /* 作为表格元素显示 */
+    clear: both; /* 清除浮动 */
   }
 }
-.popup-hide {
+
-  position: fixed;
+.popup-hide { /* 弹出层隐藏样式 */
-  top: 0;
+  position: fixed; /* 固定定位，覆盖整个屏幕 */
-  bottom: 0;
+  top: 0; /* 距离页面顶部0像素 */
-  left: 0;
+  bottom: 0; /* 距离页面底部0像素 */
-  right: 0;
+  left: 0; /* 距离页面左侧0像素 */
-  z-index: 999;
+  right: 0; /* 距离页面右侧0像素 */
-  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999; /* 设置较高的堆叠顺序，确保弹出层在其他内容之上 */
+  background-color: rgba(0, 0, 0, 0.3); /* 背景颜色为半透明黑色 */
 }
-.popup-box {
+
-  position: absolute;
+.popup-box { /* 弹出层盒子样式 */
-  bottom: 0;
+  position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-  width: 100%;
+  bottom: 0; /* 距离页面底部0像素 */
-  height: 80%;
+  width: 100%; /* 宽度占满整个屏幕 */
-  overflow: hidden;
+  height: 80%; /* 高度为屏幕高度的80% */
-  background-color: #fff;
+  overflow: hidden; /* 隐藏超出容器的内容 */
+  background-color: #fff; /* 背景颜色为白色 */
 }
-.popup-tit {
+
-  position: relative;
+.popup-tit { /* 弹出层标题样式 */
-  height: 46px;
+  position: relative; /* 相对定位，用于内部元素的绝对定位 */
-  line-height: 46px;
+  height: 46px; /* 高度为46像素 */
-  padding-left: 10px;
+  line-height: 46px; /* 行高设置为46像素 */
-  font-size: 16px;
+  padding-left: 10px; /* 左侧内边距为10像素 */
-  color: #333;
+  font-size: 16px; /* 文字大小为16像素 */
-  font-weight: bold;
+  color: #333; /* 文本颜色为深灰色 */
+  font-weight: bold; /* 文本加粗 */
 }
-.close {
+
-  color: #aaa;
+.close { /* 关闭按钮样式 */
-  border-radius: 12px;
+  color: #aaa; /* 文本颜色为浅灰色 */
-  line-height: 20px;
+  border-radius: 12px; /* 圆角半径为12像素 */
-  text-align: center;
+  line-height: 20px; /* 行高设置为20像素 */
-  height: 20px;
+  text-align: center; /* 文本居中对齐 */
-  width: 20px;
+  height: 20px; /* 高度为20像素 */
-  font-size: 18px;
+  width: 20px; /* 宽度为20像素 */
-  padding: 1px;
+  font-size: 18px; /* 文字大小为18像素 */
-  top: 10px;
+  padding: 1px; /* 内边距为1像素 */
-  right: 10px;
+  top: 10px; /* 距离顶部10像素 */
-  position: absolute;
+  right: 10px; /* 距离右侧10像素 */
-  &::before {
+  position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
-    content: "\2716";
+
+  &::before { /* 生成关闭符号样式 */
+    content: "\2716"; /* 使用Unicode字符表示关闭符号 */
   }
 }
-.coupon-tabs {
+
-  display: flex;
+.coupon-tabs { /* 优惠券标签样式 */
-  font-size: 14px;
+  display: flex; /* 使用Flex布局 */
-  justify-content: space-around;
+  font-size: 14px; /* 文字大小为14像素 */
-  border-bottom: 1px solid #f2f2f2;
+  justify-content: space-around; /* 水平均匀分布 */
+  border-bottom: 1px solid #f2f2f2; /* 底部边框为1像素宽的浅灰色实线 */
 }
-.coupon-tab {
+
-  padding: 10px 0;
+.coupon-tab { /* 优惠券标签项样式 */
+  padding: 10px 0; /* 上下内边距为10像素 */
 }
-.coupon-tab.on {
+
-  border-bottom: 2px solid #eb2444;
+.coupon-tab.on { /* 选中的优惠券标签项样式 */
-  font-weight: 600;
+  border-bottom: 2px solid #eb2444; /* 底部边框为2像素宽的红色实线 */
+  font-weight: 600; /* 文本加粗 */
 }
-.popup-cnt {
+
-  height: calc(100% - 88px);
+.popup-cnt { /* 弹出层内容样式 */
-  overflow: auto;
+  height: calc(100% - 88px); /* 高度为弹出层盒子高度减去88像素 */
-  padding: 0 10px;
+  overflow: auto; /* 允许滚动 */
-  background: #f4f4f4;
+  padding: 0 10px; /* 左右内边距为10像素 */
+  background: #f4f4f4; /* 背景颜色为浅灰色 */
 }
-.coupon-ok {
+
-  position: fixed;
+.coupon-ok { /* 优惠券确认按钮样式 */
-  bottom: 0;
+  position: fixed; /* 固定定位，确保始终位于页面底部 */
-  width: 100%;
+  bottom: 0; /* 距离页面底部0像素 */
-  height: 60px;
+  width: 100%; /* 宽度占满整个屏幕 */
-  line-height: 50px;
+  height: 60px; /* 高度为60像素 */
-  font-size: 14px;
+  line-height: 50px; /* 行高设置为50像素 */
-  text-align: center;
+  font-size: 14px; /* 文字大小为14像素 */
-  box-shadow: 0px -1px 1px #ddd;
+  text-align: center; /* 文本居中对齐 */
-  text {
+  box-shadow: 0px -1px 1px #ddd; /* 添加轻微的阴影效果 */
-    border-radius: 20px;
+
-    display: inline-block;
+  text { /* 按钮文本样式 */
-    height: 20px;
+    border-radius: 20px; /* 圆角半径为20像素 */
-    line-height: 20px;
+    display: inline-block; /* 作为行内块级元素显示 */
-    width: 450rpx;
+    height: 20px; /* 高度为20像素 */
-    padding: 7px;
+    line-height: 20px; /* 行高设置为20像素 */
-    color: #fff;
+    width: 450rpx; /* 宽度为450响应式像素 */
-    box-shadow: -1px 3px 3px #aaa;
+    padding: 7px; /* 内边距为7像素 */
+    color: #fff; /* 文本颜色为白色 */
+    box-shadow: -1px 3px 3px #aaa; /* 添加轻微的阴影效果 */
   }
 }
-.botm-empty {
+
-  height: 60px;
+.botm-empty { /* 底部空白样式 */
+  height: 60px; /* 高度为60像素 */
 }
-checkbox {
+
-  .wx-checkbox-input {
+checkbox { /* 复选框样式 */
-    border-radius: 50%;
+  .wx-checkbox-input { /* 复选框输入框样式 */
-    width: 35rpx;
+    border-radius: 50%; /* 圆形边框 */
-    height: 35rpx;
+    width: 35rpx; /* 宽度为35响应式像素 */
+    height: 35rpx; /* 高度为35响应式像素 */
   }
-  .wx-checkbox-input.wx-checkbox-input-checked {
+
-    background: #eb2444;
+  .wx-checkbox-input.wx-checkbox-input-checked { /* 选中的复选框输入框样式 */
-    border-color: #eb2444;
+    background: #eb2444; /* 背景颜色为红色 */
-    &::before {
+    border-color: #eb2444; /* 边框颜色为红色 */
-      text-align: center;
+
-      font-size: 22rpx;
+    &::before { /* 选中符号样式 */
-      color: #fff;
+      text-align: center; /* 文本居中对齐 */
-      background: transparent;
+      font-size: 22rpx; /* 文字大小为22响应式像素 */
-      transform: translate(-50%, -50%) scale(1);
+      color: #fff; /* 文本颜色为白色 */
-      -webkit-transform: translate(-50%, -50%) scale(1);
+      background: transparent; /* 背景颜色为透明 */
+      transform: translate(-50%, -50%) scale(1); /* 居中并缩放 */
+      -webkit-transform: translate(-50%, -50%) scale(1); /* Webkit浏览器兼容 */
     }
   }
 }

front-end/mall4uni/src/pages/submit-order/submit-order.vue

@@ -3,100 +3,82 @@
     <view class="container">
       <view class="submit-order">
         <!-- 收货地址 -->
-        <view
+        <view class="delivery-addr"
-          class="delivery-addr "
+              @tap="toAddrListPage" <!-- 点击时跳转到收货地址列表页 -->
-          @tap="toAddrListPage"
         >
+          <!-- 如果没有选择收货地址 -->
           <view
-            v-if="!userAddr"
+            v-if="!userAddr" <!-- 条件渲染，只有当 userAddr 为空时显示 -->
-            class="addr-bg "
+            class="addr-bg"
           >
             <view class="add-addr">
               <view class="plus-sign-img">
-                <image src="@/static/images/icon/plus-sign.png" />
+                <image src="@/static/images/icon/plus-sign.png" /> <!-- 加号图标 -->
               </view>
-              <text>新增收货地址</text>
+              <text>新增收货地址</text> <!-- 提示文本 -->
             </view>
-            <view class="arrow empty" />
+            <view class="arrow empty" /> <!-- 空箭头图标 -->
           </view>
+
+          <!-- 如果已经选择了收货地址 -->
           <view
-            v-if="userAddr"
+            v-if="userAddr" <!-- 条件渲染，只有当 userAddr 不为空时显示 -->
             class="addr-bg whole"
           >
             <view class="addr-icon">
-              <image src="@/static/images/icon/addr.png" />
+              <image src="@/static/images/icon/addr.png" /> <!-- 地址图标 -->
             </view>
             <view class="user-info">
-              <text class="item">
+              <text class="item">{{ userAddr.receiver }}</text> <!-- 收货人姓名 -->
-                {{ userAddr.receiver }}
+              <text class="item">{{ userAddr.mobile }}</text> <!-- 收货人电话 -->
-              </text>
-              <text class="item">
-                {{ userAddr.mobile }}
-              </text>
             </view>
             <view class="addr">
-              {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }}
+              {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area }}{{ userAddr.addr }} <!-- 详细地址 -->
             </view>
-            <view class="arrow" />
+            <view class="arrow" /> <!-- 箭头图标 -->
           </view>
         </view>
 
         <!-- 商品详情 -->
         <view class="prod-item">
-          <block
+          <block v-for="(item, index) in orderItems" <!-- 遍历订单商品列表，动态生成每个商品项 -->
-            v-for="(item, index) in orderItems"
+            :key="index" <!-- 使用索引作为唯一标识 -->
-            :key="index"
           >
             <view
               class="item-cont"
-              :data-ordernum="item.primaryOrderNo"
+              :data-ordernum="item.primaryOrderNo" <!-- 传递订单编号 -->
-              @tap="toOrderDetailPage"
+              @tap="toOrderDetailPage" <!-- 点击时跳转到订单详情页 -->
             >
               <view class="prod-pic">
-                <image :src="item.pic" />
+                <image :src="item.pic" /> <!-- 动态绑定商品图片路径 -->
               </view>
               <view class="prod-info">
                 <view class="prodname">
-                  {{ item.prodName }}
+                  {{ item.prodName }} <!-- 显示商品名称 -->
                 </view>
                 <view class="prod-info-cont">
-                  {{ item.skuName }}
+                  {{ item.skuName }} <!-- 显示商品规格信息 -->
                 </view>
                 <view class="price-nums">
                   <text class="prodprice">
-                    <text class="symbol">
+                    <text class="symbol">￥</text> <!-- 人民币符号 -->
-                      ￥
+                    <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分价格 -->
-                    </text>
+                    <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分价格 -->
-                    <text class="big-num">
-                      {{ wxs.parsePrice(item.price)[0] }}
-                    </text>
-                    <text class="small-num">
-                      .{{ wxs.parsePrice(item.price)[1] }}
-                    </text>
-                  </text>
-                  <text class="prodcount">
-                    x{{ item.prodCount }}
                   </text>
+                  <text class="prodcount">x{{ item.prodCount }}</text> <!-- 显示商品数量 -->
                 </view>
               </view>
             </view>
           </block>
 
+          <!-- 商品总数和合计金额 -->
           <view class="total-num">
-            <text class="prodcount">
+            <text class="prodcount">共{{ totalCount }}件商品</text> <!-- 显示商品总数 -->
-              共{{ totalCount }}件商品
-            </text>
             <view class="prodprice">
               合计：
-              <text class="symbol">
+              <text class="symbol">￥</text> <!-- 人民币符号 -->
-                ￥
+              <text class="big-num">{{ wxs.parsePrice(total)[0] }}</text> <!-- 显示整数部分合计金额 -->
-              </text>
+              <text class="small-num">.{{ wxs.parsePrice(total)[1] }}</text> <!-- 显示小数部分合计金额 -->
-              <text class="big-num">
-                {{ wxs.parsePrice(total)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(total)[1] }}
-              </text>
             </view>
           </view>
         </view>
@@ -104,96 +86,58 @@
         <!-- 订单详情 -->
         <view class="order-msg">
           <view class="msg-item">
-            <view
+            <!-- 优惠券选择 -->
-              class="item coupon"
+            <view class="item coupon"
-              @tap="showCouponPopup"
+                  @tap="showCouponPopup" <!-- 点击时显示优惠券弹窗 -->
             >
-              <text class="item-tit">
+              <text class="item-tit">优惠券：</text>
-                优惠券：
+              <text v-if="!coupons.canUseCoupons" class="item-txt">暂无可用</text> <!-- 如果没有可用优惠券，显示提示 -->
-              </text>
+              <text class="coupon-btn">{{ coupons.totalLength ? coupons.totalLength : 0 }}张</text> <!-- 显示优惠券总数 -->
-              <text
+              <text class="arrow" /> <!-- 箭头图标 -->
-                v-if="!coupons.canUseCoupons"
-                class="item-txt"
-              >
-                暂无可用
-              </text>
-              <text class="coupon-btn">
-                {{ coupons.totalLength ? coupons.totalLength : 0 }}张
-              </text>
-              <text class="arrow" />
             </view>
+            <!-- 买家留言 -->
             <view class="item">
               <text>买家留言：</text>
-              <input
+              <input v-model="remarks" <!-- 绑定买家留言内容 -->
-                v-model="remarks"
+              placeholder="给卖家留言" <!-- 占位符提示 -->
-                placeholder="给卖家留言"
+              />
-              >
             </view>
           </view>
         </view>
 
+        <!-- 订单金额明细 -->
         <view class="order-msg">
           <view class="msg-item">
             <view class="item">
-              <view class="item-tit">
+              <view class="item-tit">订单总额：</view>
-                订单总额：
-              </view>
               <view class="item-txt price">
-                <text class="symbol">
+                <text class="symbol">￥</text> <!-- 人民币符号 -->
-                  ￥
+                <text class="big-num">{{ wxs.parsePrice(total)[0] }}</text> <!-- 显示整数部分订单总额 -->
-                </text>
+                <text class="small-num">.{{ wxs.parsePrice(total)[1] }}</text> <!-- 显示小数部分订单总额 -->
-                <text class="big-num">
-                  {{ wxs.parsePrice(total)[0] }}
-                </text>
-                <text class="small-num">
-                  .{{ wxs.parsePrice(total)[1] }}
-                </text>
               </view>
             </view>
             <view class="item">
-              <view class="item-tit">
+              <view class="item-tit">运费：</view>
-                运费：
-              </view>
               <view class="item-txt price">
-                <text class="symbol">
+                <text class="symbol">￥</text> <!-- 人民币符号 -->
-                  ￥
+                <text class="big-num">{{ wxs.parsePrice(transfee)[0] }}</text> <!-- 显示整数部分运费 -->
-                </text>
+                <text class="small-num">.{{ wxs.parsePrice(transfee)[1] }}</text> <!-- 显示小数部分运费 -->
-                <text class="big-num">
-                  {{ wxs.parsePrice(transfee)[0] }}
-                </text>
-                <text class="small-num">
-                  .{{ wxs.parsePrice(transfee)[1] }}
-                </text>
               </view>
             </view>
             <view class="item">
-              <view class="item-tit">
+              <view class="item-tit">优惠金额：</view>
-                优惠金额：
-              </view>
               <view class="item-txt price">
-                <text class="symbol">
+                <text class="symbol">-￥</text> <!-- 负号和人民币符号 -->
-                  -￥
+                <text class="big-num">{{ wxs.parsePrice(shopReduce)[0] }}</text> <!-- 显示整数部分优惠金额 -->
-                </text>
+                <text class="small-num">.{{ wxs.parsePrice(shopReduce)[1] }}</text> <!-- 显示小数部分优惠金额 -->
-                <text class="big-num">
-                  {{ wxs.parsePrice(shopReduce)[0] }}
-                </text>
-                <text class="small-num">
-                  .{{ wxs.parsePrice(shopReduce)[1] }}
-                </text>
               </view>
             </view>
             <view class="item payment">
               <view class="item-txt price">
                 小计：
-                <text class="symbol">
+                <text class="symbol">￥</text> <!-- 人民币符号 -->
-                  ￥
+                <text class="big-num">{{ wxs.parsePrice(actualTotal)[0] }}</text> <!-- 显示整数部分小计金额 -->
-                </text>
+                <text class="small-num">.{{ wxs.parsePrice(actualTotal)[1] }}</text> <!-- 显示小数部分小计金额 -->
-                <text class="big-num">
-                  {{ wxs.parsePrice(actualTotal)[0] }}
-                </text>
-                <text class="small-num">
-                  .{{ wxs.parsePrice(actualTotal)[1] }}
-                </text>
               </view>
             </view>
           </view>
@@ -206,21 +150,14 @@
           <view class="item-txt">
             合计：
             <view class="price">
-              <text class="symbol">
+              <text class="symbol">￥</text> <!-- 人民币符号 -->
-                ￥
+              <text class="big-num">{{ wxs.parsePrice(actualTotal)[0] }}</text> <!-- 显示整数部分合计金额 -->
-              </text>
+              <text class="small-num">.{{ wxs.parsePrice(actualTotal)[1] }}</text> <!-- 显示小数部分合计金额 -->
-              <text class="big-num">
-                {{ wxs.parsePrice(actualTotal)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(actualTotal)[1] }}
-              </text>
             </view>
           </view>
         </view>
-        <view
+        <view class="footer-box"
-          class="footer-box"
+              @tap="toPay" <!-- 点击时提交订单并支付 -->
-          @tap="toPay"
         >
           提交订单
         </view>
@@ -228,69 +165,69 @@
     </view>
 
     <!-- 选择优惠券弹窗 -->
-    <view
+    <view v-if="popupShow" <!-- 条件渲染，只有当 popupShow 为 true 时显示 -->
-      v-if="popupShow"
       class="popup-hide"
     >
       <view class="popup-box">
         <view class="popup-tit">
-          <text>优惠券</text>
+          <text>优惠券</text> <!-- 弹窗标题 -->
           <text
             class="close"
-            @tap="closePopup"
+            @tap="closePopup" <!-- 点击时关闭弹窗 -->
           />
         </view>
+        <!-- 优惠券选项卡 -->
         <view class="coupon-tabs">
           <view
-            :class="'coupon-tab ' + (couponSts==1?'on':'')"
+            :class="'coupon-tab ' + (couponSts == 1 ? 'on' : '')" <!-- 动态绑定类名，选中时添加 'on' 类 -->
             data-sts="1"
-            @tap="changeCouponSts"
+            @tap="changeCouponSts" <!-- 点击时切换优惠券状态 -->
           >
-            可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }})
+            可用优惠券({{ coupons.canUseCoupons.length ? coupons.canUseCoupons.length : 0 }}) <!-- 显示可用优惠券数量 -->
           </view>
           <view
-            :class="'coupon-tab ' + (couponSts==2?'on':'')"
+            :class="'coupon-tab ' + (couponSts == 2 ? 'on' : '')" <!-- 动态绑定类名，选中时添加 'on' 类 -->
             data-sts="2"
-            @tap="changeCouponSts"
+            @tap="changeCouponSts" <!-- 点击时切换优惠券状态 -->
           >
-            不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }})
+            不可用优惠券({{ coupons.unCanUseCoupons.length ? coupons.unCanUseCoupons.length : 0 }}) <!-- 显示不可用优惠券数量 -->
           </view>
         </view>
+        <!-- 优惠券列表 -->
         <view class="popup-cnt">
-          <block v-if="couponSts == 1">
+          <block v-if="couponSts == 1"> <!-- 条件渲染，只有当 couponSts 为 1 时显示可用优惠券 -->
             <view
-              v-for="(item, index) in coupons.canUseCoupons"
+              v-for="(item, index) in coupons.canUseCoupons" <!-- 遍历可用优惠券列表，动态生成每个优惠券项 -->
-              :key="index"
+              :key="index" <!-- 使用索引作为唯一标识 -->
             >
               <coupon
-                :item="item"
+                :item="item" <!-- 传递优惠券数据 -->
-                order="true"
+                order="true" <!-- 标记为订单页面使用 -->
-                can-use="true"
+                can-use="true" <!-- 标记为可用优惠券 -->
-                @check-coupon="checkCoupon"
+                @check-coupon="checkCoupon" <!-- 点击时触发选择优惠券的方法 -->
               />
             </view>
           </block>
-          <block v-if="couponSts == 2">
+          <block v-if="couponSts == 2"> <!-- 条件渲染，只有当 couponSts 为 2 时显示不可用优惠券 -->
             <view
-              v-for="(item, index) in coupons.unCanUseCoupons"
+              v-for="(item, index) in coupons.unCanUseCoupons" <!-- 遍历不可用优惠券列表，动态生成每个优惠券项 -->
-              :key="index"
+              :key="index" <!-- 使用索引作为唯一标识 -->
             >
               <coupon
-                :item="item"
+                :item="item" <!-- 传递优惠券数据 -->
-                order="true"
+                order="true" <!-- 标记为订单页面使用 -->
-                can-use="false"
+                can-use="false" <!-- 标记为不可用优惠券 -->
               />
             </view>
           </block>
-          <view class="botm-empty" />
+          <view class="botm-empty" /> <!-- 空占位符 -->
         </view>
+        <!-- 确认按钮 -->
         <view
-          v-if="couponSts==1"
+          v-if="couponSts == 1" <!-- 条件渲染，只有当 couponSts 为 1 时显示确认按钮 -->
           class="coupon-ok"
         >
-          <text @tap="choosedCoupon">
+          <text @tap="choosedCoupon">确定</text> <!-- 点击时选择优惠券并关闭弹窗 -->
-            确定
-          </text>
         </view>
       </view>
     </view>
@@ -298,230 +235,309 @@
 </template>
 
 <script setup>
-const wxs = number()
+  // 引入 number 函数，用于处理数字格式化（假设此函数用于解析价格）
-let orderEntry = '0' // 订单入口 0购物车 1立即购买
+  const wxs = number()
-/**
+
- * 生命周期函数--监听页面加载
+  // 定义订单入口变量，0 表示从购物车进入，1 表示立即购买
- */
+  let orderEntry = '0'
-onLoad((options) => {
+
-  orderEntry = options.orderEntry
+  /**
-})
+   * 生命周期函数--监听页面加载
-
+   * @param options - 页面加载时传递的参数
-const userAddr = ref(null)
+   */
-/**
+  onLoad((options) => {
- * 生命周期函数--监听页面显示
+    // 根据传递的参数设置订单入口
- */
+    orderEntry = options.orderEntry
-onShow(() => {
-  const pages = getCurrentPages()
-  const currPage = pages[pages.length - 1]
-  if (currPage.selAddress === 'yes') {
-    // 将携带的参数赋值
-    userAddr.value = currPage.item
-  }
-  // 获取订单数据
-  loadOrderData()
-})
-
-let couponIds = []
-const coupons = ref({})
-const total = ref(0)
-const actualTotal = ref(0)
-const orderItems = ref([])
-const totalCount = ref(0)
-const transfee = ref(0)
-const shopReduce = ref('')
-/**
- * 加载订单数据
- */
-const loadOrderData = () => {
-  let addrId = 0
-  if (userAddr.value != null) {
-    addrId = userAddr.value.addrId
-  }
-  uni.showLoading({
-    mask: true
   })
-  http.request({
+
-    url: '/p/order/confirm',
+  // 定义用户收货地址的响应式变量
-    method: 'POST',
+  const userAddr = ref(null)
-    data: {
+
-      addrId,
+  /**
-      orderItem: orderEntry === '1' ? JSON.parse(uni.getStorageSync('orderItem')) : undefined,
+   * 生命周期函数--监听页面显示
-      basketIds: orderEntry === '0' ? JSON.parse(uni.getStorageSync('basketIds')) : undefined,
+   */
-      couponIds,
+  onShow(() => {
-      userChangeCoupon: 1
+    // 获取当前页面栈
+    const pages = getCurrentPages()
+    // 获取当前页面实例
+    const currPage = pages[pages.length - 1]
+    // 如果页面携带了选中的地址信息，则更新 userAddr
+    if (currPage.selAddress === 'yes') {
+      userAddr.value = currPage.item
     }
+    // 加载订单数据
+    loadOrderData()
   })
-    .then(({ data }) => {
+
-      uni.hideLoading()
+  // 定义已选择优惠券ID的数组
-      let orderItemsData = []
+  let couponIds = []
-      data.shopCartOrders[0].shopCartItemDiscounts?.forEach(itemDiscount => {
+
-        orderItemsData = orderItems.value?.concat(itemDiscount.shopCartItems)
+  // 定义优惠券、总金额、实际支付金额、订单商品列表、商品总数、运费和店铺优惠的响应式变量
-      })
+  const coupons = ref({})
-      if (data.shopCartOrders[0].coupons) {
+  const total = ref(0)
-        const canUseCoupons = []
+  const actualTotal = ref(0)
-        const unCanUseCoupons = []
+  const orderItems = ref([])
-        data.shopCartOrders[0].coupons?.forEach(coupon => {
+  const totalCount = ref(0)
-          if (coupon.canUse) {
+  const transfee = ref(0)
-            canUseCoupons.push(coupon)
+  const shopReduce = ref('')
-          } else {
+
-            unCanUseCoupons.push(coupon)
+  /**
-          }
+   * 加载订单数据
+   */
+  const loadOrderData = () => {
+    let addrId = 0
+    // 如果有选择的收货地址，则获取其 ID
+    if (userAddr.value != null) {
+      addrId = userAddr.value.addrId
+    }
+
+    // 显示加载中提示
+    uni.showLoading({
+      mask: true
+    })
+
+    // 发送请求以确认订单数据
+    http.request({
+      url: '/p/order/confirm',
+      method: 'POST',
+      data: {
+        addrId,
+        // 根据订单入口类型，传递不同的数据
+        orderItem: orderEntry === '1' ? JSON.parse(uni.getStorageSync('orderItem')) : undefined,
+        basketIds: orderEntry === '0' ? JSON.parse(uni.getStorageSync('basketIds')) : undefined,
+        couponIds, // 传递已选择的优惠券ID
+        userChangeCoupon: 1 // 标记用户是否更改了优惠券
+      }
+    })
+      .then(({ data }) => {
+        // 隐藏加载中提示
+        uni.hideLoading()
+
+        // 初始化订单商品列表
+        let orderItemsData = []
+        // 遍历商品折扣信息，合并到订单商品列表中
+        data.shopCartOrders[0].shopCartItemDiscounts?.forEach(itemDiscount => {
+          orderItemsData = orderItems.value?.concat(itemDiscount.shopCartItems)
         })
-        coupons.value = {
+
-          totalLength: data.shopCartOrders[0].coupons.length,
+        // 处理优惠券信息
-          canUseCoupons,
+        if (data.shopCartOrders[0].coupons) {
-          unCanUseCoupons
+          const canUseCoupons = [] // 可用优惠券
+          const unCanUseCoupons = [] // 不可用优惠券
+
+          // 分类优惠券
+          data.shopCartOrders[0].coupons?.forEach(coupon => {
+            if (coupon.canUse) {
+              canUseCoupons.push(coupon)
+            } else {
+              unCanUseCoupons.push(coupon)
+            }
+          })
+
+          // 更新优惠券状态
+          coupons.value = {
+            totalLength: data.shopCartOrders[0].coupons.length, // 总优惠券数量
+            canUseCoupons, // 可用优惠券列表
+            unCanUseCoupons // 不可用优惠券列表
+          }
+        }
+
+        // 更新订单相关数据
+        orderItems.value = orderItemsData
+        actualTotal.value = data.actualTotal
+        total.value = data.total
+        totalCount.value = data.totalCount
+        userAddr.value = data.userAddr
+        transfee.value = data.shopCartOrders[0].transfee
+        shopReduce.value = data.shopCartOrders[0].shopReduce
+      })
+      .catch(err => {
+        // 隐藏加载中提示
+        uni.hideLoading()
+        // 处理优惠券选择错误
+        chooseCouponErrHandle(err)
+      })
+  }
+
+  /**
+   * 优惠券选择出错处理方法
+   * @param res - 错误响应对象
+   */
+  const chooseCouponErrHandle = (res) => {
+    // 如果是优惠券不能共用的错误
+    if (res.statusCode == 601) {
+      // 显示错误提示
+      uni.showToast({
+        title: res.data,
+        icon: 'none',
+        duration: 3000,
+        success: () => {
+          // 清空已选择的优惠券ID
+          couponIds = []
         }
+      })
+      // 延迟重新加载订单数据
+      setTimeout(() => {
+        loadOrderData()
+      }, 2500)
+    }
+  }
+
+  /**
+   * 提交订单
+   */
+  const toPay = () => {
+    // 如果没有选择收货地址，提示用户选择
+    if (!userAddr.value) {
+      uni.showToast({
+        title: '请选择地址',
+        icon: 'none'
+      })
+      return
+    }
+    // 调用提交订单的方法
+    submitOrder()
+  }
+
+  // 定义买家留言的响应式变量
+  const remarks = ref('')
+
+  /**
+   * 提交订单
+   */
+  const submitOrder = () => {
+    // 显示加载中提示
+    uni.showLoading({
+      mask: true
+    })
+
+    // 发送请求以提交订单
+    http.request({
+      url: '/p/order/submit',
+      method: 'POST',
+      data: {
+        orderShopParam: [{
+          remarks: remarks.value, // 买家留言
+          shopId: 1 // 店铺ID（此处硬编码为1，可能需要根据实际情况调整）
+        }]
       }
-      orderItems.value = orderItemsData
-      actualTotal.value = data.actualTotal
-      total.value = data.total
-      totalCount.value = data.totalCount
-      userAddr.value = data.userAddr
-      transfee.value = data.shopCartOrders[0].transfee
-      shopReduce.value = data.shopCartOrders[0].shopReduce
     })
-    .catch(err => {
+      .then(({ data }) => {
-      uni.hideLoading()
+        // 隐藏加载中提示
-      chooseCouponErrHandle(err)
+        uni.hideLoading()
+        // 模拟支付
+        normalPay(data.orderNumbers)
+      })
+  }
+
+  /**
+   * 模拟支付，直接提交成功
+   * @param orderNumbers - 订单编号列表
+   */
+  const normalPay = (orderNumbers) => {
+    // 显示加载中提示
+    uni.showLoading({
+      mask: true
     })
-}
+
-
+    // 发送请求以模拟支付
-/**
+    http.request({
- * 优惠券选择出错处理方法
+      url: '/p/order/normalPay',
- */
+      method: 'POST',
-const chooseCouponErrHandle = (res) => {
+      data: {
-  // 优惠券不能共用处理方法
+        orderNumbers
-  if (res.statusCode == 601) {
-    uni.showToast({
-      title: res.data,
-      icon: 'none',
-      duration: 3000,
-      success: () => {
-        couponIds = []
       }
     })
-    setTimeout(() => {
+      .then(({ data }) => {
-      loadOrderData()
+        // 隐藏加载中提示
-    }, 2500)
+        uni.hideLoading()
+        if (data) {
+          // 如果支付成功，显示成功提示并跳转到支付结果页
+          uni.showToast({
+            title: '模拟支付成功',
+            icon: 'none'
+          })
+          setTimeout(() => {
+            uni.navigateTo({
+              url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers
+            })
+          }, 1200)
+        } else {
+          // 如果支付失败，显示失败提示
+          uni.showToast({
+            title: '支付失败！',
+            icon: 'none'
+          })
+        }
+      })
   }
-}
+
-
+  // 定义优惠券状态的响应式变量（1表示可用优惠券，2表示不可用优惠券）
-/**
+  const couponSts = ref(1)
- * 提交订单
+
- */
+  /**
-const toPay = () => {
+   * 切换优惠券状态
-  if (!userAddr.value) {
+   * @param e - 事件对象
-    uni.showToast({
+   */
-      title: '请选择地址',
+  const changeCouponSts = (e) => {
-      icon: 'none'
+    // 更新优惠券状态
-    })
+    couponSts.value = e.currentTarget.dataset.sts
-    return
   }
-  submitOrder()
-}
 
-const remarks = ref('')
+  // 定义弹窗显示状态的响应式变量
-const submitOrder = () => {
+  const popupShow = ref(false)
-  uni.showLoading({
+
-    mask: true
+  /**
-  })
+   * 显示优惠券弹窗
-  http.request({
+   */
-    url: '/p/order/submit',
+  const showCouponPopup = () => {
-    method: 'POST',
+    popupShow.value = true
-    data: {
+  }
-      orderShopParam: [{
+
-        remarks: remarks.value,
+  /**
-        shopId: 1
+   * 关闭优惠券弹窗
-      }]
+   */
-    }
+  const closePopup = () => {
-  })
+    popupShow.value = false
-    .then(({ data }) => {
+  }
-      uni.hideLoading()
+
-      normalPay(data.orderNumbers)
+  /**
+   * 跳转到地址选择页面
+   */
+  const toAddrListPage = () => {
+    // 导航到地址选择页面，并传递订单标识
+    uni.navigateTo({
+      url: '/pages/delivery-address/delivery-address?order=0'
     })
-}
+  }
-
+
-/**
+  /**
- * 模拟支付，直接提交成功
+   * 确认选择好的优惠券
- * @param orderNumbers
+   */
- */
+  const choosedCoupon = () => {
-const normalPay = (orderNumbers) => {
+    // 重新加载订单数据以应用选择的优惠券
-  uni.showLoading({
+    loadOrderData()
-    mask: true
+    // 关闭优惠券弹窗
-  })
+    popupShow.value = false
-  http.request({
+  }
-    url: '/p/order/normalPay',
+
-    method: 'POST',
+  /**
-    data: {
+   * 处理优惠券子组件发过来的选择事件
-      orderNumbers
+   * @param e - 事件对象
+   */
+  const checkCoupon = (e) => {
+    // 获取优惠券ID
+    const couponId = e.detail.couponId
+    // 如果该优惠券未被选择，则添加到已选择优惠券ID列表中
+    if (couponIds.indexOf(couponId) === -1) {
+      couponIds.push(couponId)
+    } else {
+      // 如果该优惠券已被选择，则从已选择优惠券ID列表中移除
+      couponIds.splice(couponIds.indexOf(couponId), 1)
     }
-  })
-    .then(({ data }) => {
-      uni.hideLoading()
-      if (data) {
-        uni.showToast({
-          title: '模拟支付成功',
-          icon: 'none'
-        })
-        setTimeout(() => {
-          uni.navigateTo({
-            url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers
-          })
-        }, 1200)
-      } else {
-        uni.showToast({
-          title: '支付失败！',
-          icon: 'none'
-        })
-      }
-    })
-}
-
-const couponSts = ref(1)
-const changeCouponSts = (e) => {
-  couponSts.value = e.currentTarget.dataset.sts
-}
-
-const popupShow = ref(false)
-const showCouponPopup = () => {
-  popupShow.value = true
-}
-const closePopup = () => {
-  popupShow.value = false
-}
-
-/**
- * 去地址页面
- */
-const toAddrListPage = () => {
-  uni.navigateTo({
-    url: '/pages/delivery-address/delivery-address?order=0'
-  })
-}
-
-/**
- * 确定选择好的优惠券
- */
-const choosedCoupon = () => {
-  loadOrderData()
-  popupShow.value = false
-}
-
-/**
- * 优惠券子组件发过来
- */
-const checkCoupon = (e) => {
-  const index = couponIds.indexOf(e.detail.couponId)
-  if (index === -1) {
-    couponIds.push(e.detail.couponId)
-  } else {
-    couponIds.splice(index, 1)
   }
-}
 </script>
 
 <style scoped lang="scss">
-@use './submit-order.scss';
+  @use './submit-order.scss'; // 引入样式文件
 </style>

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

@@ -1,222 +1,400 @@
+/* 定义容器样式 */
 .container {
+  /* 设置背景颜色 */
   background-color: #f7f7f7;
+  /* 设置底部内边距，以确保内容与底部有适当的空间 */
   padding-bottom: 60rpx;
 }
+
+/* 用户信息模块样式 */
 .userinfo {
+  /* 设置相对定位，以便其子元素可以使用绝对定位 */
   position: relative;
+  /* 占满整个宽度 */
   width: 100%;
+  /* 设置白色背景 */
   background: #fff;
+  /* 文本居中显示 */
   text-align: center;
+  /* 上下内边距，左右无内边距 */
   padding: 30rpx 0;
+
   .userinfo-con {
+    /* 设置固定宽度，使用户信息框在页面中心对齐 */
     width: 240rpx;
+    /* 水平居中 */
     margin: auto;
+
     .userinfo-avatar {
+      /* 确保超出部分不显示 */
       overflow: hidden;
+      /* 块级显示 */
       display: block;
+      /* 设置头像的尺寸 */
       width: 160rpx;
       height: 160rpx;
+      /* 圆形头像 */
       border-radius: 50%;
+      /* 添加阴影效果 */
       box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+      /* 水平居中 */
       margin: auto;
+
       image {
+        /* 设置图像的尺寸 */
         width: 160rpx;
         height: 160rpx;
       }
     }
+
     .userinfo-name {
+      /* 设置字体大小 */
       font-size: 30rpx;
+      /* 加粗字体 */
       font-weight: bold;
+      /* 与头像保持一定间距 */
       margin-top: 20rpx;
+      /* 处理文本溢出 */
       overflow: hidden;
+      /* 使用 WebKit 独有的多行文本截断 */
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
+      /* 当文本溢出时用省略号表示 */
       text-overflow: ellipsis;
+      /* 允许单词内部断行 */
       word-break: break-all;
     }
   }
 }
+
+/* 未登录用户的提示信息样式 */
 .userinfo-none {
+  /* 使用 Flexbox 布局，使子元素垂直和水平居中 */
   display: flex;
+  /* 内边距 */
   padding: 30rpx;
+  /* 白色背景 */
   background: #fff;
+  /* 子元素垂直居中 */
   align-items: center;
+
   .default-pic {
+    /* 右侧内边距 */
     padding-right: 30rpx;
+
     image {
+      /* 设置图像的尺寸 */
       width: 160rpx;
       height: 160rpx;
     }
   }
 }
+
+/* 未登录状态下的按钮和文本样式 */
 .none-login {
   button {
+    /* 按钮背景色为白色 */
     background: #fff;
+
     &::after {
+      /* 移除默认的按钮边框 */
       border: 0;
     }
   }
+
   .unlogin {
+    /* 设置字体大小 */
     font-size: 30rpx;
+    /* 文本左对齐 */
     text-align: left;
+    /* 移除上下内边距 */
     padding: 0;
   }
+
   .click-login {
+    /* 设置较小的字体大小 */
     font-size: 26rpx;
+    /* 颜色较深 */
     color: #777;
+    /* 文本左对齐 */
     text-align: left;
+    /* 移除上下内边距 */
     padding: 0;
   }
 }
+
+/* 绑定手机号的样式 */
 .binding-phone {
+  /* 相对定位 */
   position: relative;
+  /* 白色背景 */
   background: #fff;
+  /* 固定高度 */
   height: 80rpx;
+  /* 行高与高度相同，使文本垂直居中 */
   line-height: 80rpx;
+  /* 内边距 */
   padding: 0 30rpx;
+  /* 上下边框 */
   border-top: 2rpx solid #f7f7f7;
   border-bottom: 2rpx solid #f7f7f7;
+
   .show-tip {
+    /* 设置字体大小 */
     font-size: 26rpx;
   }
+
   .gotobinding {
+    /* 设置圆角 */
     border-radius: 8rpx;
+    /* 字体大小 */
     font-size: 28rpx;
-    color: #e24b4b;
+    /* 颜色为红色 */
+    color: #e24b42;
+    /* 加粗字体 */
     font-weight: bold;
   }
 }
+
+/* 列表内容样式 */
 .list-cont {
+  /* 占满整个宽度 */
   width: 100%;
+  /* 背景颜色 */
   background: #f7f7f7;
+  /* 顶部外边距 */
   margin-top: 20rpx;
+
   .total-order {
+    /* 白色背景 */
     background: #fff;
+
     .order-tit {
+      /* 使用 Flexbox 布局 */
       display: flex;
+      /* 两端对齐 */
       justify-content: space-between;
+      /* 固定高度 */
       height: 80rpx;
+      /* 行高与高度相同，使文本垂直居中 */
       line-height: 80rpx;
+      /* 字体大小 */
       font-size: 30rpx;
+      /* 下边框 */
       border-bottom: 1px solid #f7f7f7;
+      /* 内边距 */
       padding: 0 30rpx;
+
       .checkmore {
+        /* 较小的字体大小 */
         font-size: 22rpx;
+        /* 颜色较暗 */
         color: #80848f;
+        /* 使用 Flexbox 布局 */
         display: flex;
+        /* 垂直居中 */
         align-items: center;
       }
     }
+
     .procedure {
+      /* 使用 Flexbox 布局 */
       display: flex;
+      /* 项目均匀分布 */
       justify-content: space-around;
+      /* 项目垂直居中 */
       align-items: center;
+      /* 字体大小 */
       font-size: 25rpx;
+      /* 固定高度 */
       height: 160rpx;
+
       .items {
+        /* 相对定位 */
         position: relative;
+        /* 使用 Flexbox 布局 */
         display: flex;
+        /* 项目垂直排列 */
         flex-direction: column;
+        /* 项目水平居中 */
         align-items: center;
+
         image {
+          /* 设置图像的尺寸 */
           width: 70rpx;
           height: 70rpx;
+          /* 与下方文字保持间距 */
           margin-bottom: 20rpx;
         }
+
         .num-badge {
+          /* 绝对定位 */
           position: absolute;
+          /* 设置徽章位置 */
           top: -15rpx;
           right: -12rpx;
+          /* 颜色为红色 */
           color: #eb2444;
+          /* 边框颜色为红色 */
           border: 3rpx solid #eb2444;
+          /* 圆形 */
           border-radius: 50rpx;
+          /* 白色背景 */
           background: #fff;
+          /* 最小宽度 */
           min-width: 30rpx;
+          /* 固定高度 */
           height: 30rpx;
+          /* 行高与高度相同，使文本垂直居中 */
           line-height: 30rpx;
+          /* 文本水平居中 */
           text-align: center;
+          /* 内边距 */
           padding: 2rpx;
+          /* 块级显示 */
           display: block;
         }
       }
     }
   }
+
   .my-menu {
+    /* 白色背景 */
     background-color: #fff;
+    /* 顶部外边距 */
     margin-top: 20rpx;
+
     .memu-item {
+      /* 使用 Flexbox 布局 */
       display: flex;
+      /* 项目垂直居中 */
       align-items: center;
+      /* 项目两端对齐 */
       justify-content: space-between;
+      /* 固定高度 */
       height: 100rpx;
+      /* 下边框 */
       border-bottom: 2rpx solid #f7f7f7;
+      /* 内边距 */
       padding: 0 30rpx;
+
       &:nth-child(1) {
+        /* 第一个项目的上边框 */
         border-top: 2rpx solid #f7f7f7;
       }
+
       &:last-child {
+        /* 最后一个项目的下边框移除 */
         border-bottom: none;
       }
+
       text {
+        /* 字体大小 */
         font-size: 28rpx;
       }
+
       image {
+        /* 设置图像的尺寸 */
         width: 50rpx;
         height: 50rpx;
+        /* 与右侧文本保持间距 */
         margin-right: 20rpx;
       }
+
       .i-name {
+        /* 使用 Flexbox 布局 */
         display: flex;
+        /* 项目垂直居中 */
         align-items: center;
       }
     }
   }
 }
+
+/* 箭头样式 */
 .arrowhead {
+  /* 设置箭头的尺寸 */
   width: 15rpx;
   height: 15rpx;
+  /* 上边框 */
   border-top: 2rpx solid #999;
+  /* 右边框 */
   border-right: 2rpx solid #999;
+  /* 旋转45度形成箭头形状 */
   transform: rotate(45deg);
+  /* 左侧外边距 */
   margin-left: 10rpx;
 }
+
+/* 产品栏样式 */
 .prod-col {
+  /* 顶部外边距 */
   margin-top: 20rpx;
+  /* 白色背景 */
   background: #fff;
+  /* 使用 Flexbox 布局 */
   display: flex;
+  /* 项目均匀分布 */
   justify-content: space-around;
+  /* 内边距 */
   padding: 30rpx 0 10rpx 0;
+  /* 字体大小 */
   font-size: 12px;
+
   .col-item {
+    /* 文本居中 */
     text-align: center;
+
     .num {
+      /* 字体较大且加粗 */
       font-size: 16px;
       font-weight: 700;
+      /* 颜色为蓝色 */
       color: #3a86b9;
     }
+
     .tit {
+      /* 行高 */
       line-height: 34px;
     }
   }
 }
+
+/* 登出按钮样式 */
 .log-out {
+  /* 内边距 */
   padding: 20rpx;
+  /* 文本居中 */
   text-align: center;
+  /* 顶部外边距 */
   margin-top: 20rpx;
 }
+
 .log-out-n {
+  /* 字体大小 */
   font-size: 30rpx;
+  /* 水平居中 */
   margin: auto;
+  /* 固定宽度 */
   width: 200rpx;
+  /* 内边距 */
   padding: 20rpx;
+  /* 圆角 */
   border-radius: 10rpx;
+  /* 红色背景 */
   background: #e43130;
+  /* 白色文字 */
   color: #ffffff;
 }
+
+/* 自定义菜单按钮样式 */
 button.memu-btn.memu-item {
+  /* 白色背景 */
   background-color: #fff;
+
   &:after {
+    /* 移除默认的按钮边框 */
     border: 0;
   }
 }

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

@@ -1,221 +1,131 @@
 <template>
   <view class="container">
-    <!-- 用户信息 -->
+    <!-- 用户信息模块 -->
-    <view
+    <!-- 如果用户已授权并登录，则显示用户信息 -->
-      v-if="isAuthInfo"
+    <view v-if="isAuthInfo" class="userinfo">
-      class="userinfo"
-    >
       <view class="userinfo-con">
+        <!-- 用户头像 -->
         <view class="userinfo-avatar">
           <image
             :src="
               loginResult.pic
-                ?
+                ? (loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic)
-                  (loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic)
+                : '/static/images/icon/head04.png'
-                :
-                  '/static/images/icon/head04.png'
             "
           />
         </view>
+        <!-- 用户昵称 -->
         <view class="userinfo-name">
           <view>{{ loginResult.nickName ? loginResult.nickName : "用户昵称" }}</view>
         </view>
       </view>
     </view>
 
-    <view
+    <!-- 如果用户未登录，则显示默认的登录提示 -->
-      v-if="!isAuthInfo"
+    <view v-if="!isAuthInfo" class="userinfo-none">
-      class="userinfo-none"
+      <view class="default-pic" @tap="toLogin">
-    >
-      <view
-        class="default-pic"
-        @tap="toLogin"
-      >
         <image src="@/static/images/icon/head04.png" />
       </view>
-      <view
+      <view class="none-login" @tap="toLogin">
-        class="none-login"
+        <button class="unlogin">未登录</button>
-        @tap="toLogin"
+        <button class="click-login">点击登录账号</button>
-      >
-        <button class="unlogin">
-          未登录
-        </button>
-        <button class="click-login">
-          点击登录账号
-        </button>
       </view>
     </view>
-    <!-- end 用户信息 -->
+    <!-- end 用户信息模块 -->
 
     <view class="list-cont">
-      <!-- 订单状态 -->
+      <!-- 订单状态模块 -->
       <view class="total-order">
         <view class="order-tit">
-          <text style="font-weight:bold">
+          <text style="font-weight:bold">我的订单</text>
-            我的订单
+          <!-- 查看全部订单按钮 -->
-          </text>
+          <view class="checkmore" data-sts="0" @tap="toOrderListPage">
-          <view
-            class="checkmore"
-            data-sts="0"
-            @tap="toOrderListPage"
-          >
             <text>查看全部</text>
             <text class="arrowhead" />
           </view>
         </view>
+        <!-- 订单流程条 -->
         <view class="procedure">
-          <view
+          <!-- 待支付订单 -->
-            class="items"
+          <view class="items" data-sts="1" @tap="toOrderListPage">
-            data-sts="1"
-            @tap="toOrderListPage"
-          >
             <image src="@/static/images/icon/toPay.png" />
             <text>待支付</text>
-            <text
+            <!-- 如果有待支付订单，显示数量 -->
-              v-if="orderAmount.unPay>0"
+            <text v-if="orderAmount.unPay > 0" class="num-badge">{{ orderAmount.unPay }}</text>
-              class="num-badge"
-            >
-              {{ orderAmount.unPay }}
-            </text>
           </view>
-          <view
+          <!-- 待发货订单 -->
-            class="items"
+          <view class="items" data-sts="2" @tap="toOrderListPage">
-            data-sts="2"
-            @tap="toOrderListPage"
-          >
             <image src="@/static/images/icon/toDelivery.png" />
             <text>待发货</text>
-            <text
+            <!-- 如果有待发货订单，显示数量 -->
-              v-if="orderAmount.payed>0"
+            <text v-if="orderAmount.payed > 0" class="num-badge">{{ orderAmount.payed }}</text>
-              class="num-badge"
-            >
-              {{ orderAmount.payed }}
-            </text>
           </view>
-          <view
+          <!-- 待收货订单 -->
-            class="items"
+          <view class="items" data-sts="3" @tap="toOrderListPage">
-            data-sts="3"
-            @tap="toOrderListPage"
-          >
             <image src="@/static/images/icon/toTake.png" />
             <text>待收货</text>
-            <text
+            <!-- 如果有待收货订单，显示数量 -->
-              v-if="orderAmount.consignment>0"
+            <text v-if="orderAmount.consignment > 0" class="num-badge">{{ orderAmount.consignment }}</text>
-              class="num-badge"
-            >
-              {{ orderAmount.consignment }}
-            </text>
           </view>
-          <view
+          <!-- 已完成订单 -->
-            class="items"
+          <view class="items" data-sts="5" @tap="toOrderListPage">
-            data-sts="5"
-            @tap="toOrderListPage"
-          >
             <image src="@/static/images/icon/toComment.png" />
             <text>已完成</text>
           </view>
         </view>
       </view>
-      <!--end 订单状态 -->
+      <!-- end 订单状态模块 -->
 
+      <!-- 产品栏 -->
       <view class="prod-col">
-        <view
+        <!-- 我的收藏 -->
-          class="col-item"
+        <view class="col-item" @tap="myCollectionHandle">
-          @tap="myCollectionHandle"
+          <view v-if="loginResult" class="num">{{ collectionCount }}</view>
-        >
+          <view v-else class="num">--</view>
-          <view
+          <view class="tit">我的收藏</view>
-            v-if="loginResult"
-            class="num"
-          >
-            {{ collectionCount }}
-          </view>
-          <view
-            v-else
-            class="num"
-          >
-            --
-          </view>
-          <view class="tit">
-            我的收藏
-          </view>
         </view>
-        <view
+        <!-- 我的消息 -->
-          class="col-item"
+        <view class="col-item" @tap="handleTips">
-          @tap="handleTips"
+          <view v-if="loginResult" class="num">5</view>
-        >
+          <view v-else class="num">--</view>
-          <view
+          <view class="tit">我的消息</view>
-            v-if="loginResult"
-            class="num"
-          >
-            5
-          </view>
-          <view
-            v-else
-            class="num"
-          >
-            --
-          </view>
-          <view class="tit">
-            我的消息
-          </view>
         </view>
-        <view
+        <!-- 我的足迹 -->
-          class="col-item"
+        <view class="col-item" @tap="handleTips">
-          @tap="handleTips"
+          <view v-if="loginResult" class="num">3</view>
-        >
+          <view v-else class="num">--</view>
-          <view
+          <view class="tit">我的足迹</view>
-            v-if="loginResult"
-            class="num"
-          >
-            3
-          </view>
-          <view
-            v-else
-            class="num"
-          >
-            --
-          </view>
-          <view class="tit">
-            我的足迹
-          </view>
         </view>
       </view>
 
+      <!-- 菜单列表 -->
       <view class="my-menu">
-        <view
+        <!-- 分销中心 -->
-          class="memu-item"
+        <view class="memu-item" @tap="toDistCenter">
-          @tap="toDistCenter"
-        >
           <view class="i-name">
             <image src="@/static/images/icon/promotion.png" />
             <text>分销中心</text>
           </view>
           <view class="arrowhead" />
         </view>
-        <view
+        <!-- 领券中心 -->
-          class="memu-item"
+        <view class="memu-item" @tap="toCouponCenter">
-          @tap="toCouponCenter"
-        >
           <view class="i-name">
             <image src="@/static/images/icon/getCoupon.png" />
             <text>领券中心</text>
           </view>
           <view class="arrowhead" />
         </view>
-        <view
+        <!-- 我的优惠券 -->
-          class="memu-item"
+        <view class="memu-item" @tap="toMyCouponPage">
-          @tap="toMyCouponPage"
-        >
           <view class="i-name">
             <image src="@/static/images/icon/myCoupon.png" />
             <text>我的优惠券</text>
           </view>
           <view class="arrowhead" />
         </view>
-        <view
+        <!-- 收货地址 -->
-          class="memu-item"
+        <view class="memu-item" @tap="toAddressList">
-          @tap="toAddressList"
-        >
           <view class="i-name">
             <image src="@/static/images/icon/myAddr.png" />
             <text>收货地址</text>
@@ -223,13 +133,10 @@
           <view class="arrowhead" />
         </view>
       </view>
-      <!--end 列表项 -->
+      <!-- end 菜单列表 -->
 
-      <view
+      <!-- 登出按钮，仅在用户已登录时显示 -->
-        v-if="isAuthInfo"
+      <view v-if="isAuthInfo" class="log-out" @tap="logout">
-        class="log-out"
-        @tap="logout"
-      >
         <view class="log-out-n">
           <text>退出登录</text>
         </view>
@@ -239,84 +146,100 @@
 </template>
 
 <script setup>
+// 导入环境变量中的资源URL
 const picDomain = import.meta.env.VITE_APP_RESOURCES_URL
 
-const isAuthInfo = ref(false)
+// 定义响应式变量
-const loginResult = ref('')
+const isAuthInfo = ref(false) // 是否已授权登录
-const orderAmount = ref('')
+const loginResult = ref('') // 登录结果对象
+const orderAmount = ref('') // 订单数量统计
+
 /**
  * 生命周期函数--监听页面显示
  */
 onShow(() => {
+  // 从本地存储中获取登录结果，并更新登录状态
   loginResult.value = uni.getStorageSync('loginResult')
   isAuthInfo.value = !!loginResult.value
-  // 加载订单数字
+  // 如果已登录，加载订单数字和收藏量
   if (isAuthInfo.value) {
-    uni.showLoading()
+    uni.showLoading() // 显示加载中提示
     http.request({
       url: '/p/myOrder/orderCount',
       method: 'GET',
       data: {}
     })
       .then(({ data }) => {
-        uni.hideLoading()
+        uni.hideLoading() // 隐藏加载中提示
-        orderAmount.value = data
+        orderAmount.value = data // 更新订单数量
       })
-    showCollectionCount()
+    showCollectionCount() // 加载收藏量
   }
 })
 
+// 分销中心功能暂未实现
 const toDistCenter = () => {
   uni.showToast({
     icon: 'none',
     title: '该功能未开源'
   })
 }
+
+// 领券中心功能暂未实现
 const toCouponCenter = () => {
   uni.showToast({
     icon: 'none',
     title: '该功能未开源'
   })
 }
+
+// 我的优惠券功能暂未实现
 const toMyCouponPage = () => {
   uni.showToast({
     icon: 'none',
     title: '该功能未开源'
   })
 }
+
+// 消息和足迹功能暂未实现
 const handleTips = () => {
   uni.showToast({
     icon: 'none',
     title: '该功能未开源'
   })
 }
+
+// 跳转到收货地址页面
 const toAddressList = () => {
   uni.navigateTo({
     url: '/pages/delivery-address/delivery-address'
   })
 }
 
+// 跳转到订单列表页面
 const toOrderListPage = (e) => {
-  const sts = e.currentTarget.dataset.sts
+  const sts = e.currentTarget.dataset.sts // 获取订单状态码
   uni.navigateTo({
-    url: '/pages/orderList/orderList?sts=' + sts
+    url: '/pages/orderList/orderList?sts=' + sts // 根据状态码跳转到对应的订单列表页
   })
 }
 
+// 定义收藏量的响应式变量
 const collectionCount = ref(0)
+
 /**
  * 查询所有的收藏量
  */
 const showCollectionCount = () => {
-  uni.showLoading()
+  uni.showLoading() // 显示加载中提示
   http.request({
     url: '/p/user/collection/count',
     method: 'GET',
     data: {}
   })
     .then(({ data }) => {
-      uni.hideLoading()
+      uni.hideLoading() // 隐藏加载中提示
-      collectionCount.value = data
+      collectionCount.value = data // 更新收藏量
     })
 }
 
@@ -324,14 +247,14 @@ const showCollectionCount = () => {
  * 我的收藏跳转
  */
 const myCollectionHandle = () => {
-  let url = '/pages/prod-classify/prod-classify?sts=5'
+  let url = '/pages/prod-classify/prod-classify?sts=5' // 默认跳转路径
-  const id = 0
+  const id = 0 // 假设的ID（这里可能需要根据实际情况调整）
-  const title = '我的收藏商品'
+  const title = '我的收藏商品' // 标题
   if (id) {
-    url += '&tagid=' + id + '&title=' + title
+    url += '&tagid=' + id + '&title=' + title // 如果有ID，则附加参数
   }
   uni.navigateTo({
-    url
+    url // 跳转到指定页面
   })
 }
 
@@ -340,7 +263,7 @@ const myCollectionHandle = () => {
  */
 const toLogin = () => {
   uni.navigateTo({
-    url: '/pages/accountLogin/accountLogin'
+    url: '/pages/accountLogin/accountLogin' // 跳转到登录页面
   })
 }
 
@@ -353,23 +276,23 @@ const logout = () => {
     method: 'post'
   })
     .then(() => {
-      util.removeTabBadge()
+      util.removeTabBadge() // 移除标签页徽章
-      uni.removeStorageSync('loginResult')
+      uni.removeStorageSync('loginResult') // 清除本地存储的登录结果
-      uni.removeStorageSync('token')
+      uni.removeStorageSync('token') // 清除本地存储的token
       uni.showToast({
         title: '退出成功',
         icon: 'none'
       })
-      orderAmount.value = ''
+      orderAmount.value = '' // 清空订单数量
       setTimeout(() => {
         uni.switchTab({
-          url: '/pages/index/index'
+          url: '/pages/index/index' // 切换回首页
         })
-      }, 1000)
+      }, 1000) // 延迟1秒执行切换操作
     })
 }
 </script>
 
 <style scoped lang="scss">
-@use './user.scss';
+@use './user.scss'; // 引入用户样式文件
 </style>