📖 code review:秒杀列表

This commit is contained in:
YunaiV
2023-12-27 19:22:55 +08:00
parent 74b450ec3c
commit ccb5796468
3 changed files with 25 additions and 27 deletions
+17 -26
View File
@@ -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,
})
// 活动总数
const activityTotal = ref(0)
// 活动列表
const activityList = ref([])
// 页面加载状态
const loadStatus = ref('')
// 查询活动列表
const activityPageParams = reactive({
id: 0, // 时间段 ID
pageNo: 1, // 页码
pageSize: 5, // 每页数量
})
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
View File
@@ -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"
@@ -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) => {
// 清空已选择