jufubao-takeorder 1.0.2-beta4 → 1.0.2-beta6

package/src/components/JfbTakeorderOrderDetail/JfbTakeorderOrderDetail.vue

@@ -2,131 +2,287 @@
   <view
     class="jfb-takeorder-order-detail"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-takeorder-order-detail__edit"
-      :class="{ editx : isEditx && active }"
+      :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
       <view class="jfb-takeorder-order-detail__edit-icon" @click.stop="delEdit">
-        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+        <xd-font-icon
+          icon="iconshanchu-01"
+          color="#fff"
+          size="30"
+        ></xd-font-icon>
       </view>
     </view>
     <!-- #endif -->
     <!-- 待上报状态倒计时横幅 -->
-    <view 
-      v-if="status==='daishangbao' && !isOrderCountdownEnd" 
-      class="jfb-takeorder-order-detail__countdown-banner"
-      :style="{backgroundColor: mainColor}"
+    <view
+      class="jfb-takeorder-order-detail__body"
+      :style="{ minHeight: layoutInfo.bodyMinHeight }"
+      v-if="info"
     >
-      <xd-font-icon icon="iconshijian-01" color="#fff" size="36"></xd-font-icon>
-      <view class="jfb-takeorder-order-detail__countdown-text">
-        订单剩余完成时间: {{ formatCountdownTime(orderCountdownSeconds) }}
+      <view
+        v-if="
+          (info.user_quotation_status === 'received' ||
+            info.user_quotation_status === 'win_order') &&
+          info.order_status !== 'close'
+        "
+        class="jfb-takeorder-order-detail__countdown-banner"
+        :style="{ backgroundColor: mainColor }"
+      >
+        <xd-font-icon
+          style="margin-right: 10rpx"
+          icon="iconshijian-01"
+          color="#fff"
+          size="36"
+        ></xd-font-icon>
+        <view
+          v-if="info.user_quotation_status === 'received'"
+          class="jfb-takeorder-order-detail__countdown-text"
+        >
+          订单剩余完成时间: {{ formatCountdownTime(reportCountdownSeconds) }}
+        </view>
+        <view
+          v-if="info.user_quotation_status === 'win_order'"
+          class="jfb-takeorder-order-detail__countdown-text"
+        >
+          订单剩余完成时间: {{ formatCountdownTime(receiveCountdownSeconds) }}
+        </view>
       </view>
-    </view>
-    <view class="jfb-takeorder-order-detail__body">
-      <Products :info="info" :status="status"></Products>
-      <view v-if="status!=='daishangbao'" class="wrap">
-        <view class="other-info-item" v-if="step===1||step===3">
+      <Products :info="info"></Products>
+      <view
+        v-if="
+          info.user_quotation_status === 'wait_quote' ||
+          info.user_quotation_status === 'quoted' ||
+          info.order_status === 'close' ||
+          info.user_quotation_status === 'cancel_quotation'
+        "
+        class="wrap"
+      >
+        <view
+          class="other-info-item"
+          v-if="
+            step === 1 ||
+            info.user_quotation_status === 'quoted' ||
+            info.order_status === 'close'
+          "
+        >
           <view>市场原价（仅供参考）</view>
-          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text
+            >{{
+              $xdUniHelper.divisionFloatNumber(info.market_amount, 100)
+            }}</view
+          >
         </view>
         <view class="other-info-item">
           <view>商品总数</view>
-          <view style="display:flex;align-items: center;"><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon>9</view>
+          <view style="display: flex; align-items: center"
+            ><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon
+            >{{ info.product_total }}</view
+          >
         </view>
-        <view class="other-info-item" v-if="step===1||step===3">
+        <view
+          class="other-info-item"
+          v-if="
+            step === 1 ||
+            info.user_quotation_status === 'quoted' ||
+            info.order_status === 'close'
+          "
+        >
           <view>报价人数</view>
-          <view>78人</view>
+          <view>{{ info.quotation_person_count }}人</view>
         </view>
-        <view class="other-info-item" v-if="step===1||step===3">
+        <view
+          class="other-info-item"
+          v-if="
+            step === 1 ||
+            info.user_quotation_status === 'quoted' ||
+            info.order_status === 'close'
+          "
+        >
           <view>报价倒计时</view>
-          <view :style="{color:mainColor}">{{ !isCountdownEnd?formatTime(remainingSeconds):'报价结束' }}</view>
+          <view :style="{ color: mainColor }">{{
+            !isCountdownEnd ? formatTime(info.rest_quotation_time) : "报价结束"
+          }}</view>
         </view>
-        <view class="other-info-item" v-if="step===2">
+        <view class="other-info-item" v-if="step === 2">
           <view>您的报价</view>
-          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>{{ quotePrice }}</view
+          >
         </view>
-        <view class="other-info-item" v-if="step===2">
+        <view class="other-info-item" v-if="step === 2">
           <view>预计结算</view>
-          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>{{ quotePriceTotal }}</view
+          >
         </view>
       </view>
       <view v-else class="wrap">
         <view class="other-info-item">
           <view>订单编号</view>
-          <view>HJKYUYYU7878</view>
+          <view>{{ info.order_id }}</view>
         </view>
         <view class="other-info-item">
           <view>商品总数</view>
-          <view style="display:flex;align-items: center;"><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon>9</view>
+          <view style="display: flex; align-items: center"
+            ><xd-font-icon size="28" icon="iconguanbi"></xd-font-icon
+            >{{ info.product_total }}</view
+          >
         </view>
         <view class="other-info-item">
           <view>订购电话</view>
-          <view>18888888888</view>
+          <view>{{ info.buyer_phone_number }}</view>
         </view>
         <view class="other-info-item">
           <view>订单结算价</view>
-          <view :style="{color:mainColor}"><text>¥ </text>145</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>
+            {{
+              $xdUniHelper.divisionFloatNumber(
+                info.receive_user_settle_amount,
+                100
+              )
+            }}</view
+          >
         </view>
       </view>
-      <view class="wrap" v-if="!isCountdownEnd&&step!==2&&status!=='daishangbao'">
+      <view
+        class="wrap"
+        v-if="
+          (info.user_quotation_status === 'cancel_quotation' ||
+            info.user_quotation_status === 'wait_quote' ||
+            info.user_quotation_status === 'quoted') &&
+          step !== 2 &&
+          info.order_status !== 'reported' &&
+          info.order_status !== 'close'
+        "
+      >
         <view class="quote-title">订单报价</view>
         <view class="quote-input">
           <view class="quote-input-unit">¥</view>
-          <input :disabled="quoteDisabled" v-model="quotePrice" placeholder="请输入单张报价金额" />
+          <input
+            :disabled="quoteDisabled"
+            v-model="quotePrice"
+            placeholder="请输入单张报价金额"
+          />
         </view>
-        <view class="quote-advice">建议报价：<text :style="{color:mainColor}">¥16.96 ～ ¥36.96</text></view>
-      </view>
-      <view v-if="status!=='daishangbao'" class="wrap" style="padding: 24rpx 32rpx">
-        <XdContentXss v-if="notice" :html="notice"></XdContentXss>
+        <view class="quote-advice"
+          >建议报价：<text :style="{ color: mainColor }"
+            >¥{{
+              $xdUniHelper.divisionFloatNumber(info.suggest_min_quotation, 100)
+            }}～ ¥{{
+              $xdUniHelper.divisionFloatNumber(info.suggest_max_quotation, 100)
+            }}</text
+          ></view
+        >
       </view>
-      <view class="wrap upload">
-        <view class="voucher">
-          <view class="voucher-item">
+      <view
+        class="wrap upload"
+        v-if="
+          info.user_quotation_status === 'received' &&
+          info.order_status !== 'close'
+        "
+      >
+        <view class="voucher" v-if="voucherImages && voucherImages.length > 0">
+          <view
+            class="voucher-item"
+            v-for="(item, index) in voucherImages"
+            :key="index"
+          >
             <view class="voucher-item-image">
-              <image />
+              <image :src="item.report_voucher_preview_url" />
               <view>凭证图</view>
             </view>
-            <view class="voucher-item-info">
-              <view class="voucher-item-info-number">
-                <text class="voucher-item-info-label">凭证号</text>
-                <view>202101020200110</view>
-              </view>
-              <view class="voucher-item-info-qrcode">
-                <text class="voucher-item-info-label">二维码</text>
-                <image></image>
+            <view>
+              <view
+                class="voucher-item-info"
+                v-for="(code, index) in item.code_list"
+                :key="index"
+              >
+                <view
+                  v-if="code.show_type === 'text'"
+                  class="voucher-item-info-number"
+                >
+                  <text class="voucher-item-info-label">凭证号</text>
+                  <view>{{ code.code }}</view>
+                </view>
+                <view
+                  v-if="code.show_type === 'qrcode'"
+                  class="voucher-item-info-qrcode"
+                >
+                  <text class="voucher-item-info-label">二维码</text>
+                  <image :src="code.code_preview_url"></image>
+                </view>
               </view>
             </view>
           </view>
         </view>
-        <view style="display: flex;justify-content: center;">
-          <xd-upload 
-            @onDone="handleUploadDone"
+        <view style="display: flex; justify-content: center">
+          <xd-upload
+            @on-done="handleUploadDone"
             selectType="image"
             :selectSource="['album']"
             ossType="private"
-            borderWidth="2rpx" 
+            borderWidth="2rpx"
             borderRadius="4rpx"
-            :backgroundColor="uploadBackground" 
-            :borderColor="mainColor" 
+            :backgroundColor="uploadBackground"
+            :borderColor="mainColor"
             borderStyle="solid"
-            width="654" 
-            height="88">
-            <view :style="{color:mainColor}">上传凭证</view>
+            width="654"
+            height="88"
+          >
+            <view :style="{ color: mainColor, fontSize: '28rpx' }"
+              >上传凭证</view
+            >
           </xd-upload>
         </view>
         <view class="upload-notice">
           <text>请务必按真实报单并仔细校对取餐码正确无误，</text>
-          <text :style="{color:mainColor}">取餐码错误或未上报真实取餐码造成客诉产生损失将由您承担！</text>
+          <text :style="{ color: mainColor }"
+            >取餐码错误或未上报真实取餐码造成客诉产生损失将由您承担！</text
+          >
         </view>
       </view>
-      <view v-if="!isCountdownEnd" :style="{ height: '100rpx'  }"></view>
-      <view v-if="!isCountdownEnd&&status!=='daishangbao'" class="fixe_bottom" :style="prod_bottom">
+      <view
+        v-if="
+          (info.order_status === 'close' || info.order_status === 'quoting') &&
+          notice &&
+          info.user_quotation_status !== 'received'
+        "
+        class="special-tip wrap"
+        style="padding: 24rpx 32rpx"
+      >
+        <view>特别提示</view>
+        <XdContentXss
+          v-if="
+            (info.user_quotation_status === 'wait_quote' && step !== 2) ||
+            info.user_quotation_status === 'quoted'
+          "
+          :html="notice"
+        ></XdContentXss>
+        <view v-else :style="{ color: mainColor }"
+          >因各平台市场价有出入，建议报价前自主核实价格，避免因价格出入问题弃单导致的纠纷！</view
+        >
+      </view>
+      <view v-if="!isCountdownEnd" :style="{ height: '100rpx' }"></view>
+      <view
+        :key="info.user_quotation_status"
+        v-if="info.order_status !== 'close' && info.order_status !== 'reported'"
+        class="fixe_bottom"
+        :style="prod_bottom"
+      >
         <XdButton
-          v-if="step===1"
+          v-if="
+            step === 1 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
           width="680rpx"
           @click="toConfirmQuote"
           size="small"
@@ -134,15 +290,23 @@
           >确认报价</XdButton
         >
         <XdButton
-          v-if="step===2"
+          v-if="
+            step === 2 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
           width="320rpx"
-          @click="step=1"
+          @click="step = 1"
           size="small"
           :cusStyle="[btnStyle]"
           >再想想</XdButton
         >
         <XdButton
-          v-if="step===2"
+          v-if="
+            step === 2 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
           width="320rpx"
           @click="handleSubmitQuote"
           size="small"
@@ -150,696 +314,898 @@
           >提交报价</XdButton
         >
         <XdButton
-          v-if="step===3"
+          v-if="info.user_quotation_status === 'quoted'"
           width="320rpx"
-          @click="showCancelDialog=true"
+          @click="showCancelDialog = true"
           size="small"
           :cusStyle="[btnStyle]"
           >取消报价</XdButton
         >
         <XdButton
-          v-if="step===3"
+          v-if="info.user_quotation_status === 'quoted'"
           width="320rpx"
-          @click="showEditQuoteDialog=true"
+          @click="showEditQuoteDialog = true"
           size="small"
           type="primary"
           >修改报价</XdButton
         >
-      </view>
-      <view v-if="status==='daishangbao'" class="fixe_bottom" :style="prod_bottom">
         <XdButton
+          v-if="
+            info.user_quotation_status === 'received' ||
+            info.user_quotation_status === 'win_order'
+          "
           width="320rpx"
-          @click="showCancelDialog=true"
+          @click="showDiscardDialog = true"
           size="small"
           :cusStyle="[btnStyle]"
           >放弃订单</XdButton
         >
         <XdButton
+          v-if="info.user_quotation_status === 'received'"
           width="320rpx"
-          @click="showEditQuoteDialog=true"
           size="small"
           type="primary"
+          @click="handleReportOrder"
           >上报订单</XdButton
         >
+        <XdButton
+          v-if="info.user_quotation_status === 'win_order'"
+          width="320rpx"
+          @click="handleAcceptOrder"
+          size="small"
+          type="primary"
+          >接单</XdButton
+        >
       </view>
-       <!-- <XdDailog 
-        :showClose="false"
-        :show.sync="showConfirmDialog" >
-          <template slot="title">
-            <view class="dialog-title">确认报价</view>
-          </template>
-          <view class="confirm-info">
-            <view class="confirm-info-item">
-              <view class="confirm-info-item-label">购买名称：</view>
-              <view class="confirm-info-item-value">畅享套餐</view>
-            </view>
-            <view class="confirm-info-item">
-              <view class="confirm-info-item-label">购买数量：</view>
-              <view class="confirm-info-item-value">2</view>
-            </view>
-            <view class="confirm-info-item">
-              <view class="confirm-info-item-label">您的报价：</view>
-              <view class="confirm-info-item-value">¥35.11</view>
-            </view>
-            <view class="confirm-info-item">
-              <view class="confirm-info-item-label">预计结算：</view>
-              <view class="confirm-info-item-value">¥70.22</view>
-            </view>
-          </view>
-          <view :style="{ color: mainColor,textAlign: 'center',fontSize:'24rpx'}">因各平台市场价有出入，建议报价前自主核实价格，避免因价格出入问题弃单被扣分!</view>
-          <template slot="btn">
-            <XdButton 
-              width="180rpx"
-              size="small" 
-              type="default"
-              bgColor="#EEE"
-              color="#999"
-              @click="showConfirmDialog = false"
-            >取消</XdButton>
-            <XdButton 
-              width="180rpx"
-              size="small" 
-              type="primary" 
-              @click="handleConfirmQuote"
-            >确定</XdButton>
-          </template>
-        </XdDailog> -->
-        <XdDailog width="70%" :showClose="false" :show.sync="showMsgDialog">
-          <template slot="title">
-            <view class="dialog-title">{{ msgTitle }}</view>
-          </template>
-          <view>{{ msg }}</view>
-          <template slot="btn">
-            <XdButton 
-              width="180rpx"
-              size="small" 
-              type="primary" 
-              @click="showMsgDialog = false"
-            >确定</XdButton>
-          </template>
-        </XdDailog>
-        <XdDailog width="70%" :showClose="false" :show.sync="showCancelDialog">
-          <template slot="title">
-            <view class="dialog-title">提示</view>
-          </template>
-          <view>是否确认取消报价</view>
-          <template slot="btn">
-            <XdButton 
-              width="180rpx"
-              size="small" 
-              bgColor="#EEE"
-              color="#999"
-              type="primary"
-              @click="showCancelDialog = false"
-            >取消</XdButton>
-            <XdButton 
-              width="180rpx"
-              size="small" 
-              type="primary" 
-              @click="handleCancelQuote"
-            >确定</XdButton>
-          </template>
-        </XdDailog>
-        <CusEditQuote 
-          v-if="showEditQuoteDialog"
-          :mainColor="mainColor"
-          :info="info"
-          @close="showEditQuoteDialog=false"
-          @confirm="handleConfirmEditQuote"
-        ></CusEditQuote>
+      <XdDailog width="70%" :showClose="false" :show.sync="showMsgDialog">
+        <template slot="title">
+          <view class="dialog-title">{{ msgTitle }}</view>
+        </template>
+        <view style="font-size: 28rpx">{{ msg }}</view>
+        <template slot="btn">
+          <XdButton
+            width="180rpx"
+            size="small"
+            type="primary"
+            @click="showMsgDialog = false"
+            >确定</XdButton
+          >
+        </template>
+      </XdDailog>
+      <XdDailog width="70%" :showClose="false" :show.sync="showCancelDialog">
+        <template slot="title">
+          <view class="dialog-title">提示</view>
+        </template>
+        <view style="font-size: 28rpx">是否确认取消报价</view>
+        <template slot="btn">
+          <XdButton
+            width="180rpx"
+            size="small"
+            bgColor="#EEE"
+            color="#999"
+            type="primary"
+            @click="showCancelDialog = false"
+            >取消</XdButton
+          >
+          <XdButton
+            width="180rpx"
+            size="small"
+            type="primary"
+            @click="handleCancelQuote"
+            >确定</XdButton
+          >
+        </template>
+      </XdDailog>
+      <XdDailog width="70%" :showClose="false" :show.sync="showDiscardDialog">
+        <template slot="title">
+          <view class="dialog-title">提示</view>
+        </template>
+        <view style="font-size: 28rpx">是否确认放弃订单</view>
+        <template slot="btn">
+          <XdButton
+            width="180rpx"
+            size="small"
+            bgColor="#EEE"
+            color="#999"
+            type="primary"
+            @click="showDiscardDialog = false"
+            >取消</XdButton
+          >
+          <XdButton
+            width="180rpx"
+            size="small"
+            type="primary"
+            @click="handleDiscardOrder"
+            >确定</XdButton
+          >
+        </template>
+      </XdDailog>
+      <CusEditQuote
+        v-if="showEditQuoteDialog"
+        :mainColor="mainColor"
+        :info="info"
+        @close="showEditQuoteDialog = false"
+        @confirm="handleConfirmEditQuote"
+      ></CusEditQuote>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdContentXss from "@/components/XdContentXss/XdContentXss";
-  import XdDailog from "@/components/XdDailog/XdDailog";
-  import XdButton from "@/components/XdButton/XdButton";
-  import XdUpload from "@/components/XdUpload/XdUpload";
-  import Products from './components/products.vue'
-  import CusEditQuote from "./components/CusEditQuote.vue";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbTakeorderOrderDetailMixin from "./JfbTakeorderOrderDetailMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  const Color = require("color");
-
-  export default {
-    name: "JfbTakeorderOrderDetail",
-    components: {
-      XdFontIcon,
-      XdContentXss,
-      XdDailog,
-      XdButton,
-      Products,
-      CusEditQuote,
-      XdUpload
-    },
-    mixins: [
-      componentsMixins, extsMixins, JfbTakeorderOrderDetailMixin
-    ],
-    data() {
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import XdButton from "@/components/XdButton/XdButton";
+import XdUpload from "@/components/XdUpload/XdUpload";
+import Products from "./components/products.vue";
+import CusEditQuote from "./components/CusEditQuote.vue";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbTakeorderOrderDetailMixin from "./JfbTakeorderOrderDetailMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+const Color = require("color");
+import { mapState } from "vuex";
+export default {
+  name: "JfbTakeorderOrderDetail",
+  components: {
+    XdFontIcon,
+    XdContentXss,
+    XdDailog,
+    XdButton,
+    Products,
+    CusEditQuote,
+    XdUpload,
+  },
+  mixins: [componentsMixins, extsMixins, JfbTakeorderOrderDetailMixin],
+  data() {
+    return {
+      info: null,
+      notice: "",
+      // 报价倒计时是否结束
+      isCountdownEnd: false,
+      // 报价倒计时定时器标识（用于清除定时器）
+      countdownTimer: null,
+      // 接单倒计时是否结束
+      isReceiveCountdownEnd: false,
+      // 接单倒计时定时器标识
+      receiveCountdownTimer: null,
+      // 接单倒计时剩余秒数（3分钟 = 180秒）
+      receiveCountdownSeconds: 180,
+      // 上报倒计时是否结束
+      isReportCountdownEnd: false,
+      // 上报倒计时定时器标识
+      reportCountdownTimer: null,
+      // 上报倒计时剩余秒数（10分钟 = 600秒）
+      reportCountdownSeconds: 600,
+      quotePrice: "",
+      closeMask: true,
+      showConfirmDialog: false,
+      quoteDisabled: false,
+      showMsgDialog: false,
+      step: 1,
+      showCancelDialog: false,
+      msg: "",
+      msgTitle: "",
+      showEditQuoteDialog: false,
+      status: "daishangbao",
+      uploadBackground: "",
+      order_id: "",
+      showDiscardDialog: false,
+      // 上传的凭证图片列表
+      voucherImages: [],
+    };
+  },
+  computed: {
+    ...mapState(["brandInfo"]),
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    btnStyle() {
       return {
-        info: {
-            id: 1,
-            num: 15,
-            people: 30,
-            remainingTime: 10,
-            shop_name: "味多美(北京西单大悦城店)",
-            brand_name: "味多美",
-            city: "北京市",
-            products: [
-              {
-                product_thumb:
-                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
-                product_name:
-                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
-                product_sku: "118g",
-                minPrice: 132,
-                maxPrice: 1232,
-                num: 15,
-              },
-              {
-                product_thumb:
-                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
-                product_name:
-                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
-                product_sku: "450g",
-                minPrice: 456,
-                maxPrice: 1546,
-                num: 16,
-              },
-            ],
-            market_price: 4000,
-            minPrice: 456,
-            maxPrice: 1546,
-            order_status: 1,
-        },
-        notice: '',
-        // 报价倒计时是否结束
-        isCountdownEnd: false,
-        // 报价倒计时定时器标识（用于清除定时器）
-        countdownTimer: null,
-        // 报价倒计时剩余秒数
-        remainingSeconds: 20,
-        // 待上报订单倒计时是否结束
-        isOrderCountdownEnd: false,
-        // 待上报订单倒计时定时器标识
-        orderCountdownTimer: null,
-        // 待上报订单倒计时剩余秒数
-        orderCountdownSeconds: 600,
-        quotePrice: '',
-        closeMask: true,
-        showConfirmDialog: false,
-        quoteDisabled: false,
-        showMsgDialog: false,
-        step: 1,
-        showCancelDialog: false,
-        msg: "",
-        msgTitle: "",
-        showEditQuoteDialog: false,
-        status: 'daishangbao',
-        uploadBackground: ""
-      }
+        color: this.mainColor,
+        border: `1px solid ${this.mainColor}`,
+      };
     },
-    computed: {
-      prod_bottom() {
-        return this.fixedStyle({ height: 0, zIndex: 111 });
-      },
-      btnStyle() {
-        return {
-          color: this.mainColor,
-          border: `1px solid ${this.mainColor}`,
-        };
-      },
-    },
-    watch: {
-      container(value, oldValue) {
-        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
-      },
-      status(newVal) {
-        // 当状态变为待上报时，启动10分钟倒计时
-        if (newVal === 'daishangbao') {
-          this.orderCountdownSeconds = 600; // 10分钟 = 600秒
-          this.isOrderCountdownEnd = false;
-          this.startOrderCountdown();
-        } else {
-          // 其他状态时清除待上报订单倒计时
-          this.clearOrderCountdown();
-        }
-      },
+    quotePriceTotal() {
+      return this.$xdUniHelper.multiplyFloatNumber(this.quotePrice, this.info.product_total);
+    },
+  },
+  watch: {
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
     },
-    created() {
-      this.init(this.container);
+  },
+  created() {
+    this.init(this.container);
 
-      //todo
-    },
-    methods: {
-      onJfbLoad(options) {
-        this.getContent()
-        // 如果是待上报状态，启动10分钟倒计时
-        if (this.status === 'daishangbao') {
-          this.orderCountdownSeconds = 600; // 10分钟 = 600秒
-          this.isOrderCountdownEnd = false;
-          this.startOrderCountdown();
-        }
-      },
-      getContent() {
-        jfbRootExec("getListBaseNewsContent", {
-          vm: this,
-          data: {
-            page_id: this.pageAttr["page_id"], //页面ID
-            container_id: this.containerId, //组件ID
-            limit: 1,
-          },
-        })
-          .then((res) => {
-            if (res.list.length > 0) {
-              if (res.list && res.list.length > 0) {
-                this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
-              }
+    //todo
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.order_id = options.order_id;
+      this.getOrderDetail();
+      this.getContent();
+    },
+    getContent() {
+      jfbRootExec("getListOrderNewsContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId, //组件ID
+          limit: 1,
+        },
+      })
+        .then((res) => {
+          if (res.list.length > 0) {
+            if (res.list && res.list.length > 0) {
+              this.notice = this.$xdUniHelper.filterHtml(res.list[0].content);
             }
-          })
-          .catch((error) => {
-            console.error(error);
-          });
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
-        this.uploadBackground = Color(this.mainColor).alpha(0.15).toString();
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      toConfirmQuote() {
-        if (!this.quotePrice) {
-          this.$xdAlert({ content: "请输入报价" });
-          return 
-        }
-        this.step=2
-      },
-      handleSubmitQuote() {
-        // this.showConfirmDialog = false;
-        this.step=3
-        this.quoteDisabled = true;
-        
-      },
-      handleCancelQuote() {
-        //请求接口，判断是否可以取消报价
-        this.msg = '报价已结束'
-        this.msgTitle = '提示'
-        this.showCancelDialog = false
-        this.showMsgDialog = true
-      },
-      handleConfirmEditQuote() {
-        //调用接口 
-        // 上报订单时停止待上报订单倒计时
-        if (this.status === 'daishangbao') {
-          this.clearOrderCountdown();
-          this.isOrderCountdownEnd = true;
-        }
-      },
-      startCountdown() {
-        // 先清除可能存在的旧定时器，防止重复计时
-        this.clearCountdown();
-
-        // 创建每秒执行的定时器
-        this.countdownTimer = setInterval(() => {
-          if (this.remainingSeconds > 0) {
-            // 剩余秒数减1
-            this.remainingSeconds--;
-          } else {
-            // 倒计时结束：清除定时器 + 标记结束状态
-            this.clearCountdown();
+          }
+        })
+        .catch((error) => {
+          this.$xdLog.catch(err);
+        });
+    },
+    getOrderDetail() {
+      jfbRootExec("getTakeorderOrderDetail", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+        },
+      })
+        .then((res) => {
+          this.info = res;
+          if (this.info.user_quotation_status === "quoted") {
+            this.quotePrice = this.$xdUniHelper.divisionFloatNumber(
+              this.info.user_quotation,
+              100
+            );
+            this.quoteDisabled = true;
+          }
+          if (
+            (this.info.user_quotation_status === "cancel_quotation" ||
+              this.info.user_quotation_status === "wait_quote" ||
+              this.info.user_quotation_status === "quoted") &&
+            this.info.order_status !== "reported" &&
+            this.info.order_status !== "close"
+          ) {
+            this.startCountdown();
+          }
+          if (this.info.user_quotation_status === "win_order") {
+            //如果中标，则显示接单按钮，并开启三分钟接单倒计时
+            this.startReceiveCountdown();
+          }
+          if (this.info.user_quotation_status === "received") {
+            //如果已接单，开启十分钟上报订单倒计时
+            this.startReportCountdown();
+          }
+          if (this.info.order_status === "close") {
+            //如果订单已关闭，则隐藏所有按钮，并且清除倒计时
             this.isCountdownEnd = true;
-            console.log("报价倒计时结束");
+            this.clearReceiveCountdown();
+            this.clearReportCountdown();
           }
-        }, 1000);
-      },
-      /**
-       * 启动待上报订单倒计时
-       */
-      startOrderCountdown() {
-        // 先清除可能存在的旧定时器，防止重复计时
-        this.clearOrderCountdown();
+        })
+        .catch((error) => {
+          this.$xdLog.catch(err);
+        });
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.uploadBackground = Color(this.mainColor).alpha(0.15).toString();
+      //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
 
-        // 创建每秒执行的定时器
-        this.orderCountdownTimer = setInterval(() => {
-          if (this.orderCountdownSeconds > 0) {
-            // 剩余秒数减1
-            this.orderCountdownSeconds--;
-          } else {
-            // 倒计时结束：清除定时器 + 标记结束状态
-            this.clearOrderCountdown();
-            this.isOrderCountdownEnd = true;
-            // 倒计时结束自动放弃订单
-            this.handleAutoCancelOrder();
-            console.log("待上报订单倒计时结束");
+      //this.height = getContainerPropsValue(container, 'content.height', 10);
+    },
+    toConfirmQuote() {
+      if (!this.quotePrice) {
+        this.$xdAlert({ content: "请输入报价" });
+        return;
+      }
+      // 校验报价范围
+      const min = this.$xdUniHelper.divisionFloatNumber(
+        this.info.suggest_min_quotation,
+        100
+      );
+      const max = this.$xdUniHelper.divisionFloatNumber(
+        this.info.suggest_max_quotation,
+        100
+      );
+      const price = parseFloat(this.quotePrice);
+      if (price < min || price > max) {
+        this.$xdAlert({ content: `报价价格只能在建议报价区间内` });
+        return;
+      }
+      this.step = 2;
+    },
+    handleSubmitQuote() {
+      this.$xdShowLoading({});
+      jfbRootExec("createQuotation", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+          amount: this.$xdUniHelper.multiplyFloatNumber(this.quotePrice, 100),
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.step = "";
+          // 提交创建报价之后重新刷新订单详情
+          this.getOrderDetail();
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+        });
+    },
+    handleCancelQuote() {
+      //请求接口，判断是否可以取消报价
+      jfbRootExec("cancelQuotation", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+        },
+      }).then((res) => {
+        this.$xdUniHelper.navigateBack();
+      });
+    },
+    handleConfirmEditQuote(price) {
+      jfbRootExec("updateQuotation", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+          amount: this.$xdUniHelper.multiplyFloatNumber(price, 100),
+        },
+      })
+        .then((res) => {
+          if (res.msg) {
+            this.msg = "报价已结束";
+            this.msgTitle = "提示";
+            this.showMsgDialog = true;
           }
-        }, 1000);
-      },
-      /**
-       * 格式化秒数为 分:秒 格式（比如 60秒 → 01:00，5秒 → 00:05）
-       * @param {Number} seconds 待格式化的秒数
-       * @returns {String} 格式化后的时间字符串
-       */
-      formatTime(seconds) {
-        // 计算分钟
-        const minutes = Math.floor(seconds / 60);
-        // 计算剩余秒数
-        const secs = seconds % 60;
-        // 补零处理（确保两位数显示）
-        const formatMinutes = minutes.toString().padStart(2, "0");
-        const formatSecs = secs.toString().padStart(2, "0");
-        return `${formatMinutes}:${formatSecs}`;
-      },
-      /**
-       * 格式化秒数为 XX分XX秒 格式（用于待上报状态倒计时显示）
-       * @param {Number} seconds 待格式化的秒数
-       * @returns {String} 格式化后的时间字符串，如 "02分59秒"
-       */
-      formatCountdownTime(seconds) {
-        // 计算分钟
-        const minutes = Math.floor(seconds / 60);
-        // 计算剩余秒数
-        const secs = seconds % 60;
-        // 补零处理（确保两位数显示）
-        const formatMinutes = minutes.toString().padStart(2, "0");
-        const formatSecs = secs.toString().padStart(2, "0");
-        return `${formatMinutes}分${formatSecs}秒`;
-      },
-      /**
-       * 倒计时结束时自动放弃订单
-       */
-      handleAutoCancelOrder() {
-        // 自动放弃订单的逻辑
-        this.msg = '订单已自动放弃，倒计时结束前未进行操作';
-        this.msgTitle = '提示';
-        this.showMsgDialog = true;
-        // 这里可以调用放弃订单的接口
-        // TODO: 调用放弃订单接口
-      },
-      /**
-       * 清除报价倒计时定时器
-       */
-      clearCountdown() {
-        if (this.countdownTimer) {
-          clearInterval(this.countdownTimer);
-          this.countdownTimer = null;
+          this.showEditQuoteDialog = false;
+          this.getOrderDetail();
+        })
+        .catch((error) => {
+          this.$xdLog.catch(err);
+        });
+    },
+    startCountdown() {
+      // 先清除可能存在的旧定时器，防止重复计时
+      this.clearCountdown();
+      // 创建每秒执行的定时器
+      this.countdownTimer = setInterval(() => {
+        if (this.info.rest_quotation_time > 0) {
+          // 剩余秒数减1
+          this.info.rest_quotation_time--;
+        } else {
+          // 倒计时结束：清除定时器 + 标记结束状态
+          this.clearCountdown();
+          if (this.isPreview) return;
+          this.getOrderDetail();
+          console.log("报价倒计时结束");
         }
-      },
-      /**
-       * 清除待上报订单倒计时定时器
-       */
-      clearOrderCountdown() {
-        if (this.orderCountdownTimer) {
-          clearInterval(this.orderCountdownTimer);
-          this.orderCountdownTimer = null;
+      }, 1000);
+    },
+    /**
+     * 格式化秒数为 分:秒 格式（比如 60秒 → 01:00，5秒 → 00:05）
+     * @param {Number} seconds 待格式化的秒数
+     * @returns {String} 格式化后的时间字符串
+     */
+    formatTime(seconds) {
+      // 计算分钟
+      const minutes = Math.floor(seconds / 60);
+      // 计算剩余秒数
+      const secs = seconds % 60;
+      // 补零处理（确保两位数显示）
+      const formatMinutes = minutes.toString().padStart(2, "0");
+      const formatSecs = secs.toString().padStart(2, "0");
+      return `${formatMinutes}:${formatSecs}`;
+    },
+    /**
+     * 格式化秒数为 XX分XX秒 格式（用于待上报状态倒计时显示）
+     * @param {Number} seconds 待格式化的秒数
+     * @returns {String} 格式化后的时间字符串，如 "02分59秒"
+     */
+    formatCountdownTime(seconds) {
+      // 计算分钟
+      const minutes = Math.floor(seconds / 60);
+      // 计算剩余秒数
+      const secs = seconds % 60;
+      // 补零处理（确保两位数显示）
+      const formatMinutes = minutes.toString().padStart(2, "0");
+      const formatSecs = secs.toString().padStart(2, "0");
+      return `${formatMinutes}分${formatSecs}秒`;
+    },
+    /**
+     * 清除报价倒计时定时器
+     */
+    clearCountdown() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+    },
+    /**
+     * 启动接单倒计时（3分钟）
+     */
+    startReceiveCountdown() {
+      // 先清除可能存在的旧定时器，防止重复计时
+      this.clearReceiveCountdown();
+      // 初始化倒计时秒数（3分钟 = 180秒）
+      this.receiveCountdownSeconds = this.info.rest_receive_time;
+      this.isReceiveCountdownEnd = false;
+
+      // 创建每秒执行的定时器
+      this.receiveCountdownTimer = setInterval(() => {
+        if (this.receiveCountdownSeconds > 0) {
+          // 剩余秒数减1
+          this.receiveCountdownSeconds--;
+        } else {
+          // 倒计时结束：清除定时器 + 标记结束状态
+          this.clearReceiveCountdown();
+          this.isReceiveCountdownEnd = true;
+          // 倒计时结束请求详情接口
+          this.getOrderDetail();
+          console.log("接单倒计时结束");
         }
-      },
-      handleUploadDone(files) {
-        console.log('event.handleUploadDone', files);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbUnload(){
-        this.clearCountdown();
-        this.clearOrderCountdown();
+      }, 1000);
+    },
+    /**
+     * 清除接单倒计时定时器
+     */
+    clearReceiveCountdown() {
+      if (this.receiveCountdownTimer) {
+        clearInterval(this.receiveCountdownTimer);
+        this.receiveCountdownTimer = null;
       }
-    }
-  }
+    },
+    /**
+     * 启动上报倒计时（10分钟）
+     */
+    startReportCountdown() {
+      // 先清除可能存在的旧定时器，防止重复计时
+      this.clearReportCountdown();
+      // 初始化倒计时秒数（10分钟 = 600秒），如果有接口返回的时间则使用接口返回的时间
+      this.reportCountdownSeconds = this.info.rest_report_time || 600;
+      this.isReportCountdownEnd = false;
 
+      // 创建每秒执行的定时器
+      this.reportCountdownTimer = setInterval(() => {
+        if (this.reportCountdownSeconds > 0) {
+          // 剩余秒数减1
+          this.reportCountdownSeconds--;
+        } else {
+          // 倒计时结束：清除定时器 + 标记结束状态
+          this.clearReportCountdown();
+          this.isReportCountdownEnd = true;
+          // 倒计时结束请求详情接口
+          this.getOrderDetail();
+          console.log("上报倒计时结束");
+        }
+      }, 1000);
+    },
+    /**
+     * 清除上报倒计时定时器
+     */
+    clearReportCountdown() {
+      if (this.reportCountdownTimer) {
+        clearInterval(this.reportCountdownTimer);
+        this.reportCountdownTimer = null;
+      }
+    },
+    /**
+     * 处理放弃订单
+     */
+    handleDiscardOrder() {
+      this.$xdShowLoading({});
+      jfbRootExec("discardOrder", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.showDiscardDialog = false;
+          // 接口成功后重新请求订单详情
+          this.getOrderDetail();
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    /**
+     * 处理接受订单
+     */
+    handleAcceptOrder() {
+      this.$xdShowLoading({});
+      jfbRootExec("acceptOrder", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          // 清除接单倒计时
+          this.clearReceiveCountdown();
+          // 接口成功后重新请求订单详情
+          this.getOrderDetail();
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    handleUploadDone(files) {
+      console.log("event.handleUploadDone", files);
+      this.$xdShowLoading({});
+      jfbRootExec("imageRecognition", {
+        vm: this,
+        data: {
+          image_url: files[0].url,
+        },
+      })
+        .then((res) => {
+          console.log("event.handleUploadDone", res);
+          jfbRootExec("getImagePreview", {
+            vm: this,
+            data: {
+              image_url: files[0].url,
+            },
+          })
+            .then((res1) => {
+              console.log("event.getImagePreview", res);
+              let obj = {
+                report_voucher: files[0].url,
+                report_voucher_preview_url: res1.preview_url,
+                code_list: res.list.map((item) => {
+                  if (item.show_type === "qrcode") {
+                    let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+                    item.code_preview_url = reg.test(item.preview_url)
+                      ? item.preview_url
+                      : `${this.brandInfo["api_host"]}${item.preview_url}`;
+                  } else {
+                    item.code = item.code;
+                  }
+                  return item;
+                }),
+              };
+              this.voucherImages.push(obj);
+              this.$xdHideLoading();
+            })
+            .catch((error) => {
+              this.$xdHideLoading();
+              this.$xdLog.catch(error);
+            });
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    /**
+     * 处理上报订单
+     */
+    handleReportOrder() {
+      // 检查是否上传了凭证
+      if (!this.voucherImages || this.voucherImages.length === 0) {
+        this.$xdAlert({ content: "请先上传凭证" });
+        return;
+      }
+      this.$xdShowLoading({});
+      jfbRootExec("reportOrder", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+          report_voucher_list: this.voucherImages,
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          // 清除上报倒计时
+          this.clearReportCountdown();
+          // 接口成功后重新请求订单详情
+          this.getOrderDetail();
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    onJfbScroll(options) {
+      console.log("event.onJfbScroll", options);
+    },
+    onJfbReachBottom(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+    onJfbShow(options) {
+      console.log("event.onJfbShow", options);
+    },
+    onJfbHide(options) {
+      console.log("event.onJfbHide", options);
+    },
+    onJfbBack(options) {
+      console.log("event.onJfbBack", options);
+    },
+    onJfbUpdate(...data) {
+      console.log("event.onJfbUpdate", data);
+    },
+    onJfbCustomEvent(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+    onJfbUnload() {
+      this.clearCountdown();
+      this.clearReceiveCountdown();
+      this.clearReportCountdown();
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbTakeorderOrderDetailLess.less";
+@import "./JfbTakeorderOrderDetailLess.less";
 
-  .jfb-takeorder-order-detail {
-    &__countdown-banner {
-      display: flex;
-      align-items: center;
-      padding: 24rpx 32rpx;
-      margin: 16rpx 16rpx 0 16rpx;
-      border-radius: 16rpx 16rpx 0 0;
-      background: #E5010E;
-      & > xd-font-icon {
-        margin-right: 16rpx;
-      }
+.jfb-takeorder-order-detail {
+  &__countdown-banner {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    margin: 16rpx 16rpx 0 16rpx;
+    border-radius: 16rpx 16rpx 0 0;
+    background: #e5010e;
+    & > xd-font-icon {
+      margin-right: 16rpx;
     }
-    &__countdown-text {
-      color: #fff;
-      font-size: 28rpx;
-      flex: 1;
+  }
+  &__countdown-text {
+    color: #fff;
+    font-size: 28rpx;
+    flex: 1;
+  }
+  &__body {
+    .wrap {
+      background: #fff;
+      margin: 16rpx;
+      border-radius: 16rpx;
     }
-    &__body{
-      .wrap{
-        background: #fff;
-        margin: 16rpx;
-        border-radius: 16rpx;
+    .special-tip {
+      padding: 24rpx 32rpx;
+      color: #333;
+      & > view:first-child {
+        font-size: 28rpx;
+        color: #333;
+        margin-bottom: 20rpx;
       }
-      .order-info{
-        &-title {
+      & > view:last-child {
+        font-size: 24rpx;
+      }
+    }
+    .order-info {
+      &-title {
+        display: flex;
+        justify-content: space-between;
+        padding: 24rpx 32rpx;
+        border-bottom: 1px solid #f4f4f4;
+        &-left {
           display: flex;
-          justify-content: space-between;
-          padding: 24rpx 32rpx;
-          border-bottom: 1px solid #f4f4f4;
-          &-left {
-            display: flex;
-            align-items: center;
-          }
-          &-right {
-            font-weight: 500;
-          }
+          align-items: center;
         }
-        &-product {
-          display: flex;
-          padding: 16rpx 32rpx;
-          border-bottom: 1px solid #f4f4f4;
-          & > image {
-            width: 180rpx;
-            height: 180rpx;
-            flex-shrink: 0;
-            border: 10rpx;
+        &-right {
+          font-weight: 500;
+        }
+      }
+      &-product {
+        display: flex;
+        padding: 16rpx 32rpx;
+        border-bottom: 1px solid #f4f4f4;
+        & > image {
+          width: 180rpx;
+          height: 180rpx;
+          flex-shrink: 0;
+          border: 10rpx;
+        }
+        &-info {
+          margin-left: 24rpx;
+          &-name {
+            .uni-max-cut(2,80);
+            margin-bottom: 10rpx;
           }
-          &-info {
-            margin-left: 24rpx;
-            &-name {
-              .uni-max-cut(2,80);
-              margin-bottom: 10rpx;
+          &-sku {
+            font-size: 24rpx;
+            color: #999;
+          }
+          &-price {
+            margin-top: 10rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            &-left {
+              color: #ff2c18;
+              font-size: 32rpx;
+              font-weight: 500;
+              & > text {
+                font-size: 24rpx;
+                margin-right: 10rpx;
+              }
+              .range {
+                margin: 0 10rpx;
+              }
             }
-            &-sku {
-              font-size: 24rpx;
+            &-right {
               color: #999;
-            }
-            &-price {
-              margin-top: 10rpx;
               display: flex;
-              justify-content: space-between;
-              align-items: center;
-              &-left {
-                color: #ff2c18;
-                font-size: 32rpx;
-                font-weight: 500;
-                & > text {
-                  font-size: 24rpx;
-                  margin-right: 10rpx;
-                }
-                .range {
-                  margin: 0 10rpx;
-                }
-              }
-              &-right {
-                color: #999;
-                display: flex;
-                align-items: baseline;
-                & > view {
-                  margin-left: 10rpx;
-                }
+              align-items: baseline;
+              & > view {
+                margin-left: 10rpx;
               }
             }
           }
         }
       }
-      .other-info-item {
-        display: flex;
-        justify-content: space-between;
-        padding: 20rpx 32rpx;
-        color: #333;
+    }
+    .other-info-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20rpx 32rpx;
+      color: #333;
+      font-size: 28rpx;
+      border-bottom: 2rpx solid #f8f8f8;
+    }
+    .quote {
+      &-title {
         font-size: 28rpx;
-        border-bottom: 2rpx solid #f8f8f8;
+        color: #333;
+        padding: 24rpx 0 24rpx 32rpx;
       }
-      .quote {
-        &-title {
+      &-input {
+        position: relative;
+        padding: 0 32rpx 24rpx 32rpx;
+        &-unit {
+          position: absolute;
+          left: 55rpx;
+          top: 50%;
+          transform: translateY(-80%);
           font-size: 28rpx;
           color: #333;
-          padding: 24rpx 0 24rpx 32rpx;
-        }
-        &-input {
-          position: relative;
-          padding: 0 32rpx 24rpx 32rpx;
-          &-unit {
-            position: absolute;
-            left: 55rpx;
-            top: 50%;
-            transform: translateY(-80%);
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 700;
-          }
-          &>input {
-            background:#F8F8F8;
-            font-size: 28rpx;
-            padding: 20rpx 46rpx 20rpx 60rpx;
-            border-radius: 16rpx;
-          }
+          font-weight: 700;
         }
-        &-advice{
-          font-size: 24rpx;
-          color: #666666;
-          padding: 0 0 24rpx 32rpx;
+        & > input {
+          background: #f8f8f8;
+          font-size: 28rpx;
+          padding: 20rpx 46rpx 20rpx 60rpx;
+          border-radius: 16rpx;
         }
       }
-      .fixe_bottom {
+      &-advice {
+        font-size: 24rpx;
+        color: #666666;
+        padding: 0 0 24rpx 32rpx;
+      }
+    }
+    .fixe_bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: unit(100, rpx);
+      padding: 0 unit(40, rpx);
+      flex-flow: nowrap;
+      background: #fff;
+      box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+      .flex_l {
         display: flex;
         align-items: center;
-        justify-content: space-around;
-        height: unit(100, rpx);
-        padding: 0 unit(40, rpx);
-        flex-flow: nowrap;
-        background: #fff;
-        box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
-        .flex_l {
-          display: flex;
-          align-items: center;
-          font-size: unit(32, rpx);
-        }
+        font-size: unit(32, rpx);
+      }
 
-        & > view {
-          flex: 1;
-          padding: 0 unit(15, rpx);
-        }
+      & > view {
+        flex: 1;
+        padding: 0 unit(15, rpx);
       }
-      .dialog-title{
-        color: #666666;
+    }
+    .dialog-title {
+      color: #666666;
+      font-size: 28rpx;
+    }
+    .confirm-info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 32rpx;
+
+      &-item {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 16rpx;
         font-size: 28rpx;
+        color: #333;
+        &-label {
+          width: 140rpx;
+          flex-shrink: 0;
+        }
+        &-value {
+          margin-left: 48rpx;
+          width: 120rpx;
+          flex: 1;
+          flex-wrap: wrap;
+          display: flex;
+          justify-content: flex-start;
+        }
       }
-      .confirm-info {
+    }
+    .upload-title {
+      border-radius: 4rpx;
+      background: #e5010e;
+      border: 1px solid #e5010e;
+      padding: 24rpx 0;
+      text-align: center;
+    }
+    .upload {
+      padding: 24rpx 32rpx;
+    }
+    .upload-notice {
+      color: #999999;
+      font-size: 24rpx;
+      margin-top: 24rpx;
+    }
+    .voucher {
+      &-item {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 32rpx;
-
-        &-item {
+        margin-bottom: 26rpx;
+        &-image {
+          flex-shrink: 0;
           display: flex;
+          flex-direction: column;
+          align-items: center;
           justify-content: center;
-          margin-bottom: 16rpx;
-          font-size: 28rpx;
-          color: #333;
-          &-label {
-            width: 140rpx;
-            flex-shrink: 0;
+          & > image {
+            width: 180rpx;
+            height: 180rpx;
+            border-radius: 4rpx;
           }
-          &-value{
-            margin-left: 48rpx;
-            width: 120rpx;
-            flex: 1;
-            flex-wrap: wrap;
-            display: flex;
-            justify-content: flex-start;
+          & > view {
+            color: #666;
+            font-size: 24rpx;
           }
         }
-      }
-      .upload-title {
-        border-radius: 4rpx;
-        background: #E5010E;
-        border: 1px solid #E5010E;
-        padding: 24rpx 0;
-        text-align: center;
-      }
-      .upload {
-        padding: 24rpx 32rpx;
-      }
-      .upload-notice {
-        color: #999999;
-        font-size: 24rpx;
-        margin-top: 24rpx;
-      }
-      .voucher {
-        &-item {
-          display: flex;
-          margin-bottom: 26rpx;
-          &-image {
-            flex-shrink: 0;
+        &-info {
+          &-label {
+            color: #666;
+            font-size: 24rpx;
+            margin-left: 24rpx;
+          }
+          &-number {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            justify-content: center;
-            & > image {
-              width: 180rpx;
-              height: 180rpx;
-              border-radius: 4rpx;
-            }
+            margin-bottom: 24rpx;
             & > view {
-              color: #666;
-              font-size: 24rpx;
+              font-size: 28rpx;
+              color: #999;
+              background: #f8f8f8;
+              padding: 20rpx;
+              border-radius: 16rpx;
             }
           }
-          &-info {
-            &-label {
-              color: #666;
-              font-size: 24rpx;
-              margin-right: 24rpx;
-            }
-            &-number {
-              display: flex;
-              align-items: center;
-              margin-bottom: 24rpx;
-              & > view {
-                font-size: 28rpx;
-                color: #999;
-                background: #f8f8f8;
-                padding: 20rpx;
-                border-radius: 16rpx;
-              }
-            }
-            &-qrcode {
-              display: flex;
-              align-items: flex-start;
-              & > image {
-                width: 120rpx;
-                height: 120rpx;
-                border-radius: 4rpx;
-              }
+          &-qrcode {
+            display: flex;
+            align-items: flex-start;
+            & > image {
+              width: 120rpx;
+              height: 120rpx;
+              border-radius: 4rpx;
             }
           }
         }
       }
     }
   }
+}
 </style>