源文件

jeepay-ui-uapp-agent/pageWork/appManage/payChannel.vue

@@ -0,0 +1,127 @@
+<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>