feat(用户列表-->金币奖励弹窗): 充值类型设置可输入美金

src/components/data/EditUserGoldCoinRewardForm/index.vue

@@ -15,8 +15,13 @@
         label-width="70px"
         style="width: 300px; margin-left:50px;"
       >
+        <!-- 类型选择 下拉框 -->
         <el-form-item label="类型" prop="rewardType">
-          <el-select v-model="formData.rewardType" placeholder="请选择" style="width: 100%;">
+          <el-select
+            v-model="formData.rewardType"
+            placeholder="请选择"
+            style="width: 100%;"
+          >
             <el-option
               v-for="item in currencyRewardReasons"
               :key="item.value"
@@ -26,6 +31,7 @@
           </el-select>
         </el-form-item>
 
+        <!-- 金币数量 输入框 -->
         <el-form-item label="金币" prop="candy">
           <el-input
             v-model.trim="formData.candy"
@@ -33,25 +39,29 @@
           />
         </el-form-item>
 
-        <el-form-item v-if="formData.rewardType == 3" label="美金" prop="usdCandy">
+        <!-- 美金 输入框 -->
-          <el-input
+        <el-form-item
-            v-model.trim="formData.usdCandy"
+          v-if="formData.rewardType == 3 || formData.rewardType == 4"
-            placeholder="美金数量"
+          label="美金"
-          />
+          prop="usdCandy"
+        >
+          <el-input v-model.trim="formData.usdCandy" placeholder="美金数量" />
         </el-form-item>
 
+        <!-- 备注 输入框 -->
         <el-form-item label="备注" prop="remarks">
-          <el-input
+          <el-input v-model.trim="formData.remarks" placeholder="奖励备注" />
-            v-model.trim="formData.remarks"
-            placeholder="奖励备注"
-          />
         </el-form-item>
-
       </el-form>
+
+      <!-- 操作按钮 -->
       <div slot="footer" class="dialog-footer">
+        <!-- 取消按钮 -->
         <el-button @click="handleClose()">
           取消
         </el-button>
+
+        <!-- 提交按钮 -->
         <el-button
           v-loading="listLoading"
           type="primary"
@@ -65,11 +75,11 @@
 </template>
 
 <script>
-import { currencyRewardReasons } from '@/constant/type'
+import { currencyRewardReasons } from "@/constant/type";
-import { sendGold } from '@/api/app-user'
+import { sendGold } from "@/api/app-user";
 
 export default {
-  name: 'EditUserGoldCoinDeductionForm',
+  name: "EditUserGoldCoinDeductionForm",
   props: {
     userId: {
       type: String,
@@ -84,70 +94,78 @@ export default {
         candy: [
           {
             required: true,
-            message: '必填字段不可为空',
+            message: "必填字段不可为空",
-            trigger: 'blur'
+            trigger: "blur"
           },
           {
             pattern: /^\d{1,7}(\.\d{0,2})?$/,
-            message: 'double范围0~9999999小数最多两位',
+            message: "double范围0~9999999小数最多两位",
-            trigger: 'blur'
+            trigger: "blur"
           }
         ],
         rewardType: [
           {
             required: true,
-            message: '必填字段不可为空',
+            message: "必填字段不可为空",
-            trigger: 'blur'
+            trigger: "blur"
           }
         ],
         usdCandy: [
           {
             required: true,
-            message: '必填字段不可为空',
+            message: "必填字段不可为空",
-            trigger: 'blur'
+            trigger: "blur"
           }
         ]
       },
       formData: {
-        candy: '',
+        candy: "",
-        remarks: '',
+        remarks: "",
-        usdCandy: '',
+        usdCandy: "",
-        rewardType: ''
+        rewardType: ""
       }
-    }
+    };
   },
   methods: {
     handleSubmit() {
-      const that = this
+      const that = this;
-      that.$refs.dataForm.validate((valid) => {
+      that.$refs.dataForm.validate(valid => {
         if (!valid) {
-          console.error('error submit!!')
+          console.error("error submit!!");
-          return false
+          return false;
         }
-        that.listLoading = true
+        that.listLoading = true;
         sendGold({
           userId: that.userId,
           quantity: that.formData.candy,
           usdQuantity: that.formData.usdCandy,
-          remarks: that.formData.remarks ? `${that.getSeletedCurrencyRewardReasonsName()}/${that.formData.remarks}` : that.getSeletedCurrencyRewardReasonsName(),
+          remarks: that.formData.remarks
+            ? `${that.getSeletedCurrencyRewardReasonsName()}/${
+                that.formData.remarks
+              }`
+            : that.getSeletedCurrencyRewardReasonsName(),
           type: that.formData.rewardType
-        }).then(res => {
-          that.$emit('success', Object.assign({}, that.formData))
-          that.handleClose()
-        }).catch(err => {
-          that.listLoading = false
-          that.$emit('fial', err)
         })
-      })
+          .then(res => {
+            that.$emit("success", Object.assign({}, that.formData));
+            that.handleClose();
+          })
+          .catch(err => {
+            that.listLoading = false;
+            that.$emit("fial", err);
+          });
+      });
     },
     getSeletedCurrencyRewardReasonsName() {
-      const that = this
+      const that = this;
-      const list = that.currencyRewardReasons.filter(item => item.value === that.formData.rewardType)
+      const list = that.currencyRewardReasons.filter(
-      return list.length > 0 ? list[0].name : ''
+        item => item.value === that.formData.rewardType
+      );
+      return list.length > 0 ? list[0].name : "";
     },
     handleClose() {
-      this.$emit('close')
+      this.$emit("close");
     }
   }
-}
+};
 </script>