reportInfo.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <u-cell-group>
  3. <u-cell title="开始时间" arrow-direction="down">
  4. <uni-datetime-picker :end="endTime" type="datetime" slot="value" v-model="reportForm.startTime"
  5. @change="starTimeChange">
  6. </uni-datetime-picker>
  7. </u-cell>
  8. <u-cell title="结束时间" arrow-direction="down">
  9. <uni-datetime-picker :start="starTime" type="datetime" slot="value" v-model="reportForm.endTime"
  10. @change="endTimeChange">
  11. </uni-datetime-picker>
  12. </u-cell>
  13. <u-cell title="时间售后时长(天)" arrow-direction="down">
  14. <view slot="value" style="display: flex;align-items: center;width: 100%;">
  15. <u--input readonly style="flex:1" border="surround" v-model="days">
  16. </u--input>
  17. </view>
  18. </u-cell>
  19. <u-cell title="时间售后时长(小时)" arrow-direction="down">
  20. <view slot="value" style="display: flex;align-items: center;width: 100%;">
  21. <u--input readonly style="flex:1" border="surround" v-model="hours">
  22. </u--input>
  23. </view>
  24. </u-cell>
  25. <u-cell title="时间售后时长(分钟)" arrow-direction="down">
  26. <view slot="value" style="display: flex;align-items: center;width: 100%;">
  27. <u--input readonly style="flex:1" border="surround" v-model="minutes">
  28. </u--input>
  29. </view>
  30. </u-cell>
  31. </u-cell-group>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. reportForm: {
  38. startTime: '',
  39. endTime: '',
  40. inFactDuration: ''
  41. },
  42. endTime: '',
  43. starTime: '',
  44. minutes: '',
  45. hours: '',
  46. days: ''
  47. }
  48. },
  49. methods: {
  50. getReportForm() {
  51. let data = {
  52. };
  53. return data;
  54. },
  55. // 开始时间
  56. starTimeChange(e) {
  57. this.starTime = e;
  58. this.reportForm.startTime = e;
  59. this.calculateTimeDifference()
  60. },
  61. // 结束时间
  62. endTimeChange(e) {
  63. this.endTime = e;
  64. this.reportForm.endTime = e;
  65. this.calculateTimeDifference();
  66. },
  67. calculateTimeDifference() {
  68. if (!this.reportForm.startTime || !this.reportForm.endTime) {
  69. this.days = '';
  70. this.hours = '';
  71. this.minutes = '';
  72. this.reportForm.inFactDuration = '';
  73. return
  74. }
  75. // 计算时间差
  76. const startTime = new Date(this.reportForm.startTime);
  77. const endTime = new Date(this.reportForm.endTime);
  78. const timeDiff = endTime - startTime; // 毫秒数
  79. // 转换为天、小时、分钟
  80. const minutes = timeDiff / (1000 * 60);
  81. const hours = minutes / 60;
  82. const days = hours / 24;
  83. this.reportForm.inFactDuration = minutes;
  84. this.minutes = minutes.toFixed(0) + ' 分钟';
  85. this.hours = hours.toFixed(1) + ' 小时';
  86. this.days = days.toFixed(1) + ' 天';
  87. },
  88. }
  89. }
  90. </script>
  91. <style>
  92. </style>