webapp / GreenwayWeb

<template>
  <view class="couponList u-skeleton">
    <Skeleton
        el-color="#efefef"
        bg-color="#fff"
        :loading="loading && isFirstComeIn"
        :animation="true"
    />
    <template v-if="couponList.length>0">
      <view
          class="couponItem u-skeleton-fillet flex-items"
          v-for="item of couponList"
          :key="item.couponId"
      >
        <view
            class="itemLeft u-skeleton-fillet"
            @click="goProductList(item)"
        >
          <view class="topIcon"></view>
          <view class="bottomIcon"></view>
          <view class="price flex-items">
            <view
                class="flex-column flex-end unitBox"
                v-if="item.discountMode === 1"
            >
              <view class="unit">￥</view>
            </view>
            <view class="priceValue">{{ item.reduceMoney }}{{ item.discountMode === 1 ? '' : '折' }}</view>
          </view>
          <text class="fs24 font-color-999">满{{ item.fullMoney }}元可用</text>
        </view>
        <view class="itemRight u-skeleton-fillet">
          <view class="topInfo flex-items flex-sp-between">
            <view @click="goProductList(item)">
              <view class="couponTit fs32 font-color-FFF">{{ item.activityName }}</view>
              <view class="couponDate fs24 font-color-999">{{ item.endTime }}到期</view>
            </view>
            <view class="exchangeBtnBox flex-column flex-end">
              <view
                  class="exchangeBtn fs24 font-color-FFF"
                  v-if="item.state === 0"
              >已领取
              </view>
              <wx-send-coupon
                  v-else
                  @success="success"
                  :couponList="[item]"
              >
                <view class="exchangeBtn fs24 font-color-FFF">{{ item.ifCredit ? '立即兑换' : '立即领取' }}</view>
              </wx-send-coupon>
            </view>
          </view>
          <view
              @click="goProductList(item)"
              class="couponType fs28 font-color-FFF"
          >{{ item.discountMode === 1 ? '满减券' : '折扣券' }}
          </view>
        </view>
      </view>
      <!-- 触底 -->
      <view
          class="reachBottom"
          v-if="topLeft > 400 && couponList.length>0"
      >
        <image
            class="reach-icon"
            src="https://jy.scjysm.asia:18086/mefile/file/static/img//reachBottom.png"
            mode="widthFix"
        ></image>
        <text class="reach-text">这里到底了哦~~</text>
      </view>
    </template>
    <Empty :show="couponList.length<=0" />
  </view>
</template>

<script>
import Skeleton from "../../components/Skeleton";
import Empty from "../../components/Empty";
import WxSendCoupon from "../../components/wx/wxSendCoupon";

const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
  name: "list",
  components: {WxSendCoupon, Empty, Skeleton},
  data() {
    return {
      loading: false,
      isFirstComeIn: true,
      couponList: [{}, {}, {}, {}, {}, {}], // 优惠券列表getCoupons
      page: 1,
      pageSize: 10,
      loadingType: 0,
      topLeft: 0
    }
  },
  onLoad() {
    this.getCouponList()
  },
  onReachBottom() {
    if (this.loadingType == 1) {
      uni.stopPullDownRefresh()
    } else {
      this.page = this.page + 1
      this.getCouponList()
    }
  },
  onPageScroll(e) {
    this.topLeft = e.scrollTop
  },
  methods: {
    getCouponList() {
      // uni.showLoading({
      //   mask: true,
      //   title: '加载中...'
      // })
      this.loading = true
	  NET.request(API.couponnew, {
	    page: this.page,
	    pageSize: this.pageSize,
		shopId:154
	  }, 'POST').then(res => {
	    uni.hideLoading()
	    if (res.data.length === 0) {
	      this.loadingType = 1
	    } else {
	      this.couponList = this.couponList.concat(res.data)
	      this.$forceUpdate()
	    }
	    this.couponList = this.couponList.filter(item => JSON.stringify(item) !== '{}')
	    this.loading = false
	    this.isFirstComeIn = false
	  }).catch(res => {
	    uni.hideLoading()
	  })
      // NET.request(API.getCoupons, {
      //   page: this.page,
      //   pageSize: this.pageSize
      // }, 'GET').then(res => {
      //   uni.hideLoading()
      //   if (res.data.list.length === 0) {
      //     this.loadingType = 1
      //   } else {
      //     this.couponList = this.couponList.concat(res.data.list)
      //     this.$forceUpdate()
      //   }
      //   this.couponList = this.couponList.filter(item => JSON.stringify(item) !== '{}')
      //   this.loading = false
      //   this.isFirstComeIn = false
      // }).catch(res => {
      //   uni.hideLoading()
      // })
    },
    // 跳转到可用商品列表
    goProductList(item) {
      console.log(item, 'test')
      uni.navigateTo({
        url: `../coupon/product?id=${ item.couponId }&actId=${item.activityId}`
      })
    },
    success() {
      this.page = 1
      this.couponList = []
      this.getCouponList()
    }
  }
}
</script>

<style
    lang="scss"
    scoped
>
page {
  background: #F8F8F8;

  .couponList {
    padding: 0 20rpx 40upx;
    margin-top: 30rpx;

    .couponItem {
      background: #333333;
      margin-top: 40rpx;
      padding: 25rpx 35rpx;
      overflow: hidden;
      background-image: url("https://jy.scjysm.asia:18086/mefile/file/static/images/borderIcon.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;

      .itemLeft {
        padding-right: 10rpx;
        position: relative;
        border-right: 2rpx dashed #666666;
        width: 170rpx;

        .topIcon {
          position: absolute;
          right: -16rpx;
          top: -50rpx;
          width: 32rpx;
          height: 32rpx;
          background: #FFFFFF;
          border-radius: 50%;
        }

        .bottomIcon {
          position: absolute;
          right: -16rpx;
          bottom: -50rpx;
          width: 32rpx;
          height: 32rpx;
          background: #FFFFFF;
          border-radius: 50%;
        }

        //.price {
        //  width: 100rpx;
        //}
        .unitBox {
          height: 70rpx;
        }

        .unit {
          color: #FFEBC4;
          font-size: 36rpx;
        }

        .priceValue {
          font-size: 52rpx;
          color: #FFEBC4;
        }
      }

      .itemRight {
        padding-left: 45rpx;
        flex: 1;

        .topInfo {
          padding-bottom: 10rpx;
          border-bottom: 2rpx solid #444444;
          margin-bottom: 10rpx;

          .couponDate {
            width: 300rpx;
          }

          .exchangeBtnBox {
            width: 110rpx;
            height: 70rpx;
            text-align: center;

            .exchangeBtn {
              padding: 5rpx;
              border: 2rpx solid #999999;
            }
          }
        }
      }
    }
  }

  .Put-box1 {
    .btn {
      text-align: center;
      margin-top: 40rpx;
      border: 2rpx solid #333333;
      height: 80upx;
      line-height: 80upx;
      width: 100%;
      color: #333333;
    }

    .submit {
      background-color: #333333;
      color: #FFEBC4;
      margin-left: 20rpx;
    }
  }
}

// 触底样式
.reachBottom {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .reach-icon {
    width: 150rpx;
    height: 150rpx;
  }

  .reach-text {
    margin: 20rpx 0;
    color: #CCCCCC;
  }
}
</style>