jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseOrderDetail/JfbBaseOrderDetail.vue

@@ -0,0 +1,1921 @@
+<template>
+  <view
+    class="jfb-base-order-detail"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-order-detail__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-order-detail__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-order-detail__body" v-if="info && info !== null">
+      <view>
+        <view class="jfb-base-order-detail__body-time" :style="{
+          top: (layoutInfo.top-2) + 'rpx',
+        }">
+          <xd-font-icon
+            size="48"
+            v-if="info.status.status_type === 'wait'"
+            icon="icondengdai"
+            color="#7ABDFF"
+          ></xd-font-icon>
+          <xd-font-icon
+            size="48"
+            v-if="info.status.status_type === 'success'"
+            icon="iconchenggong"
+            color="#43CF7C"
+          ></xd-font-icon>
+          <xd-font-icon
+            size="48"
+            v-if="info.status.status_type === 'cancel'"
+            icon="iconquxiao"
+            color="#F7AF57"
+          ></xd-font-icon>
+          <xd-font-icon
+            size="48"
+            v-if="info.status.status_type === 'error'"
+            icon="iconshibai"
+            color="#FA5C5C"
+          ></xd-font-icon>
+          <view
+            v-if="info.status.loading_timeout != '-1'"
+            :style="{ marginLeft: '40rpx' }"
+          >{{ info.status.status_name }}：{{ timeMsg }}</view>
+          <view v-else :style="{ marginLeft: '40rpx' }">{{ info.status.status_name }}</view>
+        </view>
+        <view style="height: 90rpx;"></view>
+      </view>
+      <view :style="{ padding: outMargin }">
+        <view v-if="info.film_show && info.film_show !== null">
+          <view
+            class="jfb-base-order-detail__body-card jfb-base-order-detail__body-no-delivery"
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              boxShadow: shadowBox,
+              marginBottom: padding + 'rpx',
+            }"
+          >
+            <view class="jfb-base-order-detail__body-no-delivery-info">
+              <xd-jfb-image
+                width="200"
+                height="200"
+                bgc="#f8f8f8"
+                radius="10"
+                shadow="10"
+                mode="scaleToFill"
+                :src="info.film_show.thumb"
+              ></xd-jfb-image>
+              <view class="jfb-base-order-detail__body-no-delivery-info-right">
+                <view class="jfb-base-order-detail__body-no-delivery-info-right-name">
+                  <view>{{ info.film_show.name }}</view>
+                </view>
+                <view
+                  v-if="info.film_show.show_version"
+                  class="jfb-base-order-detail__body-no-delivery-info-right-tag"
+                >
+                  <xd-tag
+                    :color="mainColor"
+                    inverted
+                    size="small"
+                    type="primary"
+                    >{{ info.film_show.show_version }}
+                  </xd-tag>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-no-delivery-info-right-item"
+                  v-if="info.film_show.hall_name"
+                >
+                  <view>影厅：</view>
+                  <view>{{ info.film_show.hall_name }}</view>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-no-delivery-info-right-item"
+                  v-if="info.film_show.show_time"
+                >
+                  <view>场次：</view>
+                  <view>{{ info.film_show.show_time }}</view>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-no-delivery-info-right-item"
+                  v-if="info.film_show.seat_name"
+                >
+                  <view>座位：</view>
+                  <view :style="{ color: mainColor, fontWeight: 700 }">{{info.film_show.seat_name }}</view>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-no-delivery-info-right-item"
+                  v-if="info.film_show.num > 0"
+                >
+                  <view>{{ info.film_show.num }}张</view>
+                </view>
+              </view>
+            </view>
+            <view
+              class="jfb-base-order-detail__body-delivery-bottom"
+              v-if="info.film_show.detail && info.film_show.detail !== null"
+            >
+              <view class="jfb-base-order-detail__body-delivery-bottom-title">{{info.film_show.detail.title }}</view>
+              <view
+                v-for="(Ditem, Dindex) in info.film_show.detail.items"
+                :key="Dindex"
+                class="jfb-base-order-detail__body-delivery-bottom-item"
+                :style="{
+                  marginBottom: lineHeight + 'rpx'
+                }"
+              >
+                <view style="width: 130rpx"
+                  >{{ Ditem.label }} <span v-if="Ditem.label">:</span>
+                </view>
+                <view>{{ Ditem.value }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view v-if="info.sub_orders && info.sub_orders.length > 0">
+          <view
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              boxShadow: shadowBox,
+              marginBottom: padding + 'rpx',
+            }"
+            v-for="(item, index) in info.sub_orders"
+            :key="index"
+            class="jfb-base-order-detail__body-card jfb-base-order-detail__body-delivery"
+          >
+            <view class="jfb-base-order-detail__body-delivery-title">
+              <view>子订单号：{{ item.sub_order_id }}</view>
+              <view :style="{ color: mainColor }">{{item.status.status_name}}</view>
+            </view>
+            <view
+              style="border-bottom: 1px solid #eeeeee"
+              v-for="(Sitem, Sindex) in item.products"
+              :key="Sindex"
+            >
+              <view class="jfb-base-order-detail__body-delivery-content">
+                <xd-jfb-image
+                  width="200"
+                  height="200"
+                  bgc="#f8f8f8"
+                  radius="10"
+                  shadow="10"
+                  mode="scaleToFill"
+                  :src="Sitem.product_thumb"
+                ></xd-jfb-image>
+                <view class="jfb-base-order-detail__body-delivery-content-info">
+                  <view class="jfb-base-order-detail__body-delivery-content-info-name">{{ Sitem.product_name }}</view>
+                  <view v-if="Sitem.brand_name" class="brand-name" :style="{color:brandTextColor}">{{ Sitem.brand_name }}</view>
+                  <view
+                    v-if="Sitem.product_sku_name"
+                    class="jfb-base-order-detail__body-delivery-content-info-sku"
+                  >规格：{{ Sitem.product_sku_name }}</view>
+                  <view class="jfb-base-order-detail__body-delivery-content-info-price">
+                    <view :style="{ fontSize: '32rpx', color: mainColor }">
+                      <xd-unit
+                        :price="Sitem.sale_price"
+                        :color="mainColor"
+                        :fontSize="32"
+                        v-if="biz_code !== 'gift' || info.is_show_gift_price"
+                      ></xd-unit>
+                    </view>
+                    <view style="
+                        font-size: 28rpx;
+                        color: #999999;
+                        display: flex;
+                        align-items: center;
+                      ">x {{ Sitem.product_num }}</view>
+                  </view>
+                </view>
+              </view>
+              <view
+                class="jfb-base-order-detail__body-delivery-content-info-form"
+                v-for="(Fitem, Findex) in Sitem.product_form_data"
+                :key="Findex"
+                :style="{backgroundColor:noticeBgc,color: warningColor,borderRadius: radius + 'rpx',}"
+              >
+                <view> {{ Fitem.label }}： </view>
+                <view> {{ Fitem.value }} </view>
+              </view>
+            </view>
+            <view
+              class="jfb-base-order-detail__body-delivery-bottom"
+              v-if="item.info && item.info.length > 0"
+            >
+              <view class="jfb-base-order-detail__body-delivery-bottom-title">{{item.service_name}}</view>
+              <view
+                v-for="(Ditem, Dindex) in item.info"
+                :key="Dindex"
+                class="jfb-base-order-detail__body-delivery-bottom-item"
+                :style="{
+                  marginBottom: lineHeight + 'rpx'
+                }"
+              >
+                <view style="width: 130rpx;display: flex;">
+                  <view v-html="Ditem.label"></view>
+                  <text v-if="Ditem.label">:</text>
+                </view>
+                <view v-html="Ditem.value"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="info.settle_tag_info"
+          class="jfb-base-order-detail__body-card jfb-base-order-detail__body-settle"
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+        >
+          <view class="jfb-base-order-detail__body-settle-title">{{info.settle_tag_info.layer_name }}</view>
+          <view
+            v-for="(item, index) in info.settle_tag_info.settle_tag_info_list"
+            :key="index"
+            class="jfb-base-order-detail__body-settle-list"
+          >{{ item.label }}：{{ item.value }}</view>
+        </view>
+        <view v-if="info.codes && info.codes.length > 0">
+          <view
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              boxShadow: shadowBox,
+              marginBottom: padding + 'rpx',
+            }"
+            v-if="
+              info.codes.length === 1 &&
+              (info.codes[0].show_type === 'qrcode' ||
+                info.codes[0].show_type === 'barcode')
+            "
+            class="jfb-base-order-detail__body-card jfb-base-order-detail__body-cashier"
+          >
+            <view class="jfb-base-order-detail__body-cashier-text">{{info.codes[0].show_type === "qrcode" ? "二维码" : "条形码" }}</view>
+            <view v-if="showPreviewCode" style="position: relative">
+              <image
+                :style="{
+                  height: info.codes[0].show_type === 'qrcode' ? '50vw' : '25vw',
+                  width: info.codes[0].show_type === 'qrcode' ? '50vw' : '85vw',
+                }"
+                :src="info.codes[0].code_url"
+              ></image>
+              <image v-if="info.codes[0].logo&&info.codes[0].show_type === 'qrcode'" class="logo-icon" :src="info.codes[0].logo"></image>
+            </view>
+
+            <view v-if="info.codes[0].can_read_password" class="jfb-base-order-detail__body-cashier-password" @click="showPassword = true">
+              {{ showPassword ? info.codes[0].can_read_code : "查看" }}
+            </view>
+            <view v-else class="jfb-base-order-detail__body-cashier-text">
+              {{ info.codes[0].can_read_code }}
+            </view>
+            <view v-if="info.codes[0].refund_tip_text" style="color:red;font-size:24rpx;text-align:center;margin-top:10rpx">
+              {{info.codes[0].refund_tip_text}}
+            </view>
+            <view
+              v-if="info.codes[0].code_end_time"
+              class="jfb-base-order-detail__body-cashier-code"
+              :style="{
+                borderColor: mainColor,
+                color: mainColor,
+                background: bgColor,
+              }"
+            >{{ info.codes[0].code_end_time }}</view>
+          </view>
+          <view v-else>
+            <view
+              :style="{
+                background: backgroundColor,
+                border: borderBox,
+                borderRadius: radius + 'rpx',
+                boxShadow: shadowBox,
+                marginBottom: padding + 'rpx',
+              }"
+              v-for="(item, index) in info.codes"
+              :key="index"
+            >
+              <view style="
+                  color: #999;
+                  background: #eee;
+                  border-radius: 20rpx;
+                  width: 80rpx;
+                  text-align: center;
+                  vertical-align: middle;
+                  font-size: 24rpx;
+                  padding: 10rpx 0;
+                  margin: 32rpx 0 32rpx 32rpx;
+                ">{{info.codes.length > 10 ? index + 1 : `0${index + 1}` }}</view>
+              <view
+                class="jfb-base-order-detail__body-card jfb-base-order-detail__body-num"
+                v-if="item.show_type === 'text' && !item.password"
+              >
+                <view class="jfb-base-order-detail__body-num-info">
+                  <view>{{ item.can_read_code }}</view>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-num-info-copy"
+                  @click="copy(item.code)"
+                >复制</view>
+                <view
+                  v-if="item.code_end_time"
+                  class="jfb-base-order-detail__body-cashier-code"
+                  :style="{
+                    borderColor: mainColor,
+                    color: mainColor,
+                    background: bgColor,
+                  }"
+                >{{ item.code_end_time }}</view>
+              </view>
+
+              <view
+                class="jfb-base-order-detail__body-card"
+                v-if="item.show_type === 'text' && item.password"
+              >
+                <view
+                  class="jfb-base-order-detail__body-num"
+                  style="
+                    border-bottom: 1px solid #f2f2f2;
+                    padding-bottom: 48rpx;
+                  "
+                >
+                  <view class="jfb-base-order-detail__body-num-info">
+                    <view>{{ item.can_read_code }}</view>
+                  </view>
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    @click="copy(item.code)"
+                  >复制</view>
+                </view>
+                <view
+                  class="jfb-base-order-detail__body-num"
+                  style="padding-top: 48rpx"
+                >
+                  <view class="jfb-base-order-detail__body-num-info">
+                    <view>{{ item.can_read_password }}</view>
+                  </view>
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    @click="copy(item.password)">复制</view>
+                  <view
+                    v-if="item.code_end_time"
+                    class="jfb-base-order-detail__body-cashier-code"
+                    :style="{
+                      borderColor: mainColor,
+                      color: mainColor,
+                      background: bgColor,
+                    }"
+                  >{{ item.code_end_time }}</view>
+                </view>
+              </view>
+              <view
+                class="jfb-base-order-detail__body-card"
+                v-if="item.show_type === 'qrcode'"
+              >
+                <view class="jfb-base-order-detail__body-num">
+                  <!-- <view class="jfb-base-order-detail__body-num-info">
+                    <view>{{ item.can_read_code }}</view>
+                  </view> -->
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    style="margin-top: 0;"
+                    @click="handleShowCode(item)">查看二维码和{{ item.password_title }}</view>
+                  <view
+                    v-if="item.code_end_time"
+                    class="jfb-base-order-detail__body-cashier-code"
+                    :style="{
+                      borderColor: mainColor,
+                      color: mainColor,
+                      background: bgColor,
+                    }"
+                  >{{ item.code_end_time }}</view>
+                </view>
+              </view>
+
+              <view
+                class="jfb-base-order-detail__body-card"
+                v-if="item.show_type === 'barcode'"
+              >
+                <view class="jfb-base-order-detail__body-num">
+                  <view class="jfb-base-order-detail__body-num-info">
+                    <view>{{ item.can_read_code }}</view>
+                  </view>
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    @click="handleShowCode(item)"
+                    >查看一维码</view>
+                  <view
+                    v-if="item.code_end_time"
+                    class="jfb-base-order-detail__body-cashier-code"
+                    :style="{
+                      borderColor: mainColor,
+                      color: mainColor,
+                      background: bgColor,
+                    }"
+                  >{{ item.code_end_time }}</view>
+                </view>
+              </view>
+
+              <view
+                class="jfb-base-order-detail__body-card jfb-base-order-detail__body-num"
+                v-if="item.show_type === 'url'"
+              >
+                <view class="code-url">
+                  <view class="jfb-base-order-detail__body-num-info">
+                    <view>{{ item.can_read_code }}</view>
+                  </view>
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    @click="handleToJump(item.code)"
+                  >访问</view>
+                  <view
+                    class="jfb-base-order-detail__body-num-info-copy"
+                    @click="copy(item.code)"
+                  >复制</view>
+                </view>
+                <view
+                  v-if="item.code_end_time"
+                  class="jfb-base-order-detail__body-cashier-code"
+                  :style="{
+                    borderColor: mainColor,
+                    color: mainColor,
+                    background: bgColor,
+                  }"
+                >{{ item.code_end_time }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view v-if="info.support_shops && is_show_support_shop === 'Y'">
+          <view
+            class="jfb-base-order-detail__body-card jfb-base-order-detail__body-jump"
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              boxShadow: shadowBox,
+              marginBottom: padding + 'rpx',
+            }"
+          >
+            <view class="jfb-base-order-detail__body-jump-label">
+              {{ info.support_shops.layer_name }}
+            </view>
+            <view
+              class="jfb-base-order-detail__body-jump-btn"
+              @click="handleToLink(info.support_shops.brand_id, info)"
+            >
+              <view>去查看</view>
+              <xd-font-icon size="24" icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="info.shop"
+          class="jfb-base-order-detail__body-card jfb-base-order-detail__body-shop"
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+        >
+          <view class="jfb-base-order-detail__body-shop-title">
+            <view :style="{ background: mainColor }"></view>
+            <view>{{ info.shop.layer_name }}</view>
+          </view>
+          <view class="jfb-base-order-detail__body-shop-name">
+            {{ info.shop.shop_name }}
+          </view>
+          <view class="jfb-base-order-detail__body-shop-address">地址： {{ info.shop.shop_address }}</view>
+        </view>
+        <view
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+          v-if="info.detail"
+          class="jfb-base-order-detail__body-card"
+        >
+          <view
+            v-for="(item, index) in info.detail"
+            :key="index"
+            class="jfb-base-order-detail__body-order"
+            :style="{
+              marginBottom: lineHeight + 'rpx'
+            }"
+          >
+            <view :style="{ fontWeight: item.style }">
+              <view style="display: flex;">
+                <view v-html="item.label"></view>
+                <text v-if="item.label">：</text>
+              </view>
+              <view v-html="item.value"></view>
+            </view>
+            <view
+              :style="{ marginLeft: '30rpx' }"
+              v-if="item.type === 'copy'"
+              class="jfb-base-order-detail__body-order-copy"
+              @click="copy(item.value)"
+            >复制</view>
+          </view>
+        </view>
+        <view
+          v-if="info.pay_info && (biz_code !== 'gift' || info.is_show_gift_price) && is_not_show_price !== 'Y'"
+          class="jfb-base-order-detail__body-card"
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+        >
+          <view v-for="(item, index) in info.pay_info.base" :key="index">
+            <view
+              v-if="item.type !== 'line'"
+              class="jfb-base-order-detail__body-price"
+              :style="{
+                marginBottom: lineHeight + 'rpx'
+              }"
+            >
+              <view :style="{ fontWeight: item.style }">{{ item.label }}</view>
+              <xd-unit
+                :fontSize="28"
+                :iconSize="0.28"
+                :fontWeight="item.style"
+                :price="item.value"
+              ></xd-unit>
+            </view>
+            <view
+              v-if="item.type === 'line'"
+              class="jfb-base-order-detail__body-line"
+            ></view>
+          </view>
+          <view v-if="info.pay_info.cards && info.pay_info.cards.length > 0">
+            <view @click="showPayCard = true" class="jfb-base-order-detail__body-show" v-if="!showPayCard">
+              <text>使用 {{ info.pay_info.cards.length }} 张票券 展开</text>
+              <xd-font-icon
+                style="margin-left: 8rpx"
+                size="28"
+                icon="iconxia_down"
+              ></xd-font-icon>
+            </view>
+            <view @click="showPayCard = false" class="jfb-base-order-detail__body-show" v-else>
+              <text>使用{{ info.pay_info.cards.length }}张票券 收起</text>
+              <xd-font-icon
+                style="margin-left: 8rpx"
+                size="28"
+                icon="iconshang_up"
+              ></xd-font-icon>
+            </view>
+          </view>
+          <view v-if="showPayCard">
+            <view
+              class="jfb-base-order-detail__body-pay-card"
+              v-for="(item, index) in info.pay_info.cards"
+              :key="index"
+            >
+              <view>票券：{{ item.card_type_name }}</view>
+              <view class="list-item">
+                <view>券号：{{ item.card_number }}</view>
+                <xd-unit
+                  :fontSize="28"
+                  :iconSize="0.28"
+                  :price="item.card_use_point"
+                  :unit="item['card_unit']"
+                ></xd-unit>
+                <view v-if="item['card_discount_use_point'] > 0" class="discount">已优惠:{{item['card_discount_use_point']}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view v-if="info.contacts&&info.contacts.length>0">
+          <view
+            :style="{
+              background: backgroundColor,
+              border: borderBox,
+              borderRadius: radius + 'rpx',
+              boxShadow: shadowBox,
+              marginBottom: padding + 'rpx',
+            }"
+            class="jfb-base-order-detail__body-card jfb-base-order-detail__body-link"
+            v-for="(item, index) in info.contacts"
+            :key="index"
+          >
+            <view class="jfb-base-order-detail__body-link-title">{{item.title }}</view>
+            <view v-for="(Sitem, Sindex) in item.data" :key="Sindex">
+              <view class="jfb-base-order-detail__body-link-item">
+                <view v-html="Sitem.label"></view>
+                <view v-html="Sitem.value"></view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!--旅游模块-->
+        <view
+          v-if="info.extras &&
+          info.extras.travel_booking_info &&
+          info.extras.travel_booking_info['travelers'] &&
+          info.extras.travel_booking_info['travelers'].length > 0"
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+          class="jfb-base-order-detail__body-card jfb-base-order-detail__body-booking"
+        >
+          <view class="jfb-base-order-detail__body-delivery-bottom-title">预订信息</view>
+          <view class="jfb-base-order-detail__body-line"></view>
+          <view class="jfb-base-order-detail__body-booking-list">
+            <view v-for="(item,index) in info.extras.travel_booking_info.travelers" :key="index" class="jfb-base-order-detail__body-booking-list-item">
+              <view :style="{color:mainColor,background:bgColor}" class="jfb-base-order-detail__body-booking-list-item-num">游客{{index+1}}</view>
+              <view class="jfb-base-order-detail__body-booking-list-item-info">
+                <view class="jfb-base-order-detail__body-booking-list-item-info-name">{{item.name}}</view>
+                <view v-if="item.id_card_no" class="jfb-base-order-detail__body-booking-list-item-info-item">身份证：{{item.id_card_no}}</view>
+                <view v-if="item.mobile" class="jfb-base-order-detail__body-booking-list-item-info-item">手机号：{{item.mobile}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!--旅游模块-->
+        <view
+          v-if="info.productDetail"
+          class="jfb-base-order-detail__body-card jfb-base-order-detail__body-shop"
+        >
+          <view class="jfb-base-order-detail__body-shop-title">
+            <view :style="{ background: mainColor }"></view>
+            <view>商品详情</view>
+            <view @click="showAllProductDetail=!showAllProductDetail" v-if="!showAllProductDetail" class="jfb-base-order-detail__body-product-show">
+              <text> 展开</text>
+              <xd-font-icon
+                style="margin-left: 8rpx"
+                size="28"
+                icon="iconxia_down"
+              ></xd-font-icon>
+            </view>
+            <view @click="showAllProductDetail=!showAllProductDetail" v-if="showAllProductDetail" class="jfb-base-order-detail__body-product-show">
+              <text> 收起</text>
+              <xd-font-icon
+                style="margin-left: 8rpx"
+                size="28"
+                icon="iconxia_down"
+              ></xd-font-icon>
+            </view>
+          </view>
+          <view class="jfb-base-order-detail__body-html" v-if="showAllProductDetail">
+            <view v-html="info.productDetail"></view>
+          </view>
+        </view>
+        <view
+          v-if="info.custom_content"
+          :style="{
+            background: backgroundColor,
+            border: borderBox,
+            borderRadius: radius + 'rpx',
+            boxShadow: shadowBox,
+            marginBottom: padding + 'rpx',
+          }"
+          class="jfb-base-order-detail__body-card jfb-base-order-detail__body-shop"
+        >
+          <view class="jfb-base-order-detail__body-shop-title">
+            <view :style="{ background: mainColor }"></view>
+            <view>{{ info.custom_content.title }}</view>
+          </view>
+          <view v-html="info.custom_content.content"></view>
+        </view>
+      </view>
+      <view
+        style="height: 100rpx"
+        v-if="info.buttons && info.buttons.length > 0"
+      ></view>
+      <view
+        class="jfb-base-order-detail__body-btn"
+        :style="prod_bottom"
+        v-if="info.buttons && info.buttons.length > 0"
+      >
+        <view :style="[bottomBoxStyle]" class="btn_wrap">
+          <view v-for="(item, index) in info.buttons" :key="index">
+            <view
+              style="display: flex; align-items: center"
+              v-if="item.action === 'pay'"
+            >
+              <view
+                style="display: flex; align-items: center; margin-right: 30rpx"
+                v-if="biz_code !== 'gift' || info.is_show_gift_price"
+              >
+                <text>应付：</text>
+                <xd-unit
+                  :price="info.pay_info.real_pay_amount"
+                  :font-size="36"
+                  :iocn-size="0.45"
+                ></xd-unit>
+              </view>
+              <view>
+                <xd-button
+                  @click="handleToPay"
+                  size="small"
+                  type="primary"
+                  :style="{
+                    height: bottomBtnHeight + 'rpx',
+                    lineHeight: bottomBtnHeight + 'rpx',
+                  }"
+                  :radius="bottomBtnRadius + 'rpx'"
+                  :bg-color="mainColor"
+                  >{{ item.text }}
+                </xd-button>
+              </view>
+            </view>
+            <view v-else>
+              <xd-button
+                size="small"
+                :type="item.type !== undefined ? item.type: 'primary'"
+                :radius="bottomBtnRadius + 'rpx'"
+                :style="{
+                  height: bottomBtnHeight + 'rpx',
+                  lineHeight: bottomBtnHeight + 'rpx',
+                }"
+                @click="handleAction(item)"
+              >{{ item.text }}</xd-button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <xd-dailog
+      :show.sync="showCode"
+      :cancel="false"
+      :confirm="false"
+      title="提示"
+    >
+      <view
+        :style="{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingTop: '40rpx',
+          height: showType === 'qrcode' ? '70vw' : '35vw',
+        }"
+      >
+         <view style="position: relative">
+          <image :src="codeSrc" mode="aspectFit"></image>
+          <image v-if="logo&&showType === 'qrcode'" :src="logo" style="
+            width: 100rpx;
+            height: 100rpx;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50rpx, -50rpx);">
+          </image>
+        </view>
+      </view>
+      <view v-if="dialogPassword" class="dialog_password">{{ dialogPassword }}</view>
+    </xd-dailog>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdJfbImage from "@/components/XdJfbImage/XdJfbImage";
+import XdTag from "@/components/XdTag/XdTag";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdButton from "@/components/XdButton/XdButton";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseOrderDetailMixin from "./JfbBaseOrderDetailMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import { mapState } from "vuex";
+import bizMock from "./bizMock";
+import Color from "color";
+
+
+export default {
+  name: "JfbBaseOrderDetail",
+  components: {
+    XdFontIcon,
+    XdTag,
+    XdUnit,
+    XdButton,
+    XdDailog,
+    XdJfbImage,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseOrderDetailMixin],
+  data() {
+    return {
+      info: null,
+      brandPath: "", //查看品牌路径
+      showPayCard: false,
+      bgColor: "",
+      times: null,
+      showType: "",
+      timeMsg: "",
+      timer: null,
+      showCode: false,
+      codeSrc: "",
+      packageListPath: "", //包裹列表路径
+      payPath: "", //支付路径
+      // logisticsPath: "", //物流详情路径
+      webViewPath: "", //容器路径
+      viewStatus: "", //业务类型预览
+      isPreview: false, //是否预览
+      biz_code: "",
+      is_not_show_price: "",
+      brandTextColor:'',
+      is_show_support_shop: "",
+      is_show_delete_order:'N', //删除订单
+
+      showPassword: false,
+      dialogPassword: "",
+
+      //基础
+      radius: 0,
+      backgroundColor: "",
+      padding: 0,
+
+      //投影
+      is_shadow: "Y",
+      is_shadow_bg: 0,
+      is_shadow_w: 0,
+
+      //边框
+      is_border: "Y",
+      is_border_w: 0,
+      is_border_c: "",
+
+
+      //其他
+      margin: {},
+      is_hot: "Y",
+      logo: "",
+      lineHeight: 20,
+
+      noticeBgc:'',
+      sectionShadow: "",
+      sectionBorder: "",
+      bottomBtnRadius: 0,
+      bottomPadding: "",
+      bottomBgColor: "",
+      bottomBtnHeight: "",
+      is_open: '',
+      is_show: '',
+      showAllProductDetail: false,
+      is_show_all_detail: '',
+      showPreviewCode: true,
+      is_show_product: "",
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    viewStatus(n, o) {
+      if (this.isPreview) {
+        this.info = null;
+        this.getOrderDetail();
+      }
+    },
+    is_hot(n, o) {
+      if (this.isPreview) {
+        this.getOrderDetail();
+      }
+    },
+    is_show_delete_order(){
+      if (this.isPreview) {
+        this.getOrderDetail();
+      }
+    },
+  },
+  computed: {
+    ...mapState(['siteInfo']),
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    ...mapState(["brandInfo"]),
+    outMargin() {
+      let str = `${this.checkValue(this.margin.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
+      return str
+    },
+    shadowBox() {
+      return this.sectionShadow;
+    },
+    borderBox() {
+      return this.sectionBorder;
+    },
+    bottomBoxStyle(){
+      let padding = `${this.checkValue(this.bottomPadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.bottomPadding.left, 20)}rpx`;
+      return {
+        padding: padding,
+        backgroundColor: this.bottomBgColor,
+      }
+    }
+  },
+  created() {
+    this.noticeBgc = Color(this.warningColor).alpha(0.2).toString();
+    this.isPreview = this.$configProject.isPreview;
+    if (this.isPreview) {
+      this.showPayCard = true;
+    }
+    this.init(this.container);
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.main_order_id = options.id || options.order_id || options.main_order_id;
+      this.getOrderDetail();
+    },
+
+    timeDown() {
+      if (this.info.status.loading_timeout != "-1") {
+        this.times = this.info.status.loading_timeout;
+        let minutes = Math.floor(this.times / 60);
+        let seconds = Math.floor(this.times % 60);
+        if (minutes < 10) {
+          minutes = "0" + minutes;
+        }
+
+        if (seconds < 10) {
+          seconds = "0" + seconds;
+        }
+        this.timeMsg = minutes + ":" + seconds;
+        this.times--;
+        this.getCountDown();
+      }
+    },
+    getOrderDetail() {
+      jfbRootExec("getBaseOrderDetail", {
+        vm: this,
+        data: {
+          main_order_id: this.main_order_id,
+          custom_content_page_id: this.pageAttr.page_id,
+          custom_content_container_id: this.cid,
+          is_show_jhd_code: Number(this.is_show),
+          is_show_product: this.is_show_product === "Y" ? 1 : 0,
+        },
+      })
+        .then((res) => {
+
+          //跳转到第三方订单
+          if(res['third_order_detail_url']) {
+            this.$xdUniHelper.redirectTo({url: res['third_order_detail_url']}, false, false);
+            return;
+          }
+
+          this.biz_code = res.biz_code;
+          this.is_not_show_price = res.is_not_show_price;
+
+          //旅游模块
+          if(res.extras && res.extras.travel_booking_info) {
+            try{
+              res.extras.travel_booking_info = JSON.parse(res.extras.travel_booking_info)
+            }catch(e){
+              res.extras.travel_booking_info = {}
+            }
+          }
+
+          //预览模块
+          if (this.isPreview) {
+            switch (this.viewStatus) {
+              case "mall":
+                res = this.$xdUniHelper.cloneDeep(bizMock.mall);
+                break;
+              case "mallCode":
+                res = this.$xdUniHelper.cloneDeep(bizMock.mallCode);
+                break;
+              case "play":
+                res = this.$xdUniHelper.cloneDeep(bizMock.play);
+                break;
+              case "playCode":
+                res = this.$xdUniHelper.cloneDeep(bizMock.playCode);
+                break;
+              case "cashier":
+                res = this.$xdUniHelper.cloneDeep(bizMock.cashier);
+                break;
+            }
+          }
+          res.pay_info.real_pay_amount = this.$xdUniHelper.divisionFloatNumber(
+            res.pay_info.real_pay_amount,
+            100
+          );
+          res.pay_info.base =
+            res.pay_info.base &&
+            res.pay_info.base.map((item) => {
+              if (item.type === "price") {
+                item.value = this.$xdUniHelper.divisionFloatNumber(
+                  item.value,
+                  100
+                );
+                return item;
+              } else {
+                return item;
+              }
+            });
+          res.sub_orders =
+            res.sub_orders &&
+            res.sub_orders.map((item) => {
+              item.products = item.products.map((Sitem) => {
+                Sitem.product_thumb = getServiceUrl(Sitem.product_thumb);
+                Sitem.sale_price = this.$xdUniHelper.divisionFloatNumber(
+                  Sitem.sale_price,
+                  100
+                );
+                return Sitem;
+              });
+              if (this.is_hot === "Y") {
+                item.info.push({
+                  label: "客服电话",
+                  style: "normal",
+                  type: "text",
+                  value: this.isPreview ? '010-66666' :this.siteInfo.mapping.customer_phone,
+                });
+              }
+              return item;
+            });
+          res.pay_info.cards =
+            res.pay_info.cards &&
+            res.pay_info.cards.map((item) => {
+              item.card_use_point = this.$xdUniHelper.divisionFloatNumber(
+                item.card_use_point,
+                100
+              );
+              if(item['card_discount_use_point'] !== undefined && item['card_discount_use_point'] > 0) {
+                item.card_discount_use_point = this.$xdUniHelper.divisionFloatNumber(
+                  item.card_discount_use_point,
+                  100
+                );
+              }
+              return item;
+            });
+          res.codes =
+            res.codes &&
+            res.codes.map((item) => {
+              if(item.logo) {
+                item.logo = getServiceUrl(item.logo)
+              }
+              if (
+                item.show_type === "qrcode"
+                || item.show_type === "barcode"
+                || item.show_type === "qrcode-pass"
+                || item.show_type === "barcode-pass"
+              ) {
+                let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+                item.code_url = reg.test(item.code_url)? item.code_url:`${this.brandInfo['api_host']}${item.code_url}`
+              }
+
+              //二维码 + 密码处理
+              if(item.show_type === "qrcode-pass") {
+                item.show_type = 'qrcode';
+                item.can_read_code = item.can_read_password;
+              }
+              //条形码 + 密码处理
+              if(item.show_type === "barcode-pass") {
+                item.show_type = 'barcode';
+                item.can_read_code = item.can_read_password;
+              }
+
+              return item;
+            });
+
+          if (res.film_show && Object.keys(res.film_show).length > 0) {
+            res.film_show.show_time = this.$xdUniHelper.getDate(
+              res.film_show.show_time * 1000
+            ).fullTime;
+            res.film_show.thumb = getServiceUrl(res.film_show.thumb);
+          }
+
+          //增加删除订单按钮
+          if(this.is_show_delete_order === 'Y') {
+            let pay = (res.buttons||[]).filter(item => item.action === 'pay');
+            let del = [{action:'delete', text:'删除订单', type: 'info'}];
+            if(pay.length === 1) del = []
+            res.buttons = del.concat(res.buttons || []).map(item=>{
+              if(item.action === 'view_logistics' && !item.type) {
+                item.type = 'default';
+              }
+              return item
+            });
+          }
+
+          if (res.product) {
+            try {
+              jfbRootExec("getBaseProductDetail", {
+              vm: this,
+              data: {
+                xnamespace: res.product.business_code,
+                product_id: res.product.product_id,
+              },
+            })
+              .then((result) => {
+                res.productDetail = result.content;
+                this.info = res;
+                if (this.info.status.loading_timeout != "-1") {
+                  this.timeDown();
+                }
+              })
+              .catch((err) => {
+                console.log(err, "err");
+              });
+            } catch (error) {
+              console.log(error,'apapapa');
+
+            }
+
+          }
+          else {
+            this.info = res;
+            if (this.info.status.loading_timeout != "-1") {
+              this.timeDown();
+            }
+            console.log(this.info);
+          }
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.bgColor = this.$colorChange(this.mainColor).alpha(0.1).toString();
+      this.brandPath = getContainerPropsValue(container, "content.brandPath", {value: "",}).value;
+      this.payPath = getContainerPropsValue(container, "content.payPath", {value: "",}).value;
+
+
+      this.packageListPath = getContainerPropsValue(container, "content.packageListPath", { value: "" }).value;
+      this.webViewPath = getContainerPropsValue(container, "content.webViewPath", {value: "",}).value;
+      this.margin = getContainerPropsValue(container, "content.margin", {top: 0, left: 0, right: 0, bottom: 0,});
+      this.radius = getContainerPropsValue(container, "content.radius", 0);
+      this.backgroundColor = getContainerPropsValue(container, "content.backgroundColor", "#f8f8f8");
+      this.brandTextColor = getContainerPropsValue(container, "content.brandTextColor", this.mainColor);
+      this.padding = getContainerPropsValue(container, "content.padding", 20);
+
+      this.is_shadow = getContainerPropsValue(container, "content.is_shadow", "N");
+      this.is_shadow_bg = getContainerPropsValue(container, "content.is_shadow_bg", "#fff");
+      this.is_shadow_w = getContainerPropsValue(container, "content.is_shadow_w", "10");
+
+      this.is_border = getContainerPropsValue(container, "content.is_border", "N");
+      this.is_border_c = getContainerPropsValue(container, "content.is_border_c", "#fff");
+      this.is_border_w = getContainerPropsValue(container, "content.is_border_w", 2);
+
+      this.is_hot = getContainerPropsValue(container, "content.is_hot", "Y");
+      this.viewStatus = getContainerPropsValue(container, "content.viewStatus", "mall");
+      this.is_show_support_shop = getContainerPropsValue(container, "content.is_show_support_shop", "N");
+      this.is_show_delete_order = getContainerPropsValue(container, "content.is_show_delete_order", "N");
+      this.lineHeight = getContainerPropsValue(container, "content.lineHeight", 20);
+      let sectionShadow = getContainerPropsValue(container, "content.sectionShadow", "");
+      this.sectionShadow = this.getShadowCompatibleOldStyle(sectionShadow, {
+        type: this.is_shadow,
+        width: this.is_shadow_w,
+        color: this.is_shadow_bg,
+      })
+      let sectionBorder = getContainerPropsValue(container, "content.sectionBorder", "");
+      this.sectionBorder = this.getBorderCompatibleOldStyle(sectionBorder, {
+        type: this.is_border,
+        width: this.is_border_w,
+        color: this.is_border_c,
+      })
+      this.bottomBtnRadius = getContainerPropsValue(container, "content.bottomBtnRadius", 0);
+      this.bottomPadding = getContainerPropsValue(container, "content.bottomPadding", {});
+      this.bottomBgColor = getContainerPropsValue(container, "content.bottomBgColor", "#ffffff");
+      this.bottomBtnHeight = getContainerPropsValue(container, "content.bottomBtnHeight", 60);
+      this.is_open = getContainerPropsValue(container, "content.is_open", "N");
+      this.is_show = getContainerPropsValue(container, "content.is_show", '1');
+      this.showPayCard = this.is_open==='Y'
+      this.is_show_all_detail = getContainerPropsValue(container, "content.is_show_all_detail", "N");
+      this.is_show_product = getContainerPropsValue(container, "content.is_show_product", "Y");
+      this.showAllProductDetail = this.is_show_all_detail==='Y'
+      if(this.isPreview) {
+        if(this.is_show==='0') {
+          this.showPreviewCode = false;
+        } else {
+          this.showPreviewCode = true;
+        }
+      }
+    },
+    getCountDown() {
+      this.timer = setInterval(() => {
+        let minutes = Math.floor(this.times / 60);
+        let seconds = Math.floor(this.times % 60);
+        if (minutes < 10) {
+          minutes = "0" + minutes;
+        }
+        if (seconds < 10) {
+          seconds = "0" + seconds;
+        }
+        this.timeMsg = minutes + ":" + seconds;
+        if (this.times <= 0) {
+          clearInterval(this.timer);
+          this.getOrderDetail();
+          return;
+        }
+        this.times--;
+      }, 1000);
+    },
+    handleShowCode(item) {
+      this.codeSrc = item.code_url;
+      this.showType = item.show_type;
+      this.logo = item.logo;
+      this.dialogPassword = item.can_read_code;
+      console.log(this.codeSrc, "this.codeSrc");
+      this.showCode = true;
+    },
+    /**
+     *@description 复制功能
+     * @param  text
+     */
+    copy(text) {
+      // #ifdef H5
+      this.$copyText(text).then((res) => {
+        this.$xdAlert({ content: "复制成功" });
+      });
+      // #endif
+      // #ifndef H5
+      uni.setClipboardData({
+        data: text,
+        success: () => {
+          //this.$xdAlert({ content: "复制成功" });
+        },
+      });
+      // #endif
+    },
+    handleToLink(id, info) {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.brandPath}?id=${id}&region_limit_tpl_id=${info.support_shops.region_limit_tpl_id}&xnamespace=${info.biz_code}`,
+      });
+    },
+    handleToJump(url) {
+      let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+      if (reg.test(url)) {
+        this.$xdUniHelper.navigateTo({
+          url: url,
+        });
+      } else {
+        this.$xdAlert({
+          content: "访问路径格式错误!",
+        });
+      }
+    },
+    handleToPay() {
+      if (this.$configProject.type === "food") {
+        console.log(
+          getApp().globalData.$xd.brandInfo,
+          "getApp().globalData.$xd.brandInfo"
+        );
+        let callbackUrl = `${window.location.protocol}//${window.location.host}/system/pay/success?order_id=${this.info.pay_info.pay_order_id}`;
+        this.$xdUniHelper.navigateTo({
+          url: `${getApp().globalData.$xd.brandInfo.pay_url}?order_id=${
+            this.info.pay_info.pay_order_id
+          }&callback_url=${callbackUrl}`,
+        });
+        return;
+      }
+      this.$xdUniHelper.navigateTo({
+        url: `${this.payPath}?order_id=${this.info.pay_info.pay_order_id}&main_order_id=${this.main_order_id}`,
+      });
+    },
+    handleAction(item) {
+      if (item.action === "view_logistics") {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.packageListPath}?order_id=${this.main_order_id}`,
+        });
+      }
+      else if(item.action === 'cancel_unpaid') {
+        this.$xdConfirm({
+          styles: this.styles,
+          content: "是否取消订单",
+          zIndex: 3000,
+          success: (action) => {
+            if (action.confirm) {
+              jfbRootExec("cancelBaseOrder", {
+                vm: this,
+                data: {
+                  main_order_id: this.main_order_id,
+                },
+              })
+                .then((res) => {
+                  this.$xdAlert({
+                    content: "取消成功",
+                  });
+                  this.getOrderDetail();
+                })
+                .catch((err) => {
+                  console.log(err, "err");
+                });
+            }
+          },
+        });
+      }
+      else if(item.action === 'delete'){
+        this.$xdConfirm({
+          styles: this.styles,
+          content: "订单删除后将无法找到订单<br/>您确认删除吗？",
+          cancelText:'我在看看',
+          isHtml: true,
+          zIndex: 3000,
+          success: (action) => {
+            if (action.confirm) {
+              this.handleDeleteOrder();
+            }
+          },
+        });
+      }
+      else {
+        console.error(`item.action=${item.action}, 此action不可用`)
+      }
+    },
+
+    handleDeleteOrder(){
+      jfbRootExec("deleteBaseOrder", {
+        vm: this,
+        data: {
+          main_order_id: this.main_order_id,
+        },
+      })
+        .then((res) => {
+          this.$xdAlert({
+            content: "删除成功",
+            time: 2000,
+            zIndex: 3000,
+          });
+          setTimeout(()=>{
+            this.$xdUniHelper.navigateBack()
+          },3000)
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+
+    onJfbShow(options) {
+      if (this.timer) clearInterval(this.timer);
+      this.onJfbLoad(options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseOrderDetailLess.less";
+
+.code-url {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  & > view:first-child {
+    flex: 1;
+    & > view {
+      white-space: normal !important;
+      word-break: break-all;
+    }
+  }
+  & > view:last-child {
+    flex-shrink: 0;
+    margin-left: unit(30, rpx);
+  }
+}
+
+.jfb-base-order-detail {
+  &__body {
+    .brand-name {
+      padding-top: 5rpx;
+      font-size: 24rpx;
+      margin-bottom: 6rpx;
+      .uni-max-cut(2, 64);
+      line-height: 32rpx;
+    }
+
+    color: #333;
+    .logo-icon {
+      width: unit(80, rpx) !important;
+      height: unit(80, rpx) !important;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50rpx, -50rpx);
+      margin-top: 0;
+    }
+    &-show {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #fafafa;
+      padding: unit(16, rpx);
+      border-radius: unit(4, rpx);
+      margin-bottom: unit(32, rpx);
+      color: #999999;
+      font-size: unit(24, rpx);
+    }
+    &-card {
+      padding: unit(30, rpx);
+    }
+
+    &-settle {
+      &-title {
+        color: #333333;
+        font-weight: 500;
+        font-size: unit(32, rpx);
+      }
+
+      &-list {
+        color: #666666;
+        font-size: unit(24, rpx);
+        margin: unit(20, rpx) 0;
+      }
+    }
+
+    &-time {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: unit(18, rpx) 0;
+      background: #fff;
+      font-weight: 500;
+      color: #333333;
+      font-size: unit(32, rpx);
+      position: fixed;
+      left: 0;
+      width: 100%;
+      background: #FFFFFF;
+      z-index: 999;
+    }
+
+    &-status {
+      background: #fff;
+    }
+
+    &-no-delivery {
+      &-info {
+        display: flex;
+        align-items: center;
+
+        image {
+          width: unit(210, rpx);
+          height: unit(300, rpx);
+          border-radius: unit(8, rpx);
+        }
+
+        &-right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: unit(300, rpx);
+          margin-left: unit(40, rpx);
+
+          &-name {
+            display: flex;
+            justify-content: space-between;
+            font-weight: 700;
+            font-size: unit(36, rpx);
+
+            & > view:first-child {
+              color: #333;
+            }
+          }
+
+          &-tag {
+            display: flex;
+            margin: unit(16, rpx) unit(16, rpx) unit(16, rpx) 0;
+          }
+
+          &-item {
+            display: flex;
+            align-items: center;
+            font-size: unit(24, rpx);
+
+            & > view:first-child {
+              color: #999999;
+              width: unit(90, rpx);
+            }
+
+            & > view:nth-child(2) {
+              color: #666666;
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+
+    &-delivery {
+      &-title {
+        font-size: unit(24, rpx);
+        color: #333333;
+        font-weight: 500;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      &-content {
+        display: flex;
+        align-items: center;
+        padding: unit(30, rpx) 0;
+
+        image {
+          width: unit(140, rpx);
+          height: unit(140, rpx);
+          border-radius: unit(8, rpx);
+        }
+
+        &-info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          margin-left: unit(28, rpx);
+          min-height: unit(160, rpx);
+
+          &-name {
+            font-size: unit(32, rpx);
+            color: #333333;
+            font-weight: 400;
+            .uni-max-cut(1, 64);
+          }
+
+          &-item {
+            font-size: unit(28, rpx);
+            color: #999999;
+          }
+
+          &-sku {
+            color: #999999;
+            font-size: unit(24, rpx);
+            .uni-max-cut(2, 80);
+          }
+
+          &-price {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+
+          &-form {
+            display: flex;
+            align-items: center;
+            font-size: unit(24, rpx);
+            margin-bottom: unit(32, rpx);
+            padding: 10rpx 32rpx;
+          }
+        }
+      }
+
+      &-bottom {
+        margin-top: unit(32, rpx);
+
+        &-title {
+          color: #333333;
+          font-size: unit(28, rpx);
+          font-weight: 500;
+          margin-bottom: unit(20, rpx);
+        }
+
+        &-item {
+          color: #666666;
+          font-size: unit(28, rpx);
+          display: flex;
+          margin-bottom: unit(16, rpx);
+
+          & > view:nth-child(2) {
+            width: 80%;
+          }
+        }
+      }
+    }
+
+    &-num {
+      &-info {
+        display: flex;
+        align-items: center;
+        color: #333333;
+        font-size: unit(32, rpx);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+
+        &>view {
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          word-break: break-all;
+        }
+
+        &-copy {
+          margin-left: unit(10, rpx);
+          margin-top: unit(24, rpx);
+          border-radius: unit(16, rpx);
+          border: unit(2, rpx) solid #999999;
+          color: #999999;
+          font-size: unit(20, rpx);
+          padding: unit(16, rpx) unit(20, rpx);
+          text-align: center;
+        }
+      }
+    }
+
+    &-jump {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &-label {
+        color: #333333;
+        font-weight: 500;
+        font-size: unit(32, rpx);
+      }
+
+      &-btn {
+        display: flex;
+        align-items: center;
+        color: #999999;
+        font-size: unit(28, rpx);
+      }
+    }
+
+    &-shop {
+      &-title {
+        display: flex;
+        align-items: center;
+        border-bottom: unit(2, rpx) solid #f6f6f6;
+        padding-bottom: unit(28, rpx);
+
+        & > view:first-child {
+          width: unit(6, rpx);
+          height: unit(28, rpx);
+          border-radius: unit(3, rpx);
+          margin-right: unit(20, rpx);
+        }
+
+        & > view:nth-child(2) {
+          color: #333333;
+          font-size: unit(28, rpx);
+        }
+      }
+
+      &-name {
+        color: #333333;
+        font-size: unit(36, rpx);
+        margin-top: unit(24, rpx);
+        margin-bottom: unit(24, rpx);
+      }
+
+      &-address {
+        color: #999999;
+        font-size: unit(24, rpx);
+      }
+    }
+
+    &-price {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: unit(40, rpx);
+
+      & > view:first-child {
+        font-size: unit(28, rpx);
+        color: #333333;
+      }
+    }
+
+    &-pay-card {
+      color: #666666;
+      font-size: unit(28, rpx);
+      margin-bottom: unit(32, rpx);
+
+      & > view:nth-child(2) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: unit(16, rpx);
+      }
+    }
+
+    &-link {
+      &-title {
+        border-bottom: unit(2, rpx) solid #f2f2f2;
+        padding-bottom: unit(48, rpx);
+      }
+
+      &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: unit(48, rpx);
+        font-size: unit(28, rpx);
+        color: #737373;
+      }
+    }
+
+    &-order {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: unit(20, rpx);
+      &-copy {
+        border-radius: unit(16, rpx);
+        border: unit(2, rpx) solid #999999;
+        color: #999999;
+        font-size: unit(20, rpx) !important;
+        padding: unit(8, rpx) unit(20, rpx);
+        flex-shrink: 0;
+        margin-left: unit(15, rpx);
+      }
+
+      & > view:first-child {
+        font-size: unit(28, rpx);
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        & > view:first-child {
+          flex-shrink: 0;
+        }
+        & > view:last-child {
+          word-break: break-all;
+          white-space: pre-wrap;
+
+          flex: 1;
+        }
+      }
+    }
+
+    &-cashier {
+      &-code {
+        font-size: unit(32, rpx);
+        font-weight: 400;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: unit(14, rpx) unit(28, rpx);
+        border-radius: unit(12, rpx);
+        margin-top: unit(24, rpx);
+
+        & > view {
+          display: flex;
+        }
+      }
+
+      &-text {
+        text-align: center;
+        font-size: unit(32, rpx);
+        font-weight: 500;
+      }
+      &-password{
+        text-align: center;
+        font-size: unit(32, rpx);
+        font-weight: 500;
+        background: #D3D3D3;
+        border-radius: unit(12, rpx);
+        padding: unit(14, rpx) unit(28, rpx);
+      }
+
+      image {
+        width: unit(272, rpx);
+        height: unit(272, rpx);
+        margin-top: unit(20, rpx);
+        margin-left: 50%;
+        transform: translate(-50%);
+      }
+    }
+
+    &-booking {
+      &-list {
+        &-item {
+          display: flex;
+          align-items: baseline;
+          margin-bottom: 40rpx;
+          &-num {
+            font-size: 24rpx;
+            margin-right: 24rpx;
+            width: 120rpx;
+            height: 50rpx;
+            text-align: center;
+            line-height: 50rpx;
+            border-radius: 16rpx;
+          }
+          &-info {
+            flex: 1;
+            &-name {
+              font-size: 32rpx;
+              margin-bottom: 20rpx;
+            }
+            &-item {
+              font-size: 24rpx;
+              color: #666;
+              margin-bottom: 16rpx;
+            }
+          }
+        }
+      }
+    }
+
+    &-line {
+      border-bottom: unit(2, rpx) solid #f2f2f2;
+      margin-bottom: unit(40, rpx);
+    }
+
+    &-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      & > view {
+        font-size: unit(40, rpx);
+        margin-top: unit(32, rpx);
+      }
+    }
+
+    &-btn {
+      position: fixed;
+      left: 0;
+      right: 0;
+      box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, 0.15);
+      background: #fff;
+      z-index: 3000;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      .btn_wrap{
+        display: flex;
+        & > view {
+          margin-left: unit(20, rpx);
+          font-size: @xd-font-size-lg;
+        }
+      }
+    }
+
+    &-product {
+      &-show {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: unit(16, rpx);
+        border-radius: unit(4, rpx);
+        color: #999999;
+        font-size: unit(24, rpx);
+        margin-left:10px
+      }
+    }
+
+    &-html {
+      padding: unit(20, rpx) 0;
+      color: #999;
+    }
+
+  }
+  .dialog_password{
+    text-align: center;
+    font-size: unit(32, rpx);
+    font-weight: 500;
+    background: #D3D3D3;
+    border-radius: unit(12, rpx);
+    padding: unit(14, rpx) unit(28, rpx);
+  }
+
+  .list-item {
+    position: relative;
+
+    & > .discount {
+      position: absolute;
+      left:0;
+      right:0;
+      bottom:-20rpx;
+      height: 20rpx;
+      font-size: 20rpx;
+      line-height: 20rpx;
+      color: #aaa;
+      text-align: right;
+    }
+
+  }
+}
+</style>