订单详情

apis/orderApi.js

@@ -48,3 +48,15 @@ export const submitClientOrder = (data) => {
     data
   })
 }
+
+/**
+ * 获取客户订单详情
+ * @param {object} data customerOrderId
+ * @returns {Promise<object>}
+ */
+export const getClientOrderInfo = (data) => {
+  return http.get({
+    url: '/base-paper-trading/get/customer/order/details',
+    data
+  })
+}

common/css/reset.scss

@@ -45,3 +45,154 @@ button::after {
   clear: both;
   visibility: hidden;
 }
+
+.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;
+}

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>

enums/index.js

@@ -176,18 +176,35 @@ export const supplierOrderStatusEnum = {
   REPAYING: 30216,
   CANCELED: 30212
 }
-
+/**
+ * 供应商订单状态 待客户确认订单/30202,待供应商确认订单/30205,待发货/30106,已发货/30107 已发货在H5客户端显示 待收货/30107 ,待客户借款/30207,支付中/30208,待客户支付/30214,付款失败/30211,已完成/30213,待客户还款/30217,已取消/30212,还款中/30216
+ */
 export const supplierOrderStatusMap = {
   [supplierOrderStatusEnum.WAIT_CLIENT_CONFIRM]: '待客户确认',
   [supplierOrderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认',
   [supplierOrderStatusEnum.WAIT_DELIVERY]: '待发货',
   [supplierOrderStatusEnum.WAIT_RECEIVE]: '待收货',
-  [supplierOrderStatusEnum.WAIT_CLIENT_LOAN]: '待客户借款',
+  [supplierOrderStatusEnum.WAIT_CLIENT_LOAN]: '待借款',
   [supplierOrderStatusEnum.PAYING]: '支付中',
-  [supplierOrderStatusEnum.WAIT_CLIENT_PAY]: '待客户支付',
+  [supplierOrderStatusEnum.WAIT_CLIENT_PAY]: '待支付',
   [supplierOrderStatusEnum.PAY_FAIL]: '付款失败',
   [supplierOrderStatusEnum.FINISHED]: '已完成',
-  [supplierOrderStatusEnum.WAIT_CLIENT_REPAY]: '待客户还款',
+  [supplierOrderStatusEnum.WAIT_CLIENT_REPAY]: '待还款',
   [supplierOrderStatusEnum.REPAYING]: '还款中',
   [supplierOrderStatusEnum.CANCELED]: '已取消'
 }
+
+/**
+ * 支付方式 1:微信支付 2:月结支付 4:飞算支付
+ */
+export const paymentMethodEnum = {
+  WECHAT_PAY: 1,
+  MONTHLY_PAY: 2,
+  FLY_PAY: 4
+}
+
+export const paymentMethodMap = {
+  [paymentMethodEnum.WECHAT_PAY]: '微信支付',
+  [paymentMethodEnum.MONTHLY_PAY]: '月结支付',
+  [paymentMethodEnum.FLY_PAY]: '飞算支付'
+}

pages/enterprise-info/index.vue

@@ -281,7 +281,7 @@ export default {
         } else {
           uni.showToast({
             title: '暂无定位公司',
-            icon: 'warn'
+            icon: 'error'
           })
         }
       })

pages/mine/index.vue

@@ -110,6 +110,7 @@
       </view>
     </view>
     <view @click="loginGo2('test')">test</view>
+    <view @click="loginGo2('order-detail')">order-detail</view>
     <view @click="loginGo2('enterprise-info')">enterprise-info</view>
   </view>
 </template>

pages/order-detail/index.vue

@@ -1,20 +1,394 @@
 <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">{{ statusImg[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.deliveryAddress.receiver} ${orderInfo.deliveryAddress.receiverMobile}` }}
+          </text>
+        </view>
+      </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 class="order-area" v-for="(supplierOrder, index) in orderInfo.supplierOrder" :key="supplierOrder.supplierOrderId">
+      <view class="flex-row-center-space header">
+        <text style="font-size: 32rpx; font-weight: 600">{{ supplierOrder.supplierEnterpriseName }}</text>
+        <view>
+          <!-- 待收货展示 -->
+          <view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_RECEIVE" class="button-item" @click="confirmReceive(supplierOrder)">确认收货</view>
+          <!-- 待借款展示 -->
+          <view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_LOAN" class="button-item" @click="goBorrowing(supplierOrder)">去借款</view>
+          <!-- 飞算支付且待还款状态 -->
+          <view
+            v-if="orderInfo.paymentMethod == paymentMethodEnum.FLY_PAY && supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_REPAY"
+            class="button-item"
+            @click="goRepaying(supplierOrder)"
+          >
+            去借款
+          </view>
+          <text v-else style="font-size: 30rpx; color: #ff5368; font-weight: 600">{{ supplierOrderStatusMap[supplierOrder.status] }}</text>
+        </view>
+      </view>
+      <view v-for="order in supplierOrder.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">
+              {{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }}
+            </text>
+          </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">
+          <uni-steps
+            :options="transformStep(order.outboundProcessList)"
+            active-color="#1890FF"
+            :active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length : -1"
+          ></uni-steps>
+        </view>
+      </view>
+      <!-- 送货凭证 -->
+      <view v-if="showSendImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_send`) ? '' : 'height:88rpx;'">
+        <view class="header flex-row-center-space">
+          <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
+          <view class="flex-row-center-end" @click="changeShowIndex(`${index}_send`)">
+            <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_send`) ? '收起' : '展开' }}</text>
+            <uni-icons :type="showList.includes(`${index}_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(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_receive`) ? '' : 'height:88rpx;'">
+        <view class="header flex-row-center-space">
+          <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
+          <view class="flex-row-center-end" @click="changeShowIndex(`${index}_receive`)">
+            <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_receive`) ? '收起' : '展开' }}</text>
+            <uni-icons :type="showList.includes(`${index}_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>
+    <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-row">
+        <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-row">
+        <text class="label">下单时间</text>
+        <text class="value">{{ orderInfo.createTime }}</text>
+      </view>
+      <view class="flex-row-center-space order-row">
+        <text class="label">交货时间</text>
+        <text class="value">{{ orderInfo.receivedTime }}</text>
+      </view>
+      <view class="flex-row-center-space order-row" style="border: none">
+        <text class="label">支付方式</text>
+        <text class="value">{{ paymentMethodMap[orderInfo.paymentMethod] || '-' }}</text>
+      </view>
+    </view>
+    <qn-footer fixed height="120rpx">
+      <view class="flex-row-center-end" style="padding: 0 32rpx">
+        <view class="button">查看合同</view>
+      </view>
+    </qn-footer>
   </view>
 </template>
 
 <script>
 import { go2, back } from '@/utils/hook.js'
+import { getClientOrderInfo } from '@/apis/orderApi.js'
+import { orderStatusEnum, supplierOrderStatusMap, supplierOrderStatusEnum, paymentMethodMap, paymentMethodEnum } from '@/enums/index.js'
+const statusImg = {
+  [orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认',
+  [orderStatusEnum.ORDERED]: '已下单',
+  [orderStatusEnum.FINISHED]: '已完成',
+  [orderStatusEnum.CANCELED]: '已取消'
+}
 export default {
   data() {
-    return {}
+    return {
+      orderInfo: {
+        deliveryAddress: {},
+        supplierOrder: []
+      },
+      statusImg,
+      supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap),
+      paymentMethodMap: Object.freeze(paymentMethodMap),
+      supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum),
+      paymentMethodEnum: Object.freeze(paymentMethodEnum),
+      showList: []
+    }
+  },
+  onLoad(option) {
+    if (option.orderId) {
+      getClientOrderInfo({
+        customerOrderId: option.orderId
+      }).then((res) => {
+        if (res) {
+          this.orderInfo = res
+        }
+      })
+    } else {
+      uni.showToast({
+        title: '订单信息错误',
+        icon: 'error',
+        success: () => {
+          setTimeout(() => {
+            back()
+          }, 2000)
+        }
+      })
+    }
   },
   methods: {
     go2,
-    back
+    back,
+    transformAddress(address) {
+      let res = ''
+      if (address) {
+        res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}`
+      }
+      return res
+    },
+    // 生成步骤条
+    transformStep(list) {
+      // 分切 出库 完成
+      let step1 = [],
+        step2 = [],
+        step3 = []
+      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
+            })
+          } 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: '未完成'
+        })
+      }
+      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_RECEIVE,
+        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)
+    },
+    // 去借款
+    goBorrowing(order) {},
+    // 确认收货
+    confirmReceive(order) {},
+    goRepaying(order) {},
+    clip(content) {
+      uni.setClipboardData({
+        data: content,
+        success: function () {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success',
+            duration: 2000
+          })
+        }
+      })
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<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 32rpx;
+    background-color: #ffffff;
+    border-top: 1px solid #e5e5e5;
+  }
+}
+.order-area {
+  .header {
+    padding: 24rpx 32rpx;
+    word-break: break-all;
+    background: #e5f1ff;
+    width: 750rpx;
+  }
+  .order-header {
+    padding: 24rpx 32rpx;
+    word-break: break-all;
+    background: #fff;
+    width: 750rpx;
+    border-bottom: 2rpx dashed #d8d8d8;
+    margin-bottom: 20rpx;
+  }
+  .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-row {
+    padding: 24rpx 0;
+    border-bottom: 2rpx solid #d8d8d8;
+    .label {
+      font-size: 28rpx;
+      color: #000000;
+    }
+    .value {
+      font-size: 28rpx;
+      color: #333333;
+    }
+  }
+}
+.button {
+  height: 88rpx;
+  width: 220rpx;
+  background-color: #fff;
+  line-height: 84rpx;
+  border: 1px solid #007aff;
+  border-radius: 10rpx;
+  text-align: center;
+  font-size: 30rpx;
+  color: #007aff;
+}
+.button-item {
+  padding: 0rpx 24rpx;
+  height: 42rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #007aff;
+  border-radius: 20rpx;
+  font-size: 26rpx;
+  color: #ffffff;
+}
+</style>

pages/order-make/index.vue

@@ -3,7 +3,7 @@
     <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单确认"></uni-nav-bar>
     <view class="address-area">
       <view class="header">
-        <image class="img" src="/static/imgs/order/address-icon.png"></image>
+        <image class="img" src="/static/imgs/order/customer-default.png"></image>
         <text class="text">{{ orderInfo.customerEnterpriseName }}</text>
       </view>
       <!-- 送货地址 -->
@@ -82,12 +82,15 @@
           <text v-if="payMap['month'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['month'].availableCreditLine }}</text>
         </view>
         <image
-          v-if="payMap['month'] != null"
+          v-if="payMap['month'] != null && payMap['month'].availableCreditLine > orderInfo.totalOfferPrice"
           @click="selectPayMethod('month')"
           class="img"
           :src="currentPayType == 'month' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
         ></image>
-        <text v-else style="font-size: 28rpx; color: #888888">待申请</text>
+        <text v-if="payMap['month'] == null" style="font-size: 28rpx; color: #888888">待申请</text>
+        <text v-if="payMap['month'] != null && payMap['month'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
+          余额不足
+        </text>
       </view>
       <view class="pay-item" style="border: none">
         <view class="left">
@@ -96,12 +99,15 @@
           <text v-if="payMap['fs'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['fs'].availableCreditLine }}</text>
         </view>
         <image
-          v-if="payMap['fs'] != null"
+          v-if="payMap['fs'] != null && payMap['fs'].availableCreditLine > orderInfo.totalOfferPrice"
           @click="selectPayMethod('month')"
           class="img"
           :src="currentPayType == 'fs' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
         ></image>
-        <text v-else style="font-size: 28rpx; color: #888888">待申请</text>
+        <text v-if="payMap['fs'] == null" style="font-size: 28rpx; color: #888888">待申请</text>
+        <text v-if="payMap['fs'] != null && payMap['fs'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
+          余额不足
+        </text>
       </view>
     </view>
     <qn-footer fixed height="120rpx">
@@ -130,7 +136,7 @@ export default {
         receivedTime: null
       },
       deliveryAddress: {},
-      currentPayType: '',
+      currentPayType: null,
       payMap: {
         month: {
           availableCreditLine: 0,
@@ -140,7 +146,8 @@ export default {
           availableCreditLine: 0,
           value: 4
         }
-      }
+      },
+      loading: false
     }
   },
   onLoad(option) {
@@ -155,7 +162,7 @@ export default {
     } else {
       uni.showToast({
         title: '订单信息错误',
-        icon: 'warn',
+        icon: 'error',
         success: () => {
           setTimeout(() => {
             back()
@@ -188,6 +195,10 @@ export default {
         })
         return
       }
+      if (this.loading) {
+        return
+      }
+      this.loading = true
       let itemsRemarkList = []
       // 拼接订单信息
       for (let i = 0; i < this.orderInfo.supplierOrder.length; i++) {
@@ -202,6 +213,22 @@ export default {
         paymentMethod: this.payMap[this.currentPayType].value,
         receivedTime: this.orderInfo.receivedTime
       })
+        .then((res) => {
+          if (res) {
+            uni.showToast({
+              title: '前往签约',
+              icon: 'success',
+              success: () => {
+                setTimeout(() => {
+                  window.location.href = res.signUrl
+                }, 1000)
+              }
+            })
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     init() {
       // 获取月结额度

pages/test/index.vue

@@ -24,7 +24,7 @@ export default {
       })
     },
     getDetail() {
-      getPaperDetail({ productId: '678972506887032832' })
+      getPaperDetail({ productId: '680401985190629376' })
     },
     purchase() {
       let form = {
@@ -35,7 +35,7 @@ export default {
             length: 1000,
             mallSupplierId: '678289470268772352',
             pieceQuantity: 10000,
-            productId: '678972506887032832',
+            productId: '680401985190629376',
             productSkuId: '678972507222577152',
             unitPrice: 10000,
             width: 1000