kailin_mp/pages/coupon/index.vue

<template>
  <view>
    <!-- <view class="coupon_status_list">
			<view class="coupon_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
			<view class="coupon_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待发货 </view>
			<view class="coupon_status_item" :class="requestParam.status==2?'active':''" @click="setStatus(2)"> 已发货 </view>
		</view> -->
    <!-- <view class="to_bottom" v-if="!couponList.length"> </view> -->
    <view class="coupon_list" v-if="couponList.length">
      <view class="coupon_item" v-for="(item, index) in couponList" :key="index" @click="toUse(item)">
        <view class="box_left">
          <view class="rebate" v-if="item.rebate_type == 1"> ￥{{ item.rebate }}</view>
          <view class="rebate" v-if="item.rebate_type == 2"> 打 {{ item.rebate }} 折</view>
          <view class="rebate" v-if="item.rebate_type == 3">
            赠
            <text v-if="item.rebate_scope.length">
              {{ item.rebate_scope[0].product_name }}
            </text>
          </view>
          <view class="std_pay"> 满{{ item.std_pay }}</view>
        </view>
        <view class="box_right">
          <view class="coupon_title">
            <view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
            <view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
            <view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view>

            <view class="coupon_status" v-if="item.status == 0">未使用</view>
            <view class="coupon_status" v-if="item.status == 1">已使用</view>
            <view class="coupon_status" v-if="item.status == 2">已暂停</view>
            <view class="coupon_status" v-if="item.status == 3">已过期</view>
            <view class="coupon_status" v-if="item.status == 4">已作废</view>
          </view>
          <view class="coupon_box">
            <view class="product_scope">
              <text class="" v-if="item.type_id == 1">限定商品可用</text>
              <text class="" v-if="item.type_id == 2">全场可用</text>
              <text class="" v-if="item.type_id == 3">部分商品不可用</text>
            </view>
            <view class="coupon_info">
              <view class="coupon_exp">{{ item.exp_time }} 到期</view>
            </view>
          </view>
          <view class="to_use" v-if="item.status == 0">
            <view class="use_btn">去使用</view>
          </view>
        </view>
      </view>
    </view>
    <Empty v-if="!couponList.length" text="----- 还没有优惠券啦 -----" />
    <view class="to_bottom" v-if="isLast && couponList.length"> -----到底啦-----</view>
  </view>
</template>

<script>
import Empty from "@/components/Empty/Empty.vue";
export default {
  components: {
    Empty,
  },
  data() {
    return {
      // 产品列表
      couponList: [],
      // 请求参数
      requestParam: {
        page: 1,
        status: 0,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
    };
  },
  onLoad() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.couponList = re.data.data;
      }
    });
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 没有数据的话，或者请求中，不允许刷新
    if (this.couponList.length > 0 || this.isReqing) return;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.couponList = re.data.data;
      }
    });
  },
  onPullDownRefresh() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果请求中，不允许请求，
    if (this.isReqing) return false;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.couponList = re.data.data;
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果页码是0，避免第一页重复
    if (this.requestParam.page < 1) return;
    // 最后一页不请求
    if (this.isLast) return;
    // 设置请求中
    this.isReqing = true;
    // 增加一页
    this.requestParam.page = this.requestParam.page + 1;
    // 请求列表
    this.$http.request("api/custom_coupon/get_list", this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 追加数据
        this.couponList.push(...re.data.data);
      }
    });
  },
  methods: {
    toUse(item) {
      // 没有范围
      if (item.type_id == 2) {
        uni.switchTab({ url: "/pages/index/index" });
        return;
      }
      // 只有一个商品，直接跳转到对应商品
      if (item.product_scope.length == 1) {
        uni.navigateTo({
          url: "/pages/product/index?product_id=" + item.product_scope[0],
        });
        return;
      }
      // 没有范围
      if (item.product_scope.length > 1) {
        uni.navigateTo({
          url: "/pages/coupon/product?coupon_id=" + item.coupon_id,
        });
        return;
      }
    },
  },
};
</script>

<style lang="less">
.coupon_status_list {
  display: block;
  height: 60rpx;
  color: #666666;
  line-height: 60rpx;
  background: #ffffff;
  padding: 10rpx 35rpx;
  .coupon_status_item {
    float: left;
    font-size: 28rpx;
    padding: 0rpx 20rpx;
  }
  .coupon_status_item.active {
    color: #000000;
    font-weight: bold;
  }
}
.coupon_list {
  display: block;
  overflow: hidden;
  margin: 10rpx auto;
  .coupon_item {
    height: 200rpx;
    display: block;
    background: #ffffff;
    margin: 10rpx auto;
    .box_left {
      float: left;
      width: 160rpx;
      height: 160rpx;
      font-size: 20rpx;
      text-align: center;
      margin-left: 35rpx;
      line-height: 60rpx;
      margin-top: 20rpx;
      background: pink;
      .rebate {
        width: 120rpx;
        height: 60rpx;
        margin: 0rpx auto;
        line-height: 60rpx;
        margin-top: 20rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .box_right {
      float: left;
      width: 485rpx;
      margin-left: 35rpx;
      padding-top: 20rpx;
      overflow: hidden;
      .coupon_title {
        width: 485rpx;
        max-height: 80rpx;
        font-size: 30rpx;
        overflow: hidden;
        line-height: 40rpx;
        padding: 0rpx 0rpx;
        .coupon_name {
          float: left;
          height: 40rpx;
          width: 380rpx;
        }
        .coupon_status {
          width: 100rpx;
          float: right;
          color: #999999;
          font-size: 24rpx;
          text-align: center;
        }
      }
      .coupon_box {
        float: left;
        width: 365rpx;
        overflow: hidden;
        .product_scope {
          width: 365rpx;
          height: 80rpx;
          color: #999999;
          font-size: 24rpx;
          overflow: hidden;
          line-height: 80rpx;
        }
        .coupon_info {
          width: 365rpx;
          max-height: 80rpx;
          font-size: 30rpx;
          overflow: hidden;
          line-height: 40rpx;
          padding: 0rpx 0rpx;
          .coupon_exp {
            float: left;
            font-size: 20rpx;
          }
        }
      }
      .to_use {
        float: right;
        width: 100rpx;
        margin-top: 75rpx;
        overflow: hidden;
        .use_btn {
          color: #ffffff;
          width: 100rpx;
          height: 40rpx;
          font-size: 24rpx;
          line-height: 40rpx;
          text-align: center;
          border-radius: 20rpx;
          background-color: #f59a23;
        }
      }
    }
  }
}
</style>