259 lines
8.6 KiB
Vue
259 lines
8.6 KiB
Vue
<template>
|
|
<view class="page-wrapper global-wrapper">
|
|
<JHeaderTitle title="刷脸设备详情" bgColor="transparent" color="#fff" imgUrl="/static/iconImg/left-white.svg" />
|
|
<image src="/pageWork/static/images/face-bg.svg" class="bg-image" mode="scaleToFill" />
|
|
<view class="expand-header">
|
|
<image src="/pageWork/static/images/icon-face-white.svg" mode="scaleToFill" />
|
|
<view class="expand-title">{{ vdata.deviceName }}</view>
|
|
<view class="expand-phone">{{ vdata.deviceId }}</view>
|
|
</view>
|
|
<!-- 信息板块 -->
|
|
<JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
|
|
<JInput name="设备名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.deviceName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="设备号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.deviceId" pd="15rpx 40rpx" />
|
|
|
|
<JInput
|
|
name="设备厂商"
|
|
textColor="rgba(255, 255,255, 0.6)"
|
|
:isBorder="true"
|
|
size="30rpx"
|
|
:right="vdata.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4'"
|
|
pd="15rpx 40rpx"
|
|
/>
|
|
|
|
<JInput name="设备状态" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
|
|
<view style="color: #fff; maggin-right: 16rpx; font-size: 30rpx" class="dis-wrapper">
|
|
{{ vdata.state ? '启用' : '禁用' }}
|
|
<switch :checked="vdata.state" style="margin-left: 20rpx; transform: scale(1.2)" color="#BF80FF" @change="stateChange" />
|
|
</view>
|
|
</JInput>
|
|
</JMainCard>
|
|
<view class="title">绑定/划拨信息</view>
|
|
<!-- 绑定商户 未绑定商户状态 -->
|
|
<JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="!vdata.bindState && vdata.isSelf">
|
|
<JInput icon="/pageWork/static/images/bindMch.svg" @tap="bindMch" :isBorder="true" name="绑定至商户" textColor="#fff" size="33rpx" :img="true" />
|
|
</JMainCard>
|
|
<JMainCard wrapPd="0 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="vdata.isSelf && !vdata.bindState">
|
|
<JInput icon="/static/iconImg/icon-assign.svg" @tap="selectedAgent.open()" :isBorder="true" name="划拨至代理" textColor="#fff" size="33rpx" :img="true" />
|
|
</JMainCard>
|
|
<template v-if="!vdata.isSelf">
|
|
<JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="0">
|
|
<JInput name="代理商名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.agentName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="代理商号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.agentNo" pd="15rpx 40rpx" />
|
|
|
|
<JInput
|
|
bgColor="rgba(0,0,0,0.2)"
|
|
icon="/static/iconImg/icon-takeBack.svg"
|
|
@tap="refTakeBack.open('收回后代理商将无法使用该设备！')"
|
|
:isBorder="true"
|
|
name="收回"
|
|
textColor="#fff"
|
|
size="33rpx"
|
|
:img="true"
|
|
/>
|
|
|
|
<JInput
|
|
bgColor="rgba(0,0,0,0.2)"
|
|
icon="/static/iconImg/icon-assign.svg"
|
|
@tap="refAgain.open('确认重新划拨吗？')"
|
|
name="重新划拨"
|
|
borderBg="#7737fe"
|
|
textColor="#fff"
|
|
size="33rpx"
|
|
:img="true"
|
|
/>
|
|
</JMainCard>
|
|
</template>
|
|
<template v-if="vdata.bindState">
|
|
<view class="bind-title">绑定信息</view>
|
|
<JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="0">
|
|
<JInput name="商户" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.mchName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="用户号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.mchNo" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="门店" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.storeName" />
|
|
|
|
<JInput name="门店ID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.storeId" />
|
|
|
|
<JInput name="应用名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.appName" />
|
|
|
|
<JInput name="AppID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.appId" />
|
|
|
|
<JInput
|
|
bgColor="rgba(0,0,0,0.2)"
|
|
icon="/static/equipmentImg/bind.svg"
|
|
@tap="switchStatePopup.open('解绑后商户将无法使用该设备！')"
|
|
:isBorder="true"
|
|
name="解绑"
|
|
textColor="#fff"
|
|
size="33rpx"
|
|
:img="true"
|
|
/>
|
|
|
|
<JInput bgColor="rgba(0,0,0,0.2)" icon="/static/equipmentImg/bind-again.svg" @tap="bindMch" name="重新绑定" borderBg="#7737fe" textColor="#fff" size="33rpx" :img="true" />
|
|
</JMainCard>
|
|
</template>
|
|
</view>
|
|
<jeepayConfirm ref="refConfirm" />
|
|
<JDeletedTips ref="switchStatePopup" @confirm="unbound" />
|
|
<SelectedAgent ref="selectedAgent" @confirm="again" />
|
|
<JDeletedTips ref="refTakeBack" @confirm="takeBack" />
|
|
<JDeletedTips ref="refAgain" @confirm="selectedAgent.open()" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import { ref, reactive, nextTick } from 'vue'
|
|
import { $faceDetails, $unBind, $allotORtakeBack, $updateFace, $updateDeviceDetail } from '@/http/apiManager'
|
|
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
|
|
import JInput from '@/components/newComponents/JInput/JInput'
|
|
import JMainCard from '@/components/newComponents/JMainCard/JMainCard.vue' // 卡片
|
|
import JDeletedTips from '@/components/newComponents/JDeletedTips/JDeletedTips'
|
|
import SelectedAgent from '../deviceManagement/components/SelectedAgent.vue'
|
|
const refConfirm = ref(null)
|
|
const switchStatePopup = ref(null)
|
|
const selectedAgent = ref(null)
|
|
const refTakeBack = ref(null)
|
|
const refAgain = ref(null)
|
|
const vdata = reactive({})
|
|
let id = undefined //设备Id
|
|
onLoad((options) => {
|
|
id = options.deviceId
|
|
})
|
|
onShow(() => {
|
|
if (id) {
|
|
getDetails()
|
|
}
|
|
})
|
|
const getDetails = () => {
|
|
$faceDetails(id).then(({ bizData }) => {
|
|
if (!bizData.isSelf) bizData.isSelf = false
|
|
Object.assign(vdata, bizData)
|
|
})
|
|
}
|
|
// 切换状态
|
|
const stateChange = (e) => {
|
|
vdata.state = Number(e.detail.value)
|
|
refConfirm.value.comfirmOpen(
|
|
() => {
|
|
$updateFace(vdata).then((res) => {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'success|none',
|
|
mask: true,
|
|
})
|
|
})
|
|
},
|
|
'确认修改状态吗？',
|
|
() => {
|
|
vdata.state = Number(!e.detail.value)
|
|
}
|
|
)
|
|
}
|
|
|
|
// 跳转至绑定页
|
|
const bindMch = () => {
|
|
uni.navigateTo({ url: '../deviceManagement/publicBind?id=' + vdata.deviceId + '&tag=pos&title=刷脸设备绑定' })
|
|
}
|
|
|
|
// 解绑函数 打开提示弹窗
|
|
function unbound() {
|
|
$updateDeviceDetail(vdata.deviceId, { bindState: 0 }).then(({ bizData }) => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '解绑成功',
|
|
})
|
|
uni.navigateBack()
|
|
})
|
|
}
|
|
// 重新划拨
|
|
const again = (e) => {
|
|
const data = {
|
|
agentNo: e.text,
|
|
allotDeviceIds: vdata.deviceId,
|
|
allotOrRecover: 'allot',
|
|
allotType: 'select',
|
|
}
|
|
$allotORtakeBack(data).then((res) => {
|
|
nextTick(() => {
|
|
getDetails()
|
|
})
|
|
uni.showToast({ title: '划拨成功', icon: 'success' })
|
|
selectedAgent.value.close()
|
|
})
|
|
}
|
|
// 收回划拨设备
|
|
const takeBack = () => {
|
|
const data = {
|
|
agentNo: vdata.agentNo,
|
|
allotDeviceIds: vdata.deviceId,
|
|
allotOrRecover: 'recover',
|
|
allotType: 'select',
|
|
}
|
|
$allotORtakeBack(data).then((res) => {
|
|
getDetails()
|
|
uni.showToast({ title: '收回成功', icon: 'success' })
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
position: relative;
|
|
background-color: $primaryColor;
|
|
.bg-image {
|
|
position: absolute;
|
|
top: -40rpx;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 650rpx;
|
|
}
|
|
.expand-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 50rpx;
|
|
image {
|
|
width: 93rpx;
|
|
height: 93rpx;
|
|
}
|
|
.expand-title {
|
|
width: 500rpx;
|
|
margin: 20rpx auto 0;
|
|
word-break: break-all;
|
|
text-align: center;
|
|
font-size: 33rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.expand-phone {
|
|
margin: 30rpx 0;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 25rpx;
|
|
}
|
|
.expand-edit {
|
|
position: relative;
|
|
z-index: 30;
|
|
padding: 20rpx 41rpx;
|
|
font-size: 28rpx;
|
|
color: $primaryColor;
|
|
image {
|
|
width: 26.25rpx;
|
|
height: 26.25rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 20rpx;
|
|
font-size: 33rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
</style>
|