写一个微信小程序的订单显示界面并能提交回复

下面是一个简单的微信小程序订单显示界面：

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <text class="title">订单列表</text>
  </view>
  <scroll-view class="list" scroll-y="true">
    <block wx:for="{{orders}}" wx:key="id">
      <view class="item">
        <text class="item-title">{{item.title}}</text>
        <text class="item-date">{{item.date}}</text>
        <view class="item-status {{item.status}}">{{item.statusText}}</view>
        <view class="item-actions">
          <button class="btn-reply" bindtap="onReply" data-id="{{item.id}}">回复</button>
        </view>
      </view>
    </block>
  </scroll-view>
</view>

上面的代码使用了一个 scroll-view 组件来显示订单列表。每个订单都包含了一个标题、日期、状态和一个回复按钮。当用户点击回复按钮时，会触发一个 onReply 事件，同时把订单的 id 传递给处理函数。

下面是对应的样式代码：

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  background-color: #f0f0f0;
  border-bottom: 1rpx solid #ccc;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.list {
  flex: 1;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120rpx;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}

.item-title {
  font-size: 28rpx;
  font-weight: bold;
}

.item-date {
  font-size: 24rpx;
  color: #999;
}

.item-status {
  font-size: 24rpx;
  color: #fff;
  padding: 6rpx 10rpx;
  border-radius: 4rpx;
}

.item-status.pending {
  background-color: #f90;
}

.item-status.completed {
  background-color: #3c0;
}

.item-actions {
  display: flex;
  align-items: center;
}

.btn-reply {
  font-size: 24rpx;
  color: #fff;
  background-color: #09c;
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  margin-left: 20rpx;
}

上面的代码定义了一些基本的样式，用于展示订单列表和控制按钮的样式。

最后，还需要编写一些 JavaScript 代码来处理事件和数据：

// index.js
Page({
  data: {
    orders: [
      {
        id: 1,
        title: '订单 1',
        date: '2022-01-01',
        status: 'pending',
        statusText: '待处理'
      },
      {
        id: 2,
        title: '订单 2',
        date: '2022-01-02',
        status: 'completed',
        statusText: '已完成'
      },
      {
        id: 3,
        title: '订单 3',
        date: '2022-01-03',
        status: 'pending',
        statusText: '待处理'
      }
    ]
  },
  onReply: function (event) {
    const orderId = event.currentTarget.dataset.id;
    // TODO: 打开回复页面，传递订单 id
  }
})

上面的代码定义了一个 orders 数组，用于存储订单数据。当用户点击回复按钮时，会触发 onReply 事件，同时把订单的 id 传递给处理函数。在实际应用中，我们需要编写一个新的页面来处理回复操作。

以上就是一个简单的微信小程序订单显示界面的实现方法。