index.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <view class="work-pages">
  3. <!-- 工作控制按钮及进度 -->
  4. <view class="work-cons flex-center">
  5. <!-- 操作按钮组件 -->
  6. <view class="work-button-wrap">
  7. <!-- 按钮 -->
  8. <view class="work-button flex-center" @click="startWork">
  9. <!-- 扇形 -->
  10. <view class="circle_process">
  11. <view class="wrapper right"><view class="circle rightcircle" :style="{ transform: `rotate(${rdeg}deg)` }"></view></view>
  12. <view class="wrapper left"><view class="circle leftcircle" :style="{ transform: `rotate(${ldeg}deg)` }"></view></view>
  13. </view>
  14. <view class="cirle-one"></view>
  15. <view class="cirle-two flex-center" v-for="item in 60"><view class="sector" :style="{ transform: `rotate(${item * 6}deg)` }"></view></view>
  16. <view class="cirle-three flex-center"></view>
  17. <view class="cirle-free w-start"></view>
  18. <view class="cirle-sex flex-center">点击启动</view>
  19. </view>
  20. <!-- 状态提示 -->
  21. <view class="work-button-tips">设备准备就绪</view>
  22. </view>
  23. </view>
  24. <!-- 说明提示 -->
  25. <view class="work-tips">
  26. <view class="work-dtime">
  27. 距离订单强制完成还剩
  28. <u-count-down
  29. @change="changeDtime"
  30. separator="zh"
  31. font-size="36"
  32. separator-size="28"
  33. color="#ff0000"
  34. :timestamp="timestamp"
  35. :show-days="false"
  36. :show-hours="false"
  37. ></u-count-down>
  38. </view>
  39. <view class="work-remarks">
  40. <view class="title">说明:</view>
  41. <view>
  42. 支付完成后
  43. <text class="red">请尽快启动洗车服务</text>
  44. ,否则订单将在5分钟后自动完成。
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50. <script>
  51. export default {
  52. data() {
  53. return {
  54. timestamp: 300,
  55. rdeg: -135,
  56. ldeg: -135,
  57. step: 0,
  58. interId:null
  59. };
  60. },
  61. onLoad() {
  62. },
  63. methods: {
  64. // 倒计时监听,0 时自动结束订单
  65. changeDtime(time) {
  66. console.log(time);
  67. },
  68. // 启动按钮
  69. startWork() {
  70. this.interId = setInterval(()=>{
  71. this.loading(this.step++)
  72. },1000)
  73. },
  74. // 进度条动画
  75. loading(second) {
  76. if (second <= 30) {
  77. this.rdeg = -135 + 6 * second
  78. this.ldeg = -135
  79. } else {
  80. this.rdeg = 45
  81. this.ldeg = -135 + 6 * (second - 30)
  82. }
  83. }
  84. }
  85. };
  86. </script>
  87. <style lang="scss">
  88. // 扇形圆环
  89. .circle_process {
  90. position: absolute;
  91. width: 380rpx;
  92. height: 380rpx;
  93. }
  94. .circle_process .wrapper {
  95. width: 190rpx;
  96. height: 380rpx;
  97. position: absolute;
  98. top: 0;
  99. overflow: hidden;
  100. }
  101. .circle_process .right {
  102. right: 0;
  103. }
  104. .circle_process .left {
  105. left: 0;
  106. }
  107. .circle_process .circle {
  108. width: 380rpx;
  109. height: 380rpx;
  110. border: 20rpx solid transparent;
  111. border-radius: 50%;
  112. position: absolute;
  113. top: 0;
  114. transform: rotate(-135deg);
  115. }
  116. .circle_process .rightcircle {
  117. border-top: 20rpx solid red;
  118. border-right: 20rpx solid red;
  119. right: 0;
  120. }
  121. .circle_process .leftcircle {
  122. border-bottom: 20rpx solid red;
  123. border-left: 20rpx solid red;
  124. left: 0;
  125. }
  126. .work-pages {
  127. width: 100%;
  128. .flex-center {
  129. display: flex;
  130. align-items: center;
  131. justify-content: center;
  132. }
  133. .work-cons {
  134. height: 60vh;
  135. background-image: linear-gradient(0deg, #666, #333);
  136. border-bottom-left-radius: 300rpx 30rpx;
  137. border-bottom-right-radius: 300rpx 30rpx;
  138. position: relative;
  139. // 按钮
  140. .work-button-wrap {
  141. width: 400rpx;
  142. margin-top: -50rpx;
  143. .work-button {
  144. background: #aaa;
  145. border-radius: 100%;
  146. width: 380rpx;
  147. height: 380rpx;
  148. cursor: pointer;
  149. .cirle-one {
  150. background: #444;
  151. width: 370rpx;
  152. height: 370rpx;
  153. border-radius: 100%;
  154. position: absolute;
  155. }
  156. .cirle-two {
  157. width: 370rpx;
  158. height: 370rpx;
  159. border-radius: 100%;
  160. position: absolute;
  161. .sector {
  162. transform-origin: center center;
  163. width: 350rpx;
  164. height: 5rpx;
  165. background: #aaa;
  166. }
  167. }
  168. .cirle-three {
  169. background: #444;
  170. width: 280rpx;
  171. height: 280rpx;
  172. border-radius: 100%;
  173. position: absolute;
  174. }
  175. .cirle-free {
  176. width: 230rpx;
  177. height: 230rpx;
  178. border-radius: 100%;
  179. position: absolute;
  180. animation: mymove 5s infinite;
  181. }
  182. @keyframes mymove {
  183. 0% {
  184. transform: scale(1); /*开始为原始大小*/
  185. opacity: 1;
  186. }
  187. 25% {
  188. transform: scale(1.1); /*放大1.1倍*/
  189. opacity: 0.5;
  190. }
  191. 50% {
  192. transform: scale(1);
  193. opacity: 1;
  194. }
  195. 75% {
  196. transform: scale(1.1);
  197. opacity: 0.5;
  198. }
  199. }
  200. .cirle-sex {
  201. background-image: linear-gradient(-180deg, #888, #333 80%);
  202. width: 210rpx;
  203. height: 210rpx;
  204. border-radius: 100%;
  205. position: absolute;
  206. color: #ffffff;
  207. font-size: 28rpx;
  208. color: #eee;
  209. }
  210. .w-start {
  211. background: #ffcc00;
  212. }
  213. .w-stop {
  214. background: #ff0000;
  215. }
  216. &:active {
  217. .cirle-sex {
  218. background-image: linear-gradient(180deg, #888, #333 80%);
  219. }
  220. }
  221. }
  222. .work-button-tips {
  223. color: #eee;
  224. text-align: center;
  225. padding-top: 30rpx;
  226. }
  227. }
  228. }
  229. .work-tips {
  230. padding: 45rpx;
  231. .work-dtime {
  232. text-align: center;
  233. font-weight: bold;
  234. font-size: 34rpx;
  235. }
  236. .work-remarks {
  237. padding-top: 50rpx;
  238. .red {
  239. color: red;
  240. }
  241. .title {
  242. font-weight: bold;
  243. }
  244. }
  245. }
  246. }
  247. </style>