159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<!--
|
||
组件功能： 设备通用页面
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/12/06 11:30
|
||
-->
|
||
<template>
|
||
<JeepayBackground>
|
||
|
||
<JeepayCustomNavbar bgDefaultColor="#fff" :title="props.navTitle" backCtrl="back" />
|
||
|
||
<!-- 搜索 -->
|
||
<JSearchTitle :place="props.searchTitle" @click="go.toSearchPage(props.searchType, props.searchParams)">
|
||
<template #right>
|
||
<JeepayStateSelect v-model:state="vdata.searchData[props.searchStateField]" @change="refTable()"/>
|
||
</template>
|
||
</JSearchTitle>
|
||
|
||
<!-- 数据列表 -->
|
||
<JeepayTableList ref="codeTable" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
|
||
<template #tableBody="{ record }">
|
||
<DeviceCommonsRender :type="props.searchType" :record="record" />
|
||
</template>
|
||
</JeepayTableList>
|
||
|
||
<!-- 底部固定按钮 -->
|
||
<view class="list-footer">
|
||
<view class="button-wrapper">
|
||
<view class="store-name flex-center" hover-class="touch-hover" @tap="selectedStore">
|
||
{{ vdata.selectedStrore.storeName || '全部门店' }}
|
||
<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
|
||
</view>
|
||
<Button v-if="props.bottomBtnTitle" @tap="emit('bottomBtnClickFunc')">{{ props.bottomBtnTitle }}</Button>
|
||
</view>
|
||
</view>
|
||
<JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayStoreSelect" />
|
||
</JeepayBackground>
|
||
|
||
<!-- 门店选择 -->
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import { onReachBottom } from '@dcloudio/uni-app'
|
||
import go from '@/commons/utils/go.js'
|
||
import DeviceCommonsRender from '@/pages/list/render/DeviceCommonsRender.vue'
|
||
|
||
onReachBottom(() => {})
|
||
|
||
|
||
const codeTable = ref() // 表格实例
|
||
const jeepayStoreSelect = ref() // 获取门店选择弹窗实例
|
||
const bindPopup = ref() // 绑定新码的提示信息
|
||
|
||
|
||
// emit 父组件使用： v-model="val" 进行双向绑定。
|
||
const emit = defineEmits(['bottomBtnClickFunc'])
|
||
|
||
|
||
// 定义组件参数
|
||
const props = defineProps({
|
||
|
||
// 导航
|
||
navTitle: { type: String },
|
||
|
||
// 搜索标题
|
||
searchTitle: { type: String },
|
||
|
||
// 搜索类型
|
||
searchType: { type: String },
|
||
|
||
// 搜索条件
|
||
searchParams: { type: Object },
|
||
|
||
// 搜索状态帅选字段
|
||
searchStateField: { type: String, default: 'state' },
|
||
|
||
// 底部按钮显示标题
|
||
bottomBtnTitle: { type: String },
|
||
|
||
// 搜索事件
|
||
reqTableDataFunc: { type: Function },
|
||
|
||
})
|
||
|
||
const vdata = reactive({
|
||
|
||
searchData: { }, // 搜索条件
|
||
|
||
selectedStrore: { }, // 当前选择门店
|
||
|
||
})
|
||
|
||
const reqTableDataFunc = (params) => {
|
||
return props.reqTableDataFunc(params)
|
||
}
|
||
|
||
// 选择门店
|
||
function selectedStore (){
|
||
|
||
jeepayStoreSelect.value.open(vdata.selectedStrore).then((selected) => {
|
||
|
||
// 当前选择的门店
|
||
vdata.selectedStrore = selected || { }
|
||
|
||
vdata.searchData.storeId = vdata.selectedStrore.storeId
|
||
refTable()
|
||
})
|
||
}
|
||
|
||
function refTable(v){
|
||
codeTable.value.refTable(v || true )
|
||
}
|
||
onMounted(()=>{
|
||
vdata.searchData[props.searchStateField] = ""
|
||
})
|
||
defineExpose({refTable})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list-footer{
|
||
height: 180rpx;
|
||
}
|
||
|
||
.code-state {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 40rpx;
|
||
font-size: 30rpx;
|
||
color: #222425;
|
||
image {
|
||
margin-left: 10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.store-name {
|
||
position: absolute;
|
||
top: -100rpx;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
font-size: 30rpx;
|
||
background-color: #fff;
|
||
border-top: 1rpx solid #ededed;
|
||
border-bottom: 1rpx solid #ededed;
|
||
background-color: rgba(252, 252, 252, 0.85);
|
||
backdrop-filter: blur(20rpx);
|
||
image {
|
||
margin-left: 10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
</style>
|