list.vue

<template>
    <div>
        <headerNav title="我的优惠券"/>
        <van-cell-group>
        <van-field
            center
            clearable
            placeholder="请输入优惠码"

            v-model="couponCode"
        >
            <van-button slot="button" size="small" type="primary" :loading="exchangeLoading" @click="onExchange">兑换</van-button>
        </van-field>
        </van-cell-group>
        <van-tabs >
            <van-tab title="未使用">
                <ul>
                    <van-list
                            v-model="unusedData.loading"
                            :finished="unusedData.finished"
                            @load="onLoad"
                            >
                        <li  v-for="(item,index) in unusedData.list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
                            <div class="couponTop">
                                <div class="cpnamount">
                                    <div class="amountWrap">
                                        <div class="amount" v-if="item.preferentialType === 1">
                                                <span class="amountSign" >￥</span>
                                                <span class="amountNum">{{item.priceOff / 100}}</span>
                                        </div>
                                        <div class="amount" v-else="item.preferentialType === 2">
                                            <span class="amountNum">{{item.percentOff / 10.0}}</span>
                                            <span class="amountSign">折</span>
                                        </div>
                                        <div class="condition">
                                            <span>满 {{item.priceAvailable / 100.0}} 元可用</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="couponInfoWrap">
                                    <div class="cpninfo">
                                        <div class="detail">
                                        <span class="name">{{item.title}}</span></div>
                                    </div>
                                    <div class="validity">
                                        <span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
                                            ~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
                                    </div>
                                    <van-button type="danger" size="mini">立即使用</van-button>
                                </div>
                            </div>
<!--                            <div class="couponMid " v-if="item.Info!=''">-->
<!--                                <span>详细信息</span>-->
<!--                                <van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />-->
<!--                            </div>-->
<!--                            <div class="info"  v-if="item.Info!=''" >-->
<!--                                <div class="text">-->
<!--                                    {{item.Info}}-->
<!--                                </div>-->
<!--                            </div>-->
                            <!-- todo 芋艿，后续做优化。指定哪些商品 / 分类可用 -->
                            <div class="info" v-if="item.Info!=''" >
                                <div class="text">
                                    {{item.Info}}
                                </div>
                            </div>
                        </li>
                    </van-list>
                </ul>
            </van-tab>
            <van-tab title="使用记录">
                <ul class="gray" >
                    <van-list
                            v-model="usedData.loading"
                            :finished="usedData.finished"
                            @load="onLoadUse"
                            >
                        <li  v-for="(item,index) in usedData.list" :key="index" class="couponitem">
                            <div class="couponTop">
                                <div class="cpnamount">
                                    <div class="amountWrap">
                                        <div class="amount" v-if="item.preferentialType === 1">
                                            <span class="amountSign" >￥</span>
                                            <span class="amountNum">{{item.priceOff / 100}}</span>
                                        </div>
                                        <div class="amount" v-else="item.preferentialType === 2">
                                            <span class="amountNum">{{item.percentOff / 10.0}}</span>
                                            <span class="amountSign">折</span>
                                        </div>
                                        <div class="condition">
                                            <span>满 {{item.priceAvailable}} 元可用</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="couponInfoWrap">
                                    <div class="cpninfo">
                                        <div class="detail">
                                        <span class="name">{{item.title}}</span></div>
                                    </div>
                                    <div class="validity">
                                        <span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
                                            ~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </van-list>
                </ul>
            </van-tab>
            <van-tab title="已过期">
                <ul class="gray" >

                    <van-list
                            v-model="expireData.loading"
                            :finished="expireData.finished"
                            @load="onLoadEnd"
                            >
                        <li  v-for="(item,index) in expireData.list" :key="index" class="couponitem">
                            <div class="couponTop">
                                <div class="cpnamount">
                                    <div class="amountWrap">
                                        <div class="amount" v-if="item.preferentialType === 1">
                                            <span class="amountSign" >￥</span>
                                            <span class="amountNum">{{item.priceOff / 100}}</span>
                                        </div>
                                        <div class="amount" v-else="item.preferentialType === 2">
                                            <span class="amountNum">{{item.percentOff / 10.0}}</span>
                                            <span class="amountSign">折</span>
                                        </div>
                                        <div class="condition">
                                            <span>满 {{item.priceAvailable}} 元可用</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="couponInfoWrap">
                                    <div class="cpninfo">
                                        <div class="detail">
                                            <span class="name">{{item.title}}</span></div>
                                    </div>
                                    <div class="validity">
                                        <span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
                                            ~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </van-list>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { ExchangeCoupon } from "../../api/user.js";
import { getCouponPage } from "../../api/promotion.js";

export default {
  components: {
  },
  data() {
    return {
            // loading:false,
            // finished:false,
            // list:[],
            // page:0,
            //
            //
            // useLoading:false,
            // useFinished:false,
            // useList:[],
            // usePage:0,
            //
            //
            // endLoading:false,
            // endFinished:false,
            // endList:[],
            // endPage:0,

            couponCode:'',
            exchangeLoading:false,

      unusedData: {
        page: 0,
        pageSize: 10,
        list: [],
        loading: false,
        finished: false,
      },

      usedData: {
        page: 0,
        pageSize: 10,
        list: [],
        loading: false,
        finished: false,
      },

      expireData: {
        page: 0,
        pageSize: 10,
        list: [],
        loading: false,
        finished: false,
      },
    };
  },
  computed: {
  },
  methods: {
        onLoad() {
            // 进入下一页
            let page = this.unusedData.page + 1;
            getCouponPage(1, page, this.unusedData.pageSize).then(data => {
              // debugger;
              // 设置下页面
              this.unusedData.page = page;
              // 数据保存到 list 中
              this.unusedData.list.push(...data.list);
              // 判断页数
              if (this.unusedData.list.length >= data.total) {
                this.unusedData.finished = true;
              }
              // 标记不在加载中
              this.unusedData.loading = false;
            });

            // GetCoupon({page:this.page}).then(response=>{
            //     response.List.forEach(item => {
            //         item.show=false;
            //         this.list.push(item);
            //     });
            //     this.loading = false;
            //     if(response.TotalPage<=this.page){
            //         this.finished = true;
            //     }
            //
            // })
        },
        // onShowInfo(id,index){
        //     this.list.forEach((item,itemIndex) => {
        //         if(index==itemIndex){
        //             item.show=!item.show;
        //             return;
        //         }
        //     });
        // },
        onLoadUse() {
          // 进入下一页
          let page = this.usedData.page + 1;
          getCouponPage(2, page, this.usedData.pageSize).then(data => {
            // debugger;
            // 设置下页面
            this.usedData.page = page;
            // 数据保存到 list 中
            this.usedData.list.push(...data.list);
            // 判断页数
            if (this.usedData.list.length >= data.total) {
              this.usedData.finished = true;
            }
            // 标记不在加载中
            this.usedData.loading = false;
          });
        },
        onLoadEnd() {
          // 进入下一页
          let page = this.expireData.page + 1;
          getCouponPage(3, page, this.expireData.pageSize).then(data => {
            // debugger;
            // 设置下页面
            this.expireData.page = page;
            // 数据保存到 list 中
            this.expireData.list.push(...data.list);
            // 判断页数
            if (this.expireData.list.length >= data.total) {
              this.expireData.finished = true;
            }
            // 标记不在加载中
            this.expireData.loading = false;
          });
        },
        onExchange(){
            if(this.exchangeLoading){
                return;
            }
            this.exchangeLoading=true;
            ExchangeCoupon(this.couponCode).then(response=>{
                this.$toast('兑换成功');
                this.exchangeLoading=false;
                this.$router.go(0);
            })
        }
  }
};
</script>

<style lang="less">
.couponitem {
        padding: 0 10px;
  margin-top: 10px;
  position: relative;
  font-size: 12px;
  .couponTop {
    background-color: #fcebeb;
    border-left: 1px solid #f3d4d4;
    border-right: 1px solid #f3d4d4;
    border-bottom: 1px dashed  #f3d4d4;
    border-radius: 8px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    .cpnamount {
      position: relative;
      height: 90px;
      width: 34.08%;
      text-align: center;
      float: left;
      border-right: 1px dashed #f3d4d4;
    }
    .amountWrap {
      width: 100%;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      .amount {
        font-size: 15px;
        .amountSign {
          margin-right: 3px;
        }
        .amountNum {
          font-size: 39px;
          line-height: 1;
          font-weight: bold;
        }
      }
    }
  }
  .couponInfoWrap {
    position: relative;
    margin-left: 37.465%;
    height: 90px;
    .cpninfo {
      position: absolute;
      top: 26px;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      width: 100%;
      .detail {
        padding-right: 15px;
        word-break: break-all;
        .name {
          font-size: 13px;
          color: #000;
        }
      }
    }
    .validity {
        position: absolute;
        bottom: 16px;
        font-size: 10px;
    }
    button{
        right: 16px;
        position: absolute;
        bottom: 16px;
    }
  }
  .couponMid {
    position: relative;
    height: 31px;
    line-height: 31px;
    padding-left: 16px;
    font-size: 12px;

    background-color: #fcebeb;
    border-left: 1px solid #f3d4d4;
    border-right: 1px solid #f3d4d4;
    border-bottom: 1px solid #f3d4d4;
    border-radius: 8px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    i{
        right: 16px;
        position: absolute;
        top: 8px;
         -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
  }

  .info{
      display: none;
      background-color: #fcebeb;
    border-left: 1px solid #f3d4d4;
    border-right: 1px solid #f3d4d4;
    border-bottom: 1px solid #f3d4d4;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
padding: 10px 25px 12px 15px;
    font-size: 12px;
  }
}
  .show{

  .couponMid {
          border-bottom: 1px dashed #f3d4d4;
          border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    i{
         -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
  }
  .info{
      display: block;
  }
  }
  .gray{
      -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
  }
</style>