微信小程序-购买系列

最新推荐文章于 2023-09-29 10:00:00 发布

原创

最新推荐文章于 2023-09-29 10:00:00 发布 · 2.7k 阅读

17 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中创建购买流程。当用户点击立即购买时，会弹出小窗口展示课程详情，允许选择购买数量，并在确认后进入支付页面。实现过程中涉及.wxml、CSS样式和JS页面的交互，通过商品ID请求获取详细信息。

效果：

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

.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>

最低0.47元/天解锁文章