feat：添加水卡充值支付方式选择显示对钩小图标

src/views/waterCardManage/components/rechargeCard.vue

@@ -47,11 +47,11 @@
           </el-form-item>
         </el-col>
       </el-row>
-      
+
       <el-row :gutter="10">
         <el-col :span="24">
           <el-form-item label="当前余额" prop="cardAmount">
-            {{rechargeCardData.cardAmount}} 元
+            {{ rechargeCardData.cardAmount }} 元
           </el-form-item>
         </el-col>
       </el-row>
@@ -63,8 +63,9 @@
                 <el-input
                   type="number"
                   placeholder="充值金额"
-                  style="width: 100px;margin-right: 10px"
-                  v-model="baseForm.rechargercdRechargeamount">
+                  style="width: 100px; margin-right: 10px"
+                  v-model="baseForm.rechargercdRechargeamount"
+                >
                 </el-input>
                 元
               </el-col>
@@ -76,23 +77,49 @@
         <el-col :span="24">
           <el-form-item label="支付方式" prop="rechargercdRechargetype">
             <div>
-              <span @click="() => changePayType('pay')" :class="payType === 'pay' ? 'xianjin_pay_action' : ''" class="pay">
+              <span
+                @click="() => changePayType('pay')"
+                :class="payType === 'pay' ? 'xianjin_pay_action' : ''"
+                class="pay"
+              >
                 <div class="img_container">
-                  <img :src="cash" class="icon"/>
+                  <img :src="cash" class="icon" />
                   现金支付
+                  <img
+                    :src="weixinRightBottom"
+                    class="bottomRight"
+                    v-if="payType === 'pay'"
+                  />
                 </div>
               </span>
-              <span  @click="() => changePayType('weixin')" :class="payType === 'weixin' ? 'weixin_pay_action' : ''" class="pay">
+              <span
+                @click="() => changePayType('weixin')"
+                :class="payType === 'weixin' ? 'weixin_pay_action' : ''"
+                class="pay"
+              >
                 <div class="img_container">
-                  <img :src="weixin" class="icon"/>
+                  <img :src="weixin" class="icon" />
                   微信支付
-                  <img :src="weixinRightBottom" class="bottomRight" v-if="payType === 'weixin'"/>
+                  <img
+                    :src="weixinRightBottom"
+                    class="bottomRight"
+                    v-if="payType === 'weixin'"
+                  />
                 </div>
               </span>
-              <span  @click="() => changePayType('zhifubao')" :class="payType === 'zhifubao' ? 'zhifubao_pay_action' : ''" class="pay">
+              <span
+                @click="() => changePayType('zhifubao')"
+                :class="payType === 'zhifubao' ? 'zhifubao_pay_action' : ''"
+                class="pay"
+              >
                 <div class="img_container">
-                <img :src="zhifubao" class="icon_zfb"/>
-              </div>
+                  <img :src="zhifubao" class="icon_zfb" />
+                  <img
+                    :src="weixinRightBottom"
+                    class="bottomRight"
+                    v-if="payType === 'zhifubao'"
+                  />
+                </div>
               </span>
             </div>
           </el-form-item>
@@ -106,7 +133,7 @@
       >
       <el-button
         type="primary"
-        style="margin-left:16px;"
+        style="margin-left: 16px"
         @click="submitForm('baseForm')"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
@@ -117,13 +144,13 @@
 </template>
 
 <script>
-import { rechargeCard } from '@/api/card/index.js'
+import { rechargeCard } from '@/api/card/index.js';
 import { assign } from 'lodash-es';
-import cash from '../assets/cash.svg'
-import weixin from '../assets/weixin.svg'
-import weixinAction from '../assets/weixin_action.svg'
-import zhifubao from '../assets/zhifubao.svg'
-import weixinRightBottom from '../assets/weixin_right_bottom.svg'
+import cash from '../assets/cash.svg';
+import weixin from '../assets/weixin.svg';
+import weixinAction from '../assets/weixin_action.svg';
+import zhifubao from '../assets/zhifubao.svg';
+import weixinRightBottom from '../assets/weixin_right_bottom.svg';
 export default {
   name: 'rechargeCard',
   props: {
@@ -131,7 +158,7 @@ export default {
       type: Boolean,
       default: false
     },
-    rechargeCardData:{
+    rechargeCardData: {
       type: Object,
       default: () => {}
     }
@@ -153,7 +180,12 @@ export default {
       hasFetched: false,
       rules: {
         rechargercdRechargeamount: [
-          { required: true, pattern: /^[1-9]\d*(\.\d+)?$/, message: '请正确输入充值金额', trigger: 'blur' }
+          {
+            required: true,
+            pattern: /^[1-9]\d*(\.\d+)?$/,
+            message: '请正确输入充值金额',
+            trigger: 'blur'
+          }
         ]
       }
     };
@@ -169,12 +201,13 @@ export default {
           }
         }
       }
-    },
+    }
   },
   methods: {
     changePayType(payType) {
-      this.payType = payType
-      this.rechargercdRechargetype = payType == 'pay' ? 0 : payType == 'weixin' ? 1 : 2
+      this.payType = payType;
+      this.rechargercdRechargetype =
+        payType == 'pay' ? 0 : payType == 'weixin' ? 1 : 2;
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
@@ -185,8 +218,10 @@ export default {
       this.baseForm = {};
     },
     async rechargeCardHandler() {
-      const { cardId  } = this.rechargeCardData
-      const rechargercdRechargeamount = Number(this.baseForm.rechargercdRechargeamount)
+      const { cardId } = this.rechargeCardData;
+      const rechargercdRechargeamount = Number(
+        this.baseForm.rechargercdRechargeamount
+      );
       /*
         现金 0
         微信 1
@@ -196,21 +231,21 @@ export default {
         cardId,
         rechargercdRechargeamount,
         rechargercdRechargetype: this.rechargercdRechargetype
-      })
-      if(res?.code === "000000") {
-        this.handleClose()
-        this.$emit('refresh')
+      });
+      if (res?.code === '000000') {
+        this.handleClose();
+        this.$emit('refresh');
       }
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
-        valid && this.rechargeCardHandler()
-      })
+        valid && this.rechargeCardHandler();
+      });
     },
     handleClose() {
       this.$emit('update:visible', false);
       this.resetForm('baseForm');
-    },
+    }
   }
 };
 </script>
@@ -232,7 +267,7 @@ export default {
   overflow-x: hidden;
   padding: 0 20px;
 }
-.img_container{
+.img_container {
   display: flex;
   height: 40px;
   justify-content: center;
@@ -241,28 +276,28 @@ export default {
   color: #333333;
   font-size: 14px;
   font-weight: 400;
-  .bottomRight{
+  .bottomRight {
     position: absolute;
-    right:0;
-    bottom:0;
+    right: 0;
+    bottom: 0;
   }
-  .icon{
-    margin:0 8px 0 8px;
+  .icon {
+    margin: 0 8px 0 8px;
   }
-  .icon_zfb{
+  .icon_zfb {
     margin-left: -12px;
   }
 }
-.xianjin_pay_action{
-  border: 1px solid #F4A72F !important;
+.xianjin_pay_action {
+  border: 1px solid #f4a72f !important;
 }
-.weixin_pay_action{
-  border: 1px solid #14A478 !important;
+.weixin_pay_action {
+  border: 1px solid #14a478 !important;
 }
-.zhifubao_pay_action{
-  border: 1px solid #35B4FD !important;
+.zhifubao_pay_action {
+  border: 1px solid #35b4fd !important;
 }
-.pay{
+.pay {
   display: block;
   width: 124px;
   height: 40px;
@@ -270,7 +305,7 @@ export default {
   margin-bottom: 7px;
   text-align: center;
   border-radius: 5px;
-  border:1px solid #e4e7ed;
+  border: 1px solid #e4e7ed;
   cursor: pointer;
   align-items: center;
 }