优惠券模版 ¶

<template>
  <view class="yhq1-wrap">
    <view class="goods_quan s-row">
      <view class="row getGoodsLink">
        <view class="money">
          <view>
            <text>20</text>
            元优惠券
          </view>
          <view class="date-coupon">使用期限:2019.02.22-2019.02.23</view>
        </view>
        <view class="name"><text>立即领券</text></view>
      </view>
      <image lazy-load src="/static/template/voucher_list/yhq.png" mode="widthFix" class="is-response"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    hhhh: {
      type: Number,
      default: 1
    },
    ssss: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      colorType1: 1
      // :colorType=" colorType "
    };
  }
};
</script>

<style scoped>
.yhq1-wrap {
}

.yhq1-wrap .goods_quan {
  position: relative;
  z-index: 1;
  zoom: 1;
}

.yhq1-wrap .goods_quan:before {
  content: '';
  width: 2px;
  height: 55%;
  /* background: url('/static/voucher_list/hr.png'); */
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  background-size: auto 100%;
  position: absolute;
  z-index: 1;
  zoom: 1;
  left: 64%;
  top: 20%;
  display: block;
}

.yhq1-wrap .goods_quan .row {
  display: block;
  position: absolute;
  z-index: 1;
  zoom: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.yhq1-wrap .goods_quan .row .money {
  font-size: 36upx;
  color: #ffffff;
  padding-top: 6%;
  line-height: 48upx;
  position: relative;
  z-index: 1;
  zoom: 1;
  left: 0.3rem;
  display: block;
  width: 66.66666667%;
  float: left;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.yhq1-wrap .goods_quan .row .money .date-coupon {
  font-size: 14px;
  color: #fff;
}

.yhq1-wrap .goods_quan .row .name {
  line-height: 100%;
  color: #fff;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 50%;
  margin-top: -0.6rem;
  text-align: left;
  font-weight: 600;
  display: block;
  width: 33.33333333%;
  float: left;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.yhq1-wrap .goods_quan .row .name text {
  margin-left: 15%;
}
.yhq1-wrap .goods_quan .is-response {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 90px;
}
</style>

<template>
  <view>
    <view class="yhq2-tabr" :style="{ top: headerTop }">
      <view :class="{ on: typeClass == 'valid' }" @tap="switchType('valid')">可用({{ couponValidList.length }})</view>
      <view :class="{ on: typeClass == 'invalid' }" @tap="switchType('invalid')">已失效</view>
      <view class="border" :class="typeClass"></view>
    </view>
    <view class="yhq2-list">
      <!-- 优惠券列表 -->
      <view class="sub-list valid" :class="subState">
        <view class="tis" v-if="couponValidList.length == 0">没有数据~</view>
        <view class="yhq2-item-box" v-for="(row, index) in couponValidList" :key="index">
          <!-- 删除按钮 -->
          <view class="menu" @tap.stop="deleteCoupon(row.id, couponValidList)">
            <view class="shanchu">删除</view>
          </view>
          <!-- content -->
          <view
            class="carrier"
            :class="[typeClass == 'valid' ? (theIndex == index ? 'open' : oldIndex == index ? 'close' : '') : '']"
            @touchstart="touchStart(index, $event)"
            @touchmove="touchMove(index, $event)"
            @touchend="touchEnd(index, $event)"
          >
            <view class="yhq2-item-left">
              <view class="title">{{ row.title }}</view>
              <view class="term">{{ row.termStart }} ~ {{ row.termEnd }}</view>
              <view class="gap-top"></view>
              <view class="gap-bottom"></view>
            </view>
            <view class="yhq2-item-right">
              <view class="ticket">
                <view class="num">{{ row.ticket }}</view>
                <view class="unit">元</view>
              </view>
              <view class="criteria">{{ row.criteria }}</view>
              <view class="use">去使用</view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-list invalid" :class="subState">
        <view class="tis" v-if="couponinvalidList.length == 0">没有数据~</view>
        <view class="row" v-for="(row, index) in couponinvalidList" :key="index">
          <!-- 删除按钮 -->
          <view class="menu" @tap.stop="deleteCoupon(row.id, couponinvalidList)">
            <view class="shanchu">删除</view>
          </view>
          <!-- content -->
          <view
            class="carrier"
            :class="[typeClass == 'invalid' ? (theIndex == index ? 'open' : oldIndex == index ? 'close' : '') : '']"
            @touchstart="touchStart(index, $event)"
            @touchmove="touchMove(index, $event)"
            @touchend="touchEnd(index, $event)"
          >
            <view class="yhq2-item-left">
              <view class="title">{{ row.title }}</view>
              <view class="term">{{ row.termStart }} ~ {{ row.termEnd }}</view>
              <view class="icon shixiao"></view>
              <view class="gap-top"></view>
              <view class="gap-bottom"></view>
            </view>
            <view class="yhq2-item-right invalid">
              <view class="ticket">
                <view class="num">{{ row.ticket }}</view>
                <view class="unit">元</view>
              </view>
              <view class="criteria">{{ row.criteria }}</view>
              <view class="use">去查看</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--    
    <view
      class="carrier"
      :class="[theIndex == index ? 'open' : oldIndex == index ? 'close' : '']"
      @touchstart="touchStart(index, $event)"
      @touchmove="touchMove(index, $event)"
      @touchend="touchEnd(index, $event)"
    >
      <view class="left">
        <view class="title">10元日常用品类</view>
        <view class="term">2019-04-01~2019-05-30</view>
      </view>
      <view class="right">
        <view class="ticket">
          <view class="num">10</view>
          <view class="unit">元</view>
        </view>
        <view class="criteria">满50使用</view>
        <view class="use">去使用</view>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponValidList: [
        { id: 1, title: '日常用品立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '满50使用' },
        {
          id: 2,
          title: '家用电器立减100元',
          termStart: '2019-04-01',
          termEnd: '2019-05-30',
          ticket: '100',
          criteria: '满500使用'
        },
        { id: 3, title: '全场立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '无门槛' },
        { id: 4, title: '全场立减50元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '50', criteria: '满1000使用' }
      ],
      couponinvalidList: [
        { id: 1, title: '日常用品立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '满50使用' },
        {
          id: 2,
          title: '家用电器立减100元',
          termStart: '2019-04-01',
          termEnd: '2019-05-30',
          ticket: '100',
          criteria: '满500使用'
        },
        { id: 3, title: '全场立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '无门槛' },
        { id: 4, title: '全场立减50元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '50', criteria: '满1000使用' }
      ],
      headerTop: 0,
      //控制滑动效果
      typeClass: 'valid',
      subState: '',
      theIndex: null,
      oldIndex: null,
      isStop: false
    };
  },
  onPageScroll(e) {},
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  created() {
    //兼容H5下排序栏位置
    // #ifdef H5
    //定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
    let Timer = setInterval(() => {
      let uniHead = document.getElementsByTagName('uni-page-head');
      if (uniHead.length > 0) {
        this.headerTop = uniHead[0].offsetHeight + 'px';
        clearInterval(Timer); //清除定时器
      }
    }, 1);
    // #endif
  },
  methods: {
    switchType(type) {
      if (this.typeClass == type) {
        return;
      }
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.typeClass = type;
      this.subState = this.typeClass == '' ? '' : 'show' + type;
      setTimeout(() => {
        this.oldIndex = null;
        this.theIndex = null;
        this.subState = this.typeClass == 'valid' ? '' : this.subState;
      }, 200);
    },
    //控制左滑删除效果-begin
    touchStart(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      this.oldIndex = this.theIndex;
      this.theIndex = null;
      //初始坐标
      this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
    },
    touchMove(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      let moveX = event.touches[0].pageX - this.initXY[0];
      let moveY = event.touches[0].pageY - this.initXY[1];

      if (this.isStop || Math.abs(moveX) < 5) {
        return;
      }
      if (Math.abs(moveY) > Math.abs(moveX)) {
        // 竖向滑动-不触发左滑效果
        this.isStop = true;
        return;
      }

      if (moveX < 0) {
        this.theIndex = index;
        this.isStop = true;
      } else if (moveX > 0) {
        if (this.theIndex != null && this.oldIndex == this.theIndex) {
          this.oldIndex = index;
          this.theIndex = null;
          this.isStop = true;
          setTimeout(() => {
            this.oldIndex = null;
          }, 150);
        }
      }
    },

    touchEnd(index, $event) {
      //解除禁止触发状态
      this.isStop = false;
    },

    //删除商品
    deleteCoupon(id, List) {
      let len = List.length;
      for (let i = 0; i < len; i++) {
        if (id == List[i].id) {
          List.splice(i, 1);
          break;
        }
      }
      this.oldIndex = null;
      this.theIndex = null;
    },

    discard() {
      //丢弃
    }
  }
};
</script>
<style scoped>
page {
  position: relative;
  background-color: #f5f5f5;
}
.hidden {
  display: none !important;
}

.yhq2-tabr {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  width: 94%;
  height: 95upx;
  padding: 0 3%;
  border-bottom: solid 1upx #dedede;
  z-index: 10;
}
.yhq2-tabr view {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 45px;
  font-size: 16px;
  color: #999;
}
.yhq2-tabr .on {
  display: flex;
  flex-wrap: wrap;
  color: #f06c7a;
}
.yhq2-tabr .border {
  display: flex;
  flex-wrap: wrap;
  height: 4upx;
  background-color: #f06c7a;
  transition: all 0.3s ease-out;
}
.yhq2-tabr .border.invalid {
  transform: translate3d(100%, 0, 0);
}
.yhq2-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
@keyframes showValid {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes showInvalid {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.yhq2-list .sub-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0 60px 0;
}
.yhq2-list .sub-list .tis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  font-size: 16px;
}
.yhq2-item-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 80px;
  margin: 5px auto 5px auto;
  border-radius: 4px;
  /* box-shadow: 0upx 0 5px rgba(0,0,0,0.1); */
  position: relative;
  overflow: hidden;
  z-index: 4;
  border: 0;
}
.yhq2-list .sub-list .menu {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 28%;
  height: 100%;
  right: 0;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: #fff;
  z-index: 2;
}
.yhq2-list .sub-list .icon {
  color: #fff;
  font-size: 25px;
}
.yhq2-list .sub-list .carrier {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  position: absolute;
  width: 100%;
  padding: 0 0;
  height: 100%;
  z-index: 3;
  flex-wrap: nowrap;
}
@keyframes showMenu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-28%);
  }
}
@keyframes closeMenu {
  0% {
    transform: translateX(-28%);
  }
  100% {
    transform: translateX(0);
  }
}
.yhq2-list .sub-list .carrier.open {
  animation: showMenu 0.25s linear both;
}
.yhq2-list .sub-list .carrier.close {
  animation: closeMenu 0.15s linear both;
}
.yhq2-item-left {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.yhq2-item-left .gap-top,
.gap-bottom {
  position: absolute;
  width: 10px;
  height: 10px;
  right: -5px;
  border-radius: 100%;
  background-color: #f5f5f5;
}
.yhq2-item-left .gap-top {
  top: -5px;
}
.yhq2-item-left .gap-bottom {
  bottom: -5px;
}
.yhq2-item-left .shixiao {
  position: absolute;
  right: 10px;
  font-size: 75px;
  z-index: 6;
  color: rgba(153, 153, 153, 0.2);
}
.yhq2-item-left .title {
  padding-top: 3vw;
  width: 90%;
  margin: 0 5%;
  font-size: 18px;
}
.yhq2-item-left .term {
  width: 90%;
  margin: 0 5%;
  font-size: 13px;
  color: #999;
}

.yhq2-item-right {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: center;
  width: 28%;
  color: #fff;
  background: linear-gradient(to right, #ec625c, #ee827f);
}
.yhq2-item-right .invalid {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(to right, #aaa, #999);
}
.yhq2-item-right .ticket {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1vw;
  justify-content: center;
  align-items: baseline;
  height: 6vw;
  width: 100%;
}
.yhq2-item-right .num {
  display: flex;
  flex-wrap: wrap;
  font-size: 21px;
  font-weight: 600;
}
.yhq2-item-right .unit {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
}
.yhq2-item-right .criteria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  width: 100%;
}
.yhq2-item-right .use {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 20px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background-color: #fff;
  color: #ee827f;
  border-radius: 20px;
  padding: 0 5px;
  color: #aaa;
}
.yhq2-list .sub-list.invalid {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
.yhq2-list .sub-list.showvalid {
  display: flex;
  animation: showValid 0.2s linear both;
}
.yhq2-list .sub-list.showinvalid {
  display: flex;
  animation: showInvalid 0.2s linear both;
}
</style>