258 lines
9.7 KiB
Vue
258 lines
9.7 KiB
Vue
<template>
|
|
<JeepayWrapper>
|
|
<!-- 顶部自定义导航栏 -->
|
|
<JHeaderTitle title="如意Lite详情" :bgColor="header.bgColor" color="#fff" imgUrl="/static/iconImg/left-white.svg" />
|
|
|
|
<JEquiCode bgImg="/pageWork/static/images/lite-bg.svg" icon="/pageWork/static/images/lite-white.svg" :qrcAlias="params.deviceName" :qrcId="params.deviceId" :editIsShow="false" />
|
|
|
|
<!-- 信息板块 -->
|
|
<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="params.deviceName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="设备号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="params.deviceId" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="设备厂商" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="data.manufacturer" 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">
|
|
{{ params.state ? '启用' : '禁用' }}
|
|
<switch :checked="params.state" style="margin-left: 20rpx; transform: scale(1.2)" color="#BF80FF" @change="switchChange" />
|
|
</view>
|
|
</JInput>
|
|
</JMainCard>
|
|
<view class="title">绑定/划拨信息</view>
|
|
<!-- 绑定商户 未绑定商户状态 -->
|
|
<JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="!params.bindState && params.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="params.isSelf && !params.bindState">
|
|
<JInput icon="/static/iconImg/icon-assign.svg" @tap="selectedAgent.open()" :isBorder="true" name="划拨至代理" textColor="#fff" size="33rpx" :img="true" />
|
|
</JMainCard>
|
|
<template v-if="!params.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="params.agentName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="代理商号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="params.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="params.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="params.mchName" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="用户号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="params.mchNo" pd="15rpx 40rpx" />
|
|
|
|
<JInput name="门店" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="params.storeName" />
|
|
|
|
<JInput name="门店ID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="params.storeId" />
|
|
|
|
<JInput name="应用名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="params.appName" />
|
|
|
|
<JInput name="AppID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="params.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>
|
|
|
|
<!-- 商户选择弹窗 -->
|
|
<!-- 选择弹窗 -->
|
|
<JDeletedTips ref="switchTips" @confirm="confirm" @cancel="cancel" />
|
|
<JDeletedTips ref="switchStatePopup" @confirm="unbound" />
|
|
<JDeletedTips ref="refTakeBack" @confirm="takeBack" />
|
|
<JDeletedTips ref="refAgain" @confirm="selectedAgent.open()" />
|
|
<SelectedAgent ref="selectedAgent" @confirm="again" />
|
|
</JeepayWrapper>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad, onBackPress, onPageScroll, onShow } from '@dcloudio/uni-app'
|
|
import providerObj from '@/util/providerObj.js'
|
|
import { ref, reactive, toRaw, nextTick } from 'vue'
|
|
import { $updateDeviceDetail, $getDeviceDetail, $payIfDefines, $allotORtakeBack } from '@/http/apiManager.js'
|
|
import JDeletedTips from '@/components/newComponents/JDeletedTips/JDeletedTips'
|
|
import JPopup from '@/components/newComponents/JPopup/JPopup.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 SelectedAgent from '../deviceManagement/components/SelectedAgent.vue'
|
|
const data = reactive({
|
|
printState: '', // 打印参数 1. 仅打印 2. 仅播报 3.打印并播报
|
|
printNum: '', // 打印联数
|
|
deviceType: '', //设备类型 云打印=2
|
|
state: false,
|
|
deviceNo: '',
|
|
arrowImage: '../../static/img/arrow-right-gray.svg',
|
|
radioShow: false, //控制绑定结果的显示
|
|
cardList: [],
|
|
bindCard: false, //绑定到码牌还是门店
|
|
payCodeList: [], // 渠道名称列表，用于获取设备厂商字段
|
|
manufacturer: '', // 厂商字段，
|
|
})
|
|
const switchTips = ref(null)
|
|
const params = ref({}) // 传参对象
|
|
const switchStatePopup = ref()
|
|
const searchMch = ref()
|
|
const searchStore = ref()
|
|
const searchApp = ref()
|
|
const refTakeBack = ref(null)
|
|
const refAgain = ref(null)
|
|
const selectedAgent = ref(null)
|
|
onLoad((options) => {
|
|
data.deviceType = options.deviceType
|
|
data.deviceNo = options.deviceId
|
|
})
|
|
|
|
onShow(() => {
|
|
nextTick(() => {
|
|
// 设备厂商 && 支付接口 ,用于匹配查找设备厂商字段
|
|
getDetails()
|
|
})
|
|
})
|
|
const getDetails = () => {
|
|
$payIfDefines({ state: 1 })
|
|
.then(({ bizData }) => {
|
|
data.payCodeList = bizData
|
|
return $getDeviceDetail(data.deviceNo)
|
|
})
|
|
.then(({ bizData }) => {
|
|
params.value = bizData
|
|
data.state = bizData.state
|
|
// 获取厂商
|
|
data.manufacturer = data.payCodeList.find((item) => params.value.provider === item.ifCode).ifName
|
|
})
|
|
}
|
|
let flag = undefined
|
|
// 切换状态
|
|
function switchChange(e, item) {
|
|
flag = true
|
|
params.value.state = Number(e.detail.value)
|
|
switchTips.value.open('确认修改吗？')
|
|
}
|
|
const confirm = () => {
|
|
flag = false
|
|
$updateDeviceDetail(params.value.deviceId, { state: params.value.state }).then(() => {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'success',
|
|
})
|
|
})
|
|
}
|
|
const cancel = () => {
|
|
if (!flag) return
|
|
params.value.state = Number(!params.value.state)
|
|
}
|
|
// 跳转至绑定页
|
|
const bindMch = () => {
|
|
uni.navigateTo({ url: '../deviceManagement/publicBind?id=' + params.value.deviceId + '&tag=pos&title=如意Lite绑定' })
|
|
}
|
|
|
|
// 跳转至编辑信息
|
|
const editInfo = () => {
|
|
uni.navigateTo({
|
|
url: './editPrint?id=' + params.value.deviceId,
|
|
})
|
|
}
|
|
|
|
// 解绑函数 打开提示弹窗
|
|
function unbound() {
|
|
$updateDeviceDetail(params.value.deviceId, { bindState: 0 }).then(({ bizData }) => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '解绑成功',
|
|
})
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
})
|
|
}
|
|
const takeBack = () => {
|
|
const data = {
|
|
agentNo: params.value.agentNo,
|
|
allotDeviceIds: params.value.deviceId,
|
|
allotOrRecover: 'recover',
|
|
allotType: 'select',
|
|
}
|
|
$allotORtakeBack(data).then((res) => {
|
|
getDetails()
|
|
uni.showToast({ title: '收回成功', icon: 'success' })
|
|
})
|
|
}
|
|
// 重新划拨
|
|
const again = (e) => {
|
|
const data = {
|
|
agentNo: e.text,
|
|
allotDeviceIds: params.value.deviceId,
|
|
allotOrRecover: 'allot',
|
|
allotType: 'select',
|
|
}
|
|
$allotORtakeBack(data).then((res) => {
|
|
uni.showToast({ title: '划拨成功', icon: 'success' })
|
|
getDetails()
|
|
selectedAgent.value.close()
|
|
})
|
|
}
|
|
// 监听页面滚动 用于给自定义导航栏换背景色
|
|
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">
|
|
.title {
|
|
margin-top: 20rpx;
|
|
font-size: 33rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
</style>
|