master
parent
f2270efc97
commit
25278226b5
@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<view class="indexPage">
|
||||||
|
<image class="indexBG" src="@/integralMall/static/indexBG.png" mode="widthFix"></image>
|
||||||
|
<view class="userBox">
|
||||||
|
<text>积分余额</text>
|
||||||
|
<view class="">
|
||||||
|
<text class="number">23980</text>
|
||||||
|
<text class="jifen">积分</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card">
|
||||||
|
<view class="cardHead">
|
||||||
|
<image class="miaoshaImg" src="@/integralMall/static/miaoshaImg.png" mode="widthFix"></image>
|
||||||
|
<text class="shuxian">|</text>
|
||||||
|
<text>距结束</text>
|
||||||
|
<uni-countdown class="countdown" :day="1" :hour="2" :minute="30" :second="0" color="#3A71FF" background-color="#FFFFFF" />
|
||||||
|
</view>
|
||||||
|
<view class="cardBody">
|
||||||
|
<view class="list">
|
||||||
|
<view class="listItem" v-for="item in 5">
|
||||||
|
<view class="imgBox">
|
||||||
|
<image src="@/integralMall/static/test/test.png" mode="aspectFill"></image>
|
||||||
|
<uni-tag text="剩余23件" class="unitag"
|
||||||
|
custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
|
||||||
|
</uni-tag>
|
||||||
|
</view>
|
||||||
|
<view class="itemBody">
|
||||||
|
<text class="title">iPhone16 pro</text>
|
||||||
|
<view class="qiangBox">
|
||||||
|
<image class="qiangtag" src="@/integralMall/static/qiangtag.png" mode="aspectFill"></image>
|
||||||
|
<text class="number">20000<text class="jifen">积分</text></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="headBar">
|
||||||
|
<view class="barItem" :class="activeIndex === 0?'active':''" @click="changeBar(0)">
|
||||||
|
<text>全部商品</text>
|
||||||
|
<view class="rect" v-show="activeIndex === 0"></view>
|
||||||
|
</view>
|
||||||
|
<view class="barItem" :class="activeIndex === 1?'active':''" @click="changeBar(1)">
|
||||||
|
<text>我可兑换</text>
|
||||||
|
<view class="rect" v-show="activeIndex === 1"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="proList">
|
||||||
|
<view class="proItem" v-for="item in 5" @click="$util.redirectTo('./pro/detail')">
|
||||||
|
<view class="proLeft">
|
||||||
|
<image class="proImg" src="@/integralMall/static/test/test2.png" mode="aspectFill"></image>
|
||||||
|
<uni-tag text="剩余23件" class="unitag"
|
||||||
|
custom-style="background-color: rgba(0,0,0,0.3); border: none; color: #fff;">
|
||||||
|
</uni-tag>
|
||||||
|
</view>
|
||||||
|
<view class="proRight">
|
||||||
|
<text class="proName">索尼丨索尼A7M4全画幅微单数码相机套装ILCE-7M4高清旅游摄影拍照</text>
|
||||||
|
<view class="tagBox">
|
||||||
|
<uni-tag text="品牌正品" class="unitag"
|
||||||
|
custom-style="background-color: #000000; border: none; color: #FFCC33;">
|
||||||
|
</uni-tag>
|
||||||
|
<uni-tag text="限时限量" class="unitag"
|
||||||
|
custom-style="background-color: #07C160; border: none; color: #FFF9F9;">
|
||||||
|
</uni-tag>
|
||||||
|
</view>
|
||||||
|
<view class="buyBox">
|
||||||
|
<text class="number">25000<text class="jifen">积分</text></text>
|
||||||
|
<image class="qiang" src="@/integralMall/static/qiang.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const activeIndex = ref(0)
|
||||||
|
const changeBar = (index)=>{
|
||||||
|
if(activeIndex.value === index) return;
|
||||||
|
activeIndex.value = index
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.indexPage{
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
.indexBG{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userBox{
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
margin: -40rpx 26rpx 26rpx;
|
||||||
|
background: linear-gradient( 180deg, #D0DDFF 0%, #FFFFFF 100%);
|
||||||
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 40rpx 26rpx;
|
||||||
|
@include fontStyle(28rpx,#000000,left,500,38rpx);
|
||||||
|
@include flexBox(between,center);
|
||||||
|
.number{
|
||||||
|
@include fontStyle(58rpx,#333333,right,800,68rpx);
|
||||||
|
padding-right: 10rpx;
|
||||||
|
}
|
||||||
|
.jifen{
|
||||||
|
@include fontStyle(24rpx,#333333,right,400,38rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
margin: 26rpx;
|
||||||
|
background: linear-gradient( 360deg, #094EF3 0%, #4B91FE 45%, #D6E4FD 100%);
|
||||||
|
box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0,0,0,0.05);
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 26rpx;
|
||||||
|
.cardHead{
|
||||||
|
width: 100%;
|
||||||
|
@include flexBox(start,center);
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
@include fontStyle(34rpx,#000000,left,500,44rpx);
|
||||||
|
.miaoshaImg{
|
||||||
|
width: 142rpx;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.shuxian{
|
||||||
|
padding: 0 26rpx;
|
||||||
|
}
|
||||||
|
.countdown{
|
||||||
|
margin-left: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cardBody{
|
||||||
|
.list{
|
||||||
|
width: 100%;
|
||||||
|
@include flexBox(start,center);
|
||||||
|
overflow-x: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.listItem{
|
||||||
|
width: 240rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-right: 26rpx;
|
||||||
|
}
|
||||||
|
.imgBox{
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
image{
|
||||||
|
width: 240rpx;
|
||||||
|
height: 240rpx;
|
||||||
|
border-radius: 18rpx 18rpx 0 0;
|
||||||
|
}
|
||||||
|
.unitag{
|
||||||
|
position: absolute;
|
||||||
|
top: 180rpx;
|
||||||
|
left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qiangBox{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.qiangtag{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 46rpx;
|
||||||
|
}
|
||||||
|
.itemBody{
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10rpx;
|
||||||
|
.title{
|
||||||
|
@include fontStyle(32rpx,#000000,left,500,44rpx);
|
||||||
|
@include truncateText(1);
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
}
|
||||||
|
.number{
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
@include fontStyle(28rpx,#FFFFFF,left,800,44rpx);
|
||||||
|
.jifen{
|
||||||
|
@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.headBar{
|
||||||
|
width: 60%;
|
||||||
|
margin: 46rpx auto;
|
||||||
|
@include flexBox(around,center);
|
||||||
|
.barItem{
|
||||||
|
position: relative;
|
||||||
|
@include fontStyle(34rpx,#3A71FF,left,400,48rpx);
|
||||||
|
&.active{
|
||||||
|
@include fontStyle(34rpx,#3A71FF,left,bold,48rpx);
|
||||||
|
}
|
||||||
|
.rect{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
z-index: -1;
|
||||||
|
transform: translate(-50%,0%);
|
||||||
|
width: 100%;
|
||||||
|
height: 20rpx;
|
||||||
|
background: linear-gradient( 180deg, #6694FF 0%, #FFFFFF 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.proList{
|
||||||
|
.proItem{
|
||||||
|
margin: 26rpx;
|
||||||
|
@include flexBox(start,start);
|
||||||
|
.proLeft{
|
||||||
|
position: relative;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
.proImg{
|
||||||
|
width: 252rpx;
|
||||||
|
height: 252rpx;
|
||||||
|
border-radius: 18rpx;
|
||||||
|
}
|
||||||
|
.unitag{
|
||||||
|
position: absolute;
|
||||||
|
top: 200rpx;
|
||||||
|
left: 16rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.proRight{
|
||||||
|
flex: 1;
|
||||||
|
min-height: 252rpx;
|
||||||
|
@include flexBox(between,start,column);
|
||||||
|
.tagBox{
|
||||||
|
margin: 10rpx 0;
|
||||||
|
@include flexBox(start,center);
|
||||||
|
.unitag{
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.proName{
|
||||||
|
@include fontStyle(28rpx,#000000,left,500,38rpx);
|
||||||
|
@include truncateText();
|
||||||
|
}
|
||||||
|
.buyBox{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #E6EDFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
@include fontStyle(40rpx,#3A71FF,left,600,48rpx);
|
||||||
|
@include flexBox(between,center);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 26rpx;
|
||||||
|
.jifen{
|
||||||
|
@include fontStyle(24rpx,#3A71FF,left,500,38rpx);
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
.qiang{
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 485 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "day",
|
||||||
|
"uni-countdown.h": "h",
|
||||||
|
"uni-countdown.m": "m",
|
||||||
|
"uni-countdown.s": "s"
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "天",
|
||||||
|
"uni-countdown.h": "时",
|
||||||
|
"uni-countdown.m": "分",
|
||||||
|
"uni-countdown.s": "秒"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"uni-countdown.day": "天",
|
||||||
|
"uni-countdown.h": "時",
|
||||||
|
"uni-countdown.m": "分",
|
||||||
|
"uni-countdown.s": "秒"
|
||||||
|
}
|
||||||
@ -0,0 +1,278 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-countdown">
|
||||||
|
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
|
||||||
|
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
|
||||||
|
<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
|
||||||
|
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
|
||||||
|
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
|
||||||
|
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
|
||||||
|
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
|
||||||
|
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from './i18n/index.js'
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = initVueI18n(messages)
|
||||||
|
/**
|
||||||
|
* Countdown 倒计时
|
||||||
|
* @description 倒计时组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=25
|
||||||
|
* @property {String} backgroundColor 背景色
|
||||||
|
* @property {String} color 文字颜色
|
||||||
|
* @property {Number} day 天数
|
||||||
|
* @property {Number} hour 小时
|
||||||
|
* @property {Number} minute 分钟
|
||||||
|
* @property {Number} second 秒
|
||||||
|
* @property {Number} timestamp 时间戳
|
||||||
|
* @property {Boolean} showDay = [true|false] 是否显示天数
|
||||||
|
* @property {Boolean} showHour = [true|false] 是否显示小时
|
||||||
|
* @property {Boolean} showMinute = [true|false] 是否显示分钟
|
||||||
|
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
|
||||||
|
* @property {String} splitorColor 分割符号颜色
|
||||||
|
* @event {Function} timeup 倒计时时间到触发事件
|
||||||
|
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniCountdown',
|
||||||
|
emits: ['timeup'],
|
||||||
|
props: {
|
||||||
|
showDay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showHour: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showMinute: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showColon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 14
|
||||||
|
},
|
||||||
|
splitorColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
day: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
hour: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
minute: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
second: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
timestamp: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
filterShow : {
|
||||||
|
type:Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timer: null,
|
||||||
|
syncFlag: false,
|
||||||
|
d: '00',
|
||||||
|
h: '00',
|
||||||
|
i: '00',
|
||||||
|
s: '00',
|
||||||
|
leftTime: 0,
|
||||||
|
seconds: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
dayText() {
|
||||||
|
return t("uni-countdown.day")
|
||||||
|
},
|
||||||
|
hourText(val) {
|
||||||
|
return t("uni-countdown.h")
|
||||||
|
},
|
||||||
|
minuteText(val) {
|
||||||
|
return t("uni-countdown.m")
|
||||||
|
},
|
||||||
|
secondText(val) {
|
||||||
|
return t("uni-countdown.s")
|
||||||
|
},
|
||||||
|
timeStyle() {
|
||||||
|
const {
|
||||||
|
color,
|
||||||
|
backgroundColor,
|
||||||
|
fontSize
|
||||||
|
} = this
|
||||||
|
return {
|
||||||
|
color,
|
||||||
|
backgroundColor,
|
||||||
|
fontSize: `${fontSize}px`,
|
||||||
|
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
|
||||||
|
lineHeight: `${fontSize * 20 / 14}px`,
|
||||||
|
borderRadius: `${fontSize * 3 / 14}px`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitorStyle() {
|
||||||
|
const { splitorColor, fontSize, backgroundColor } = this
|
||||||
|
return {
|
||||||
|
color: splitorColor,
|
||||||
|
fontSize: `${fontSize * 12 / 14}px`,
|
||||||
|
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
day(val) {
|
||||||
|
this.changeFlag()
|
||||||
|
},
|
||||||
|
hour(val) {
|
||||||
|
this.changeFlag()
|
||||||
|
},
|
||||||
|
minute(val) {
|
||||||
|
this.changeFlag()
|
||||||
|
},
|
||||||
|
second(val) {
|
||||||
|
this.changeFlag()
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.startData();
|
||||||
|
} else {
|
||||||
|
if (!oldVal) return
|
||||||
|
clearInterval(this.timer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function(e) {
|
||||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||||
|
this.countDown()
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
destroyed() {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
unmounted() {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
methods: {
|
||||||
|
toSeconds(timestamp, day, hours, minutes, seconds) {
|
||||||
|
if (timestamp) {
|
||||||
|
return timestamp - parseInt(new Date().getTime() / 1000, 10)
|
||||||
|
}
|
||||||
|
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
|
||||||
|
},
|
||||||
|
timeUp() {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.$emit('timeup')
|
||||||
|
},
|
||||||
|
countDown() {
|
||||||
|
let seconds = this.seconds
|
||||||
|
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||||
|
if (seconds > 0) {
|
||||||
|
day = Math.floor(seconds / (60 * 60 * 24))
|
||||||
|
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||||
|
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||||
|
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||||
|
} else {
|
||||||
|
this.timeUp()
|
||||||
|
}
|
||||||
|
this.d = String(day).padStart(this.validFilterShow(this.filterShow.d), '0')
|
||||||
|
this.h = String(hour).padStart(this.validFilterShow(this.filterShow.h), '0')
|
||||||
|
this.i = String(minute).padStart(this.validFilterShow(this.filterShow.m), '0')
|
||||||
|
this.s = String(second).padStart(this.validFilterShow(this.filterShow.s), '0')
|
||||||
|
},
|
||||||
|
validFilterShow(filter){
|
||||||
|
return (filter && filter > 0) ? filter : 2;
|
||||||
|
},
|
||||||
|
startData() {
|
||||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||||
|
if (this.seconds <= 0) {
|
||||||
|
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
|
||||||
|
this.countDown()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.countDown()
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.seconds--
|
||||||
|
if (this.seconds < 0) {
|
||||||
|
this.timeUp()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.countDown()
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
update(){
|
||||||
|
this.startData();
|
||||||
|
},
|
||||||
|
changeFlag() {
|
||||||
|
if (!this.syncFlag) {
|
||||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||||
|
this.startData();
|
||||||
|
this.syncFlag = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$font-size: 14px;
|
||||||
|
|
||||||
|
.uni-countdown {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__splitor {
|
||||||
|
margin: 0 2px;
|
||||||
|
font-size: $font-size;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__number {
|
||||||
|
border-radius: 3px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-countdown",
|
||||||
|
"displayName": "uni-countdown 倒计时",
|
||||||
|
"version": "1.2.5",
|
||||||
|
"description": "CountDown 倒计时组件",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"countdown",
|
||||||
|
"倒计时"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y",
|
||||||
|
"app-harmony": "u",
|
||||||
|
"app-uvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue