dy-admin-manager/src/views/app/entryActivities.vue

<template>
  <div class='m-container'>
    <h2>
      <div class="squrt"></div>时间充值活动
    </h2>
    <div class="m-core">
      <div @click="onChargeOperation('create')"
           v-permission="'/entryOperation'"
           class='newBand'>添加</div>
      <save-form :inline="true"
               :model="searchForm"
               @submit="search">
        <!-- <el-form-item>
          <el-select placeholder="请选择适用范围">
            <el-option value="NEW" label="新用户"></el-option>
            <el-option value="ALL" label="所有用户"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-select v-model="searchForm.delFlag"
                     clearable
                     placeholder="请选择活动状态">
            <el-option value="false"
                       label="启用"></el-option>
            <el-option value="true"
                       label="停止"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table :data="dataList"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align="center"
                           prop="id"
                           label="活动编号">
          </el-table-column>
          <el-table-column align="center"
                           prop="name"
                           label="活动名称">
          </el-table-column>
          <el-table-column align="center"
                           label="适用范围">
            <!-- NEW("NEW", "新手"), ALL("ALL", "全部"); -->
            <template slot-scope="scope">
              {{ scope.row.suitableUser == 'NEW' ? '新用户' : ''  }}
              {{ scope.row.suitableUser == 'ALL' ? '全部' : ''  }}
            </template>
          </el-table-column>
          <!-- <el-table-column  align="center" prop="tag"
                           label="活动类型">
          </el-table-column> -->
          <el-table-column align="center"
                           label="有效期"
                           width="225px">
            <template slot-scope="scope">
              开始时间：{{ scope.row.startDate }} <br /> 结束时间：{{ scope.row.endDate }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="价格/元">
            <template slot-scope="scope">
              原价：{{ scope.row.totalPrice }}元 <br /> 折扣价：{{ scope.row.discountPrice ? scope.row.discountPrice : 0 }}元
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="时间/分钟">
            <template slot-scope="scope">
              购买：{{ scope.row.purchaseMinutes }}分钟 <br /> 赠送：{{ scope.row.giveMinutes ? scope.row.giveMinutes : 0 }}分钟
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="活动状态">
            <template slot-scope="scope">
              {{ scope.row.delFlag ? '停用' : '启用' }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         v-permission="'/entryOperationLook'"
                         @click="onChargeOperation('look', scope.row)">查看</el-button>
              <el-button v-permission="'tenantEntryActivities/updateDelFlag'"
                         @click="onChargeOperation('update', scope.row)"
                         type="text">{{ scope.row.delFlag ? '启用' : '停用' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination sync :total.sync="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>

    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getEntryActivities, getActivitieUpdateDelFlag } from '@/api/appTenant'
export default {
  components: { pagination },
  name: 'chargesList',
  data () {
    return {
      id: null,
      dataList: [],
      searchForm: {
        delFlag: null
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  activated () {
    this.getList()
  },
  mounted () {
    this.getList()
  },
  methods: {
    search() {
      this.pageInfo.page = 1
      this.getList()
    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success(title + '成功')
        this.chargeStatus = false
        this.getList()
      } else {
        this.$message.error(res.msg)
      }
    },
    onChargeOperation (type, row) {
      if (type == 'update') {
        let tempString = row.delFlag ? '启用' : '停用'
        this.$confirm(`是否${tempString}该活动?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getActivitieUpdateDelFlag({ delFlag: !row.delFlag, id: row.id }).then(res => {
            this.messageTips(tempString, res)
          })
        }).catch(() => {

        })
      } else if (type == 'create') {
        this.$router.push({
          path: '/insideSetting/entryOperation',
          query: {
            type: 'create'
          }
        }, (route) => {
          route.meta.title = '添加活动充值活动'
        })
      } else if (type == 'look') {
        this.$router.push({
          path: '/insideSetting/entryOperation',
          query: {
            id: row.id,
            type: 'look'
          }
        }, (route) => {
          route.meta.title = '查看活动充值活动'
        })
      }
    },
    getList () {
      let params = {
        delFlag: this.searchForm.delFlag ? this.searchForm.delFlag : null,
        rows: this.pageInfo.limit,
        page: this.pageInfo.page
      }
      getEntryActivities(params).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
/deep/.el-select {
  width: 98% !important;
}

/deep/.el-table {
  display: inline-block;
}
</style>