AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

u-count-down.vue 8.9 KiB

2 年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <template>
  2. <view class="u-countdown">
  3. <view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))">
  4. <view class="u-countdown-time" :style="[letterStyle]">
  5. {{ d }}
  6. </view>
  7. </view>
  8. <view
  9. class="u-countdown-colon"
  10. :style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
  11. v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
  12. >
  13. {{ separator == 'colon' ? ':' : '天' }}
  14. </view>
  15. <view class="u-countdown-item" :style="[itemStyle]" v-if="showHours">
  16. <view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
  17. {{ h }}
  18. </view>
  19. </view>
  20. <view
  21. class="u-countdown-colon"
  22. :style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
  23. v-if="showHours"
  24. >
  25. {{ separator == 'colon' ? ':' : '时' }}
  26. </view>
  27. <view class="u-countdown-item" :style="[itemStyle]" v-if="showMinutes">
  28. <view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
  29. {{ i }}
  30. </view>
  31. </view>
  32. <view
  33. class="u-countdown-colon"
  34. :style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
  35. v-if="showMinutes"
  36. >
  37. {{ separator == 'colon' ? ':' : '分' }}
  38. </view>
  39. <view class="u-countdown-item" :style="[itemStyle]" v-if="showSeconds">
  40. <view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
  41. {{ s }}
  42. </view>
  43. </view>
  44. <view
  45. class="u-countdown-colon"
  46. :style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
  47. v-if="showSeconds && separator == 'zh'"
  48. >
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. /**
  54. * countDown 倒计时
  55. * @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。
  56. * @tutorial https://www.uviewui.com/components/countDown.html
  57. * @property {String Number} timestamp 倒计时,单位为秒
  58. * @property {Boolean} autoplay 是否自动开始倒计时,如果为false,需手动调用开始方法。见官网说明(默认true)
  59. * @property {String} separator 分隔符,colon为英文冒号,zh为中文(默认colon)
  60. * @property {String Number} separator-size 分隔符的字体大小,单位rpx(默认30)
  61. * @property {String} separator-color 分隔符的颜色(默认#303133)
  62. * @property {String Number} font-size 倒计时字体大小,单位rpx(默认30)
  63. * @property {Boolean} show-border 是否显示倒计时数字的边框(默认false)
  64. * @property {Boolean} hide-zero-day 当"天"的部分为0时,隐藏该字段 (默认true)
  65. * @property {String} border-color 数字边框的颜色(默认#303133)
  66. * @property {String} bg-color 倒计时数字的背景颜色(默认#ffffff)
  67. * @property {String} color 倒计时数字的颜色(默认#303133)
  68. * @property {String} height 数字高度值(宽度等同此值),设置边框时看情况是否需要设置此值,单位rpx(默认auto)
  69. * @property {Boolean} show-days 是否显示倒计时的"天"部分(默认true)
  70. * @property {Boolean} show-hours 是否显示倒计时的"时"部分(默认true)
  71. * @property {Boolean} show-minutes 是否显示倒计时的"分"部分(默认true)
  72. * @property {Boolean} show-seconds 是否显示倒计时的"秒"部分(默认true)
  73. * @event {Function} end 倒计时结束
  74. * @event {Function} change 每秒触发一次,回调为当前剩余的倒计秒数
  75. * @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
  76. */
  77. export default {
  78. name: 'u-count-down',
  79. props: {
  80. // 倒计时的时间,秒为单位
  81. timestamp: {
  82. type: [Number, String],
  83. default: 0
  84. },
  85. // 是否自动开始倒计时
  86. autoplay: {
  87. type: Boolean,
  88. default: true
  89. },
  90. // 用英文冒号(colon)或者中文(zh)当做分隔符,false的时候为中文,如:"11:22"或"11时22秒"
  91. separator: {
  92. type: String,
  93. default: 'colon'
  94. },
  95. // 分隔符的大小,单位rpx
  96. separatorSize: {
  97. type: [Number, String],
  98. default: 30
  99. },
  100. // 分隔符颜色
  101. separatorColor: {
  102. type: String,
  103. default: "#303133"
  104. },
  105. // 字体颜色
  106. color: {
  107. type: String,
  108. default: '#303133'
  109. },
  110. // 字体大小,单位rpx
  111. fontSize: {
  112. type: [Number, String],
  113. default: 30
  114. },
  115. // 背景颜色
  116. bgColor: {
  117. type: String,
  118. default: '#fff'
  119. },
  120. // 数字框高度,单位rpx
  121. height: {
  122. type: [Number, String],
  123. default: 'auto'
  124. },
  125. // 是否显示数字框
  126. showBorder: {
  127. type: Boolean,
  128. default: false
  129. },
  130. // 边框颜色
  131. borderColor: {
  132. type: String,
  133. default: '#303133'
  134. },
  135. // 是否显示秒
  136. showSeconds: {
  137. type: Boolean,
  138. default: true
  139. },
  140. // 是否显示分钟
  141. showMinutes: {
  142. type: Boolean,
  143. default: true
  144. },
  145. // 是否显示小时
  146. showHours: {
  147. type: Boolean,
  148. default: true
  149. },
  150. // 是否显示“天”
  151. showDays: {
  152. type: Boolean,
  153. default: true
  154. },
  155. // 当"天"的部分为0时,不显示
  156. hideZeroDay: {
  157. type: Boolean,
  158. default: false
  159. }
  160. },
  161. watch: {
  162. // 监听时间戳的变化
  163. timestamp(newVal, oldVal) {
  164. // 如果倒计时间发生变化,清除定时器,重新开始倒计时
  165. this.clearTimer();
  166. this.start();
  167. }
  168. },
  169. data() {
  170. return {
  171. d: '00', // 天的默认值
  172. h: '00', // 小时的默认值
  173. i: '00', // 分钟的默认值
  174. s: '00', // 秒的默认值
  175. timer: null ,// 定时器
  176. seconds: 0, // 记录不停倒计过程中变化的秒数
  177. };
  178. },
  179. computed: {
  180. // 倒计时item的样式,item为分别的时分秒部分的数字
  181. itemStyle() {
  182. let style = {};
  183. if(this.height) {
  184. style.height = this.height + 'rpx';
  185. style.width = this.height + 'rpx';
  186. }
  187. if(this.showBorder) {
  188. style.borderStyle = 'solid';
  189. style.borderColor = this.borderColor;
  190. style.borderWidth = '1px';
  191. }
  192. if(this.bgColor) {
  193. style.backgroundColor = this.bgColor;
  194. }
  195. return style;
  196. },
  197. // 倒计时数字的样式
  198. letterStyle() {
  199. let style = {};
  200. if(this.fontSize) style.fontSize = this.fontSize + 'rpx';
  201. if(this.color) style.color = this.color;
  202. return style;
  203. }
  204. },
  205. mounted() {
  206. // 如果自动倒计时
  207. this.autoplay && this.timestamp && this.start();
  208. },
  209. methods: {
  210. // 倒计时
  211. start() {
  212. // 避免可能出现的倒计时重叠情况
  213. this.clearTimer();
  214. if (this.timestamp <= 0) return;
  215. this.seconds = Number(this.timestamp);
  216. this.formatTime(this.seconds);
  217. this.timer = setInterval(() => {
  218. this.seconds--;
  219. // 发出change事件
  220. this.$emit('change', this.seconds);
  221. if (this.seconds < 0) {
  222. return this.end();
  223. }
  224. this.formatTime(this.seconds);
  225. }, 1000);
  226. },
  227. // 格式化时间
  228. formatTime(seconds) {
  229. // 小于等于0的话,结束倒计时
  230. seconds <= 0 && this.end();
  231. let [day, hour, minute, second] = [0, 0, 0, 0];
  232. day = Math.floor(seconds / (60 * 60 * 24));
  233. // 判断是否显示“天”参数,如果不显示,将天部分的值,加入到小时中
  234. // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
  235. hour = Math.floor(seconds / (60 * 60)) - day * 24;
  236. // showHour为需要显示的小时
  237. let showHour = null;
  238. if(this.showDays) {
  239. showHour = hour;
  240. } else {
  241. // 如果不显示天数,将“天”部分的时间折算到小时中去
  242. showHour = Math.floor(seconds / (60 * 60));
  243. }
  244. minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
  245. second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
  246. // 如果小于10,在前面补上一个"0"
  247. showHour = showHour < 10 ? '0' + showHour : showHour;
  248. minute = minute < 10 ? '0' + minute : minute;
  249. second = second < 10 ? '0' + second : second;
  250. day = day < 10 ? '0' + day : day;
  251. this.d = day;
  252. this.h = showHour;
  253. this.i = minute;
  254. this.s = second;
  255. },
  256. // 停止倒计时
  257. end() {
  258. this.clearTimer();
  259. this.$emit('end', {});
  260. },
  261. // 清除定时器
  262. clearTimer() {
  263. if(this.timer) {
  264. // 清除定时器
  265. clearInterval(this.timer);
  266. this.timer = null;
  267. }
  268. }
  269. },
  270. beforeDestroy() {
  271. clearInterval(this.timer);
  272. this.timer = null;
  273. }
  274. };
  275. </script>
  276. <style scoped lang="scss">
  277. @import "../../libs/css/style.components.scss";
  278. .u-countdown {
  279. /* #ifndef APP-NVUE */
  280. display: inline-flex;
  281. /* #endif */
  282. align-items: center;
  283. }
  284. .u-countdown-item {
  285. @include vue-flex;
  286. align-items: center;
  287. justify-content: center;
  288. padding: 2rpx;
  289. border-radius: 6rpx;
  290. white-space: nowrap;
  291. transform: translateZ(0);
  292. }
  293. .u-countdown-time {
  294. margin: 0;
  295. padding: 0;
  296. line-height: 1;
  297. }
  298. .u-countdown-colon {
  299. @include vue-flex;
  300. justify-content: center;
  301. padding: 0 5rpx;
  302. line-height: 1;
  303. align-items: center;
  304. padding-bottom: 4rpx;
  305. }
  306. .u-countdown-scale {
  307. transform: scale(0.9);
  308. transform-origin: center center;
  309. }
  310. </style>