first

pages/list/render/DeviceCommonsRender.vue

@@ -0,0 +1,99 @@
+<!--
+  组件功能： 设备通用渲染页面
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/12/06 13:25
+-->
+<template>
+  <!-- 码牌 -->
+  <template v-if="props.type == 'qrc'">
+    <JeepayTableListItem :logo="codeImgListByQrc[record.qrcState]" :title="record.qrcAlias || '未命名'" :subtitle="record.qrcId" :state="record.qrcState" @tap="toDetailPage" />
+  </template>
+
+  <!-- 辅助终端  -->
+  <template v-if="props.type == 'storeTerminal'">
+    <JeepayTableListItem :logo="codeImgListByTerm[record.state]" :title="record.trmName" :subtitle="record.trmNo" :state="record.state" @tap="toDetailPage" />
+  </template>
+
+  <!-- 通用设备  -->
+  <template v-if="props.type == 'device'">
+    <JeepayTableListItem
+      :logo="vdata[`imgListByType${props.record.deviceType}`][props.record.state]"
+      :title="record.deviceName"
+      :subtitle="record.deviceNo"
+      :state="record.state"
+      @tap="toDetailPage"
+    />
+  </template>
+  <template v-if="props.type == 'face'">
+    <JeepayTableListItem :logo="faceImgListByFace[record.state]" :subtitle="record.deviceNo" :state="record.qrcState" @tap="toDetailPage">
+      <template #title>
+        {{ record.deviceName }}
+        <JeepayTag :type="record.provider == 'wxpayQWPro' ? 'green-rgba' : 'blue'">{{ record.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4' }}</JeepayTag>
+      </template>
+    </JeepayTableListItem>
+  </template>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import go from '@/commons/utils/go.js'
+
+const codeImgListByQrc = ['/pageDevice/static/detailsLislImg/code-none.svg', '/pageDevice/static/devIconImg/icon-code.svg']
+
+const codeImgListByTerm = ['/pageDevice/static/detailsLislImg/trm-none.svg', '/pageDevice/static/devIconImg/icon-term.svg']
+const faceImgListByFace = ['/pageDevice/static/devIconImg/icon-face-0.svg', '/pageDevice/static/devIconImg/icon-face-1.svg']
+
+// 定义传入属性
+const props = defineProps({
+  type: { type: String, default: 'device' }, // 类型
+
+  record: { type: Object, default: () => {} }, // 渲染对象
+})
+
+const vdata = reactive({
+  imgListByType1: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
+  imgListByType2: ['/pageDevice/static/detailsLislImg/print-none.svg', '/pageDevice/static/devIconImg/icon-print.svg'],
+  imgListByType3: ['/pageDevice/static/detailsLislImg/scanPos-none.svg', '/pageDevice/static/devIconImg/icon-scanPos.svg'],
+  imgListByType4: ['/pageDevice/static/detailsLislImg/pos-none.svg', '/pageDevice/static/devIconImg/icon-pos.svg'],
+  imgListByType5: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
+  imgListByType7: ['/pageDevice/static/detailsLislImg/lite-none.svg', '/pageDevice/static/detailsLislImg/icon-lite.svg'],
+})
+
+function toDetailPage() {
+  if (props.type == 'qrc') {
+    return go.to('PAGES_APP_CODE_DETAILS', { codeId: props.record.qrcId })
+  }
+
+  if (props.type == 'storeTerminal') {
+    return go.to('PAGES_APP_TERMINAL_DETAILS', { trmId: props.record.trmId })
+  }
+
+  // 通用设备  1-喇叭  2-打印机 3-扫码POS 4-智能POS
+  if (props.record.deviceType) {
+    const deviceId = props.record.deviceId
+    switch (props.record.deviceType) {
+      case 1:
+        go.to('PAGES_APP_HORN_DETAILS', { deviceId })
+        break
+      case 2:
+        go.to('PAGES_APP_PRINT_DETAILS', { deviceId })
+        break
+      case 3:
+        go.to('PAGES_APP_SCANPOS_DETAILS', { deviceId })
+        break
+      case 4:
+        go.to('PAGES_APP_POS_DETAILS', { deviceId })
+        break
+      case 6:
+        go.to('PAGES_APP_FACE_DETAILS', { deviceId })
+        break
+      case 7:
+        go.to('PAGES_LITE_DETAILS', { deviceId })
+        break
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>