<view class="container">

  <!-- 头部 -->
  <view class="header">
    <view class="group">
      <image src="{{logo}}" />
      <text class="name">{{title}}</text>
    </view>
  </view>

  <!-- 分割线 -->
  <view class="line"></view> 

  <!-- 金额列表 -->
  <view class="price-list">
    <view class="item" wx:for="{{prices}}" wx:key="item" data-item="{{item}}" bindtap="selectItem">
      <view class="price-box {{selected==item?'active':''}}">
        <em><text class="price">{{item}}</text>  元</em> 
      </view>
    </view>
  </view>

</view>

page {
  background-color: #fbf9fe;
}

.container {
  width: 100%;
  margin-bottom: 10rpx;
}

.header {
  width: 100%;
  height: 320rpx;
  border-radius: 50%;
  background-color: #d55a4a;
  margin-top: -160rpx;
  position: relative;
}

.header .group {
  width: 100%;
  position: absolute;
  bottom: -200rpx;
  text-align: center;
}

.header image {
  width: 196rpx;
  height: 196rpx;
  border-radius: 50%;
}

.header .name {
  width: 100%;
  display: inline-block;
  margin-top: 30rpx;
  color: #4e5b65;
}

.line {
  display: block;
  width: 600rpx;
  margin: 0 auto;
  height: 1px;
  background-color: #dddddd;
  margin-top: 300rpx;
  margin-bottom: 100rpx;
}

.price-list {
  padding: 0 15rpx;
  text-align: center;
  flex-direction: row;
}

.price-list .item {
  float: left;
  margin-right: 10rpx;
  margin-left: 10rpx;
  margin-bottom: 20rpx;
  width: 220rpx;
}

.price-list .price-box {
  width: 100%;
  height: 100rpx;
  border-radius: 20rpx;
  border: 1rpx solid #d55a4a;
  text-align: center;
}

.price-list .price-box em {
  line-height: 100rpx;
  color: #d55a4a;
  font-size: 30rpx;
}

.price-list .price-box .price {
  font-size: 50rpx;
  display: inline-block;
}

.price-list .price-box.active {
  background-color: #d55a4a;
}

.price-list .price-box.active em {
  color: #fff;
  background-color: #d55a4a;
}

import nami from '../../nami/index';
var app = getApp();

Page({
  data: {
    logo: '/images/logo.jpg',
    title: '全栈生姜头',
    prices: [
      1, 5, 18, 48, 98, 188
    ]
  },

  /**
   * 进入页面
   */
  onLoad: function () {
    console.log("进入首页");

  },

  /**
   * 分享
   */
  onShareAppMessage: function () {
    return {
      title: '赞赏全栈生姜头',
      desc: '点滴支持,是我继续坚持的动力',
      path: '/pages/index/index'
    }
  },

  /**
   * 选中赞赏金额
   */
  selectItem: function (event) {
    var total = event.currentTarget.dataset.item;
    var that = this;
    that.setData({ selected: total });

    nami.request({
      loading: true,
      url: '/request/scholes_pay/pay.groovy',
      data: {
        total: total * 100
      },
      success: function (res) {
        console.log("获取支付密匙", res);

        wx.requestPayment({
          timeStamp: '' + res.data.signature.timestamp,
          nonceStr: res.data.signature.nonce,
          package: res.data.signature.pack,
          signType: 'MD5',
          paySign: res.data.signature.signature,
          success: function (res) {
            app.data.rankLoaded = false;//通知排行榜重新加载
            wx.showToast({
              title: '支付成功,感谢',
              icon: 'success'
            });
          },
          fail: function (res) {
            wx.showToast({
              title: '已取消支付',
              icon: 'success'
            });
          },
          complete: function () {
            that.setData({ selected: 0 });//取消选中
          }
        });

      },
      fail: function (res) {
        //弹出对话框提示支付失败信息
        wx.showModal({
          showCancel: false,
          title: '提示',
          content: res.data.msg,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              nami.getUserInfo((userInfo) => {
                console.log("已获取数据", userInfo);
                app.data.userInfo = userInfo;
              }, () => {
                console.log("用户拒绝提供信息");
              });
            }
          }
        });
        that.setData({ selected: 0 });//取消选中
      }
    });
  }
})