优化支付问题

src/components/fee/payFeeOrderConfirm.vue

@@ -1,95 +1,99 @@
 <template>
   <div>
-  <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
-    :close-on-click-modal="false">
-    <el-form label-width="120px" class="text-left">
-      <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
-        <span>{{ formData.payerObjName }}</span>
-      </el-form-item>
+    <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="40%" @close="handleClose"
+      :close-on-click-modal="false">
+      <el-form label-width="120px" class="text-left" @submit.prevent>
+        <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
+          <span>{{ formData.payerObjName }}</span>
+        </el-form-item>
 
-      <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
-        :label="$t('payFeeOrderConfirm.timeRange')">
-        <span>
-          {{ dateFormat(formData.endTime) }} 至
-          {{ dateFormat(formData.showEndTime) }}
-        </span>
-      </el-form-item>
-
-      <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
-        :label="$t('payFeeOrderConfirm.timeRange')">
-        <span>
-          {{ dateFormat(formData.endTime) }} 至
-          {{ formData.custEndTime }}
-        </span>
-      </el-form-item>
-
-      <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
-        <span>{{ formData.totalFeePrice }}</span>
-      </el-form-item>
-
-      <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
-        <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
+        <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
+          :label="$t('payFeeOrderConfirm.timeRange')">
           <span>
-            {{ formData.totalDiscountMoney.toFixed(2) }}
+            {{ dateFormat(formData.endTime) }} 至
+            {{ dateFormat(formData.showEndTime) }}
           </span>
-        </el-tooltip>
-      </el-form-item>
+        </el-form-item>
 
-      <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
-        <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
-          {{ formData.receivedAmountNumber }}
-        </span>
-        <span v-else>{{ formData.receivedAmount }}</span>
-      </el-form-item>
+        <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
+          :label="$t('payFeeOrderConfirm.timeRange')">
+          <span>
+            {{ dateFormat(formData.endTime) }} 至
+            {{ formData.custEndTime }}
+          </span>
+        </el-form-item>
 
-      <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
-        <span>
-          {{ formData.accountAmount >= formData.receivedAmount ?
-            formData.receivedAmount : formData.accountAmount.toFixed(2) }}
-        </span>
-      </el-form-item>
+        <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
+          <span>{{ formData.totalFeePrice }}</span>
+        </el-form-item>
 
-      <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
-        <span>
-          {{ formData.accountAmount >= formData.receivedAmount ?
-            '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
-        </span>
-      </el-form-item>
+        <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
+          <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
+            <span>
+              {{ formData.totalDiscountMoney.toFixed(2) }}
+            </span>
+          </el-tooltip>
+        </el-form-item>
 
-      <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
-        :label="$t('payFeeOrderConfirm.integralDeduction')">
-        <span>{{ formData.integralAmount }}</span>
-      </el-form-item>
+        <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
+          <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
+            {{ formData.receivedAmountNumber }}
+          </span>
+          <span v-else>{{ formData.receivedAmount }}</span>
+        </el-form-item>
 
-      <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
-        :label="$t('payFeeOrderConfirm.cashDeduction')">
-        <span>{{ formData.cashAmount }}</span>
-      </el-form-item>
+        <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
+          <span>
+            {{ formData.accountAmount >= formData.receivedAmount ?
+              formData.receivedAmount : formData.accountAmount.toFixed(2) }}
+          </span>
+        </el-form-item>
 
-      <el-form-item :label="$t('payFeeOrderConfirm.remark')">
-        <span>{{ formData.remark }}</span>
-      </el-form-item>
+        <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
+          <span>
+            {{ formData.accountAmount >= formData.receivedAmount ?
+              '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
+          </span>
+        </el-form-item>
 
-      <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
-        <el-input v-model="formData.authCode" :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
-          @keyup.enter.native="qrCodePayFee"></el-input>
-      </el-form-item>
-    </el-form>
+        <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
+          :label="$t('payFeeOrderConfirm.integralDeduction')">
+          <span>{{ formData.integralAmount }}</span>
+        </el-form-item>
 
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
-      <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
-        {{ $t('payFeeOrderConfirm.confirm') }}
-      </el-button>
-    </div>
-  </el-dialog>
-  <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
+        <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
+          :label="$t('payFeeOrderConfirm.cashDeduction')">
+          <span>{{ formData.cashAmount }}</span>
+        </el-form-item>
 
-</div>
+        <el-form-item :label="$t('payFeeOrderConfirm.remark')">
+          <span>{{ formData.remark }}</span>
+        </el-form-item>
+
+        <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
+          <input 
+            v-model="formData.authCode" 
+            :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
+            @keydown.enter.prevent="qrCodePayFee"
+            class="custom-input"
+            type="text">
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
+        <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
+          {{ $t('payFeeOrderConfirm.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
+
+  </div>
 </template>
 
 <script>
-import { qrCodePayment, checkPayFinish ,payFee} 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 {
@@ -218,7 +222,48 @@ export default {
 </script>
 
 <style scoped>
-.dialog-footer {
-  text-align: right;
+.custom-input {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  background-color: #fff;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-sizing: border-box;
+}
+
+.custom-input:focus {
+  outline: none;
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.custom-input:hover {
+  border-color: #c0c4cc;
+}
+
+.custom-input::placeholder {
+  color: #c0c4cc;
+}
+
+/* 禁用状态 */
+.custom-input:disabled {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+/* 错误状态 */
+.custom-input.error {
+  border-color: #f56c6c;
+}
+
+.custom-input.error:focus {
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
 }
 </style>