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

107 lines
3.1 KiB
Vue

<template>
<view class="store-wrapper global-wrapper">
<view class="mch-header">
<JHeaderTitle title="代理商管理" bgColor="#f2f2f2" />
<JSearchInput
@search="searchList"
@resetSearch="searchList"
ref="search"
place="搜索代理商名称、代理商号、手机号"
>
</JSearchInput>
</view>
<block v-for="v in useDataResult.dataList" :key="v.agentNo">
<JPreview
:title="v.agentName"
:qrcId="v.agentNo"
:img="imgList[v.state == 1 ? 1 : 0]"
:spot="tipsList[v.state].bgColor"
:status="tipsList[v.state].text"
:isLast="useDataResult.dataList.length - 1 == i"
@tap="toDetail(v.agentNo)"
></JPreview>
</block>
<jeepayListNull :isShow="true" :list="useDataResult.dataList.length" />
<view class="button-block"></view>
<view class="mch-footers">
<JButton pd="30rpx 30rpx 50rpx 30rpx" pdTop="0" @HandleTouch="toPage">创建代理商</JButton>
</view>
</view>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue"
import { onBackPress, onShow } from "@dcloudio/uni-app"
import { $getAgentList, $editAgent } 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 JPreview from "@/components/newComponents/JPreview/JPreview.vue" //列表展示
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull" //最后一条数据提示
const { useDataResult, getList } = useGetList({
requestFun: $getAgentList,
})
// 图片列表
const imgList = reactive(["/static/navImg/disable-dailishang.svg", "/static/navImg/nav-dailishang.svg"])
const tipsList = reactive([
{ text: "已禁用", bgColor: "#B2B2B2" },
{ text: "已启用", bgColor: "#7737FE" },
{ text: "认证中", bgColor: "#FFCA80" },
{ text: "认证驳回", bgColor: "#FF4D6A" },
{ text: "待认证", bgColor: "rgba(255, 255, 255, 0.3)" },
])
// 返回前清除搜索数据
const search = ref()
onBackPress(() => {
if (search.value.searchText != "") {
search.value.searchText = ""
list(search.value.searchText)
return true
} else {
return false
}
})
// 搜索回调
const searchList = (data) => {
if (data === "reset") data = ""
getList({ unionAgentInfo: data })
}
// 详情
const toDetail = (agentNo) => {
uni.navigateTo({
url: "./agentDetail?agentNo=" + agentNo,
})
}
// 跳转 添加代理商
const toPage = () => {
uni.navigateTo({
url: "./addAgent",
})
}
</script>
<style lang="scss" scoped>
.store-wrapper {
width: 100%;
.mch-header {
position: sticky;
top: 0;
z-index: 100;
background-color: #f2f2f2;
}
.button-block {
height: 210rpx;
}
.mch-footers {
position: fixed;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(30px);
border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
}
}
</style>