源文件
This commit is contained in:
252
jeepay-ui-uapp-agent/pageWork/publicSelect/publicSelect.vue
Normal file
252
jeepay-ui-uapp-agent/pageWork/publicSelect/publicSelect.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view>
|
||||
<JHeaderTitle :title="vdata.title" bgColor="#f2f2f2" />
|
||||
|
||||
<JSearchInput :place="vdata.text" @search="search" @resetSearch="resetSearch" ref="JSearchRef" />
|
||||
|
||||
<view v-for="(item, index) in vdata.dataList" :key="index" @click.stop="select(item)">
|
||||
<JPreview
|
||||
:img="vdata.icon"
|
||||
:title="item[vdata.renderName]"
|
||||
:qrcId="item[vdata.renderId]"
|
||||
:isLast="index === vdata.dataList.length - 1"
|
||||
>
|
||||
<view class="check" v-if="isCheck(item[vdata.renderId])">
|
||||
<image src="/static/equipmentImg/check.svg" />
|
||||
</view>
|
||||
</JPreview>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad, onBackPress, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
|
||||
import { ref, reactive, toRaw } from "vue"
|
||||
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.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 JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue"
|
||||
import JPreview from "@/components/newComponents/JPreview/JPreview.vue"
|
||||
import useStore from "@/hooks/useStore.js"
|
||||
import { $getMerList, $getMchStoreList, $getMchAppList, $getTeams } from "@/http/apiManager.js"
|
||||
|
||||
const { getStore, setStore } = useStore()
|
||||
|
||||
const vdata = reactive({
|
||||
title: "", // 导航栏标题
|
||||
searchHandle: "", // 搜索函数
|
||||
tag: "", // 搜索内容 商户or门店or应用orPOS机
|
||||
icon: "", // 左侧渲染的图标
|
||||
iconClose: "", // pos 会有未启用状态
|
||||
renderName: "", // 用于列表渲染的字段 （上）
|
||||
renderId: "", // 用于列表渲染的字段 （下）
|
||||
dataList: [], // 用于保存请求后的列表
|
||||
isLoad: false, // 是否为上拉加载
|
||||
titlePage: "", // 总页数
|
||||
listTipText: "加载更多", // 提示文字
|
||||
})
|
||||
|
||||
const mchInfo = {
|
||||
title: "选择商户",
|
||||
searchHandle: $getMerList,
|
||||
tag: "mch",
|
||||
text: "搜索商户",
|
||||
renderName: "mchName", // 用于列表渲染的字段 （上）
|
||||
renderId: "mchNo", // 用于列表渲染的字段 （下）
|
||||
icon: "/static/equipmentImg/mch-list.svg", // 左侧渲染的图标
|
||||
}
|
||||
const storeInfo = {
|
||||
title: "选择门店",
|
||||
searchHandle: $getMchStoreList,
|
||||
tag: "store",
|
||||
text: "搜索门店",
|
||||
renderName: "storeName", // 用于列表渲染的字段 （上）
|
||||
renderId: "storeId", // 用于列表渲染的字段 （下）
|
||||
icon: "/static/equipmentImg/store-list.svg", // 左侧渲染的图标
|
||||
}
|
||||
const appInfo = {
|
||||
title: "选择应用",
|
||||
searchHandle: $getMchAppList,
|
||||
tag: "app",
|
||||
text: "搜索应用名称",
|
||||
renderName: "appName", // 用于列表渲染的字段 （上）
|
||||
renderId: "appId", // 用于列表渲染的字段 （下）
|
||||
icon: "/static/equipmentImg/app-list.svg", // 左侧渲染的图标
|
||||
}
|
||||
|
||||
const posInfo = {
|
||||
title: "选择扫码POS",
|
||||
searchHandle: $getMchStoreList,
|
||||
tag: "pos",
|
||||
text: "搜索设备名称",
|
||||
renderName: "deviceName", // 用于列表渲染的字段 （上）
|
||||
renderId: "deviceNo", // 用于列表渲染的字段 （下）
|
||||
iconOn: "/static/equipmentImg/opse-open.svg", // 左侧渲染的图标
|
||||
iconClose: "/static/equipmentImg/opse-close.svg", // 左侧渲染的图标
|
||||
}
|
||||
const teamInfo = {
|
||||
title: "选择团队",
|
||||
searchHandle: $getTeams,
|
||||
tag: "team",
|
||||
text: "搜索团队名称",
|
||||
renderName: "teamName", // 用于列表渲染的字段 （上）
|
||||
renderId: "teamId", // 用于列表渲染的字段 （下）
|
||||
iconOn: "/static/iconImg/expand-fill.svg", // 左侧渲染的图标
|
||||
iconClose: "/static/iconImg/expand-team-close.svg", // 左侧渲染的图标
|
||||
}
|
||||
// 判断右侧 勾选标志是否展示, 只要ID一致就显示，否则都是false
|
||||
const isCheck = (id) => {
|
||||
if ([getStore("mchInfo").mchNo, getStore("storeInfo").storeId, getStore("appInfo").appId].includes(id)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
switch (option.name) {
|
||||
case "mch":
|
||||
Object.assign(vdata, mchInfo)
|
||||
break
|
||||
case "store":
|
||||
Object.assign(vdata, storeInfo)
|
||||
break
|
||||
case "app":
|
||||
Object.assign(vdata, appInfo)
|
||||
break
|
||||
case "team":
|
||||
Object.assign(vdata, teamInfo)
|
||||
break
|
||||
default:
|
||||
null
|
||||
}
|
||||
// 请求列表
|
||||
getList()
|
||||
})
|
||||
|
||||
// 选择函数，选择后返回，同时将值赋值给对应的对象中
|
||||
const select = (item) => {
|
||||
setStore(`${vdata.tag}Info`, toRaw(item))
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
const store = reactive({
|
||||
mchInfo: {}, // 商户信息
|
||||
storeInfo: {}, // 门店信息
|
||||
application: {}, // 应用信息
|
||||
bindMch: {}, // 商户绑定信息
|
||||
})
|
||||
|
||||
// 请求列表默认参数
|
||||
const params = reactive({
|
||||
pageNumber: 1, // 默认是1
|
||||
pageSize: 10, // 默认10条，可传参修改
|
||||
})
|
||||
|
||||
// 请求列表函数
|
||||
const getList = (searchText) => {
|
||||
// 根据不同的搜索内容 增加不同的搜索条件
|
||||
switch (vdata.tag) {
|
||||
case "mch":
|
||||
searchText ? (params.mchName = searchText) : (params.mchName = "")
|
||||
break
|
||||
case "store":
|
||||
params.mchNo = getStore("mchInfo").mchNo
|
||||
searchText ? (params.storeName = searchText) : (params.storeName = "")
|
||||
break
|
||||
case "app":
|
||||
params.mchNo = getStore("mchInfo").mchNo
|
||||
searchText ? (params.appName = searchText) : (params.appName = "")
|
||||
break
|
||||
case "pos":
|
||||
params.deviceType = 3
|
||||
params.mchNo = getStore("mchInfo").mchNo
|
||||
params.storeId = getStore("storeInfo").storeId
|
||||
params.appId = getStore("appInfo").appId
|
||||
searchText ? (params.appSearchData = searchText) : (params.appSearchData = "")
|
||||
break
|
||||
case "team":
|
||||
params.teamName = ""
|
||||
break
|
||||
default:
|
||||
null
|
||||
}
|
||||
|
||||
vdata.listTipText = "加载中..."
|
||||
uni.showLoading({ title: "加载中..." })
|
||||
|
||||
vdata.searchHandle(toRaw(params)).then(({ bizData }) => {
|
||||
uni.hideLoading()
|
||||
uni.stopPullDownRefresh() // 请求成功停止下拉刷新
|
||||
vdata.titlePage = Math.ceil(bizData.total / params.pageSize)
|
||||
|
||||
if (vdata.titlePage == params.pageNumber || bizData.records.length == 0) {
|
||||
vdata.listTipText = "暂无更多"
|
||||
}
|
||||
|
||||
let data = bizData.records ? bizData.records : bizData
|
||||
|
||||
if (vdata.isLoad) {
|
||||
vdata.dataList.push(...data)
|
||||
} else {
|
||||
vdata.dataList = data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const search = (e) => {
|
||||
vdata.isLoad = false // 搜索时，不是上拉加载，此时应将状态改为，请求后重置列表数据
|
||||
getList(e)
|
||||
}
|
||||
// 取消搜索 清空字段
|
||||
const resetSearch = () => {
|
||||
getList()
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
params.pageNumber = 1
|
||||
vdata.isLoad = false
|
||||
getList()
|
||||
})
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(() => {
|
||||
params.pageNumber++
|
||||
if (params.pageNumber > vdata.titlePage) {
|
||||
params.pageNumber = params.pageNumber
|
||||
return (vdata.isLoad = false)
|
||||
}
|
||||
vdata.isLoad = true
|
||||
getList()
|
||||
})
|
||||
|
||||
// 返回前清除搜索数据
|
||||
const JSearchRef = ref(null)
|
||||
onBackPress(() => {
|
||||
if (JSearchRef.value.searchText != "") {
|
||||
JSearchRef.value.searchText = ""
|
||||
getList()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.check {
|
||||
width: 50rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user