订单结果页

需求： 显示当前订单信息，用户可以在该页面分享给好友，让好友参加获取他购买的礼物。

小程序端

1 请求订单数据，显示订单信息，购买者可以在这里分享给好友。

app.json

 {
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/item/item",
    "pages/login/login",    
    "pages/payment/payresult/payresult"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步生活",
    "navigationBarTextStyle": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#e50e38"
  },
}

payresult.wxml

<view class="container">
  <view class="success-status">
    <view class="tip">礼物准备完毕，送出去吧</view>
    <view class="open-condition">记得提醒对方填写收货地址哦</view>
  </view>
  <image class='avatar' src='{{userInfo.avatarUrl}}'></image>
  <scroll-view class="detail-box">
      <view class="u-info">{{userInfo.nickName}}送出{{totalNum}}份礼物</view>
      <view class="wish">{{wish}}</view>
      <view class="product-wrap">
          <image src="{{showPic}}"></image>

      </view>
  </scroll-view>
  <button class="btn-share" open-type="share"> 送给朋友 <text class="fa fa-flag"></text></button>
</view>

payresult.wxss

.btn-share{
  width: 480rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: #e50e38;
  color: #fff;
  line-height: 88rpx;
  text-align: center;
  margin-top: 40rpx;
  letter-spacing: 2rpx;
  font-size: 36rpx;
  position: absolute;
  bottom: 120rpx;
}
page{
  background: #e50e38;
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
  padding: 0;
}
.container .success-status{
  padding: 36rpx 0;
  color: #fff;
  height: 20%;
}
.container .success-status .tip{
  text-align: center;
  line-height: 60rpx;
  font-size: 36rpx;
}
.container .success-status .open-condition{
  text-align: center;
  line-height: 60rpx;
  font-size: 28rpx;
}
.detail-box{
  position: relative;
  height: 80%;
  background: #fff;
  width: 718rpx;
  margin: 0 16rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  text-align: center;
}
.avatar{
  position:absolute;
  width:120rpx;
  height:120rpx;
  top:20%;
  left:50%;
  margin-top:-60rpx;
  margin-left:-60rpx;
  border-radius: 50%;
  z-index: 999;
}
.u-info{
  text-align: center;
  padding-top:80rpx;
  font-size:28rpx;
}
.wish{
  text-align: center;
  padding-top:32rpx;
  font-size:36rpx;
  margin-bottom: 20rpx;
}
.detail-box .name{
  text-align: center;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.detail-box image{
  width: 450rpx;
  height: 450rpx;
  text-align: center
}
.product-wrap{
  border: 2rpx solid #aa924c;
  width: 450rpx;
  margin: 20rpx 134rpx;
}

payresult.js