倒计时列表实现(小程序端Vue)

news/2024/7/20 2:16:21 标签: 小程序

//rich-text主要用来将展示html格式的,可以直接使用这个标签
<view class="ptBox" v-for="(item,index) in orderList" :key="index">   
    <rich-text :nodes="item.limit_time|limitTimeFilter"></rich-text>  
</view>

引入工具方法

import {formateTimeStamp} from '@/utils/index.js'
filters: {
    // 拼团有效期的filter
    limitTimeFilter (val){
        if (val > 0) {
            let formateLimitTimes = formateTimeStamp(val);
            let txt = `<div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">
                            ${formateLimitTimes.hour}
                        </div>
                        <div style="display:inline-block;color:#F32B2B; margin:0 5rpx;">:</div>
                        <div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">${formateLimitTimes.min}</div>
                        <div style="display:inline-block;color:#F32B2B; margin:0 5rpx;">:</div>
                        <div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">${formateLimitTimes.seconds}</div>`;
            return txt;
            } else {
            const twtxt = `0 时 0 分 0 秒`
            return twtxt;
            }
    } 
}, 
async findPinTuanOrderVos(){
    try{ 
        let res=await findPinTuanOrderVos(); 
        //数组返回的restHour:剩余小时
        //restMinute :剩余分钟
        //restSecond :剩余秒
        this.orderList=res.map((vs)=>{ //更新数组
            return { 
            //将返回的时分秒,计算成时间戳
...vs,limit_time:Number(vs.restHour*3600)+Number(vs.restMinute*60)+Number(vs.restSecond) }
        })
        this.ticker = setInterval(() => { //执行循环
            for(let i=0;i<res.length;i++){  
                    //每循环一次将时间戳减一
                this.orderList[i].limit_time=this.orderList[i].limit_time - 1
               
            } 
        },1000)
    }catch(v){
        
    } 
},

工具类封装

//utils/index.js

// 计算出时间戳的具体数据:比如将85400转化为 n时n分n秒
export function formateTimeStamp (timeStamp) {
  var hour;
  var min;
  var seconds;

  hour = parseInt(timeStamp / (60 * 60)) // 计算整数小时数
  var afterHour = timeStamp - hour * 60 * 60 // 取得算出小时数后剩余的秒数
  min = parseInt(afterHour / 60) // 计算整数分
  seconds = parseInt(timeStamp - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数

  if (hour < 10) {
    hour = '0' + hour
  }

  if (min < 10) {
    min = '0' + min;
  }

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  const restTime = {
    hour: hour,
    min: min,
    seconds: seconds
  }
  return restTime
}


http://www.niftyadmin.cn/n/5038706.html

相关文章

免费开源 | 基于SSM的校园订餐系统

源码下载地址获取 关注并私信回复“订餐”&#xff0c;获取源码下载方式 一定要关注后发消息&#xff0c;否则系统限制无法回复消息 感谢开源&#xff01;侵删&#xff01; 一、功能实现 1. 前台模块 前台主要功能有&#xff1a;用户注册、用户登录、我的购物车、我的订单、…

大数据之Hive(三)

分区表 概念和常用操作 将一个大表的数据按照业务需要分散存储到多个目录&#xff0c;每个目录称为该表的一个分区。一般来说是按照日期来作为分区的标准。在查询时可以通过where子句来选择查询所需要的分区&#xff0c;这样查询效率会提高很多。 ①创建分区表 hive (defau…

爬虫入门基础-Selenium反爬

在网络时代&#xff0c;爬虫作为一种强大的数据采集工具&#xff0c;被广泛应用于各行各业。然而&#xff0c;许多网站为了防止被恶意爬取数据&#xff0c;采取了各种反爬虫机制。为了能够成功地绕过这些机制&#xff0c;Selenium成为了爬虫领域的一把利器。本文将为你介绍爬虫…

vue3使用vue-virtual-scroller虚拟滚动遇到的问题

安装和使用 见官方文档&#xff1a;https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller 如何获取子组件的实例 背景 本来正常情况下&#xff0c;要获取v-for渲染的子组件的实例&#xff0c;通过ref绑定即可获取到数组&#xff0c;并…

小程序开发一个多少钱啊

在今天的数字化时代&#xff0c;小程序已经成为一种非常流行的应用程序形式。由于它们的便捷性、易用性和多功能性&#xff0c;小程序吸引了越来越多的用户和企业。但是&#xff0c;很多人在考虑开发一个小程序时&#xff0c;都会遇到同一个问题&#xff1a;开发一个小程序需要…

信息化发展53

数据标准化 1 、数据标准化是实现数据共享的基础。 2 、数据标准化的主要内容包括元数据标准化、数据元标准化、数据模式标准化、数据分类与编码标准化和数据标准化管理。 元数据标准化 1 、元数据是关于数据的数据&#xff08; Data About Data &#xff09;。其实质是用于…

flarum 论坛 User Statistics插件修改

此插件在中国使用日期不是很理想&#xff0c;于是决定修改代码 下面是插件信息&#xff1a; User Statistics A Flarum extension. Add some user statistics in flarum posts, this extension require clarkwinkelmann/flarum-ext-likes-received and will be installed au…

01-初识HTML

01-初识HTML 学习目标&#xff1a; 理解HTML的基本语法掌握排版标签实现标题等效果相对路径和绝对路径媒体标签&#xff08;图片、音频、视频&#xff09;超链接 一、基础认知 了解网页组成和五大浏览器 明确Web标准的构成 1.1 认识网页 以下网页有哪些部分组成 文字、图片、…