增加广告跳转，增加现金红包配置

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

@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    :title="form.id ? '修改红包' : '新增红包'"
+    width="500px"
+    :visible.sync="dialogVisible"
+    @close="diaClose"
+    :close-on-click-modal="true"
+  >
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="描述" required>
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="最大金额" required>
+        <el-input-number
+          :min="0"
+          :max="100"
+          v-model="form.maxAmount"
+        ></el-input-number>
+        <span>元</span>
+      </el-form-item>
+
+      <el-form-item label="中奖概率" required>
+        <el-input-number
+          :min="0"
+          :max="1"
+          :step="0.1"
+          v-model="form.random"
+        ></el-input-number>
+        <span></span>
+      </el-form-item>
+      <el-form-item label="是否启用" required>
+        <el-switch
+          v-model="form.status"
+          :inactive-value="0"
+          :active-value="1"
+        ></el-switch>
+      </el-form-item>
+    </el-form>
+
+    <div class="dialog-footer" style="display: flex; justify-content: flex-end">
+      <el-button @click="diaClose">取 消</el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { $redPackApi } from "@/api/red-pack.js";
+import { isNull } from "@/utils/validate.js";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        id: "",
+        name: "",
+        maxAmount: "",
+        random: "",
+        status: "",
+      },
+    };
+  },
+  methods: {
+    uploadSuccess(file) {
+      this.form.url = file.data;
+    },
+    open(item) {
+      console.log(item);
+      this.dialogVisible = true;
+      this.item = item;
+      this.form = {
+        ...item,
+      };
+    },
+    diaClose() {
+      this.dialogVisible = false;
+      for (let i in this.form) {
+        this.form[i] = "";
+      }
+    },
+    async confirm() {
+      const { name, maxAmount, random, status, id } = this.form;
+      console.log(this.form);
+      if (isNull(name)) {
+        return this.$message.error("描述不能为空");
+      }
+      if (isNull(maxAmount)) {
+        return this.$message.error("最大金额不能为空！");
+      }
+      if (isNull(random)) {
+        return this.$message.error("中奖不能为空！");
+      }
+      if (this.form.random > 1 || this.form.random < 0) {
+        return this.$message.error("概率为0-1");
+      }
+      const res = id
+        ? await $redPackApi.update(this.form)
+        : await $redPackApi.add(this.form);
+      console.log(res);
+      const { data, msg } = res;
+      if (data && data.code == 0) {
+        this.$message.success("修改成功");
+        this.$emit("refresh");
+        this.diaClose();
+      } else {
+        this.$message.error(msg || "操作失败！");
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-form-item__label {
+  text-align: left;
+}
+::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;
+  }
+}
+</style>

src/views/finance/financeList.vue

@@ -793,7 +793,11 @@
             <el-table-column label="名称" prop="name"></el-table-column>
             <el-table-column label="图片">
               <template slot-scope="scope">
-                <img style="width: 50px; height: 50px" v-if="scope.row.url" :src="scope.row.url" />
+                <img
+                  style="width: 50px; height: 50px"
+                  v-if="scope.row.url"
+                  :src="scope.row.url"
+                />
               </template>
             </el-table-column>
             <el-table-column label="类型">
@@ -829,22 +833,73 @@
           </el-table>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="现金红包抽奖金额配置" name="senven">
+        <div class="">
+          <div style="margin-bottom: 20px">
+            <el-button type="primary" @click="openPop('refAddRedPack')"
+              >添加</el-button
+            >
+          </div>
+          <el-table :border="true" :data="redPackData">
+            <el-table-column label="描述" prop="name"></el-table-column>
+            <el-table-column
+              label="最大金额"
+              prop="maxAmount"
+            ></el-table-column>
+            <el-table-column label="中奖概率">
+              <template slot-scope="scope">
+                <span>{{ scope.row.random }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否启用">
+              <template slot-scope="scope">
+                  <el-switch
+                    @change="redPackChangeStatus($event, scope.row)"
+                    v-model="scope.row.status"
+                    :inactive-value="0"
+                    :active-value="1"
+                  ></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="编辑">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="openPop('refAddRedPack', scope.row)"
+                  >编辑</el-button
+                >
+                <el-button type="text" size="mini" @click="depPopRedPack(scope.row)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
     </el-tabs>
 
     <pop-add-zhuanpan
       ref="refAddZhuanpan"
       @refresh="zhuanPanRefresh"
     ></pop-add-zhuanpan>
+    <pop-add-red-pack
+      ref="refAddRedPack"
+      @refresh="redpackRefresh"
+    ></pop-add-red-pack>
   </div>
 </template>
 
 <script>
 import $disc from "@/api/disc-spinning.js";
 import popAddZhuanpan from "./components/pop-add-zhuanpan.vue";
+import popAddRedPack from "./components/pop-add-redPack.vue";
+import { $redPackApi } from "@/api/red-pack.js";
 export default {
-  components: { popAddZhuanpan },
+  components: { popAddZhuanpan, popAddRedPack },
   data() {
     return {
+      redPackData: [],
       //抽奖转盘数据
       zhuanpanData: [],
       page: 1,
@@ -971,6 +1026,40 @@ export default {
     };
   },
   methods: {
+    depPopRedPack(item){
+      this.$confirm("是否删除该红包抽奖配置?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          $redPackApi.del(item.id).then((res) => {
+            const data = res.data;
+            if (data.code == 0) {
+              this.$message.success("删除成功");
+              this.redPackInit();
+            } else {
+              this.$message.error(data.msg || "删除失败");
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    async redPackChangeStatus(e,item){
+      console.log(e)
+      const res=await $redPackApi.update({...item,status:e})
+      if(res.data.code==0){
+        this.$message.success('修改成功')
+        this.redPackInit()
+      }else{
+        this.$message.error(res.data.msg || '修改失败')
+      }
+    },
+    redpackRefresh() {
+      this.page = 1;
+      this.limit = 10;
+      this.redPackInit();
+    },
     zhuanPanRefresh() {
       this.page = 1;
       this.limit = 10;
@@ -984,6 +1073,9 @@ export default {
       };
       return $types[type] ? $types[type] : "";
     },
+    openPop(key, item) {
+      this.$refs[key].open(item);
+    },
     // 转盘添加弹窗show
     refAddZhuanpanOpen(item) {
       this.$refs.refAddZhuanpan.open(item);
@@ -1299,6 +1391,14 @@ export default {
       });
       this.zhuanpanData = data.data.records;
     },
+    //现金红包抽奖配置数据初始化
+    async redPackInit() {
+      const { data } = await $redPackApi.getList({
+        page: this.page,
+        limit: this.limit,
+      });
+      this.redPackData = data.data.records;
+    },
     handleClick(tab, event) {
       this.orderId = "";
       this.userName = "";
@@ -1331,6 +1431,11 @@ export default {
         this.limit = 10;
         this.zhuanPanInit();
       }
+      if (tab._props.label == "现金红包抽奖金额配置") {
+        this.page = 1;
+        this.limit = 10;
+        this.redPackInit();
+      }
     },
     // 查询
     phoneSelect() {