shangfutong-ui/jeepay-ui-uapp-agent/pageWork/deviceManagement/deviceList.vue

94 lines
2.4 KiB
Vue

<template>
<view>
<view>
<view class="list-item" @click.stop="toDetail(item.deviceId)" v-for="(item, index) in dataList" :key="index">
<view class="item-content">
<view class="img">
<image :src="icon" v-if="item.state"></image>
<image :src="iconoff" v-else></image>
</view>
<view class="text">
<view class="title" >
<text>{{ item.deviceName }}</text>
</view>
<view class="content">
<text>设备号:{{ item.deviceNo }}</text>
</view>
<view class="content">
<text v-if="item.bindState">已绑定商户: {{ item.mchNo }}</text>
<text v-else>未绑定</text>
</view>
</view>
</view>
<view class="switch" style="border-bottom:none">
<view @click.stop>
<switch :checked="item.state == 1 ? true : false" @change="onChange($event, item)" style="margin-left: 10rpx;" color="#3981FF" />
</view>
</view>
<image src="../../static/img/right.svg" style="width:40rpx; height:40rpx;"></image>
</view>
<jeepayListNull :list="dataList"></jeepayListNull>
<!-- 更改状态对话框 -->
<jeepayConfirm ref="switchStatePopup" />
</view>
</view>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { onBackPress, onShow } from '@dcloudio/uni-app';
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull.vue';
import jeepayConfirm from '@/components/jeepayConfirm/jeepayConfirm.vue'
const emit = defineEmits(['onChange','handleClose','handleConfirm','toDetail'])
const props = defineProps({
dataList:{type:Array},
icon:{type:String},
iconoff:{type:String}
})
const popup = ref();
const switchStatePopup = ref();
const data = reactive({
deviceId: '', //设备Id
placeholder: '搜索商户号、名称、设备号',
phone: '',
startSearch:false
});
const appSearchData = ref('');
const search = ref()
//状态按钮改变的事件
const onChange = (e, item) => {
item.state = Number(e.detail.value)
switchStatePopup.value.comfirmOpen(
function handleConfirm() {
let params ={
deviceId: item.deviceId,
state: item.state
}
emit('handleConfirm',params)
},
undefined,
function handleClose() {
item.state = Number(!e.detail.value)
emit('handleClose')
}
);
emit('onChange',item)
};
const toDetail =(deviceId) =>{
emit('toDetail',deviceId)
}
</script>
<style>
page {
background-color: #f5f7fa;
}
</style>