微信小程序-购买系列

其他 2018-12-12 11:10:56 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/84346165

效果：

功能说明：购买当前浏览的课程，点击立即购买按钮，从下方弹出小页面，显示课程信息，用户选择购买数量，再次点击购买，弹出购买信息及金额，等待用户确认，进入支付页面。

.wxml页面：

<view class="container" wx:for="{{goodsDetail}}" wx:key="">
   <!--图片-->
  <view class="image-border">
    <image src="{{item.pic}}" class="slide-image" />
  </view>
  <!--课程基本信息-->
  <view class="goods-info">
    <view class="goods-title">{{item.name}}</view>
    <view class="detail">
      <view class="detail-cont">课程教练：{{item.classCoach}}</view>
      <view class="detail-cont">适应人群: {{item.classPerson}}</view>
      <view class="detail-cont">课程内容：{{item.classContent}}</view>
       <view class="detail-cont import">课程价格：{{item.classprice}}元/节</view>
    </view>
  </view>
  <!--课程介绍-->
  <view class="goods-des-info">
    <view class="label-title">课程介绍</view>
    <view class="goods-text">{{item.introduce}}</view>
  </view>
  <view class="footer-box">
    <view class="now-buy" bindtap="tobuy">立即购买</view>
  </view>
  <!--二级购买详情-->
  <view class="show-popup" hidden="{{hideShopPopup}}">
    <view class="popup-mask" bindtap="closePopupTap"></view>
    <view class="popup-contents">
      <view class="pop-goods-info">
        <view class="pop-img-box">
          <image src="{{item.pic}}" class="goods-thumbnail" />
        </view>
        <view class="pop-goods-des">
          <view class="pop-goods-title">{{item.name}}</view>
        </view>
        <view class="pop-goods-close" bindtap="closePopupTap"></view>
      </view>
      <view class="buy-num-box">
        <view class="num-label">购买数量</view>
        <view class="num-box">
          <view class="num-jian {{minusStatus}}" bindtap="bindMinus">-</view>
          <view class="num-input">
            <input type="number" value="{{num}}" />
          </view>
          <view class="num-jia" bindtap="bindPlus">+</view>
        </view>
      </view>
      <view class="popup-join-btn" data-name="{{item.name}}" data-price="{{item.classprice}}" bindtap="tobuysubmit">
        立即购买
      </view>
    </view>
  </view>
</view>

<modal title="购买确认" hidden="{{modalHidden}}"  bindconfirm="modalHide" bindcancel="modalHideCancle">
    <view class="zan-font-15">
        <text>{{modalContent}}</text>
    </view>
</modal>

对应的CSS样式：


.container {
  background-color: #f2f2f2;
  width: 100%;
}

.image-border {
  height: 250px;
  width: 100%;
  text-align: center;
  background-color: #ffff
}

.slider-image {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height: 748rpx;
}

.goods-info {
  background-color: #fff;
  margin-bottom: 24rpx;
  width: 100%;
}

.goods-info .goods-title {
  box-sizing: border-box;
  padding: 0 45rpx;
  font-size: 32rpx;
  line-height: 1.4;
  color: #000;
}

.goods-info .goods-price {
  box-sizing: border-box;
  padding: 0 35rpx;
  color: #e64340;
  font-size: 28rpx;
  font-weight: bold;
}
.detail{
  padding:5px 30px;
  font-size:12px;
}
.detail-cont{
  width:100%;
  float:left;
}


.goods-des-info {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding-bottom: 50px;
}

.label-title {
  font-size: 28rpx;
  color: #000;
  padding: 30rpx;
}

.goods-text {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 56rpx;
  margin-bottom: 30rpx;
}

.footer-box {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  box-shadow: 0 0 8rpx 0;
}

.footer-box .now-buy {
  text-align: center;
  height: 100%;
  width: 100%;
  line-height: 100rpx;
  background-color: #e64340;
  color: #fff;
  font-size: 34rpx;
}

.show-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.popup-contents {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 6;
}

.pop-goods-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 30rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.pop-img-box {
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  margin-right: 26rpx;
}

.pop-img-box .goods-thumbnail {
  width: 120rpx;
  height: 120rpx;
}

.pop-goods-title {
  width: 484rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 26rpx;
  color: #000;
}

.pop-goods-price {
  font-size: 26rpx;
  color: #e64340;
  margin-top: 20rpx;
}

.pop-goods-close {
  width: 36rpx;
  height: 36rpx;
  flex: 1;
  background: url("../../images/close.png") no-repeat center center;
  background-size: 36rpx auto;
  align-self: flex-start;
  margin-top: -10rpx;
}

.buy-num-box {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 30rpx 48rpx 0;
  margin-left: 30rpx;
  margin-top: 30rpx;
  align-items: center;
}

.num-label {
  font-size: 26rpx;
  color: #000;
}

.buy-num-box .num-box {
  display: flex;
}

.buy-num-box .num-box .num-jian, .buy-num-box .num-box .num-input,
.buy-num-box .num-box .num-jia {
  width: 80rpx;
  height: 64rpx;
  line-height: 62rpx;
  text-align: center;
  border: 1px solid #eee;
}

.buy-num-box .num-box .num-input {
  font-size: 28rpx;
}

.buy-num-box .num-box .num-input input {
  height: 100%;
}

.popup-join-btn {
  width: 100%;
  height: 89rpx;
  text-align: center;
  line-height: 89rpx;
  font-size: 34rpx;
  color: #fff;
  background-color: #e64340;
}
.import{
  color: #e64340;
  font-weight: bolder
}
.buy-num-box .num-box .hui {
  background-color: #f5f5f9;
}


.zan-font-15 {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 23px;
}

对应的ｊｓ页面：


Page({
  data: {
    goodsDetail: [{
      id: 11,
      categoryId: 1,
      classCoach: '王教练',
      classPerson: 'BMI 15 - 20 增肌需求',
      classContent: '理论讲解、训练 规 划、指导器材使用等',
      classprice: '150',
      name: "塑形训练初级课程",
      pic: "../../images/gym/3.png",
      introduce: "每节课上课时间为1h,上课内容教练依据个人情况会有不同类型调整.该课程是在体态正确的基础上来学习如何进行优雅的肢体与气质展现。课程从人体正确的解剖结构和体位出发，运用多种功能性和趣味性并重的动作组合训练方式，纠正日常行、坐、立中不正确的行为习惯，增强肢体活动的韵味美感，掌握女性在举手投足中展现高贵、脱俗的气质，最终达到优雅体态与迷人神韵的完美结合。马妮老师在对北京奥运会礼仪志愿者的培训中运用了很多此课程的内容，礼仪小姐们在奥运会上举手投足间所散发出来的东方女性迷人魅力，征服了来自五大洲的国际客人，得到广泛赞誉！"
    }],
    hideShopPopup: true,
    num: 1,
    modalHidden: true
  },
  onLoad: function (e) {
    let id=e.id;
    let that = this; 
  },
  /* 点击减号 */
  bindMinus: function () {
    var num = this.data.num;
    if (num > 1) {
      num--;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },
  /* 点击加号 */
  bindPlus: function () {
    var num = this.data.num;
    num++;
    var minusStatus = num < 1 ? 'disabled' : 'normal';
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },
  /* 关闭购买页面 */
  closePopupTap:function(){
    this.setData({
      hideShopPopup: true
    })  
  },
  tobuy: function () {
    this.setData({
      hideShopPopup: false,
    })
  },
  /*确认购买 */
  tobuysubmit: function (e) {
    let name = e.currentTarget.dataset.name;
    let price = e.currentTarget.dataset.price;
    let num = this.data.num ;
    let priceTotal = price * num;
    this.setData({
      modalContent: '请确认您预定的课程信息\r\n课程名称: ' + name + '\r\n课时数量: ' + num+ '节' + '\r\n课时总价格: ' + priceTotal+'元'+'\r\n请检查无误后点击确认',
      modalHidden: false
    });
  },
 /*购买弹窗确认*/
  modalHide: function () {
    this.setData({
      modalContent: '',
      modalHidden: true
    });
    //进入支付页面

  },
  /*购买弹窗取消*/
  modalHideCancle: function () {
    this.setData({
      modalContent: '',
      modalHidden: true
    });
  } 
})

说明：

goodsDetail一般是根据id请求,请求方法如下:

  wx.request({
      url: '',
      data: {
        categoryId: categoryId
      },
      success: function(res) {
        //如果拿到的res.data直接是你需要的格式
        that.setData({
          goodsDetail: res.data,
        });
      }
    })

猜你喜欢

转载自blog.csdn.net/ChibiMarukoChan/article/details/84346165
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022