diff --git a/apis/orderApi.js b/apis/orderApi.js
new file mode 100644
index 0000000..7b37c81
--- /dev/null
+++ b/apis/orderApi.js
@@ -0,0 +1,49 @@
+import http from '../utils/http/index.js'
+
+/**
+ *
+ * @param {object} data
+ * @returns {Promise<Object[]>}
+ */
+export function getSupplierOrderList(data) {
+  return http.get({
+    url: '/base-paper-trading/get/supplier/order/list/page',
+    data
+  })
+}
+
+/**
+ * 获取供应商订单详情
+ * @param {object} data
+ * @returns {Promise<Object>}
+ */
+export function getSupplierOrderDetail(data) {
+  return http.get({
+    url: '/base-paper-trading/get/supplier/order/details',
+    data
+  })
+}
+
+/**
+ * 供应商取消订单
+ * @param {object} data supplierOrderId
+ * @returns {Promise<Object>}
+ */
+export function cancelSupplierOrder(data) {
+  return http.post({
+    url: '/base-paper-trading/get/supplier/cancellation/order',
+    data
+  })
+}
+
+/**
+ * 供应商确认订单
+ * @param {object} data orderId
+ * @returns {Promise<Object>}
+ */
+export function confirmSupplierOrder(data) {
+  return http.post({
+    url: '/base-paper-trading/supplier/submit/order',
+    data
+  })
+}
diff --git a/common/css/reset.scss b/common/css/reset.scss
index 6204afe..c3a30e0 100644
--- a/common/css/reset.scss
+++ b/common/css/reset.scss
@@ -54,3 +54,154 @@ button::after {
   display: -webkit-box; // 弹性伸缩盒
   -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
 }
+
+.flex-row-start-start {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.flex-row-start-center {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+}
+.flex-row-start-end {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.flex-row-start-space {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.flex-row-center-start {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+.flex-row-center-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.flex-row-center-end {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+.flex-row-center-space {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.flex-row-end-start {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+.flex-row-end-center {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+}
+.flex-row-end-end {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.flex-row-end-space {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.flex-col-start-start {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.flex-col-start-center {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.flex-col-start-end {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.flex-col-start-space {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.flex-col-center-start {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+.flex-col-center-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.flex-col-center-end {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+.flex-col-center-space {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.flex-col-end-start {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+.flex-col-end-center {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+.flex-col-end-end {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.flex-col-end-space {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.flex-base {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
diff --git a/components/uni-steps/uni-steps.vue b/components/uni-steps/uni-steps.vue
new file mode 100644
index 0000000..1345761
--- /dev/null
+++ b/components/uni-steps/uni-steps.vue
@@ -0,0 +1,268 @@
+<template>
+  <view class="uni-steps">
+    <view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']">
+      <view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']">
+        <view :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']" v-for="(item, index) in options" :key="index">
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before'
+            ]"
+            :style="{ backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor }"
+          ></view>
+          <view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active">
+            <uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
+          </view>
+          <view
+            :class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']"
+            v-else
+            :style="{ backgroundColor: index < active ? activeColor : deactiveColor }"
+          ></view>
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after'
+            ]"
+            :style="{
+              backgroundColor: index < active && index !== options.length - 1 ? activeColor : index === options.length - 1 ? 'transparent' : deactiveColor
+            }"
+          ></view>
+        </view>
+      </view>
+      <view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']">
+        <view v-for="(item, index) in options" :key="index" :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']">
+          <text
+            :style="{ color: index <= active ? activeColor : deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']"
+          >
+            {{ item.title }}
+          </text>
+          <text
+            :style="{ color: index <= active ? activeColor : deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']"
+          >
+            {{ item.desc }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// import uniIcons from '../uni-icons/uni-icons.vue'
+export default {
+  name: 'UniSteps',
+  // components: {
+  // 	uniIcons
+  // },
+  props: {
+    direction: {
+      // 排列方向 row column
+      type: String,
+      default: 'row'
+    },
+    activeColor: {
+      // 激活状态颜色
+      type: String,
+      default: '#1aad19'
+    },
+    deactiveColor: {
+      // 未激活状态颜色
+      type: String,
+      default: '#999999'
+    },
+    active: {
+      // 当前步骤
+      type: Number,
+      default: 0
+    },
+    options: {
+      type: Array,
+      default() {
+        return []
+      }
+    } // 数据
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.uni-steps {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__column {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  // flex-direction: row-reverse;
+}
+
+.uni-steps__row-text-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-steps__column-text-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+}
+
+.uni-steps__row-text {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: column;
+}
+
+.uni-steps__column-text {
+  padding: 6px 0px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: $uni-border-color;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__row-title {
+  font-size: $uni-font-size-base;
+  line-height: 16px;
+  text-align: center;
+}
+
+.uni-steps__column-title {
+  font-size: $uni-font-size-base;
+  text-align: left;
+  line-height: 18px;
+}
+
+.uni-steps__row-desc {
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+}
+
+.uni-steps__column-desc {
+  font-size: $uni-font-size-sm;
+  text-align: left;
+  line-height: 18px;
+}
+
+.uni-steps__row-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-steps__column-container {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  width: 30px;
+  flex-direction: column;
+}
+
+.uni-steps__row-line-item {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  flex-direction: row;
+  flex: 1;
+  height: 14px;
+  line-height: 14px;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-steps__column-line-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-steps__row-line {
+  flex: 1;
+  height: 1px;
+  background-color: $uni-text-color-grey;
+}
+
+.uni-steps__column-line {
+  width: 1px;
+  background-color: $uni-text-color-grey;
+}
+
+.uni-steps__row-line--after {
+  transform: translateX(1px);
+}
+
+.uni-steps__column-line--after {
+  flex: 1;
+  transform: translate(0px, 1px);
+}
+
+.uni-steps__row-line--before {
+  transform: translateX(-1px);
+}
+
+.uni-steps__column-line--before {
+  height: 6px;
+  transform: translate(0px, -1px);
+}
+
+.uni-steps__row-circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: $uni-text-color-grey;
+  margin: 0px 3px;
+}
+
+.uni-steps__column-circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: $uni-text-color-grey;
+  margin: 4px 0px 5px 0px;
+}
+
+.uni-steps__row-check {
+  margin: 0px 6px;
+}
+
+.uni-steps__column-check {
+  height: 14px;
+  line-height: 14px;
+  margin: 2px 0px;
+}
+</style>
diff --git a/enums/index.js b/enums/index.js
index 790632f..a708e5c 100644
--- a/enums/index.js
+++ b/enums/index.js
@@ -107,3 +107,38 @@ export const fsAuditStatus = {
   PASS: 2,
   REJECT: 3
 }
+
+/**
+ * 供应商订单状态 待客户确认订单/30202,待供应商确认订单/30205,待发货/30106,已发货/30107 ,待客户借款/30207,支付中/30208,待客户支付/30214,付款失败/30211,已完成/30213,待客户还款/30217,已取消/30212,还款中/30216
+ */
+export const supplierOrderStatusEnum = {
+  WAIT_CLIENT_CONFIRM: 30202,
+  WAIT_SUPPLIER_CONFIRM: 30205,
+  WAIT_DELIVERY: 30106,
+  RECEIVED: 30107,
+  WAIT_CLIENT_LOAN: 30207,
+  PAYING: 30208,
+  WAIT_CLIENT_PAY: 30214,
+  PAY_FAIL: 30211,
+  FINISHED: 30213,
+  WAIT_CLIENT_REPAY: 30217,
+  REPAYING: 30216,
+  CANCELED: 30212
+}
+/**
+ * 供应商订单状态 待客户确认订单/30202,待供应商确认订单/30205,待发货/30106,已发货/30107 ,待客户借款/30207,支付中/30208,待客户支付/30214,付款失败/30211,已完成/30213,待客户还款/30217,已取消/30212,还款中/30216
+ */
+export const supplierOrderStatusMap = {
+  [supplierOrderStatusEnum.WAIT_CLIENT_CONFIRM]: '待客户确认',
+  [supplierOrderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待确认',
+  [supplierOrderStatusEnum.WAIT_DELIVERY]: '待发货',
+  [supplierOrderStatusEnum.RECEIVED]: '已发货',
+  [supplierOrderStatusEnum.WAIT_CLIENT_LOAN]: '待借款',
+  [supplierOrderStatusEnum.PAYING]: '支付中',
+  [supplierOrderStatusEnum.WAIT_CLIENT_PAY]: '待支付',
+  [supplierOrderStatusEnum.PAY_FAIL]: '付款失败',
+  [supplierOrderStatusEnum.FINISHED]: '已完成',
+  [supplierOrderStatusEnum.WAIT_CLIENT_REPAY]: '待还款',
+  [supplierOrderStatusEnum.REPAYING]: '还款中',
+  [supplierOrderStatusEnum.CANCELED]: '已取消'
+}
diff --git a/pages.json b/pages.json
index d2cf09c..37c7963 100644
--- a/pages.json
+++ b/pages.json
@@ -82,6 +82,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/order-detail/index",
+      "style": {
+        "navigationBarTitleText": "订单详情",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/setting/index",
       "style": {
@@ -241,18 +249,16 @@
         "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/platform-message-info/index",
+      "style": {
+        "navigationBarTitleText": "平台公告详情",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
     }
-        ,{
-            "path" : "pages/platform-message-info/index",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "平台公告详情",
-				  "navigationStyle": "custom",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+  ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
diff --git a/pages/order-detail/index.vue b/pages/order-detail/index.vue
new file mode 100644
index 0000000..4899c6b
--- /dev/null
+++ b/pages/order-detail/index.vue
@@ -0,0 +1,463 @@
+<template>
+  <view>
+    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar>
+    <view class="status-area flex-row-center-start">
+      <image class="flex-base" style="width: 40rpx; height: 40rpx; margin-right: 16rpx" src="/static/imgs/order/status-icon.png"></image>
+      <text style="font-size: 30rpx; color: #ffffff">{{ supplierOrderStatusMap[orderInfo.status] }}</text>
+    </view>
+    <view class="address-area">
+      <view class="flex-row-start-start" style="padding: 24rpx 0 40rpx">
+        <image class="flex-base" style="width: 100rpx; height: 100rpx; margin-right: 20rpx" src="/static/imgs/order/customer-default.png"></image>
+        <view class="flex-col-start-start">
+          <text style="font-size: 30rpx; color: #333333; font-weight: 600">{{ orderInfo.customerEnterpriseName }}</text>
+          <text style="font-size: 26rpx; color: #333333; margin-top: 26rpx">送货时间: {{ orderInfo.receivedTime || '-' }}</text>
+        </view>
+      </view>
+      <view class="flex-row-start-start footer" style="margin-bottom: 0">
+        <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image>
+        <text style="font-size: 26rpx; color: #333333; word-break: break-all">
+          联系人: {{ `${orderInfo.deliveryAddress.receiver} ${orderInfo.deliveryAddress.receiverMobile}` }}
+        </text>
+      </view>
+      <view class="flex-row-start-start footer">
+        <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image>
+        <text style="font-size: 26rpx; color: #333333; word-break: break-all">{{ transformAddress(orderInfo.deliveryAddress) }}</text>
+      </view>
+    </view>
+    <view v-for="(order, index) in orderInfo.orderItems" :key="order.productId">
+      <view style="background-color: #fff; padding-bottom: 20rpx">
+        <view class="order-header flex-row-start-space">
+          <text style="font-size: 30rpx; font-weight: 600; line-height: 1.2">
+            {{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }}
+          </text>
+          <view v-if="steps[index].length > 0 && steps[index][0].desc == '未完成'" class="button-item" @click="operatePaper(index, 'cut')">分切</view>
+          <view
+            v-else-if="steps[index].length > 0 && steps[index][steps[index].length - 2].desc == '未完成'"
+            class="button-item"
+            @click="operatePaper(index, 'outbound')"
+          >
+            出库
+          </view>
+          <view
+            v-else-if="steps[index].length > 0 && steps[index][steps[index].length - 1].desc == '未完成'"
+            class="button-item"
+            @click="operatePaper(index, 'send')"
+          >
+            发货
+          </view>
+        </view>
+        <view class="order-row flex-row-center-space">
+          <text>重量(吨):</text>
+          <text>{{ order.buyTon }}</text>
+        </view>
+        <view class="order-row flex-row-center-space">
+          <text>单价(元/吨):</text>
+          <text>{{ order.unitPrice }}</text>
+        </view>
+        <view class="order-row flex-row-center-space">
+          <text>小计(元):</text>
+          <text>{{ order.subtotal }}</text>
+        </view>
+        <view class="order-row flex-row-center-space" style="margin: 0">
+          <text>备注信息:{{ order.remark }}</text>
+        </view>
+      </view>
+      <view style="padding: 24rpx 10rpx" v-if="showSendImgs(orderInfo.status)">
+        <uni-steps
+          :options="steps[index]"
+          active-color="#1890FF"
+          :active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length : -1"
+        ></uni-steps>
+      </view>
+    </view>
+    <!-- 送货凭证 -->
+    <view v-if="showSendImgs(orderInfo.status)" class="footer">
+      <view class="header flex-row-center-space">
+        <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
+        <view class="flex-row-center-end" @click="changeShowIndex('send')">
+          <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`send`) ? '收起' : '展开' }}</text>
+          <uni-icons :type="showList.includes(`send`) ? 'top' : 'bottom'" size="16"></uni-icons>
+        </view>
+      </view>
+      <view class="imgs flex-row-start-start">
+        <image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image>
+      </view>
+    </view>
+    <!-- 收货凭证 -->
+    <view v-if="showReceiveImgs(orderInfo.status)" class="footer">
+      <view class="header flex-row-center-space">
+        <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
+        <view class="flex-row-center-end" @click="changeShowIndex(`receive`)">
+          <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`receive`) ? '收起' : '展开' }}</text>
+          <uni-icons :type="showList.includes(`receive`) ? 'top' : 'bottom'" size="16"></uni-icons>
+        </view>
+      </view>
+      <view class="imgs flex-row-start-start">
+        <image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image>
+      </view>
+    </view>
+    <view class="fee flex-row-center-space">
+      <text style="font-size: 28rpx; color: #555555">其他费用: ￥{{ orderInfo.otherFee || 0 }}</text>
+      <view class="flex-row-center-end">
+        <text style="font-size: 28rpx; color: #555555">合计:</text>
+        <text style="font-size: 40rpx; color: #f5222d; font-weight: 600">￥{{ orderInfo.totalOfferPrice || 0 }}</text>
+      </view>
+    </view>
+    <view class="order-footer">
+      <view class="flex-row-center-space order-line">
+        <text class="label">订单备注</text>
+        <text class="value">{{ orderInfo.remark || '无' }}</text>
+      </view>
+      <view class="flex-row-center-space order-line">
+        <text class="label">订单编号</text>
+        <view class="flex-row-center-end value">
+          <text>{{ orderInfo.orderId }}</text>
+          <text style="color: #007aff; margin-left: 8rpx" @click="clip(orderInfo.orderId)">复制</text>
+        </view>
+      </view>
+      <view class="flex-row-center-space order-line">
+        <text class="label">下单时间</text>
+        <text class="value">{{ orderInfo.createTime }}</text>
+      </view>
+    </view>
+    <qn-footer fixed height="120rpx" v-if="orderInfo.status === supplierOrderStatusEnum.WAIT_SUPPLIER_CONFIRM">
+      <view class="flex-row-center-space" style="padding: 0 32rpx">
+        <view class="button button_cancel" @click="cancel(orderInfo)">取消订单</view>
+        <view class="button button_confirm" @click="confirm(orderInfo)">确认订单</view>
+      </view>
+    </qn-footer>
+    <qn-footer fixed height="120rpx" v-if="orderInfo.status === supplierOrderStatusEnum.WAIT_DELIVERY">
+      <view class="flex-row-center-space" style="padding: 0 32rpx">
+        <view class="button button_cancel" style="width: 220rpx" @click="cancel">取消订单</view>
+        <view class="button button_contact">查看合同</view>
+        <view class="button button_confirm" style="width: 220rpx">确认发货</view>
+      </view>
+    </qn-footer>
+  </view>
+</template>
+
+<script>
+import { go2, back } from '@/utils/hook.js'
+import { getSupplierOrderDetail, cancelSupplierOrder, confirmSupplierOrder } from '@/apis/orderApi.js'
+import { supplierOrderStatusMap, supplierOrderStatusEnum } from '@/enums/index.js'
+export default {
+  data() {
+    return {
+      orderInfo: {
+        deliveryAddress: {},
+        supplierOrder: []
+      },
+      supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap),
+      supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum),
+      showList: [],
+      steps: []
+    }
+  },
+  onLoad(option) {
+    if (option.orderId) {
+      this.init(option.orderId)
+    } else {
+      uni.showToast({
+        title: '订单信息错误',
+        icon: 'error',
+        success: () => {
+          setTimeout(() => {
+            back()
+          }, 2000)
+        }
+      })
+    }
+  },
+  methods: {
+    go2,
+    back,
+    transformAddress(address) {
+      let res = ''
+      if (address) {
+        res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}`
+      }
+      return res
+    },
+    init(orderId) {
+      getSupplierOrderDetail({
+        supplierOrderId: orderId
+      }).then((res) => {
+        if (res) {
+          this.orderInfo = res
+          for (let i = 0; i < this.orderInfo.orderItems.length; i++) {
+            let item = this.orderInfo.orderItems[i]
+            this.steps[i] = this.transformStep(item.outboundProcessList, item.pieceQuantity)
+          }
+        }
+      })
+    },
+    // 生成步骤条
+    transformStep(list, quantity) {
+      // 分切 出库 完成
+      let step1 = [],
+        step2 = [],
+        step3 = []
+      // 出库数量
+      let outboundQuantity = 0
+      if (list && list.length > 0) {
+        list.forEach((item) => {
+          if (item.status == '30301') {
+            step1.push({
+              title: '分切',
+              desc: item.userName + '\n\r' + item.createTime
+            })
+          } else if (item.status == '30302') {
+            step2.push({
+              title: '出库',
+              desc: item.userName + item.quantity + '\n\r' + item.createTime
+            })
+            outboundQuantity += item.quantity
+          } else if (item.status == '30303') {
+            step3.push({
+              title: '完成',
+              desc: '已收货'
+            })
+          }
+        })
+      }
+      if (step1.length == 0) {
+        step1.push({
+          title: '分切',
+          desc: '未完成'
+        })
+      }
+      if (step2.length == 0) {
+        step2.push({
+          title: '出库',
+          desc: '未完成'
+        })
+      } else if (outboundQuantity < quantity) {
+        // 判断是否出库完成
+        step2.push({
+          title: '出库',
+          desc: '未完成'
+        })
+      }
+      if (step3.length == 0) {
+        step3.push({
+          title: '完成',
+          desc: '未完成'
+        })
+      }
+      return [...step1, ...step2, ...step3]
+    },
+    changeShowIndex(index) {
+      let target = this.showList.indexOf(index)
+      if (target > -1) {
+        this.showList.splice(target, 1)
+      } else {
+        this.showList.push(index)
+      }
+    },
+    // 根据状态是否展示送货凭证
+    showSendImgs(status) {
+      let list = [
+        supplierOrderStatusEnum.WAIT_DELIVERY,
+        supplierOrderStatusEnum.RECEIVED,
+        supplierOrderStatusEnum.WAIT_CLIENT_LOAN,
+        supplierOrderStatusEnum.PAYING,
+        supplierOrderStatusEnum.WAIT_CLIENT_PAY,
+        supplierOrderStatusEnum.PAY_FAIL,
+        supplierOrderStatusEnum.FINISHED,
+        supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
+        supplierOrderStatusEnum.REPAYING,
+        supplierOrderStatusEnum.CANCELED
+      ]
+      return list.includes(status)
+    },
+    // 根据状态是否展示收货凭证
+    showReceiveImgs(status) {
+      let list = [
+        supplierOrderStatusEnum.WAIT_CLIENT_LOAN,
+        supplierOrderStatusEnum.PAYING,
+        supplierOrderStatusEnum.WAIT_CLIENT_PAY,
+        supplierOrderStatusEnum.PAY_FAIL,
+        supplierOrderStatusEnum.FINISHED,
+        supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
+        supplierOrderStatusEnum.REPAYING,
+        supplierOrderStatusEnum.CANCELED
+      ]
+      return list.includes(status)
+    },
+    // 取消订单
+    cancel(order) {
+      uni.showModal({
+        title: '提示',
+        content: '确定取消订单吗？',
+        success: (res) => {
+          if (res.confirm) {
+            cancelSupplierOrder({
+              supplierOrderId: order.orderId
+            }).then((res) => {
+              if (res) {
+                uni.showToast({
+                  title: '取消订单成功',
+                  icon: 'success',
+                  success: () => {
+                    setTimeout(() => {
+                      back()
+                    }, 2000)
+                  }
+                })
+              }
+            })
+          }
+        }
+      })
+    },
+    // 确认订单
+    confirm(order) {
+      uni.showModal({
+        title: '提示',
+        content: '确定确认订单吗？',
+        success: (res) => {
+          if (res.confirm) {
+            confirmSupplierOrder({
+              orderId: order.orderId
+            }).then((res) => {
+              if (res) {
+                uni.showToast({
+                  title: '确认订单成功',
+                  icon: 'success',
+                  success: () => {
+                    setTimeout(() => {
+                      this.init(order.orderId)
+                    }, 1000)
+                  }
+                })
+              }
+            })
+          }
+        }
+      })
+    },
+    // cut: 分切 outbound: 出库  send: 发货
+    operatePaper(index, type) {},
+    clip(content) {
+      uni.setClipboardData({
+        data: content,
+        success: function () {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success',
+            duration: 2000
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.status-area {
+  padding: 24rpx 32rpx;
+  width: 750rpx;
+  background-image: linear-gradient(90deg, #ff4d2e 6%, #ff952f 100%);
+}
+.address-area {
+  padding: 0 32rpx;
+  width: 750rpx;
+  background-color: #ffffff;
+  .footer {
+    padding: 24rpx 0;
+    background-color: #ffffff;
+    border-top: 1px solid #e5e5e5;
+  }
+}
+.order-header {
+  padding: 24rpx 32rpx;
+  word-break: break-all;
+  background: #fff;
+  width: 750rpx;
+  border-bottom: 2rpx dashed #d8d8d8;
+  margin-bottom: 20rpx;
+  .button-item {
+    margin-left: 20rpx;
+    width: 108rpx;
+    height: 54rpx;
+    background: #007aff;
+    border-radius: 26rpx;
+    font-size: 28rpx;
+    color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+.order-row {
+  width: 750rpx;
+  padding: 0 32rpx;
+  margin-bottom: 18rpx;
+  font-size: 28rpx;
+  color: #555555;
+}
+.footer {
+  background-color: #ffffff;
+  width: 750rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+  .header {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+  }
+  .imgs {
+    padding: 16rpx 32rpx 32rpx;
+    min-height: 120rpx;
+  }
+}
+.fee {
+  padding: 24rpx 32rpx;
+  width: 750rpx;
+  background-color: #ffffff;
+  margin: 20rpx 0;
+}
+.order-footer {
+  padding: 0rpx 32rpx;
+  width: 750rpx;
+  background-color: #ffffff;
+  .order-line {
+    padding: 24rpx 0;
+    border-bottom: 2rpx solid #d8d8d8;
+    .label {
+      font-size: 28rpx;
+      color: #000000;
+    }
+    .value {
+      font-size: 28rpx;
+      color: #333333;
+    }
+  }
+}
+.button {
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  border-radius: 10rpx;
+}
+.button_cancel {
+  width: 270rpx;
+  border: 1px solid #979797;
+}
+.button_confirm {
+  width: 400rpx;
+  background-color: #007aff;
+  color: #fff;
+}
+.button_contact {
+  width: 220rpx;
+  border: 1px solid #007aff;
+  color: #007aff;
+  margin: 0 14rpx;
+}
+</style>
diff --git a/pages/trade/orderList.vue b/pages/trade/orderList.vue
index e4880fc..0fbe729 100644
--- a/pages/trade/orderList.vue
+++ b/pages/trade/orderList.vue
@@ -6,26 +6,28 @@
       @clickItem="onClickItem"
       styleType="text"
       activeColor="#007AFF"
-    ></uni-segmented-control>
+      style="border-bottom: 2rpx solid #dddddd"
+    >
+      >
+    </uni-segmented-control>
     <scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
-      <view v-for="(item, index) in list" :key="index">
+      <view v-for="(item, index) in list" :key="index" @click="go2('order-detail', { orderId: item.orderId })">
         <view class="list-border list-title-line">
-          <view class="">
+          <view>
             <view class="list-title">{{ item.customerEnterpriseName }}</view>
             <view class="list-title-subLine">{{ item.orderId }}</view>
           </view>
-          <view class="">
-            <view class="list-title-Subtitle">{{ item.status | statusFilter }}</view>
+          <view>
+            <view class="list-title-Subtitle">{{ supplierOrderStatusMap[item.status] }}</view>
             <view class="list-title-subLine">{{ item.createTime }}</view>
           </view>
         </view>
-        <view class="list-border list-info-line" v-for="(subItem, subIndex) in item.supplierOrderList[0].orderItmes" :key="subIndex">
+        <view class="list-border list-info-line" v-for="(subItem, subIndex) in item.orderItems" :key="subIndex">
           <view class="list-info">
-            <view class="">
-              <!-- <image class="list-image" :src="item.productImg" mode=""></image> -->
-              <image class="list-image" :src="subItem.productImg" mode=""></image>
+            <view>
+              <image class="list-image" :src="subItem.productImg"></image>
             </view>
-            <view class="list-info-contant">
+            <view class="list-info-content">
               <view class="list-info-title">{{ subItem.productName }}</view>
               <view class="list-info-text">
                 {{ subItem.categoryName }}/{{ subItem.brandName }}/{{ item.gramWeight }}g/{{ subItem.length }}*{{ subItem.width }}/{{ subItem.pieceQuantity }}张
@@ -33,16 +35,16 @@
             </view>
           </view>
         </view>
-        <view class="list-border list-bottom-contant">
+        <view class="list-border list-bottom-content">
           <view>
-            <text class="list-bottom-contant-text">交货时间：</text>
-            <text class="list-bottom-contant-subtext">{{ item.deliveryLeadtime }}</text>
+            <text class="list-bottom-content-text">交货时间:</text>
+            <text class="list-bottom-content-subtext">{{ item.deliveryLeadtime }}</text>
           </view>
           <view>
             <text class="list-title-Subtitle subTitle-right">¥{{ item.totalOfferPrice }}</text>
           </view>
         </view>
-        <uGap></uGap>
+        <!-- <uGap></uGap> -->
       </view>
     </scroll-list>
   </view>
@@ -50,64 +52,21 @@
 
 <script>
 import uGap from '@/components/u-gap/u-gap.vue'
-import scrollList from '@/components/scroll-list/scroll-list.vue'
-// import {  gettradingHallList } from '@/apis/trade'
-import { getBasePaperDeals } from '@/apis/clientDetailApi.js'
+import { go2 } from '@/utils/hook.js'
+import { getSupplierOrderList } from '@/apis/orderApi.js'
+import { supplierOrderStatusMap, supplierOrderStatusEnum } from '@/enums/index.js'
 export default {
-  // props: {
-  // 	queryOrderData: {
-  // 		type: Object,
-  // 		default: () => {}
-  // 	}
-  // },
   components: {
     uGap
   },
-  filters: {
-    statusFilter(value) {
-      var name = ''
-      console.log('name', value)
-      if (value) {
-        switch (value) {
-          case 30100:
-            name = '待确认'
-            break
-          case 30204:
-            name = '待供应商确认'
-            break
-          case 30101:
-            name = '已下单'
-            break
-          case 30215:
-            name = '待还款'
-            break
-          case 30104:
-            name = '已完成'
-            break
-          case 30105:
-            name = '已取消'
-            break
-
-          default:
-            break
-        }
-      }
-      return name
-    }
-  },
   data() {
     return {
-      orderPagination: {
-        pageNum: 0, // 初始会执行一次下拉加载
-        pageSize: 10
-      },
-      orderData: [],
       controlCurrent: 0,
       controlItems: ['全部', '待确认', '待发货', '已完成'],
       orderOption: {
         size: 10,
         auto: true,
-        emptyText: '暂无报价信息~',
+        emptyText: '暂无订单信息~',
         background: '#F7F8FA',
         fontSize: '40rpx'
       },
@@ -117,33 +76,31 @@ export default {
         // customerEnterpriseId: this.$store.state.supplierInfo.id || null, // 客户企业ID默认为空，传值时网关获取当前用户关联企业id失效
         // mallSupplierId: this.$store.state.supplierInfo.supplierId || null, // 供应商id
         customerEnterpriseId: '651107734133018624',
-        mallSupplierId: '670334117090562048', // 供应商id
-        status: '0', // 状态 0 全部 待发货/30106,待收货/30107,待借款/30207,已完成/30104
-        enterpriseIds: [] //企业ID集合网关获取
+        // mallSupplierId: '670334117090562048', // 供应商id
+        status: '0' // 状态 0 全部 待发货/30106,待收货/30107,待借款/30207,已完成/30104
+        // enterpriseIds: [] //企业ID集合网关获取
       },
       pagination: {
         pageNum: 0, // 初始会执行一次下拉加载
         pageSize: 10
       },
-      list: []
+      list: [],
+      supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap)
     }
   },
-  onLoad(option) {},
   methods: {
+    go2,
     // 获取订单列表
     getList() {
       return new Promise((resolve, reject) => {
-        getBasePaperDeals({ ...this.params, ...this.pagination })
+        getSupplierOrderList({ ...this.params, ...this.pagination })
           .then((res) => {
-            console.log('订单列表', res)
             if (res) {
               if (this.pagination.pageNum == 1) {
                 this.list = res.records
               } else {
                 this.list = this.list.concat(res.records)
               }
-              // this.list = []
-              // this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
               resolve({ list: this.list, total: res.total })
             } else {
               reject()
@@ -156,7 +113,7 @@ export default {
     },
     //订单分页
     orderUp(page) {
-      this.orderPagination.pageNum++
+      this.pagination.pageNum++
       this.getList()
         .then(({ list, total }) => {
           this.$refs.orderRef.refreshSuccess({ list, total })
@@ -167,7 +124,7 @@ export default {
     },
     //订单分页
     orderDown() {
-      this.orderPagination.pageNum = 1
+      this.pagination.pageNum = 1
       this.getList()
         .then(({ list, total }) => {
           this.$refs.orderRef.refreshSuccess({ list, total })
@@ -178,22 +135,20 @@ export default {
     },
     //分段器点击事件
     onClickItem(value) {
-      console.log(value)
       this.pagination.pageNum = 1
       switch (value.currentIndex) {
         case 0:
           this.params.status = 0
           break
         case 1:
-          this.params.status = 30107
+          this.params.status = supplierOrderStatusEnum.WAIT_SUPPLIER_CONFIRM
           break
         case 2:
-          this.params.status = 30106
+          this.params.status = supplierOrderStatusEnum.WAIT_DELIVERY
           break
         case 3:
-          this.params.status = 30104
+          this.params.status = supplierOrderStatusEnum.FINISHED
           break
-
         default:
           break
       }
@@ -253,7 +208,7 @@ export default {
     // height: 88rpx;
     background: #ffffff;
   }
-  .list-info-contant {
+  .list-info-content {
     margin-left: 48rpx;
   }
   .list-info-title {
@@ -281,7 +236,7 @@ export default {
   .list-info {
     display: flex;
   }
-  .list-bottom-contant {
+  .list-bottom-content {
     // line-height: 70rpx;
     align-items: center;
     padding-left: 32rpx;
@@ -290,14 +245,14 @@ export default {
     background: #ffffff;
     display: flex;
     justify-content: space-between;
-    .list-bottom-contant-text {
+    .list-bottom-content-text {
       font-size: 26rpx;
       color: #888888;
       letter-spacing: 0;
       line-height: 32rpx;
       font-weight: 400;
     }
-    .list-bottom-contant-subtext {
+    .list-bottom-content-subtext {
       font-size: 26rpx;
       color: #333333;
       letter-spacing: 0;
diff --git a/static/imgs/order/customer-default.png b/static/imgs/order/customer-default.png
new file mode 100644
index 0000000..d7cf3f9
Binary files /dev/null and b/static/imgs/order/customer-default.png differ
diff --git a/static/imgs/order/location-icon.png b/static/imgs/order/location-icon.png
new file mode 100644
index 0000000..750b4f0
Binary files /dev/null and b/static/imgs/order/location-icon.png differ
diff --git a/static/imgs/order/order-empty.png b/static/imgs/order/order-empty.png
new file mode 100644
index 0000000..b47dbf9
Binary files /dev/null and b/static/imgs/order/order-empty.png differ
diff --git a/static/imgs/order/paper-default-icon.png b/static/imgs/order/paper-default-icon.png
new file mode 100644
index 0000000..4aece50
Binary files /dev/null and b/static/imgs/order/paper-default-icon.png differ
diff --git a/static/imgs/order/right-arrow.png b/static/imgs/order/right-arrow.png
new file mode 100644
index 0000000..532d973
Binary files /dev/null and b/static/imgs/order/right-arrow.png differ
diff --git a/static/imgs/order/status-icon.png b/static/imgs/order/status-icon.png
new file mode 100644
index 0000000..ca39c60
Binary files /dev/null and b/static/imgs/order/status-icon.png differ