420 lines
12 KiB
Vue
420 lines
12 KiB
Vue
<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>
|