增加转盘抽奖页面和编辑

src/views/finance/components/pop-add-zhuanpan.vue

@@ -7,21 +7,21 @@
     :close-on-click-modal="true"
   >
     <el-form :model="form" label-width="100px">
-      <el-form-item label="描述">
+      <el-form-item label="名称" required>
         <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item label="类型" required>
         <el-radio-group v-model="form.type">
-            <el-radio label="1">谢谢惠顾</el-radio>
-            <el-radio label="2">红包</el-radio>
-            <el-radio label="9">其他</el-radio>
+          <el-radio :label="1">谢谢惠顾</el-radio>
+          <el-radio :label="2">红包</el-radio>
+          <el-radio :label="3">物品</el-radio>
+          <!-- <el-radio label="9">其他</el-radio> -->
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="红包金额比例" v-if="form.type=='2'">
-        <el-input-number v-model="form.ratio"></el-input-number>
-      </el-form-item>
-      <el-form-item label="中奖概率" v-if="form.type=='2'">
-        <el-input-number v-model="form.odds"></el-input-number>
+
+      <el-form-item label="中奖概率" required>
+        <el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
+        <span>%</span>
       </el-form-item>
       <el-form-item label="图片上传">
         <el-upload
@@ -32,11 +32,7 @@
           :on-success="uploadSuccess"
         >
           <div class="upload-file-box">
-            <img
-              v-if="form.url"
-              :src="form.url"
-              class="avatar"
-            />
+            <img v-if="form.url" :src="form.url" class="avatar" />
             <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
           </div>
         </el-upload>
@@ -61,9 +57,8 @@ export default {
       form: {
         name: "",
         url: "",
-        ratio:1,
-        type:'1',
-        odds:0
+        type: 1,
+        odds: 0,
       },
     };
   },
@@ -72,18 +67,36 @@ export default {
       this.form.url = file.data;
     },
     open(item) {
+      console.log(item);
       this.dialogVisible = true;
       this.item = item;
+      this.form = {
+        ...item,
+      };
     },
     diaClose() {
       this.dialogVisible = false;
+      this.form = {
+        name: "",
+        url: "",
+        type: 1,
+        odds: 0,
+      };
     },
     async confirm() {
       if (!this.form.name) {
-        return this.$message.error("描述不能为空");
+        return this.$message.error("名称不能为空");
+      }
+      if (this.form.odds === "") {
+        return this.$message.error("中奖概率不能为空！");
+      }
+      const { name, url, type, odds, id } = this.form;
+      const { data } = await $disc.update({ name, url, type, odds, id });
+      if (data.code == 0) {
+        this.$message.success("修改成功");
+        this.$emit("refresh");
+        this.diaClose();
       }
-      const res = await $disc.add(this.form);
-      console.log(res);
     },
   },
 };
@@ -95,13 +108,19 @@ export default {
 ::v-deep .el-form-item__label {
   text-align: left;
 }
-.upload-file-box{
-    border-radius: 6px; width: 148px; height: 148px;
-    display: flex; justify-content: center; align-items: center;
-    overflow: hidden;
-    border: 1px solid #c0c4cc;
-    img{
-        width: 100%; height: 100%; object-fit: cover;
-    }
+.upload-file-box {
+  border-radius: 6px;
+  width: 148px;
+  height: 148px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid #c0c4cc;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 </style>