activeList.vue

<template>
  <div class="container">
    <div v-if="wheelList.length > 0" class="title">
      <span>大转盘抽奖</span>
    </div>
    <div class="active">
      <template v-for="(item, index) in wheelList">
        <van-swipe-cell v-if="index < wheelActive_limit" :key="index">
          <div class="list" @click="toDetail(item.id, item.activityType)">
            <div class="left">
              <img :src="item.logo" alt="logo" style="width:100%;height:100%;" />
            </div>
            <div class="right">
              <h3>{{ item.activityName }}</h3>
              <p>{{ item.des }}</p>
            </div>
          </div>
          <template #right v-if="flag == 1">
            <van-button square type="danger" text="删除" @click="deleteWheelAct(item.id, index)" />
          </template>
        </van-swipe-cell>
      </template>
      <span
        class="more"
        v-if="wheelList.length && !wheelList_finished"
        @click="handleActiveMore('wheel')"
      >
        查看更多
        <span class="icon">></span>
      </span>
    </div>
    <div v-if="couponList.length > 0" class="fg">送券活动</div>
    <div class="active">
      <template v-for="(item, index) in couponList">
        <van-swipe-cell v-if="index < couponActive_limit" :key="index">
          <div class="list" @click="toDetail(item.id, item.activityType)">
            <div class="left">
              <img :src="item.logo" alt="logo" style="width:100%;height:100%;" />
            </div>
            <div class="right">
              <h3>{{ item.activityName }}</h3>
              <p>{{ item.des }}</p>
            </div>
          </div>
          <template #right v-if="flag == 1">
            <van-button square type="danger" text="删除" @click="deleteCouponAct(item.id, index)" />
          </template>
        </van-swipe-cell>
      </template>
      <span
        class="more"
        v-if="couponList.length && !couponList_finished"
        @click="handleActiveMore('coupon')"
      >
        查看更多
        <span class="icon">></span>
      </span>
    </div>
  </div>
</template>

<script>
import * as API_Active from "@/api/active";
export default {
  data() {
    return {
      flag: 2,
      wheelActive_limit: 3,
      wheelList_finished: false,
      couponActive_limit: 3,
      couponList_finished: false,
      wheelList: [],
      couponList: [],
      wheel_params: {
        pageNo: 1,
        pageSize: 3,
        oyStallCode: sessionStorage.getItem("oyStallCode")
      },
      coupon_params: {
        pageNo: 1,
        pageSize: 3,
        oyStallCode: sessionStorage.getItem("oyStallCode")
      }
    };
  },
  mounted() {
    this.getWheelActive();
    this.getCouponActive();
    this.flag = sessionStorage.getItem("role");
  },
  methods: {
    deleteCouponAct(id, index) {
      API_Active.deleteActive(id).then(res => {
        if (res.result === "success") {
          this.couponList.splice(index, 1);
          this.$toast("删除成功！");
        }
      });
    },
    deleteWheelAct(id, index) {
      API_Active.deleteActive(id).then(res => {
        if (res.result === "success") {
          this.wheelList.splice(index, 1);
          this.$toast("删除成功！");
        }
      });
    },
    async getCouponActive() {
      let res = await this.getActiveList("coupon");
      this.couponList.push.apply(this.couponList, res.data.list);
      if (res.data.list === []) {
        this.couponList_finished = true;
      }
    },
    async getWheelActive() {
      let res = await this.getActiveList("wheel");
      this.wheelList.push.apply(this.wheelList, res.data.list);
      if (res.data.list === []) {
        this.wheelList_finished = true;
      }
    },
    handleActiveMore(type) {
      if (type === "wheel") {
        this.wheelActive_limit += 3;
        this.wheel_params.pageNo += 1;
        this.getWheelActive();
      } else if (type === "coupon") {
        this.couponActive_limit += 3;
        this.coupon_params.pageNo += 1;
        this.getCouponActive();
      }
    },
    // 获取 活动列表
    async getActiveList(type) {
      let page_params = {};
      if (type === "wheel") {
        page_params = this.wheel_params;
      } else if (type === "coupon") {
        page_params = this.coupon_params;
      }
      let params = {
        activityType: type,
        ...page_params
      };
      let res = await API_Active.getActiveList(params);
      return res;
    },
    // 跳转到 活动详情
    toDetail(active_id, type) {
      this.$router.push({
        path: "/activeDetail",
        query: {
          id: active_id,
          active_type: type
        }
      });
    }
  }
};
</script>

<style scoped>
.more {
  float: right;
  margin-bottom: 5px;
  font-size: 12px;
}
.container {
  height: auto;
  background-color: rgba(248, 248, 248, 1);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.title {
  height: 44px;
  background: rgba(248, 248, 248, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  color: rgba(45, 71, 106, 1);
}
.fg {
  padding: 0 16px;
  font-size: 12px;
  color: rgba(45, 71, 106, 1);
  height: 44px;
  line-height: 44px;
}
.icon {
  font-weight: 800;
}
.active {
  background-color: #fff;
  padding: 12px 12px 0 12px;
  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.list {
  height: 94px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  margin-bottom: 14px;
}
.list3 {
  border-bottom: none;
  margin-bottom: 0;
}
.left,
.right {
  height: 80px;
}
.left {
  width: 80px;
  background: rgba(248, 248, 248, 1);
}
.right {
  width: 76%;
  padding-left: 10px;
  background-color: #fff;
}
h3 {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
}
p {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(45, 71, 106, 0.8);
}
</style>