253 lines
7.2 KiB
Vue
253 lines
7.2 KiB
Vue
<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>
|