源文件
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<JeepayWrapper>
|
||||
<JHeaderTitle title="码牌管理" bgColor="#f2f2f2" />
|
||||
<view class="page">
|
||||
<JSearchInput @search="searchHandle" @resetSearch="reset" ref="search" place="搜索商户号、名称、设备号">
|
||||
<view class="header-assign" @tap="cancel">
|
||||
<image src="/static/iconImg/icon-file.svg" mode="scaleToFill" />
|
||||
划拨
|
||||
</view>
|
||||
</JSearchInput>
|
||||
|
||||
<view v-for="(item, index) in useDataResult.dataList" :key="item.qrcId">
|
||||
<JPreview
|
||||
v-bind="item.info"
|
||||
:key="item.qrcId"
|
||||
:activeBox="vdata.activeBox"
|
||||
:isLast="index === useDataResult.dataList.length - 1"
|
||||
@activeClick="handleActive(item.info)"
|
||||
@click="toDetail(item.qrcId)"
|
||||
>
|
||||
<template #bottom>
|
||||
<view class="info-wrapper">
|
||||
<view class="info" v-if="!item.isSelf">
|
||||
<image src="/static/iconImg/icon-mini-agent.svg" mode="aspectFit" class="mch-img" />
|
||||
<view class="name">{{ item.agentName }}</view>
|
||||
<view class="number">{{ item.agentNo }}</view>
|
||||
</view>
|
||||
<view class="info" v-if="item.mchNo">
|
||||
<image src="@/static/equipmentImg/mch-little.svg" mode="aspectFit" class="mch-img" />
|
||||
<view class="name">{{ item.mchName }}</view>
|
||||
<view class="number">{{ item.mchNo }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</JPreview>
|
||||
</view>
|
||||
|
||||
<jeepayListNull :isShow="true" :list="useDataResult.dataList.length" />
|
||||
<view class="footer-button" v-show="vdata.activeBox">
|
||||
<view class="button-main">
|
||||
<button @tap="cancel">取消</button>
|
||||
<button class="confirm" @tap="openNext">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<JSinglePopup :list="selectedList" ref="refSingle" />
|
||||
<SelectedAgent ref="refSelected" @confirm="toAgent" />
|
||||
</JeepayWrapper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, toRaw, ref } from 'vue'
|
||||
import { $getQRcodeList, $qrCodeAllotORTakeBack } from '@/http/apiManager.js'
|
||||
import { onLoad, onBackPress, onShow } from '@dcloudio/uni-app'
|
||||
import useGetList from '@/hooks/useList.js'
|
||||
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle.vue' //自定义导航栏
|
||||
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull.vue'
|
||||
import JPreview from '@/components/newComponents/JPreview/JPreview.vue'
|
||||
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput.vue'
|
||||
import SelectedAgent from './components/SelectedAgent.vue'
|
||||
const refSingle = ref(null)
|
||||
const refSelected = ref(null)
|
||||
// 过滤请求回来的列表数据
|
||||
const dataHandle = (data) => {
|
||||
data.forEach((item) => {
|
||||
item.info = {
|
||||
img: item.qrcState == 1 ? '/static/equipmentImg/code-open.svg' : '/static/equipmentImg/code-close.svg',
|
||||
title: item.qrcAlias ? item.qrcAlias : '未命名',
|
||||
qrcId: item.qrcId,
|
||||
spot: item.qrcState == 1 ? '#7737FE' : '#B2B2B2',
|
||||
status: item.qrcState == 1 ? '已启用' : '已禁用',
|
||||
disabled: !!item.bindState,
|
||||
deviceId: item.deviceId,
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
const vdata = reactive({
|
||||
activeBox: false,
|
||||
})
|
||||
// 初始化列表数据
|
||||
const { useDataResult, getList } = useGetList({
|
||||
requestFun: $getQRcodeList,
|
||||
pageSize: 15,
|
||||
dataHandle,
|
||||
})
|
||||
|
||||
const toDetail = (id) => uni.navigateTo({ url: `./codeCardDetail?id=${id}` })
|
||||
|
||||
const search = ref(null) // 注册搜索组件
|
||||
// 搜索
|
||||
const searchHandle = (val) => getList({ appSearchData: val })
|
||||
// 重置搜索
|
||||
const reset = () => getList({ appSearchData: '' })
|
||||
// 输入框存在内容时，清空文字，列表重置
|
||||
onBackPress(() => {
|
||||
if (search.value.searchText != '') {
|
||||
search.value.searchText = ''
|
||||
reset()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
// 设备号列表
|
||||
const devNoList = []
|
||||
|
||||
// 勾选
|
||||
const handleActive = (val) => {
|
||||
if (val.disabled) return
|
||||
if (val.active) {
|
||||
devNoList.splice(
|
||||
devNoList.findIndex((v) => v == val.qrcId),
|
||||
1
|
||||
)
|
||||
val.active = false
|
||||
return
|
||||
}
|
||||
devNoList.push(val.qrcId)
|
||||
val.active = true
|
||||
}
|
||||
const selectedList = [
|
||||
{ label: '收回所有已选择设备', value: 'takeBack', confirmText: '确定要收回所有已选设备吗？', fun: takeBackDev },
|
||||
{
|
||||
label: '划拨已选设备至代理商',
|
||||
value: 'toAgent',
|
||||
fun: () => {
|
||||
refSelected.value.open()
|
||||
},
|
||||
},
|
||||
]
|
||||
const openNext = () => {
|
||||
if (devNoList.length == 0) return uni.showToast({ title: '请勾选要进行操作的设备', icon: 'none' })
|
||||
refSingle.value.open()
|
||||
}
|
||||
// 收回划拨
|
||||
function takeBackDev() {
|
||||
const data = {
|
||||
allotIds: devNoList.join(','),
|
||||
allotOrRecover: 'recover',
|
||||
allotType: 'select',
|
||||
}
|
||||
$qrCodeAllotORTakeBack(data).then((res) => {
|
||||
uni.showToast({
|
||||
title: '收回成功',
|
||||
icon: 'success|none',
|
||||
})
|
||||
devNoList.length = 0
|
||||
vdata.activeBox = false
|
||||
getList({
|
||||
pageNumber: 1,
|
||||
})
|
||||
})
|
||||
}
|
||||
// 划拨
|
||||
function toAgent(e) {
|
||||
const data = {
|
||||
agentNo: e.text,
|
||||
allotIds: devNoList.join(','),
|
||||
allotOrRecover: 'allot',
|
||||
allotType: 'select',
|
||||
}
|
||||
$qrCodeAllotORTakeBack(data).then((res) => {
|
||||
uni.showToast({
|
||||
title: '划拨成功',
|
||||
icon: 'success|none',
|
||||
})
|
||||
devNoList.length = 0
|
||||
vdata.activeBox = false
|
||||
refSelected.value.close()
|
||||
getList({
|
||||
pageNumber: 1,
|
||||
})
|
||||
})
|
||||
}
|
||||
const cancel = () => {
|
||||
if (!vdata.activeBox) return (vdata.activeBox = true)
|
||||
useDataResult.dataList.forEach((v) => {
|
||||
v.info.active = false
|
||||
})
|
||||
devNoList.length = 0
|
||||
vdata.activeBox = false
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header-assign {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #404040;
|
||||
image {
|
||||
margin-right: 5rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
.info-wrapper {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.info {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.mch-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 10rpx;
|
||||
width: 350rpx;
|
||||
color: #000;
|
||||
font-size: 28rpx;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.number {
|
||||
white-space: nowrap;
|
||||
color: #8c8c8c;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.footer-button {
|
||||
height: 170rpx;
|
||||
}
|
||||
.button-main {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
align-items: center;
|
||||
height: 170rpx;
|
||||
border-top: 1rpx solid #ededed;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20rpx);
|
||||
button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 110rpx;
|
||||
font-size: 33rpx;
|
||||
font-weight: 500;
|
||||
color: #575757;
|
||||
background-color: #e6e6e6;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.confirm {
|
||||
margin-left: 30rpx;
|
||||
background-color: $primaryColor;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user