源文件

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

@@ -0,0 +1,147 @@
+<template>
+  <view class="page-wrapper global-wrapper bgF2">
+    <JHeaderTitle title="创建辅助终端" bgColor="#f2f2f2" />
+    <JMainCard pd="0" wrapPd="30rpx">
+      <view class="select-wrapper" @tap="jumpPage('mch', mchInfo.mchNo)">
+        <view class="select-mch" v-if="!mchInfo.mchNo"> 请选择商户 </view>
+        <view class="mch-info" v-else>
+          <image src="/static/equipmentImg/mch-list.svg" mode="scaleToFill" />
+          <view
+            >{{ mchInfo.mchName }} <text>{{ mchInfo.mchNo }}</text>
+          </view>
+        </view>
+        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
+      </view>
+    </JMainCard>
+    <JMainCard wrapPd="0 30rpx" pd="0" v-if="mchInfo.mchNo">
+      <view class="select-wrapper" @tap="jumpPage('store', storeInfo.storeId, { mchNo: mchInfo.mchNo })">
+        <view class="select-mch" v-if="!storeInfo.agentNo"> 请选择门店 </view>
+        <view class="mch-info" v-else>
+          <image src="/static/navImg/nav-mendian.svg" mode="scaleToFill" />
+          <view
+            >{{ storeInfo.storeName }} <text>{{ storeInfo.agentNo }}</text>
+          </view>
+        </view>
+        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
+      </view>
+    </JMainCard>
+    <JMainCard pd="0" wrapPd="30rpx" v-if="mchInfo.mchNo">
+      <view class="select-wrapper" @tap="jumpPage('appId', appInfo.appId, { mchNo: mchInfo.mchNo })">
+        <view class="select-mch" v-if="!appInfo.appId"> 请选择应用 </view>
+        <view class="mch-info" v-else>
+          <image src="/static/iconImg/icon-app-selected.svg" mode="scaleToFill" />
+          <view
+            >{{ appInfo.appName }} <text>{{ appInfo.appId }}</text>
+          </view>
+        </view>
+        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
+      </view>
+    </JMainCard>
+    <JButton pdTop="0" pd="0 30rpx 50rpx" bottom="55rpx" @HandleTouch="next">下一步</JButton>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import { onShow, onLoad } from "@dcloudio/uni-app"
+import useStore from "@/hooks/useStore.js"
+import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
+import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
+import JButton from "@/components/newComponents/JButton/JButton.vue"
+const { getStore, setStore, clearItem } = useStore()
+onShow(() => {
+  if (getStore("mch")) {
+    if (mchInfo.value.mchNo != getStore("mch").mchNo) {
+      clearItem("store")
+      clearItem("appId")
+    }
+    mchInfo.value = getStore("mch")
+  }
+  if (getStore("store")) {
+    storeInfo.value = getStore("store")
+  }
+  if (getStore("appId")) {
+    appInfo.value = getStore("appId")
+  }
+})
+const mchInfo = ref({}) //商户信息
+const storeInfo = ref({}) //门店信息
+const appInfo = ref({}) //门店信息
+
+const next = () => {
+  if (mchInfo.value.mchNo && storeInfo.value.storeId && appInfo.value.appId) {
+    setStore("createINfo", { mchNo: mchInfo.value.mchNo, storeId: storeInfo.value.storeId, appId: appInfo.value.appId })
+    uni.navigateTo({
+      url: "/pageWork/terminal/addTerminalNext",
+      success: () => {
+        clearItem("store")
+        clearItem("appId")
+        clearItem("mch")
+      },
+    })
+  } else {
+    uni.showToast({
+      title: "请选择门店 商户 应用信息",
+      icon: "none",
+    })
+  }
+}
+// 跳转到通用选择页面
+const jumpPage = (val, selected, search) => {
+  if (search) search = JSON.stringify(search)
+  uni.navigateTo({
+    url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${selected}&&search=${search}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  .select-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30rpx;
+    .select-mch {
+      margin: 20rpx;
+    }
+    .mch-info {
+      display: flex;
+      image {
+        width: 93rpx;
+        height: 93rpx;
+        margin-right: 10rpx;
+      }
+      view {
+        display: flex;
+        flex-direction: column;
+        font-size: 33rpx;
+        font-weight: 700;
+        text {
+          margin-top: 15rpx;
+          color: #8c8c8c;
+          font-size: 25rpx;
+          font-weight: 500;
+        }
+      }
+    }
+    image {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    .img-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      width: 93rpx;
+      height: 93rpx;
+      margin-right: 20rpx;
+      image {
+        width: 60rpx;
+        height: 66rpx;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,336 @@
+<template>
+  <view class="page-wrapper global-wrapper bgF2">
+    <JHeaderTitle :title="createInfo.trmId ? '修改辅助终端' : '创建辅助终端'" bgColor="#f2f2f2" />
+    <JMainCard pd="0" :wrapPd="createInfo.trmType == 2 ? '30rpx' : '0 30rpx'">
+      <JInput name="终端类型">
+        <view class="tips" :class="{ selected: typeInfo.name }" @tap="sType.open(typeInfo.i)"
+          >{{ typeInfo.name || "请选择终端类型" }}
+          <image src="/static/iconImg/icon-right-jiantou.svg" mode="scaleToFill" />
+        </view>
+      </JInput>
+    </JMainCard>
+    <JMainCard wrapPd="0 30rpx" pd="0" v-if="createInfo.trmType == 2">
+      <view
+        class="select-wrapper"
+        @tap="
+          jumpPage('POS', posInfo.deviceId, {
+            deviceType: 3,
+            mchNo: information.mchNo,
+            storeId: information.storeId,
+            appId: information.appId,
+          })
+        "
+      >
+        <view class="select-mch" v-if="!posInfo.appId"> 请选择扫码POS </view>
+        <view class="mch-info" v-else>
+          <image src="/static/equipmentImg/pos-open.svg" mode="scaleToFill" />
+          <view
+            >{{ posInfo.deviceName }} <text>{{ posInfo.deviceNo }}</text>
+          </view>
+        </view>
+        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
+      </view>
+    </JMainCard>
+    <JMainCard pd="0" wrapPd="30rpx" v-if="createInfo.trmType">
+      <JInput
+        name="设备名称"
+        place="请输入设备名称"
+        v-model:value="createInfo.trmName"
+        :isBorder="true"
+        :rules="{ name: 'trmName', rule: 'REG_NotNUll' }"
+      ></JInput>
+      <JInput
+        name="设备号"
+        v-if="createInfo.trmType == 1"
+        v-model:value="createInfo.trmNo"
+        place="请输入设备号"
+        :rules="{ name: 'trmNo', rule: 'REG_NotNUll' }"
+      ></JInput>
+      <JInput name="是否门店默认" v-if="!createInfo.trmId">
+        <view class="state-text">
+          {{ createInfo.defaultFlag == 1 ? "是" : "否" }}
+          <switch
+            :checked="createInfo.defaultFlag == 1 ? true : false"
+            style="margin-left: 20rpx; transform: scale(1.2)"
+            color="#7737fe"
+            @change="change($event, 'defaultFlag')"
+          />
+        </view>
+      </JInput>
+      <JInput name="设备状态">
+        <view class="state-text">
+          {{ createInfo.state == 1 ? "启用" : "禁用" }}
+          <switch
+            :checked="createInfo.state == 1 ? true : false"
+            style="margin-left: 20rpx; transform: scale(1.2)"
+            color="#7737fe"
+            @change="change($event, 'state')"
+          />
+        </view>
+      </JInput>
+    </JMainCard>
+    <JMainCard wrapPd=" 0 30rpx" pd=" 0" v-if="createInfo.trmType">
+      <JInput name="布放位置" :isBorder="true" :rules="{ name: 'detailAddress', rule: 'REG_NotNUll' }">
+        <view @tap="getAddress" class="place-text address" v-if="!createInfo.detailAddress"
+          >请选择位置 <view class="gps-img"> <image src="/static/iconImg/icon-gps.svg" mode="scaleToFill" /></view
+        ></view>
+        <view @tap="getAddress" v-else class="place-text address" style="color: #000"
+          >{{ createInfo.detailAddress }}
+          <view class="gps-img"> <image src="/static/iconImg/icon-gps.svg" mode="scaleToFill" /></view>
+        </view>
+      </JInput>
+    </JMainCard>
+    <JMainCard pd="0" wrapPd="30rpx" v-if="createInfo.trmType">
+      <JInput name="省市区" :isBorder="true">
+        <uni-data-picker
+          :localdata="address"
+          @change="dataPickerChange($event, 'areaCode')"
+          v-slot:default="{ data, error, options }"
+        >
+          <view class="place-text" v-if="createInfo.areaCode?.length == 0"
+            >请选择省市区
+            <image src="/static/iconImg/icon-right-jiantou.svg" mode="scaleToFill" />
+          </view>
+          <view v-else style="font-size: 33rpx">{{ createInfo.addressInfo }}</view>
+        </uni-data-picker>
+      </JInput>
+      <JInput name="经纬度" v-if="createInfo.trmType">
+        <view class="place-text" v-if="!createInfo.lng">选择位置后自动生成</view>
+        <view style="font-size: 33rpx" v-else>{{ createInfo.lng }},{{ createInfo.lat }}</view>
+      </JInput>
+    </JMainCard>
+    <JButton
+      pdTop="0"
+      pd="0 30rpx 50rpx 30rpx"
+      bottom="55rpx"
+      v-if="createInfo.trmType"
+      @HandleTouch="confirmCreated"
+      >{{ createInfo.trmId ? "确认修改" : "确认创建" }}</JButton
+    >
+  </view>
+  <SelectedType ref="sType" @selected="selected" />
+</template>
+
+<script setup>
+import { ref } from "vue"
+import { onShow, onLoad } from "@dcloudio/uni-app"
+import useStore from "@/hooks/useStore.js"
+import { $addTerminal, $updateTerminal, $terminalInfo } from "@/http/apiManager.js"
+import { validateArray } from "@/hooks/rules"
+import tool from "@/util/tool.js" // 工具类函数
+import address from "@/components/applyJson/address.json" // 地址
+import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
+import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
+import JButton from "@/components/newComponents/JButton/JButton.vue"
+import JInput from "@/components/newComponents/JInput/JInput.vue"
+import SelectedType from "./components/SelectedType.vue"
+import { getMapKey } from "@/hooks/mapInfo.js"
+const { getStore } = useStore()
+onLoad((options) => {
+  if (options.trmId) return getList(options.trmId)
+})
+onShow(() => {
+  if (getStore("createINfo")) {
+    information.value = getStore("createINfo")
+    Object.assign(createInfo.value, information.value)
+  }
+  if (getStore("POS")?.appId) {
+    posInfo.value = getStore("POS")
+    createInfo.value.trmName = posInfo.value.deviceName
+    createInfo.value.trmNo = posInfo.value.deviceNo
+  }
+})
+const createInfo = ref({
+  areaCode: [],
+  areacodeNames: [],
+  defaultFlag: 0,
+  state: 1,
+  addressInfo: "",
+  detailAddress: undefined,
+})
+const sType = ref(null)
+const typeInfo = ref({})
+const posInfo = ref({})
+const information = ref({})
+const change = (e, val) => {
+  createInfo.value[val] = e.detail.value ? 1 : 0
+}
+const selected = (val) => {
+  typeInfo.value = val
+  createInfo.value.trmType = val.i + 1
+}
+const confirmCreated = () => {
+  if (createInfo.value.trmType == 2 && !createInfo.value.trmNo) {
+    return uni.showToast({
+      title: "请选择扫码POS",
+      icon: "none",
+    })
+  }
+  if (!createInfo.value.addressInfo && createInfo.value.location) {
+    return uni.showToast({
+      title: "请选择省市区和布放位置",
+      icon: "none",
+    })
+  } else {
+    if (validateArray(createInfo.value)) {
+      if (createInfo.value.trmId) {
+        $updateTerminal(createInfo.value.trmId, createInfo.value).then(() => {
+          uni.showToast({
+            title: "修改成功",
+            icon: "success",
+            mask: true,
+          })
+        })
+        uni.navigateBack()
+      } else {
+        $addTerminal(createInfo.value).then(() => {
+          uni.showToast({
+            title: "创建成功",
+            icon: "success",
+            mask: true,
+          })
+        })
+        uni.navigateBack({
+          delta: 2,
+        })
+      }
+    }
+  }
+}
+const getList = (val) => {
+  $terminalInfo(val).then(({ bizData }) => {
+    typeInfo.value.name = bizData.trmType == 1 ? "终端" : "扫码POS"
+    createInfo.value = bizData
+    createInfo.value.addressInfo = tool.addressBack(JSON.parse(bizData.areacode), address)
+  })
+}
+function getAddress() {
+  uni.chooseLocation({
+    latitude: createInfo.value.lat || undefined,
+    longitude: createInfo.value.lng || undefined,
+    success: (res) => {
+      createInfo.value.lng = res.longitude.toFixed(6)
+      createInfo.value.lat = res.latitude.toFixed(6)
+      createInfo.value.location = res.longitude + "/" + res.latitude
+      createInfo.value.detailAddress = res.address
+      getMapKey(res.address, 0).then((res) => {
+        createInfo.value.addressInfo = res.text
+        createInfo.value.areaCode = res.code
+      })
+    },
+    fail: (err) => {
+      console.log(err, "error")
+    },
+  })
+}
+
+const dataPickerChange = async (e, name) => {
+  createInfo.value.addressInfo = ""
+  createInfo.value.areaCode = []
+  e.detail.value.forEach((v, i) => {
+    createInfo.value.areaCode.push(v.value)
+    createInfo.value.addressInfo += i == e.detail.value.length - 1 ? v.text : v.text + "/"
+  })
+  const address = createInfo.value.addressInfo.split("/").join("")
+  getMapKey(address, 1).then((res) => {
+    createInfo.value.lng = parseFloat(res.lon).toFixed(6)
+    createInfo.value.lat = parseFloat(res.lat).toFixed(6)
+    createInfo.value.detailAddress = address
+  })
+}
+// 跳转到通用选择页面
+const jumpPage = (val, selected, search) => {
+  if (search) search = JSON.stringify(search)
+  uni.navigateTo({
+    url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${selected}&&search=${search}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  image {
+    width: 40rpx;
+    height: 40rpx;
+    vertical-align: bottom;
+  }
+  .select-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30rpx;
+    .select-mch {
+      margin: 20rpx;
+    }
+    .mch-info {
+      display: flex;
+      image {
+        width: 93rpx;
+        height: 93rpx;
+        margin-right: 10rpx;
+      }
+      view {
+        display: flex;
+        flex-direction: column;
+        font-size: 33rpx;
+        font-weight: 700;
+        text {
+          margin-top: 15rpx;
+          color: #8c8c8c;
+          font-size: 25rpx;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .img-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      width: 93rpx;
+      height: 93rpx;
+      margin-right: 20rpx;
+      image {
+        width: 60rpx;
+        height: 66rpx;
+      }
+    }
+  }
+}
+.tips {
+  font-size: 33rpx;
+  color: #a6a6a6;
+}
+.selected {
+  color: #000;
+}
+.place-text {
+  font-size: 33rpx;
+  color: #a6a6a6;
+  image {
+    width: 40rpx;
+    height: 40rpx;
+    margin-left: 10rpx;
+    vertical-align: middle;
+  }
+}
+.state-text {
+  font-size: 33rpx;
+  color: #666;
+}
+.address {
+  align-self: flex-start;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  .gps-img {
+    align-self: flex-start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50rpx;
+    height: 100%;
+  }
+}
+</style>

jeepay-ui-uapp-agent/pageWork/terminal/components/SelectedType.vue

@@ -0,0 +1,45 @@
+<template>
+  <JPopup ref="popup" @onClose="onClose">
+    <JMainCard pd="0" wrapPd='30rpx'>
+      <block v-for="(v, i) in list" :key="i">
+        <JLine :name="v.name" :isSelect="i == index" :isBorder="true" @tap="selected({ name: v.name, i })"></JLine>
+      </block>
+    </JMainCard>
+    <JButton pd='0 30rpx 50rpx 30rpx' bgColor="#f2f2f2" color="#000" pdTop="0" @HandleTouch="popup.close()">取消</JButton>
+  </JPopup>
+</template>
+<script setup>
+import { reactive, ref } from "vue"
+import JPopup from "@/components/newComponents/JPopup/JPopup"
+import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
+import JLine from "@/components/newComponents/JLine/JLine"
+import JInput from "@/components/newComponents/JInput/JInput"
+import JButton from "@/components/newComponents/JButton/JButton"
+
+const emits = defineEmits(["selected"])
+const list = reactive([
+  {
+    name: "终端",
+  },
+  {
+    name: "扫码POS",
+  },
+])
+
+const index = ref(undefined)
+const popup = ref()
+const selected = (val) => {
+  index.value = val.i
+  emits("selected", val)
+  close()
+}
+const open = (val) => {
+  if (val) index.value = val
+  popup.value.open()
+}
+
+const close = () => {
+  popup.value.close()
+}
+defineExpose({ open, close })
+</script>

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

@@ -0,0 +1,419 @@
+<template>
+  <!-- 顶部自定义导航栏 -->
+  <JHeaderTitle
+    title="辅助终端设备详情"
+    :bgColor="header.bgColor"
+    color="#fff"
+    imgUrl="/static/iconImg/left-white.svg"
+  />
+
+  <JEquiCode
+    bgImg="/static/equipmentImg/big-terminal.svg"
+    icon="/pageWork/static/images/terminal-white.svg"
+    :qrcAlias="terminalInfo.trmName"
+    :qrcId="terminalInfo.trmNo"
+    @editInfo="editInfo"
+  />
+
+  <!-- 信息板块 -->
+  <JMainCard wrapPd="0 50rpx 30rpx " bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
+    <JInput
+      name="设备名称"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.trmName"
+      align="flex-start"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="设备号"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.trmNo"
+      pd="15rpx 40rpx"
+    />
+    <JInput name="设备类型" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
+      <view class="ter-type">
+        <image src="/static/equipmentImg/terminal-white.svg" />
+        {{ terminalInfo.trmType == 1 ? "终端设备" : "扫码POS" }}
+      </view>
+    </JInput>
+    <JInput
+      name="布放位置"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.detailAddress"
+      align="flex-start"
+      pd="15rpx 40rpx"
+    />
+    <JInput name="经纬度" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
+      <text style="color: #fff">{{ terminalInfo.lat + "/" + terminalInfo.lng }}</text>
+    </JInput>
+
+    <view class="line"></view>
+    <JInput
+      name="商户"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.mchName"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="用户号"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.mchNo"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="门店"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.storeName"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="门店ID"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.storeId"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="应用名称"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.appName"
+      pd="15rpx 40rpx"
+    />
+    <JInput
+      name="AppId"
+      textColor="rgba(255, 255,255, 0.6)"
+      :isBorder="true"
+      size="30rpx"
+      :right="terminalInfo.appId"
+      pd="15rpx 40rpx"
+    />
+  </JMainCard>
+
+  <!-- 信息板块 -->
+  <JMainCard wrapPd="0 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
+    <JInput name="是否默认" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
+      <view class="default">
+        <text>{{ terminalInfo.defaultFlag == 1 ? "是" : "否" }}</text>
+        <switch
+          v-if="terminalInfo.defaultFlag != 1"
+          :checked="terminalInfo.defaultFlag"
+          @change="stateChange($event, 'defaultFlag')"
+          style="margin-left: 20rpx; transform: scale(1.2)"
+          color="#BF80FF"
+        />
+        <view class="state" v-else></view>
+      </view>
+    </JInput>
+    <JInput name="设备状态" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
+      <view class="item-right dis-wrapper">
+        <text style="margin-right: 10rpx; color: #fff">{{ terminalInfo.state == 1 ? "启用" : "禁用" }}</text>
+        <switch
+          :checked="terminalInfo.state"
+          @change="stateChange($event, 'state')"
+          style="margin-left: 20rpx; transform: scale(1.2)"
+          color="#BF80FF"
+        />
+      </view>
+    </JInput>
+  </JMainCard>
+
+  <view class="bind-title" style="margin-top: 50rpx" v-if="channelList.length > 0">报备管理</view>
+  <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0" v-if="channelList.length > 0">
+    <scroll-view class="scroll-list" :scroll-y="true">
+      <view v-for="(item, index) in channelList" @tap="sendup(item)" class="channel-list" :key="index">
+        <!-- :textColor="item.textColor"  -->
+        <JLayout
+          :bgColor="item.bgColor"
+          :icon="item.icon"
+          :ifName="item.ifName"
+          :stateColor="item.stateColor"
+          :stateText="item.stateText"
+        />
+      </view>
+    </scroll-view>
+  </JMainCard>
+
+  <JButton
+    pd="20rpx 50rpx 50rpx 50rpx"
+    @HandleTouch="delTerminal"
+    pdTop="0"
+    color="#FF4D6A"
+    bgColor="rgba(255, 255, 255, 0.85)"
+    >删除终端</JButton
+  >
+
+  <!-- 通用二次弹窗组件 -->
+  <jeepayConfirm ref="jeepayConfirmRef" />
+
+  <!-- 渠道报备弹窗 -->
+  <JPopup ref="JPopupRef">
+    <JMainCard pd="0" wrapPd="0 30rpx" bgColor="transparent">
+      <view class="pop-body">
+        <view class="text">{{ sendText }}</view>
+
+        <JLayout
+          :bgColor="sendInfo.bgColor"
+          :icon="sendInfo.icon"
+          :ifName="sendInfo.ifName"
+          :stateColor="sendInfo.stateColor"
+          :stateText="sendInfo.stateText"
+          leftColor="#333"
+          :rightColor="sendInfo.state == 1 ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.6)'"
+          :preBig="true"
+          :isImg="false"
+        />
+      </view>
+
+      <view class="filing" @tap="filing" :style="{ color: sendInfo.state == 1 ? '#7737FE' : '#FF4C6A' }">{{
+        sendInfo.channelBindInfo?.state == 0
+          ? "确认报备"
+          : sendInfo.channelBindInfo?.state == 2
+          ? "重新报备"
+          : "确认注销"
+      }}</view>
+      {{ sendInfo.channelBindInfo?.state }}
+    </JMainCard>
+
+    <JButton pd="30rpx" bottom="50rpx" color="#303030" bgColor="rgba(255,255,255,0.8)" pdTop="0" @HandleTouch="cancel"
+      >取消</JButton
+    >
+  </JPopup>
+  <JDeletedTips ref="switchTips" @confirm="confirm" @cancel="cancelSwitchTips" />
+</template>
+
+<script setup>
+import { onLoad, onPageScroll, onShow } from "@dcloudio/uni-app"
+import { ref, reactive, nextTick, toRaw } from "vue"
+import {
+  $getMchTermChannelBindInfos,
+  $mchTermChannelSendup,
+  $delTerminal,
+  $updateTerminal,
+  $updateMchTermDefault,
+  $terminalInfo,
+} from "@/http/apiManager.js"
+import jeepayListNull from "@/components/jeepayListNull/jeepayListNull.vue"
+import JPopup from "@/components/newComponents/JPopup/JPopup.vue"
+import jeepayConfirm from "@/components/jeepayConfirm/jeepayConfirm.vue"
+import JEquiCode from "@/components/newComponents/JEquipment/JEquiCode.vue" // 设备信息
+import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
+import JEquipmentCode from "@/components/newComponents/JEquipment/JEquipmentCode.vue" // 设备信息
+import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue" // 卡片
+import JInput from "@/components/newComponents/JInput/JInput.vue"
+import JLine from "@/components/newComponents/JLine/JLine.vue"
+import JScroll from "@/components/newComponents/JScroll/JScroll.vue"
+import JButton from "@/components/newComponents/JButton/JButton.vue"
+import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
+import JLayout from "@/components/newComponents/JLayout/JLayout.vue"
+import JDeletedTips from "@/components/newComponents/JDeletedTips/JDeletedTips"
+const terminalInfo = reactive({}) // 终端设备信息
+let trmId = ref("") // 设备ID
+const jeepayConfirmRef = ref() // 二次弹窗组件
+const JPopupRef = ref() // 弹窗组件
+
+onShow(() => {
+  $terminalInfo(trmId.value).then(({ bizData }) => {
+    bizData.appName ? bizData.appName : (bizData.appName = "默认应用")
+    Object.assign(terminalInfo, bizData)
+  })
+})
+const switchTips = ref(null)
+onLoad((option) => {
+  trmId.value = option.id // 得到设备ID
+  // 请求可报备的渠道列表
+  getChannelList()
+})
+
+let keys = null
+// 更换状态
+const stateChange = (e, key) => {
+  keys = key
+  let val = e.detail.value
+  terminalInfo[keys] = Number(val)
+  switchTips.value.open("确认修改吗？")
+}
+const confirm = () => {
+  const data = {}
+  data[keys] = terminalInfo[keys]
+  keys = null
+  $updateTerminal(terminalInfo.trmId, data).then(() => {
+    uni.showToast({
+      title: "修改成功",
+      icon: "success",
+    })
+  })
+}
+const cancelSwitchTips = (val) => {
+  if (!keys) return
+  terminalInfo[keys] = Number(!terminalInfo[keys])
+}
+// 更改默认状态
+const flagChange = (e) => {
+  let val = Number(e.detail.value)
+  terminalInfo.defaultFlag = val
+  jeepayConfirmRef.value.comfirmOpen(
+    () => {
+      $updateMchTermDefault(terminalInfo.trmId, val).then((res) => {
+        uni.showToast({ title: "更新成功", icon: "none" })
+      })
+    },
+    "是否更改为默认设备",
+    () => (terminalInfo.defaultFlag = Number(!val))
+  )
+}
+
+// 请求可报备的渠道列表
+let channelList = ref([])
+const getChannelList = () => {
+  $getMchTermChannelBindInfos(trmId.value).then(({ bizData }) => {
+    bizData.forEach((item) => {
+      if (item.channelBindInfo.state == 0 || !item.channelBindInfo?.state) {
+        item.stateText = "未报备"
+        item.stateColor = "rgba(0,0,0,.5)"
+      } else if (item.channelBindInfo.state == 1) {
+        item.stateText = "报备成功"
+        item.stateColor = "#80f2ff"
+      } else if (item.channelBindInfo.state == 2) {
+        item.stateText = "报备失败"
+        item.stateColor = "#ff8095"
+      }
+    })
+    channelList.value = bizData
+  })
+}
+
+// 报备
+let sendText = ref("{}") // 报备信息
+let sendInfo = reactive({}) // 要报的备渠道信息
+const sendup = (info) => {
+  Object.assign(sendInfo, info)
+  info.channelBindInfo.state == 1
+    ? (sendText.value = "是否注销当前设备所选渠道的报备？")
+    : (sendText.value = "是否对当前设备所选渠道进行报备？")
+
+  JPopupRef.value.open() // 开启弹窗
+}
+
+// 确认 and 取消报备
+const filing = () => {
+  JPopupRef.value.close() // 关闭弹窗
+  $mchTermChannelSendup(trmId.value, sendInfo.ifCode, sendInfo.state).then((res) => {
+    // 刷新报备列表
+    getChannelList()
+    uni.hideLoading()
+    uni.showToast({ title: "操作成功", icon: "none" })
+  })
+}
+
+const cancel = () => JPopupRef.value.close() // 关闭弹窗
+
+// 跳转至编辑详情
+const toEdit = () => uni.navigateTo({ url: "./addTerminal?id=" + trmId.value })
+
+// 删除终端
+const delTerminal = () => {
+  jeepayConfirmRef.value.comfirmOpen(() => {
+    $delTerminal(terminalInfo.trmId).then((res) => {
+      uni.showToast({ title: "删除成功", icon: "none" })
+    })
+    uni.navigateBack({}) // 删除完毕返回上一页
+  }, "是否进行删除")
+}
+const editInfo = () => {
+  uni.navigateTo({
+    url: "./addTerminalNext?trmId=" + terminalInfo.trmId,
+  })
+}
+// 监听页面滚动 用于给自定义导航栏换背景色
+const header = reactive({ bgColor: "transparent" })
+onPageScroll((data) => {
+  if (data.scrollTop > 20) {
+    header.bgColor = "$primaryColor"
+  } else {
+    header.bgColor = "transparent"
+  }
+})
+</script>
+<style lang="scss">
+page {
+  background: $primaryColor;
+}
+</style>
+<style scoped lang="scss">
+.ter-type {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff;
+  font-size: 30rpx;
+  image {
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 10rpx;
+  }
+}
+
+// 中间的分割线
+.line {
+  border-top: 1rpx solid #6858ec;
+  margin: 25rpx 40rpx;
+}
+.default {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text {
+    margin-right: 10rpx;
+    color: #fff;
+  }
+  .state {
+    width: 42rpx;
+    height: 42rpx;
+    border-radius: 50%;
+    background-color: #bf80ff;
+  }
+}
+
+.scroll-list {
+  max-height: 50vh;
+}
+.channel-list {
+  box-sizing: border-box;
+  padding: 0 40rpx;
+  overflow: hidden;
+}
+.filing {
+  text-align: center;
+  font-size: 33rpx;
+  line-height: 110rpx;
+  height: 110rpx;
+  border-top: 1rpx solid rgba($color: #000000, $alpha: 0.3);
+  border-radius: 0 0 20rpx 20rpx;
+  // background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255);
+}
+.pop-body {
+  padding: 30rpx;
+  background-color: #fff;
+  .text {
+    font-size: 27rpx;
+    color: #333;
+    margin-bottom: 30rpx;
+  }
+}
+</style>

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>