订单详情页面的操作方法

Original 2019-01-04 15:38:18 453
abstract:总结:本章主要学习到了,查询到订单数据和商品数据,赋值到前端模板,以及两个按钮的实现,去支付和取消订单,了解到了操作的逻辑,对于数据的传参理解还不是很清楚,希望能通过多看几遍视频能明白。、 /********************  order_details.wxml  *************************/ <!--pages/my
总结:本章主要学习到了,查询到订单数据和商品数据,赋值到前端模板,以及两个按钮的实现,去支付和取消订单,了解到了操作的逻辑,对于数据的传参理解还不是很清楚,希望能通过多看几遍视频能明白。、
/********************  order_details.wxml  *************************/
<!--pages/my/order_details.wxml-->
<view class="fui-page order-create-page fui-page-current" style='height:100%;'>
<view class='fui-content navbar'>
<view class="order_detail_header">
<view class="order_detail_ststus">
<view>订单号: {{orders.order_no}}</view>
<view wx:if="{{orders.status == 0}}">等待付款</view>
<view wx:if="{{orders.status == 1}}">已付款 待发送</view>
<view wx:if="{{orders.status == 2}}">已完成</view>
<view>订单金额:¥ {{orders.money}}</view>
</view>
</view>
<!-- 地址 -->
<view class="fui-list-group">
<view class="fui-list">
<view class="fui-list-inner">
<view class="title">
收货人:
<span class="realname">{{orders.name}}</span>
<span class="mobile">{{orders.phone}}</span>
</view>
<view class="title">
<span class="address">{{orders.address}}</span>
</view>
</view>
</view>
</view>
<!-- 地址end -->
<!-- 商品 -->
<view class='fui-shop'>
<view class='fui-shop-list' wx:for="{{list}}" wx:key="">
<view class="fui-shop-list-media">
<image class="img" src="{{item.shop.imgs}}"></image>
</view>
<view class="shops" style='folat:left'>
<view class="subtitle">{{item.shop.title}}</view>
</view>
<view class="fui-list-angle">
<span style="font-size: 0.65rem;color: #000">¥<span class="marketprice">{{item.count}}</span></span>
<view style='color: #999;'>x{{item.price}}</view>
</view>
</view>
</view>
<!-- 商品end -->
<!-- 买家留言 -->
<view class="fui-cell-group">
<view class="fui-cell fui-cell-textarea">
<view class="fui-cell-label">
买家留言
</view>
<view class="fui-cell-info">
<textarea class='textarea' rows="2" disabled="true">{{orders.desc}}</textarea>
</view>
</view>
</view>
<!-- 买家留言end -->
<!-- 按钮 -->
<view class="fui-navbar" wx:if="{{orders.status == 0}}">
<button class="nav-item btn buybtn" style='background:#666;' bindtap="cancelOrder" data-id='{{orders.id}}'>取消订单</button>
<button class="nav-item btn btn-danger buybtn" bindtap="goPay" data-id='{{orders.id}}'>立即支付</button>
</view>
<!-- 按钮end -->
</view>
</view>
/**********************  order_details.js  **************************************/
// pages/my/order_details.js
const app = getApp();
var com = require("../../utils/util.js");
Page({
/**
  * 页面的初始数据
  */
data: {
orders : {},
list   : {},
},
/**
  * 生命周期函数--监听页面加载
  */
onLoad: function (e) {
com.post('Api/Home/order_details', { id: e.id }, "setContent", this);
},
setContent : function(e){
this.setData({
orders: e.orders,
list: e.product
});
},
/**
  * 取消订单,只能未支付的可以取消
  */
cancelOrder : function(e){
com.post('Api/Home/cancel_order', { id: e.currentTarget.dataset.id }, "cancelAfter", this);
},
cancelAfter : function(e){
wx.navigateBack({
delta: 2
})
},
/**
  * 支付按钮,调用原生微信支付
  */
goPay : function(e){
wx.requestPayment({
'timeStamp': '',
'nonceStr': '',
'package': 'prepay_id=1',
'signType': 'MD5',
'paySign': '',
'success': function (res) {
},
'fail': function (res) {
}
})
}
})


Correcting teacher:查无此人Correction time:2019-01-04 16:08:53
Teacher's summary:做的不错,传参常用的几种,自定义绑定事件传值,url传值,微信触发事件传值。可以参考下微信文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

Release Notes

Popular Entries