index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <!-- 分销设置 -->
  3. <div class="distributionSetIdx">
  4. <s-header :name="$t('distributionSet.distributionSettings')" :noback="false"></s-header>
  5. <div class="o-h">
  6. <div style="height: 75px">
  7. <div class="o-plr-14 o-ptb-10 kBordBott">
  8. <div class="headCon l-flex-between">
  9. <div class="leftCon l-flex-RC">
  10. <img class="leftImg o-mr-6" src="../../assets//distributionSet/leftIcon.png" alt="" />
  11. <span class="leftTxt c-text-15 c-text-w6">
  12. {{ $t('distributionSet.total') }}<span class="leftNum c-text-20">{{ total }}</span>
  13. {{ $t('distributionSet.leftTitle') }}
  14. </span>
  15. </div>
  16. <div @click="toDetail" class="rightCon c-text-12">
  17. + {{ $t('distributionSet.rightAdd') }}
  18. </div>
  19. </div>
  20. </div>
  21. <kTabs tabWidth="100%" @tabchg="tabChg" :tabList="tabList"></kTabs>
  22. </div>
  23. <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
  24. <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
  25. :offset="300" :immediate-check="false">
  26. <div v-for="item in tableData" :key="item.id" @click="toDetail(item)"
  27. class="o-plr-14 o-ptb-16 contentCon kBordBott">
  28. <div class="content l-flex-between">
  29. <div>
  30. <span class="titleName c-text-13">{{ $t('distributionSet.equipName') }}:</span>
  31. <span class="valueName c-text-13">{{
  32. item.equipmentName
  33. }}</span>
  34. </div>
  35. <van-icon color="#B9BAD0" size="20" name="arrow" />
  36. </div>
  37. <div v-if="item.agencyProportion" class="content l-flex-RC">
  38. <div class="l-flex-RC">
  39. <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}:</span>
  40. <span class="valueName valueName1 c-text-line1 c-text-13">{{
  41. item.agencyName
  42. }}</span>
  43. </div>
  44. <div class="o-ml-30">
  45. <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}:</span>
  46. <span class="valueName c-text-13">{{ item.agencyProportion }}%</span>
  47. </div>
  48. </div>
  49. <div v-if="item.merchantProportion" class="content l-flex-RC">
  50. <div class="l-flex-RC">
  51. <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}:</span>
  52. <span class="valueName valueName1 c-text-line1 c-text-13">{{
  53. item.merchantName
  54. }}</span>
  55. </div>
  56. <div class="o-ml-30">
  57. <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}:</span>
  58. <span class="valueName c-text-13">{{ item.merchantProportion }}%</span>
  59. </div>
  60. </div>
  61. <div v-if="item.personageProportion" class="content l-flex-RC">
  62. <div class="l-flex-RC">
  63. <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}:</span>
  64. <span class="valueName valueName1 c-text-line1 c-text-13">{{
  65. item.personageName
  66. }}</span>
  67. </div>
  68. <div class="o-ml-30">
  69. <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}:</span>
  70. <span class="valueName c-text-13">{{ item.personageProportion }}%</span>
  71. </div>
  72. </div>
  73. <div class="content l-flex-RC">
  74. <div>
  75. <span class="titleName c-text-13">{{ $t('distributionSet.applTime') }}:</span>
  76. <span class="valueName c-text-13">{{
  77. Format_time(item.createDate, "YYYY-MM-DD HH:MM")
  78. }}</span>
  79. </div>
  80. <div v-if="tabActive === 1" class="effective c-text-15 c-text-w5 o-ml-20">
  81. {{ $t('distributionSet.reviewed') }}
  82. </div>
  83. </div>
  84. <div v-if="tabActive === 0" class="approval c-text-15 c-text-w5 o-mt-6">
  85. {{ $t('distributionSet.apprPend') }}
  86. </div>
  87. </div>
  88. </van-list>
  89. </van-pull-refresh>
  90. </div>
  91. </div>
  92. </template>
  93. <script>
  94. // 导入公用方法
  95. import { Format_time } from "../../common/js/utils";
  96. // 导入接口
  97. import { Api_getPageProportion } from "../../service/distributionSet";
  98. import { onMounted, toRefs, ref, reactive } from "vue";
  99. import sHeader from "../../components/SimpleHeader";
  100. import { useRouter } from "vue-router";
  101. import { getLoginUser, styleUrl } from "../../common/js/utils";
  102. import kTabs from "../../components/commom/kTabs/index.vue";
  103. import { useI18n } from 'vue-i18n';
  104. export default {
  105. components: { sHeader, kTabs },
  106. setup() {
  107. const { t } = useI18n();
  108. const router = useRouter();
  109. const total = ref(0);
  110. // 点击去详情
  111. const toDetail = (e) => {
  112. if (e) {
  113. router.push({
  114. path: "distributionDetail",
  115. query: { id: e.id, type: tabActive.value, clientId: e.clientId },
  116. });
  117. } else {
  118. router.push("/distributionDetail");
  119. }
  120. };
  121. const user = getLoginUser(); // 获取登录用户
  122. const tabList = ref([
  123. {
  124. name: t('distributionSet.apprPend'),
  125. icon: "",
  126. id: 1,
  127. },
  128. {
  129. name: t('distributionSet.reviewed'),
  130. icon: "",
  131. id: 2,
  132. },
  133. ]);
  134. const tabActive = ref(0);
  135. // 点击tab
  136. const tabChg = (e) => {
  137. tabActive.value = e;
  138. onRefresh(1);
  139. total.value = 0;
  140. };
  141. // 分页
  142. const pageNo = ref(1);
  143. const pageSize = ref(20);
  144. let ruleData = reactive({
  145. tableData: [],
  146. });
  147. // 上拉刷新
  148. const loading = ref(true);
  149. const finished = ref(false);
  150. // 下拉刷新
  151. const refreshing = ref(false);
  152. onMounted(() => {
  153. // 加载样式
  154. styleUrl('distributionSet');
  155. onRefresh();
  156. });
  157. // 下拉刷新
  158. const onRefresh = (idx) => {
  159. ruleData.tableData = [];
  160. // 解决请求两次问题
  161. if (!idx) {
  162. finished.value = false;
  163. }
  164. loading.value = true;
  165. // 初始化分页
  166. pageNo.value = 1;
  167. pageSize.value = 20;
  168. getList();
  169. };
  170. // 上拉加载
  171. const onLoad = () => {
  172. pageNo.value++;
  173. getList();
  174. };
  175. const getList = () => {
  176. let param = {
  177. type: tabActive.value,
  178. adminId: user.id,
  179. current: pageNo.value,
  180. size: pageSize.value,
  181. };
  182. Api_getPageProportion(param).then((res) => {
  183. const { data } = res.data;
  184. refreshing.value = false;
  185. // 加入删除选中状态
  186. if (data.records.length > 0) {
  187. data.records.forEach((item) => {
  188. item.checked = false;
  189. });
  190. }
  191. ruleData.tableData.push(...data.records);
  192. console.log(ruleData.tableData);
  193. // 加载状态结束
  194. loading.value = false;
  195. // // 总共
  196. total.value = data.total;
  197. if (ruleData.tableData.length >= data.total) {
  198. finished.value = true;
  199. }
  200. });
  201. };
  202. return {
  203. toDetail,
  204. pageNo,
  205. pageSize,
  206. loading,
  207. finished,
  208. refreshing,
  209. onRefresh,
  210. onLoad,
  211. getList,
  212. ...toRefs(ruleData),
  213. tabChg,
  214. tabActive,
  215. tabList,
  216. Format_time,
  217. total,
  218. };
  219. },
  220. };
  221. </script>
  222. <style lang="less" scoped>
  223. @import "../../common/style/common.less";
  224. </style>