diff --git a/src/api/common/gift.js b/src/api/common/gift.js
new file mode 100644
index 0000000..3215b8b
--- /dev/null
+++ b/src/api/common/gift.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export const getGiftList = query => {
+    return request({
+        url: '/admin/gift/getAll',
+        method: 'get',
+        params: query
+    });
+};
\ No newline at end of file
diff --git a/src/api/lucky/luckyGiftRangeConfig.js b/src/api/lucky/luckyGiftRangeConfig.js
new file mode 100644
index 0000000..f91ad1c
--- /dev/null
+++ b/src/api/lucky/luckyGiftRangeConfig.js
@@ -0,0 +1,80 @@
+import request from '@/utils/request';
+import { genQueryParam } from '@/utils/maintainer';
+
+export const getLuckyGiftRangeConfigList = query => {
+    return request({
+        url: '/admin/luckyGiftRangeConfig/list',
+        method: 'get',
+        params: query
+    });
+};
+
+export const saveLuckyGiftRangeConfig = data => {
+    return request({
+        url: '/admin/luckyGiftRangeConfig/save',
+        method: 'post',
+        data: data
+    });
+};
+
+// 获取礼物
+export const getAll = query => {
+    return request({
+        url: '/admin/gift/getAll',
+        method: 'get',
+        params: query
+    });
+};
+// 获取礼物区间
+export const luckyGiftRangeConfigList = query => {
+    return request({
+        url: '/admin/luckyGiftRangeConfig/list',
+        method: 'get',
+        params: query
+    });
+};
+// 幸运礼物配置列表
+export const luckyGiftRewardList = query => {
+    return request({
+        url: '/admin/luckyGiftReward/list',
+        method: 'get',
+        params: query
+    });
+};
+// 幸运礼物配置删除
+export const luckyGiftRewardDelete = query => {
+    return request({
+        url: '/admin/luckyGiftReward/delete',
+        method: 'get',
+        params: query
+    });
+};
+// 幸运礼保存列表
+export const luckyGiftRewardSave = query => {
+    return request({
+        url: '/admin/luckyGiftReward/save',
+        method: 'post',
+        params: query
+    });
+};
+// 幸运礼物明细
+export const getGiftSendPage = query => {
+    return request({
+        url: '/admin/luckyGiftRewardRecord/getGiftSendPage',
+        method: 'get',
+        params: query
+    });
+};
+// 幸运礼物详情
+export const getRewardList = query => {
+    return request({
+        url: '/admin/luckyGiftRewardRecord/getRewardList',
+        method: 'get',
+        params: query
+    });
+};
+// 幸运礼物详情导出 
+export const luckyGiftRewardRecordExport = query => {
+    window.location.href = `/admin/luckyGiftRewardRecord/export?${genQueryParam(query)}`;
+    return;
+};
diff --git a/src/views/lucky/LuckyGiftDetail.vue b/src/views/lucky/LuckyGiftDetail.vue
new file mode 100644
index 0000000..a4c64b4
--- /dev/null
+++ b/src/views/lucky/LuckyGiftDetail.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="outer">
+    <!-- 查询 -->
+    <div class="inquire" style="display: inline-block; margin-right: 20px">
+      <span class="demonstration">选择礼物</span>
+      <el-select v-model="inquire.giftId" placeholder="请选择">
+        <el-option
+          v-for="item in inquire.gifts"
+          :key="item.giftId"
+          :label="item.giftName"
+          :value="item.giftId"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="inquire" style="display: inline-block; margin-right: 120px">
+      <span class="demonstration" style="display: inline-block">送礼用户ID</span>
+      <el-input
+        style="display: inline-block"
+        v-model="inquire.senUserId"
+        placeholder=""
+        class="input"
+      ></el-input>
+    </div>
+    <!-- 查询按钮 -->
+    <el-button style="" type="primary" @click="getData()">查询</el-button>
+    <el-button style="" type="primary" @click="exportDate()">导出</el-button>
+  </div>
+
+  <!-- 表格 -->
+  <el-table
+    v-loading="loading"
+    :data="tableData"
+    border
+    style="width: 100%; margin-top: 25px"
+  >
+    <el-table-column prop="createTime" align="center" label="时间" />
+    <el-table-column prop="sendErBanNo" align="center" label="送礼人ID" />
+    <el-table-column prop="sendNick" align="center" label="送礼人昵称" />
+    <el-table-column prop="giftName" align="center" label="送礼名称" />
+    <el-table-column prop="giftPrice" align="center" label="礼物单价" />
+    <el-table-column prop="giftNum" align="center" label="礼物个数" />
+    <el-table-column prop="totalGoldNum" align="center" label="总价值" />
+    <el-table-column prop="receiveErBanNo" align="center" label="收礼人ID" />
+    <el-table-column prop="receiveNick" align="center" label="收礼人昵称" />
+    <el-table-column align="center" label="获得奖励数额" width="">
+      <template v-slot="scope">
+        <el-button @click="edi(scope.row)" class="primary" type="text" size="small"
+          >获得奖励数额：{{ scope.row.rewardAmount }}</el-button
+        >
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <!-- 分页 -->
+  <el-pagination
+    style="margin-top: 10px"
+    class="paginationClass"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
+    layout="sizes, prev, pager, next"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+
+  <!-- 详情 -->
+  <el-dialog v-model="detailsDialog" title="奖励详情" width="30%" center>
+    <!-- 内表格 -->
+    <el-table
+      v-loading="loading"
+      :data="tableDataIn"
+      border
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="rewardName" align="center" label="奖励内容" />
+      <el-table-column prop="rewardValue" align="center" label="单价" />
+      <el-table-column prop="rewardNum" align="center" label="个数" />
+      <el-table-column prop="totalRewardNum" align="center" label="总价值" />
+    </el-table>
+    <!-- 操作 -->
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" class="primary" @click="detailsDialog = false"
+          >关闭</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {
+  getGiftSendPage,
+  getAll,
+  getRewardList,
+  luckyGiftRewardRecordExport,
+} from "@/api/lucky/luckyGiftRangeConfig";
+import { ElMessage } from "element-plus";
+export default {
+  name: "LuckyGiftDetail",
+  data() {
+    return {
+      loading: false,
+      // 查询条件
+      inquire: {
+        gifts: [],
+        giftId: "",
+        senUserId: "",
+      },
+      // 表格
+      tableData: [],
+      // 分页
+      total: 10, //总页数
+      currentPage: 1, //页码
+      pageSize: 10, //条数
+      //   内表格
+      detailsDialog: false,
+      tableDataIn: [],
+    };
+  },
+  created() {
+    getAll({ giftType: 16 }).then((res) => {
+      this.inquire.gifts = res.data;
+      this.inquire.giftId = res.data[0].giftId;
+    });
+    this.getData();
+  },
+  methods: {
+    // 查询
+    getData() {
+      this.loading = true;
+      getGiftSendPage({
+        page: this.currentPage,
+        pageSize: this.pageSize,
+        giftId: this.inquire.giftId,
+        sendErBanNo: this.inquire.senUserId,
+      }).then((res) => {
+        this.total = res.data.total;
+        this.tableData = res.data.records;
+        this.loading = false;
+      });
+    },
+    // 详情
+    edi(val) {
+      getRewardList({ giftSendRecordId: val.giftSendRecordId }).then((res) => {
+        this.tableDataIn = res.data;
+        this.detailsDialog = true;
+      });
+    },
+    // 导出
+    exportDate() {
+        luckyGiftRewardRecordExport({
+        giftId: this.inquire.giftId,
+        sendErBanNo: this.inquire.senUserId,
+      }).then();
+    },
+    // 分页导航
+    handleSizeChange() {
+      this.getData(); 
+    },
+    handleCurrentChange() {
+      this.getData();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.outer {
+  padding-top: 20px;
+  background: #ecf0f5;
+  border-top: 3px solid #d2d6de;
+  .demonstration {
+    margin-right: 20px;
+  }
+  .inquire {
+    display: flex;
+    justify-content: space-between;
+    white-space: nowrap;
+  }
+  .search {
+    width: 100%;
+    height: 41px;
+    .searchLeft,
+    .searchRight {
+      width: 20%;
+      float: left;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 75%;
+      }
+    }
+  }
+  .buttonBox {
+    margin-top: 10px;
+  }
+  .authorityBox {
+    .authoritySpan {
+      margin-right: 20px;
+    }
+    .authorityInpput {
+      width: 50%;
+    }
+  }
+  .dialogTableVisibleBut {
+    margin: -25px 0 20px 0px;
+  }
+}
+</style>
diff --git a/src/views/lucky/LuckyGiftRangeConfigView.vue b/src/views/lucky/LuckyGiftRangeConfigView.vue
new file mode 100644
index 0000000..561a260
--- /dev/null
+++ b/src/views/lucky/LuckyGiftRangeConfigView.vue
@@ -0,0 +1,325 @@
+<template>
+  <section class="content">
+    <div class="box box-primary">
+      <section class="content-header">
+        <h1 id="itemTitle"></h1>
+      </section>
+      <section>
+        <div id="toolbar">
+          <div class="col-sm-12">
+            <label for="giftId" class="col-sm-3 control-label">选择礼物:</label>
+            <div class="col-sm-3">
+              <select name="giftId" id="giftId" class="form-control" @change="renderTableInfo"></select>
+            </div>
+          </div>
+        </div>
+      </section>
+      <br />
+      <br />
+      <section class="content">
+        <div class="group-table-section">
+          <div class="group-wrapper js-group-wrapper">
+            <div class="header-wrapper">
+              <div class="title">幸运礼物区间</div>
+              <div class="right-content js-no-editing">
+                <div class="action-btn-wrap">
+                  <button class="btn btn-primary js-edit-group">编辑</button>
+                </div>
+              </div>
+              <div class="right-content right-content-edit js-editing">
+                <div class="action-btn-wrap">
+                  <button class="btn btn-primary js-add">新增</button>
+                  <button class="btn btn-danger js-edit">保存</button>
+                  <button class="btn btn-default js-cancel">取消</button>
+                </div>
+              </div>
+            </div>
+            <table class="group-table table table-hover table-striped">
+              <tr>
+                <th>刷礼个数大于等于</th>
+                <th>刷礼个数小于</th>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </section>
+    </div>
+  </section>
+
+  <!-- 添加弹窗 -->
+  <div
+    class="modal fade"
+    id="addModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="modalLabel"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">x</span>
+          </button>
+          <h4 class="modal-title" id="addModalLabel">刷礼区间配置</h4>
+        </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <div class="form-group">
+              <label for="minValue" class="col-sm-3 control-label"
+                >刷礼个数大于等于:</label
+              >
+              <div class="col-sm-8">
+                <input
+                  type="text"
+                  id="minValue"
+                  name="minValue"
+                  class="form-control validate[required]"
+                />
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="maxValue" class="col-sm-3 control-label">刷礼个数小于:</label>
+              <div class="col-sm-8">
+                <input type="text" id="maxValue" name="maxValue" class="form-control" />
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-default" type="button" id="addCancel">取消</button>
+          <button class="btn btn-primary" type="button" id="addSave">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getLuckyGiftRangeConfigList,
+  saveLuckyGiftRangeConfig,
+} from "@/api/lucky/luckyGiftRangeConfig";
+import { getGiftList } from "@/api/common/gift";
+import { buildSelectOption } from "@/utils/system-helper";
+import { apiResult } from "@/utils/maintainer";
+
+export default {
+  name: "LuckyGiftRangeConfigView",
+  data() {
+    return {
+      isEdit: false,
+      items: [],
+    };
+  },
+  setup() {
+    return {};
+  },
+  created() {
+    this.$nextTick(function () {
+      this.getGiftInfo();
+      this.initData();
+    });
+  },
+  methods: {
+    initData() {
+      let $this = this;
+      $(function () {
+        $("#addSave").click(function () {
+          $this.add();
+          $("#addModal").modal("hide");
+        });
+        $(".js-edit-group").click(function () {
+          $this.editTableInfo();
+          $this.renderTableInfo();
+        });
+        $(".js-add").click(function () {
+          $("#minValue").val("");
+          $("#maxValue").val("");
+          $("#addModal").modal("show");
+        });
+        $(".js-edit").click(function () {
+          $this.save();
+        });
+        $(".js-cancel").click(function () {
+          $this.disableTableInfo();
+          $this.renderTableInfo();
+        });
+      });
+    },
+    add() {
+      let minValue = $("#minValue").val();
+      let maxValue = $("#maxValue").val();
+      let item = {
+        minValue: minValue,
+        maxValue: maxValue,
+      };
+      this.items.splice(this.items.length, 0, item);
+      this.renderTableInfo();
+    },
+    save() {
+      let giftId = $("#giftId").val();
+      saveLuckyGiftRangeConfig({
+        giftId: giftId,
+        rangeConfigJson: JSON.stringify(this.items),
+      }).then((res) => {
+        apiResult(res);
+        this.disableTableInfo();
+        this.renderTableInfo();
+      });
+    },
+    editTableInfo() {
+      this.isEdit = true;
+    },
+    disableTableInfo() {
+      this.isEdit = false;
+    },
+    renderTableInfo() {
+      let $this = this;
+      let isEdit = this.isEdit;
+      let giftId = $("#giftId").val();
+      if (giftId == null) {
+        return;
+      }
+      let $jsNoEditing = $(".js-group-wrapper .js-no-editing");
+      let $jsEditing = $(".js-group-wrapper .js-editing");
+      if (isEdit) {
+        $jsNoEditing.hide();
+        $jsEditing.show();
+      } else {
+        $jsNoEditing.show();
+        $jsEditing.hide();
+      }
+      let $groupTable = $(".js-group-wrapper .group-table");
+      $(".js-group-wrapper .group-table input").unbind("change");
+      $(".js-group-wrapper .group-table .js-remove-item").unbind("click");
+      $groupTable.html(
+        "<thead><tr><th>刷礼个数大于等于</th><th>刷礼个数小于</th></tr></thead>"
+      );
+      $groupTable.append("<tbody>");
+      for (let i = 0, len = $this.items.length; i < len; i++) {
+        let item = $this.items[i];
+        let tds = [];
+        if (isEdit) {
+          tds.push(
+            `<td><input class="input-sm" name="minValue" data-idx="${i}" value="${item.minValue}"></td>`
+          );
+          tds.push(
+            `<td><input class="input-sm" name="maxValue" data-idx="${i}" value="${item.maxValue}"></td>`
+          );
+        } else {
+          tds.push(
+            `<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${i}"></i>${item.minValue}</td>`
+          );
+          tds.push(`<td>${item.maxValue}</td>`);
+        }
+        let row = `<tr>${tds.join()}</tr>`;
+        $groupTable.append(row);
+      }
+      $groupTable.append("</tbody>");
+      $(".js-group-wrapper .group-table input").bind("change", function (e) {
+        let target = e.target;
+        const index = $(target).attr("data-idx");
+        const propName = $(target).attr("name");
+        const inputValue = target.value;
+        $this.items[index][propName] = inputValue;
+        $this.renderTableInfo();
+      });
+      $(".js-group-wrapper .group-table .js-remove-item").bind("click", function (e) {
+        let target = e.target;
+        const index = new Number($(target).attr("data-idx"));
+        let items = $this.items;
+        if (items && items.length > index) {
+          let item = items[index];
+          if (item && item.isDefault == 1) {
+            $("#tipMsg").text("默认区间不允许删除");
+            $("#tipModal").modal("show");
+            return;
+          }
+        }
+        if (confirm("你确定要删除该礼物区间吗？")) {
+          items.splice(index, 1);
+          $this.renderTableInfo();
+        }
+      });
+    },
+    getTableInfo() {
+      let giftId = $("#giftId").val();
+      console.log(giftId);
+      if (giftId == null) {
+        return;
+      }
+      getLuckyGiftRangeConfigList({
+        giftId: giftId,
+      }).then((res) => {
+        this.items = res.data;
+        this.renderTableInfo();
+      });
+    },
+    getGiftInfo() {
+      let $this = this;
+      $("#giftId").children().remove();
+      getGiftList({
+        giftType: 16,
+      }).then((res) => {
+        let data = res.data;
+        
+        if (data.length > 0) {
+          buildSelectOption(
+            "#giftId",
+            data[0].giftId,
+            data.map((v) => {
+              return {
+                value: v.giftId,
+                text: v.giftName,
+              };
+            })
+          );
+          $this.getTableInfo();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.group-table-section {
+  display: flex;
+  width: 100%;
+}
+
+.group-table-section .group-wrapper {
+  width: 50%;
+}
+
+.group-wrapper .header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  max-width: 512px;
+}
+
+.group-wrapper .header-wrapper .title {
+  font-size: 20px;
+}
+
+.group-wrapper .header-wrapper .right-content {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.group-wrapper .header-wrapper .right-content.right-content-edit {
+  display: none;
+}
+
+.group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
+  margin-right: 10px;
+}
+
+.group-wrapper .group-table {
+  margin-top: 12px;
+  margin-right: 10px;
+  max-width: 1024px;
+  color: red;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/lucky/LuckyGiftRangeView.vue b/src/views/lucky/LuckyGiftRangeView.vue
new file mode 100644
index 0000000..5798484
--- /dev/null
+++ b/src/views/lucky/LuckyGiftRangeView.vue
@@ -0,0 +1,514 @@
+<template>
+  <div class="outer">
+    <!-- new -->
+    <!-- 查询 -->
+    <div class="inquire" style="display: inline-block; margin-right: 20px">
+      <span class="demonstration">选择礼物</span>
+      <el-select v-model="inquire.value1" placeholder="请选择">
+        <el-option
+          v-for="(item, i) in inquire.gifts"
+          :key="i"
+          :label="item.giftName"
+          :value="item.giftId"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="inquire" style="display: inline-block; margin-right: 20px">
+      <span class="demonstration">选择礼物个数区间</span>
+      <el-select v-model="inquire.value2" placeholder="请选择">
+        <el-option
+          v-for="(item, i) in inquire.giftsNum"
+          :key="i"
+          :label="item.minValue + '~' + item.maxValue"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <!-- 查询按钮 -->
+    <el-button style="" type="primary" @click="getData()">查询</el-button>
+    <el-button style="" type="primary" @click="addGift()">新增礼物</el-button>
+    <br />
+    <br />
+    <!-- 礼物价值 -->
+    <div class="inquire" style="display: inline-block; margin-right: 20px">
+      <span class="demonstration">礼物价值：{{ inquire.diamond }}钻</span>
+    </div>
+    <!-- 礼物总期望 -->
+    <div class="inquire" style="display: inline-block; margin-right: 20px">
+      <span class="demonstration">礼物总期望：{{ inquire.giftExpectation }}钻</span>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      border
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="rewardName" align="center" label="奖品名称" />
+      <el-table-column prop="rewardType" align="center" label="奖品分类">
+        <template v-slot="scope">
+          {{ scope.row.rewardType == 1 ? "钻石" : "礼物" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="stockNum" align="center" label="库存" />
+      <el-table-column prop="platformValue" align="center" label="平台价值" />
+      <el-table-column prop="rewardRate" align="center" label="获奖概率" />
+      <el-table-column prop="showRate" align="center" label="展示概率" />
+      <el-table-column prop="expectValue" align="center" label="期望" />
+      <el-table-column prop="rewardCount" align="center" label="累计获得数量">
+        <template v-slot="scope">
+          {{ scope.row.rewardCount ? scope.row.rewardCount : "-" }}
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="300">
+        <template v-slot="scope">
+          <el-button
+            @click="
+              this.dialogBool = false;
+              this.detailsTitle = '编辑';
+              edi(scope.row);
+            "
+            class="primary"
+            type="primary"
+            size="default"
+            >编辑</el-button
+          >
+          <el-button @click="del(scope.row)" class="danger" type="danger" size="default"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      v-show="false"
+      style="margin-top: 10px"
+      class="paginationClass"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
+      layout="sizes, prev, pager, next"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog v-model="detailsDialog" :title="detailsTitle" width="20%" center>
+      <!-- 内容 -->
+      <div class="inquire" style="display: inline-block; margin-bottom: 20px">
+        <span class="demonstration" style="margin-right: 55px">奖品分类</span>
+        <el-select @change="selectArea()" v-model="dialog.value1" placeholder="请选择">
+          <el-option
+            v-for="(item, i) in dialog.gifts"
+            :key="i"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+
+      <div
+        v-show="dialog.value1 == 2 || dialog.value1 == '礼物' ? true : false"
+        class="inquire"
+        style="display: inline-block; margin-bottom: 20px"
+      >
+        <span class="demonstration" style="margin-right: 55px">选择礼物</span>
+        <el-select v-model="dialog.value2" filterable placeholder="请选择">
+          <el-option
+            v-for="(item, i) in dialog.gifts2"
+            :key="i"
+            :label="item.giftName"
+            :value="i"
+          >
+          </el-option>
+        </el-select>
+      </div>
+
+      <div
+        v-show="dialog.value1 == 1 || dialog.value1 == '钻石' ? true : false"
+        class="inquire"
+        style="display: flex; margin-bottom: 20px"
+      >
+        <span class="demonstration">奖励钻石数</span>
+        <el-input
+          style="width: 220px; display: inline-block"
+          v-model="dialog.diamond"
+          placeholder="请输入钻石数"
+          class="input"
+        ></el-input>
+      </div>
+
+      <div
+        v-if="dialog.value1 == 2 || dialog.value1 == '礼物' ? true : false"
+        class="inquire"
+        style="display: flex; margin-bottom: 20px"
+      >
+        <span class="demonstration">价值</span>
+        <el-input
+          :disabled="true"
+          style="width: 220px; display: inline-block"
+          v-model="dialog.gifts2[dialog.value2].goldPrice"
+          placeholder="请先选择礼物"
+          class="input"
+        ></el-input>
+      </div>
+
+      <div class="inquire" style="display: flex; margin-bottom: 20px">
+        <span class="demonstration">获得概率</span>
+        <el-input
+          style="width: 220px; display: inline-block"
+          v-model="dialog.gitChance"
+          placeholder=""
+          class="input"
+        ></el-input>
+      </div>
+
+      <div class="inquire" style="display: flex; margin-bottom: 20px">
+        <span class="demonstration">展示概率</span>
+        <el-input
+          style="width: 220px; display: inline-block"
+          v-model="dialog.showChance"
+          placeholder=""
+          class="input"
+        ></el-input>
+      </div>
+
+      <div class="inquire" style="display: flex; margin-bottom: 20px">
+        <span class="demonstration">库存</span>
+        <el-input
+          style="width: 220px; display: inline-block"
+          v-model="dialog.inventory"
+          placeholder=""
+          class="input"
+        ></el-input>
+      </div>
+      <!-- 操作 -->
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailsDialog = false">关闭</el-button>
+          <el-button type="primary" @click="share()"> 确认 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getAll,
+  luckyGiftRangeConfigList,
+  luckyGiftRewardList,
+  luckyGiftRewardSave,
+  luckyGiftRewardDelete,
+} from "@/api/lucky/luckyGiftRangeConfig";
+import { ElMessage, ElMessageBox } from "element-plus";
+export default {
+  name: "LuckyGiftRangeView",
+  data() {
+    return {
+      loading: false,
+      // 查询条件
+      inquire: {
+        gifts: [],
+        giftsNum: [],
+        diamond: 0,
+        giftExpectation: 0,
+        value1: "",
+        value2: "",
+      },
+      // 表格
+      tableData: [],
+      // 分页
+      total: 10, //总页数
+      currentPage: 1, //页码
+      pageSize: 10, //条数
+      //   弹窗
+      detailsDialog: false,
+      detailsTitle: "新增",
+      dialogBool: true,
+      dialog: {
+        gifts: [
+          {
+            value: "1",
+            label: "钻石",
+          },
+          {
+            value: "2",
+            label: "礼物",
+          },
+        ],
+        value1: "1",
+        gifts2: [
+          {
+            giftName: "",
+            goldPrice: "",
+            giftId: "",
+          },
+        ],
+        value2: 0,
+        diamond: "",
+        gitChance: "",
+        showChance: "",
+        inventory: "",
+        price: "",
+      },
+      id: "",
+    };
+  },
+  created() {
+    this.getFun();
+  },
+  methods: {
+    // 初始化
+    getFun() {
+      getAll({ giftType: 16 }).then((res) => {
+        this.inquire.gifts = res.data;
+        this.inquire.value1 = res.data[0].giftId;
+        luckyGiftRangeConfigList({ giftId: this.inquire.value1 }).then((res) => {
+          this.inquire.giftsNum = res.data;
+          this.inquire.value2 = res.data[0].id;
+          this.loading = true;
+          luckyGiftRewardList({
+            giftId: this.inquire.value1,
+            rangeId: this.inquire.value2,
+          }).then((res) => {
+            this.inquire.diamond = res.data.giftPrice;
+            this.inquire.giftExpectation = res.data.expectValue;
+            this.tableData = res.data.list;
+            this.loading = false;
+          });
+        });
+      });
+    },
+    // 监听弹窗数值变化1
+    selectArea() {
+      if (this.dialog.value1 == 2) {
+        ElMessage({
+          showClose: true,
+          message: "数据加载中,请稍等~",
+          type: "warning",
+        });
+        getAll({ giftType: 2 }).then((res) => {
+          this.dialog.gifts2 = res.data;
+          ElMessage({
+            showClose: true,
+            message: "加载完成",
+            type: "success",
+          });
+        });
+      }
+    },
+    // 查询
+    getData() {
+      if (this.inquire.value1 == "") {
+        ElMessage({
+          showClose: true,
+          message: "请先选择礼物",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.inquire.value2 == "") {
+        ElMessage({
+          showClose: true,
+          message: "请再次选择礼物个数区间",
+          type: "warning",
+        });
+        return;
+      }
+      luckyGiftRewardList({
+        giftId: this.inquire.value1,
+        rangeId: this.inquire.value2,
+      }).then((res) => {
+        this.inquire.diamond = res.data.giftPrice;
+        this.inquire.giftExpectation = res.data.expectValue;
+        this.tableData = res.data.list;
+        // this.inquire.value1 = "";
+        // this.inquire.value2 = "";
+      });
+    },
+    // 新增
+    addGift() {
+      this.detailsTitle = "新增";
+      this.detailsDialog = true;
+      this.dialogBool = true;
+    },
+    //编辑
+    edi(val) {
+      this.dialog.value1 = val.rewardType == 1 ? "钻石" : "礼物";
+      this.dialog.gitChance = val.rewardRate;
+      this.dialog.showChance = val.showRate;
+      this.dialog.inventory = val.stockNum;
+      this.id = val.id;
+      if (val.rewardType == 1) {
+        this.dialog.diamond = val.rewardValue;
+        this.detailsDialog = true;
+      } else {
+        ElMessage({
+          showClose: true,
+          message: "数据加载中,请稍等~",
+          type: "warning",
+        });
+        getAll({ giftType: 2 }).then((res) => {
+          ElMessage({
+            showClose: true,
+            message: "加载完成",
+            type: "success",
+          });
+          this.dialog.gifts2 = res.data;
+          var index = this.dialog.gifts2.findIndex((item) => {
+            return item.giftName == val.rewardName;
+          });
+          this.dialog.value2 = index;
+          this.detailsDialog = true;
+        });
+      }
+    },
+    // 确认编辑或新增
+    share() {
+      console.log(this.dialog);
+      var obj = {};
+      // 新增
+      if (this.dialogBool) {
+        if (this.dialog.value1 == 1) {
+          obj = {
+            rewardType: this.dialog.value1,
+            rewardValue: this.dialog.diamond,
+            rewardRate: this.dialog.gitChance,
+            showRate: this.dialog.showChance,
+            stockNum: this.dialog.inventory,
+            giftId: this.inquire.value1,
+            rangeId: this.inquire.value2,
+          };
+        } else {
+          obj = {
+            rewardType: this.dialog.value1,
+            rewardValue: this.dialog.gifts2[this.dialog.value2].giftId,
+            rewardRate: this.dialog.gitChance,
+            showRate: this.dialog.showChance,
+            stockNum: this.dialog.inventory,
+            giftId: this.inquire.value1,
+            rangeId: this.inquire.value2,
+          };
+        }
+        this.dialog.gitChance = "";
+        this.dialog.showChance = "";
+        this.dialog.inventory = "";
+        this.dialog.diamond = "";
+        this.dialog.value2 = 0;
+      } else {
+        if (this.dialog.value1 == 1 || this.dialog.value1 == "钻石") {
+          obj = {
+            rewardType: this.dialog.value1 == "钻石" ? 1 : 2,
+            rewardValue: this.dialog.diamond,
+            rewardRate: this.dialog.gitChance,
+            showRate: this.dialog.showChance,
+            stockNum: this.dialog.inventory,
+            giftId: this.inquire.value1,
+            rangeId: this.inquire.value2,
+            id: this.id,
+          };
+        } else {
+          obj = {
+            rewardType: this.dialog.value1 == "钻石" ? 1 : 2,
+            rewardValue: this.dialog.gifts2[this.dialog.value2].giftId,
+            rewardRate: this.dialog.gitChance,
+            showRate: this.dialog.showChance,
+            stockNum: this.dialog.inventory,
+            giftId: this.inquire.value1,
+            rangeId: this.inquire.value2,
+            id: this.id,
+          };
+        }
+      }
+      luckyGiftRewardSave(obj).then((res) => {
+        if (res.code == 200) {
+          ElMessage({
+            showClose: true,
+            message: "保存成功",
+            type: "success",
+          });
+        } else {
+          ElMessage({
+            showClose: true,
+            message: res.message,
+            type: "danger",
+          });
+        }
+        this.detailsDialog = false;
+      });
+      this.getFun();
+    },
+    //删除
+    del(val) {
+      ElMessageBox.confirm("此操作将永久删除该, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error",
+      })
+        .then(() => {
+          luckyGiftRewardDelete({ id: val.id }).then((res) => {
+            this.getFun();
+          });
+        })
+        .catch(() => {});
+    },
+    // 分页导航
+    handleSizeChange() {
+      this.getData();
+    },
+    handleCurrentChange() {
+      this.getData();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.outer {
+  padding-top: 20px;
+  background: #ecf0f5;
+  border-top: 3px solid #d2d6de;
+  .demonstration {
+    margin-right: 20px;
+  }
+  .inquire {
+    display: flex;
+    justify-content: space-between;
+  }
+  .search {
+    width: 100%;
+    height: 41px;
+    .searchLeft,
+    .searchRight {
+      width: 20%;
+      float: left;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 75%;
+      }
+    }
+  }
+  .buttonBox {
+    margin-top: 10px;
+  }
+  .authorityBox {
+    .authoritySpan {
+      margin-right: 20px;
+    }
+    .authorityInpput {
+      width: 50%;
+    }
+  }
+  .dialogTableVisibleBut {
+    margin: -25px 0 20px 0px;
+  }
+}
+</style>