gaoyixia-pc/src/views/information/children/my-release.vue

<template>
  <div class="wrap">
    <div class="wrap-title">
      <TitleControl title="我的发布" :showSearch="false">
        <div slot="bottom" class="switch-box">
          <div class="btn" :class="{ select: !type }" @click="changeType(0)">
            审核成功
          </div>
          <div class="btn" :class="{ select: !!type }" @click="changeType(1)">
            其他
          </div>
        </div>
      </TitleControl>
    </div>
    <div class="wrap-content">
      <div class="list">
        <div class="list-item" v-for="item in list" :key="item.id">
          <div
            class="card"
            @click="
              handleToDetail(item, {
                id: 'id',
                datum_id: 'datum_id',
              })
            "
          >
            <MyReleaseFunCard :info="item" @handleDelete="handleDelete(item)" />
          </div>
        </div>
        <el-empty v-if="finished" description="没有更多数据"></el-empty>
      </div>
    </div>
    <ContactService v-model="contactVisible" content="下架资料需要联系客服！" />
  </div>
</template>

<script>
import MyReleaseFunCard from "@/components/card/information/my-release-card.vue";
import TitleControl from "@/components/module/title-control.vue";
import ContactService from "@/components/module/contact-service.vue";
import { mapState } from "vuex";
import { DatumService } from "@/common/service";
export default {
  components: { MyReleaseFunCard, TitleControl, ContactService },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        page_num: 20,
        sort_type: 1,
      },
      // 是否无数据
      finished: false,
      // 当前选中类型
      type: 0,
      // 联系客服弹窗
      contactVisible: false,
    };
  },
  computed: {
    ...mapState({
      videoMarkNum: (state) => state.mark_num.videoMarkNum, //直接拿到count数量
    }),
  },
  mounted() {
    this.getBoundList();
  },
  methods: {
    // 触底
    TouchBottom() {
      if (!this.finished) {
        !!this.type ? this.getMyList() : this.getBoundList();
      }
    },
    // 切换数据类型
    changeType(type) {
      this.type = type;
      this.list = [];
      this.params.page = 1;
      !!this.type ? this.getMyList() : this.getBoundList();
    },
    // 获取数据-后台绑定
    getBoundList() {
      DatumService.getBoundList(this.params).then(({ data }) => {
        const list = data.list.map((item) => {
          return { checked: false, ...item };
        });

        this.list = this.params.page === 1 ? list : [...this.list, ...list];
        if (list.length < this.params.page_num) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
    // 获取数据-我的发布
    getMyList() {
      DatumService.getMyDatumList(this.params).then(({ data }) => {
        const list = data.list.map((item) => {
          return { checked: false, ...item };
        });

        this.list = this.params.page === 1 ? list : [...this.list, ...list];
        if (list.length < this.params.page_num) {
          this.finished = true;
        } else {
          this.params.page++;
        }
      });
    },
    // 删除记录
    handleDelete(val) {
      if (!this.type) return (this.contactVisible = true);
      let that = this;
      this.showConfirmPopup("确定要删除该资料？")
        .then(() => {
          DatumService.batchesDel({ id: val.id, type: 5 }).then(({ data }) => {
            that.list.splice(
              that.list.findIndex((item) => item.id == val.id),
              1
            );
            this.$message.success("删除成功！");
          });
        })
        .catch((_) => {});
    },
    // 跳转详情
    handleToDetail(item, key = { id: "id", datum_id: "datum_id" }) {
      if (Object.keys(item).includes("is_normal") && !item.is_normal)
        return this.$message.error("该资料已下架");
      if (this.type && item.status != 1) return;
      this.$router.push({
        path: "/information-details",
        query: {
          url_id: item[key.id],
          id: item[key.datum_id],
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .wrap-title {
    width: 80%;
  }
  .wrap-content {
    width: 80%;
    margin-top: 20px;
    .list {
      .list-item {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        .card {
          width: 100%;
        }
      }
    }
  }
}
.switch-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
  .btn {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    background: #f4f4f4;
    border-radius: 22px;
    cursor: pointer;
    margin-right: 10px;
    position: relative;
    .mark {
      width: 36px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      transform: scale(0.7);
      font-size: 10px;
      font-weight: 400;
      color: #ffffff;
      background: #ff5143;
      border-radius: 8px;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
  .select {
    background: #2a63f3;
    color: #ffffff;
  }
}
</style>