uni-countdown.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <view class="uni-countdown">
  3. <text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
  4. class="uni-countdown__number">{{ d }}</text>
  5. <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
  6. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
  7. class="uni-countdown__number">{{ h }}</text>
  8. <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
  9. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
  10. class="uni-countdown__number">{{ i }}</text>
  11. <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
  12. <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
  13. class="uni-countdown__number">{{ s }}</text>
  14. <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
  15. </view>
  16. </template>
  17. <script>
  18. /**
  19. * Countdown 倒计时
  20. * @description 倒计时组件
  21. * @tutorial https://ext.dcloud.net.cn/plugin?id=25
  22. * @property {String} backgroundColor 背景色
  23. * @property {String} color 文字颜色
  24. * @property {Number} day 天数
  25. * @property {Number} hour 小时
  26. * @property {Number} minute 分钟
  27. * @property {Number} second 秒
  28. * @property {Number} timestamp 时间戳
  29. * @property {Boolean} showDay = [true|false] 是否显示天数
  30. * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
  31. * @property {String} splitorColor 分割符号颜色
  32. * @event {Function} timeup 倒计时时间到触发事件
  33. * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
  34. */
  35. export default {
  36. name: 'UniCountdown',
  37. props: {
  38. showDay: {
  39. type: Boolean,
  40. default: true
  41. },
  42. showColon: {
  43. type: Boolean,
  44. default: true
  45. },
  46. backgroundColor: {
  47. type: String,
  48. default: '#FFFFFF'
  49. },
  50. borderColor: {
  51. type: String,
  52. default: '#000000'
  53. },
  54. color: {
  55. type: String,
  56. default: '#000000'
  57. },
  58. splitorColor: {
  59. type: String,
  60. default: '#000000'
  61. },
  62. day: {
  63. type: Number,
  64. default: 0
  65. },
  66. hour: {
  67. type: Number,
  68. default: 0
  69. },
  70. minute: {
  71. type: Number,
  72. default: 0
  73. },
  74. second: {
  75. type: Number,
  76. default: 0
  77. },
  78. timestamp: {
  79. type: Number,
  80. default: 0
  81. }
  82. },
  83. data() {
  84. return {
  85. timer: null,
  86. syncFlag: false,
  87. d: '00',
  88. h: '00',
  89. i: '00',
  90. s: '00',
  91. leftTime: 0,
  92. seconds: 0
  93. }
  94. },
  95. watch: {
  96. day(val) {
  97. this.changeFlag()
  98. },
  99. hour(val) {
  100. this.changeFlag()
  101. },
  102. minute(val) {
  103. this.changeFlag()
  104. },
  105. second(val) {
  106. this.changeFlag()
  107. }
  108. },
  109. created: function(e) {
  110. this.startData();
  111. },
  112. beforeDestroy() {
  113. clearInterval(this.timer)
  114. },
  115. methods: {
  116. toSeconds(timestamp, day, hours, minutes, seconds) {
  117. if (timestamp) {
  118. return timestamp - parseInt(new Date().getTime() / 1000, 10)
  119. }
  120. return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
  121. },
  122. timeUp() {
  123. clearInterval(this.timer)
  124. this.$emit('timeup')
  125. },
  126. countDown() {
  127. let seconds = this.seconds
  128. let [day, hour, minute, second] = [0, 0, 0, 0]
  129. if (seconds > 0) {
  130. day = Math.floor(seconds / (60 * 60 * 24))
  131. hour = Math.floor(seconds / (60 * 60)) - (day * 24)
  132. minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
  133. second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
  134. } else {
  135. this.timeUp()
  136. }
  137. if (day < 10) {
  138. day = '0' + day
  139. }
  140. if (hour < 10) {
  141. hour = '0' + hour
  142. }
  143. if (minute < 10) {
  144. minute = '0' + minute
  145. }
  146. if (second < 10) {
  147. second = '0' + second
  148. }
  149. this.d = day
  150. this.h = hour
  151. this.i = minute
  152. this.s = second
  153. },
  154. startData() {
  155. this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
  156. if (this.seconds <= 0) {
  157. return
  158. }
  159. this.countDown()
  160. this.timer = setInterval(() => {
  161. this.seconds--
  162. if (this.seconds < 0) {
  163. this.timeUp()
  164. return
  165. }
  166. this.countDown()
  167. }, 1000)
  168. },
  169. // changeFlag() {
  170. // if (!this.syncFlag) {
  171. // this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
  172. // this.startData();
  173. // this.syncFlag = true;
  174. // }
  175. // },
  176. changeFlag() {
  177. clearInterval(this.timer)
  178. this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
  179. this.startData();
  180. }
  181. }
  182. }
  183. </script>
  184. <style scoped>
  185. .uni-countdown {
  186. /* #ifndef APP-NVUE */
  187. display: flex;
  188. /* #endif */
  189. flex-direction: row;
  190. justify-content: center;
  191. align-items: center;
  192. /* padding: 2rpx 0; */
  193. }
  194. .uni-countdown__splitor {
  195. /* #ifndef APP-NVUE */
  196. display: flex;
  197. /* #endif */
  198. justify-content: center;
  199. /* line-height: 48rpx; */
  200. padding: 5rpx;
  201. font-size: 12px;
  202. }
  203. .uni-countdown__number {
  204. /* #ifndef APP-NVUE */
  205. display: flex;
  206. /* #endif */
  207. justify-content: center;
  208. align-items: center;
  209. /* width: 52rpx; */
  210. /* height: 48rpx; */
  211. /* line-height: 48rpx; */
  212. /* margin: 5rpx; */
  213. text-align: center;
  214. font-size: 12px;
  215. }
  216. </style>