源文件

jeepay-ui-uapp-agent/pageWork/terminal/terminalList.vue

@@ -0,0 +1,85 @@
+<template>
+  <view class="page">
+    <view class="mch-header">
+      <JHeaderTitle title="辅助终端设备" bgColor="#f2f2f2" />
+      <JSearchInput @search="searchHandle" @resetSearch="reset" ref="search" place="搜索商户号、名称、设备号" />
+    </view>
+
+    <view v-for="(item, index) in useDataResult.dataList" :key="item.agentNo" @click.stop="toDetail(item.trmId)">
+      <JPreview v-bind="item.info" :key="item.trmNo" :isLast="index === useDataResult.dataList.length - 1" />
+    </view>
+    <jeepayListNull :list="useDataResult.dataList.length" :isShow="true" />
+    <view class="mch-footers">
+      <JButton pd="30rpx 30rpx 50rpx 30rpx" pdTop="0" @HandleTouch="createAux">创建辅助终端</JButton>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, toRaw } from "vue"
+import { $terminalList } from "@/http/apiManager.js"
+import { onShow, onBackPress } from "@dcloudio/uni-app"
+import JButton from "@/components/newComponents/JButton/JButton.vue"
+import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
+import jeepayListNull from "@/components/jeepayListNull/jeepayListNull.vue"
+import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue"
+import useGetList from "@/hooks/useList.js"
+import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
+
+const dataHandle = (data) => {
+  data.forEach((item) => {
+    item.info = {
+      img: item.state == 1 ? "/static/equipmentImg/terminal-open.svg" : "/static/equipmentImg/terminal-close.svg",
+      title: item.trmName ? item.trmName : "未命名",
+      qrcId: item.trmNo,
+      spot: item.state == 1 ? "#7737FE" : "#B2B2B2",
+      status: item.state == 1 ? "已启用" : "已禁用",
+      mchName: item.mchName,
+      mchNo: item.mchNo,
+    }
+  })
+  return data
+}
+
+const { useDataResult, getList } = useGetList({
+  requestFun: $terminalList,
+  dataHandle,
+})
+
+const search = ref(null) // 注册搜索组件
+// 搜索
+const searchHandle = (val) => getList({ unionSearchId: val })
+// 重置搜索
+const reset = () => getList({ unionSearchId: "" })
+// 输入框存在内容时，清空文字，列表重置
+onBackPress(() => {
+  if (search.value.searchText != "") {
+    search.value.searchText = ""
+    reset()
+    return true
+  }
+  return false
+})
+
+// 跳转至新增终端
+const createAux = () => uni.navigateTo({ url: "./addTerminal" })
+
+// 跳转至详情
+const toDetail = (id) => uni.navigateTo({ url: "./terminalDetil?id=" + id })
+</script>
+<style lang="scss" scoped>
+.mch-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: #f2f2f2;
+}
+.mch-footers {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(30px);
+  border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
+}
+</style>