miaosha.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div class="flex-grow-1">
  3. <div class="flex-grow-1 box-pack-between flex-y-center">
  4. <div class="flex-grow-0">
  5. <!-- {{rest_time}} -->
  6. <block>
  7. <div class='flex-y-center miaosha-time-item'>
  8. <div class="miaosha-time-item-name">{{miaosha_name}}</div>
  9. <view class="time flex">
  10. <div v-if="times.d" class='flex-y-center flex-x-center'>{{(times.d?times.d:"00")}}:
  11. </div>
  12. <div class='flex-y-center flex-x-center'>{{(times.h?times.h:"00")}}: </div>
  13. <div class='flex-y-center flex-x-center'>{{(times.m?times.m:"00")}}:</div>
  14. <div class='flex-y-center flex-x-center'>{{(times.s?times.s:"00")}} </div>
  15. </view>
  16. </div>
  17. </block>
  18. </div>
  19. <div class="flex-y-center ft26 col" v-if='times.m && times.h' @click="navList">
  20. <span>更多</span>
  21. <text class="iconfont icon-jiantou" style="font-size: 26rpx;"></text>
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import $util from '@/utils/util.js'
  28. let timer = '';
  29. export default {
  30. name: 'moduleMiaosha',
  31. props: {
  32. 'miaosha': {
  33. type: Object,
  34. },
  35. },
  36. data() {
  37. return {
  38. times: {},
  39. miaosha_name: '活动已结束',
  40. dateTime: {},
  41. }
  42. },
  43. mounted() {
  44. },
  45. computed: {
  46. timers(val) {
  47. this.miaosha_name = this.miaosha.name;
  48. var rest_time = this.miaosha.rest_time;
  49. if (rest_time) {
  50. timer = setInterval(() => {
  51. rest_time = rest_time - 1;
  52. if (rest_time < 0) {
  53. clearInterval(timer)
  54. this.miaosha_name='活动已结束'
  55. }
  56. this.times = $util.setTimeList(rest_time)
  57. }, 1e3)
  58. }
  59. }
  60. },
  61. methods: {
  62. navList() {
  63. uni.navigateTo({
  64. url: "../../miaosha/index"
  65. })
  66. },
  67. }
  68. };
  69. </script>
  70. <style>
  71. .time {
  72. border: 1px solid #FF0000;
  73. border-left: 0;
  74. padding: 2px 6px;
  75. border-top-right-radius: 50px;
  76. border-bottom-right-radius: 50px;
  77. }
  78. .miaosha-time-item-name {
  79. background: #FF0000;
  80. color: #fff;
  81. padding: 2px 6px;
  82. height: 100%;
  83. border: 1px solid #FF0000;
  84. border-top-left-radius: 50px;
  85. border-bottom-left-radius: 50px;
  86. }
  87. .miaosha-time-item {
  88. color: #FF0000;
  89. padding: 0px 6px 0px 0px;
  90. overflow: hidden;
  91. margin-left: 20px;
  92. font-size: 14px;
  93. }
  94. .flex {
  95. display: -webkit-box;
  96. display: -webkit-flex;
  97. display: flex;
  98. }
  99. .flex-row {
  100. display: -webkit-box;
  101. display: -webkit-flex;
  102. display: flex;
  103. -webkit-box-orient: horizontal;
  104. -webkit-flex-direction: row;
  105. flex-direction: row;
  106. }
  107. .flex-col {
  108. display: -webkit-box;
  109. display: -webkit-flex;
  110. display: flex;
  111. -webkit-box-orient: vertical;
  112. -webkit-flex-direction: column;
  113. flex-direction: column;
  114. }
  115. .flex-grow-0 {
  116. min-width: 0;
  117. -webkit-box-flex: 0;
  118. -webkit-flex-grow: 0;
  119. -ms-flex-positive: 0;
  120. flex-grow: 0;
  121. -webkit-flex-shrink: 0;
  122. -ms-flex-negative: 0;
  123. flex-shrink: 0;
  124. }
  125. .flex-grow-1 {
  126. min-width: 0;
  127. -webkit-box-flex: 1;
  128. -webkit-flex-grow: 1;
  129. -ms-flex-positive: 1;
  130. flex-grow: 1;
  131. -webkit-flex-shrink: 1;
  132. -ms-flex-negative: 1;
  133. flex-shrink: 1;
  134. }
  135. .flex-x-center {
  136. display: -webkit-box;
  137. display: -webkit-flex;
  138. display: flex;
  139. -webkit-box-pack: center;
  140. -webkit-justify-content: center;
  141. -ms-flex-pack: center;
  142. justify-content: center;
  143. }
  144. .flex-y-center {
  145. display: -webkit-box;
  146. display: -webkit-flex;
  147. display: flex;
  148. -webkit-box-align: center;
  149. -webkit-align-items: center;
  150. -ms-flex-align: center;
  151. -ms-grid-row-align: center;
  152. align-items: center;
  153. }
  154. .col {
  155. color: #999
  156. }
  157. </style>