h5-service-web/src/views/activity/drawPrize.vue

<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目奖品管理">
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <div style="display: flex;align-items: center;" v-show="!sysInfo">
            <span style="padding: 0 6px;word-break: keep-all;">
              项目
            </span>
            <Select v-model="select.activity_list_id" style="width: 180px;">
              <Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
              </Option>
            </Select>
          </div>
          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
          </div>

          <Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="doSearch">查询</Button>
          <Button style="margin-left: 10px" type="primary" @click="add">新增</Button>
        </div>
      </slot>
    </lx-header>


    <xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
      :total="total" @delete="deleteitem"
      @editor="(row)=>{$refs['addDrawPrize'].id = row.id;$refs['addDrawPrize'].isShow = true;$refs['addDrawPrize'].type = 'editor'}">
      <template v-slot:btns v-if="type==0 ">

      </template>
      <template v-slot:btns v-else>
        <el-table-column fixed="right" header-align="center" label="操作" width="200">
          <template #default="{ row }">
            <Poptip :transfer="true" confirm placement="bottom" title="确认要删除吗" @on-ok="deleteitem(row)">
              <Button ghost size="small" type="error">删除
              </Button>
            </Poptip>

            <Button style="margin-left: 4px;" size="small" type="primary" ghost
              @click="$refs['addDrawPrize'].id = row.id,$refs['addDrawPrize'].isShow = true,$refs['addDrawPrize'].type = 'editor'">编辑
            </Button>

            <Button v-if="row.activity_list_id === 8 && !(row.draw_logs_count > 0)" style="margin-left: 4px;" size="small" type="primary" ghost
              @click="toDraw(1,row)">抽奖
            </Button>

            <Button v-if="row.activity_list_id === 8 && (row.draw_logs_count > 0)" style="margin-left: 4px;" size="small" type="primary" ghost
              @click="toDraw(2,row)">中奖结果
            </Button>

          </template>
        </el-table-column>
      </template>
    </xy-table>
    <addDrawPrize ref="addDrawPrize" :listActivity="listActivity" @refresh="load()"></addDrawPrize>
  </div>
</template>

<script>
  import {
    index,
    destroy,
    show
  } from "@/api/activity/drawPrize";
  import {
    index as activityIndex
  } from "@/api/activity/index";


  import addDrawPrize from '@/views/activity/components/addDrawPrize'
  export default {
    components: {
      addDrawPrize
    },
    data() {
      return {
        sysInfo: null,
        select: {
          page: 1,
          page_size: 20,
          keyword: '',
          activity_list_id: ""
        },
        listActivity: [],
        total: 0,
        list: [],
        table: [{
            prop: 'activity_list.name',
            label: '项目名称',
            fixed: 'left',
            align: 'left'
          }, {
            prop: 'name',
            label: '奖品名称',
            align: 'left',


          }, {
            prop: 'total',
            label: '总数',
            align: 'right'
          },
          {
            prop: 'rate',
            label: '概率',
            align: 'right'
          }, {
            prop: 'has_total',
            label: '剩余数量',
            align: 'right'
          }, {
            prop: 'sort',
            label: '排序',
            align: 'right'
          }, {
            prop: 'money',
            label: '金额',
            align: 'right'
          },
          {
            prop: 'created_at',
            label: '创建信息',
            width: 190,
            formatter: (v1, v2, value) => {
              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
            }
          }
        ],
      }
    },
    methods: {
      toDraw (type = 1, row) {
        if (type === 1) {
          window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id}).href,'_blank')
        } else {
          window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id+'?result=1'}).href,'_blank')
        }
      },

      async loadActivity() {
        const res = await activityIndex({
          page: 1,
          page_size: 999
        })
        this.listActivity = res.data;
      },
      doSearch() {
        this.select.page = 1;
        this.load();
      },
      add() {
        this.$refs['addDrawPrize'].isShow = true
      },
      pageSizeChange(e) {
        this.select.page_size = e;
        this.select.page = 1;
        this.load();
      },
      async load(isLoading=true) {
        const res = await index(this.select,isLoading)
        this.total = res.total
        this.list = res.data
      },
      deleteitem(row) {
        destroy({
          id: row.id
        }).then(res => {
          this.load();
          this.$Message.success("操作成功");
        })
      },
      pageChange(e) {
        this.select.page = e
        this.load()
      },
    },
    mounted() {
      this.load();
      this.loadActivity()

      window.onfocus = () => {
        this.load(false);
      }
    },
    destroyed() {
      window.onfocus = null;
    },
    created() {
      let type = parseInt(this.$route.path.split("_")[1]);
      this.type = this.select.is_auth = type;

      let that = this;
      let sysInfo = sessionStorage.getItem('sys_info');
      console.log(sysInfo)
      if (sysInfo && sysInfo != "") {
        let _sys = JSON.parse(sysInfo);
        that.select.activity_list_id = _sys.id;
        that.sysInfo = _sys;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .selects {
    display: flex;
    flex-wrap: wrap;

    &>div {
      margin-bottom: 6px;
    }
  }
</style>