jufubao-takeorder 1.0.1 → 1.0.2-beta10

package/src/components/JfbTakeorderOrderDetail/JfbTakeorderOrderDetail.vue

@@ -0,0 +1,1211 @@
+<template>
+  <view
+    class="jfb-takeorder-order-detail"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-takeorder-order-detail__edit"
+      :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>
+      </view>
+    </view>
+    <!-- #endif -->
+    <!-- 待上报状态倒计时横幅 -->
+    <view
+      class="jfb-takeorder-order-detail__body"
+      :style="{ minHeight: layoutInfo.bodyMinHeight }"
+      v-if="info"
+    >
+      <view
+        v-if="
+          info.user_quotation_status === 'received' ||
+          info.user_quotation_status === 'win_order'
+        "
+        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>
+      <Products :info="info"></Products>
+      <view
+        v-if="
+          info.user_quotation_status === 'wait_quote' ||
+          info.user_quotation_status === 'quoted' ||
+          info.user_quotation_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.user_quotation_status === 'close'
+          "
+        >
+          <view>市场原价（仅供参考）</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
+            >{{ info.product_total }}</view
+          >
+        </view>
+        <view
+          class="other-info-item"
+          v-if="
+            step === 1 ||
+            info.user_quotation_status === 'quoted' ||
+            info.user_quotation_status === 'close'
+          "
+        >
+          <view>报价人数</view>
+          <view>{{ info.quotation_person_count }}人</view>
+        </view>
+        <view
+          class="other-info-item"
+          v-if="
+            step === 1 ||
+            info.user_quotation_status === 'quoted' ||
+            info.user_quotation_status === 'close'
+          "
+        >
+          <view>报价倒计时</view>
+          <view :style="{ color: mainColor }">{{
+            !isCountdownEnd ? formatTime(info.rest_quotation_time) : "报价结束"
+          }}</view>
+        </view>
+        <view class="other-info-item" v-if="step === 2">
+          <view>您的报价</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>{{ quotePrice }}</view
+          >
+        </view>
+        <view class="other-info-item" v-if="step === 2">
+          <view>预计结算</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>{{ quotePriceTotal }}</view
+          >
+        </view>
+      </view>
+      <view v-else class="wrap">
+        <view class="other-info-item">
+          <view>订单编号</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
+            >{{ info.product_total }}</view
+          >
+        </view>
+        <view class="other-info-item">
+          <view>订购电话</view>
+          <view>{{ info.buyer_phone_number }}</view>
+        </view>
+        <view class="other-info-item">
+          <view>订单结算价</view>
+          <view :style="{ color: mainColor }"
+            ><text>¥ </text>
+            {{
+              $xdUniHelper.divisionFloatNumber(
+                info.receive_user_settle_amount,
+                100
+              )
+            }}</view
+          >
+        </view>
+      </view>
+      <view
+        class="wrap"
+        v-if="
+          (info.user_quotation_status === 'cancel_quotation' ||
+            info.user_quotation_status === 'wait_quote' ||
+            info.user_quotation_status === 'quoted') &&
+          step !== 2
+        "
+      >
+        <view class="quote-title">订单报价</view>
+        <view class="quote-input">
+          <view class="quote-input-unit">¥</view>
+          <input
+            :disabled="quoteDisabled"
+            v-model="quotePrice"
+            placeholder="请输入订单报价金额"
+          />
+        </view>
+        <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"
+        v-if="
+          info.user_quotation_status === 'received' ||
+          info.user_quotation_status === 'reported'
+        "
+      >
+        <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 :src="item.report_voucher_preview_url" />
+              <view>凭证图</view>
+            </view>
+            <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 v-if="info.user_quotation_status === 'received'" style="display: flex; justify-content: center">
+          <xd-upload
+            @on-done="handleUploadDone"
+            selectType="image"
+            :selectSource="['album']"
+            ossType="private"
+            borderWidth="2rpx"
+            borderRadius="4rpx"
+            :backgroundColor="uploadBackground"
+            :borderColor="mainColor"
+            borderStyle="solid"
+            width="654"
+            height="88"
+          >
+            <view :style="{ color: mainColor, fontSize: '28rpx' }"
+              >上传凭证</view
+            >
+          </xd-upload>
+        </view>
+        <view v-if="info.user_quotation_status === 'received'" class="upload-notice">
+          <text>请务必按真实报单并仔细校对取餐码正确无误，</text>
+          <text :style="{ color: mainColor }"
+            >取餐码错误或未上报真实取餐码造成客诉产生损失将由您承担！</text
+          >
+        </view>
+      </view>
+      <view
+        v-if="
+          (info.user_quotation_status === 'close' ||
+            info.user_quotation_status === 'quoted') &&
+          notice
+        "
+        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.user_quotation_status !== 'close' &&
+          info.user_quotation_status !== 'reported'
+        "
+        class="fixe_bottom"
+        :style="prod_bottom"
+      >
+        <XdButton
+          v-if="
+            step === 1 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
+          width="680rpx"
+          @click="toConfirmQuote"
+          size="small"
+          type="primary"
+          >确认报价</XdButton
+        >
+        <XdButton
+          v-if="
+            step === 2 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
+          width="320rpx"
+          @click="step = 1"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >再想想</XdButton
+        >
+        <XdButton
+          v-if="
+            step === 2 &&
+            (info.user_quotation_status === 'wait_quote' ||
+              info.user_quotation_status === 'cancel_quotation')
+          "
+          width="320rpx"
+          @click="handleSubmitQuote"
+          size="small"
+          type="primary"
+          >提交报价</XdButton
+        >
+        <XdButton
+          v-if="info.user_quotation_status === 'quoted'"
+          width="320rpx"
+          @click="showCancelDialog = true"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >取消报价</XdButton
+        >
+        <XdButton
+          v-if="info.user_quotation_status === 'quoted'"
+          width="320rpx"
+          @click="showEditQuoteDialog = true"
+          size="small"
+          type="primary"
+          >修改报价</XdButton
+        >
+        <XdButton
+          v-if="
+            info.user_quotation_status === 'received'
+          "
+          width="320rpx"
+          @click="showDiscardDialog = true"
+          size="small"
+          :cusStyle="[btnStyle]"
+          >放弃订单</XdButton
+        >
+        <XdButton
+          v-if="info.user_quotation_status === 'received'"
+          width="320rpx"
+          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 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 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: 0,
+      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 {
+        color: this.mainColor,
+        border: `1px solid ${this.mainColor}`,
+      };
+    },
+    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);
+
+    //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) => {
+          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.startCountdown();
+          }
+          if (this.info.user_quotation_status === "win_order") {
+            //如果中标，则显示接单按钮，并开启三分钟接单倒计时
+            this.startReceiveCountdown();
+          }
+          if (this.info.user_quotation_status === "received") {
+            //如果已接单，开启十分钟上报订单倒计时
+            this.startReportCountdown();
+          }
+          if (this.info.user_quotation_status === "close") {
+            //如果订单已关闭，则隐藏所有按钮，并且清除倒计时
+            this.isCountdownEnd = true;
+            this.clearReceiveCountdown();
+            this.clearReportCountdown();
+          }
+        })
+        .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.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 > 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;
+          }
+          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("报价倒计时结束");
+        }
+      }, 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("接单倒计时结束");
+        }
+      }, 1000);
+    },
+    /**
+     * 清除接单倒计时定时器
+     */
+    clearReceiveCountdown() {
+      if (this.receiveCountdownTimer) {
+        clearInterval(this.receiveCountdownTimer);
+        this.receiveCountdownTimer = null;
+      }
+    },
+    /**
+     * 启动上报倒计时（10分钟）
+     */
+    startReportCountdown() {
+      // 先清除可能存在的旧定时器，防止重复计时
+      this.clearReportCountdown();
+      // 初始化倒计时秒数（10分钟 = 600秒），如果有接口返回的时间则使用接口返回的时间
+      this.reportCountdownSeconds = this.info.rest_report_time;
+      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";
+
+.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;
+  }
+  &__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;
+      }
+      & > 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;
+          align-items: center;
+        }
+        &-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;
+          }
+          &-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;
+              }
+            }
+            &-right {
+              color: #999;
+              display: flex;
+              align-items: baseline;
+              & > view {
+                margin-left: 10rpx;
+              }
+            }
+          }
+        }
+      }
+    }
+    .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;
+        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;
+        }
+      }
+      &-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;
+        font-size: unit(32, rpx);
+      }
+
+      & > view {
+        flex: 1;
+        padding: 0 unit(15, rpx);
+      }
+    }
+    .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;
+        }
+      }
+    }
+    .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;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          & > image {
+            width: 180rpx;
+            height: 180rpx;
+            border-radius: 4rpx;
+          }
+          & > view {
+            color: #666;
+            font-size: 24rpx;
+          }
+        }
+        &-info {
+          &-label {
+            color: #666;
+            font-size: 24rpx;
+            margin-left: 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;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>