index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <!-- 商户管理 -->
  3. <div class="merchantPage flex-col">
  4. <s-header :name="$t('merchantManage.merchantManagement')" :noback="false"></s-header>
  5. <div class="merchantBox flex-col">
  6. <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('public.requestFailed')"
  7. :finished="finished" :finished-text="$t('public.noMore')" offset="300" :immediate-check="false" @load="onLoad">
  8. <div class="searchRow flex-row justify-between">
  9. <div class="flex-col">
  10. <div class="flex-row justify-between bd3">
  11. <span class="info2">{{ $t('merchantManage.total') }}</span>
  12. <span class="info3">{{ adminTotal }}</span>
  13. <span class="info4">{{ $t('merchantManage.recordsInTotal') }}</span>
  14. </div>
  15. </div>
  16. <div class="flex-col">
  17. <div class="main5 flex-row justify-between" @click="searchClick">
  18. <img class="label2" src="../../assets/device/searchIcon.png" />
  19. <!-- <div class="TextGroup2 flex-col">
  20. <span class="txt3">{{ $t('merchantManage.search') }}</span>
  21. </div> -->
  22. </div>
  23. </div>
  24. </div>
  25. <div class="main4 flex-col">
  26. <div class="bd1 flex-col" v-for="(item, index) in adminList" :key="index">
  27. <div class="outer2 flex-col">
  28. <div class="box2 flex-row justify-between">
  29. <span class="word3" v-html="item.username + '&nbsp;' + item.name"></span>
  30. <!-- <div class="group6 flex-col"></div> -->
  31. </div>
  32. <span class="word4"
  33. v-html="`${$t('merchantManage.telephone')}:` + (item.phone == null ? '' : item.phone)"></span>
  34. <span class="word5"
  35. v-html="`${$t('merchantManage.mailbox')}:` + (item.email == null ? '' : item.email)"></span>
  36. <span class="word6"
  37. v-html="`${$t('merchantManage.loginTime')}:` + (item.loginDate == null ? '' : Format_time(item.loginDate))"></span>
  38. <span class="info6"
  39. v-html="`${$t('merchantManage.loginIPAddress')}:` + (item.loginIp == null ? '' : item.loginIp)"></span>
  40. <span class="txt2"
  41. v-html="`${$t('merchantManage.managementSystemId')}:` + (item.managerId == null ? '' : item.managerId)"></span>
  42. <div class="box3 flex-col">
  43. <span class="txt3" v-html="`${$t('merchantManage.creationTime')}:` + Format_time(item.createDate)"></span>
  44. </div>
  45. <div class="button-container">
  46. <van-button v-if="user.type < 2" class="btn1" round type="success"
  47. @click="autoLogin(item.id)">切换登陆</van-button>
  48. <van-button class="btn1" round type="primary" @click="merchantSet(item)">详细信息</van-button>
  49. </div>
  50. </div>
  51. </div>
  52. <van-back-top right="3vw" bottom="5vh" />
  53. </div>
  54. </van-list>
  55. </div>
  56. <merchantSearch ref="searchRef" @search="search($event)"></merchantSearch>
  57. </div>
  58. </template>
  59. <script>
  60. import { onMounted, reactive, ref } from "vue";
  61. import sHeader from "../../components/SimpleHeader";
  62. import { getAdminList, autoLoginMerchant } from '../../service/merchantManage';
  63. import { getLoginUser, Format_time, styleUrl, setLocal } from "../../common/js/utils";
  64. import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant';
  65. import merchantSearch from './merchantSearch.vue';
  66. import { useRouter } from "vue-router";
  67. import { useI18n } from "vue-i18n";
  68. export default {
  69. components: { sHeader, merchantSearch },
  70. setup() {
  71. const { t } = useI18n();
  72. const user = getLoginUser();
  73. const router = useRouter();
  74. const searchRef = ref(null);
  75. const adminList = ref([]);
  76. const adminTotal = ref(0); // 列表总数
  77. const loading = ref(false); // 加载状态
  78. const error = ref(false); // 错误状态
  79. const finished = ref(false); // 结束翻页状态
  80. let searchParams = reactive({
  81. id: user.id,
  82. current: 1, // 页数
  83. size: 20, // 页大小
  84. });
  85. onMounted(async () => {
  86. // 加载样式
  87. styleUrl('merchantManage');
  88. searchGetList();
  89. });
  90. // 查询列表
  91. const searchGetList = () => {
  92. adminList.value = [];
  93. searchParams.current = 1;
  94. getList();
  95. }
  96. // 滚动加载
  97. const onLoad = () => { if (!finished.value) { searchParams.current = searchParams.current + 1; getList(); } };
  98. // 获取设备列表数据
  99. const getList = async () => {
  100. const { data } = await getAdminList(Object.assign({}, searchParams));
  101. if (data.code === "00000") {
  102. // 列表值叠加
  103. adminList.value = adminList.value.concat(data.data.records);
  104. adminTotal.value = data.data.total;
  105. if (adminList.value.length === data.data.total) { finished.value = true; }
  106. loading.value = false;
  107. } else { showFailToast(data.message); }
  108. };
  109. // 搜索点击
  110. const searchClick = () => { searchRef.value.showSearch(); };
  111. // 搜索弹窗触发搜索
  112. const search = (data) => {
  113. searchParams = Object.assign(searchParams, data);
  114. searchGetList();
  115. };
  116. // 跳转设备编辑
  117. const merchantSet = (e) => { router.push({ path: 'merchantSet', query: { merchantId: e.id } }) }
  118. // 切换登陆
  119. const autoLogin = (id) => {
  120. showConfirmDialog({
  121. title: t('merchantManage.tips'),
  122. message: t('merchantManage.autoLogin'),
  123. }).then(() => {
  124. autoLoginMerchant({ id }).then(res => {
  125. if (res.data.code === "00000") {
  126. // 获取缓存的语言
  127. const curLang = localStorage.getItem("curLang");
  128. const savedCredentials = localStorage.getItem('savedCredentials');
  129. // 清空缓存
  130. localStorage.clear();
  131. localStorage.setItem("curLang", curLang);
  132. if (savedCredentials) {
  133. localStorage.setItem('savedCredentials', savedCredentials);
  134. }
  135. setLocal("loginUser", JSON.stringify(res.data.data));
  136. // console.log('loginUser JSON:', JSON.stringify(data.data));
  137. showSuccessToast(t('login.loginSucess'));
  138. localStorage.setItem('firstLogin', true);
  139. // 需要刷新页面,否则 axios.js 文件里的 token 不会被重置
  140. // window.location.href = '/shenze/';
  141. setTimeout(() => {
  142. router.push("/home");
  143. }, 200);
  144. } else {
  145. showFailToast(res.data.message);
  146. }
  147. });
  148. }).catch((error) => {
  149. console.error(error);
  150. })
  151. }
  152. return {
  153. adminList,
  154. adminTotal,
  155. loading,
  156. error,
  157. finished,
  158. onLoad,
  159. searchClick,
  160. searchRef,
  161. search,
  162. merchantSet,
  163. autoLogin,
  164. Format_time,
  165. user,
  166. };
  167. },
  168. };
  169. </script>
  170. <style lang="less" scoped>
  171. @import "../../common/style/common.less";
  172. </style>