📖 code review:秒杀列表
parent
74b450ec3c
commit
ccb5796468
|
@ -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
|
||||||
|
|
||||||
// 页面初始化
|
// 页面初始化
|
||||||
|
|
|
@ -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) => {
|
||||||
// 清空已选择
|
// 清空已选择
|
||||||
|
|
Loading…
Reference in New Issue