wuye / webui

Commit d65dee5efba90cc1b914f300822e7a6c4ef15a56

Authored by wuxw
1 parent b8423097

优化支付问题

Inline Side-by-side
Showing 1 changed file with 132 additions and 87 deletions
src/components/fee/payFeeOrderConfirm.vue
  View file @d65dee5
1 1 <template>
2 2 <div>
3   - <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
4   - :close-on-click-modal="false">
5   - <el-form label-width="120px" class="text-left">
6   - <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
7   - <span>{{ formData.payerObjName }}</span>
8   - </el-form-item>
9   -
10   - <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
11   - :label="$t('payFeeOrderConfirm.timeRange')">
12   - <span>
13   - {{ dateFormat(formData.endTime) }} 至
14   - {{ dateFormat(formData.showEndTime) }}
15   - </span>
16   - </el-form-item>
17   -
18   - <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
19   - :label="$t('payFeeOrderConfirm.timeRange')">
20   - <span>
21   - {{ dateFormat(formData.endTime) }} 至
22   - {{ formData.custEndTime }}
23   - </span>
24   - </el-form-item>
25   -
26   - <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
27   - <span>{{ formData.totalFeePrice }}</span>
28   - </el-form-item>
29   -
30   - <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
31   - <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
  3 + <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
  4 + :close-on-click-modal="false">
  5 + <el-form label-width="120px" class="text-left" @submit.prevent>
  6 + <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
  7 + <span>{{ formData.payerObjName }}</span>
  8 + </el-form-item>
  9 +
  10 + <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
  11 + :label="$t('payFeeOrderConfirm.timeRange')">
  12 + <span>
  13 + {{ dateFormat(formData.endTime) }} 至
  14 + {{ dateFormat(formData.showEndTime) }}
  15 + </span>
  16 + </el-form-item>
  17 +
  18 + <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
  19 + :label="$t('payFeeOrderConfirm.timeRange')">
  20 + <span>
  21 + {{ dateFormat(formData.endTime) }} 至
  22 + {{ formData.custEndTime }}
  23 + </span>
  24 + </el-form-item>
  25 +
  26 + <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
  27 + <span>{{ formData.totalFeePrice }}</span>
  28 + </el-form-item>
  29 +
  30 + <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
  31 + <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
  32 + <span>
  33 + {{ formData.totalDiscountMoney.toFixed(2) }}
  34 + </span>
  35 + </el-tooltip>
  36 + </el-form-item>
  37 +
  38 + <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
  39 + <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
  40 + {{ formData.receivedAmountNumber }}
  41 + </span>
  42 + <span v-else>{{ formData.receivedAmount }}</span>
  43 + </el-form-item>
  44 +
  45 + <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
  46 + <span>
  47 + {{ formData.accountAmount >= formData.receivedAmount ?
  48 + formData.receivedAmount : formData.accountAmount.toFixed(2) }}
  49 + </span>
  50 + </el-form-item>
  51 +
  52 + <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
32 53 <span>
33   - {{ formData.totalDiscountMoney.toFixed(2) }}
  54 + {{ formData.accountAmount >= formData.receivedAmount ?
  55 + '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
34 56 </span>
35   - </el-tooltip>
36   - </el-form-item>
37   -
38   - <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
39   - <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
40   - {{ formData.receivedAmountNumber }}
41   - </span>
42   - <span v-else>{{ formData.receivedAmount }}</span>
43   - </el-form-item>
44   -
45   - <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
46   - <span>
47   - {{ formData.accountAmount >= formData.receivedAmount ?
48   - formData.receivedAmount : formData.accountAmount.toFixed(2) }}
49   - </span>
50   - </el-form-item>
51   -
52   - <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
53   - <span>
54   - {{ formData.accountAmount >= formData.receivedAmount ?
55   - '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
56   - </span>
57   - </el-form-item>
58   -
59   - <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
60   - :label="$t('payFeeOrderConfirm.integralDeduction')">
61   - <span>{{ formData.integralAmount }}</span>
62   - </el-form-item>
63   -
64   - <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
65   - :label="$t('payFeeOrderConfirm.cashDeduction')">
66   - <span>{{ formData.cashAmount }}</span>
67   - </el-form-item>
68   -
69   - <el-form-item :label="$t('payFeeOrderConfirm.remark')">
70   - <span>{{ formData.remark }}</span>
71   - </el-form-item>
72   -
73   - <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
74   - <el-input v-model="formData.authCode" :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
75   - @keyup.enter.native="qrCodePayFee"></el-input>
76   - </el-form-item>
77   - </el-form>
78   -
79   - <div slot="footer" class="dialog-footer">
80   - <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
81   - <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
82   - {{ $t('payFeeOrderConfirm.confirm') }}
83   - </el-button>
84   - </div>
85   - </el-dialog>
86   - <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
87   -
88   -</div>
  57 + </el-form-item>
  58 +
  59 + <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
  60 + :label="$t('payFeeOrderConfirm.integralDeduction')">
  61 + <span>{{ formData.integralAmount }}</span>
  62 + </el-form-item>
  63 +
  64 + <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
  65 + :label="$t('payFeeOrderConfirm.cashDeduction')">
  66 + <span>{{ formData.cashAmount }}</span>
  67 + </el-form-item>
  68 +
  69 + <el-form-item :label="$t('payFeeOrderConfirm.remark')">
  70 + <span>{{ formData.remark }}</span>
  71 + </el-form-item>
  72 +
  73 + <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
  74 + <input
  75 + v-model="formData.authCode"
  76 + :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
  77 + @keydown.enter.prevent="qrCodePayFee"
  78 + class="custom-input"
  79 + type="text">
  80 + </el-form-item>
  81 + </el-form>
  82 +
  83 + <div slot="footer" class="dialog-footer">
  84 + <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
  85 + <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
  86 + {{ $t('payFeeOrderConfirm.confirm') }}
  87 + </el-button>
  88 + </div>
  89 + </el-dialog>
  90 + <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
  91 +
  92 + </div>
89 93 </template>
90 94  
91 95 <script>
92   -import { qrCodePayment, checkPayFinish ,payFee} from '@/api/fee/payFeeOrderApi'
  96 +import { qrCodePayment, checkPayFinish, payFee } from '@/api/fee/payFeeOrderApi'
93 97 import { dateFormat } from '@/utils/dateUtil'
94 98 import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
95 99 export default {
... ... @@ -218,7 +222,48 @@ export default {
218 222 </script>
219 223  
220 224 <style scoped>
221   -.dialog-footer {
222   - text-align: right;
  225 +.custom-input {
  226 + width: 100%;
  227 + height: 40px;
  228 + line-height: 40px;
  229 + padding: 0 15px;
  230 + border: 1px solid #dcdfe6;
  231 + border-radius: 4px;
  232 + font-size: 14px;
  233 + color: #606266;
  234 + background-color: #fff;
  235 + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  236 + box-sizing: border-box;
  237 +}
  238 +
  239 +.custom-input:focus {
  240 + outline: none;
  241 + border-color: #409eff;
  242 + box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  243 +}
  244 +
  245 +.custom-input:hover {
  246 + border-color: #c0c4cc;
  247 +}
  248 +
  249 +.custom-input::placeholder {
  250 + color: #c0c4cc;
  251 +}
  252 +
  253 +/* 禁用状态 */
  254 +.custom-input:disabled {
  255 + background-color: #f5f7fa;
  256 + border-color: #e4e7ed;
  257 + color: #c0c4cc;
  258 + cursor: not-allowed;
  259 +}
  260 +
  261 +/* 错误状态 */
  262 +.custom-input.error {
  263 + border-color: #f56c6c;
  264 +}
  265 +
  266 +.custom-input.error:focus {
  267 + box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
223 268 }
224 269 </style>
225 270 \ No newline at end of file
... ...