fangliaoxiaochengxv/subPages/coupon/coupon.vue

<template>
  <view class="coupon">
    <u-tabs
      class="coupon-tabs"
      lineColor="#F39800"
      :activeStyle="{
        color: '#F39800',
        fontWeight: 'bold',
      }"
      :current="currentTab"
      :list="tabs"
      @click="handleTabs"
    />
    <view class="list">
      <couponItem
        v-for="item in list"
        :key="item.id"
        :data="item"
        :config="itemConfig"
        @on-click="handleItem(item)"
      />
    </view>
  </view>
</template>

<script>
import couponItem from "./couponItem.vue";
import { getCouponList, getCoupon } from "@/common/api/coupon";

export default {
  components: {
    couponItem,
  },
  data() {
    const tabs = [
      {
        name: "未使用",
        type: "myUses",
        itemConfig: {
          btnText: "选择使用",
          disabled: false,
          btnPlain: true,
        },
      },
      {
        name: "已使用",
        type: "myUsed",
        itemConfig: {
          btnText: "已使用",
          disabled: true,
          btnPlain: false,
        },
      },
      {
        name: "已过期",
        type: "myExpired",
        itemConfig: {
          btnText: "已过期",
          disabled: true,
          btnPlain: false,
        },
      },
      {
        name: "可领取",
        type: "index",
        itemConfig: {
          btnText: "立即领取",
          disabled: false,
          btnPlain: false,
        },
      },
    ];
    return {
      currentTab: 0,
      tabs,
      list: [],
    };
  },
  computed: {
    activeTabItem() {
      return this.tabs[this.currentTab];
    },
    itemConfig() {
      return this.activeTabItem.itemConfig;
    },
  },
  onShow() {
    this._getCouponList();
  },
  methods: {
    _getCouponList() {
      console.log("this.activeTabItem", this.activeTabItem);
      getCouponList(this.activeTabItem.type, {
        page: 1,
        pageSize: 100,
      }).then(({ data = {} }) => {
        console.log("data=>getCouponList", data);
        this.list = data.list || [];
      });
    },
    handleTabs({ index }) {
      console.log("item", index);
      this.list = [];
      this.currentTab = index;
      this._getCouponList();
    },
    handleItem(data) {
      if (this.activeTabItem.type === "index") {
        getCoupon({ id: data.id }).then(({ data }) => {
          console.log("data=>getCoupon", data);
          uni.$u.toast("领取成功");
          this._getCouponList();
        });
      }else if(this.activeTabItem.type === "myUses") {
        uni.navigateTo({
          url: '/pages/productCenter/productCenter',
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  ::v-deep {
    .u-tabs {
      height: 94rpx;
      background-color: #fff;
      .u-tabs__wrapper__nav {
        height: 94rpx;
      }
      .u-tabs__wrapper__nav__line {
        border-radius: 0;
      }
      .vue-ref-in-for {
        flex: 1 !important;
      }
    }
  }
  .list {
    flex: 1;
    padding: 20rpx 20rpx 0;
    overflow-y: auto;
  }
}
</style>