微信小程序，我的订单（查看详情）_微信小程序订单详情页面怎么写

首先是wxml,根据我们之前写的页面的查看详情按钮添加一个按钮，跳转页面即可，

订单的按钮点击时间

js

  // 查看详情
  detail:function(e){
    var index =[]
    index.push(e.currentTarget.dataset.index)//点击获取整体数据
    wx.setStorageSync('goodsdetail',index) //本地存储
    wx.navigateTo({  
      url:"/components/paymentpp/paymentpp",
 })
  },
在wxml详细按钮里面添加data-index="{{item}}"便获取点击的这一整条数据

现在是详情页面的wxml

<view style="padding-top: {{pageTopHeight}}px;">
  <view class="wait">等待付款</view>
  <view wx:for="{{addlist}}" style="margin-top: 100rpx;">
     <view class="listtext">{{item.cancell}}</view>
     <view class="user_info"  >
       <view style="font-size: 16px;">{{item.name}} {{item.Phone}}</view>
       <view style="color: #7a7979;line-height: 70rpx;">
          {{item.region[0]+'-'+item.region[1]+'-'+item.region[2]+' '+item.specific}} 
       </view>
    </view>
    <view class="container_wrap" >
        <view style="display: flex;">
           <view>订单编号:</view>
            <view style="flex:1;text-align: end;color: #7a7979;">
               {{item.orderCode}}
            </view>
        </view>
        <view style="display: flex;">
           <view>支付编号:</view>
           <view style="flex:1;text-align: end;color: #7a7979;">
             {{item.orderCode}}
           </view>
        </view>
        <view style="display: flex;">
          <view>下单时间</view>
          <view style="flex:1;text-align: end;color: #7a7979;">{{item.time}}</view>
       </view>
       <view style="display: flex;">
         <view>支付时间:</view>
         <view style="flex:1;text-align: end;color: #7a7979;">{{}}</view>
       </view>
       <view style="display: flex;">
          <view>发货时间:</view>
          <view style="flex:1;text-align: end;color: #7a7979;">{{}}</view>
       </view>
       <view style="display: flex;">
          <view>完成时间:</view>
          <view style="flex:1;text-align: end;color: #7a7979;">{{}}</view>
       </view>
  </view>
  <view class="container_wrap" >
     <view style="display: flex;">
        <view>订单金额:</view>
         <view style="flex:1;text-align: end;color: #7a7979;">
             ￥{{item.totalPrice===''?item.sunli:item.totalPrice}}
         </view>
    </view>
    <view style="display: flex;">
      <view>优惠券</view>
      <view style="flex:1;text-align: end;color: #7a7979;">-￥{{item.coupon}}</view>
    </view>
    <view style="display: flex;">
       <view>余额</view>
       <view style="flex:1;text-align: end;color: #7a7979;">-￥{{item.weuicell}}</view>
    </view>
   <view style="display: flex;">
      <view>需付款:</view>
      <view style="flex:1;text-align: end;color: #7a7979;">
         ￥{{item.totalPrice===''?item.sunli:item.totalPrice}}
      </view>
   </view>
   <view style="display: flex;">
      <view>实付款:</view>
      <view style="flex:1;text-align: end;color: #7a7979;">￥{{shui}}</view>
    </view>
 </view>
 <view class="container_wrap" >
     <view style="display: flex;">
       <view>订单状态:</view>//判断是取消还是待付款
       <view wx:if="{{item.cancell===''}}" style="flex:1;text-align: end;">
          {{goodstype}}
       </view>
       <view wx:else style="flex:1;text-align: end;color: #7a7979;">{{cancetype}}</view>
     </view>
     <view style="display: flex;">
         <view>付款方式</view>
        <view style="flex:1;text-align: end;color: #7a7979;">{{item.imgType}}</view>
     </view>
  </view>
 </view>     
</view>

现在开启他的js

   onLoad: function (options) {
       var index = wx.getStorageSync('goodsdetail') //点击数据的值
       this.setData({
        addlist:index
       })
     
    },

wxss

/* 等待 */
.wait{
    text-align: center;
    background-color: rgba(240, 232, 232, 0.1);
    position: absolute;
    z-index: 99;
    width: 100%;
    color: #fff;
    padding: 31rpx;
    margin-top: 10rpx;
    font-size: 16px;  
}
   /*  */
   
   .user_info {
    width: 100%;
    height: 198rpx;
    border-radius: 24rpx 24rpx 0 0;
    background: #fff;
    padding: 26rpx 49rpx 0 34rpx;
    position: relative;
   
    
}
.user_info:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg,#1989fa,#1989fa 18%,transparent 0,transparent 25%,#ff6c6c 0,#ff6c6c 43%,transparent 0,transparent 50%);
    background-size: 78px;
    content: "";
}
/*  */
.container_wrap{
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx;
    line-height: 60rpx;
}
.listtext{
    background-color: #e44032;
    text-align: center;
    color: #fff;
    width: 100%;
    line-height: 90rpx;
    position: relative;
    font-size: 16px;
    /* padding-bottom:20px ; */
}
.listtext::before{
    position: absolute;
    right: 0;
    top: 0rpx;
    left: 0;
    width: 100%;
    background-color: rgba(240, 232, 232, 0.1);
    content: "";
    height: 100%;
}