shangfutong-ui/jeepay-ui-uapp-agent/pageWork/SelectedList/SelectedList.vue

<template>
  <view class="page-wrapper global-wrapper bgF2">
    <view class="mch-header">
      <JHeaderTitle :title="selected.headerTitle" :isFocus="true" bgColor="#f2f2f2" />
      <view class="search bgF2">
        <JSearchInput :place="selected.place" @search="search" @resetSearch="resetSearch"
      /></view>
    </view>
    <block v-for="(v, i) in list" :key="i">
      <view class="page-main bgF" @tap="selectedData(v)">
        <image :src="selected.imgList" mode="scaleToFill" />
        <view class="page-left">
          <view class="page-text">
            {{ v[selected.title] }}
            <text>{{ v[selected.text] }}</text>
          </view>
          <image
            src="/static/equipmentImg/check.svg"
            mode="scaleToFill"
            v-if="index == v[selected.index] && selected.index"
          />
        </view>
      </view>
    </block>
    <jeepayListNull :list="list.length" :isShow="true" />
    <view class="page-block"> </view>
    <view class="page-button ButtonBor">
      <JButton pdTop="0" v-if="selected?.type != 'search'" pd="30rpx 30rpx 50rpx 30rpx" @HandleTouch="back"
        >确认</JButton
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { onPullDownRefresh, onReachBottom, onLoad } from "@dcloudio/uni-app"
import { $getTeams, $getMerList, $getMchStoreList, $getMchAppList, $getDeviceList, $getDev } from "@/http/apiManager.js"
import useGetList from "@/hooks/useList.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput.vue"
import JButton from "@/components/newComponents/JButton/JButton.vue"
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull"
import useStore from "@/hooks/useStore.js"
const { setStore } = useStore()
onLoad((options) => {
  params.value = { pageSize: 10, pageNumber: 1 }
  selected.value = selectedInfo[options.title]
  if (options.search && options.search != "undefined") {
    let search = JSON.parse(options.search)
    Object.assign(params.value, search)
  }
  index.value = options.selected
  getList()
})
onPullDownRefresh(() => {
  resetSearch()
})
const flag = ref(true)
const list = ref([])
const index = ref("")
const params = ref({
  pageSize: 10,
  pageNumber: 1,
})
const info = ref({})
const selected = ref({})
const selectedInfo = {
  team: {
    imgList: "/static/iconImg/expand-fill.svg",
    headerTitle: "选择团队",
    place: "请输入团队名称",
    getList: $getTeams,
    searchName: "teamName",
    title: "teamName",
    text: "teamId",
    index: "teamId",
    key: "team",
  },
  mch: {
    imgList: "/static/equipmentImg/mch-list.svg",
    headerTitle: "选择商户",
    place: "请输入商户名称",
    getList: $getMerList,
    searchName: "mchName",
    title: "mchName",
    text: "mchNo",
    index: "mchNo",
    key: "mch",
  },
  store: {
    imgList: "/static/navImg/nav-mendian.svg",
    headerTitle: "选择门店",
    place: "请输入门店名称",
    getList: $getMchStoreList,
    searchName: "storeName",
    title: "storeName",
    text: "storeId",
    index: "storeId",
    key: "store",
  },
  appId: {
    imgList: "/static/iconImg/icon-app-selected.svg",
    headerTitle: "请选择应用",
    place: "搜索应用",
    getList: $getMchAppList,
    searchName: "storeName",
    title: "appName",
    text: "appId",
    index: "appId",
    key: "appId",
  },
  POS: {
    imgList: "/static/equipmentImg/pos-open.svg",
    headerTitle: "请选择扫码POS",
    place: "搜索设备名称、设备号、用户号",
    getList: $getDeviceList,
    searchName: "appSearchData",
    title: "deviceName",
    text: "deviceNo",
    index: "deviceId",
    key: "POS",
  },
  expand: {
    type: "search", //只搜索 拓展员搜索
    imgList: "/static/iconImg/expand-member.svg",
    headerTitle: "搜索拓展员",
    place: "搜索拓展员姓名、手机号",
    getList: $getDev,
    searchName: "queryNameOrPhone",
    title: "realname",
    text: "telphone",
    url: "/pageWork/developerManagement/developerDetail?id=",
    id: "sysUserId",
    flag: "show",
  },
}
console.log(11111);
const selectedData = (val) => {
  if (selected.value.url)
    return uni.navigateTo({
      url: selected.value.url + val[selected.value.id],
      fail: (err) => {
        console.log(err)
      },
    })
  info.value = val

  index.value = val[selected.value.index]
}
const getList = () => {
  if (selected.value.flag && selected.value.flag == "show") return
  if (!flag.value) return
  uni.showLoading({ title: "加载中..." })
  selected.value.getList(params.value).then(({ bizData }) => {
    uni.hideLoading()
    uni.stopPullDownRefresh()
    list.value.push(...bizData.records)
    if (bizData.records.length === 0) return (flag.value = false)
  })
}
// 搜索
const search = (val) => {
  selected.value.flag = ""
  params.value[selected.value.searchName] = val
  params.value.pageNumber = 1
  list.value = []

  getList()
}
// 重置搜索
const resetSearch = () => {
  list.value = []
  params.value.pageNumber = 1
  params.value[selected.value.searchName] = ""
  flag.value = true
  getList()
}
const back = () => {
  console.log(selected.value.key,info.value);
  setStore(selected.value.key, info.value)
  uni.navigateBack()
}
onReachBottom(() => {
  params.value.pageNumber++
  getList()
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  .mch-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #f2f2f2;
  }
  .page-main {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    image {
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
    }
    .page-left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f9f9f9;
      .page-text {
        display: flex;
        flex-direction: column;
        font-size: 33rpx;
        text {
          margin-top: 15rpx;
          font-size: 25rpx;
          font-weight: 500;
          color: #8c8c8c;
        }
      }
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .page-block {
    height: 220rpx;
  }
  .page-button {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    backdrop-filter: blur(30px);
  }
}
</style>