fixed: uni-countdown start and stop bug

chencanbin · May 10, 2021 · 8babba6 · 8babba6
1 parent 3d72aa6
commit 8babba6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 16 deletions.
diff --git a/pages/nvue/countdown/countdown.nvue b/pages/nvue/countdown/countdown.nvue
@@ -4,8 +4,12 @@
 		<uni-section title="一般用法" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
+		</view>
+		<uni-section title="自由控制开始/暂停" type="line"></uni-section>
+		<view class="example-body">
+			<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
 		</view>
-		<uni-section title="不显示天数" type="line"></uni-section>
+		<!--<uni-section title="不显示天数" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
 		</view>
@@ -24,7 +28,7 @@
 		<uni-section title="动态赋值" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown  :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
-		</view>
+		</view> -->
 	</view>
 </template>
 <script>
@@ -34,15 +38,20 @@
 			return {
 				testHour: 0,
 				testMinute: 0,
-				testSecond: 0
+				testSecond: 0,
+				start: false
 			}
 		},
 		created() {
 			setTimeout(() => {
 				this.testHour = 1
 				this.testMinute = 1
-				this.testSecond = 0
-			}, 2000)
+				this.testSecond = 0
+				this.start = true
+			}, 3000)
+			setTimeout(() => {
+				this.start = false
+			}, 10000)
 		},
 		methods: {
 			timeup() {

diff --git a/pages/vue/countdown/countdown.vue b/pages/vue/countdown/countdown.vue
@@ -4,8 +4,12 @@
 		<uni-section title="一般用法" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
+		</view>
+		<uni-section title="自由控制开始/暂停" type="line"></uni-section>
+		<view class="example-body">
+			<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
 		</view>
-		<uni-section title="不显示天数" type="line"></uni-section>
+		<!--<uni-section title="不显示天数" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
 		</view>
@@ -24,7 +28,7 @@
 		<uni-section title="动态赋值" type="line"></uni-section>
 		<view class="example-body">
 			<uni-countdown  :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
-		</view>
+		</view> -->
 	</view>
 </template>
 <script>
@@ -34,15 +38,20 @@
 			return {
 				testHour: 0,
 				testMinute: 0,
-				testSecond: 0
+				testSecond: 0,
+				start: false
 			}
 		},
 		created() {
 			setTimeout(() => {
 				this.testHour = 1
 				this.testMinute = 1
-				this.testSecond = 0
-			}, 2000)
+				this.testSecond = 0
+				this.start = true
+			}, 3000)
+			setTimeout(() => {
+				this.start = false
+			}, 10000)
 		},
 		methods: {
 			timeup() {

diff --git a/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue b/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
@@ -1,12 +1,16 @@
 <template>
 	<view class="uni-countdown">
-		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ d }}</text>
 		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ h }}</text>
 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ i }}</text>
 		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
+			class="uni-countdown__number">{{ s }}</text>
 		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
 	</view>
 </template>
@@ -39,6 +43,10 @@
 				type: Boolean,
 				default: true
 			},
+			start: {
+				type: Boolean,
+				default: true
+			},
 			backgroundColor: {
 				type: String,
 				default: '#FFFFFF'
@@ -100,10 +108,23 @@
 			},
 			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.startData();
+			this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
+			this.countDown()
 		},
 		beforeDestroy() {
 			clearInterval(this.timer)
@@ -208,4 +229,4 @@
 		text-align: center;
 		font-size: $uni-font-size-sm;
 	}
-</style>
+</style>