316 lines
9.0 KiB
Vue
316 lines
9.0 KiB
Vue
<template>
|
||
<JeepayBackground>
|
||
<view class="input-wrapper">
|
||
<view class="input-main">
|
||
<uni-easyinput class='jeepay-search' :inputBorder="false" :placeholder="vdata.pageObject.searchPlaceholder"
|
||
v-model="vdata.searchVal" @focus="focus" @confirm="searchFunc">
|
||
<template #prefixIcon><image src="@/static/iconImg/icon-search.svg" class="input-icon" @tap="vdata.searchVal=''" /></template>
|
||
</uni-easyinput>
|
||
<button type="text" @click="searchFunc()">搜索</button>
|
||
<!-- <button v-show="!vdata.isSearch" type="text" @click="searchFunc">取消</button> -->
|
||
</view>
|
||
</view>
|
||
|
||
<JeepayTableList ref="tableRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :initData="false">
|
||
<template #tableBody="{ record }">
|
||
<PayOrderRender v-if="vdata.pageType == 'payOrder'" :record="record" />
|
||
<MchAppRender v-if="vdata.pageType == 'mchApp'" :record="record" />
|
||
<WxmpUserRender v-if="vdata.pageType == 'wxmpUser'" :record="record" />
|
||
<MchApplymentRender v-if="vdata.pageType == 'mchApplyment'" :record="record" />
|
||
<MchStoreRender v-if="vdata.pageType == 'mchStore'" :record="record" />
|
||
<SysUserRender v-if="vdata.pageType == 'sysUser'" :record="record" />
|
||
<AppConfigRender v-if="vdata.pageType == 'payPassage'" :record="record" :configAppId="vdata.pageOptions.appId" />
|
||
<MemberRender v-if="vdata.pageType == 'member'" :record="record" />
|
||
<MemberRechargeRecordRender v-if="vdata.pageType == 'memberRechargeRecord'" :record="record" />
|
||
<MemberAccountHistoryRender v-if="vdata.pageType == 'memberAccountHistory'" :record="record" />
|
||
|
||
<!-- 设备的三个类型的搜索 -->
|
||
<DeviceCommonsRender v-if="vdata.pageType == 'qrc'" type="qrc" :record="record" />
|
||
<DeviceCommonsRender v-if="vdata.pageType == 'storeTerminal'" type="storeTerminal" :record="record" />
|
||
<DeviceCommonsRender v-if="vdata.pageType == 'device'" type="device" :record="record" />
|
||
<DeviceCommonsRender v-if="vdata.pageType == 'face'" type="face" :record="record" />
|
||
<FaceCardRender v-if="vdata.pageType == 'faceImgAd'" v-bind="record" />
|
||
|
||
<!-- 数据渲染: 动态组件： 微信小程序不支持 -->
|
||
<!-- <component ref="recordRenderComponentRef" :is="vdata.pageObject.component" :record="record" /> -->
|
||
</template>
|
||
</JeepayTableList>
|
||
</JeepayBackground>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||
import emit from '@/commons/utils/emit.js';
|
||
import go from '@/commons/utils/go.js';
|
||
import {
|
||
reqLoad,
|
||
API_URL_PAY_ORDER_LIST,
|
||
API_URL_MCH_APP_LIST,
|
||
API_URL_WXMP_USER_LIST,
|
||
API_URL_MCH_APPLYMENT_LIST,
|
||
API_URL_MCH_STORE_LIST,
|
||
API_URL_SYS_USER_LIST,
|
||
API_URL_PAY_PASSAGE_LIST,
|
||
API_URL_SYS_CODE_LIST,
|
||
API_URL_SYS_DEVICE_LIST,
|
||
API_URL_SYS_TERMINALS,
|
||
API_URI_PAY_AD_LIST,
|
||
API_URL_MEMBERS,
|
||
API_URL_MEMBER_RECHARGE_RECORDS,
|
||
API_URL_MEMBER_ACCOUNT_HISTORY
|
||
} from '@/http/apiManager.js';
|
||
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app';
|
||
import PayOrderRender from './render/PayOrderRender.vue';
|
||
import MchAppRender from './render/MchAppRender.vue';
|
||
import WxmpUserRender from './render/WxmpUserRender.vue';
|
||
import MchApplymentRender from './render/MchApplymentRender.vue';
|
||
import MchStoreRender from './render/MchStoreRender.vue';
|
||
import SysUserRender from './render/SysUserRender.vue';
|
||
import AppConfigRender from './render/AppConfigRender.vue';
|
||
import DeviceCommonsRender from './render/DeviceCommonsRender.vue';
|
||
import FaceCardRender from './render/FaceCardRender.vue';
|
||
import MemberRender from './render/MemberRender.vue';
|
||
import MemberRechargeRecordRender from './render/MemberRechargeRecordRender.vue';
|
||
import MemberAccountHistoryRender from './render/MemberAccountHistoryRender.vue';
|
||
|
||
onReachBottom(() => {});
|
||
|
||
const tableRef = ref();
|
||
const recordRenderComponentRef = ref(); // 数据渲染组件
|
||
|
||
// 定义所有的页面类型
|
||
const pageTypeMap = {
|
||
payOrder: {
|
||
// 支付订单列表
|
||
component: PayOrderRender, // 渲染组件
|
||
searchUrl: API_URL_PAY_ORDER_LIST,
|
||
searchField: 'unionOrderId', // 搜索字段
|
||
searchPlaceholder: '支付订单号、商户单号' // 显示名称
|
||
},
|
||
|
||
mchApp: {
|
||
// 商户应用
|
||
component: MchAppRender, // 渲染组件
|
||
searchUrl: API_URL_MCH_APP_LIST,
|
||
searchField: 'unionSearchId', // 搜索字段
|
||
searchPlaceholder: '应用APPID、名称' // 显示名称
|
||
},
|
||
|
||
wxmpUser: {
|
||
// 通知人管理
|
||
component: WxmpUserRender, // 渲染组件
|
||
searchUrl: API_URL_WXMP_USER_LIST,
|
||
searchField: 'nickname', // 搜索字段
|
||
searchPlaceholder: '昵称' // 显示名称
|
||
},
|
||
|
||
mchApplyment: {
|
||
// 进件
|
||
component: MchApplymentRender, // 渲染组件
|
||
searchUrl: API_URL_MCH_APPLYMENT_LIST,
|
||
searchField: 'unionSearchId', // 搜索字段
|
||
searchPlaceholder: '进件单号' // 显示名称
|
||
},
|
||
|
||
mchStore: {
|
||
// 门店
|
||
component: MchStoreRender, // 渲染组件
|
||
searchUrl: API_URL_MCH_STORE_LIST,
|
||
searchField: 'unionStoreInfo', // 搜索字段
|
||
searchPlaceholder: '门店名称、ID' // 显示名称
|
||
},
|
||
|
||
sysUser: {
|
||
// 用户管理
|
||
component: SysUserRender, // 渲染组件
|
||
searchUrl: API_URL_SYS_USER_LIST,
|
||
searchField: 'realname', // 搜索字段
|
||
searchPlaceholder: '姓名' // 显示名称
|
||
},
|
||
|
||
payPassage: {
|
||
// 支付通道配置
|
||
component: AppConfigRender, // 渲染组件
|
||
searchUrl: API_URL_PAY_PASSAGE_LIST,
|
||
searchField: 'wayCode', // 搜索字段
|
||
searchPlaceholder: '支付方式代码' // 显示名称
|
||
},
|
||
|
||
qrc: {
|
||
searchUrl: API_URL_SYS_CODE_LIST,
|
||
searchField: 'appSearchData',
|
||
searchPlaceholder: '搜索码牌名称，编号'
|
||
},
|
||
|
||
device: {
|
||
searchUrl: API_URL_SYS_DEVICE_LIST,
|
||
searchField: 'appSearchData',
|
||
searchPlaceholder: '搜索设备名称、编号'
|
||
},
|
||
|
||
storeTerminal: {
|
||
searchUrl: API_URL_SYS_TERMINALS,
|
||
searchField: 'trmName',
|
||
searchPlaceholder: '搜索辅助终端名称'
|
||
},
|
||
face: {
|
||
searchUrl: API_URL_SYS_DEVICE_LIST,
|
||
searchField: 'appSearchData',
|
||
searchPlaceholder: '搜索设备名称、编号'
|
||
},
|
||
faceImgAd:{
|
||
searchUrl: API_URI_PAY_AD_LIST,
|
||
searchField: 'title',
|
||
searchPlaceholder: '搜索广告标题'
|
||
},
|
||
// 会员管理
|
||
member: {
|
||
component: MemberRender, // 渲染组件
|
||
searchUrl: API_URL_MEMBERS,
|
||
searchField: 'unionQueryParam',
|
||
searchPlaceholder: '搜索手机号、会员名称'
|
||
},
|
||
// 会员充值记录
|
||
memberRechargeRecord: {
|
||
component: MemberRechargeRecordRender, // 渲染组件
|
||
searchUrl: API_URL_MEMBER_RECHARGE_RECORDS,
|
||
searchField: 'unionQueryParam',
|
||
searchPlaceholder: '搜索订单号、手机号、会员名称'
|
||
},
|
||
// 会员账户流水
|
||
memberAccountHistory: {
|
||
component: MemberAccountHistoryRender, // 渲染组件
|
||
searchUrl: API_URL_MEMBER_ACCOUNT_HISTORY,
|
||
searchField: 'unionQueryParam',
|
||
searchPlaceholder: '搜索充值单号、手机号、会员名称'
|
||
}
|
||
};
|
||
|
||
onLoad(option => {
|
||
vdata.pageOptions = option;
|
||
vdata.pageType = option.type;
|
||
vdata.pageObject = pageTypeMap[option.type];
|
||
// 特殊处理
|
||
if (vdata.pageType == 'payPassage') {
|
||
vdata.searchData.appId = option.appId;
|
||
}
|
||
|
||
// 特殊处理
|
||
if (vdata.pageType == 'device') {
|
||
vdata.searchData.deviceType = option.deviceType;
|
||
}
|
||
|
||
// 特殊处理
|
||
if (vdata.pageType == 'sysUser') { // 不查询普通用户。
|
||
vdata.searchData.isNotHasType2 = 1;
|
||
}
|
||
|
||
});
|
||
|
||
// 监听 更新事件
|
||
onUnload(() => uni.$off(emit.ENAME_REF_SEARCH_PAGE));
|
||
uni.$on(emit.ENAME_REF_SEARCH_PAGE, function(data) {
|
||
searchFunc();
|
||
});
|
||
|
||
const vdata = reactive({
|
||
pageOptions: {}, // 页面参数
|
||
|
||
pageType: '', // 页面类型
|
||
|
||
pageObject: {}, // 页面对象
|
||
|
||
searchVal: '', // 搜索值
|
||
|
||
searchData: {} ,// 搜索内容
|
||
|
||
|
||
|
||
|
||
|
||
});
|
||
|
||
// 请求
|
||
function reqTableDataFunc(params) {
|
||
|
||
return reqLoad.list(vdata.pageObject.searchUrl, params);
|
||
}
|
||
|
||
// 点击搜索事件
|
||
async function searchFunc(val) {
|
||
if(!vdata.searchVal.trim()) return;
|
||
|
||
vdata.searchData[vdata.pageObject.searchField] = vdata.searchVal;
|
||
tableRef.value.refTable(true); // 刷新列表页
|
||
|
||
}
|
||
|
||
const focus = () => {
|
||
vdata.isSearch = false
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.input-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
padding-top: 22rpx;
|
||
height: 110rpx;
|
||
background-color: $J-bg-ff;
|
||
.input-main {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 70rpx;
|
||
image {
|
||
padding: 22rpx;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
font-size: 27rpx;
|
||
}
|
||
::v-deep uni-button {
|
||
font-size: 32rpx;
|
||
color: rgba(29,121,253,1);
|
||
background: rgba(255,255,255,1);
|
||
}
|
||
::v-deep.uni-easyinput {
|
||
.uni-easyinput__content {
|
||
background-color: $J-bg-f5 !important;
|
||
border-radius: $J-b-r12;
|
||
.uni-easyinput__content-input {
|
||
padding-left: 0 !important;
|
||
.uni-input-input {
|
||
border-radius: $J-b-r12 !important;
|
||
overflow: hidden !important;
|
||
}
|
||
}
|
||
.uni-input-placeholder {
|
||
font-size: 27rpx;
|
||
}
|
||
.uni-icons {
|
||
color: rgba(230,230,230,1) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.input-icon{
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.search-button{
|
||
position: absolute;
|
||
right: 0;
|
||
background-color: transparent !important;
|
||
color: transparent !important;
|
||
}
|
||
|
||
</style>
|