wuye / webui

<template>
  <div class="pay-fee-order-container">
    <el-card class="box-card">
      <div slot="header" class="flex justify-between">
        <span>{{ $t('payFeeOrder.title') }}</span>
        <el-button type="primary" size="small" style="float: right;" @click="goBack">
          <i class="el-icon-close"></i>
          {{ $t('payFeeOrder.back') }}
        </el-button>
      </div>

      <el-row :gutter="20">
        <el-col :span="14" style="border-right: 1px solid #f4f4f4; padding-left: 30px;">
          <el-form label-width="120px" class="text-left">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.feeId')">
                  <el-link type="primary" @click="viewFee">
                    {{ payFeeOrderInfo.feeId }}
                  </el-link>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.feeName')">
                  <el-link type="primary" @click="viewFeeConfig">
                    {{ payFeeOrderInfo.feeName }}
                  </el-link>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.feeType')">
                  <span>{{ payFeeOrderInfo.feeTypeCdName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.billingStartTime')">
                  <span>{{ payFeeOrderInfo.endTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="payFeeOrderInfo.builtUpArea">
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.area')">
                  <span>{{ payFeeOrderInfo.builtUpArea }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.unitPrice')">
                  <span>{{ payFeeOrderInfo.squarePrice }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="payFeeOrderInfo.builtUpArea">
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.additionalFee')">
                  <span>{{ payFeeOrderInfo.additionalAmount }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.fixedFee')">
                  <span>{{ payFeeOrderInfo.additionalAmount }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.ownerAccount')">
                  <el-checkbox v-model="useAccount" @change="handleAccountChange"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.giftPoints')">
                  <span>{{ payFeeOrderInfo.integralQuantity }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.receivable')" style="line-height: 50px;">
                  <span style="font-size: 30px; color: red;">￥{{ payFeeOrderInfo.totalFeePrice }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('payFeeOrder.amountPayable')" style="line-height: 50px;">
                  <span style="font-size: 30px; color: red;">
                    ￥{{ payFeeOrderInfo.accountAmount >= payFeeOrderInfo.receivedAmount ? '0.00' :
                      (payFeeOrderInfo.receivedAmount - payFeeOrderInfo.accountAmount).toFixed(2) }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>

        <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" 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(payFeeOrderInfo.tempCycles)">
                <el-option v-for="item in payFeeOrderInfo.paymentCycles" :key="item"
                  :label="item + $t('payFeeOrder.month')" :value="item">
                </el-option>
                <el-option :value="-102" :label="$t('payFeeOrder.customCycle')"></el-option>
                <el-option :value="-101" :label="$t('payFeeOrder.customAmount')"></el-option>
                <el-option :value="-103" :label="$t('payFeeOrder.customEndTime')"></el-option>
                <el-option :value="-105" :label="$t('payFeeOrder.customTimeRange')"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="payFeeOrderInfo.tempCycles == '-102'" :label="$t('payFeeOrder.actualCycle')">
              <el-input v-model="payFeeOrderInfo.cycles" :placeholder="$t('payFeeOrder.inputActualCycle')"
                @change="changeCycle">
              </el-input>
            </el-form-item>

            <el-form-item v-show="payFeeOrderInfo.tempCycles == '-103'" :label="$t('payFeeOrder.endTime')">
              <el-date-picker v-model="payFeeOrderInfo.custEndTime" type="date"
                :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="payFeeOrderInfo.tempCycles == '-105'" :label="$t('payFeeOrder.paymentPeriod')">
              <el-date-picker v-model="payFeeOrderInfo.customStartTime" type="date"
                :placeholder="$t('payFeeOrder.selectStartTime')" style="width: 100%; margin-bottom: 10px;">
              </el-date-picker>
              <el-date-picker v-model="payFeeOrderInfo.customEndTime" type="date"
                :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
              </el-date-picker>
            </el-form-item>

            <el-form-item :label="$t('payFeeOrder.paymentMethod')">
              <el-select v-model="payFeeOrderInfo.primeRate" :placeholder="$t('payFeeOrder.selectPaymentMethod')"
                style="width: 100%;">
                <template v-for="(item, index) in payFeeOrderInfo.primeRates">
                  <el-option v-if="item.statusCd != '5' && item.statusCd != '6' && item.statusCd != '8'" :key="index"
                    :label="item.name" :value="item.statusCd">
                  </el-option>
                </template>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('payFeeOrder.actualReceipt')">
              <el-input v-if="payFeeOrderInfo.receivedAmountSwitch == '1'" v-model="payFeeOrderInfo.receivedAmount"
                :placeholder="$t('payFeeOrder.inputActualAmount')">
              </el-input>
              <span v-if="payFeeOrderInfo.receivedAmountSwitch == '2'" style="font-size: 15px;">
                ￥{{ payFeeOrderInfo.receivedAmount }}
              </span>
            </el-form-item>

            <el-form-item :label="$t('payFeeOrder.remark')">
              <el-input type="textarea" v-model="payFeeOrderInfo.remark" :placeholder="$t('payFeeOrder.inputRemark')">
              </el-input>
            </el-form-item>

            <el-row style="margin-top: 30px;">
              <el-col :span="10" :offset="1">
                <el-button v-if="payFeeOrderInfo.primeRate == '3' || payFeeOrderInfo.primeRate == '4'" type="success"
                  size="medium" style="width: 100%;" @click="openPayFee('qrCode')">
                  {{ $t('payFeeOrder.scanPayment') }}
                </el-button>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-button v-if="payFeeOrderInfo.offlinePayFeeSwitch != '2'" type="primary" size="medium"
                  style="width: 100%;" @click="openPayFee('common')">
                  {{ $t('payFeeOrder.submitPayment') }}
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <pay-fee-user-account ref="payFeeUserAccount"></pay-fee-user-account>
    <pay-fee-deposit ref="payFeeDeposit"></pay-fee-deposit>
    <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>
    <prestore-account2 ref="prestoreAccount2"></prestore-account2>
    <view-room-data ref="viewRoomData"></view-room-data>
    <view-fee-data ref="viewFeeData"></view-fee-data>
    <view-fee-config-data ref="viewFeeConfigData"></view-fee-config-data>
  </div>
</template>

<script>
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 PayFeeOrderConfirm from '@/components/fee/payFeeOrderConfirm'
import PayFeeDiscount from '@/components/fee/payFeeDiscount'
import PayFeeCoupon from '@/components/fee/payFeeCoupon'
import PrestoreAccount2 from '@/components/fee/prestoreAccount2'
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, addMonth } from '@/utils/dateUtil'
import { copyObject } from '@/utils/vc'

export default {
  name: 'PayFeeOrderList',
  components: {
    PayFeeUserAccount,
    PayFeeDeposit,
    PayFeeOrderConfirm,
    PayFeeDiscount,
    PayFeeCoupon,
    PrestoreAccount2,
    ViewRoomData,
    ViewFeeData,
    ViewFeeConfigData
  },
  data() {
    return {
      payFeeOrderInfo: {
        feeId: '',
        feeName: '',
        feeTypeCdName: '',
        feeTypeCd: '',
        primeRates: [],
        primeRate: '',
        endTime: '',
        feeFlag: '',
        feePrice: 0.00,
        tempCycles: '',
        cycles: '',
        paymentCycles: [],
        totalFeePrice: 0.00,
        receivedAmount: '',
        receivedAmountNumber: '',
        communityId: '',
        payerObjName: '',
        payerObjId: '',
        payerObjType: '',
        remark: '',
        builtUpArea: 0.0,
        squarePrice: 0.0,
        additionalAmount: 0.0,
        receiptId: '',
        showEndTime: '',
        accountList: [],
        integralAmount: '',
        cashAmount: '',
        couponAmount: '',
        selectDiscount: [],
        totalDiscountMoney: 0.0,
        scale: 1,
        decimalPlace: 2,
        receivedAmountSwitch: '1',
        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
        accountAmount: 0.0,
        viewAccountAmount: 0.0,
        deductionAmount: 0.0,
        redepositAmount: 0.0,
        selectUserAccount: [],
        authCode: '',
        orderId: '',
        offlinePayFeeSwitch: '1',
        flag: '',
        custEndTime: '',
        configId: '',
        roomName: '',
        sign: 1,
        integralQuantity: 0,
        customStartTime: '',
        customEndTime: ''
      },
      useAccount: true,
      loading: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        this.payFeeOrderInfo.communityId = await getCommunityId()
        this.payFeeOrderInfo.feeId = this.$route.query.feeId || ''
        this.listAndComputeFeeInfo()
        this.getDictData()
      } catch (error) {
        console.error('初始化数据失败:', error)
      }
    },
    async getDictData() {
      try {
        const data = await getDict('pay_fee_detail', 'prime_rate')
        this.payFeeOrderInfo.primeRates = data
      } catch (error) {
        console.error('获取字典数据失败:', error)
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    viewFee() {
      this.$refs.viewFeeData.open({
        feeId: this.payFeeOrderInfo.feeId
      })
    },
    viewFeeConfig() {
      this.$refs.viewFeeConfigData.open({
        configId: this.payFeeOrderInfo.configId
      })
    },
    viewRoomData() {
      this.$refs.viewRoomData.open({
        roomId: this.payFeeOrderInfo.payerObjId
      })
    },
    handleAccountChange(val) {
      if (val) {
        this.$refs.payFeeUserAccount.open({
          feeId: this.payFeeOrderInfo.feeId
        })
      } else {
        this.$refs.payFeeUserAccount.close()
      }
    },
    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) {
      // 实现周期变更逻辑
      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) {
      // 实现周期变更逻辑
      console.log(_cycles)
      if (_cycles == '') {
        return;
      }
      this.listAndComputeFeeInfo(_cycles);
    },
    async listAndComputeFeeInfo(_cycles) {
      // 实现费用计算逻辑
      if (!_cycles) {
        _cycles = 1;
      }

      let param = {
        communityId: getCommunityId(),
        feeId: this.payFeeOrderInfo.feeId,
        page: 1,
        row: 1,
        cycle: _cycles

      };
      if (_cycles && _cycles == 103) {
        let _custEndTime = dateAdd(this.payFeeOrderInfo.custEndTime);
        //前端选择会默认 少一天 所以 加上一天
        param.params.custEndTime = _custEndTime;
      }
      if (_cycles && _cycles == 105) {
        let _customEndTime = dateAdd(this.payFeeOrderInfo.customEndTime);
        //前端选择会默认 少一天 所以 加上一天
        param.params.customEndTime = _customEndTime;
        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请求

      if (Object.prototype.hasOwnProperty.call(listRoomData.data, 'custEndTime')) {
        delete listRoomData.data.custEndTime
      }
      if (Object.prototype.hasOwnProperty.call(listRoomData.data, 'customEndTime')) {
        delete listRoomData.data.customEndTime
      }
      copyObject(listRoomData.data, this.payFeeOrderInfo)
      // 由于返回的键与档期那页面自定义的键不一致，单独赋值toFiexedSign
      //vc.emit('payFeeOrder', 'initData', listRoomData.data);
      this.payFeeOrderInfo.totalFeePrice = listRoomData.data.feeTotalPrice;
      this.payFeeOrderInfo.receivedAmount = listRoomData.data.feeTotalPrice;
      let _deadlineTime = new Date(listRoomData.data.deadlineTime);
      let _maxEndTime = new Date(listRoomData.data.maxEndTime);
      if (_deadlineTime.getTime() > _maxEndTime.getTime()) {
        this.$message.warning('超过最大计费结束时间，' + dateSub(listRoomData.data.maxEndTime, listRoomData.data.feeFlag) + ",请用更小缴费周期或者自定义结束时间缴费");
        return;
      }
      // vc.emit('payFeeDiscount', 'computeFeeDiscount', {
      //   feeId: this.payFeeOrderInfo.feeId,
      //   cycles: _cycles,
      //   payerObjId: this.payFeeOrderInfo.payerObjId,
      //   payerObjType: this.payFeeOrderInfo.payerObjType,
      //   endTime: this.payFeeOrderInfo.endTime,
      //   custEndTime: this.payFeeOrderInfo.custEndTime
      // });
      // vc.emit('payFeeCoupon', 'computeFeeCoupon', {
      //   feeId: this.payFeeOrderInfo.feeId,
      //   cycles: _cycles,
      //   payerObjId: this.payFeeOrderInfo.payerObjId,
      //   payerObjType: this.payFeeOrderInfo.payerObjType,
      //   endTime: this.payFeeOrderInfo.endTime
      // });
      // vc.emit('payFeeDeposit', 'computeFeeDeposit', {
      //   payerObjId: this.payFeeOrderInfo.payerObjId,
      //   payerObjType: this.payFeeOrderInfo.payerObjType,
      // });
      this._listFeeIntegral(_cycles);


    },

    async _listFeeIntegral(_cycles) {
      // 实现积分计算逻辑
      console.log(_cycles)
    },

  }
}
</script>

<style lang="scss" scoped>
.pay-fee-order-container {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  .el-date-editor,
  .el-select,
  .el-input {
    width: 100%;
  }
}
</style>