增加任务中心

src/views/renwu/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="">
+    <el-button type="primary" @click="openAddZhuanpan">添加任务</el-button>
+    <div class="zhanwei"></div>
+    <el-table :border="true" :data="tableData">
+      <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">
+          <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-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>
+  </div>
+</template>
+
+<script>
+import $api from "@/api/renwu.js";
+import addRenwu from "./components/pop-add-renwu.vue";
+
+export default {
+  components: { addRenwu },
+  data() {
+    return {
+      total: 0,
+      tableData: [],
+      page: 1,
+      limit: 10,
+    };
+  },
+  methods: {
+    handleSizeChange() {
+      this.page = 1;
+      this.init();
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.init();
+    },
+    returnJumpTypeName(type) {
+      const $types = {
+        1: "内部路径",
+        2: "外部路径",
+        3: "内部tabbar页面",
+      };
+      return $types[type] ? $types[type] : "";
+    },
+    returnTypeName(type) {
+      const $types = {
+        1: "普通任务",
+        2: "打卡任务",
+        9: "其他",
+      };
+      return $types[type] ? $types[type] : "";
+    },
+    //数据初始化
+    async init() {
+      const { data } = await $api.getList({
+        page: this.page,
+        limit: this.limit,
+      });
+      this.tableData = data.data.records;
+      this.total = data.data.total;
+    },
+    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>