peko-admin-web/src/views/bravoGift/bravoGiftArrange.vue

<template>
    <div class="box">
      <div class="condition">
        <!-- 分区 -->
        <div class="inquire">
          <span>奖池</span>
          <el-select
            v-model="inquire.value"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in inquire.options"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </div>
      </div>
  
      <!-- 总分组 -->
      <div class="allArr">
        目前数组 <span>{{ allArr.length }} </span> 组:
        <span class="span" v-for="(item, index) in allArr" :key="index">
          {{ item.expect }},
        </span>
      </div>
  
      <!-- 数组设置 -->
      <div class="arrSet">数组设置：</div>
  
      <!-- 数组内容 -->
      <div class="boxs">
        <div class="arrContent" v-for="(item, index) in arr" :key="index">
          <div class="arrBox">
            <div class="left">
              <div class="left_in1">
                数组ID: <b class="b1">{{ item.id }}</b> ,
              </div>
              <div class="left_in1">
                期望: <b class="b1">{{ item.expect }}</b> ,
              </div>
              <div class="left_in2">
                得到率: <b class="b2">{{ (item.winRate * 100).toFixed(2) }}%</b> ,
              </div>
            </div>
            <div class="right" v-for="(arrInItem, i) in item.itemList" :key="i">
              <span>{{ arrInItem.multi }}</span>
              <el-input
                @input="handleInput(index, i, $event)"
                v-model="arrInItem.num"
                placeholder=""
                class="input"
              />
            </div>
          </div>
        </div>
      </div>
  
      <!-- 按钮 -->
      <div class="but">
        <el-button class="primary" type="primary" @click="saveFun()"
          >保存
        </el-button>
      </div>
    </div>
  </template>
  <script>
  import { listType, list, save } from "@/api/bravoGift/bravoGift";
  // @ts-ignore
  import { dateFormat } from "@/utils/system-helper";
  // @ts-ignore
  import { ElMessage } from "element-plus";
  import moment from "moment-timezone";
  export default {
    name: "bravoGiftArrange",
    data() {
      return {
        //查询所需条件对象
        inquire: {
          value: "",
          options: [],
        },
        allArr: [], //总数组
        arr: [], //处理下面总数组
      };
    },
    created() {
      listType().then((res) => {
        this.inquire.options = res.data;
        this.inquire.value = res.data[0].type;
        this.getData();
      });
    },
    methods: {
      // 查询接口
      getData() {
        list({ type: this.inquire.value }).then((res) => {
          this.allArr = res.data;
          this.arr = res.data;
        });
      },
      handleInput(index, i, val) {
        // 期望值 expectedvalue = 倍数 * 5 * num / 2500
        // 中奖率 winRate =不为θ的倍数的num / 500
        this.arr[index].expect = this.calculationFun(index, i, val).expect;
        this.arr[index].winRate = this.calculationFun(index, i, val).winRate;
      },
      // 计算函数
      calculationFun(index, i, val) {
        var expectNum = 0;
        var winRate = 0;
        this.arr[index].itemList.forEach((res) => {
          expectNum += res.multi * res.num;
          winRate += Number(res.num);
        });
        console.log(winRate);
        return {
          expect: (expectNum / 500).toFixed(2),
          winRate: (winRate / 500).toFixed(4),
        };
      },
      // 保存
      saveFun() {
        //
        save(
          JSON.stringify({ poolList: this.arr, type: this.inquire.value })
        ).then((res) => {
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: "保存成功",
              type: "success",
            });
            this.getData();
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      },
      // 监听类型
      handleChange(value) {
        this.inquire.value = value;
        this.getData();
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .box {
    padding-top: 20px;
    background: #ecf0f5;
    font-size: 18px;
    .condition {
      margin-bottom: 20px;
      .inquire {
        display: inline-block;
        margin-right: 20px;
        span {
          margin-right: 10px;
        }
        .input {
          width: 180px;
          margin-right: 10px;
        }
      }
    }
    .but {
      margin-bottom: 20px;
    }
    .allArr {
      margin: 20px 0 10px 0;
      span {
        color: red;
      }
      .span {
        margin: 0 10px;
      }
    }
    .arrSet {
      margin-bottom: 0px;
    }
    .boxs {
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .arrContent {
        // margin-bottom: 20px;
        width: 190px;
        // height: 395px;
        line-height: 30px;
        margin-bottom: 20px;
        .arrBox {
          .left {
            // float: left;
            div {
              min-width: 100px;
              display: block;
              // margin-bottom: -25px;
              .b1 {
                color: red;
              }
              .b2 {
                color: blue;
              }
            }
            .left_in2 {
              margin-bottom: 10px
            }
          }
          .right {
            float: left;
            margin-bottom: 15px;
            span {
              display: inline-block;
              width: 45px;
            }
            .input {
              display: inline-block;
              width: 100px;
              margin-right: 10px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
  </style>