index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div class="hotUpdate">
  3. <!-- <div class="hotUpdate" style="background-color: #ebedf0;"> -->
  4. <s-header name="热更新" :noback="true"></s-header>
  5. <div class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott">
  6. <div class="l-flex-RC">
  7. <!-- <img class="ruleIcon o-mr-10" src="@/assets/advertManage/ruleIcon.png" alt="" /> -->
  8. <div class="ruleIcon"></div>
  9. <div class="c-text-color c-text-b c-text-15">
  10. <span class="c-text-20" style="color: #df5e4c">{{ patchTotal }}</span>
  11. 条记录
  12. </div>
  13. </div>
  14. <div class="l-flex-RC">
  15. <div @click="toAdd" class="c-text-c">
  16. <div>
  17. <van-icon size="18" name="add-o" />
  18. </div>
  19. <div class="c-text-color c-text-12">
  20. 添加
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <!-- 补丁信息列表 -->
  26. <div class="contentCon">
  27. <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
  28. <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
  29. :offset="20" :immediate-check="false">
  30. <div v-for="item in tableData" :key="item.id"
  31. class="o-plr-20 o-pt-24 o-pb-12 l-flex-between kBordBott content">
  32. <div>
  33. <div class="l-flex-RC">
  34. <span class="c-color c-text-12">原版本号:</span>
  35. <span class="c-text-color c-text-12">{{ item.originalVersion }}</span>
  36. </div>
  37. <div class="l-flex-RC">
  38. <span class="c-color c-text-12">目标补丁版本:</span>
  39. <span class="c-text-color c-text-12">{{ item.patchVersion }}</span>
  40. </div>
  41. <div class="l-flex-RC">
  42. <span class="c-color c-text-12">更新范围:</span>
  43. <span class="c-text-color c-text-12">{{ getTargetAreasText(item) }}</span>
  44. </div>
  45. <div class="l-flex-RC">
  46. <span class="c-color c-text-12">创建时间:</span>
  47. <span class="c-text-color c-text-12">{{
  48. Format_time(item.createTime)
  49. }}</span>
  50. </div>
  51. <div class="l-flex-RC">
  52. <span class="c-color c-text-12">更新比例:</span>
  53. <span class="c-text-color c-text-12">{{ item.haveUpdateNum }}/{{ item.shouldUpdateNum
  54. }}</span>
  55. </div>
  56. </div>
  57. </div>
  58. </van-list>
  59. </van-pull-refresh>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import sHeader from "@/components/SimpleHeader";
  65. import { ref, onMounted, toRefs, reactive } from "vue";
  66. import { styleUrl } from "../../common/js/utils";
  67. import { useRouter } from "vue-router";
  68. import {
  69. getPatchPage
  70. } from "@/service/hotUpdate";
  71. import { Format_time } from "@/common/js/utils";
  72. import { computed } from "vue";
  73. export default {
  74. components: { sHeader },
  75. setup() {
  76. // const { t } = useI18n();
  77. onMounted(() => {
  78. // 加载样式
  79. styleUrl('hotUpdate');
  80. onRefresh();
  81. });
  82. // 多少条规则
  83. const patchTotal = ref(0);
  84. // 分页
  85. const pageNo = ref(1);
  86. const pageSize = ref(20);
  87. let ruleData = reactive({
  88. tableData: [],
  89. });
  90. // 上拉刷新
  91. const loading = ref(true);
  92. const finished = ref(false);
  93. // 下拉刷新
  94. const onRefresh = (idx) => {
  95. ruleData.tableData = [];
  96. // 解决请求两次问题
  97. if (!idx) {
  98. finished.value = false;
  99. }
  100. loading.value = true;
  101. // 初始化分页
  102. pageNo.value = 1;
  103. pageSize.value = 20;
  104. getList();
  105. };
  106. // 上拉加载
  107. const onLoad = () => {
  108. pageNo.value++;
  109. getList();
  110. };
  111. // 下拉刷新
  112. const refreshing = ref(false);
  113. const getList = () => {
  114. let param = {
  115. current: pageNo.value,
  116. size: pageSize.value,
  117. };
  118. getPatchPage(param).then((res) => {
  119. const { data } = res.data;
  120. refreshing.value = false;
  121. ruleData.tableData.push(...data.records);
  122. // 加载状态结束
  123. loading.value = false;
  124. // 总共
  125. patchTotal.value = data.total;
  126. if (ruleData.tableData.length >= data.total) {
  127. finished.value = true;
  128. }
  129. });
  130. };
  131. // 获取目标范围
  132. const getTargetAreasText = computed(() => {
  133. const targetAreas = {
  134. '0': '部分设备',
  135. '1': '国内设备',
  136. '2': '海外设备',
  137. '3': '全部设备',
  138. };
  139. return (item) => targetAreas[item.targetAreas] || '';
  140. });
  141. const router = useRouter();
  142. // 点击添加按钮
  143. const toAdd = () => {
  144. router.push("/apkHotUpdateAdd");
  145. };
  146. return {
  147. patchTotal,
  148. toAdd,
  149. onRefresh,
  150. onLoad,
  151. getList,
  152. loading,
  153. finished,
  154. ...toRefs(ruleData),
  155. refreshing,
  156. getTargetAreasText,
  157. Format_time,
  158. };
  159. }
  160. };
  161. </script>
  162. <style lang="less" scoped></style>