1

pages/mine/mineOrder/mineOrderDetails/mineOrderDetails.js

+let app = getApp();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    details: {
+    },
+    CorderId: 0
+  },
+  init: function (){
+    let id = this.data.CorderId
+    app.$api('ShopOrder_get_GetCommodityOrderDetailsService', { CorderId: id }).then(res => {
+      console.log(res)
+      this.setData({
+        CorderId: id,
+        details: res
+      })
+    }).catch(err => {
+      wx.showToast({
+        title: err.message,
+        icon: 'none',
+        duration: 2000
+      })
+    })
+  },
+  cancelOrder: function () {
+    let id = this.data.CorderId
+    let _this = this;
+    wx.showModal({
+      title: '提示',
+      content: '是否取消？取消后不可恢复！',
+      success(res) {
+        if (res.confirm) {
+          app.$api('ShopOrder_post_CancelOrderStatusService', { CorderId: id }).then(res => {
+            wx.showToast({
+              title: '删除成功',
+              icon: 'none',
+              duration: 2000
+            })
+            _this.init()
+          }).catch(err => {
+            wx.showToast({
+              title: err.message,
+              icon: 'none',
+              duration: 2000
+            })
+          })
+        } else if (res.cancel) {
+
+        }
+      }
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      CorderId: options.id
+    })
+    this.init()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

pages/mine/mineOrder/mineOrderDetails/mineOrderDetails.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

pages/mine/mineOrder/mineOrderDetails/mineOrderDetails.wxml

+<view class="mineOrderDetails commonF">
+  <view class="top-nav">
+    <view wx:if="{{details.COrderState === 1}}">
+      <image src="/images/mine/daifahuo.png"></image>
+      <text class="c30 cff">{{details.COrderStateStr}}</text>
+    </view>
+    <view wx:if="{{details.COrderState === 2}}">
+      <image src="/images/mine/yifahuo.png"></image>
+      <text class="c30 cff">{{details.COrderStateStr}}</text>
+    </view>
+    <view wx:if="{{details.COrderState === 3}}">
+      <image src="/images/mine/yiwancheng.png"></image>
+      <text class="c30 cff">{{details.COrderStateStr}}</text>
+    </view>
+    <view wx:if="{{details.COrderState === 4}}">
+      <image src="/images/mine/daifahuo.png"></image>
+      <text class="c30 cff">{{details.COrderStateStr}}</text>
+    </view>
+  </view>
+  <view class="wuliu-info">
+    <image src="/images/mine/wuliu.png"></image>
+    <view>
+      <view>
+        <view class="f28 c55">该包裹已经签收</view>
+        <view class="f22 c88">2019-07-28 16:44:35</view>
+      </view>
+      <image src="/images/product/right.png"></image>
+    </view>
+  </view>
+  <view class="addr-info">
+    <view class="name-tel f28 c11">
+      <text>{{details.LinkMan}}</text>
+      <text>{{details.LinkTel}}</text>
+    </view>
+    <view class="dizhi">
+      <image src="/images/mine/dingwei2.png"></image>
+      <view class="text2 f28 c33">{{details.DetaileAddress}}</view>
+    </view>
+  </view>
+  <view class="Gray30"></view>
+  <view class="sett-pro-item" wx:for="{{details.OrderDetailsList}}" wx:key="index2" wx:for-item="item2">
+    <view class="left">
+      <image mode="aspectFit" src="{{item2.FlowImgList[0]}}"></image>
+    </view>
+    <view class="right c11 bold">
+      <view class="f26 text2">{{item2.CommodityName}}</view>
+      <view class="price">
+        <view class="f28">￥ {{item2.CommodityPrice}}</view>
+        <view class="f22 c88">x{{item2.CommodityNum}}</view>
+      </view>
+    </view>
+  </view>
+  <view class="Gray30"></view>
+  <view class="c11 pay-info">
+    <!-- <view>
+      <text class="f26">商品金额</text>
+      <text class="f30">¥579.8</text>
+    </view>
+    <view>
+      <text class="f26">税费</text>
+      <text class="f30">¥579.8</text>
+    </view>
+    <view>
+      <text class="f26">运费</text>
+      <text class="f30">¥579.8</text>
+    </view> -->
+    <view>
+      <text class="f26">应付</text>
+      <text class="f30 cee">¥{{details.PreferPrice}}</text>
+    </view>
+    <view>
+      <text class="f26">实付</text>
+      <text class="f30 cee">¥{{details.RealityPrice}}</text>
+    </view>
+  </view>
+  <view class="Gray30"></view>
+  <view class="pay-info c66 f24">
+    <!-- <view>订单编号：190103-595741246231010</view> -->
+    <view>下单时间：{{details.CreateTimeStr}}</view>
+  </view>
+  <view class="Gray30"></view>
+  <view class="btn-box" wx:if="{{details.COrderState !== 0}}">
+      <view class="f30 c99" wx:if="{{details.COrderState === 2}}" bindtap="cancelOrder">取消订单</view>
+      <view class="f30 cee pay" wx:if="{{details.COrderState === 2}}">去支付</view>
+      <view class="f30 c99" wx:if="{{details.COrderState === 6}}">查看物流</view>
+    </view>
+</view>
\ No newline at end of file

pages/mine/mineOrder/mineOrderDetails/mineOrderDetails.wxss

+.top-nav{
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  background:linear-gradient(90deg,rgba(226,20,54,1),rgba(253,78,107,1));
+}
+.top-nav view{
+  display: flex;
+  align-items: center;
+}
+.top-nav view image{
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+.top-nav view{
+  padding: 0 30rpx;
+}
+.wuliu-info{
+  display: flex;
+  padding: 30rpx;
+}
+.wuliu-info>image{
+  width: 34rpx;
+  height: 32rpx;
+  margin-right: 13rpx;
+  margin-top: 10rpx;
+}
+.wuliu-info>view{
+  display: flex;
+  flex: 2;
+  justify-content: space-between;
+  align-items: center;
+}
+.wuliu-info>view>view{
+  flex: 2;
+}
+.wuliu-info>view image{
+  width: 12rpx;
+  height: 20rpx;
+}
+.addr-info{
+  padding: 30rpx;
+}
+.addr-info .name-tel{
+  padding-left: 46rpx;
+  margin-bottom: 10rpx;
+}
+.addr-info .name-tel text{
+  padding-right: 30rpx;
+}
+.addr-info .dizhi {
+  display: flex;
+}
+.addr-info .dizhi image{
+  width: 28rpx;
+  height: 34rpx;
+  margin-right: 18rpx;
+  margin-top: 8rpx;
+}
+.addr-info .dizhi view{
+  flex: 2;
+}
+.sett-pro-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 30rpx 0 30rpx;
+}
+.sett-pro-item .left{
+  width: 170rpx;
+  height: 170rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 18rpx;
+}
+.sett-pro-item .left image{
+  max-height: 150rpx;
+}
+.sett-pro-item .right{
+  flex: 2;
+}
+.sett-pro-item .right .price{
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  margin-top: 50rpx;
+}
+.pay-info{
+  padding: 30rpx;
+}
+.pay-info view{
+  display: flex;
+  padding-bottom: 20rpx;
+  justify-content: space-between;
+  align-items: center;
+}
+.pay-info view:last-child{
+  padding-bottom: 0;
+}
+.btn-box{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 15rpx 30rpx;
+}
+.btn-box view{
+  margin-left: 30rpx;
+  padding: 10rpx 22rpx;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 35px;
+  text-align: center;
+}
+.btn-box view.pay{
+  border-color: #E21436;
+}
\ No newline at end of file