128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="page-header">
|
|
<JHeaderTitle title="应用支付配置" bgColor="#f7f7f7" />
|
|
<JSearchInput place="搜索应用支付方式代码、名称" @search="searchChannel" @resetSearch="resetSearch" />
|
|
</view>
|
|
<block v-for="(v, i) in configList" key="v.wayType">
|
|
<view class="pay-wrapper" @tap="refPay.open(params.appId, v.wayCode, i)">
|
|
<view class="title">
|
|
<view class="name">{{ v.wayName }}</view>
|
|
<view class="state" :class="{ 'no-config': v.isConfig == 0 }">{{ v.isConfig == 1 ? '已配置' : '未配置' }}</view>
|
|
</view>
|
|
<view class="sub-title">{{ v.wayCode }}</view>
|
|
</view>
|
|
</block>
|
|
<jeepayListNull :isShow="!hasNext" :list="[]" />
|
|
</view>
|
|
<JPopupCard ref="refPay" @upDataList="upDataList" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
import { reactive, ref } from 'vue'
|
|
import { $getPayConfig, $getPayChannelList } from '@/http/apiManager.js'
|
|
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput.vue' //自定义搜索框
|
|
import JPopupCard from './components/JPopupCard.vue'
|
|
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
|
|
onLoad((options) => {
|
|
params.appId = options.appId
|
|
getPayList()
|
|
})
|
|
const refPay = ref(null)
|
|
const configList = reactive([])
|
|
const params = {
|
|
pageSize: 10,
|
|
pageNumber: 1,
|
|
}
|
|
// 是否有下一页
|
|
let hasNext = undefined
|
|
const getPayList = () => {
|
|
$getPayConfig(params).then(({ bizData }) => {
|
|
hasNext = bizData.hasNext
|
|
configList.push(...bizData.records)
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
}
|
|
// 更新列表
|
|
const upDataList = (val) => {
|
|
configList[val.index].isConfig = val.state
|
|
}
|
|
// 搜索
|
|
const searchChannel = (val) => {
|
|
configList.length = 0
|
|
params.pageNumber = 1
|
|
params.unionSearchId = val
|
|
getPayList()
|
|
}
|
|
// 重置搜索
|
|
const resetSearch = () => {
|
|
configList.length = 0
|
|
params.pageNumber = 1
|
|
params.unionSearchId = ''
|
|
getPayList()
|
|
}
|
|
onPullDownRefresh(() => {
|
|
configList.length = 0
|
|
params.pageNumber = 1
|
|
getPayList()
|
|
})
|
|
onReachBottom(() => {
|
|
if (!hasNext) return
|
|
params.pageNumber++
|
|
getPayList()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
min-height: calc(100vh - 80rpx);
|
|
background-color: #f7f7f7;
|
|
.page-header {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #f7f7f7;
|
|
}
|
|
.pay-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0 40rpx;
|
|
height: 170rpx;
|
|
background-color: #fff;
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.name {
|
|
font-size: 30rpx;
|
|
}
|
|
.state {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #808080;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-left: 20rpx;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
background-color: #168fff;
|
|
}
|
|
}
|
|
.no-config::after {
|
|
background-color: #d9d9d9;
|
|
}
|
|
}
|
|
.sub-title {
|
|
margin-top: 16rpx;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|