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

front-end/mall4uni/src/pages/delivery-address/delivery-address.scss

@@ -1,30 +1,53 @@
+/* 
+.container 类用于设置页面整体容器的样式。
+设置了背景颜色为浅灰色（#f4f4f4），顶部添加了一条 2rpx 宽的灰色边框（#e9eaec），并且设置最小高度为视口高度（100vh），确保页面在内容较少时也能占满整个屏幕高度。
+*/
 .container {
   background-color: #f4f4f4;
   border-top: 2rpx solid #e9eaec;
   min-height: 100vh;
 }
+
+/* 
+.main 类用于页面主体部分的样式设置。
+设置了顶部外边距为 20rpx，底部内边距为 150rpx，通过这两个属性来调整主体内容在页面中的位置以及预留底部空间（可能用于放置其他固定在底部的元素等情况）。
+*/
 .main {
   margin-top: 20rpx;
   padding-bottom: 150rpx;
 }
+
+/* 
+.address 类用于地址相关区域的整体样式设置，该区域宽度占满父元素（100%），背景颜色为白色（#fff），底部有一条 2rpx 宽的灰色边框（#e9eaec），并且设置了底部外边距为 15rpx，用于与下方元素隔开一定距离。
+其内部还有多个子元素的样式设置，用于更细致地布局和展示地址相关信息。
+*/
 .address {
   margin-bottom: 15rpx;
   width: 100%;
   background-color: #fff;
   border-bottom: 2rpx solid #e9eaec;
+  /* 
+.personal 类是 address 内部用于个人信息相关部分的样式设置，设置了相对定位，方便内部的一些元素基于该元素进行定位，同时设置了上下和左右的内边距，并且底部添加了一条 3rpx 宽的虚线边框（#e9eaec），用于视觉上区分不同部分的信息。
+  其内部还有更细化的子元素样式设置。
+  */
   .personal {
     position: relative;
     padding: 20rpx 30rpx;
     border-bottom: 3rpx dashed #e9eaec;
+    /* 
+  .info-tit 类用于个人信息标题部分的样式设置，内部包含姓名（.name）、电话（.tel）等信息以及一个图片元素的样式设置，用于展示相关图标等情况，通过不同的样式属性来控制它们的布局、字体大小、显示方式等。
+    */
     .info-tit {
       .name {
         margin-right: 30rpx;
         font-size: 32rpx;
         display: inline-block;
       }
+
       .tel {
         font-size: 30rpx;
       }
+
       image {
         position: absolute;
         right: 30rpx;
@@ -36,21 +59,31 @@
       }
     }
   }
+  /* 
+.select-btn 类用于地址选择按钮相关部分的样式设置，设置了上下和左右的内边距，通过弹性盒子布局（display: flex），使其内部子元素能方便地实现水平对齐（align-items: center）以及两端对齐（justify-content: space-between），一般用于放置如选择、编辑等按钮之类的元素，并且对内部的文本元素（.box）设置了字体大小。
+  */
   .select-btn {
     padding: 15rpx 30rpx;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .box {
       font-size: 26rpx;
     }
   }
 }
+
+/* 
+.personal 类下的.addr 类用于地址详细内容部分的样式设置，设置了字体大小以及上下外边距，其中顶部外边距相对大一些（20rpx），用于调整与上方元素的间距，并且内部的.addr-get 类用于具体地址文本的样式设置，设置为行内块元素（display: inline-block），文字颜色为灰色（#999），宽度占满父元素（100%），并设置了文本换行方式（word-break: break-word），确保长地址文本能正确换行显示。
+这里出现了两次.personal 类，可能在 HTML 结构中有不同的嵌套层级对应不同的样式应用场景，具体要结合 HTML 来看。
+*/
 .personal {
   .addr {
     font-size: 26rpx;
     margin: 10rpx 0;
     margin-top: 20rpx;
+
     .addr-get {
       display: inline-block;
       color: #999;
@@ -59,6 +92,10 @@
     }
   }
 }
+
+/* 
+.footer 类用于页面底部固定栏的样式设置，设置为固定定位（position: fixed），使其固定在页面底部（bottom: 0），宽度占满父元素（100%），高度为 100rpx，并且设置了行高与高度相等，使内部文本垂直居中，文本对齐方式为居中对齐（text-align: center），背景颜色为白色（#fff），添加了一个淡淡的阴影效果，用于在视觉上与页面主体区分开，内部文本元素（text）设置了字体大小和颜色（红色，#eb2444）。
+*/
 .footer {
   position: fixed;
   bottom: 0;
@@ -68,15 +105,24 @@
   text-align: center;
   background-color: #fff;
   box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
+
   text {
     font-size: 32rpx;
     color: #eb2444;
   }
 }
+
+/* 
+.empty 类用于当某个区域内容为空时的整体样式设置，内部包含图片（.img）和文本（.txt）两部分的样式设置，用于展示提示信息，告知用户该区域暂无内容等情况。
+*/
 .empty {
+  /* 
+.img 类用于空内容提示区域中图片部分的样式设置，设置文本对齐方式为居中对齐，顶部外边距为 130rpx，使图片在垂直方向上处于合适位置，内部的图片元素（image）设置了宽度、高度以及显示方式（display: block 和 margin: auto），确保图片能在该区域内水平居中显示。
+  */
   .img {
     text-align: center;
     margin-top: 130rpx;
+
     image {
       width: 100rpx;
       height: 100rpx;
@@ -84,6 +130,9 @@
       margin: auto;
     }
   }
+  /* 
+.txt 类用于空内容提示区域中文本部分的样式设置，设置了顶部外边距为 30rpx，字体大小以及文本对齐方式为居中对齐，文字颜色为灰色（#999），用于展示相应的提示文字内容。
+  */
   .txt {
     margin-top: 30rpx;
     font-size: 24rpx;

front-end/mall4uni/src/pages/delivery-address/delivery-address.vue

@@ -1,59 +1,63 @@
 <template>
+  <!-- 页面的最外层容器，用于包裹整个页面内容 -->
   <view class="container">
+    <!-- 页面主体内容区域 -->
     <view class="main">
-      <view
-        v-if="addressList.length===0"
-        class="empty"
-      >
+      <!-- 当地址列表（addressList）长度为0时，显示此区域，用于提示用户还没有收货地址 -->
+      <view v-if="addressList.length===0"
+            class="empty">
         <view class="img">
+          <!-- 展示一个表示无收货地址的图片 -->
           <image src="http://jiales.gz-yami.com/addr.png" />
         </view>
         <view class="txt">
           您还没有收货地址
         </view>
       </view>
+      <!-- radio-group 组件用于创建一组单选按钮，这里用于管理收货地址相关的单选操作（比如设置默认地址等情况） -->
       <radio-group class="radio-group">
-        <block
-          v-for="(item, index) in addressList"
-          :key="index"
-        >
+        <!-- 使用v-for指令循环遍历addressList数组，index为当前项的索引，每个元素对应一个收货地址信息 -->
+        <block v-for="(item, index) in addressList"
+               :key="index">
+          <!-- 每个收货地址的整体视图容器 -->
           <view class="address">
-            <view
-              class="personal"
-              @tap="selAddrToOrder(item)"
-            >
+            <!-- 个人信息及地址详情展示区域，点击可触发选择该地址用于下单的操作（通过@tap绑定selAddrToOrder方法） -->
+            <view class="personal"
+                  @tap="selAddrToOrder(item)">
+              <!-- 地址信息标题部分，包含收件人姓名、电话号码以及修改地址的图标 -->
               <view class="info-tit">
+                <!-- 展示收件人姓名，通过双括号插值表达式绑定地址对象中的receiver属性 -->
                 <text class="name">
                   {{ item.receiver }}
                 </text>
+                <!-- 展示收件人电话号码，通过双括号插值表达式绑定地址对象中的mobile属性 -->
                 <text class="tel">
                   {{ item.mobile }}
                 </text>
-                <image
-                  src="@/static/images/icon/revise.png"
+                <!-- 修改地址的图标，通过指定的路径引入图片资源，绑定了点击事件toEditAddress，并传递当前地址的ID（通过自定义属性data-addrid），@tap.stop用于阻止事件冒泡 -->
+                <image src="@/static/images/icon/revise.png"
                        :data-addrid="item.addrId"
-                  @tap.stop="toEditAddress"
-                />
+                       @tap.stop="toEditAddress" />
               </view>
+              <!-- 详细地址展示区域 -->
               <view class="addr">
+                <!-- 展示完整的地址信息，通过拼接地址对象中的省份（province）、城市（city）、区域（area）和详细地址（addr）属性来显示 -->
                 <text class="addr-get">
                   {{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
                 </text>
               </view>
             </view>
-            <view
-              class="select-btn"
+            <!-- 设置默认地址相关的操作区域，绑定了点击事件onDefaultAddr，并传递当前地址的ID（通过自定义属性data-addrid） -->
+            <view class="select-btn"
                   :data-addrid="item.addrId"
-              @tap="onDefaultAddr"
-            >
+                  @tap="onDefaultAddr">
               <view class="box">
-                <radio
-                  :value="item.prodId"
+                <!-- 单选按钮，用于设置默认地址操作，绑定了一些属性 -->
+                <radio :value="item.prodId"
                        :checked="item.commonAddr==1"
                        color="#eb2444"
                        :data-addrid="item.addrId"
-                  @tap="onDefaultAddr"
-                />
+                       @tap="onDefaultAddr" />
                 设为默认地址
               </view>
             </view>
@@ -61,59 +65,57 @@
         </block>
       </radio-group>
     </view>
-    <view
-      class="footer"
-      @tap="onAddAddr"
-    >
+    <!-- 页面底部的按钮区域，点击可触发新增收货地址的操作（通过@tap绑定onAddAddr方法） -->
+    <view class="footer"
+          @tap="onAddAddr">
       <text>新增收货地址</text>
     </view>
   </view>
 </template>
 
 <script setup>
-const order = ref(-1)
-onLoad((option) => {
+  // 使用ref函数创建一个响应式变量order，初始值为 -1，可能用于记录与订单相关的状态或标识等信息（从后续代码看，可能与页面跳转来源有关）
+  const order = ref(-1)
+  // 生命周期函数 - 在页面加载时触发，用于获取从其他页面传递过来的参数（option），如果参数中包含order属性，则将其值赋给order响应式变量
+  onLoad((option) => {
     if (option.order) {
       order.value = option.order
     }
-})
+  })
+
+  // 使用ref函数创建一个响应式数组addressList，用于存储收货地址列表数据，初始值为空数组
+  const addressList = ref([])
 
-const addressList = ref([])
-/**
- * 加载地址列表
- */
-onShow(() => {
+  // 生命周期函数 - 在页面显示时触发，一般用于加载初始化数据等操作，这里调用onGetList函数获取收货地址列表数据
+  onShow(() => {
     onGetList()
-})
+  })
 
-/**
- * 获取收获列表接口
- */
-const onGetList = () => {
+  // 获取收货地址列表的函数，通过发送HTTP请求到指定接口（/p/address/list）获取地址列表数据
+  const onGetList = () => {
+    // 显示加载提示框，告知用户正在加载数据
     uni.showLoading()
     http.request({
       url: '/p/address/list',
       method: 'GET'
     })
       .then(({ data }) => {
+        // 将获取到的地址列表数据赋值给addressList响应式变量
         addressList.value = data
+        // 隐藏加载提示框
         uni.hideLoading()
       })
-}
+  }
 
-/**
- * 新增收货地址
- */
-const onAddAddr = () => {
+  // 新增收货地址的函数，通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress），一般用于用户添加新的收货地址
+  const onAddAddr = () => {
     uni.navigateTo({
       url: '/pages/editAddress/editAddress'
     })
-}
+  }
 
-/**
- * 设置为默认地址
- */
-const onDefaultAddr = (e) => {
+  // 设置默认地址的函数，根据点击操作获取当前要设置为默认地址的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后发送HTTP PUT请求到指定接口（/p/address/defaultAddr/ + addrId），传递地址ID数据，用于将对应地址设置为默认地址，请求成功后隐藏加载提示框
+  const onDefaultAddr = (e) => {
     const addrId = e.currentTarget.dataset.addrid
     uni.showLoading()
     http.request({
@@ -126,22 +128,18 @@ const onDefaultAddr = (e) => {
       .then(() => {
         uni.hideLoading()
       })
-}
+  }
 
-/**
- * 修改地址
- */
-const toEditAddress = (e) => {
+  // 修改地址的函数，根据点击操作获取当前要修改的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress）并传递地址ID参数，方便在编辑页面加载对应地址信息进行修改
+  const toEditAddress = (e) => {
     const addrId = e.currentTarget.dataset.addrid
     uni.navigateTo({
       url: '/pages/editAddress/editAddress?addrId=' + addrId
     })
-}
+  }
 
-/**
- * 选择地址 跳转回提交订单页
- */
-const selAddrToOrder = (item) => {
+  // 选择地址并跳转回提交订单页的函数，首先判断order.value的值是否为0（可能表示从特定的提交订单页面过来等情况），如果是，则通过获取当前页面栈（getCurrentPages）获取到上一页面（prevPage），然后将当前选择的地址信息（item）赋值给上一页面的相关变量（item和selAddress），最后通过uni.navigateBack实现返回上一页面（delta: 1表示返回一层页面栈），将选择的地址信息传递回去用于后续操作（比如在提交订单时使用选择的收货地址）
+  const selAddrToOrder = (item) => {
     if (order.value == 0) {
       const pages = getCurrentPages() // 当前页面
       const prevPage = pages[pages.length - 2] // 上一页面
@@ -152,9 +150,10 @@ const selAddrToOrder = (item) => {
         delta: 1
       })
     }
-}
+  }
 </script>
 
 <style scoped lang="scss">
-@use './delivery-address.scss';
+  // 导入外部的SCSS样式文件delivery-address.scss，该文件中应该定义了与当前组件相关的更多具体样式规则，通过scoped属性，使得样式仅作用于当前组件内部的元素
+  @use './delivery-address.scss';
 </style>