index.vue

<template>
  <div class="lists">
    <div v-for="(item, index) of active" :key="index">
      <van-swipe-cell>
        <div class="list" @click="listClick(index, item)">
          <div class="list-logos">
            <img class="list-logo" :src="item.logo" />
          </div>
          <div class="list-infos">
            <div class="list-title">{{item.templateName}}</div>
            <div class="list-dsc">{{item.des}}</div>
          </div>
        </div>
        <template #right v-if="index > 1">
          <van-button square type="danger" text="删除" @click="deleteTemplate(item.id, index)" />
        </template>
      </van-swipe-cell>
    </div>
    <span class="more" v-if="active.length && !list_finished" @click="handleMore">
      查看更多
      <span class="icon">></span>
    </span>
  </div>
</template>

<script>
// ZKit
// const log = console.log.bind(console)
import * as API_Active from "@/api/active";
export default {
  name: "discountIndex",
  data() {
    return {
      list_finished: false,
      active: [
        {
          templateName: "大转盘活动",
          activityType: "wheel",
          logo: "/mainSale/icon-active-1.png",
          des: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
          reDirect: "turntableDetail"
        },
        {
          templateName: "送券活动",
          activityType: "coupon",
          logo: "/mainSale/icon-active-2.png",
          des: "有各种物质组成的举行球状天体，叫做星球。星球有一定的形状。",
          reDirect: "couponDetail"
        }
      ],
      params: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getTemplate(this.params);
  },
  methods: {
    deleteTemplate(tem_id, index) {
      API_Active.deleteTemplate(tem_id).then(res=>{
        if(res.result === 'success') {
          this.active.splice(index, 1);
          this.$toast('删除成功！');
        }
      })
    },
    handleMore() {
      this.params.pageNo += 1;
      this.getTemplate(this.params);
    },
    // 获取模板
    getTemplate(params) {
      API_Active.getTemplate(params).then(res => {
        this.active.push(...res.data.list);
        if (res.data.list === []) {
          this.list_finished = true;
        }
      });
    },
    listClick(inIndex, item) {
      // log('--->click: inIndex =', inIndex)
      // log('--->click: reDirect =', this.list.active[inIndex].reDirect)
      if (inIndex < 2) {
        this.$router.push(this.active[inIndex].reDirect);
      } else {
        this.$router.push({
          path: `/createBigWheelActive`,
          query: {
            activityId: item.activityId,
            activityType: item.activityType,
            templateId: item.id
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.more {
  font-size: 12px;
  float: right;
}

.lists {
  padding: 4px 16px 20px 16px;
}

.list {
  padding: 12px 0px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}

.list-logos {
  width: 80px;
  height: 80px;
  background-color: #f8f8f8;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-logo {
  width: 56px;
  height: 56px;
}

.list-infos {
  width: 251px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;

  margin-left: 12px;
}

.list-title {
  font-size: 14px;
  height: 16px;
  line-height: 16px;
  font-weight: bold;
  color: #2d476a;
  width: 100%;
  text-align: left;

  margin-bottom: 8px;
}

.list-dsc {
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #2d476a;
  width: 100%;
  text-align: left;
  overflow: auto;
}
</style>