<template>
  <view class="page page-order-detail-container">
    <uni-nav-bar
      :fixed="true"
      :border="false"
      :left-width="'400rpx'"
      :statusBar="true"
      :height="'34px'"
    >
      <block slot="left">
        <view class="left-block" @click="handerSkip">
          <image
            style="
              width: 11px;
              height: 18px;
              vertical-align: middle;
              margin-left: 6px;
            "
            lazy-load
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAA2CAYAAABJN/BMAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIaADAAQAAAABAAAANgAAAADEgMuSAAAF8ElEQVRYCc2Ya2hcVRDHk91sHo3mTR5rbJrnapsYTKIfWmMSapWKICJCoeCHfgqCKGh9VFRE1FiFopQYEbRYW1SsobVfpFahjRoxEYvGmDQJeZAHTbJ5rtnNY9ffhNzl3JtNzN3cBA8Md86ce2b+Z2bOnHNvRMT/oNm3GUNkXl7ezvj4+Pnp6elFzbZNY7bjWVBQsBs756Kjo4+q9rbLEzY8UBwIBC5iXIDUJCcnBwDT4vF4FrYDhC0/P78qMjLyE4wXKB4oi42NbXe73e1bHo7CwsI78EA9dJsCIAJQP8fExDQhC0SqAxbzNnKgVEIAORXdC/CXvF7vY0NDQ/+IfKs8YcMD+/1+/xchAHyJ7IgGQEBsiSdIwrvQfRbKV20Qgkb6td3d3Td4BltUkLOGseOBiqWlpQuoS1dUzsNfIBEPt7W1Ca9rVobDjgceIATiASOAz9iOtaEACBrLwsE23Eusz6Azx6D3bFxc3JMAcIvBUM0KT9iLioruAcA3GNgFaQvzkQOny8vLH18PgIDSJggfTrOzDR8iBO8zeaeiwAf/8eLi4kv9/f0Tijwku6mKCYAqPPARmm+FggvCA6cA9kJfX99kSKsGYXCiQb5ut7q6OmpgYKCSlxoBkai87AXAp11dXbU8A4p8XdZ0TgiAwcHBh9F62gjAZrN9gPGjZgAIOtPhiIqKug/jH0K3qMvDcD30Kl6YVuUb4TccDrLcMTk5uR/jX6E4XlE+B99AFXzGrAc0HRsKxwqARwEgx7EKQA6g96gDr4QLQIBsKBwYeZB366FMmaS0dxl7kzowq8hMs+uGQzwwNTV1UE5DNMcq2j2s/AQheFmRhc2uGY4VAIcAIHVAB4D+O7Ozs3VhWzVMXDMcuPkRckAqoXoYRbAN6+bm5o6PjIxIPljSVoXD6XTuAMATeOA4LlfH5+ieJATPWWJZUaK7TwgAzvyn8MAxAwAvHmiw2+2vK3MtY3UgAHAQzc9DNxksnMMzr1GIZgxyS7q6xGT1slL1LFg2gtxJpTQCswSAKNGBoH8V8suA2ghPJVe2Ezk5OVmq3CpetzsSExNbiL3cC+QrSU1KAetibA/fkY3qd6QVQHQgOBtmU1JSrqD4dqgAUj0lfCFhKUlNTb3Ml5NlW1QHAiMRExMTHlb7LTshmW4JpEte+nlQVkZGxtWxsTE5vDbdVoEQjbh7jtA04X5JxnJIfU/43eyW3NLS0vO9vb2rcohxU01VrptIaLxc4a/4fL4MBooh1SMyr5hzJQ+wP8i7uskmO2uCED3Dw8MLGPmOLSrdOyH1DBGZizG+8pN/JIxyuQ2rqYkXUgHu9s7Pz7/N4FuQMRljkB0BSB3bWN1NIXWtJTQz0c4HzosYC1VR5VP/JDvnWEdHh+mqum44DMgDuLwpLS3NDRBJ1psN4yXIYzl/mkdHR1d9bxre1XXNgJCJgdzc3Gskq3xV10Bqjjjol7FrHNSQy/AbbmZBSLL68cg1knGAEFRhaYdizYE3Kil4dq4Dv8zMzMgPkf9spkFoGgHyB8Y66UtoUjX5yrPC4XD4AdKyESBhgxBjALlOCf+b1R+gq56y0cju5neAh3d+WgG25mNTINAaIP7deKSZ0AiQBGh5x9GPhr8fkFMJCQm/U9CCP0+R69pmQSwrY7UDGGtm9aUInFBw6yPbB6AZit6aQCwBIUjwyBBAfsWo7Jo0ka00KWh7oRG88ZsmVJ9BxKpwM7zL5crlv8R5wOxBj1qR/XhEquvnXBN1Jd4yT2jAx8fHJ9PT07+nXriQ7VKAyILlz+6NrKysPyloS/SXm+UgRCtA3ABpAkgFXfmHpbU4mH1cFa8Tvr80oeXh0BTLk6uAXJrPQfdCUlG1No9HDiUlJV1sbW3d2h/s7BpfZmbmJVYu/zLkyqh5Xp41nM49eKRDTRwNpaXP9vb2YU7Xp1n51wbFEhrZOf4tByGGOzs7x8rKyg7DnoLkFuaB3mCXnOEZ/kWEyaab5AgeeZbtO9zT09OAgk3fT02DkAnZ2dlx8vNNnfwvwX82xj5+deEAAAAASUVORK5CYII="
          />
          <view class="nav-title" v-show="scrollTop >= 44"
            >订单{{ formatOrderName(OrderInfo.order_state_name) }}</view
          >
        </view>
      </block>
    </uni-nav-bar>
    <view class="move-area" v-if="isdata">
      <movable-view
        v-if="OrderInfo.IsRedPacketIcon"
        inertia
        class="move-img"
        direction="all"
        @click="IsShowRPK"
      >
        <image
          lazy-load
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rpk_min.png"
        ></image>
      </movable-view>

      <view
        class="m-cell"
        v-if="
          remain_pay_time > 0 &&
          OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
          OrderInfo.order_state_id == StateCode.ORDER_STATE_WAIT_PAY &&
          OrderInfo.order_payment_amount == OrderInfo.trade.trade_payment_amount
        "
      >
        <view class="m-cell-bd" style="text-align: center">
          <text
            >{{ __("订单取消倒计时") }}
            <text style="color: red; padding: 0 10rpx">
              {{ remain_pay_time_str }}
            </text>
          </text>
        </view>
      </view>

      <view class="m-cells order-block" v-if="OrderInfo.delivery_type_id != 5">
        <view class="order-name"
          >订单{{ formatOrderName(OrderInfo.order_state_name) }}</view
        >
        <view
          v-if="![5, 10].includes(OrderInfo.delivery_type_id)"
          class="order-tips"
          >{{ orderTips() }}</view
        >
        <view
          class="schedule-block"
          v-if="
            ![2010, 2060, 2070].includes(OrderInfo.order_state_id) &&
            ![5, 10].includes(OrderInfo.delivery_type_id)
          "
        >
          <view
            :class="[
              'schedule-block-list',
              { 'schedule-block-list-70': OrderInfo.order_state_id == 2040 },
            ]"
          >
            <view
              :class="[
                'iconfontAili icon-dianpu2  icon-1',
                orderProcessCalss(OrderInfo.order_state_id),
              ]"
            ></view>
            <view
              :class="[
                'iconfontAili icon-money-cny-circle-fill   icon-2',
                orderProcessCalss(OrderInfo.order_state_id),
              ]"
            ></view>
            <view
              :class="[
                'iconfontAili icon-yundianxiaochengxu2_tongchengpeisong   icon-3',
                orderProcessFaHuoCalss(OrderInfo.order_state_id),
              ]"
            ></view>
            <view :class="['iconfontAili icon-wancheng   icon-4']"></view>
          </view>
        </view>
        <view
          class="map-block"
          ref="mapBlock"
          v-if="
            ![2010, 2060, 2070].includes(OrderInfo.order_state_id) &&
            ![5, 10].includes(OrderInfo.delivery_type_id)
          "
        >
          <map
            :latitude="mapLat"
            :longitude="mapLng"
            style="width: 100%; height: 110%"
            ref="map"
            id="map"
            class="map"
            :markers="markers"
            :enable-zoom="true"
            :enable-scroll="true"
          >
          </map>
        </view>
        <view class="order-btn-block">
          <navigator
            class="order-btn"
            :url="'/member/product/comment?od=' + OrderInfo.order_id"
            v-if="
              OrderInfo.order_buyer_evaluation_status == 0 &&
              OrderInfo.order_state_id == 2060
            "
            >评价
          </navigator>
          <navigator
            class="order-btn"
            :url="'/member/product/comment?od=' + OrderInfo.order_id"
            v-if="
              OrderInfo.order_buyer_evaluation_status == 1 &&
              OrderInfo.order_state_id == 2060
            "
            >{{ __("查看评价") }}
          </navigator>
          <view class="order-btn order-btn-kefu" @click="goKefu">联系客服</view>
          <!--
          <view
            :class="[
              'order-btn order-btn-cuiyixia',
              { 'order-btn-disabled': isReminderOrder },
            ]"
            :data-on="OrderInfo.order_id"
            @click="reminderOrder"
            >催一下</view
          >
        -->
          <view
            dis
            class="order-btn order-btn-zailai"
            :data-on="OrderInfo.order_id"
            v-if="[2050, 2060, 2070].includes(OrderInfo.order_state_id)"
            @click="placeAnOrder"
            >再来一单</view
          >
          <view
            class="order-btn order-btn-zailai"
            :data-on="OrderInfo.order_id"
            v-if="
              OrderInfo.kind_id == 1201 &&
              OrderInfo.order_state_id == StateCode.ORDER_STATE_SHIPPED
            "
            @click="confirmReceipt"
            >{{ __("确认收货") }}</view
          >
          <view
            :data-on="OrderInfo.order_id"
            class="order-btn order-btn-zailai"
            v-if="OrderInfo.if_buyer_cancel"
            @click="cancelOrder"
          >
            {{ __("取消订单") }}</view
          >
          <view
            class="order-btn order-bint-play"
            :data-on="OrderInfo.order_id"
            @click="gotopay"
            v-if="
              OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
              OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL
            "
            >立即支付</view
          >
        </view>

        <view v-if="false">
          <block
            v-show="!OrderInfo.is_virtual"
            v-for="(logistics_item, i) in OrderInfo.logistics"
            :key="i"
          >
            <view class="m-cell">
              <view class="m-cell-bd"
                ><text>{{
                  sprintf(
                    __("物流单号： %s"),
                    logistics_item.order_tracking_number || ""
                  )
                }}</text></view
              >
            </view>
            <view class="m-cell">
              <view class="m-cell-bd"
                ><text>{{
                  sprintf(
                    __("物流公司： %s"),
                    logistics_item.logistics_name || ""
                  )
                }}</text></view
              >
            </view>
            <navigator
              :url="
                '/member/order/logistics?on=' +
                OrderInfo.order_id +
                '&logistics_id=' +
                logistics_item.logistics_id +
                '&logistics_name=' +
                logistics_item.logistics_name +
                '&logistics_number=' +
                logistics_item.logistics_number +
                '&tracking_number=' +
                logistics_item.order_tracking_number +
                '&stock_bill_id=' +
                logistics_item.stock_bill_id
              "
              class="m-cell m-cell-access"
            >
              <view class="m-cell-bd">{{ __("查看物流") }}</view>
              <view class="m-cell-ft"></view>
            </navigator>
          </block>
          <!--厂家自送 其他配送-->
          <view
            v-if="
              OrderInfo.LogisticsKey == 'VENDOR' ||
              OrderInfo.LogisticsKey == 'OTHER'
            "
          >
            <view class="m-cell">
              <view class="m-cell-bd">
                <text>{{
                  sprintf(
                    __("送货人：%s %s"),
                    OrderInfo.LogisticCode,
                    OrderInfo.Shipper
                  )
                }}</text>
              </view>
            </view>
          </view>
          <view v-if="OrderInfo.LogisticsKey == 'CLIENT'">
            <view class="m-cell">
              <view class="m-cell-bd">
                <text>{{
                  sprintf(
                    __("提货人：%s %s"),
                    OrderInfo.LogisticCode,
                    OrderInfo.Shipper
                  )
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view
        class="m-cells order-info-block"
        v-if="OrderInfo.delivery_type_id != 5"
      >
        <view class="title">订单信息</view>
        <view class="order-info-item">
          <view class="order-info-item-left">配送地址</view>
          <view class="order-info-item-right order-info-address">
            <view>{{ OrderInfo.delivery.da_address }}</view>
            <view
              >{{ OrderInfo.delivery.da_name
              }}{{ desensitizationMobile(OrderInfo.delivery.da_mobile) }}</view
            >
          </view>
        </view>
        <view class="order-info-item">
          <view class="order-info-item-left">订单号码</view>
          <view class="order-inof-item-right">{{ OrderInfo.order_id }}</view>
        </view>
        <view class="order-info-item">
          <view class="order-info-item-left">配送方式</view>
          <view class="order-inof-item-right">{{
            deliveryTypeName(OrderInfo.delivery_type_id)
          }}</view>
        </view>
        <view
          class="order-info-item"
          v-if="
            ![5, 10].includes(OrderInfo.delivery_type_id) &&
            ![2010, 2070].includes(OrderInfo.order_state_id)
          "
        >
          <view class="order-info-item-left">顺丰订单号</view>
          <view class="order-inof-item-right">{{ OrderInfo.sf_order_id }}</view>
        </view>
        <view
          v-show="!OrderInfo.is_virtual"
          v-for="(logistics_item, index) in OrderInfo.logistics"
          :key="index"
        >
          <view class="order-info-item">
            <view class="order-info-item-left">物流单号</view>
            <view class="order-inof-item-right">{{
              logistics_item.order_tracking_number || ""
            }}</view>
          </view>
          <view class="order-info-item">
            <view class="order-info-item-left">物流公司</view>
            <view class="order-inof-item-right">{{
              logistics_item.logistics_name || ""
            }}</view>
          </view>
          <navigator
            :url="
              '/member/order/logistics?on=' +
              OrderInfo.order_id +
              '&logistics_id=' +
              logistics_item.logistics_id +
              '&logistics_name=' +
              logistics_item.logistics_name +
              '&logistics_number=' +
              logistics_item.logistics_number +
              '&tracking_number=' +
              logistics_item.order_tracking_number +
              '&stock_bill_id=' +
              logistics_item.stock_bill_id
            "
            class="m-cell m-cell-access"
            style="padding: 0; margin: 20px 0"
          >
            <view class="m-cell-bd">{{ __("查看物流") }}</view>
            <view class="m-cell-ft"></view>
          </navigator>
        </view>
        <view
          class="order-info-item"
          v-if="
            OrderInfo.LogisticsKey == 'VENDOR' ||
            OrderInfo.LogisticsKey == 'OTHER'
          "
        >
          <view class="order-info-item-left">送货人</view>
          <view class="order-inof-item-right">{{
            OrderInfo.LogisticCode + OrderInfo.Shipper
          }}</view>
        </view>
        <view class="order-info-item" v-if="OrderInfo.LogisticsKey == 'CLIENT'">
          <view class="order-info-item-left">提货人</view>
          <view class="order-inof-item-right">{{
            OrderInfo.LogisticCode + OrderInfo.Shipper
          }}</view>
        </view>
        <view class="order-info-item">
          <view class="order-info-item-left">下单时间</view>
          <view class="order-inof-item-right">{{ OrderInfo.order_time }}</view>
        </view>
        <view class="order-info-item">
          <view class="order-info-item-left">支付方式</view>
          <view class="order-inof-item-right">{{
            OrderInfo.payment_type_id == StateCode.PAYMENT_TYPE_DELIVER ||
            OrderInfo.payment_type_id == StateCode.PAYMENT_TYPE_OFFLINE
              ? __("货到付款")
              : __("在线支付")
          }}</view>
        </view>
        <view class="order-info-item" v-if="OrderInfo.order_message">
          <view class="order-info-item-left">{{ __("备注") }}</view>
          <view class="order-inof-item-right" style="overflow-wrap: anywhere">{{
            OrderInfo.order_message
          }}</view>
        </view>
      </view>

      <!-- 是否需要发货 -->
      <!-- <view class="m-cells m-addres-info" v-if="OrderInfo.if_delivery">
        <view class="m-ad-name">
          <text>{{ OrderInfo.delivery.da_name }}</text>
          <text>{{ OrderInfo.delivery.da_mobile }}</text>
        </view>
        <view class="m-ad-address">
          <text
            >{{ OrderInfo.delivery.da_province }}/{{
              OrderInfo.delivery.da_city
            }}/{{ OrderInfo.delivery.da_county }}
            {{ OrderInfo.delivery.da_address }}
          </text>
        </view>
      </view>

      <view
        v-else
        class="massage"
        style="align-items: center; justify-content: space-between"
      >
        <view class="massage-name">
          {{ sprintf(__("预约人：%s"), OrderInfo.delivery.da_name) }}
        </view>
        <view class="massage-tel" style="margin-right: 40rpx">
          {{ sprintf(__("电话：%s"), OrderInfo.delivery.da_mobile) }}
        </view>
      </view> -->

      <view
        class="code1"
        v-if="
          (OrderInfo.is_virtual ||
            OrderInfo.chain_id ||
            OrderInfo.chain_code) &&
          OrderInfo.order_is_paid == 3013
        "
        style="background: #fff; padding-bottom: 20rpx"
      >
        <image
          lazy-load
          :src="OrderInfo.virtual_qrcode"
          :data-src="OrderInfo.virtual_qrcode"
          style="width: 375rpx; height: 375rpx"
          @click="previewProductImg"
        ></image>
        <text v-if="OrderInfo.chain_code" @click="copyVirtualCode">{{
          sprintf(__("服务码：%s"), OrderInfo.chain_code)
        }}</text>
      </view>

      <view class="m-cells total-info" v-if="OrderInfo.delivery_type_id == 5">
        <view class="m-cell" v-if="OrderInfo.delivery_type_id == 5">
          <view class="m-cell-bd">
            <text>{{ __("商家电话") }}</text>
          </view>
          <view @click="call" style="display: flex">
            <image
              lazy-load
              src="/static/images/call.png"
              style="
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                margin: auto;
              "
            ></image>
            <view
              class="m-cell-ft m-order-typetxt"
              style="color: #17abe3"
              v-if="OrderInfo.store_tel"
            >
              {{ OrderInfo.store_tel }}</view
            >
          </view>
        </view>
        <view
          class="m-cell"
          v-if="OrderInfo.delivery_type_id == 5"
          style="
            display: flex;
            flex-flow: row;
            justify-content: space-between;
            align-items: stretch;
            padding-top: 0;
          "
        >
          <view class="m-cell-bd">
            <text>{{ __("商家地址") }}</text>
          </view>

          <view style="display: flex; float: right">
            <view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
              {{ OrderInfo.store_address }}</view
            >
          </view>
        </view>

        <view class="m-cell" style="padding-top: 0">
          <view class="m-cell-bd">
            <text>{{ __("到店日期") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt">{{
            OrderInfo.virtual_service_date
          }}</view>
        </view>
      </view>

      <view
        class="m-cells total-info"
        v-if="
          OrderInfo.store_o2o_flag == 1 &&
          OrderInfo.store_latitude &&
          OrderInfo.store_longitude
        "
      >
        <view class="m-cell">
          <view class="m-cell-bd">
            <text>{{ __("营业时间") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >{{ OrderInfo.store_opening_hours }} -
            {{ OrderInfo.store_close_hours }}</view
          >
        </view>
        <view
          class="m-cell"
          style="
            display: flex;
            flex-flow: row;
            justify-content: space-between;
            align-items: stretch;
            padding-top: 0;
          "
          @click.stop="gotomap"
          :data-address="OrderInfo.store_address"
          :data-name="OrderInfo.store_name"
          :data-lat="OrderInfo.store_latitude"
          :data-lng="OrderInfo.store_longitude"
        >
          <view style="display: flex; float: right; width: 400rpx">
            <view
              class="m-cell-ft m-order-typetxt"
              style="
                color: #17abe3;
                float: right;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
              "
              >{{ OrderInfo.store_address }}{{ OrderInfo.store_address }}</view
            >
          </view>
          <view style="display: flex; float: right">
            <image
              style="
                width: 20rpx;
                height: 26rpx;
                margin-top: 6rpx;
                margin: auto;
              "
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/location.png"
            ></image>
            <view
              class="m-cell-ft m-order-typetxt"
              style="color: #17abe3; margin-left: 4rpx"
              >离您 {{ OrderInfo.distance }}</view
            >
          </view>
        </view>
      </view>

      <view class="m-product-all">
        <view class="m-product-list m-panel m-panel-access">
          <view class="m-panel-access-title">商品费用</view>
          <view class="m-panel-hd shop-name">
            <navigator
              :url="'/pagesub/index/store?store_id=' + OrderInfo.store_id"
              class="m-cell m-cell-access"
              style=""
              hover-class="none"
            >
              <view class="m-cell-bd m-cell-primary">
                <p class="m-store-info">
                  {{ OrderInfo.store_name }}
                </p>
              </view>
              <text class="m-cell-ft"></text>
            </navigator>
          </view>
          <navigator
            v-for="(item, i) in OrderInfo.items"
            :key="i"
            :url="'/pages/product/detail?is_store_flag=0&pid=' + item.item_id"
            class="m-product-item"
          >
            <view class="m-product-img">
              <image lazy-load :src="item.order_item_image" mode="aspectFill" />
            </view>
            <view class="m-product-info">
              <view class="m-product-name">
                <label
                  ><text v-if="item.show_typename" class="tag tag-orange">{{
                    item.show_typename
                  }}</text
                  >{{ item.product_name }}
                  <text>x{{ item.order_item_quantity }} </text>
                </label>

                <label
                  class="m-min-name"
                  style="
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                  "
                >
                  {{ item.spec_info ? item.spec_info : "" }}
                </label>
              </view>
              <view class="m-product-price">
                <block v-if="item.item_unit_price">
                  <view class="m-product-price-amount-block">
                    ￥<text class="m-product-price-amount">{{
                      item.item_unit_price
                    }}</text>
                  </view>
                </block>
                <!-- <label
                  class="pre-info-price"
                  v-if="item.order_item_discount_amount"
                  style="padding: 0 30rpx"
                >
                  -{{ __("￥")
                  }}{{ number_format(item.order_item_discount_amount, 2) }}
                </label> -->

                <block v-if="item.item_unit_points">
                  <label style="margin: auto 10rpx">+</label
                  >{{ item.item_unit_points }}{{ __("积分") }}
                </block>

                <block v-if="item.item_unit_sp">
                  <label style="margin: auto 10rpx">+</label
                  >{{ item.item_unit_sp }}{{ __("众宝") }}
                </block>

                <block
                  v-if="
                    item.is_denyreturn == false &&
                    OrderInfo.card_kind_id != 1002
                  "
                >
                  <navigator
                    @click.stop
                    :url="
                      '/member/product/return?order_id=' +
                      item.order_id +
                      '&order_item_id=' +
                      item.order_item_id
                    "
                    v-if="
                      !dist_flag &&
                      item.if_return &&
                      OrderInfo.order_state_id != 2070 &&
                      !item.return_id
                    "
                    class="u-link-btn hide"
                    style="line-height: 30rpx"
                    >{{ __("退货") }}</navigator
                  >
                </block>
                <navigator
                  @click.stop
                  :url="
                    '/member/member/returndetail?return_id=' + item.return_id
                  "
                  v-if="item.return_id"
                  class="u-link-btn hide"
                  style="line-height: 30rpx"
                  >{{ __("售后详情") }}</navigator
                >
              </view>
            </view>
          </navigator>
          <view class="m-cell" v-if="1 || OrderInfo.if_delivery">
            <view class="m-cell-bd">
              <text>{{ __("运费") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              ￥<text class="m-product-price-amount">{{
                OrderInfo.order_shipping_fee
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="OrderInfo.order_discount_amount > 0">
            <view class="m-cell-bd">
              <text>{{ __("活动优惠") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              - ￥<text class="m-product-price-amount">{{
                OrderInfo.order_discount_amount
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="OrderInfo.voucher_price > 0">
            <view class="m-cell-bd">
              <text>{{ __("优惠券") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              ￥<text class="m-product-price-amount">{{
                OrderInfo.voucher_price
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="0 && !(OrderInfo.LevelDiscount == 0)">
            <view class="m-cell-bd">
              <text
                >{{ __("会员折扣")
                }}<text style="font-size: 24rpx; color: #717171">{{
                  sprintf(__("%s折"), OrderInfo.MomentMemberDiscount)
                }}</text></text
              >
            </view>
            <view class="m-product-price-amount-block">
              ￥<text class="m-product-price-amount">{{
                OrderInfo.LevelDiscount
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="OrderInfo.order_resource_ext1">
            <view class="m-cell-bd">
              <text>{{ __("积分") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              <view class="m-cell-ft m-order-typetxt"
                >-{{ OrderInfo.order_resource_ext1 }} {{ __("积分") }}</view
              >
            </view>
          </view>
          <view class="m-cell" v-if="OrderInfo.order_resource_ext2">
            <view class="m-cell-bd">
              <text>{{ __("众宝") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              <view class="m-cell-ft m-order-typetxt"
                >-{{ OrderInfo.order_resource_ext2 }} {{ __("众宝") }}</view
              >
            </view>
          </view>
          <view class="m-cell" v-if="0 && !(OrderInfo.PointAsCash == 0)">
            <view class="m-cell-bd">
              <text>{{ __("积分抵现") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              -￥<text class="m-product-price-amount">{{
                OrderInfo.PointAsCash
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="0 && deduction > 0">
            <view class="m-cell-bd">
              <text>{{ __("余额抵扣") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              -￥<text class="m-product-price-amount">{{ deduction }}</text>
            </view>
          </view>
          <view class="m-cell">
            <view class="m-cell-bd">
              <text>{{ __("总金额") }}</text>
            </view>
            <view class="m-product-price-amount-block" style="color: red">
              ￥<text class="m-product-price-amount">{{
                OrderInfo.order_payment_amount
              }}</text>
            </view>
          </view>
          <view class="m-cell" v-if="OrderInfo.trade.trade_payment_amount > 0">
            <view class="m-cell-bd">
              <text>{{ __("待付款") }}</text>
            </view>
            <view class="m-product-price-amount-block">
              ￥<text class="m-product-price-amount">{{
                OrderInfo.trade.trade_payment_amount
              }}</text>
            </view>
          </view>
          <view
            class="m-cell"
            style="padding-right: 10px"
            v-if="
              OrderInfo.order_state_id == 2040 && OrderInfo.card_kind_id == 1002
            "
          >
            <view class="m-cell-bd">
              <text>优惠券</text>
            </view>
            <view
              class="coupon-btn"
              :data-on="OrderInfo.order_id"
              @click="writeOrder"
            >
              {{ __("确认领券") }}
            </view>
          </view>
        </view>
      </view>
      <!-- <view v-if="OrderInfo.order_message">
        <view class="m-cells-title">{{ __("备注") }}</view>
        <view class="m-cells m-cells-form">
          <view class="m-cell">
            <view class="m-cell-bd">
              {{ OrderInfo.order_message }}
            </view>
          </view>
        </view>
      </view> -->
      <!-- 门店提货 todo -->
      <view class="m-cells total-info">
        <view class="m-cell" v-if="OrderInfo.is_virtual && OrderInfo.chain_id">
          <view class="m-cell-bd">
            <text>{{ __("门店名称") }}</text>
          </view>
          <view style="display: flex">
            <image
              lazy-load
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/merchant.png"
              style="width: 30rpx; height: 30rpx; margin-right: 10rpx"
            ></image>
            <view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
              {{ OrderInfo.chain_name }}</view
            >
          </view>
        </view>
        <view class="m-cell" v-if="OrderInfo.is_virtual">
          <view class="m-cell-bd">
            <text style="">{{ __("预约时间") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt" style="color: #000">{{
            OrderInfo.virtual_service_time
          }}</view>
        </view>
        <view class="m-cell" v-if="OrderInfo.is_virtual && OrderInfo.chain_id">
          <view class="m-cell-bd">
            <text>{{ __("商家电话") }}</text>
          </view>
          <view @click="call" style="display: flex">
            <image
              lazy-load
              src="/static/images/call.png"
              style="width: 30rpx; height: 26rpx; margin-right: 10rpx"
            ></image>
            <view class="m-cell-ft m-order-typetxt" style="color: #17abe3">
              {{ OrderInfo.chain_mobile }}</view
            >
          </view>
        </view>
        <view
          class="m-cell"
          v-if="OrderInfo.is_virtual && OrderInfo.chain_id"
          style="
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            align-items: stretch;
            padding-top: 0;
          "
        >
          <view class="m-cell-bd">
            <text>{{ __("商家地址") }}</text>
          </view>
          <view
            class="m-cell-ft m-order-typetxt"
            style="color: #717171; text-align: left; margin-top: 20rpx"
            >{{ OrderInfo.chain_address }}</view
          >
        </view>
        <!-- <view class="m-cell">
          <view class="m-cell-bd">
            <text>{{ __("商品总额") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            ><text>{{ __("￥") }}</text
            >{{ OrderInfo.order_item_amount }}</view
          >
        </view> -->
        <!-- <view class="m-cell" v-if="OrderInfo.order_discount_amount > 0">
          <view class="m-cell-bd">
            <text>{{ __("活动优惠") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-<text>{{ __("￥") }}</text
            >{{ OrderInfo.order_discount_amount }}</view
          >
        </view> -->
        <block
          v-if="OrderInfo.activity_json && OrderInfo.activity_json.length > 0"
        >
          <view
            class="m-cell m-cell-sub"
            v-for="(item, i) in OrderInfo.activity_json"
            :key="i"
          >
            <view class="m-cell-bd">
              <text
                v-if="item.type_id == StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT"
                >{{ __("限时折扣") }}</text
              >
              <text v-if="item.type_id == StateCode.ACTIVITY_TYPE_REDUCTION">{{
                __("满减")
              }}</text>
              <text
                v-if="item.type_id == StateCode.ACTIVITY_TYPE_REDUCTION_AGAIN"
                >{{ __("折上折") }}</text
              >
              <text
                v-if="
                  item.type_id == StateCode.ACTIVITY_TYPE_ONE_PIECE_DISCOUNT
                "
                >{{ __("单件折") }}</text
              >
              <text
                v-if="item.type_id == StateCode.ACTIVITY_TYPE_MULTIPLE_FOLD"
                >{{ __("多件折") }}</text
              >
              <text v-if="item.type_id == StateCode.ACTIVITY_TYPE_GIFTBAG">{{
                __("组合套餐")
              }}</text>
            </view>
            <view class="m-cell-ft m-order-typetxt">
              -{{ __("￥") }}{{ number_format(item.discount, 2) }}
            </view>
            <view class="arrow"></view>
          </view>
        </block>

        <!-- <view class="m-cell" v-if="OrderInfo.voucher_price > 0">
          <view class="m-cell-bd">
            <text>{{ __("优惠券") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-<text>{{ __("￥") }}</text
            >{{ OrderInfo.voucher_price }}</view
          >
        </view> -->

        <!-- todo 会员折扣等级 -->
        <!-- <view class="m-cell" v-if="0 && !(OrderInfo.LevelDiscount == 0)">
          <view class="m-cell-bd">
            <text>{{ __("会员折扣") }}</text>
            <text style="font-size: 24rpx; color: #717171">{{
              sprintf(__("%s折"), OrderInfo.MomentMemberDiscount)
            }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-<text>{{ __("￥") }}</text
            >{{ OrderInfo.LevelDiscount }}</view
          >
        </view> -->
        <!-- todo 积分抵现 -->
        <!-- <view class="m-cell" v-if="OrderInfo.order_resource_ext1">
          <view class="m-cell-bd">
            <text>{{ __("积分") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-{{ OrderInfo.order_resource_ext1 }} {{ __("积分") }}</view
          >
        </view> -->

        <!-- <view class="m-cell" v-if="OrderInfo.order_resource_ext2">
          <view class="m-cell-bd">
            <text>{{ __("众宝") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-{{ OrderInfo.order_resource_ext2 }} {{ __("众宝") }}</view
          >
        </view> -->

        <!-- <view class="m-cell" v-if="0 && !(OrderInfo.PointAsCash == 0)">
          <view class="m-cell-bd">
            <text>{{ __("积分抵现") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-<text>{{ __("￥") }}</text
            >{{ OrderInfo.PointAsCash }}</view
          >
        </view> -->
        <!-- <view class="m-cell" v-if="0 && deduction > 0">
          <view class="m-cell-bd">
            <text>{{ __("余额抵扣") }}</text>
          </view>
          <view class="m-cell-ft m-order-typetxt"
            >-<text>{{ __("￥") }}</text
            >{{ deduction }}</view
          >
        </view> -->

        <!-- <view class="m-cell tbt">
          <view class="m-cell-bd"> </view>
          <view class="m-cell-ft m-total-info">
            <view>
              {{ __("总金额") }}：
              <label class="m-total-price"
                ><text>{{ __("￥") }}</text
                >{{ OrderInfo.order_payment_amount }}</label
              >
            </view>
            <view>
              {{ __("待付款") }}：
              <label class="m-total-price"
                ><text>{{ __("￥") }}</text
                >{{ OrderInfo.trade.trade_payment_amount }}</label
              >
            </view>
          </view>
        </view> -->
        <!-- <view
          class="my_coupon"
          v-if="
            OrderInfo.order_state_id == 2040 && OrderInfo.card_kind_id == 1002
          "
          :data-on="OrderInfo.order_id"
          @click="writeOrder"
        >
          <view class="my_coubut">{{ __("确认领券") }}</view>
        </view>
        <view style="height: 108rpx"> </view> -->
      </view>
      <view class="u-cleanbox"></view>
    </view>
    <view
      class="m-footer-btn"
      v-show="false"
      v-if="
        !dist_flag &&
        isdata &&
        (OrderInfo.if_buyer_cancel ||
          OrderInfo.order_state_id == 2060 ||
          OrderInfo.order_state_id == 2030 ||
          OrderInfo.order_state_id == 2020 ||
          OrderInfo.order_state_id == StateCode.ORDER_STATE_SHIPPED ||
          (OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
            OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL))
      "
    >
      <!-- <navigator
        :url="'/member/product/comment?od=' + OrderInfo.order_id"
        v-if="
          OrderInfo.order_buyer_evaluation_status == 0 &&
          OrderInfo.order_state_id == 2060
        "
        class="u-link-btn"
        >{{ __("去评价") }}
      </navigator> -->
      <!-- <navigator
        :url="'/member/product/comment?od=' + OrderInfo.order_id"
        v-if="
          OrderInfo.order_buyer_evaluation_status == 1 &&
          OrderInfo.order_state_id == 2060
        "
        class="u-link-btn"
        >{{ __("查看评价") }}
      </navigator> -->
      <!-- <form report-submit="true" @submit="gotopay">
        <button
          :data-on="OrderInfo.order_id"
          v-if="
            OrderInfo.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
            OrderInfo.order_state_id != StateCode.ORDER_STATE_CANCEL
          "
          class="u-link-btn"
          formType="submit"
        >
          {{ __("去支付") }}
        </button>
      </form> -->
      <!-- <view
        :data-on="OrderInfo.order_id"
        v-if="OrderInfo.if_buyer_cancel"
        class="u-link-btn"
        @click="cancelOrder"
      >
        {{ __("取消订单") }}
      </view> -->
      <!-- <view
        :data-on="OrderInfo.order_id"
        v-if="
          OrderInfo.kind_id == 1201 &&
          OrderInfo.order_state_id == StateCode.ORDER_STATE_SHIPPED
        "
        class="u-link-btn"
        @click="confirmReceipt"
        >{{ __("确认收货") }}</view
      > -->
    </view>

    <view
      v-if="
        false &&
        OrderInfo.order_state_id > 2010 &&
        OrderInfo.order_state_id != 2040 &&
        OrderInfo.order_state_id != 2070 &&
        OrderInfo.order_refund_amount == 0 &&
        OrderInfo.order_is_paid == StateCode.ORDER_PAID_STATE_YES
      "
      class="m-footer-btn"
    >
      <view
        class="u-link-btn"
        v-if="OrderInfo.kind_id == 1201"
        @click="applyCancelOrder(OrderInfo)"
      >
        {{ __("申请取消订单") }}
      </view>
    </view>
    <!--<template is="shareMskTpl" data="(PageQRCodeInfo)"/>-->
    <view
      class="shareRPK"
      v-if="showRPK && OrderInfo.IsRedPacketIcon"
      @click="IsShowRPK"
    >
      <view
        class="shareRPKBox (showRPK?'animated bounceIn':'animated bounceOut')"
        catchtap
        style="
          background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rpk_box.png)
            no-repeat;
          background-size: cover;
        "
      >
        <view class="sendRPK" catchtap="shareBox"></view>
        <view class="closeRPK" catchtap="IsShowRPK"></view>
      </view>
    </view>
    <view class="m-loading-box">
      <block v-if="!OrderInfo">
        <view class="u-loadmore">
          <label class="u-loading"></label>
          <text class="u-loadmore-tips">{{ __("正在加载") }}</text>
        </view>
        <view>
          <text></text>
        </view>
      </block>
    </view>

    <payment-box
      :paymentDataDefault="paymentData"
      :order_id="order_id"
      ref="paymentBox"
      @onCancel="onCancel"
      @onPaid="onPaid"
      @onFail="onFail"
    ></payment-box>
  </view>
</template>

<script>
import $ from "../../helpers/util";

import paymentBox from "../../components/payment-box.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      top: 0, //标题图标距离顶部距离
      opacity: 0,
      scrollTop: 0,
      options: {},
      OrderInfo: {
        delivery: {},
        distance: 0,
      },
      formId: "",
      pointAsCashMoney: "",
      discount: "",
      MemberDiscount: "",
      showRPK: true,
      ActivityGroupId: 0,
      maxRPK: 0,
      deduction: 0,
      isdata: false,

      order_id: "",
      paymentData: {},
      dist_flag: false,
      init_pay_flag: false,
      remain_pay_time: 0,
      remain_pay_time_str: "--:--:--",
      RemainTime: false,

      latitude: "",
      longitude: "",
      mapLat: 0,
      mapLng: 0,
      markers: [],
      points: [
        { latitude: 0, longitude: 0 },
        { latitude: 0, longitude: 0 },
        // ... 其他点位
      ],
      scale: 0,
      _mapContext: null,
      time: null,
      isReminderOrder: false,
    };
  },
  components: {
    paymentBox,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad: function (options) {
    uni.setNavigationBarTitle({
      title: this.__("订单详情"),
    });

    let that = this;
    that._mapContext = uni.createMapContext("map", this);
    this.setData({
      options: options,
      discount: options.discount,
      pointAsCashMoney: options.pointAsCashMoney,
      MemberDiscount: options.MemberDiscount,
      dist_flag: options.dist_flag ? true : false,
      init_pay_flag: Boolean(options.init_pay_flag),
    });

    /* if (that.$.isNull(this.userInfo))
			{
                that.forceUserInfo(function(user) {
                    that.InitPage(options)
                });
			}
			else
			{
                that.InitPage(options)
			} */

    this.notice.addNotification("RefreshMessage", this.RefreshMessage, this);
  },
  onShow: function () {
    this.InitPage(this.options);
  },
  onUnload: function () {
    //移除通知
    var that = this;

    if (this.$refs.paymentBox.showBoxView) {
      this.$refs.paymentBox.cancel();
    }

    clearInterval(that.time);
    that.time = null;
  },
  onBackPress() {
    if (this.$refs.paymentBox.showBoxView) {
      this.$refs.paymentBox.cancel();

      return true;
    }

    var that = this;
    that.notice.removeNotification("RefreshMessage", that);
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    reminderOrder() {
      let that = this;
      that.isReminderOrder = true;
    },
    cluster() {
      this._mapContext.initMarkerCluster({
        enableDefaultStyle: false, // 是否使用默认样式
        zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别
        gridSize: 60, // 聚合计算时网格的像素大小，默认60
        complete(res) {
          console.log("initMarkerCluster", res);
        },
      });
      this._mapContext.includePoints({
        points: this.points,
        padding: [40, 40, 40, 40],
        complete(res) {
          console.log("includePoints", res);
        },
      });
      // this._mapContext.on();
      this.addMarkers();
      // 缩放或拖动导致新的聚合簇产生时触发，仅返回新创建的聚合簇信息。
    },
    addMarkers() {
      const markers = [];
      this.points.forEach((item, index) => {
        markers.push(
          Object.assign(
            {},
            {
              id: index,
              iconPath: "/static/images/person.png",
              width: 40,
              height: 40,
              joinCluster: true, // 指定了该参数才会参与聚合
            },
            item
          )
        );
      });
      this._mapContext.addMarkers({
        markers,
        clear: false, //是否先清空地图上所有 marker
        complete(res) {
          console.log("addMarkers", res);
        },
      });
    },
    placeAnOrder: function (obj) {
      var params = {
        order_id: obj.currentTarget.dataset.on,
      };

      var that = this;
      that.$.confirm(
        that.__("是否再次下单？"),
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.next_order,
              data: params,
              method: "POST",
              success: function (data, status, msg, code) {
                if (200 == status) {
                  that.$.switchTab({
                    url: "/pages/cart/cart",
                  });
                } else {
                  that.$.alert(msg);
                }
              },
            });
          }
        },
        true
      );
    },
    formatOrderName(name) {
      switch (name) {
        case "已取消/已作废":
          return "已取消";
          break;
        case "已完成/已签收":
          return "已完成";
          break;
        default:
          return name;
      }
    },
    desensitizationMobile(mobile) {
      let regex = /(\d{3})\d{4}(\d{4})/;
      return mobile.replace(regex, "$1****$2");
    },
    orderProcessCalss(id) {
      if ([2020, 2030, 2040, 2100, 2200].includes(id)) {
        return "satisfy";
      }
    },
    orderProcessFaHuoCalss(id) {
      if ([2040].includes(id)) {
        return "satisfy";
      }
    },
    orderTips() {
      switch (this.OrderInfo.order_state_id) {
        case 2010:
          return "现在支付,可以更快送到您的手上哦！";
        case 2020:
          return "商家已接单";
          break;
        case 2030:
          return "您的订单正在配货中，请再等待下哦！";
          break;
        case 2040:
          return "骑手正在配送中,亲耐心等待";
          break;
        case 2060:
          return "感谢您对小发同城的信任，期待再次光临。";
          break;
        case 2070:
          return "您的订单已取消，期待再次光临";
          break;
        case 2100:
          return "骑手正在往商家路上";
        case 2200:
          return "骑士已到店，取货中";
        default:
          return "订单获取失败！";
          break;
      }
    },
    handerSkip() {
      uni.navigateBack();
    },
    initNavigation(e) {
      this.opacity = e.opacity;
      this.top = e.top;
    },
    opacityChange(e) {
      this.opacity = e.opacity;
    },
    back() {
      uni.navigateBack();
    },
    goKfu: function (e) {
      let that = this;
      //先判断是否登录
      let ProductInfo = that.OrderInfo.items[0];
      this.forceUserInfo(function (user) {
        var t = e.currentTarget.dataset;
        var url = that.Config.kefu + "/im_client/?web_plugin_id=24775";
        url =
          url +
          "&product_send=true&product_title=" +
          ProductInfo.product_name +
          "&product_订单号=" +
          ProductInfo.order_id +
          "&product_价格=" +
          ProductInfo.order_item_amount +
          "&product_image=" +
          ProductInfo.order_item_image;
        that.$.gotopage(
          "/pagesub/webpage/webpage?u=" + encodeURIComponent(url)
        );
      });
    },
    writeOrder: function (e) {
      var that = this,
        params = {
          order_id: e.currentTarget.dataset.on,
        };
      that.$.confirm(
        "确定领取券？",
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.order_receive,
              data: params,
              success: function (data, status, msg, code) {
                if (status == 200) {
                  that.$.alert(that.__("领券成功！"), function () {
                    that.$.gopage("/member/member/coupon");
                  });
                } else {
                  that.$.alert(msg);
                }
              },
            });
          }
        },
        true
      );
    },
    goKefu: function (e) {
      let that = this;
      let ProductInfo = that.OrderInfo.items[0];

      //先判断是否登录
      this.forceUserInfo(function (user) {
        var t = e.currentTarget.dataset;
        //that.$.gopage(t.appurl);

        that.$.request({
          url: that.Config.URL.user.kefu_config,
          data: {
            user_id: that.OrderInfo.buyer_user_id,
            store_id: that.OrderInfo.store_id,
          },
          loading: false,
          success: function (rd, r_status, r_msg, code) {
            if (r_status == 200) {
              let chat_url = that.$.sprintf(
                "/im/chat/chat?uid=%s&order_id=%s",
                rd.friend_id,
                ProductInfo.order_id
              );

              that.$.gopage(chat_url);
            } else {
              that.$.alert(r_msg);
            }
          },
        });
      });

      return;
    },
    call: function () {
      let that = this;
      that.$.makePhoneCall({
        phoneNumber: this.OrderInfo.chain_mobile + "",
      });
    },

    RefreshMessage: function (e) {
      this.InitPage(this.options);
    },
    touchstart() {
      let that = this;
      that.RemainTime = setInterval(() => {
        //console.log(this.money);
        if (that.remain_pay_time <= 0) {
          clearInterval(this.RemainTime);
        }
        that.remain_pay_time--;

        let hours = that.$.doubleNum(
          Math.floor(that.remain_pay_time / 60 / 60)
        );
        let minutes = that.$.doubleNum(
          Math.floor((that.remain_pay_time / 60) % 60)
        );
        let seconds = that.$.doubleNum(Math.floor(that.remain_pay_time % 60));
        that.remain_pay_time_str = hours + ":" + minutes + ":" + seconds;
      }, 1000);
    },
    touchend() {
      clearInterval(this.RemainTime);
    },
    calculateDistance(lat1, lon1, lat2, lon2) {
      const R = 6371; // 地球半径，单位为公里
      const dLat = this.deg2rad(lat2 - lat1);
      const dLon = this.deg2rad(lon2 - lon1);
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(this.deg2rad(lat1)) *
          Math.cos(this.deg2rad(lat2)) *
          Math.sin(dLon / 2) *
          Math.sin(dLon / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      const distance = R * c;
      return distance;
    },
    deg2rad(deg) {
      return deg * (Math.PI / 180);
    },
    calculateMidpoint(lat1, lon1, lat2, lon2) {
      // 使用中点公式计算中心点坐标
      const midpointLat = (lat1 + lat2) / 2;
      const midpointLon = (lon1 + lon2) / 2;
      // 返回中心点坐标，仍然是GCJ02坐标
      return {
        latitude: midpointLat,
        longitude: midpointLon,
      };
    },
    rad2deg(rad) {
      return rad * (180 / Math.PI);
    },
    getRiderLatestPosition(status) {
      let that = this;
      that._mapContext.removeMarkers({
        markerIds: [0, 1],
      });
      uni.request({
        url:
          that.Config.URL.SF.riderLatestPosition +
          `?order_id=${that.OrderInfo.sf_order_id}`,
        method: "POST",
        success: (res) => {
          // let midpoint = that.calculateMidpoint(
          //   Number(res.data.result.rider_lat),
          //   Number(res.data.result.rider_lng),
          //   Number(that.OrderInfo.OrderInfo.store_latitude),
          //   Number(that.OrderInfo.delivery.da_longitude)
          // );

          // that.mapLat = midpoint.latitude;
          // that.mapLng = midpoint.longitude;

          let points = [
            {
              latitude: Number(res.data.result.rider_lat),
              longitude: Number(res.data.result.rider_lng),
            },
            {
              latitude: that.OrderInfo.store_latitude,
              longitude: that.OrderInfo.store_longitude,
            },
          ];

          if (status == 15) {
            points[1].latitude = that.OrderInfo.delivery.da_latitude;
            points[1].longitude = that.OrderInfo.delivery.da_longitude;
          }

          that._mapContext.includePoints({
            points: points,
            padding: [60, 60, 60, 60],
            complete(res) {
              console.log("includePoints", res);
            },
          });
          that.qiShouMarkers(points);
        },
        fail: (res) => {},
      });
    },
    qiShouMarkers(points) {
      const markers = [];
      points.forEach((item, index) => {
        markers.push(
          Object.assign(
            {},
            {
              id: 2 + index,
              iconPath: "/static/images/person.png",
              width: 40,
              height: 40,
              joinCluster: true, // 指定了该参数才会参与聚合
            },
            item
          )
        );
      });
      markers[0].iconPath = "/static/images/qishou.png";
      markers[0].width = 60;
      markers[0].height = 60;

      this._mapContext.addMarkers({
        markers,
        clear: true, //是否先清空地图上所有 marker
        complete(res) {
          console.log("addMarkers", res);
        },
      });
    },
    deliveryTypeName(id) {
      if (id == 10) {
        return "物流配送";
      }

      if (id == 16) {
        return "同城配送";
      }
    },
    InitPage: function (options) {
      var params = {
        user_id: this.userInfo.user_id,
        order_id: options.on,
      };
      let that = this;
      that.touchend();
      that.$.request({
        url: this.Config.URL.user.order_detail,
        data: params,
        success: function (data, status, msg, code) {
          if (200 == status) {
            data.order_time = that.$.datetimeFormatter(
              data.order_time,
              "yyyy-MM-dd hh:mm:ss"
            );

            that.setData({
              isdata: true,
              OrderInfo: data,
              deduction: 0,
              remain_pay_time: data.remain_pay_time ? data.remain_pay_time : 0,
              //(e.Info[0].ECardCash + e.Info[0].ExtraCash).toFixed(2)
              // 余额折扣？
            });
            if (
              ![2060, 2070].includes(data.order_state_id) &&
              data.delivery_type_id == 16
            ) {
              let midpoint = that.calculateMidpoint(
                Number(data.store_latitude),
                Number(data.store_longitude),
                Number(data.delivery.da_latitude),
                Number(data.delivery.da_longitude)
              );

              that.mapLat = midpoint.latitude;
              that.mapLng = midpoint.longitude;

              that.points[0].latitude = Number(data.store_latitude);
              that.points[0].longitude = Number(data.store_longitude);
              that.points[1].latitude = Number(data.delivery.da_latitude);
              that.points[1].longitude = Number(data.delivery.da_longitude);

              that.cluster();
              that.getSFcreateOrder();
            }
            if (that.$.isJson(data.activity_json)) {
              that.OrderInfo.activity_json = JSON.parse(data.activity_json);
            }

            if (that.RemainTime === false) {
              that.touchstart();
            }

            //支付跳转订单
            if (that.options.init_pay_flag) {
              //如果未支付
              if (
                data.order_is_paid != that.StateCode.ORDER_PAID_STATE_YES &&
                data.order_state_id == that.StateCode.ORDER_STATE_WAIT_PAY
              ) {
                that.$.showModal({
                  title: that.__("提示"),
                  content: that.__("在线支付状态更新中"),
                  showCancel: false,
                  confirmText: "Ok",
                  success: (res) => {
                    if (res.confirm) {
                      let redirect_url =
                        "/member/order/detail?on=" +
                        options.on +
                        "&init_pay_flag=1";
                      that.$.gotopage(redirect_url);

                      //window.location.href = redirect_url;
                    } else if (res.cancel) {
                    }
                  },
                });
              } else {
                //如果拼团订单
                if (that.$.inArray(data.activity_type_id, 1123)) {
                  let redirect_url =
                    "/activity/fightgroup/detail?gb_id=" +
                    data.gb_id +
                    "&on=" +
                    data.order_id;
                  that.$.gotopage(redirect_url);
                }
              }
            }

            //计算店铺距离

            /**
             * 计算两个经纬度的距离(米)
             */
            let getDistance = function (lat1, lng1, lat2, lng2) {
              var radLat1 = (lat1 * Math.PI) / 180.0;
              var radLat2 = (lat2 * Math.PI) / 180.0;
              var a = radLat1 - radLat2;
              var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
              var s =
                2 *
                Math.asin(
                  Math.sqrt(
                    Math.pow(Math.sin(a / 2), 2) +
                      Math.cos(radLat1) *
                        Math.cos(radLat2) *
                        Math.pow(Math.sin(b / 2), 2)
                  )
                );
              s = s * 6378.137; // EARTH_RADIUS;
              s = Math.round(s * 10000) / 10;
              return s;
            };

            if (that.OrderInfo.store_o2o_flag) {
              that.$.getLocation({
                type: "wgs84",
                success: function (response) {
                  that.setData({
                    latitude: response.latitude,
                    longitude: response.longitude,
                  });

                  that.OrderInfo.distance = 0;

                  let d = getDistance(
                    that.latitude,
                    that.longitude,
                    that.OrderInfo.store_latitude,
                    that.OrderInfo.store_longitude
                  );

                  console.info(
                    that.latitude,
                    that.longitude,
                    that.OrderInfo.store_latitude,
                    that.OrderInfo.store_longitude
                  );
                  console.info(d);
                  that.OrderInfo.distance = that.$.distanceFormat(d || 0);
                },
                fail: function () {},
              });
            }
          }
        },
      });
      /* 红包活动分享 var t = {store_id: this.shopInfo.Id, sponsorId: this.userInfo.Id, order_id: options.on};
				that.$.xsr(that.$.makeUrl(orderapi.PrepareShareLuckyRedPacket, t), function (e) {
				    that.setData({maxRPK: e.Info.LuckyOrder, ActivityGroupId: e.Info.LuckyRedPacketActivityGroupId})
				})*/
    },
    applyCancelOrder: function (OrderInfo) {
      let that = this;
      uni.navigateTo({
        url:
          "/pagesub/product/return?order_id=" +
          OrderInfo.order_id +
          "&order_state=" +
          OrderInfo.order_state_id,
      });
    },
    getSFcreateOrder() {
      let that = this;

      that.getSFListOrderFeed();

      that.time = setInterval(() => {
        that.getSFListOrderFeed();
      }, 30000);
    },
    //顺丰状态列表
    getSFListOrderFeed() {
      let that = this;
      uni.request({
        url:
          that.Config.URL.SF.listOrderFeed +
          `?order_id=${that.OrderInfo.sf_order_id}`,
        method: "POST",
        success: (res) => {
          if (res.data && res.data.result) {
            if (res.data.result.feed.length > 0) {
              let feedArr = res.data.result.feed;

              let statusArr = [];

              feedArr.forEach((item) => {
                statusArr.push(item.order_status);
              });

              if (statusArr.includes(10)) {
                let status = 10;

                that.$set(that.OrderInfo, "order_state_id", 2100);

                if (statusArr.includes(12)) {
                  that.$set(that.OrderInfo, "order_state_id", 2200);
                }

                if (statusArr.includes(15)) {
                  status = 15;
                  that.$set(that.OrderInfo, "order_state_id", 2040);
                  that.$set(that.OrderInfo, "order_state_name", "已发货");
                }

                that.orderTips();

                console.log(that.OrderInfo.order_state_id);
                that.getRiderLatestPosition(status);
              }

              if (statusArr.includes(17)) {
                that.$set(that.OrderInfo, "order_state_id", 2060);
                that.$set(that.OrderInfo, "order_state_name", "已完成");
                clearInterval(that.time);
                that.time = null;
              }
            }
          }
        },
        fail: (res) => {},
      });
    },
    cancelOrder: function (e) {
      let that = this;
      var params = {
        order_id: e.currentTarget.dataset.on,
      };
      that.$.confirm(
        that.__("是否取消订单"),
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.order_cancel,
              data: params,
              success: function (data, status, msg, code) {
                if (200 == status) {
                  that.$.alert("取消成功！", function () {
                    setTimeout(function () {
                      that.notice.postNotificationName("RefreshMessage", e);
                    }, 1500);

                    /*
											that.$.navigateBack(1, function() {
												var e = {};
												that.notice.postNotificationName("RefreshMessage", e)
											})
                                            */
                  });
                }
              },
            });
          }
        },
        true
      );
    },
    confirmReceipt: function (obj) {
      var params = {
        order_id: obj.currentTarget.dataset.on,
      };

      var that = this;
      that.$.confirm(
        that.__("是否确认收货？"),
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.order_receive,
              data: params,
              success: function (data, status, msg, code) {
                if (status == 200) {
                  that.$.alert(that.__("收货成功！"), function () {
                    that.notice.postNotificationName("RefreshMessage", e);
                  });
                }
              },
            });
          }
        },
        true
      );
    },
    gotopay: async function (e) {
      var that = this;

      await that.$store.dispatch(`getUserInfo`, function (userIfo) {});
      that.setData({
        order_id: that.OrderInfo.order_id,
        paymentData: {
          order_id: that.OrderInfo.order_id,
          orderSelMoneyAmount: that.OrderInfo.trade.trade_payment_amount,

          user_money: this.userInfo.user_money,
          user_points: this.userInfo.user_points,
          user_recharge_card: this.userInfo.user_recharge_card,
          user_sp: this.userInfo.user_sp,
        },
      });

      this.$refs.paymentBox.show();
      return true;
    },

    onCancel: function (e) {
      return;
    },
    onPaid: function (e) {
      let that = this;

      that.$.alert(that.__("支付成功！"), function () {
        that.$refs.paymentBox.cancel();
        that.options.init_pay_flag = true;
        that.InitPage(that.options);

        that.notice.postNotificationName("RefreshMessage", e);
        /*
                    that.$.navigateBack(1, function() {
                        var e = {};
						that.notice.postNotificationName("RefreshMessage", e)
                    })
                    */
      });
    },
    onFail: function (e) {
      let that = this;
      that.$.alert(that.__("支付失败！"));
      //console.log("支付失败：", e)
    },

    sendMessage: function (e) {
      let that = this;
      var t = {
        api: orderapi.OrderPaySuccessWXMessage,
        pages: "/member/order/detail?on=" + e,
        formId: this.formId,
        WeiXinOpenId: this.userInfo.openId,
        value: {
          store_id: this.shopInfo.store_id,
          order_id: e,
        },
      };
      that.$.sendTpl(t);
    },
    copyVirtualCode: function () {
      uni.setClipboardData({
        data: this.OrderInfo.chain_code,
        complete() {
          uni.showToast({
            title: "已复制到剪贴板",
          });
        },
      });
    },
    onShareAppMessage: function () {
      var that = this;
      return {
        title: "拼手气红包，第" + this.maxRPK + "个领取的红包最大!",
        imageUrl:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/shareImg.png",
        path:
          "pages/redpacket/redpacket?g=" +
          this.ActivityGroupId +
          "&n=" +
          this.maxRPK +
          "&uid=" +
          this.userInfo.Id,
        success: function () {
          that.$.xsr1(
            that.$.makeUrl(orderapi.ShareCount, {
              sponsorId: this.userInfo.Id,
              audienceType: 1,
              audienceId: 0,
              ContentType: 22,
              contentId: that.ActivityGroupId,
            }),
            function (e) {}
          );
        },
      };
    },
    shareQRCode: function (e) {
      var that = this,
        params = {
          store_id: this.shopInfo.Id,
          sponsorId: this.userInfo.Id,
          imageUrl:
            "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/shareImg.png",
          path:
            "pages/redpacket/redpacket?g=" +
            this.ActivityGroupId +
            "&n=" +
            this.maxRPK +
            "&uid=" +
            this.userInfo.Id,
          luckyOrder: this.maxRPK,
        };
      //生成二维码并返回地址。 - 需要修改调整为小程序地址
      that.$.request({
        url: this.Config.URL.wx.getMiniAppQRCodeUnlimit,
        data: params,
        success: function (data, status, msg, code) {
          that.setData({
            PageQRCodeInfo: {
              Path: data.url,
              IsShare: true,
              IsShareBox: false,
              IsJT: true,
            },
          });
        },
      });
    },
    shareBox: function () {
      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: true,
          IsShareBox: true,
          IsJT: false,
        },
      });
    },
    cancelShare: function () {
      this.setData({
        PageQRCodeInfo: {
          Path: "",
          IsShare: false,
          IsShareBox: false,
          IsJT: false,
        },
      });
    },
    saveImg: function () {
      var that = this;
      that.$.loading(),
        that.$.downloadFile({
          url: this.PageQRCodeInfo.Path,
          success: function (t) {
            that.$.hideloading(),
              that.$.saveImageToPhotosAlbum({
                filePath: t.tempFilePath,
                success: function () {
                  that.setData({
                    PageQRCodeInfo: {
                      Path: "",
                      IsShare: false,
                      IsShareBox: false,
                      IsJT: false,
                    },
                  }),
                    that.$.alert("保存图片成功！"),
                    that.$.xsr1(
                      that.$.makeUrl(orderapi.ShareCount, {
                        sponsorId: this.userInfo.Id,
                        audienceType: 3,
                        audienceId: 0,
                        ContentType: 22,
                        contentId: that.ActivityGroupId,
                      })
                    );
                },
                fail: function (e) {
                  that.$.hideloading();
                  that.$.alert("保存图片失败！");
                },
              });
          },
          fail: function (e) {
            that.$.hideloading();
          },
        });
    },
    showCodeImg: function () {
      let that = this;
      that.$.previewImage({
        current: this.PageQRCodeInfo.Path,
        urls: [this.PageQRCodeInfo.Path],
      });
    },
    IsShowRPK: function () {
      var e = this;
      e.showRPK
        ? setTimeout(function () {
            e.setData({
              showRPK: false,
            });
          }, 250)
        : e.setData({
            showRPK: true,
          });
    },
    previewProductImg: function (e) {
      var that = this;
      var i = e.target.dataset.src;
      let n = [];

      n.push(i);
      //console.info(i);
      //console.info(n);
      that.$.previewImage({
        current: i,
        urls: n,
      });
    },

    gotomap: function (e) {
      var that = this;

      that.$.openLocation({
        latitude: parseFloat(e.currentTarget.dataset.lat),
        longitude: parseFloat(e.currentTarget.dataset.lng),
        name: e.currentTarget.dataset.name,
        address: e.currentTarget.dataset.address,
        scale: 28,
      });
    },
  },
};
</script>


<style lang="scss">
@import "../../styles/_variables";

.page-order-detail-container {
  .uni-navbar {
    height: 44px;
  }

  .map-block {
    height: 330px;
    overflow: hidden;
    border-radius: 30px;
    border-radius: 12px;
  }

  .m-panel-access {
    margin: 0 8px;

    .m-panel-access-title {
      margin: 16px 14px 0;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .shop-name {
    display: flex;
    margin: 8px 6px;
    padding: 0px 10px;
    font-size: 14px;
    border-radius: 10px;
    background: #fafafa;
  }

  .schedule-block {
    height: 30px;
    margin: 20px 0;

    .schedule-block-list {
      position: relative;
      margin: 10px 8px;
      width: 94%;
      height: 20px;
      background: #ededed;

      &::before {
        position: absolute;
        content: "";
        width: 50%;
        height: 100%;
        background: #f9dd49;
      }

      .iconfontAili {
        background: #ededed;
        border-radius: 50%;
        top: -8px;
        width: 38px;
        height: 38px;
        position: absolute;
        text-align: center;
        line-height: 38px;
        font-size: 22px;
        color: #a3a3a3;
      }

      .icon-1 {
        left: -4px;
        font-size: 18px;
      }

      .icon-2 {
        left: 30%;
      }

      .icon-3 {
        left: 63%;
      }

      .icon-4 {
        left: 94%;
      }

      .satisfy {
        font-weight: bold;
        color: #000;
        background: #f7dd4a;
      }
    }

    .schedule-block-list-70 {
      &::before {
        position: absolute;
        content: "";
        width: 80%;
        height: 100%;
        background: #f9dd49;
      }
    }
  }

  .order-block {
    padding: 6px 12px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    .order-name {
      font-size: 30px;
      font-weight: bold;
    }

    .order-tips {
      font-size: 14px;
      color: #848587;
      line-height: 20px;
      height: 20px;
      padding: 4px;
    }

    .order-btn-block {
      display: flex;
      justify-content: flex-end;
      padding: 14px 6px;

      .order-btn {
        padding: 8px 17px;
        border: 1px solid #efefef;
        border-radius: 23px;
        font-size: 14px;
        text-align: right;
        margin-right: 8px;
      }

      .order-btn-zailai {
        margin-right: 0;
      }

      .order-btn-disabled {
        background: #ccc;
      }

      .order-bint-play {
        background: #3a79f8;
        color: #fff;
      }
    }
  }

  .left-block {
    display: flex;
    align-items: center;
  }

  .m-product-info {
    flex: 1;
    padding: 5px 10px 10px 5px;
    flex-flow: row;
  }

  /* #ifdef MP-WEIXIN */
  .move-area {
    margin-top: 44px;
  }
  /* #endif */

  .nav-title {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .coupon-btn {
    padding: 0px 15px;
    border: 1px solid #efefef;
    border-radius: 23px;
    font-size: 14px;
    text-align: right;
  }

  .order-info-block {
    margin: 10px 8px;
    padding: 10px 14px;

    .title {
      font-size: 18px;
      font-weight: bold;
      padding: 10px 0;
      margin-bottom: 10px;
    }

    .order-info-item {
      display: flex;
      margin-bottom: 20px;
      color: #424242;

      .order-info-item-left {
        margin-right: 10px;
        min-width: 64px;
      }

      .order-info-address {
        display: flex;
        flex-flow: column;
      }
    }
  }
}

.m-cells {
  font-size: 28rpx;
  border-radius: 9px;
}

.link_kfu {
  position: relative;
  text-align: center;
  background-color: #fff;
  margin-top: 20rpx;
  height: 80rpx;
  line-height: 80rpx;

  .kfu_txt {
    margin-left: 20rpx;
  }
}

.m-order-typetxt {
  color: $default-skin-bg;
  font-size: 28rpx;

  text {
    font-size: 24rpx;
  }
}

.m-total-price {
  text {
    font-size: 24rpx;
  }
}

.m-addres-info {
  padding: 20rpx 0;
  background-color: white;
  overflow: hidden;
  position: relative;
  margin-top: 20rpx;
}

.m-ad-name {
  display: -webkit-box;
  position: relative;
  margin-left: 28rpx;
  -webkit-box-flex: 1;
  height: 20px;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
}

.m-ad-name text {
  margin: 0 20rpx;
}

.m-ad-name::after {
  content: "\e7e0";
  position: absolute;
  left: -25rpx;
  width: 30rpx;
  height: 30rpx;
  font-family: "iconfont" !important;
  text-align: center;
  line-height: 35rpx;
  font-size: 60rpx;
  background-size: cover;
  top: 50%;
  margin-top: -14rpx;
}

.m-ad-address {
  width: 650rpx;
  margin-left: 8rpx;
  display: -webkit-box;
  -webkit-box-flex: 1;
  line-height: 40rpx;
  font-weight: 400;
  font-size: 12px;
  position: relative;
  padding-left: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #888;
}

.m-product-all {
  margin-top: 20rpx;
}

.total-info {
  margin: 10px 8px;
}

.m-panel-hd::after {
  border: none;
}

.m-total-info {
  padding: 10rpx;
  font-size: 24rpx;
  color: #000;
}

.m-total-info label {
  font-size: 32rpx;
  color: $default-skin-bg;
}

.m-total-time {
  color: #888;
}

.m-footer-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  text-align: right;
  box-sizing: border-box;
  padding: 20rpx;

  &:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

.u-link-btn {
  vertical-align: middle;
  display: inline-block;
  line-height: 40rpx;
  font-size: 24rpx;
  padding: 4px 12px;
  border-radius: 16px;
}

.m-product-price {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  color: #000;
  text-align: center;
  min-width: 80px;

  .m-product-price-text {
  }
}

.m-product-price-amount-block {
  font-size: 12px;
  text-align: right;

  .m-product-price-amount {
    font-size: 18px;
  }
}

.m-product-price text {
  font-size: 18px;
  color: #000;
  background-color: #fff;

  &.mcs {
    font-size: 12px;
  }
}

.m-product-price label {
  &.mcs {
    font-size: 12px;
  }
}

.massage {
  width: 100%;
  height: 100rpx;
  display: flex;
  //border-bottom: 2rpx solid #d9d9d9;
  background: #fff;
  font-size: 28rpx;
  color: #000;
}

.massage-name {
  margin-left: 30rpx;
}

.massage-tel {
  margin-left: 40rpx;
}

.code1 {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  align-content: space-between;
}

.code image {
  width: 50%;
}

.code text {
  font-size: 24rpx;
  color: #717171;
}

.move-area {
  /*
  position: absolute;
  min-height: 100%;
  width: 100%;
  */
}

.move-img {
  height: 126rpx;
  width: 100rpx;
  z-index: 5;
  margin-top: 70%;
  margin-left: 650rpx;
}

.move-img image {
  height: 126rpx;
  width: 100rpx;
}

.share-rpk {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 5;
}

.share-rpkbox {
  width: 640rpx;
  height: 698rpx;
  background-color: red;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -320rpx;
  margin-top: -349rpx;
}

.send-rpk {
  width: 222rpx;
  height: 70rpx;
  position: absolute;
  left: 50%;
  margin-left: -100rpx;
  top: 50%;
  margin-top: 140rpx;
}

.close-rpk {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  left: 50%;
  margin-left: -22rpx;
  bottom: 25rpx;
}

.shareCodeImg {
  height: 800rpx;
}

.m-product-name {
  font-size: 24rpx;
}

.m-product-img {
  width: 80px;
  height: 80px;

  image {
    width: 80px;
    height: 80px;
    padding: 10rpx;
  }
}

.m-cell-access .m-cell-ft:after {
  margin-top: -8rpx;
}

.link_kfu contact-button {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.m-panel-hd {
  padding: 20rpx 30rpx 0rpx;
  display: flex;
  line-height: 60rpx;

  .m-cell {
    padding: 0px;
  }

  .m-cell-access .m-cell-ft:after {
    margin-top: -3px;
    margin-left: 6rpx;
  }
}
</style>