优化缴费页面

src/api/fee/payFeeOrderApi.js

@@ -102,7 +102,7 @@ export function payFee(data) {
   return new Promise((resolve, reject) => {
     data.communityId = getCommunityId()
     request({
-      url: '/fee/payFee',
+      url: '/fee.payFee',
       method: 'post',
       data
     }).then(response => {

src/components/fee/payFeeOrderConfirm.vue

@@ -1,7 +1,8 @@
 <template>
-  <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="50%" @close="handleClose"
+  <div>
+  <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
     :close-on-click-modal="false">
-    <el-form label-width="120px">
+    <el-form label-width="120px" class="text-left">
       <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
         <span>{{ formData.payerObjName }}</span>
       </el-form-item>
@@ -82,11 +83,15 @@
       </el-button>
     </div>
   </el-dialog>
+  <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
+
+</div>
 </template>
 
 <script>
-import { qrCodePayment, checkPayFinish } from '@/api/fee/payFeeOrderApi'
+import { qrCodePayment, checkPayFinish ,payFee} from '@/api/fee/payFeeOrderApi'
 import { dateFormat } from '@/utils/dateUtil'
+import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
 export default {
   name: 'PayFeeOrderConfirm',
   data() {
@@ -99,6 +104,9 @@ export default {
       }
     }
   },
+  components: {
+    PayFeeOrderResult
+  },
   methods: {
     dateFormat,
     open(params) {
@@ -129,8 +137,7 @@ export default {
 
         this.formData.subServiceCode = 'fee.payFee'
 
-        const response = await qrCodePayment(this.formData)
-        const data = response.data
+        const data = await qrCodePayment(this.formData)
 
         if (data.code === 404) {
           this.$message.error(data.msg)
@@ -164,8 +171,8 @@ export default {
 
         this.formData.subServiceCode = 'fee.payFee'
 
-        const response = await checkPayFinish(this.formData)
-        const data = response.data
+        const data = await checkPayFinish(this.formData)
+
 
         if (data.code === 404) {
           this.$message.error(data.msg)
@@ -178,6 +185,7 @@ export default {
         }
 
         this.close()
+        this.$refs.payFeeOrderResult.open(data.data)
         this.$emit('success', data.data)
       } catch (error) {
         console.error('检查支付状态失败:', error)
@@ -185,11 +193,11 @@ export default {
     },
     async payFee() {
       try {
-        const response = await this.$http.post('/fee.payFee', this.formData)
-        const data = response.data
+        const data = await payFee(this.formData)
 
         if (data.code === 0) {
           this.close()
+          this.$refs.payFeeOrderResult.open(data.data)
           this.$emit('success', data.data)
         } else {
           this.$message.error(data.msg)

src/components/fee/payFeeOrderResult.vue

@@ -1,11 +1,6 @@
 <template>
-  <el-dialog
-    :title="$t('payFeeOrderResult.title')"
-    :visible.sync="dialogVisible"
-    width="40%"
-    @close="handleClose"
-    :close-on-click-modal="false"
-  >
+  <el-dialog :title="$t('payFeeOrderResult.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
+    :close-on-click-modal="false">
     <div class="result-content">
       <p>{{ $t('payFeeOrderResult.success') }}</p>
       <p v-if="!receiptId">{{ $t('payFeeOrderResult.receiptTip') }}</p>
@@ -13,25 +8,13 @@
 
     <div slot="footer" class="dialog-footer">
       <el-button @click="back">{{ $t('payFeeOrderResult.back') }}</el-button>
-      <el-button 
-        v-if="receiptId"
-        type="primary"
-        @click="printSmallAndBack"
-      >
+      <el-button v-if="receiptId" type="primary" @click="printSmallAndBack">
         {{ $t('payFeeOrderResult.printSmall') }}
       </el-button>
-      <el-button 
-        v-if="receiptId"
-        type="primary"
-        @click="printAndBack('ON')"
-      >
+      <el-button v-if="receiptId" type="primary" @click="printAndBack('ON')">
         {{ $t('payFeeOrderResult.mergePrint') }}
       </el-button>
-      <el-button 
-        v-if="receiptId"
-        type="primary"
-        @click="printAndBack('OFF')"
-      >
+      <el-button v-if="receiptId" type="primary" @click="printAndBack('OFF')">
         {{ $t('payFeeOrderResult.printReceipt') }}
       </el-button>
     </div>
@@ -40,7 +23,7 @@
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { listFeePrintPages } from '@/api/fee/payFeeOrderApi'
+import { listFeePrintPages, queryFeeReceipt } from '@/api/fee/payFeeOrderApi'
 
 export default {
   name: 'PayFeeOrderResult',
@@ -68,17 +51,15 @@ export default {
     async queryPayFeeReceiptId(params) {
       try {
         const communityId = await getCommunityId()
-        const response = await this.$http.get('/feeReceipt/queryFeeReceipt', {
-          params: {
-            detailIds: params.detailId,
-            communityId,
-            page: 1,
-            row: 1
-          }
+        const response = await queryFeeReceipt({
+          detailIds: params.detailId,
+          communityId,
+          page: 1,
+          row: 1
         })
-        
-        if (response.data.code === 0 && response.data.data && response.data.data.length > 0) {
-          this.receiptId = response.data.data[0].receiptId
+
+        if (response.code === 0 && response.data && response.data.length > 0) {
+          this.receiptId = response.data[0].receiptId
         }
         this.dialogVisible = true
       } catch (error) {
@@ -89,12 +70,12 @@ export default {
       try {
         const communityId = getCommunityId()
         const response = await listFeePrintPages({
-            page: 1,
-            row: 1,
-            state: 'T',
-            communityId
+          page: 1,
+          row: 1,
+          state: 'T',
+          communityId
         })
-        
+
         if (response.data && response.data.length > 0) {
           this.printUrl = response.data[0].url
         }
@@ -110,7 +91,7 @@ export default {
     },
     back() {
       this.close()
-      this.$emit('back')
+      this.$router.go(-1)
     },
     handleClose() {
       this.receiptId = ''
@@ -124,6 +105,7 @@ export default {
   text-align: center;
   padding: 20px;
 }
+
 .dialog-footer {
   text-align: center;
 }

src/utils/dateUtil.js

@@ -124,3 +124,35 @@ export function addOneDay (date) {
     // 返回新的日期对象
     return newDate;
 }
+
+export function daysInMonth (year, month) {
+    if (month == 1) {
+        if (year % 4 == 0 && year % 100 != 0)
+            return 29;
+        else
+            return 28;
+    } else if ((month <= 6 && month % 2 == 0) || (month = 6 && month % 2 == 1))
+        return 31;
+    else
+        return 30;
+}
+export function addMonth (_date, _month) {
+    let y = _date.getFullYear();
+    let m = _date.getMonth();
+    let nextY = y;
+    let nextM = m;
+    //如果当前月+要加上的月>11 这里之所以用11是因为 js的月份从0开始
+    if ((m + _month) > 11) {
+        nextY = y + 1;
+        nextM = parseInt(m + _month) - 12;
+    } else {
+        nextM = m + _month
+    }
+    let daysInNextMonth = daysInMonth(nextY, nextM);
+    let day = _date.getDate();
+    if (day > daysInNextMonth) {
+        day = daysInNextMonth;
+    }
+    let _newDate = new Date(nextY, nextM, day)
+    return _newDate.getFullYear() + '-' + (_newDate.getMonth() + 1) + '-' + _newDate.getDate() + " " + _date.getHours() + ":" + _date.getMinutes() + ":" + _date.getSeconds();
+}

src/utils/vc.js

@@ -61,3 +61,16 @@ export function deepCopy(srcObj, targetObj = {}) {
 export function isDate(value) {
     return value instanceof Date && !isNaN(value.getTime());
 }
+
+export function copyObject (org, dst) {
+
+    if (!org || !dst) {
+        return;
+    }
+    //for(key in Object.getOwnPropertyNames(dst)){
+    for (let key in dst) {
+        if (Object.prototype.hasOwnProperty.call(org, key)) {
+            dst[key] = org[key]
+        }
+    }
+}

src/views/fee/payFeeOrderList.vue

@@ -104,14 +104,14 @@
         <el-col :span="7" style="padding-left: 30px;">
           <el-form label-width="100px">
             <el-form-item :label="$t('payFeeOrder.paymentTime')">
-              <el-date-picker v-model="payFeeOrderInfo.createTime" type="datetime"
+              <el-date-picker v-model="payFeeOrderInfo.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                 :placeholder="$t('payFeeOrder.paymentTimePlaceholder')" style="width: 100%;" readonly>
               </el-date-picker>
             </el-form-item>
 
             <el-form-item v-if="payFeeOrderInfo.feeFlag != '2006012'" :label="$t('payFeeOrder.paymentCycle')">
               <el-select v-model="payFeeOrderInfo.tempCycles" :placeholder="$t('payFeeOrder.selectPaymentCycle')"
-                style="width: 100%;" @change="changeMonth">
+                style="width: 100%;" @change="changeMonth(payFeeOrderInfo.tempCycles)">
                 <el-option v-for="item in payFeeOrderInfo.paymentCycles" :key="item"
                   :label="item + $t('payFeeOrder.month')" :value="item">
                 </el-option>
@@ -189,7 +189,6 @@
 
     <pay-fee-user-account ref="payFeeUserAccount"></pay-fee-user-account>
     <pay-fee-deposit ref="payFeeDeposit"></pay-fee-deposit>
-    <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
     <pay-fee-order-confirm ref="payFeeOrderConfirm"></pay-fee-order-confirm>
     <pay-fee-discount ref="payFeeDiscount"></pay-fee-discount>
     <pay-fee-coupon ref="payFeeCoupon"></pay-fee-coupon>
@@ -205,7 +204,7 @@ import { getDict } from '@/api/community/communityApi'
 import { getCommunityId } from '@/api/community/communityApi'
 import PayFeeUserAccount from '@/components/fee/payFeeUserAccount'
 import PayFeeDeposit from '@/components/fee/payFeeDeposit'
-import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
+
 import PayFeeOrderConfirm from '@/components/fee/payFeeOrderConfirm'
 import PayFeeDiscount from '@/components/fee/payFeeDiscount'
 import PayFeeCoupon from '@/components/fee/payFeeCoupon'
@@ -214,14 +213,14 @@ import ViewRoomData from '@/components/fee/viewRoomData'
 import ViewFeeData from '@/components/fee/viewFeeData'
 import ViewFeeConfigData from '@/components/fee/viewFeeConfigData'
 import { listFeeObj } from '@/api/fee/payFeeOrderApi'
-import { dateAdd, dateSub } from '@/utils/dateUtil'
+import { dateAdd, dateSub, addMonth } from '@/utils/dateUtil'
+import { copyObject } from '@/utils/vc'
 
 export default {
   name: 'PayFeeOrderList',
   components: {
     PayFeeUserAccount,
     PayFeeDeposit,
-    PayFeeOrderResult,
     PayFeeOrderConfirm,
     PayFeeDiscount,
     PayFeeCoupon,
@@ -267,7 +266,7 @@ export default {
         scale: 1,
         decimalPlace: 2,
         receivedAmountSwitch: '1',
-        createTime: new Date(),
+        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
         accountAmount: 0.0,
         viewAccountAmount: 0.0,
         deductionAmount: 0.0,
@@ -339,18 +338,86 @@ export default {
       }
     },
     openPayFee(type) {
+      // 周期不为空且不是自定义周期
+      if (this.payFeeOrderInfo.tempCycles != "" && this.payFeeOrderInfo.tempCycles != '-102') {
+        this.payFeeOrderInfo.cycles = this.payFeeOrderInfo.tempCycles;
+      }
+      // 一次性费用
+      if (this.payFeeOrderInfo.feeFlag == '2006012') {
+        this.payFeeOrderInfo.cycles = '1';
+        this.payFeeOrderInfo.tempCycles = '1';
+      }
+      // 新增缴费周期必选项
+      if (this.payFeeOrderInfo.tempCycles == "") {
+        this.$message.warning("请选择缴费周期");
+        return;
+      }
+
+      // 缴费周期为正整数时，显示缴费结束时间
+      if (!(/(^[1-9]\d*$)/.test(this.payFeeOrderInfo.cycles))) {
+        this.payFeeOrderInfo.showEndTime = '';
+      } else {
+        this.payFeeOrderInfo.showEndTime = addMonth(new Date(this.payFeeOrderInfo.endTime), parseInt(this.payFeeOrderInfo.cycles));
+      }
+      if (this.payFeeOrderInfo.selectUserAccount.length > 0 &&
+        this.payFeeOrderInfo.accountAmount >= this.payFeeOrderInfo.receivedAmount) {
+        this.payFeeOrderInfo.flag = "";
+      }
+      if (this.payFeeOrderInfo.selectUserAccount.length == 1) { //现金账户
+        this.payFeeOrderInfo.integralAmount = "";
+      } else {
+        this.payFeeOrderInfo.integralAmount = "";
+        this.payFeeOrderInfo.cashAmount = "";
+      }
+      this.payFeeOrderInfo.selectUserAccount.forEach(item => {
+
+        //现金账户
+        if (this.payFeeOrderInfo.receivedAmount && this.payFeeOrderInfo.flag != 'true' && parseFloat(item.amount) > parseFloat(this.payFeeOrderInfo.receivedAmount)) {
+          this.payFeeOrderInfo.cashAmount = this.payFeeOrderInfo.receivedAmount;
+        } else if (this.payFeeOrderInfo.receivedAmountNumber != null && this.payFeeOrderInfo.receivedAmountNumber != '' && parseFloat(item.amount) > parseFloat(this.payFeeOrderInfo.receivedAmountNumber)) {
+          this.payFeeOrderInfo.cashAmount = this.payFeeOrderInfo.receivedAmountNumber;
+        } else {
+          this.payFeeOrderInfo.cashAmount = item.amount;
+        }
+      });
       this.$refs.payFeeOrderConfirm.open({
         ...this.payFeeOrderInfo,
         payType: type
       })
     },
-    changeMonth(cycles) {
+    changeMonth(_cycles) {
       // 实现周期变更逻辑
-      console.log(cycles)
+      this.payFeeOrderInfo.custEndTime = '';
+      if ('-102' == _cycles) {
+        this.payFeeOrderInfo.totalFeePrice = 0.00;
+        this.payFeeOrderInfo.receivedAmount = 0.00;
+        if (this.payFeeOrderInfo.cycles) {
+          this.listAndComputeFeeInfo(this.payFeeOrderInfo.cycles);
+        }
+        return;
+      } else if ('-101' == _cycles) {
+        this.payFeeOrderInfo.cycles = "101";
+        return;
+      } else if ('-103' == _cycles) {
+        this.payFeeOrderInfo.cycles = "103";
+        return;
+      } else if ('-105' == _cycles) {
+        this.payFeeOrderInfo.cycles = "105";
+        return;
+      }
+      let _newCycles = _cycles;
+      if (_cycles == '') {
+        _newCycles = this.payFeeOrderInfo.paymentCycles[0];
+      }
+      this.listAndComputeFeeInfo(_newCycles);
     },
-    changeCycle(cycles) {
+    changeCycle(_cycles) {
       // 实现周期变更逻辑
-      console.log(cycles)
+      console.log(_cycles)
+      if (_cycles == '') {
+        return;
+      }
+      this.listAndComputeFeeInfo(_cycles);
     },
     async listAndComputeFeeInfo(_cycles) {
       // 实现费用计算逻辑
@@ -359,12 +426,12 @@ export default {
       }
 
       let param = {
-          communityId: getCommunityId(),
-          feeId: this.payFeeOrderInfo.feeId,
-          page: 1,
-          row: 1,
-          cycle: _cycles
-    
+        communityId: getCommunityId(),
+        feeId: this.payFeeOrderInfo.feeId,
+        page: 1,
+        row: 1,
+        cycle: _cycles
+
       };
       if (_cycles && _cycles == 103) {
         let _custEndTime = dateAdd(this.payFeeOrderInfo.custEndTime);
@@ -378,6 +445,10 @@ export default {
         param.params.customStartTime = this.payFeeOrderInfo.customStartTime
       }
       const listRoomData = await listFeeObj(param)
+      this.payFeeOrderInfo.paymentCycles = [];
+      for (let index = 1; index < 7; index++) {
+        this.payFeeOrderInfo.paymentCycles.push(index * listRoomData.data.paymentCycle);
+      }
       console.log('listRoomData', listRoomData)
       //发送get请求
 
@@ -387,7 +458,7 @@ export default {
       if (Object.prototype.hasOwnProperty.call(listRoomData.data, 'customEndTime')) {
         delete listRoomData.data.customEndTime
       }
-      this.payFeeOrderInfo = { ...this.payFeeOrderInfo, ...listRoomData.data }
+      copyObject(listRoomData.data, this.payFeeOrderInfo)
       // 由于返回的键与档期那页面自定义的键不一致，单独赋值toFiexedSign
       //vc.emit('payFeeOrder', 'initData', listRoomData.data);
       this.payFeeOrderInfo.totalFeePrice = listRoomData.data.feeTotalPrice;
@@ -421,10 +492,12 @@ export default {
 
 
     },
+
     async _listFeeIntegral(_cycles) {
       // 实现积分计算逻辑
       console.log(_cycles)
-    }
+    },
+
   }
 }
 </script>