<view class="container">
  <scroll-view class="content" style="height:100%;" scroll-y="true">
    <view class="content__title">
      <view class="title__desc">我的优惠卷</view>
    </view>
    <view class="content-card" wx:for="{{cardArray3}}" wx:for-item="card" hidden="{{orderHidden}}">
      <view class="card-left">
        <image src="{{card.url}}"></image>
      </view>
      <view class="card-right">
        <view class="card__desc">
          <view class="h3">{{card.name}}</view>
        </view>
        <view class="right-footer">
          <button class="weui-btn look__btn" type="primary">查看详情</button>
          <view>{{card.dateline}}</view>
        </view>
      </view>
      <view class="card__tag">
        <view><image src="../../image/kcoin.png"></image>商城</view>
      </view>
    </view>
    <view class="content__footer"></view>
  </scroll-view>
  <view class="footer">

  </view>
</view>

.container {
    height: 667px;
    background-color: #f2f2f2;
    width: 375px;
    overflow: hidden;
    position: relative;
}
.title__desc {
    text-align: center;
    width: 25%;
    display: inline-block;
    font-size: 12px;
    color: #a9a9a9;
}
.content {
  margin-top: 20px;
}
.content .title__desc {
  position: relative;
  width: 100%;
  text-align: center;
}
.content .title__desc::before{
  content:' ';
  position: absolute;
  height: 1px;
  width: 128px;
  top: 8px;
  left: 20px;
  background-color: #d6d6d3;
}

.content__title {
  position: relative;
}
.content__title:before {
  content:' ';
  position: absolute;
  height: 1px;
  width: 128px;
  top: 18px;
  left: 226px;
  background-color: #d6d6d3;
}
.content-card {
    margin-top: 10px;
    width: 298px;
    height: 168px;
    display: flex;
    flex-direction: row;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 1px 8px #d6d3d3, 0 0 1px #d6d3d3, 0 0 1px#d6d3d3;
    background-color: #fff;
    margin-left: 38px;
}

.card-left {
    flex: 6;
    height: 168px;
    line-height: 168px;
    border-right: 2px dotted#d6d3d3;
}

.card-right {
    flex: 4;
}

.card__tag {
    top: -3px;
    left: 5px;
    position: absolute;
}

.card__desc {
    margin-left: 5px;
    margin-top: 15px;
}

.card__desc .price {
    margin-top: 0;
    color: #ba3337;
    font-size: 12px;
}

.card-left image {
    width: 160px;
    height: 140px;
}

.card__desc image {
    height: 12px;
    width: 12px;
    vertical-align: middle;
}

.h3 {
    color: #000;
    font-weight: 500;
    font-size: 14px;
    opacity: .7;
}

.right-footer {
    margin-top: 40px;
    text-align: center;
}

.look__btn {
    width: 100px;
    height: 25px;
    line-height: 25px;
}

.look__btn {
    font-size: 12px;
    color: #fff;
    text-align: center;
}

button[type="primary"] {
    background-color: #ba3337;
}

button[type="primary"]:hover {
    background-color: #ba3337;
}

.right-footer view {
    margin-top: 20px;
    font-size: 8px;
    color: #d6d3d3;
}

.card__tag {
    background-color: #ba3337;
    text-align: center;
    color: #fff;
    font-size: 8px;
    border-radius: 5px;
    padding: 3px 12px 3px 12px;
}

.card__tag image {
    height: 8px;
    width: 8px;
    vertical-align: middle;
    margin-right: 3px;
}
.content__footer {
  height: 350px;
  width: 100%;
  text-indent: -999;
}

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    cardArray2: [
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_92976.jpg',
        name: '香甜栗米棒',
        price: '8,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_93011.jpg',
        name: '香辣鸡腿堡',
        price: '49,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_93095.jpg',
        name: '新奥尔烤翅',
        price: '36,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/258_108207.jpg',
        name: '伴柠檬橘鲜果茶',
        price: '44,000',
        dateline: '有效期至2017年04月30日'
      }
    ],
    cardArray3: [
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_93011.jpg',
        name: '香辣鸡腿堡',
        price: '49,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/258_108207.jpg',
        name: '伴柠檬橘鲜果茶',
        price: '44,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_93095.jpg',
        name: '新奥尔烤翅',
        price: '36,000',
        dateline: '有效期至2017年04月30日'
      },
      {
        url: 'http://imgm.4008823823.com.cn/kfcmwos/img//S/237_92976.jpg',
        name: '香甜栗米棒',
        price: '8,000',
        dateline: '有效期至2017年04月30日'
      }
    ]
  },
  onReady: function () {
    wx.setNavigationBarTitle({
      title: '我的卡包'
    })
  },
  //事件处理函数
  onLoad: function () {
    console.log('onLoad')
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 0,
      mask: true
    })
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
    setTimeout(function () {
      wx.hideToast();
    },2000/**/)
  }
})