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 <template> 1 <template>
2 <div> 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 <span> 53 <span>
33 - {{ formData.totalDiscountMoney.toFixed(2) }} 54 + {{ formData.accountAmount >= formData.receivedAmount ?
  55 + '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
34 </span> 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 </template> 93 </template>
90 94
91 <script> 95 <script>
92 -import { qrCodePayment, checkPayFinish ,payFee} from '@/api/fee/payFeeOrderApi' 96 +import { qrCodePayment, checkPayFinish, payFee } from '@/api/fee/payFeeOrderApi'
93 import { dateFormat } from '@/utils/dateUtil' 97 import { dateFormat } from '@/utils/dateUtil'
94 import PayFeeOrderResult from '@/components/fee/payFeeOrderResult' 98 import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
95 export default { 99 export default {
@@ -218,7 +222,48 @@ export default { @@ -218,7 +222,48 @@ export default {
218 </script> 222 </script>
219 223
220 <style scoped> 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 </style> 269 </style>
225 \ No newline at end of file 270 \ No newline at end of file