medicine_app/pages/mine/wallet/couponList.vue

<template>
  <view>
    <public-module></public-module>
    <z-nav-bar title="我的优惠券"></z-nav-bar>
    <view class="">
      <view class="">
        <u-tabs
          v-if="tabList.length > 0"
          :class="['tabList']"
          @click="tabClick"
          :current="curTagIndex"
          :activeStyle="activeStyle"
          :scrollable="false"
          :list="tabList"
          itemStyle="padding-left:10rpx; background-color:#fff;  padding-right: 10rpx; height: 50px; font-size:26rpx"
        ></u-tabs>
      </view>
      <!--  -->
      <view class="tanchu" style="position: relative">
        
        <view
        v-if="status!=0"
          style="
          min-height: 80vh;
          z-index: 100;
            background-color: #f0f0f0;
            opacity: 0.55;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          "
        ></view>
        <view class="listBox" v-if="list.length > 0">
          <view style="min-height: 40vh; overflow-y: scroll">
            <common-coupon :List="list" :source="'mine'"> </common-coupon>
          
          </view>

          <!-- <view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view> -->
        </view>
        <view class="" v-else>
          <u-divider v-show="listStatus == 2" text="已加载全部"></u-divider>
          <u-divider v-show="listStatus == 3" text="暂无数据"></u-divider>
          <u-divider v-show="listStatus == 1" text="加载中..."></u-divider>
        </view>
      </view>
    </view>
    <z-navigation></z-navigation>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      list: [], // 优惠券列表
      listStatus: 88,
      curTagIndex: 0, // 当前索引
      tabList: [
        {
          name: "未使用",
          id: "0",
        },
        {
          name: "已使用",
          id: "1",
        },
        {
          name: "已过期",
          id: "2",
        },
      ],
      activeStyle: {
        background: "#fff",
        color: "#666",
        padding: "10rpx",
        borderRadius: "10rpx",
      },
      page: 0,
      limit: 15,
      status: 0,
      flag: false, // 请求标记
    };
  },
  onLoad() {
    this.page = 1;
    this.getUserCouponList();
  },
  async onReachBottom() {
    console.log("触底", this.listStatus, this.flag);

    if (this.listStatus != 1 && this.listStatus != 2) {
      if (!this.flag) {
        this.page++;
        await this.getUserCouponList();
      }
    }
  },
  filters: {
    couponType(type) {
      // 0无限制 1课程卷 2课程品类卷
      var str = "";
      switch (type) {
        case 0:
          str = "全场通用";
          break;
        case 1:
          str = "指定课程可用";
          break;
        case 2:
          str = "指定课程品类可用";
          break;
      }
      return str;
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    async tabClick(e) {
      console.log("e", e);
      this.status = e.id;
      // this.curTagIndex = e.index
      this.page = 0;
      this.page += 1;
      this.list = [];
      await this.getUserCouponList();
    },
    async getUserCouponList() {
      console.log("进入函数了妈");
      this.listStatus = 1;
      this.flag = true;
      uni.showLoading({
        title: "加载中",
      });
      console.log(
        {
          page: this.page,
          limit: this.limit,
          getType: "", //获取类型 0 后台赠送 1 主动获取
          status: this.status, //使用状态 0 未使用 1 已使用 2 已过期
          userInfo: "", //用户信息
          userId: this.userInfo.id,
        },
        111111111111111111111111111
      );
      await this.$http
        .request({
          url: "common/coupon/getCouponHistoryList",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            page: this.page,
            limit: this.limit,
            getType: "", //获取类型 0 后台赠送 1 主动获取
            status: this.status, //使用状态 0 未使用 1 已使用 2 已过期
            userInfo: "", //用户信息
            userId: this.userInfo.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log(res, "1111111111111");
          uni.hideLoading();
          if (res.code != 0) return this.$commonJS.showToast(res.errMsg);
          if (res.couponList.records.length > 0) {
            this.list = this.list.concat(res.couponList.records);
            if (res.couponList.pages > this.page) {
              this.listStatus = 0;
            } else {
              this.listStatus = 2;
            }
          } else {
            this.listStatus = 3; // 暂无数据
          }
          this.flag = false;
        })
        .catch((e) => {
          uni.hideLoading();
          console.log(e);
          this.flag = false;
          this.listStatus = 3;
          console.log(e, "数据报错");
          this.$commonJS.showToast(e.errMsg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.btnBox {
  margin-top: 20rpx;
}

.tanchu {
  padding: 0 30rpx 40rpx 30rpx;
  position: relative;
  // max-height: 60vh;
  // overflow-y: scroll;

  .dp_title {
    font-size: 32rpx;
    margin-bottom: 50rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
  }

  .dp_add {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    font-size: 22rpx;
    background-color: #fd6004;
    color: #fff;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;

    .u-icon {
      display: inline-block;
      margin-right: 5rpx;
    }
  }

  .addressItem {
    border: 2px dashed #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;

    .addrContent {
      margin-left: 40rpx;
      flex: 1;

      .addrContentTop {
        display: flex;
        align-items: flex-end;
        margin: 0 0 15rpx 0;
        position: relative;

        .userName {
          font-size: 35rpx;
          font-weight: bold;
          margin-right: 30rpx;
        }

        .userTel {
          font-size: 25rpx;
          color: #888;
        }

        .userMoren {
          border: 1px solid #fd6004;
          color: #fd6004;
          padding: 3rpx 10rpx;
          font-size: 22rpx;
          border-radius: 10rpx;
          margin: 0 0 0 20rpx;
        }

        .chooseCheck {
          position: absolute;
          top: 3rpx;
          right: 6rpx;
        }
      }

      .addrContentBottom {
        font-size: 32rpx;
      }
    }
  }

  .addressItem.addItem_style {
    border-color: #fd6004;
  }
}
</style>