📖 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> <template>
<s-layout navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }"> <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="flex align-center justify-between ss-p-25">
<!-- 左侧图标 --> <!-- 左侧图标 -->
<view class="time-icon"> <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> </view>
<scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation> <scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
<view v-for="(config, index) in timeConfigList" :key="index" <view v-for="(config, index) in timeConfigList" :key="index"
@@ -34,6 +36,7 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 内容区 --> <!-- 内容区 -->
<view class="list-content"> <view class="list-content">
<!-- 活动倒计时 --> <!-- 活动倒计时 -->
@@ -52,6 +55,7 @@
<view v-else> {{ activeTimeConfig?.status }} </view> <view v-else> {{ activeTimeConfig?.status }} </view>
</view> </view>
</view> </view>
<!-- 活动列表 --> <!-- 活动列表 -->
<scroll-view <scroll-view
class="scroll-box" class="scroll-box"
@@ -118,13 +122,9 @@
// 商品控件显示的字段(不显示库存、销量。改为显示自定义的进度条) // 商品控件显示的字段(不显示库存、销量。改为显示自定义的进度条)
const goodsFields = { const goodsFields = {
// 商品名称
name: { show: true }, name: { show: true },
// 商品介绍
introduction: { show: true }, introduction: { show: true },
// 商品价格
price: { show: true }, price: { show: true },
// 市场价
marketPrice: { show: true }, marketPrice: { show: true },
}; };
@@ -156,18 +156,15 @@
scrollToTimeConfig(activeTimeIndex.value) scrollToTimeConfig(activeTimeIndex.value)
} }
// 当前选中的时间段的元素ID
const activeTimeElId = ref('')
// 滚动到指定时间段 // 滚动到指定时间段
const activeTimeElId = ref('') // 当前选中的时间段的元素ID
const scrollToTimeConfig = (index) => { const scrollToTimeConfig = (index) => {
nextTick(() => activeTimeElId.value = `timeItem${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) => { const handleChangeTimeConfig = (index) => {
activeTimeIndex.value = index activeTimeIndex.value = index
@@ -189,22 +186,15 @@
//#region 分页查询活动列表 //#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() { async function getActivityList() {
loadStatus.value = 'loading'; loadStatus.value = 'loading';
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams) const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams)
@@ -227,6 +217,7 @@
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => loadMore()); onReachBottom(() => loadMore());
//#endregion //#endregion
// 页面初始化 // 页面初始化
+4 -1
View File
@@ -1,3 +1,4 @@
<!-- 秒杀商品详情 -->
<template> <template>
<s-layout :onShareAppMessage="shareInfo" navbar="goods"> <s-layout :onShareAppMessage="shareInfo" navbar="goods">
<!-- 标题栏 --> <!-- 标题栏 -->
@@ -110,9 +111,11 @@
:class=" :class="
state.goodsInfo.stock === 0 || activity.status != 'ing' ? '' : '' state.goodsInfo.stock === 0 || activity.status != 'ing' ? '' : ''
" "
>秒杀价</view
> >
秒杀价
</view>
</button> </button>
<!-- TODO @疯狂status 判断不太对 -->
<button <button
class="ss-reset-button btn-box ss-flex-col" class="ss-reset-button btn-box ss-flex-col"
@tap="state.showSelectSku = true" @tap="state.showSelectSku = true"
@@ -1,3 +1,4 @@
<!-- 秒杀商品的 SKU 选择 s-select-sku.vue 类似 -->
<template> <template>
<!-- 规格弹窗 --> <!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')"> <su-popup :show="show" round="10" @close="emits('close')">
@@ -157,6 +158,7 @@
state.selectedSku.count = buyCount; state.selectedSku.count = buyCount;
} }
} }
// 改变禁用状态 // 改变禁用状态
const changeDisabled = (isChecked = false, propertyId = 0, valueId = 0) => { const changeDisabled = (isChecked = false, propertyId = 0, valueId = 0) => {
let newSkus = []; // 所有可以选择的 sku 数组 let newSkus = []; // 所有可以选择的 sku 数组
@@ -230,6 +232,7 @@
} }
} }
}; };
// 获取可用的(有库存的)SKU 列表 // 获取可用的(有库存的)SKU 列表
const getCanUseSkuList = () => { const getCanUseSkuList = () => {
let newSkus = []; let newSkus = [];
@@ -250,6 +253,7 @@
} }
return newSkus; return newSkus;
}; };
// 选择规格 // 选择规格
const onSelectSku = (propertyId, valueId) => { const onSelectSku = (propertyId, valueId) => {
// 清空已选择 // 清空已选择