uni-countdown.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <view class="uni-countdown">
  3. <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
  4. <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
  5. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
  6. <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
  7. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
  8. <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
  9. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
  10. <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'UniCountdown',
  16. props: {
  17. showDay: {
  18. type: Boolean,
  19. default: true
  20. },
  21. showColon: {
  22. type: Boolean,
  23. default: true
  24. },
  25. backgroundColor: {
  26. type: String,
  27. default: '#FFFFFF'
  28. },
  29. borderColor: {
  30. type: String,
  31. default: '#000000'
  32. },
  33. color: {
  34. type: String,
  35. default: '#000000'
  36. },
  37. splitorColor: {
  38. type: String,
  39. default: '#000000'
  40. },
  41. day: {
  42. type: Number,
  43. default: 0
  44. },
  45. hour: {
  46. type: Number,
  47. default: 0
  48. },
  49. minute: {
  50. type: Number,
  51. default: 0
  52. },
  53. second: {
  54. type: Number,
  55. default: 0
  56. }
  57. },
  58. data() {
  59. return {
  60. timer: null,
  61. syncFlag: false,
  62. d: '00',
  63. h: '00',
  64. i: '00',
  65. s: '00',
  66. leftTime: 0,
  67. seconds: 0
  68. };
  69. },
  70. watch: {
  71. day(val) {
  72. this.changeFlag();
  73. },
  74. hour(val) {
  75. this.changeFlag();
  76. },
  77. minute(val) {
  78. this.changeFlag();
  79. },
  80. second(val) {
  81. this.changeFlag();
  82. }
  83. },
  84. created: function(e) {
  85. this.startData();
  86. },
  87. beforeDestroy() {
  88. clearInterval(this.timer);
  89. },
  90. methods: {
  91. toSeconds(day, hours, minutes, seconds) {
  92. return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
  93. },
  94. timeUp() {
  95. clearInterval(this.timer);
  96. this.$emit('timeup');
  97. },
  98. countDown() {
  99. let seconds = this.seconds;
  100. let [day, hour, minute, second] = [0, 0, 0, 0];
  101. if (seconds > 0) {
  102. day = Math.floor(seconds / (60 * 60 * 24));
  103. hour = Math.floor(seconds / (60 * 60)) - day * 24;
  104. minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
  105. second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
  106. } else {
  107. this.timeUp();
  108. }
  109. if (day < 10) {
  110. day = '0' + day;
  111. }
  112. if (hour < 10) {
  113. hour = '0' + hour;
  114. }
  115. if (minute < 10) {
  116. minute = '0' + minute;
  117. }
  118. if (second < 10) {
  119. second = '0' + second;
  120. }
  121. this.d = day;
  122. this.h = hour;
  123. this.i = minute;
  124. this.s = second;
  125. },
  126. startData() {
  127. this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
  128. if (this.seconds <= 0) {
  129. return;
  130. }
  131. this.countDown();
  132. this.timer = setInterval(() => {
  133. this.seconds--;
  134. if (this.seconds < 0) {
  135. this.timeUp();
  136. return;
  137. }
  138. this.countDown();
  139. }, 1000);
  140. },
  141. changeFlag() {
  142. if (!this.syncFlag) {
  143. this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
  144. this.startData();
  145. this.syncFlag = true;
  146. }
  147. }
  148. }
  149. };
  150. </script>
  151. <style lang="scss" scoped>
  152. @import '~@/uni.scss';
  153. $countdown-height: 48rpx;
  154. $countdown-width: 52rpx;
  155. .uni-countdown {
  156. /* #ifndef APP-NVUE */
  157. display: flex;
  158. /* #endif */
  159. flex-direction: row;
  160. justify-content: flex-start;
  161. }
  162. .uni-countdown__splitor {
  163. /* #ifndef APP-NVUE */
  164. display: flex;
  165. /* #endif */
  166. justify-content: center;
  167. line-height: $countdown-height;
  168. font-size: $uni-font-size-sm;
  169. }
  170. .uni-countdown__number {
  171. /* #ifndef APP-NVUE */
  172. display: flex;
  173. /* #endif */
  174. margin: 0 5rpx;
  175. justify-content: center;
  176. align-items: center;
  177. width: $countdown-width;
  178. height: $countdown-height;
  179. line-height: $countdown-height;
  180. text-align: center;
  181. font-size: $uni-font-size-sm;
  182. }
  183. </style>