首页 > 小程序教程 > 微信小程序赞赏生姜头金钱赞赏首页设计制作开发教程

微信小程序赞赏生姜头金钱赞赏首页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序赞赏生姜头金钱赞赏首页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
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;
}
三、js页面代码如下:
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 });//取消选中
      }
    });
  }
})

模板简介:该模板名称为【微信小程序赞赏生姜头金钱赞赏首页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 16,847次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-23
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 自适应 html5 微信文章 微信图片 企业网站 单页式简历模板 表格式简历模板 微信素材 微信模板
您可能会喜欢的其他模板