【uniapp】限时秒杀scroll-view商城秒杀倒计时

【最新代码请前往dcloud下载商城限时秒杀选项卡、tab切换】

1、index.vue

<template><view class="index"><tabs :defaultHour="defaultHour" :optionArr="optionArr"></tabs></view>
</template><script>
import tabs from '@/components/tel-tabs/tel-tabs.vue';
export default {components: {tabs},data() {return {defaultHour: '',optionArr: [{id: 1,hour: '00:00-02:00',hours: '00:00'},{id: 2,hour: '02:00-04:00',hours: '02:00'},{id: 3,hour: '04:00-06:00',hours: '04:00'},{id: 4,hour: '06:00-08:00',hours: '06:00'},{id: 5,hour: '08:00-10:00',hours: '08:00'},{id: 6,hour: '10:00-12:00',hours: '10:00'},{id: 7,hour: '12:00-14:00',hours: '12:00'},{id: 8,hour: '14:00-16:00',hours: '14:00'},{id: 9,hour: '16:00-18:00',hours: '16:00'},{id: 10,hour: '18:00-20:00',hours: '18:00'},{id: 11,hour: '20:00-22:00',hours: '20:00'},{id: 12,hour: '22:00-24:00',hours: '22:00'}]};},onLoad() {this.getComputedTime();},methods: {getComputedTime() {for (var i = 0; i < this.optionArr.length; i++) {const startTimeStr = this.optionArr[i].hour.split('-')[0];const endTimeStr = this.optionArr[i].hour.split('-')[1];const now = new Date();const [startHour, startMinute] = startTimeStr.split(':');const [endHour, endMinute] = endTimeStr.split(':');const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour, startMinute);const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHour, endMinute);if (now.getTime() >= start.getTime() && now.getTime() < end.getTime()) {this.defaultHour = this.optionArr[i].id;}}}}
};
</script><style lang="scss">
.index {width: 750rpx;
}
</style>

2、tel-tabs.vue

<template><view class="options"><scroll-view class="scroll-view_H" scroll-x="true"><view class="options-box"><block v-for="(item, i) in optionArr" :key="i"><view class="options-item" :class="{ noStart: defaultHour < item.id, end: item.id < defaultHour, activeColor: defaultHour == item.id }"><view class="options-item-hour">{{ item.hour }}</view><view class="options-item-status"><span v-if="item.id < defaultHour">已结束</span><span v-else-if="defaultHour == item.id">进行中</span><span v-else-if="defaultHour < item.id">即将开始</span></view></view></block></view></scroll-view></view>
</template><script>
export default {props: ['optionArr', 'defaultHour'],data() {return {};},onLoad() {},methods: {}
};
</script><style lang="scss">
.options {width: 750rpx;.options-box {width: 100%;padding-bottom: 50rpx;box-sizing: border-box;display: flex;.options-item {padding: 15rpx 10rpx;box-sizing: border-box;margin-right: 10rpx;.options-item-hour {width: 200rpx;text-align: center;font-size: 30rpx;font-weight: 500;}.options-item-status {width: 200rpx;text-align: center;font-size: 26rpx;font-weight: 400;margin-top: 6rpx;}}.noStart {background-color: dodgerblue;}.end {background-color: darkgray;}.activeColor {background-color: darkred !important;color: #fff;position: relative;}.activeColor:before {content: '';width: 0px;height: 0px;border-top: 20rpx solid darkred;border-right: 20rpx solid transparent;border-bottom: 20rpx solid transparent;border-left: 20rpx solid transparent;position: absolute;bottom: -38rpx;left: 50%;margin-left: -20rpx;z-index: 100;}}
}
</style>

【uniapp】限时秒杀scroll-view商城秒杀倒计时相关推荐

基于SpringBoot+Mybatis框架的商城秒杀项目总结
最近做了一个以SpringBoot+Mybaits为框架前后端分离的商城秒杀项目,主要使用的工具是Idea和Maven,SpringBoot是一个功能十分强大的框架集合,里面包含了很多的框架. 工程的 ...
【商城秒杀项目】-- 概况
什么是秒杀秒杀场景一般会在电商网站举行一些活动或者节假日在12306网站上抢票时遇到.对于电商网站中一些稀缺或者特价商品,电商网站一般会在约定时间点对其进行限量销售,因为这些商品的特殊性,会吸引大量 ...
【SpringBoot商城秒杀系统项目总结25】项目的亮点和难点及问题解决（源码地址）
[商城限时秒杀系统总结] 在高并发情况下的秒杀优化,我们知道当并发数达到一定量的时候,会对数据库服务器带来很大的压力,那么如何缓解这些压力以及提高并发的QPS就是整个项目的解决重点,也是我们优化系统的 ...
商城秒杀活动实现思路
一.秒杀活动基本概要用户量:超大量.好人/坏人都有. 地域:全国各地业务流程:[前台]商品展示.登记.[后台]数据接入.数据处理需要注意: 不要把秒杀活动的部署在现有商城中,这样极容易让商城服务 ...
java商城源码视频教程_Java商城秒杀系统设计视频教程学习下载（含项目源码）...
本Java商城秒杀系统视频教程目录如下: java高并发秒杀系统1-1节java高并发商城秒杀优化学习指引.mp4 java高并发秒杀系统1-2节项目环境搭建(Eclipse)-节.mp4 ja ...
PHP:关于PHP商城秒杀防止超卖问题
关于PHP商城秒杀防止超卖问题序言: 在同样对数据操作的代码下,redis事务比lua脚本还要慢上许多,会偶尔出现1-10单超卖的现象. 如果想要使用redis事务,删减库存的情况,用redis-& ...
【SpringBoot商城秒杀系统秒杀优化学习笔记】
课程介绍什么是秒杀秒杀场景一般会在电商网站举行一些活动或者节假日在12306网站上抢票时遇到.对于电商网站中一些稀缺或者特价商品,电商网站一般会在约定时间点对其进行限量销售,因为这些商品的特殊性, ...
【微服务】Day16（开发酷鲨商城秒杀业务）
续RabbitMQ 接收RabbitMQ中的消息 quartz包下再创建一个新的类用于接收信息 RabbitMQConsumer代码如下 // 当前接收消息的类,也要保存到Spring容器中 @Com ...
【谷粒商城 -秒杀服务】
谷粒商城–秒杀服务–高级篇笔记十二 1.后台添加秒杀商品未配置秒杀服务相关网关 1.1 配置网关 - id: coupon_routeuri: lb://gulimall-couponpredica ...
谷粒商城--秒杀服务--高级篇笔记十二
谷粒商城–秒杀服务–高级篇笔记十二 1.后台添加秒杀商品未配置秒杀服务相关网关 1.1 配置网关 - id: coupon_routeuri: lb://gulimall-couponpredica ...

【uniapp】限时秒杀scroll-view商城秒杀倒计时

【uniapp】限时秒杀scroll-view商城秒杀倒计时相关推荐

最新文章

热门文章

【uniapp】 限时秒杀scroll-view商城秒杀倒计时

【uniapp】 限时秒杀scroll-view商城秒杀倒计时相关推荐

最新文章

热门文章

【uniapp】限时秒杀scroll-view商城秒杀倒计时

【uniapp】限时秒杀scroll-view商城秒杀倒计时相关推荐