reportInfo.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. console.log('123', this.reportForm)
  69. if (!this.reportForm.startTime || !this.reportForm.endTime) {
  70. this.days = '';
  71. this.hours = '';
  72. this.minutes = '';
  73. this.reportForm.inFactDuration = '';
  74. return
  75. }
  76. // 计算时间差
  77. const startTime = new Date(this.reportForm.startTime);
  78. const endTime = new Date(this.reportForm.endTime);
  79. const timeDiff = endTime - startTime; // 毫秒数
  80. // 转换为天、小时、分钟
  81. const minutes = timeDiff / (1000 * 60);
  82. const hours = minutes / 60;
  83. const days = hours / 24;
  84. this.reportForm.inFactDuration = minutes;
  85. this.minutes = minutes.toFixed(0) + ' 分钟';
  86. this.hours = hours.toFixed(1) + ' 小时';
  87. this.days = days.toFixed(1) + ' 天';
  88. },
  89. }
  90. }
  91. </script>
  92. <style>
  93. </style>