微信小程序卡券样式

微信小程序卡券样式## 微信小程序## 卡券

html

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view class="page" style='margin-top: {{height}}px'>
  <view class="tab-change">
    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>
      有效
      <view class=' {{currentData == 0 ? "tabBorer2" : ""}}'></view> 
    </view>
    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>
        已失效
        <view class=' {{currentData == 1 ? "tabBorer2" : ""}}'></view>
    </view>
  </view>
  <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
    <swiper-item>
      <view class='swiper_con swiper_have_con'>
        <view class="wrapper" wx:for="{{coupon}}" wx:index="{{index}}">
          <view class="left">
            <view class="yh-price">{{item.price}}<text class="small-txt2">{{item.unit}}</text></view>
            <view class="describe">{{item.describe}}</view>
          </view>
          <view class="right">
            <view class="yh-name">{{item.name}}</view>
            <view class="yh-date">
              {{item.date}}
              <navigator url="/pages/coupon/index" class="yh-use">立即使用</navigator>
            </view>
            <view class="yh-apply">{{item.apply}}</view>
          </view>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper_con swiper_invalid_con">
        <view class="wrapper" wx:for="{{coupon_invalid}}" wx:index="{{index}}">
          <view class="left">
            <view class="yh-price">{{item.price}}<text class="small-txt2">{{item.unit}}</text></view>
            <view class="describe">{{item.describe}}</view>
          </view>
          <view class="right">
            <view class="yh-name">{{item.name}}</view>
            <view class="yh-date">
              {{item.date}}
            </view>
            <view class="yh-apply">{{item.apply}}</view>
            <image class="invalid-image" src="{{item.invalid==1?'/static/image/mycoupon/shixiao.png':'/static/image/mycoupon/guoqi.png'}}"></image>
          </view>
        </view>
      </view>
      <view class='swiper_con swiper_not_con'>
        <image src="/static/image/mycoupon/nope.png" mode="widthFix"></image>
        <view class="nope">暂无优惠券</view>
      </view>
    </swiper-item>
  </swiper>
</view>

/* css */
page{background:#F4F5F9;width:100%;}
.page{width:inherit;}

.tab-change{width:100%;background:#fff;display: flex;border-top:1px solid #F4F5F9;}
.tab {
  width: 50%;
  text-align: center;
  padding: 28rpx 0;
  font-size: 32rpx;
  color:#000;
  position: relative;
}

.tabBorer2 {
  position:absolute;
  bottom:0;
  left:156rpx;
  /* border-bottom: 2px solid #CD2314; */
  width: 66rpx;
  height: 6rpx;
  background: #CD2314;

}
 
.swiper {
  width: 100%;
}
 
.swiper_con {
  text-align: center;
  width: 100%;
  /* height: 100%; */
  padding: 80rpx 0;
}

/* .swiper_not_con{padding-top:208rpx;} */
.swiper_not_con image{width:378rpx;height:240rpx;}
.nope{color:#999;font-size: 32rpx;margin-top:30rpx;}

.swiper_have_con{padding-top:unset;}
/* 这是第二个 */
.swiper_have_con .wrapper {
  display: flex;
  position: relative;
  width: 710rpx;
  height: 214rpx;
  margin: auto;
  filter: drop-shadow(2px 2px 3px #EAEBEE);
  margin-top:24rpx;
}

.swiper_have_con .left {
  background: #58a;
  background: radial-gradient(circle at top right, transparent 5px, #fff 0) top right, radial-gradient(circle at bottom right, transparent 5px, #fff 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  color: white;
  width: 218rpx;
  border-radius: 5px 0 0 5px;
}

.swiper_have_con .right {
  background: #58a;
  background: radial-gradient(circle at top left, transparent 5px, #fff 0) top left,radial-gradient(circle at bottom left, transparent 5px, #fff 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  width: 556rpx;
  color: white;
  border-radius: 0 5px 5px 0; 
  box-sizing: border-box;
  padding-left:32rpx;
}
.swiper_have_con .right::after{
  content: "";
  position: absolute;
  top: 15rpx;
  left:200rpx;
  height: 188rpx;
  border-left: 2rpx dashed #E0E0E0;
}

.swiper_have_con .yh-price{color:#E61515;font-size: 46rpx;margin-top:54rpx;margin-bottom:10rpx;font-weight:bold;}
.swiper_have_con .small-txt2{font-size: 24rpx;position: none;border:none;font-weight:bold;}
.swiper_have_con .describe{font-size: 24rpx;color:#999;}

.swiper_have_con .yh-name{font-size: 32rpx;color:#333;margin-top:38rpx;margin-bottom:12rpx;text-align: left;}
.swiper_have_con .yh-date{font-size: 24rpx;color:#999;display: flex;align-items: center;}
.swiper_have_con .yh-use{margin-left:76rpx;color:#CD2314;border:1px solid #CD2314;border-radius: 28rpx;text-align: center;font-size: 24rpx;box-sizing: border-box;padding:6rpx 20rpx;}
.swiper_have_con .yh-apply{margin-top:10rpx;font-size:24rpx;color:#999;text-align: left;}

/**失效**/
.swiper_invalid_con{padding-top: unset;}
.swiper_invalid_con .wrapper {
  display: flex;
  position: relative;
  width: 710rpx;
  height: 214rpx;
  margin: auto;
  filter: drop-shadow(2px 2px 3px #EAEBEE);
  margin-top:24rpx;
}

.swiper_invalid_con .left {
  background: #58a;
  background: radial-gradient(circle at top right, transparent 5px, #fff 0) top right, radial-gradient(circle at bottom right, transparent 5px, #fff 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  color: white;
  width: 218rpx;
  border-radius: 5px 0 0 5px;
}

.swiper_invalid_con .right {
  background: #58a;
  background: radial-gradient(circle at top left, transparent 5px, #fff 0) top left,radial-gradient(circle at bottom left, transparent 5px, #fff 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  width: 556rpx;
  color: white;
  border-radius: 0 5px 5px 0; 
  box-sizing: border-box;
  padding-left:32rpx;
  position: relative;
}
.swiper_invalid_con .right::after{
  content: "";
  position: absolute;
  top: 15rpx;
  left:-1rpx;
  height: 188rpx;
  border-left: 2rpx dashed #E0E0E0;
}

.swiper_invalid_con .yh-price{color:#999;font-size: 44rpx;margin-top:54rpx;margin-bottom:10rpx;font-weight:bold;}
.swiper_invalid_con .small-txt2{font-size: 24rpx;position: none;border:none;font-weight:bold;}
.swiper_invalid_con .describe{font-size: 24rpx;color:#999;}

.swiper_invalid_con .yh-name{font-size: 32rpx;color:#333;margin-top:38rpx;margin-bottom:12rpx;text-align: left;}
.swiper_invalid_con .yh-date{font-size: 24rpx;color:#999;display: flex;align-items: center;}
.swiper_invalid_con .yh-use{margin-left:76rpx;color:#CD2314;border:1px solid #CD2314;border-radius: 28rpx;text-align: center;font-size: 24rpx;box-sizing: border-box;padding:6rpx 20rpx;}
.swiper_invalid_con .yh-apply{margin-top:10rpx;font-size:24rpx;color:#999;text-align: left;}
.swiper_invalid_con .invalid-image{width:130rpx;height:140rpx;position:absolute;right:-6rpx;top:-4rpx;}

js

const app = getApp()

Page({
  data: {
    height: app.globalData.height,
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '我的优惠券', //导航栏 中间的标题
    },
    currentData: 0,
    coupon:[
      { price: 4200,unit:'元', describe: '满600元可用', name: '梅州旅游优惠券', date: '2018.10.20-2020.09.0', apply:'适用范围：所有产品可用'},
      { price: 4200, unit: '元',describe: '满600元可用', name: '梅州旅游优惠券', date: '2018.10.20-2020.09.0', apply: '适用范围：所有产品可用' },
      { price: '兑换券', describe: '无门槛', name: '梅州旅游优惠券', date: '2018.10.20-2020.09.0', apply: '适用范围：所有产品可用' },
    ],
    coupon_invalid: [
      { price: 4200, unit: '元', describe: '满600元可用', name: '梅州旅游优惠券', date: '2018.10.20-2020.09.09', apply: '适用范围：所有产品可用', invalid: 1 },
      { price: 4200, unit: '元', describe: '满600元可用', name: '梅州旅游优惠券', date: '2018.10.20-2020.09.09', apply: '适用范围：所有产品可用', invalid: 2 },
    ],
  },
  onLoad:function(){
    
  },
  //获取当前滑块的index
  bindchange: function (e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function (e) {
    const that = this;

    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {

      that.setData({
        currentData: e.target.dataset.current
      })
    }
  }
})