video_admin/src/views/renwu/index.vue

<template>
  <div class="">
    <el-tabs v-model="tabActive">
      <el-tab-pane label="任务" name="renwu"></el-tab-pane>
      <el-tab-pane label="兑换" name="exchang"></el-tab-pane>
    </el-tabs>
    <div v-if="tabActive == 'renwu'">
      <el-button type="primary" @click="openAddZhuanpan">添加任务</el-button>
      <div class="zhanwei"></div>
      <el-table :border="true" :data="tableData">
        <el-table-column prop="sort" label="排序" sortable width="50">
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>

        <el-table-column label="任务类型">
          <template slot-scope="scope">
            <span>{{ returnTypeName(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情描述">
          <template slot-scope="scope">
            <span>{{ scope.row.detail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖励设置">
          <template slot-scope="scope">
            <div class="flex flex-center">
              <el-button type="text" size="mini" @click="opengiftList(scope.row)">编辑</el-button>
            </div>

            <!-- <span>{{ scope.row.rewardDetail }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="奖励描述">
          <template slot-scope="scope">
            <span>{{ scope.row.rewardDetail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖励图片">
          <template slot-scope="scope">
            <img style="width: 50px; height: 50px" v-if="scope.row.rewardImg" :src="scope.row.rewardImg" />
          </template>
        </el-table-column>
        <el-table-column label="达标次数">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 2">{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跳转类型">
          <template slot-scope="scope">
            <span>{{ returnJumpTypeName(scope.row.jumpType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跳转路径">
          <template slot-scope="scope">
            <span>{{ scope.row.buttonUrl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否展示">
          <template slot-scope="scope">
            <el-switch @change="showsChange($event, scope.row)" v-model="scope.row.shows" :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="openAddZhuanpan(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
          layout="total,sizes, prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
      <add-renwu ref="refRenwu" @refresh="init"></add-renwu>
      <gift-list ref="giftList" @refresh="init"></gift-list>
    </div>
    <div v-if="tabActive == 'exchang'">
      <record ref="record" />
    </div>
  </div>
</template>

<script>
import $api from "@/api/renwu.js";
import addRenwu from "./components/pop-add-renwu.vue";
import giftList from "./components/pop-gift-list.vue";
import record from "./components/record.vue";
import { $renwuType, $jumpType } from './data.js'

export default {
  components: { addRenwu, giftList, record },
  data() {
    return {
      tabActive: 'renwu',
      total: 0,
      tableData: [],
      page: 1,
      limit: 10,
      renType: $renwuType,
      jumpType: $jumpType,
    };
  },
  methods: {
    opengiftList(item) {
      this.$refs.giftList.open(item)
    },
    async showsChange(e, item) {
      console.log(e)
      const res = await $api.update({ ...item, shows: e })
      if (res.data.code == 0) {
        this.$message.success('修改成功')
        this.init()
      } else {
        this.$message.error(res.data.msg || '修改失败')
      }
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },
    returnJumpTypeName(type) {
      // console.log(type)
      // console.log($jumpType[type])
      return $jumpType[type] ? $jumpType[type] : "";
    },
    returnTypeName(type) {
      return $renwuType[type] ? $renwuType[type] : "";
    },
    //数据初始化
    async init() {
      const { data } = await $api.getList({
        page: this.page,
        limit: this.limit,
      });
      this.tableData = data.data.records;
      this.total = data.data.totalCount;
    },
    del(item) {
      this.$confirm("是否删除该任务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $api.del(item.id).then((res) => {
            const data = res.data;
            if (data.code == 0) {
              this.$message.success("删除成功");
              this.init();
            } else {
              this.$message.error(data.msg || "删除失败");
            }
          });
        })
        .catch(() => { });
    },
    openAddZhuanpan(item) {
      this.$refs.refRenwu.open(item);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.zhanwei {
  height: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
}
</style>