100 lines
3.7 KiB
Vue
100 lines
3.7 KiB
Vue
<!--
|
||
组件功能： 设备通用渲染页面
|
||
@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.deviceId"
|
||
: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>
|