From 0b1e5da8090e563987c03a88cd0a8b560b1bce16 Mon Sep 17 00:00:00 2001
From: lxf <xunfeng1122@163.com>
Date: Fri, 30 May 2025 16:32:24 +0800
Subject: [PATCH] fix: 支付计划

---
 common/api.js               |   8 ++++++++
 pages.json                  |  24 ++++++++++++++++++++++++
 pages/me/index.vue          |  12 ++++++++++++
 pages/order/card.vue        |  15 +++++++++------
 pages/payPlan/card.vue      | 193 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/payPlan/filter.vue    | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/payPlan/list.vue      | 532 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages/payPlan/paySubmit.vue | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 8 files changed, 1157 insertions(+), 6 deletions(-)
 create mode 100644 pages/payPlan/card.vue
 create mode 100644 pages/payPlan/filter.vue
 create mode 100644 pages/payPlan/list.vue
 create mode 100644 pages/payPlan/paySubmit.vue

diff --git a/common/api.js b/common/api.js
index b541fe6..de5dc0a 100644
--- a/common/api.js
+++ b/common/api.js
@@ -116,6 +116,14 @@ module.exports = (vm) => {
       audit: params => vm.$u.http.post(freightAPI  + '/freightPayApply/audit', params,{custom: {toast:true}}), // 审核
       getCount: params => vm.$u.http.get(freightAPI  + '/freightPayApply/getCount', {params}), // 总数
     },
+    // 支付计划
+    paymentPlan: {
+      page: params => vm.$u.http.post(freightAPI + '/freightPayPlan/page', params),
+      getCount: params => vm.$u.http.get(freightAPI  + '/freightPayPlan/getCount', {params}), // 总数
+      getApplyDetailByIds: params => vm.$u.http.post(freightAPI  + '/freightPayPlan/getApplyDetailByIds', params,{custom: {toast:true}}), // 查询支付明细信息
+      checkPayPassword: data => vm.$u.http.post(freightAPI  + '/account/checkPayPassword', data), // 校验密码
+      pay: data => vm.$u.http.post(freightAPI  + '/freightPayPlan/pay', data), // 支付
+    },
     // 订单管理-网货货运-new
     freightOrder: {
       add: params => vm.$u.http.post(freightAPI + '/freightOrder/maAdd', params,{custom: {toast:true}}), // 下单
diff --git a/pages.json b/pages.json
index 42020d8..c758ed9 100644
--- a/pages.json
+++ b/pages.json
@@ -196,6 +196,30 @@
 					}
 				}
 			]
+		},
+		{
+			"root":"pages/payPlan",
+			"pages":[
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "支付计划",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "filter",
+					"style": {
+						"navigationBarTitleText": "筛选器"
+					}
+				},
+				{
+					"path": "paySubmit",
+					"style": {
+						"navigationBarTitleText": "支付信息确认"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {
diff --git a/pages/me/index.vue b/pages/me/index.vue
index 524febd..e3374ed 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -43,6 +43,11 @@
         <!-- #endif -->
       </view>
     </view>
+    <view class="page-my__list">
+      <u-cell-group>
+        <u-cell v-if="$permission('/settlement/paymentPlan')" label="支付计划" is-link url="/pages/payPlan/list"> </u-cell>
+      </u-cell-group>
+    </view>
     <view class="page-my__login">
       <u-button shape="circle" @click="handleRefreshVersion">检测更新</u-button>
       <template v-if="authed">
@@ -64,8 +69,10 @@
 import cache from '@/utils/cache';
 import { mapState, mapGetters } from 'vuex';
 import { version } from '@/config';
+import page from '@/mixins/page';
 
 export default {
+  mixins: [page],
   data() {
     return {
       loading: false,
@@ -217,6 +224,11 @@ export default {
       background-color: rgba($color-primary, 0.3);
     }
   }
+  &__list {
+    margin: $padding-md;
+    background: $color-white;
+    border-radius: $radius-md;
+  }
   &__login {
     position: absolute;
     width: 100%;
diff --git a/pages/order/card.vue b/pages/order/card.vue
index 8b0eeed..d57c2f2 100644
--- a/pages/order/card.vue
+++ b/pages/order/card.vue
@@ -43,13 +43,16 @@
       <view class="tag--paying" v-if="item.driverCertifiedStatus === 'CERTIFYING'">司机认证中</view>
       <view class="tag--warning" v-if="item.payeeMobile && item.bindBankCardNoFlag === false">收款人未绑卡</view>
       <view class="tag--warning" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED' && !item.trailerLicenseNum">车辆未认证</view>
-      <view class="tag--paying" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && !item.trailerLicenseNum">车辆认证中</view>
-      <view class="tag--warning" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED' && item.trailerLicenseNum">车头未认证</view>
-      <view class="tag--paying" v-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && item.trailerLicenseNum">车头认证中</view>
-      <view class="tag--warning" v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'NOT_CERTIFIED'">车挂未认证</view>
-      <view class="tag--paying" v-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'CERTIFYING'">车挂认证中</view>
+      <view class="tag--paying" v-else-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && !item.trailerLicenseNum">车辆认证中</view>
+      <view class="tag--warning" v-else-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'NOT_CERTIFIED' && item.trailerLicenseNum">车头未认证</view>
+      <view class="tag--paying" v-else-if="item.vehicleLicenseNum && item.vehicleCertifiedStatus === 'CERTIFYING' && item.trailerLicenseNum">车头认证中</view>
+      <view class="tag--paying" v-else-if="item.vehicleLicenseNum && item.vehicleExpiredFlag && item.vehicleCertifiedStatus === 'CERTIFIED'">车头证件过期</view>
+
       <text class="tag--warning" v-if="item.extraTrailerFlag">多车挂</text>
-      <text class="tag--warning" v-if="item.missTrailerFlag">缺车挂</text>
+      <text class="tag--warning" v-else-if="item.missTrailerFlag">缺车挂</text>
+      <view class="tag--warning" v-else-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'NOT_CERTIFIED'">车挂未认证</view>
+      <view class="tag--paying" v-else-if="item.trailerLicenseNum && !item.extraTrailerFlag && item.trailerVehicleCertifiedStatus === 'CERTIFYING'">车挂认证中</view>
+      <text class="tag--warning" v-else-if="item.trailerLicenseNum && item.trailerExpiredFlag && item.trailerVehicleCertifiedStatus === 'CERTIFIED'">车挂证件过期</text>
     </view>
     <view class="card-order__footer">
       <view class="amount">
diff --git a/pages/payPlan/card.vue b/pages/payPlan/card.vue
new file mode 100644
index 0000000..152f7a3
--- /dev/null
+++ b/pages/payPlan/card.vue
@@ -0,0 +1,193 @@
+<template>
+  <view class="payment-card" @mousedown="mousedown" @mouseup="mouseup" @touchstart="mousedown" @touchend="mouseup" @tap="choseFun">
+    <view class="title">
+      <view class="code">
+        <field-copy :value="item.payCode" v-if="item.payCode">{{ item.payCode }} </field-copy>
+      </view>
+      <view style="display: flex">
+        <render-dict v-if="item.payStatus" class="status" :style="{ color: colorMap[item.payStatus] }" dict="ONLINE_FREIGHT_ORDER_PAY_STATUS" :value="item.payStatus"></render-dict>
+        <template v-if="choseMore">
+          <u-radio-group :value="choseIds.includes(item.id) ? item.id : ''">
+            <u-radio :name="item.id"></u-radio>
+          </u-radio-group>
+          <!--          <u-icon v-if="choseIds.includes(item.id)" name="checkmark-circle-fill" size="20" color="#1E7B6B"></u-icon>-->
+        </template>
+      </view>
+    </view>
+    <view class="title-sub">{{ item.projectName ? item.projectName : '' }}{{ item.loadTime ? '|' + item.loadTime + '装货' : '' }}</view>
+    <view class="item">
+      <view class="label">
+        <render-dict v-if="item.feeType" dict="ONLINE_FREIGHT_ORDER_FEE_TYPE" :value="item.feeType"></render-dict>
+      </view>
+      <view class="content">
+        <text class="amount">￥{{ item.feeAmount ? item.feeAmount : '' }}</text>
+      </view>
+    </view>
+    <view class="item">
+      <view class="label">承运司机</view>
+      <view class="content">
+        <text>{{ item.driverName ? item.driverName : '' }}</text>
+        <text>{{ item.driverMobile ? item.driverMobile : '' }}</text>
+      </view>
+    </view>
+    <view class="item">
+      <view class="label">收款人</view>
+      <view class="content">
+        <text>{{ item.recAccountName ? item.recAccountName : '' }}</text>
+        <text>{{ item.recMobile ? item.recMobile : '' }}</text>
+      </view>
+    </view>
+    <view class="item">
+      <view class="label">承运车辆</view>
+      <view class="content">{{ item.vehicleLicenseNum ? item.vehicleLicenseNum : '' }}{{ item.trailerLicenseNum ? '·' + item.trailerLicenseNum : '' }}</view>
+    </view>
+    <view class="item">
+      <view class="label">订单号</view>
+      <view class="content">
+        <text>{{ item.orderCode }}</text>
+        <text v-if="!!item.waitHandleExceptionNumber" class="content--warning">{{ item.waitHandleExceptionNumber || '0' }}个异常待处理</text>
+      </view>
+    </view>
+    <view class="item">
+      <view class="label">线路名称</view>
+      <view class="content">{{ item.lineName ? item.lineName : '' }}</view>
+    </view>
+    <view class="item" v-if="!choseMore && ['NOT_PAY', 'PAY_FAILED'].includes(item.payStatus)">
+      <u-button v-if="$permission('/freightPayPlan/apply')" type="primary" @tap="paymentFun">{{ item.payStatus === 'PAY_FAILED' ? '重新支付' : '提交支付' }}</u-button>
+    </view>
+  </view>
+</template>
+<script>
+import FieldCopy from '../../components/field/field-copy.vue';
+import UButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue';
+import page from '../../mixins/page';
+export default {
+  name: 'payment-card',
+  mixins: [page],
+  components: { UButton, FieldCopy },
+  props: {
+    choseMore: Boolean,
+    choseIds: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    item: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      pressTimer: '',
+      isLongClick: false,
+      colorMap: {
+        NOT_PAY: '#ff4f3b',
+        PAYING: '#0000FF',
+        PAY_FAILED: '#999999',
+        PAY_SUCCESS: '#00B87A',
+      },
+    };
+  },
+  methods: {
+    paymentFun() {
+      if (!this.isLongClick) {
+        this.$emit('payment', this.item.id);
+      }
+    },
+    choseFun() {
+      if (!this.isLongClick) {
+        this.$emit('chose', this.item.id);
+      }
+    },
+    mousedown() {
+      if (this.choseMore) return;
+      this.pressTimer = setTimeout(() => {
+        this.isLongClick = true;
+        this.$emit('longClick', this.item.id);
+      }, 1000);
+    },
+    mouseup() {
+      clearTimeout(this.pressTimer);
+      setTimeout(() => {
+        this.isLongClick = false;
+      }, 100);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.payment-card {
+  background-color: $color-white;
+  color: $color-text;
+  padding: $padding-sm;
+  margin-bottom: $padding-sm;
+  border-radius: $radius-md;
+  box-shadow: $shadow-normal;
+  font-size: $font-md;
+  .title {
+    padding-bottom: $padding-sm;
+    display: flex;
+    justify-content: space-between;
+    .code {
+      font-weight: 500;
+      font-size: 30upx;
+      color: #2b2a27;
+      line-height: 34upx;
+      text-align: left;
+      font-style: normal;
+    }
+    border-bottom: 1px solid $color-border;
+  }
+  .title-sub {
+    margin-top: $padding-sm;
+    font-weight: 400;
+    font-size: 26upx;
+    color: #5d5d5d;
+    line-height: 37upx;
+    text-align: left;
+    font-style: normal;
+  }
+  .item {
+    margin-top: $padding-sm;
+    display: flex;
+    .label {
+      width: 170upx;
+      font-weight: 400;
+      font-size: 28upx;
+      color: #999999;
+      line-height: 28upx;
+      text-align: left;
+      font-style: normal;
+    }
+    .content {
+      font-weight: 400;
+      font-size: 28upx;
+      color: #2b2a27;
+      line-height: 28upx;
+      text-align: left;
+      font-style: normal;
+      text + text {
+        margin-left: $padding-sm;
+      }
+      .amount {
+        color: #ff4f3b;
+      }
+      &--warning {
+        color: #f52723;
+        font-size: 20rpx;
+        margin-left: 20upx;
+        padding-left: 10upx;
+        padding-right: 10upx;
+        border-radius: 8upx;
+        border: 2rpx solid #f52723;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/payPlan/filter.vue b/pages/payPlan/filter.vue
new file mode 100644
index 0000000..b1e018e
--- /dev/null
+++ b/pages/payPlan/filter.vue
@@ -0,0 +1,140 @@
+<template>
+  <Page name="payPlan-filter" flank>
+    <template #content>
+      <u-form :model="searchForm" ref="uForm" labelWidth="100">
+        <view class="card">
+          <u-form-item label="订单号"><u-input v-model="searchForm.orderCode" placeholder="请输入" /></u-form-item>
+        </view>
+        <view class="card">
+          <u-form-item label="司机姓名"><u-input v-model="searchForm.driverName" placeholder="请输入" /></u-form-item>
+        </view>
+        <view class="card">
+          <u-form-item label="司机手机号"><u-input v-model="searchForm.driverMobile" placeholder="请输入" /></u-form-item>
+        </view>
+        <view class="card">
+          <u-form-item label="车牌号"><u-input v-model="searchForm.vehicleLicenseNum" placeholder="请输入" /></u-form-item>
+        </view>
+        <view class="card">
+          <u-form-item label="存在未处理异常" labelWidth="130">
+            <u-radio-group v-model="searchForm.unHandledExceptionFlag">
+              <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
+                {{ item.text }}
+              </u-radio>
+            </u-radio-group>
+          </u-form-item>
+        </view>
+      </u-form>
+    </template>
+    <template #footer>
+      <view class="footer">
+        <view class="reset" @click="resetChange">重置</view>
+        <view class="inquiry" @click="inquiryChange">查询</view>
+      </view>
+    </template>
+  </Page>
+</template>
+
+<script>
+import { urlParam } from '@/utils/param';
+export default {
+  name: 'payPlanFilter',
+  props: {
+    searchModel: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      radioList: [
+        { text: '是', value: 'true' },
+        { text: '否', value: 'false' },
+      ],
+      searchForm: {
+        orderCode: '', // 订单号
+        driverName: '',
+        driverMobile: '', //
+        vehicleLicenseNum: '',
+        unHandledExceptionFlag: '', // 存在异常
+      },
+    };
+  },
+  onLoad(option) {
+    Object.keys(option).forEach(i => {
+      this.searchForm[i] = option[i];
+    });
+  },
+  methods: {
+    // 重置
+    resetChange() {
+      this.searchForm = {
+        orderCode: '', // 订单号
+        startCityCode: '',
+        startCityName: '',
+        endCityCode: '',
+        endCityName: '',
+        projectCode: '',
+        projectName: '',
+        feeType: '',
+        feeTypeName: '',
+        driverName: '',
+        driverMobile: '', //
+        vehicleLicenseNum: '',
+        unHandledExceptionFlag: '', // 存在异常
+      };
+    },
+    // 查询
+    inquiryChange() {
+      this.getOpenerEventChannel().emit('refreshData', this.searchForm);
+      setTimeout(() => uni.navigateBack(), 500);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page-payPlan-filter {
+  &__content {
+    .card {
+      background-color: $color-white;
+      padding-left: $padding-xs;
+      padding-right: $padding-xs;
+      border-radius: $radius-md;
+      box-shadow: $shadow-normal;
+      margin-bottom: $padding-sm;
+    }
+  }
+  &__footer {
+    background: $color-white;
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      .reset {
+        text-align: center;
+        width: 236upx;
+        height: 82upx;
+        line-height: 82upx;
+        margin-right: 20upx;
+        background: #dfebff;
+        border-radius: 14upx;
+        font-size: 30upx;
+        font-weight: 500;
+        color: $color-primary;
+      }
+      .inquiry {
+        text-align: center;
+        width: 450upx;
+        height: 82upx;
+        line-height: 82upx;
+        background: $color-primary;
+        border-radius: 14upx;
+        font-size: 30upx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/payPlan/list.vue b/pages/payPlan/list.vue
new file mode 100644
index 0000000..bda1874
--- /dev/null
+++ b/pages/payPlan/list.vue
@@ -0,0 +1,532 @@
+<template>
+  <Page name="settlement" flank>
+    <template #header>
+      <u-tabs :current="activeTab" :list="tabList" @click="onTabChange" :activeStyle="{ color: '#1E7B6B' }"> </u-tabs>
+      <view class="line"></view>
+      <view class="quick-tag">
+        <view class="quick-tag-group">
+          <view class="quick-tag-item" :class="searchForm.feeType ? 'active' : ''" @click="selectQuickTag({ key: 'feeType', value: searchForm.feeType })">
+            <text>{{ searchForm.feeTypeName || '款项类型' }}</text>
+            <view class="sx-img">
+              <image v-if="searchForm.feeType" class="sx-image" :src="formatImagePath('active-down')"></image>
+              <image v-else class="sx-image" :src="formatImagePath('down')"></image>
+            </view>
+          </view>
+          <view class="quick-tag-item" :class="searchForm.projectCode ? 'active' : ''" @click="selectQuickTag({ key: 'projectCode', value: searchForm.projectCode })">
+            <text>{{ searchForm.projectName || '所属项目' }}</text>
+            <view class="sx-img">
+              <image v-if="searchForm.projectCode" class="sx-image" :src="formatImagePath('active-down')"></image>
+              <image v-else class="sx-image" :src="formatImagePath('down')"></image>
+            </view>
+          </view>
+          <view class="quick-tag-item" :class="searchForm.startCityCode ? 'active' : ''" @click="selectQuickTag({ key: 'startCityCode', value: searchForm.startCityCode })">
+            <text>{{ searchForm.startCityName || '始发地' }}</text>
+            <view class="sx-img">
+              <image v-if="searchForm.startCityCode" class="sx-image" :src="formatImagePath('active-down')"></image>
+              <image v-else class="sx-image" :src="formatImagePath('down')"></image>
+            </view>
+          </view>
+          <view class="quick-tag-item" :class="searchForm.endCityCode ? 'active' : ''" @click="selectQuickTag({ key: 'endCityCode', value: searchForm.endCityCode })">
+            <text>{{ searchForm.endCityName || '目的地' }}</text>
+            <view class="sx-img">
+              <image v-if="searchForm.startCityCode" class="sx-image" :src="formatImagePath('active-down')"></image>
+              <image v-else class="sx-image" :src="formatImagePath('down')"></image>
+            </view>
+          </view>
+        </view>
+        <view class="quick-screen" @click="openFilter">
+          <image class="search-image" :src="formatImagePath('search')"></image>
+        </view>
+      </view>
+    </template>
+    <template #content>
+      <List ref="list" v-model="list" :api="orderAPI" @update:loading="e => (loading = e)" :verify="true">
+        <template v-for="(item, index) in list">
+          <card @payment="onePaymentPlanFun" @longClick="longClick" @chose="choseItemFun" :key="index" :item="item" :choseIds="selection" :choseMore="longClickFlag"></card>
+        </template>
+        <template #empty>
+          <Empty tips="暂无数据" />
+        </template>
+      </List>
+    </template>
+    <template v-if="longClickFlag">
+      <view class="foot-submit">
+        <view class="foot-but">
+          <view style="flex: 1">
+            <text style="color: #999999">已选中：</text>
+            <text class="color-red">{{ choseWaybillNum }}</text>
+            个订单，
+            <text class="color-red">{{ selection.length }}</text>
+            笔款项
+          </view>
+          <view class="but-view">
+            <u-button type="primary" size="small" @click="toPayUrl">去支付</u-button>
+          </view>
+        </view>
+        <u-safe-bottom></u-safe-bottom>
+      </view>
+    </template>
+    <u-popup :show="popShow" @close="popShow = false" closeable mode="center" :round="10">
+      <view class="popup">
+        <view class="title">支付信息确认</view>
+        <view class="alert"><u-icon name="error-circle" size="12"> </u-icon>列表长按可以批量选择支付哦~ </view>
+        <view>
+          <view class="row"><view class="text">订单号：</view>{{ payPlanForm.detail[0].orderCode }}</view>
+          <view class="row"><view class="text">车牌号：</view>{{ payPlanForm.detail[0].vehicleLicenseNum }}</view>
+          <view class="row"><view class="text">收款人：</view>{{ payPlanForm.detail[0].recAccountName }}{{ payPlanForm.detail[0].recMobile }}</view>
+          <view class="row"><view class="text">运费：</view>{{ payPlanForm.detail[0].feeAmount }}元</view>
+          <view class="row"><view class="text">服务费：</view>{{ payPlanForm.detail[0].serviceAmount }}元</view>
+          <view class="row"><view class="text">总额：</view>{{ payPlanForm.detail[0].payAmount }}元</view>
+        </view>
+        <view class="but">
+          <u-button @tap="popShow = false">取消</u-button>
+          <u-button type="primary" @tap="(popShow = false), (pwdShow = true)">继续支付</u-button>
+        </view>
+      </view>
+    </u-popup>
+    <u-popup :show="pwdShow" :closeable="false" mode="center" :round="10">
+      <view class="popup">
+        <view class="title">输入密码</view>
+        <view class="row">
+          <u-input v-model="pwdStr" type="password" input-align="center" placeholder="请输入支付密码"></u-input>
+        </view>
+        <view class="but">
+          <u-button @tap="(pwdShow = false), (popShow = true)">取消</u-button>
+          <u-button type="primary" @tap="onSubmit">确定支付</u-button>
+        </view>
+      </view>
+    </u-popup>
+    <u-toast ref="uToast"></u-toast>
+  </Page>
+</template>
+<script>
+import { urlParam } from '@/utils/param';
+import card from './card.vue';
+import UFormItem from '../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue';
+import page from '@/mixins/page';
+export default {
+  name: 'payPlan',
+  components: { UFormItem, card },
+  data() {
+    return {
+      longClickFlag: false,
+      pwdStr: '',
+      pwdShow: false,
+      loading: false,
+      popShow: false,
+      payPlanForm: {
+        oilRate: '',
+        payCount: '',
+        serviceRate: '',
+        totalFeeAmount: '',
+        totalPayAmount: '',
+        totalServiceAmount: '',
+        detail: [
+          {
+            customerOrderCode: '',
+            driverMobile: '',
+            driverName: '',
+            feeAmount: '',
+            feeType: '',
+            orderCode: '',
+            payAmount: '',
+            payCode: '',
+            recAccountName: '',
+            recMobile: '',
+            serviceAmount: '',
+            vehicleLicenseNum: '',
+          },
+        ],
+      },
+      searchForm: {
+        payStatus: '', // 支付状态
+        feeType: '', // 费用类型
+        feeTypeName: '', // 费用类型
+        projectCode: '',
+        projectName: '',
+        startCityCode: '',
+        startCityName: '',
+        endCityCode: '',
+        endCityName: '',
+        orderCode: '', // 订单号
+        driverName: '',
+        driverMobile: '', //
+        vehicleLicenseNum: '',
+        unHandledExceptionFlag: '', // 存在异常
+      },
+      activeTab: 0,
+      count: {},
+      list: [],
+      selection: [],
+    };
+  },
+  onPullDownRefresh() {
+    this.onSearch();
+  },
+  computed: {
+    tabList() {
+      let res = [
+        { name: '未支付', value: 'NOT_PAY', key: 'notPayCount' },
+        { name: '支付中', value: 'PAYING', key: 'payingCount' },
+        { name: '支付失败', value: 'PAY_FAILED', key: 'payFailedCount' },
+        { name: '支付成功', value: 'PAY_SUCCESS', key: 'paySuccessCount' },
+      ];
+      return Object.keys(this.count).length > 0
+        ? res.map(item => {
+            return { ...item, name: `${item.name}(${this.count[item.key] || 0})`, disabled: this.loading };
+          })
+        : res;
+    },
+    choseWaybillNum() {
+      if (this.list.length === 0 || this.selection.length === 0) {
+        return 0;
+      } else {
+        let orderList = this.list.filter(i => this.selection.includes(i.id)).map(i2 => i2.orderCode);
+        return new Set(orderList).size;
+      }
+    },
+  },
+  methods: {
+    onTabChange({ index }) {
+      if (this.loading) {
+        return;
+      }
+      this.activeTab = index;
+      this.list = [];
+      this.onSearch();
+    },
+    orderAPI(params) {
+      let format = {
+        ...this.searchForm,
+        payStatus: this.tabList[this.activeTab].value,
+      };
+      this.getAggregateType(format);
+      return uni.$u.api.paymentPlan.page({
+        ...format,
+        ...params,
+      });
+    },
+    // 获取聚合数量
+    getAggregateType() {
+      uni.$u.api.paymentPlan.getCount({}).then(res => {
+        this.count = res?.result || {};
+      });
+    },
+    selectQuickTag({ key, value }) {
+      this.searchForm = Object.assign(this.searchForm, { [key]: value });
+      if (key == 'feeType') {
+        uni.$once('select-dict', option => {
+          this.searchForm.feeType = option.valueCode;
+          this.searchForm.feeTypeName = option.valueName;
+          this.onSearch();
+        });
+        uni.navigateTo({
+          url: `/pages/global/search-dict${urlParam({
+            title: '款项类型',
+            dict: 'ONLINE_FREIGHT_ORDER_FEE_TYPE',
+          })}`,
+        });
+      } else if (key == 'startCityCode') {
+        uni.$once('select-city', option => {
+          this.searchForm.startCityCode = option.code;
+          this.searchForm.startCityName = option.shortName;
+          this.onSearch();
+        });
+        uni.navigateTo({ url: '/pages/global/search-city' });
+      } else if (key == 'endCityCode') {
+        uni.$once('select-city', option => {
+          this.searchForm.endCityCode = option.code;
+          this.searchForm.endCityName = option.shortName;
+          this.onSearch();
+        });
+        uni.navigateTo({ url: '/pages/global/search-city' });
+      } else if (key == 'projectCode') {
+        uni.$once('select-common', option => {
+          this.searchForm.projectCode = option.code;
+          this.searchForm.projectName = option.name;
+          this.onSearch();
+        });
+        uni.navigateTo({
+          url: `/pages/global/search-common${urlParam({
+            mode: 'select',
+            url: 'projectCode',
+            title: '项目',
+            label: 'name',
+            value: '',
+          })}`,
+        });
+      }
+    },
+    // 筛选
+    openFilter() {
+      uni.navigateTo({
+        url: `/pages/payPlan/filter${urlParam(this.searchForm)}`,
+        events: {
+          refreshData: option => {
+            this.searchForm = { ...this.searchForm, ...option };
+            this.onSearch();
+          },
+        },
+      });
+    },
+    choseItemFun(id) {
+      if (this.longClickFlag) {
+        if (this.selection.includes(id)) {
+          this.selection = this.selection.filter(i => i !== id);
+        } else {
+          this.selection.push(id);
+        }
+        if (this.selection.length === 0) {
+          this.longClickFlag = false;
+        }
+      }
+    },
+    longClick(id) {
+      this.selection = [id];
+      this.longClickFlag = true;
+    },
+    onePaymentPlanFun(id) {
+      uni.showLoading({ title: '加载中' });
+      this.selection = [id];
+      uni.$u.api.paymentPlan
+        .getApplyDetailByIds([id])
+        .then(res => {
+          uni.hideLoading();
+          this.payPlanForm = res.result || {};
+          this.popShow = true;
+        })
+        .catch(res => {
+          uni.hideLoading();
+          this.$refs.uToast.default(res);
+        });
+    },
+    onSubmit() {
+      if (this.loading) {
+        return;
+      }
+      if (!this.pwdStr) {
+        uni.showToast({ title: '支付密码不能为空' });
+        return;
+      }
+      this.loading = true;
+      uni.$u.api.paymentPlan
+        .checkPayPassword({ payPassword: this.pwdStr })
+        .then(res => {
+          uni.$u.api.paymentPlan.pay(this.selection).then(res => {
+            this.loading = false;
+            this.pwdStr = '';
+            uni.showToast({ title: '提交成功' });
+            this.search();
+            this.pwdShow = false;
+            this.popShow = false;
+          });
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    toPayUrl() {
+      uni.showLoading({ title: '加载中' });
+      let selection = this.selection;
+      uni.$u.api.paymentPlan
+        .getApplyDetailByIds(this.selection)
+        .then(resp => {
+          uni.navigateTo({
+            url: '/pages/payPlan/paySubmit',
+            events: {
+              refreshData: () => {
+                this.selection = [];
+                this.longClickFlag = false;
+                this.onSearch();
+              },
+            },
+            success(res) {
+              res.eventChannel.emit('payPlanDate', { form: resp.result, selection });
+            },
+          });
+        })
+        .catch(res => {
+          this.$refs.uToast.default(res);
+        })
+        .finally(() => {
+          uni.hideLoading();
+        });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.page-settlement {
+  &__header {
+    padding: 0 !important;
+
+    .line {
+      height: 1rpx;
+      background: #f6f6f6;
+      position: relative;
+      top: -5rpx;
+    }
+
+    .quick-tag {
+      display: flex;
+      padding: 15upx 22upx;
+      box-sizing: border-box;
+      position: relative;
+
+      .quick-cover {
+        width: 25upx;
+        height: 90upx;
+        position: absolute;
+        right: 122upx;
+        top: 0;
+
+        .cover-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .quick-screen {
+        width: 100upx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .search-image {
+          width: 42upx;
+          height: 42upx;
+        }
+      }
+
+      .quick-tag-group {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        padding-left: $padding-xs !important;
+        padding-right: $padding-xs !important;
+        overflow-y: auto;
+
+        .quick-tag-item {
+          flex-shrink: 0;
+          min-width: 158upx;
+          height: 58upx;
+          background: #f6f6f6;
+          border-radius: 8upx;
+          font-size: 28upx;
+          font-weight: 400;
+          color: #2b2a27;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10upx;
+          box-sizing: border-box;
+
+          &:not(:last-child) {
+            margin-right: 18upx;
+          }
+
+          &.active {
+            background: #ffffff;
+            border-radius: 8upx;
+            border: 2upx solid #2673fb;
+            font-size: 28upx;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 400;
+            color: #2673fb;
+          }
+
+          .sx-img {
+            height: 12upx;
+            width: 14upx;
+            position: relative;
+            margin-left: 12upx;
+
+            .sx-image {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+          }
+        }
+
+        .z-dropdown__text .text {
+          word-break: keep-all;
+        }
+      }
+    }
+  }
+  .add-order {
+    right: 34upx;
+    bottom: 34upx;
+    height: 106upx;
+    width: 106upx;
+    position: fixed;
+    .sx-image {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  .popup {
+    padding-left: $padding-md;
+    padding-right: $padding-md;
+    width: 70vw;
+    .title {
+      padding-top: $padding-xs;
+      padding-bottom: $padding-xs;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      font-weight: 400;
+      font-size: 32rpx;
+      color: #2b2a27;
+      line-height: 45px;
+      text-align: left;
+      font-style: normal;
+    }
+    .alert {
+      color: orange;
+      font-size: 24rpx;
+      display: flex;
+      padding-bottom: 20rpx;
+    }
+    .row {
+      display: flex;
+      padding: 10upx 0;
+      .text {
+        width: 130rpx;
+      }
+    }
+    .but {
+      margin-top: $padding-md;
+      display: flex;
+      gap: 20px;
+    }
+  }
+  &__content {
+    padding-bottom: 100px !important;
+  }
+  .foot-submit {
+    position: fixed;
+    width: 100vw;
+    bottom: 0;
+    background: white;
+    .foot-but {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      .but-view {
+        max-width: 100px;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/payPlan/paySubmit.vue b/pages/payPlan/paySubmit.vue
new file mode 100644
index 0000000..93b7424
--- /dev/null
+++ b/pages/payPlan/paySubmit.vue
@@ -0,0 +1,239 @@
+<template>
+  <Page name="paySubmit" flank>
+    <template #header>
+      <view class="row">
+        <view class="label">支付数量：</view>
+        <view>合计运费：{{ form.totalFeeAmount }}，合计服务费：{{ form.totalServiceAmount }}，支付总额：{{ form.totalPayAmount }}</view>
+      </view>
+      <view class="row" style="justify-content: space-between; color: #999999">
+        <view>服务费率：{{ form.serviceRate }}</view>
+        <view>油卡返点率：{{ form.oilRate }}</view>
+      </view>
+    </template>
+    <template #content>
+      <view class="card" v-for="(item, key) in form.detail" :key="key">
+        <view class="item">
+          <view class="label"><render-dict dict="ONLINE_FREIGHT_ORDER_FEE_TYPE" :value="item.feeType"></render-dict></view>
+          <view class="content"
+            ><text class="amount">￥{{ item.feeAmount }}</text></view
+          >
+        </view>
+        <view class="item">
+          <view class="label">服务费</view>
+          <view class="content"
+            ><text class="amount">￥{{ item.serviceAmount }}</text></view
+          >
+        </view>
+        <view class="item">
+          <view class="label">支付总额</view>
+          <view class="content"
+            ><text class="amount">￥{{ item.payAmount }}</text></view
+          >
+        </view>
+        <view class="item">
+          <view class="label">承运司机</view>
+          <view class="content">{{ item.driverName }}{{ item.driverMobile }}</view>
+        </view>
+        <view class="item">
+          <view class="label">收款人</view>
+          <view class="content">{{ item.recAccountName }}{{ item.recMobile }}</view>
+        </view>
+        <view class="item">
+          <view class="label">承运车辆</view>
+          <view class="content">{{ item.vehicleLicenseNum }}</view>
+        </view>
+        <view class="item">
+          <view class="label">订单号</view>
+          <view class="content" style="color: #0066ff">{{ item.orderCode }}</view>
+        </view>
+      </view>
+    </template>
+    <template #footer>
+      <u-button :loading="loading" type="primary" @tap="pwdShow = true">继续支付</u-button>
+    </template>
+    <u-popup :show="pwdShow" :closeable="false" mode="center" :round="10">
+      <view class="popup">
+        <view class="title">输入密码</view>
+        <view class="row">
+          <u-input v-model="pwdStr" type="password" input-align="center" placeholder="请输入支付密码"></u-input>
+        </view>
+        <view class="but">
+          <u-button @tap="pwdShow = false">取消</u-button>
+          <u-button :loading="loading" type="primary" @tap="onSubmit">确定支付</u-button>
+        </view>
+      </view>
+    </u-popup>
+  </Page>
+</template>
+<script>
+export default {
+  name: 'paySubmit',
+  data() {
+    return {
+      loading: false,
+      pwdShow: false,
+      pwdStr: '',
+      selection: [],
+      form: {
+        oilRate: '',
+        payCount: '',
+        serviceRate: '',
+        totalFeeAmount: '',
+        totalPayAmount: '',
+        totalServiceAmount: '',
+        detail: [
+          {
+            customerOrderCode: '',
+            driverMobile: '',
+            driverName: '',
+            feeAmount: '',
+            feeType: '',
+            orderCode: '',
+            payAmount: '',
+            payCode: '',
+            recAccountName: '',
+            recMobile: '',
+            serviceAmount: '',
+            vehicleLicenseNum: '',
+          },
+        ],
+      },
+    };
+  },
+  onLoad() {
+    const eventChannel = this.getOpenerEventChannel();
+    eventChannel.on('payPlanDate', data => {
+      this.form = data.form || {};
+      this.selection = data.selection || [];
+    });
+  },
+  methods: {
+    onSubmit() {
+      if (this.loading) {
+        return;
+      }
+      if (!this.pwdStr) {
+        uni.showToast({ title: '支付密码不能为空' });
+        return;
+      }
+      this.loading = true;
+      uni.$u.api.paymentPlan
+        .checkPayPassword({ payPassword: this.pwdStr })
+        .then(res => {
+          uni.$u.api.paymentPlan
+            .pay(this.selection)
+            .then(res => {
+              this.pwdShow = false;
+              uni.showToast({ title: '提交成功' });
+              this.getOpenerEventChannel().emit('refreshData');
+              setTimeout(() => uni.navigateBack(), 500);
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.page-paySubmit {
+  &__header {
+    padding: 0 !important;
+    .row {
+      margin: 10px;
+      display: flex;
+      .label {
+        width: 140rpx;
+      }
+    }
+  }
+  &__content {
+    .card {
+      background-color: $color-white;
+      color: $color-text;
+      padding: $padding-base $padding-sm;
+      margin-bottom: $padding-sm;
+      border-radius: $radius-md;
+      box-shadow: $shadow-normal;
+      font-size: $font-md;
+      .item {
+        margin: $padding-sm 0;
+        display: flex;
+        justify-content: space-between;
+        .label {
+          width: 170upx;
+          font-weight: 400;
+          font-size: 28upx;
+          color: #999999;
+          line-height: 28upx;
+          text-align: left;
+          font-style: normal;
+        }
+        .content {
+          font-weight: 400;
+          font-size: 28upx;
+          color: #2b2a27;
+          line-height: 28upx;
+          text-align: right;
+          font-style: normal;
+          .amount {
+            color: #ff4f3b;
+          }
+          &--warning {
+            color: #f52723;
+            font-size: 20rpx;
+            margin-left: 20upx;
+            padding-left: 10upx;
+            padding-right: 10upx;
+            border-radius: 8upx;
+            border: 2rpx solid #f52723;
+          }
+        }
+      }
+    }
+  }
+  &__footer {
+    background-color: $color-white;
+  }
+  .popup {
+    padding-left: $padding-md;
+    padding-right: $padding-md;
+    width: 70vw;
+    .title {
+      padding-top: $padding-xs;
+      padding-bottom: $padding-xs;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      font-weight: 400;
+      font-size: 32rpx;
+      color: #2b2a27;
+      line-height: 45px;
+      text-align: left;
+      font-style: normal;
+    }
+    .alert {
+      color: orange;
+      font-size: 24rpx;
+      display: flex;
+      padding-bottom: 20rpx;
+    }
+    .row {
+      display: flex;
+      padding: 10upx 0;
+      .text {
+        width: 130rpx;
+      }
+    }
+    .but {
+      margin-top: $padding-md;
+      display: flex;
+      gap: 20px;
+    }
+  }
+}
+</style>
--
libgit2 0.21.0