小程序--确认订单

最新推荐文章于 2024-07-16 11:29:09 发布
最新推荐文章于 2024-07-16 11:29:09 发布
阅读量4.3k 收藏 25
点赞数 4
分类专栏： 懒得写页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Acitylion/article/details/89552134
版权 

<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<view class="order_address" bindtap="bindaddress">
    <view class="select_address"><text class="iconfont icon-map_line-"></text>点击去选择地址</view>
    <view><text class="iconfont icon-arrowright"></text></view>
</view>
<view class="Receiving_address" bindtap="bindaddress">
    <view>
        <view class="name_iphone">天津 天津市 津南区</view>
        <view class="address">天安门后广场</view>
        <view class="name_iphone">张三 1313212313</view>
    </view>
    <view><text class="iconfont icon-arrowright"></text></view>
</view>

<view class="goods_msg">
    <view class="goods_img"><image src="../../images/img.png" mode="widthFix"></image></view>
    <view class="goods_content">共1件 <text class="iconfont icon-arrowright"></text></view>
</view>

<view class="msg_list">
    <view class="msg_item">
        <view>商品原价</view>
        <view>￥11.8</view>
    </view>
    <view class="msg_item">
        <view>配送费</view>
        <view>包邮</view>
    </view>
    <view class="msg_item">
        <view>商品优惠</view>
        <view>-￥11.8</view>
    </view>
    <view class="Total">
       合计 <text class="Total_price">￥9.8</text>
    </view>
</view>

<view class="order_pay">
    <view class="pay_money">付款 <text class="Total_price">￥9.8</text></view>
    <view class="submit_order" bindtap="bindSubmitOrder">提交订单</view>
</view>
@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";
page {
    background-color: #f3f3f3;
}
.order_address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 160rpx 20rpx 20rpx;
    height: 200rpx;
    line-height: 200rpx;
    background: white;
    border-radius: 10rpx;
    padding: 30rpx;
}
.Receiving_address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx;
    height: 200rpx;
    background: white;
    border-radius: 10rpx;
    padding: 30rpx;
}
.name_iphone {
    color: #7e7e7e;
    font-size: 24rpx;
}
.address {
    font-size: 32rpx;
    padding: 20rpx 0;
}
.select_address {
    color: #7e7e7e;
}
.icon-arrowright {
    font-size: 28rpx;
}
.icon-map_line- {
    margin-right: 10rpx;
}
.goods_msg {
    display: flex;
    margin: 20rpx;
    background: white;
    border-radius: 10rpx;
    padding: 30rpx;
    align-items: center;
}
.goods_img {
    width: 100rpx;
    height: 100rpx;
    overflow: hidden;
    margin-right: 20rpx;
    flex-shrink: 0;
}
.goods_img image {
    width: 100%;
    border-radius: 50%;
}
.goods_content {
    flex: 1;
    text-align: right;
    font-size: 24rpx;
}
.msg_list {
    margin: 20rpx;
    background: white;
    border-radius: 10rpx;
}
.msg_item {
    display: flex;
    justify-content: space-between;
    margin: 0 20rpx;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f3f3f3;
}
.Total {
    text-align: right;
    margin: 0 20rpx;
    padding: 30rpx 0;
    font-size: 32rpx;
}
.Total_price {
    color: #ad0e12;
    font-size: 32rpx;
}
.order_pay {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 93rpx;
    line-height: 93rpx;
    justify-content: space-between;
    background: white;

}
.submit_order {
    width: 32%;
    background: #ad0e12;
    color: white;
    font-size: 32rpx;
    text-align: center;
}
.pay_money {
    font-size: 32rpx;
    margin-left: 30rpx;
}
// pages/confirm_order/confirm_order.js
const app = getApp();
var MBC = require("../../../../core/core.js");
var api = require("../../../../config/api.config.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address_info: {}, //地址信息
    goods_info: [], //商品信息
    goods_count: '', //商品件数
    goods_freight: '', //运费
    goods_price: '', //商品价格
    total_price: '', //合计价格
    item: {
      iconfontBack: "icon-arrowleft",
      navigationBarTitle: "确认订单",
      statusBarHeight: app.globalData.statusBarHeight
    },
    statusBarHeight: app.globalData.statusBarHeight,
    goods_id: '', //商品id
    goods_num: '', //商品数量
    type: '', //选项
    order_message: '', //订单留言
    cart_ids: [], // 购物车商品id
  },
  //选择地址
  bindaddress: function() {

    var type = this.data.type;

    if (type == 1) {
      var goods_id = this.data.goods_id;
      var goods_num = this.data.goods_num;
      wx.navigateTo({
        url: '../myAddress/myAddress' + '?goods_id=' + goods_id + '&goods_num=' + goods_num + '&type=' + type
      })
    } else {
      var cart_ids = JSON.stringify(this.data.cart_ids);
      wx.navigateTo({
        url: '../myAddress/myAddress?cart_ids=' + cart_ids + '&type=' + type
      })
    }


  },
  // 留言
  bindwaitMsg: function(event) {
    console.log(event.detail.value);
    this.setData({
      order_message: event.detail.value, // 订单留言
    })
  },


  /**
   * 支付订单
   */
  payOrder: function(orderHash, order_id) {
    var that = this;
    var order_hash = orderHash;
    console.log(order_hash)
    //呼起微信支付
    MBC.Ajax({
      url: api.getPayConfig,
      is_login: true,
      data: {
        hash: order_hash,
        platform: 'miniProgram',
        channel: 'weixin'
      },
      success: function(res) {
        wx.requestPayment({
          'timeStamp': res.result.parameters.timeStamp,
          'nonceStr': res.result.parameters.nonceStr,
          'package': res.result.parameters.package,
          'signType': 'MD5',
          'paySign': res.result.parameters.paySign,
          'success': function(res) {
            console.log(res);
            MBC.Ajax({
              url: api.payOrder,
              is_login: true,
              data: {
                hash: order_hash
              },
              success: function(res) {
                console.log(res)
                var status = res.result.status;
                if (status == 2) {
                  wx.showToast({
                    title: '支付成功',
                  });
                  wx.redirectTo({
                    url: '../orderInfo/orderInfo?order_id=' + order_id,
                  })

                } else {
                  wx.showToast({
                    title: '支付失败，请稍后刷新',
                  })
                }

              }
            })
          },
          'fail': function(res) {
            console.log(res);
            wx.redirectTo({
              url: '../orderInfo/orderInfo?order_id=' + order_id,
            })
          }
        })
      }
    })

  },
  //  提交订单
  bindSubmitOrder: function(e) {
    var form_id = e.detail.formId;
    var that = this;
    var type = this.data.type;
    if (type == 1) {
      MBC.Ajax({
        url: api.submit,
        is_login: true,
        data: {
          form_id: form_id,
          order_message: this.data.order_message, //地址信息
          address_id: this.data.address_info.address_id, //地址id
          receiver_name: this.data.address_info.receiver_name, //收件人姓名
          receiver_phone: this.data.address_info.receiver_phone, //收件手机号
          receiver_city: this.data.address_info.city, //收件城市
          receiver_address_details: this.data.address_info.detail_address, //收件详细地址
          type: this.data.type, //选项
          goods_id: this.data.goods_id, //商品id
          goods_num: this.data.goods_num, //商品数量
        },
        success: function(res) {
          that.payOrder(res.result.hash, res.result.order_id);
        },
        fail: function(res) {

        }
      })
    } else if (type == 2) {
      MBC.Ajax({
        url: api.submit,
        is_login: true,
        data: {
          form_id: form_id,
          order_message: this.data.order_message, //地址信息
          address_id: this.data.address_info.address_id, //地址id
          receiver_name: this.data.address_info.receiver_name, //收件人姓名
          receiver_phone: this.data.address_info.receiver_phone, //收件手机号
          receiver_city: this.data.address_info.city, //收件城市
          receiver_address_details: this.data.address_info.detail_address, //收件详细地址
          type: this.data.type, //选项
          cart_ids: this.data.cart_ids, //购物车id
        },
        success: function(res) {
          that.payOrder(res.result.hash, res.result.order_id);
        },
        fail: function(res) {

        }
      })
    }

  },
  //返回上一页
  onBack: function() {
    wx.navigateBack({
      delta: 1
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    var type = options.type;
 
 
    if (type == 1) {
      that.setData({
        goods_id: options.goods_id,
        goods_num: options.goods_num,
        type: options.type,
      })
      // 立即购买
      //直接购买
      MBC.Ajax({
        url: api.confirm,
        is_login: true,
        data: {
          goods_id: that.data.goods_id,
          goods_num: that.data.goods_num,
          type: type
        },
        success: function (res) {
          console.log(res);
          that.setData({
            address_info: res.result.address_info, //地址信息
            goods_info: res.result.goods_info, //商品信息
            goods_count: res.result.goods_count, //商品件数
            goods_freight: res.result.goods_freight, //运费
            goods_price: res.result.goods_price, //商品价格
            total_price: res.result.total_price, //合计价格
          })

        },
        fail: function (res) {
          console.log(res);
          //获取信息失败
        }
      })
      
    } else {
      that.setData({
        type: options.type,
        cart_ids: JSON.parse(options.cart_ids),
      })
      //   购物车
      MBC.Ajax({
        url: api.confirm,
        is_login: true,
        data: {
          cart_ids: that.data.cart_ids,
          type: type
        },
        success: function (res) {
          console.log(res);
          that.setData({
            address_info: res.result.address_info, //地址信息
            goods_info: res.result.goods_info, //商品信息
            goods_count: res.result.goods_count, //商品件数
            goods_freight: res.result.goods_freight, //运费
            goods_price: res.result.goods_price, //商品价格
            total_price: res.result.total_price, //合计价格
          })

        },
        fail: function (res) {
          console.log(res);
          //获取信息失败
        }
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function(options) {
    var that = this;
    var goods_id = that.data.goods_id;
    var goods_num = that.data.goods_num;
    var type = that.data.type;
    var cart_ids = that.data.cart_ids;
    console.log(that.data.address_id);
    // if (type == 1) {
      
    // } else if (type == 2) {
      
    // }
    if (that.data.address_id){
      // 获取指定地址信息
      MBC.Ajax({
        url: api.getOne,
        is_login: true,
        data: {
          address_id: that.data.address_id
        },
        success: function (res) {
          that.setData({
            address_info: res.result.address_info
          })
        },
        fail: function (res) {

        }
      })
    }
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

 

Acitylion
关注
  • 4
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
微信小程序-预约
01-27
1. `pages`目录：存放小程序的各个页面组件，如首页、商品详情页、预约页面、订单确认页等。 2. `utils`目录：放置通用的工具函数，如网络请求封装、数据处理等。 3. `model`目录：可能包含订单模型，定义订单的数据...
微信小程序，我的订单（待付款和选项卡）
weixin_63954739的博客
10-03 2276
首先是wxml,由于后台一直没有写接口，用的都是假数据，不过大致功能是实现了的。
微信小程序下订单支付代码实现
艾小逗
06-17 7194
目录支付流程具体实现一、前端调用登录获取code二、服务端接收code，服务端调用微信api获取openId三、前端点击去支付时四、服务端请求微信统一下单接口五、前端获取到prePay_id 调起支付六、注意 支付流程 点击去结算时，，前端判断是否登录【未登录跳转到登录页】,登录发送code到服务端，服务端使用code发送请求去获取openId；并返回userId/openId存储在storage； 点击去支付时，前端发送请求【订单详细，openId】，服务器用openId去统一下单，下单成功后，获
微信小程序，我的订单（查看详情）
weixin_63954739的博客
10-04 1819
首先是wxml,根据我们之前写的页面的查看详情按钮添加一个按钮，跳转页面即可，现在是详情页面的wxml。
微信小程序立即下单和立即购买，收货地址四边形的线条样式，生成订单号，生成下单时间
weixin_63954739的博客
09-29 476
立即下单，通过购物车页面下单 ，还是本地存储的假数据，没有接口。在上上一个商品列表的立即购买下单按钮里添加点击事件以及js。首先两个下单页面是一样的，所以用的是同一个wxml。在上一个购物车的立即下单按钮里添加点击事件以及js。好了，现在该我们的下单页面数据的js。还有收货地址四边形的线条样式。通过商品详情页立即下单。
小程序商城全过程-附详细代码
一步一个脚印，踏实努力，向着目标前进
06-19 2274
由于小程序商城的代码非常复杂且涉及到很多方面，无法在这里一一列举出来。但是，我可以简单介绍一下小程序商城的代码结构和主要功能模块。小程序商城的代码结构通常包括以下几个主要目录和文件：pages目录：用于存放小程序的页面文件，每个页面通常由一个文件夹和至少两个文件组成，包括js文件、wxml文件和wxss文件。components目录：用于存放小程序的组件文件，组件可以在多个页面中复用。utils目录：用于存放小程序的工具文件，包括一些通用的函数、工具类等。
微信小程序-购物商城网站
06-09
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的、无需下载安装即可使用的在线服务。在这个“微信小程序-购物商城网站”项目中，我们探讨的是如何利用微信小程序框架来...
微信小程序-KFC小程序源码
06-16
KFC小程序中，可能会有从首页跳转到菜单页，再跳转到订单确认页的流程。 7. **支付功能**：作为餐饮行业的应用，KFC小程序肯定集成了微信支付功能，这需要调用微信支付的SDK，处理支付相关的逻辑，包括生成预支付...
微信小程序-扫码点餐
01-27
小程序中，检测为服务员之后，提交订单 不发起微信支付，直接下单，后端直接打印小票 微信小程序获取到的数据问题： type === '02'，里面的data 属性没有必要吧？一层就可以了 type === '03'，指的是推荐菜品，系统...
基于微信小程序-水果商城.zip
02-20
完成开发后，开发者需要在微信开发者工具中预览和测试小程序，确认无误后，通过上传代码至微信服务器，提交审核。审核通过后，小程序会出现在微信用户的发现栏中。同时，小程序支持热更新，开发者可以在后台发布新...
【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
时光隧道
10-09 1万+
订单创建是从用户下单开始的，当用户对商品进行下单后，系统会引导用户来到确认订单页面，此时系统会获取用户预下单的商品信息，同时判断商品是否涉及到优惠促销的信息，这些优惠券包括促销活动、优惠券、积分抵扣等，如果商品不参与优惠信息，则无此环节。
微信小程序确认收货组件wx.openBusinessView调用报错status:cencal
最新发布
Hd55169796643619的博客
07-16 1004
使用这个方法报错status: cancel的时候查到了这两句话，我不是特别理解，但是弹框一直调用不起来，然后状态一直status为cancel。沟通后才知道，在后台点击发货时要通知小程序官方，不然他们是不知道我们的订单状态，就不会知道这个单子已发货，从而就是status:cancel。小程序买商品=>后台点击发货并且调用小程序后天接口告知已发货=>微信收到服务通知商品发货通知=>点击确认收货才会调起弹框。status: cancel，检查目标订单号是否处于待收货状态，如果不是就不能调起确认收货组件。
微信小程序确认收货,微信确认收货提醒接口实现
Yang19950816的博客
04-02 855
【代码】微信小程序确认收货接口,微信确认收货提醒实现。
Java 微信小程序-确认收货提醒接口 对接代码
孤er尽悲欢绝的博客
11-13 493
Java 微信小程序-确认收货提醒接口 对接代码 可以直接拷贝使用
微信小程序订单页面
weixin_44267423的博客
08-17 1万+
微信小程序订单页面 先预览一下效果 html代码： <view class="order" wx:if="{{TabCur == 0}}"> <view class="content_"> <view class="title"> <view>订单编号：2018041729873019</view> <text>交易成功</text> </view> <view class="c
微信小程序-订单页面
热门推荐
ChibiMarukoChan的博客
09-28 4万+
说明：头部有一个三种预约状态的切换 wxml页面： <!-- 切换栏 --> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == item.index ? 'o...
订单（三）-跳转到订单确认页面——小程序页面生命周期-页面载入onLoad() 应该在第一次显示页面的时候调用
weixin_44867717的博客
10-29 1584
跳转到订单确认页面 第一步：在pages文件夹下新建文件夹订单order文件夹 新建入口文件main.js import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount() 购物车跳转方式 // 调用接口生成订单 request('my/orders/create', param, 'post', { Authorization: token }
微信小程序点击选项卡跳转到订单页对应列表
青衫折扇的博客
03-25 3907
我们先看一下效果图: 接下来我们来看看代码吧: 个人中心WXML <view class="order-form"> <view class="order-cell"> <view class="cell" bindtap="noPay"> <image class="cell-img" src="../../../...
小程序 提交订单 选择支付类型 demo
每天进步一点点
08-29 2978
概要： 支付类型 分为：微信支付、会员卡支付、到店支付。如果改用户不是会员 会员卡支付隐藏掉 通过元素属性hidden灵活的切换支付类型 目录 小程序代码：wxml 小程序代码：wxss 小程序代码：js 小程序代码：wxml <import src="../../wxParse/wxParse.wxml" /> <view class='contain...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值