Эх сурвалжийг харах

📖 code review:秒杀列表

YunaiV 1 жил өмнө
parent
commit
ccb5796468

+ 16 - 25
pages/activity/seckill/list.vue

@@ -1,3 +1,4 @@
+<!-- 秒杀活动列表 -->
 <template>
   <s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }">
     <!--顶部背景图-->
@@ -20,7 +21,8 @@
     <view class="flex align-center justify-between ss-p-25">
       <!-- 左侧图标 -->
       <view class="time-icon">
-        <image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png"></image>
+        <!-- TODO 芋艿:图片统一维护 -->
+        <image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" />
       </view>
       <scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
         <view v-for="(config, index) in timeConfigList" :key="index"
@@ -34,6 +36,7 @@
         </view>
       </scroll-view>
     </view>
+
     <!-- 内容区 -->
     <view class="list-content">
       <!-- 活动倒计时 -->
@@ -52,6 +55,7 @@
           <view v-else> {{ activeTimeConfig?.status }} </view>
         </view>
       </view>
+
       <!-- 活动列表 -->
       <scroll-view
         class="scroll-box"
@@ -118,13 +122,9 @@
 
   // 商品控件显示的字段(不显示库存、销量。改为显示自定义的进度条)
   const goodsFields = {
-    // 商品名称
     name: { show: true },
-    // 商品介绍
     introduction: { show: true },
-    // 商品价格
     price: { show: true },
-    // 市场价
     marketPrice: { show: true },
   };
 
@@ -156,18 +156,15 @@
     scrollToTimeConfig(activeTimeIndex.value)
   }
 
-  // 当前选中的时间段的元素ID
-  const activeTimeElId = ref('')
   // 滚动到指定时间段
+  const activeTimeElId = ref('') // 当前选中的时间段的元素ID
   const scrollToTimeConfig = (index) => {
     nextTick(() => activeTimeElId.value = `timeItem${index}`)
   }
 
-  // 当前选中的时间段的索引
-  const activeTimeIndex = ref(0)
-  // 当前选中的时间段
-  const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value])
   // 切换时间段
+  const activeTimeIndex = ref(0) // 当前选中的时间段的索引
+  const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]) // 当前选中的时间段
   const handleChangeTimeConfig = (index) => {
     activeTimeIndex.value = index
 
@@ -189,22 +186,15 @@
 
   //#region 分页查询活动列表
 
-  // 活动分页查询参数
+  // 查询活动列表
   const activityPageParams = reactive({
-    // 时间段ID
-    id: 0,
-    // 页码
-    pageNo: 1,
-    // 每页数量
-    pageSize: 5,
+    id: 0, // 时间段 ID
+    pageNo: 1, // 页码
+    pageSize: 5, // 每页数量
   })
-  // 活动总数
-  const activityTotal = ref(0)
-  // 活动列表
-  const activityList = ref([])
-  // 页面加载状态
-  const loadStatus = ref('')
-  // 查询活动列表
+  const activityTotal = ref(0) // 活动总数
+  const activityList = ref([]) // 活动列表
+  const loadStatus = ref('') // 页面加载状态
   async function getActivityList() {
     loadStatus.value = 'loading';
     const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams)
@@ -227,6 +217,7 @@
   }
   // 上拉加载更多
   onReachBottom(() => loadMore());
+
   //#endregion
 
   // 页面初始化

+ 4 - 1
pages/goods/seckill.vue

@@ -1,3 +1,4 @@
+<!-- 秒杀商品详情 -->
 <template>
   <s-layout :onShareAppMessage="shareInfo" navbar="goods">
     <!-- 标题栏 -->
@@ -110,9 +111,11 @@
               :class="
                 state.goodsInfo.stock === 0 || activity.status != 'ing' ? '' : ''
               "
-              >秒杀价</view
             >
+              秒杀价
+            </view>
           </button>
+          <!-- TODO @疯狂:status 判断不太对 -->
           <button
             class="ss-reset-button btn-box ss-flex-col"
             @tap="state.showSelectSku = true"

+ 4 - 0
sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue

@@ -1,3 +1,4 @@
+<!-- 秒杀商品的 SKU 选择,和 s-select-sku.vue 类似 -->
 <template>
 	<!-- 规格弹窗 -->
 	<su-popup :show="show" round="10" @close="emits('close')">
@@ -157,6 +158,7 @@
       state.selectedSku.count = buyCount;
     }
   }
+
   // 改变禁用状态
   const changeDisabled = (isChecked = false, propertyId = 0, valueId = 0) => {
     let newSkus = []; // 所有可以选择的 sku 数组
@@ -230,6 +232,7 @@
       }
     }
   };
+
   // 获取可用的(有库存的)SKU 列表
   const getCanUseSkuList = () => {
     let newSkus = [];
@@ -250,6 +253,7 @@
     }
     return newSkus;
   };
+
   // 选择规格
   const onSelectSku = (propertyId, valueId) => {
     // 清空已选择