ufutx_love_mp/src/pages/users/orderDetails.wpy

<template>

    <view class="orderDetails">
      <view class="tradeInfo ff">
        <view class="font_26 color-666" style="padding-bottom: 20rpx">订单号：{{orderData.trade_no}}</view>
        <view class="f-fc" style="height: 168rpx;">
          <image src="{{orderData.pic}}" mode="aspectFill" class="posterImage flo_l"></image>
          <view class="f-fdc f-fbc" style="flex: 1;align-items: flex-start;height: 100%;">
            <view>
              <view class="font_28 flo_l color-333 ellipsis_2 bold" style="width: 326rpx;word-break: break-all;line-height: 38rpx">
                <image src="https://image.fulllinkai.com/202205/23/631d937276380af19ec646cf7563a64a.png" mode="widthFix" class="spellGroupIcon" v-if="orderData.is_group_order == 1"></image>
                {{ orderData.title }}
              </view>
              <view class="font_24 color-666 ellipsis_1" style="width: 326rpx;padding-top: 4rpx">规格：{{orderData.sku}}</view>
            </view>
            <view class="fong_28 color-theme bold">¥{{orderData.price}}</view>
          </view>
        </view>
      </view>
      <view class="m_ord_ct">
        <view class="font_32 color-333 bold">订单信息</view>
        <view class="f-fc">
          <view class="u_ordCt_tt font_32 color-999">当前状态</view>
          <view class="font_32 color-333">{{ orderData.pay_status != 'PAID'? orderData.is_expire == '0' ? '未支付': '已过期':'支付成功' }}</view>
        </view>
        <view class="f-fc" v-if="orderData.pay_status == 'PAID'">
          <view class="u_ordCt_tt font_32 color-999">支付方式</view>
          <view class="font_32 color-333">{{orderData.show_pay_type}}</view>
        </view>
        <view class="f-fc">
          <view class="u_ordCt_tt font_32 color-999">订单时间</view>
          <view class="font_32 color-333">{{orderData.updated_at}}</view>
        </view>
        <view class="f-fc">
          <view class="u_ordCt_tt font_32 color-999">订单编号</view>
          <view class="font_32 color-333">{{orderData.trade_no}}</view>
        </view>
      </view>
    </view>
</template>

<script>
    import wepy from '@wepy/core'
  import { service } from '../../config.js'
  import https from '../../mixins/https'
  import base from '../../mixins/base'
  wepy.page({
    mixins: [base, https],
    data: {
      trade_no: '',
      order_type: '',
      orderData: {},
      modalName: ''
    },

    async onLoad(e) {
      this.trade_no = e.trade_no
        this.order_type = e.order_type
      this.getTradeNo()
    },

    onShow() {
    },

    methods: {
        getTradeNo() {
            var data = {
                order_type: this.order_type
            }
            this.$showLoading('加载中')
            this.$get({url: `${service.host}/activity/order/by/no/${this.trade_no}`, data}).then(({code, data}) => {
                console.log(data)
                this.orderData = data
                wx.hideLoading()
            })
        },
      goto(url) {
        wx.navigateTo({url: url})
      }
    }
  })

</script>

<style lang="less">
page {
    background-color: #f8f8f8;
}
.orderDetails {
    padding: 30rpx 30rpx 0 30rpx;
  .tradeInfo {
    width: 100%;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 30rpx;
    box-shadow: 1rpx 1rpx 18rpx #ededed;
    overflow: auto;
    .spellGroupIcon{
      width: 64rpx;
      height: 32rpx;
      margin-bottom: -4rpx;
    }
    .posterImage {
      width: 296rpx;
      height: 168rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }
  }
    .m_ord_ct {
      padding: 36rpx 30rpx 0 30rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .u_ordCt_tt {
        margin-right: 20rpx;
      }
      >view {
        padding-bottom: 30rpx;
      }
      .u_copy {
        padding: 0rpx 14rpx;
        border-radius: 100rpx;
        border: 2rpx solid #D8D8D8;
        box-sizing: border-box;
        margin-left: 10rpx;
      }
    }
}
.ui-np-box{
  margin: 100rpx 56rpx;
  .ui-np-buy{
    color: #ffffff;
    background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
  }
  .ui-np-close{
    margin-top: 30rpx;
    color: #666666;
    border:2rpx solid #D8D8D8;
  }
  .ui-np-btn{
    width: 580rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 44rpx;
    text-align: center;
  }
}
.ui-quit-box{
  position: relative;
  width: 600rpx;
  height: 334rpx;
  background: #ffffff;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border-radius: 24rpx;
  overflow: hidden;
  .ui-quit-title{
    margin-top: 92rpx;
    text-align: center;
  }
  .ui-quit-btn-list{
    margin: 80rpx 76rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ui-quit-btn{
    width: 192rpx;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 34rpx;
  }
  .ui-quit-btn-close{
    border: 1px solid #D8D8D8;
  }
  .ui-quit-btn-submit{
    background: linear-gradient(to right,#FF5380 0%,#FF85A5 100%);
  }
}
</style>
<config>
    {
    navigationBarTitleText: '订单详情',
    enablePullDownRefresh: false,
    backgroundColorTop: '#f2f2f2',
    backgroundColorBottom: '#f2f2f2',
    usingComponents: {
    }
    }
</config>