<template>
  <view class="xd-store" v-if="info !== null">
    <view class="xd-store__header">
      <view class="xd-store__header-bg" :style="{background: styleMainColor}"></view>
      <view class="xd-store__header-body">
        <view class="xd-store__header-body-status">
          <slot></slot>
        </view>
        <!--地址-->
        <view class="xd-store__address" v-if="info['address']">
          <view class="xd-store__address-icon">
            <xd-font-icon size="60" icon="icondiqu" :color="styleMainColor" ></xd-font-icon>
          </view>
          <view class="axd-store__address-content">
            <view>
              <text>{{info['address']['receipt_username']}}</text>
              <text>{{info['address']['receipt_phone']}}</text>
            </view>
            <view>{{info['address']['receipt_address']}}</view>
          </view>
        </view>
        <!--地址-->
        <!--自提门店名称-->
        <slot name="shop"></slot>
        <!--自提门店名称-->
        <!--子订单号-->
        <view class="xd-store__subOrder" v-if="isSubOrder && info['subOrderList'] && !isEmpty(info['subOrderList'])">
          <view
            class="xd-store__subOrder-item"
            v-for="(subOrder,index) in info['subOrderList']"
            :key="index"
          >
            <view class="xd-store__subOrder-item-title">
              <view>子订单：{{subOrder.order_id}}</view>
              <view>{{subOrder.status_name}}</view>
            </view>
            <view class="xd-store__subOrder-item-content">
              <view
                class="xd-store__subOrder-item-content-list"
                v-for="(list,ide) in subOrder['product_data']"
                :key="ide"
                v-if="ide < 2 || (ide >=2 && subOrder.more)"
                @click="onProductDetail(subOrder,list)"
              >
                <view :style="{width: productWidth + 'rpx', maxHeight: productHeight + 'rpx'}">
                  <image
                    :style="{
                      maxWidth: (productWidth - 10) + 'rpx',
                      maxHeight: (productHeight - 10)+ 'rpx'
                    }"
                    :src="list.thumb"
                    mode="widthFix"></image>
                </view>
                <view>{{list.product_name}}</view>
                <view>
                  <view>
                    <xd-unit
                      font-weight="normal"
                      :font-size="26"
                      :price="list.price"
                      :icon-size=".35"
                    ></xd-unit>
                  </view>
                  <view>x{{list.ct}}</view>
                </view>
              </view>
            </view>
            <view
              class="xd-store__subOrder-item-more"
              @click="subOrder.more = !subOrder.more"
            >
              <view
                v-if="subOrder.product_data.length > 1"
                :style="{
                  marginTop: !subOrder.more? '-4rpx': '-20rpx'
                }"
              >
                <xd-font-icon
                  color="#bbb"
                  :size="26"
                  :icon="subOrder.more ? 'iconshuangjiantoushang': 'iconxiashuangjiantou'"
                ></xd-font-icon>
              </view>
            </view>
            <view
              class="xd-store__subOrder-item-footer"
              v-if="subOrder.express_data && subOrder.express_data.length > 0"
            >
              <view class="xd-store__subOrder-item-footer-btn">
                <xd-button type="default" size="small" @click="handleExpress(subOrder.express_data,subOrder)">查看物流</xd-button>
              </view>
            </view>
            <view class="xd-store__subOrder-item-shop" v-if="subOrder.shop_data">
              <view>
                <view>自提门店：</view>
                <view>{{subOrder.shop_data.name}}</view>
              </view>
              <view>
                <view>门店地址：</view>
                <view>{{subOrder.shop_data.address}}</view>
              </view>
            </view>
          </view>
        </view>
        <!--子订单号-->
        <!--快递-->
        <view class="xd-store__express" v-if="isSubOrder && info['express'] && !isEmpty(info['express'])">
          <view @click="handleExpress(exItem)" v-for="(exItem,exIndex) in info['express']" :key="exItem['number']">
            <view>
              <xd-font-icon icon="icondistribution" size="45" :color="styleMainColor"></xd-font-icon>
            </view>
            <view>
              <view>
                <view>{{exItem.name}}</view>
                <view>({{exItem.number}})</view>
              </view>
              <view>{{exItem.comment}}</view>
            </view>
            <view>
              <xd-font-icon icon="iconjiantou" size="22"></xd-font-icon>
            </view>
          </view>
        </view>
        <!--快递-->
        <!--自提配送-->
        <view class="xd-store__self" v-if="info['self']">
          <view>
            <xd-font-icon size="70" icon="iconmendianziqu" :color="styleMainColor"></xd-font-icon>
          </view>
          <view>
            <view>
              <text>{{info['self']['receipt_username']}}</text>
              <text>{{info['self']['receipt_phone']}}</text>
            </view>
          </view>
        </view>
        <!--自提配送-->
        <!--电子码(号码+密码)-->
        <template v-if="info['numberAndPassword'] && !isEmpty(info['numberAndPassword'])">
          <view
            class="xd-store__numberAndPassword"
            v-for="(nap,nindex) in info['numberAndPassword']"
            :key="nindex"
          >
            <view v-for="(item,codeIndex) in nap" :key="codeIndex">
              <view>
                <view>{{item['label']}}</view>
                <view>{{item['value']}}</view>
              </view>
              <view>
                <xd-button @click="copy(item['value'])" btn-type="primary" size="small">复制</xd-button>
              </view>
            </view>
          </view>
        </template>
        <!--电子码(号码+密码)-->
        <!--电子码（密码)-->
        <view class="xd-store__code" v-if="info['code'] && !isEmpty(info['code'])">
          <view v-for="(item,codeIndex) in info['code']" :key="codeIndex">
            <view>
              <view>{{item['label']}}</view>
              <view>{{item['value']}}</view>
            </view>
            <view>
              <xd-button @click="copy(item['value'])" btn-type="primary" size="small">复制</xd-button>
            </view>
          </view>
        </view>
        <!--电子码（密码)-->
        <!--二维码-->
        <view
          class="xd-store__codeimg"
          v-if="info['twocode'] && !isEmpty(info['twocode'])"
        >
          <view v-for="(item,codeIndex) in info['twocode']" :key="codeIndex">
            <image class="twocode" :src="item['value']"></image>
            <view>{{item['label']}}</view>
          </view>
        </view>
        <!--二维码-->
        <!--条形码-->
        <view
          class="xd-store__codeimg"
          v-if="info['barcode']  && !isEmpty(info['barcode'])"
        >
          <view v-for="(item,codeIndex) in info['barcode']" :key="codeIndex">
            <image mode="aspectFit" class="barcode" :src="item['value']"></image>
            <view>{{item['label']}}</view>
          </view>
        </view>
        <!--条形码-->
      </view>
      <view class="xd-store__sendinfo" v-if="info['send'] && info['send']['label']">
        <view>{{info['send']['label']}}</view>
        <view :style="{color: styleMainColor}">{{info['send']['value']}}</view>
      </view>
      <!--商品-->
      <view class="xd-store__products" v-if="isSubOrder && info['products'] && !isEmpty(info['products'])">
        <view class="xd-store__products-title">
          <view class="xd-store__products-title-left" v-if="info['shop_logo']">
            <image :src="info['shop_logo']"></image>
          </view>
          <view class="xd-store__products-title-right">
            <view @click="handleTitleClick(info)">
              <view v-if="info['title']">{{info['title']}}</view>
              <view v-if="info['titleIcon']">
                <xd-font-icon size="20" icon="iconjiantou"></xd-font-icon>
              </view>
            </view>
            <view
              class="xd-store__products-address"
              v-if="info['shop_address']"
            >{{info['shop_address']}}
            </view>
          </view>
          <view
            class="xd-store__products-line"
            :style="{background: styleMainColor}"
            v-if="info['title'] || info['titleIcon'] || info['shop_address']"
          ></view>
        </view>
        <view
          class="xd-store__products-item"
          v-for="(item,index) in info['products']"
          :key="index"
          @click="onProductDetail(info,item)"
        >
          <view class="xd-store__products-item-image">
            <xd-image :width="productWidth" :height="productHeight" :image="item['thumb']"></xd-image>
          </view>
          <view class="xd-store__products-item-body" :style="{minHeight: productHeight + 'rpx'}">
            <view>{{item['product_name']}}</view>
            <view>{{item['product_sku_text']}}</view>
            <view class="app-my-order__products-item-body-price">
              <view>
                <xd-unit
                  v-if="item['price']"
                  :price="item['price']"
                  font-weight="normal"
                  :iocn-size="0.3"
                  :font-size="24"
                ></xd-unit>
              </view>
              <view>x {{item['num']}}</view>
            </view>
          </view>
        </view>
      </view>
      <!--商品-->
      <!--自定义内容显示模块-->
      <view class="xd-store__custom" v-if="info['makeInfo'] && info['makeInfo'].length > 0">
        <view class="xd-store__custom-title">{{info['makeInfoTitle']}}</view>
        <view class="xd-store__custom-content">
          <view class="xd-store__custom-item" v-for="(makeItem, makeIndex) in info['makeInfo']" :key="makeIndex">
            <view>{{makeItem.label}}</view>
            <view>{{makeItem.value}}</view>
          </view>
        </view>

      </view>
      <!--自定义内容显示模块 结束-->
      <!--支付信息-->
      <view class="xd-store__price"
        v-if="info['card'] ||
        info['price'] ||
        info['total_price'] ||
        info['post_price'] ||
        info['pay_price']
      ">
        <!--卡消费-->
        <view class="xd-store__price-card" v-if="info['card'] && info['card'].length > 0">
          <view class="xd-store__price-card-title">
            <view>使用卡列表</view>
            <view>
              <xd-unit
                v-if="info['card_price']"
                :price="info['card_price']"
                color="#333"
                :font-size="36"
                :iocn-size=".25"
              ></xd-unit>
            </view>
          </view>
          <view>
            <view class="xd-store__price-card-item" v-for="(item,cardIndex) in info['card']" :key="cardIndex">
              <view>{{item['card_type_name']}}</view>
              <view>
                <view>{{item['card_number']}}</view>
                <view>
                  <xd-unit
                    :is-show-icon="false"
                    :price="item['point']"
                    :font-size="25"
                    :unit="null"
                  ></xd-unit>
                </view>
              </view>
            </view>
          </view>
          <view class="xd-store__price-line" :style="{background: styleMainColor}"></view>
        </view>
        <!--卡消费-->
        <!--消费数据-->
        <view class="xd-store__price-label">
          <view v-if="info['price'] !== undefined">
            <view>商品总额</view>
            <view>
              <xd-unit :price="info['price']" :font-size="26"></xd-unit>
            </view>
          </view>
          <view v-if="info['post_price'] !== undefined">
            <view>配送费</view>
            <view>
              <xd-unit :price="info['post_price']" :font-size="26"></xd-unit>
            </view>
          </view>
          <view v-if="info['total_price'] !== undefined">
            <view>合计</view>
            <view>
              <xd-unit :price="info['total_price']" :font-size="32"></xd-unit>
            </view>
          </view>
          <view v-if="info['pay_price'] !== undefined">
            <view>实付款</view>
            <view>
              <xd-unit :is-show-icon="false" :price="info['pay_price']" :font-size="32" :unit="info['pay_unit']"></xd-unit>
            </view>
          </view>
        </view>
        <!--消费数据 结束-->
      </view>
      <!--支付信息-->
      <!--自定义金额显示-->
      <view class="xd-store__price-show" v-if="info['orderPrice']">
        <view
          v-for="(oPrice,oIndex) in info['orderPrice']"
          :key="oIndex"
          :style="{
            justifyContent:  oPrice.algin,
          }"
        >
          <view v-if="oPrice['type'] === 'line'" class="xd-store__price-show-line"></view>
          <template v-else>
            <view
              :style="{
              fontSize: oPrice['size'] + 'rpx',
              color:  oPrice['color'] || '#333'
            }"
            >{{oPrice['label']}}
            </view>
            <view>
              <xd-unit
                v-if="oPrice['unit']"
                :price="oPrice['value']"
                :font-size="oPrice['size'] || 26"
                :is-show-icon="false"
                :icon-size="0.35*Number(oPrice['size'])/32"
                :unit="oPrice['unit']"
              ></xd-unit>
              <xd-unit
                v-else
                :price="oPrice['value']"
                :font-size="oPrice['size'] || 26"
                :is-show-icon="oPrice['isShowIcon'] ===undefined? true:oPrice['isShowIcon']"
                :icon-size="0.35*Number(oPrice['size'])/32"
              ></xd-unit>
            </view>
          </template>
        </view>
      </view>
      <!--自定义金额显示 结束-->
      <!--支持门店-->
      <slot name="supportshop"></slot>
      <!--支持门店-->
      <!--订单信息-->
      <view class="xd-store__order">
        <view
          class="xd-store__order-item"
          v-for="(order,orderInde) in info['orderInfo']"
          :key="orderInde"
        >
          <view>{{order['label']}}</view>
          <view v-if="order['unit'] === true">
            <xd-unit
              :price="order['value']"
              font-weight="normal"
              :iocn-size="0.3"
              :font-size="26"
            ></xd-unit>
          </view>
          <view v-else>{{order['value']}}</view>
        </view>
      </view>
      <!--订单信息-->
      <!--插槽内容-->
      <slot name="footer"></slot>
      <!--插槽内容-->
      <!--订单操作按钮-->
      <template v-if="info['btn'] && !isEmpty(info.btn)">
        <view class="xd-store__btn-block"></view>
        <view
          class="xd-store__btn"
          :class="{
            center: info['btn'].length === 1,
            right: info['btn'].length > 1
          }">
          <view v-for="(btn,btnIndex) in info['btn']" :key="btnIndex">
            <xd-button
              @click="handleBtnClick(info,btn)"
              :btn-type="btn['type']"
              size="mini"
              :radius="btn['radius']"
            >{{btn['label']}}
            </xd-button>
          </view>
        </view>
      </template>
      <!--订单操作按钮-->
    </view>
  </view>
</template>

<script>

  /**
   * XdStoreOrderDetail 我的订单详情
   * @description 我的订单详情
   * @property {Object} detail 订单详情数据接口查看测试数据
   *
   * @event {Function} onBtn {item, btn} 点击取消按钮与去付款事件
   * @event {Function} onProductDetail {order, btn} 点击商品事件
   * @event {Function} onExpress {express} 点击快递列表事件
   */

  import XdUnit from "@/components/XdUnit/XdUnit";
  import xdImage from "@/components/XdImage/XdImage";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import XdButton from "@/components/XdButton/XdButton";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';


  export default {
    name: "XdStoreOrderDetail",
    components: {
      XdButton,
      XdFontIcon,
      xdImage,
      XdUnit
    },
    props: {
      detail: {
        type: Object | null,
        required: true
      },

      productWidth: {
        type: Number,
        default: 160
      },
      productHeight: {
        type: Number,
        default: 160
      }
    },

    computed:{
      isSubOrder(){
        let flag = false;
        if(this.info !== null
          && this.info['subOrderList']
          && this.info['subOrderList'].length > 0) {
          flag = true
        }
        return flag
      }
    },


    data(){
      return {
        info: null,

        //测试数据
        testData:{
          title: '廊坊美年大健康体检中心(廊坊分院)', //店铺名称 （必填）
          shop_address: '北京北京石景山区八大处科技园区小区AQ1-1-2000', //是否显示店铺地址
          shop_logo: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg', ////是否显示店铺logo

          //电子码 （密码）
          code: [
            {label: "兑换码：", value: "jfbcake.oss-cn-beijing.aliyuncs.comliyuncs.com"},
            {label: "兑换码：", value: "45122"}
          ],

          //电子码 （号码 + 密码）
          numberAndPassword: [
            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}],
            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}]
          ],

          //条形码
          barcode: [
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=&p=21337"
            },
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=cardcardcardcard0001&p=21337"
            }
          ],

          //二维码
          twocode: [
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
            },
            {
              label: "券号:cardcardcardcard0001 密码：21337",
              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
            }
          ],

          //地址管理
          address: {
            receipt_address: "北京北京石景山区八大处科技园区小区AQ1-1-2000",
            receipt_phone: "15110208397",
            receipt_username: "高世勇",
          },

          //订单信息
          orderInfo: [
            {label: '订单号：', value: '12588744664462252'},
            {label: '下单时间：', value: '2020-08-15 10:25:56'},
            {label: '确认时间：', value: '2020-08-15 12:00:00'},
            {label: '支付时间：', value: ' 2020-08-15 12:00:00'},
            {label: '发货时间：', value: '2020-08-15 12:00:00'},
            {label: '订单备注：', value: '通过记录自己从纽约出发到洛杉矶，再飞到中国的经历'},
          ],

          //订单消费数据
          price: 630, //商品总额
          total_price: 630, //商品总额
          post_price: 0, //配送费
          pay_price: 0, //实付款

          //订单消费金额(algin:space-between,flex-start, flex-end)
          /**
           * @description 订单消费金额
           * @property orderPrice.algin 对齐方式： space-between（两端） flex-start（左对齐） flex-end（右对齐）
           * @property orderPrice.size 字体大小 默认: 26rpx
           * @property orderPrice.color 字体颜色 默认：#999
           * @property orderPrice.unit 启用自定义单位 默认：无
           * @property  orderPrice.type 显示线
           */
          orderPrice: [
            {label: '商品总额', value: 300, algin: 'space-between', size: 26},
            {label: '消费卡', value: 300 , algin: 'space-between', size: 26},
            {label: '微信支付：', value: 30, unit:"元", algin: 'space-between', size: 26},
            {label: '快递运费：', value: 0, algin: 'flex-end', size: 26},
            {type: 'line'}, //显示线
            {label: '实付款：', value: 300, algin: 'flex-end', size: 32},
            {label: '合计：', value: 300, algin: 'flex-end', size: 32},
          ],

          /**
           * @description 订单自定义信息显示模块
           */
          makeInfoTitle: '预约信息',
          makeInfo:[
            {label: '姓名：', value: '张三'},
            {label: '日期：', value: '2020-08-15'},
            {label: '证件类型：', value: '身份证'},
            {label: '证件号码：', value: '1310********7844'},
            {label: '婚姻状态：', value: '未婚'},
            {label: '手机号码：', value: '131*******452'},
            {label: '订单备注：', value: '通过记录自己从纽约出发到洛杉矶，再飞到中国的经历'},
          ],

          //显示操作按钮（选填）（不显示按钮btn为空数组）
          btn: [
            {'label': '取消订单', value: 1, type: 'info', radius: '12rpx'},
            {'label': '去付款', value: 2, type: 'primary', radius: '12rpx'},
          ],



          /**子订单模块 与 商品，快递列表 二选一******/
          //商品列表
          products: [
            {
              id: 161078,
              num: 3, //产品数量
              product_id: 423457, //商品ID （必填）
              product_name: "金龙鱼 醇香菜籽油 5L*4桶", //产品名称 （必填）
              product_uuid: '5f71e590-ee83-11ea-b9ba-debcd2503074', //产品uuid （选填）
              product_sku: "0", //产品型号ID （选填）
              product_sku_text: "", //产品型号名称 （选填）
              price: 312, //产品价格 （必填）
              thumb: "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg?x-oss-process=style/400_400" //产品缩略图 （必填）
            }
          ],


          //快递列表
          express: [
            {comment: "不在数据列表中的数据可以自行扩张", company: 6, name: "韵达", number: "JT51210012120"},
          ],

          /**
           * @description 订单菜单信息
           */
          subOrderList:[
            {
              "status": "3000",
              "status_name": "支付完成",
              "total_price": "100.00",
              "order_id": "m458170654005029364",
              "placed_time": "2022-03-15 19:28:09",
              "more": false,
              "product_data": [
                {
                  "product_id": 0,
                  "product_name": "六神花露水",
                  "ct": 1,
                  "thumb": "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg",
                  "ext": "",
                  "price": "25.00",
                },
                {
                  "product_id": 0,
                  "product_name": "六神花露水",
                  "ct": 1,
                  "thumb": "http://pic.lvmama.com//uploads/pc/place2/2017-05-16/016f9813-f456-4c9d-9d63-0ceb5970187d.jpg",
                  "ext": "",
                  "price": "25.00",
                }, {
                  "product_id": 0,
                  "product_name": "六神花露水",
                  "ct": 1,
                  "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                  "ext": "",
                  "price": "25.00",
                },
                {
                  "product_id": 0,
                  "product_name": "六神花露水",
                  "ct": 1,
                  "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
                  "ext": "",
                  "price": "25.00",
                },
              ],
              "express_data": [
                {name: '百世快递', number: 'BS1212212'},
                {name: '顺丰快递', number: 'FS97878787'},
              ],
              "shop_data": {
                "address": '河北省廊坊市三河市鑫乐汇一层',
                "name": '大牌烘焙一店',
              }
            }
          ],
          /**子订单模块 与 商品，快递列表 二选一******/

          //配送模块
          send: {
            label: '专人配送/配送时间',
            value: '2020-08-16 11:30:00'
          },

          //消费卡列表
          card: [
            {
              card_number: "101070100032692",
              card_type_name: "聚福宝福卡测试",
              point: "45"
            }
          ],
        },
  
        styleMainColor: '', //插件主题风格样式
      }
    },
  
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      this.init();
    },



    methods:{
      init(){
        let info = null;
        if(this.detail === null) {
          info = this.$xdUniHelper.cloneDeep(this.testData);
        }
        else if(this.$xdUniHelper.checkVarType(this.detail) === 'object') {
          info = this.$xdUniHelper.cloneDeep(this.detail);
        }

        if(info && info.subOrderList && info.subOrderList.length > 0) {
          info.subOrderList = info.subOrderList.map(item=>{
            return {...item, more: false}
          })
        }
        this.info = info
      },

      /***
       * @description 点击标题事件
       */
      handleTitleClick(item) {
        this.$emit('onTitle', item);
      },


      /**
       * @description 是否为空
       * @param data
       */
      isEmpty(data){
        return this.$xdUniHelper.isEmpty(data);
      },

      /**
       *@description 复制功能
       * @param  text
       */
      copy(text){
        // #ifdef H5
        this.$copyText(text).then(
          res => {
            uni.showToast({
              title: '复制成功'
            })
          }
        )
        // #endif
        // #ifndef H5
        uni.setClipboardData({
          data: text,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
        // #endif
      },

      /**
       * @description 点击按钮事件
       * @param order
       * @param btn
       */
      handleBtnClick(order, btn) {
        this.$emit('onBtn', {order, btn});
      },

      /**
       * @description 点击商品事件
       * @param order
       * @param product
       */
      onProductDetail(order, product) {
        this.$emit('onProductDetail', {order, product});
      },

      /**
       * @description 点击查看快递详情
       * @param express
       */
      handleExpress(express,item){
        this.$emit('onExpress', express,item);
      }
    }
  }
</script>

<style scoped lang="less">
  .nopadding {
    padding-bottom: 0!important;
    margin-bottom: 0!important;
  }

  .xd-store {
    &__header {
      position: relative;

      & > view {
        position: relative;
        z-index: 2;
      }

      &-body {
        padding: 0 unit(20, rpx);
        box-sizing: border-box;

        &-status {
          height: unit(120, rpx);
        }


        &-express {
          margin-top: unit(20, rpx);
          background: #ffffff;
          padding: unit(20, rpx) unit(34, rpx);
          color: #333;
          font-size: @xd-font-size-base;

          & > view {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

        }
      }

      &-bg {
        position: absolute !important;
        height: unit(200, rpx);
        left: 0;
        top: 0;
        right: 0;
        z-index: 1;
        border-radius: 0 0 unit(20, rpx) unit(20, rpx);

      }
    }

    &__subOrder {
      margin-top: unit(20,rpx);

      &-item {
        .uni-box-radius();
        background: #fff;
        padding: unit(20, rpx) unit(20, rpx) unit(10, rpx);
        margin-bottom: unit(20, rpx);

        &:last-child {
          margin-bottom: unit(0, rpx);
        }

        &-title {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          border-bottom: 1px solid #e5e5e5;
          line-height: unit(40,rpx);
          padding-bottom: unit(15,rpx);
          margin-bottom: unit(15,rpx);

          & > view:first-child {
            font-size: @xd-font-size-base + 4;
          }

          & > view:last-child {
            flex-shrink: 0;
            margin-left: unit(15,rpx);
            font-size: @xd-font-size-base;
            color: #666;
          }
        }

        &-content {
          &-list {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: unit(15,rpx);

            &:last-child {
              margin-bottom: unit(0, rpx);
            }

            & > view:first-child {
              display: flex;
              flex-shrink: 0;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              border:1px solid #efefef;
              padding: unit(5,rpx);
              overflow: hidden;

              & > image {
                max-width: unit(110,rpx);
              }
            }

            & > view:nth-child(2) {
              flex: 1;
              width: 0;
              font-size: @xd-font-size-base + 2;
              padding: 0 unit(15,rpx);
              color: #666;
            }

            & > view:last-child {
              flex-shrink: 0;
              min-width: unit(100,rpx);
              text-align: right;
              font-size: unit(26,rpx);
              color: #999;
            }
          }
        }

        &-more {
          height: unit(2,rpx);
          position: relative;
          margin: unit(15,rpx) 0 unit(15,rpx);
          background: #e5e5e5;
          display: flex;
          justify-content:center;
          align-items: flex-start;

          & > view {
            margin-top: unit(-4,rpx);
            background: #fff;
          }
        }

        &-footer {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-bottom: unit(10,rpx);
        }

        &-shop {
          & > view {
            font-size: @xd-font-size-base;
            &:first-child {
              color: #333;
            }
            &:last-child {
              padding-top: unit(10,rpx);
              color: #666;
            }

            display: flex;
            justify-content: flex-start;
            align-items: flex-start;

            & > view:first-child {
              flex-shrink: 0;
            }

            & > view:last-child {
              flex: 1;
              width: 0;

            }
          }
        }
      }
    }

    &__express {
      font-size: @xd-font-size-base;
      background: #fff;
      padding: 0;
      margin-top: unit(20, rpx);

      & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #efefef;
        padding: 0 unit(34, rpx);
        line-height: unit(40, rpx);

        &:last-child {
          border-bottom: 0;
        }

        & > view:first-child {
          width: unit(60, rpx);
          height: unit(60, rpx);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          margin-right: unit(34, rpx);
        }

        & > view:nth-child(2) {
          flex: 1;
          width: 0;
          padding: unit(20, rpx) 0;

          & > view:first-child {
            line-height: unit(40, rpx);
            font-size: @xd-font-size-lg;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;

            & > view:last-child {
              font-size: @xd-font-size-base;
              margin-left: unit(20, rpx);
            }
          }

          & > view:last-child {
            font-size: @xd-font-size-base;
            color: #999;
          }
        }

        & > view:last-child {
          flex-shrink: 0;
          margin-left: unit(34, rpx);
        }
      }
    }

    &__address {
      background: #ffffff;
      .uni-box-radius();
      padding: unit(20, rpx) unit(34, rpx);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #333;

      & > view:first-child {
        margin-right: unit(30, rpx);
      }

      & > view:last-child {
        & > view:first-child {
          font-size: @xd-font-size-lg;
          padding-bottom: unit(10, rpx);

          > text:last-child {
            font-size: @xd-font-size-base + 2;
            color: #999;
            margin-left: unit(10, rpx);
          }
        }

        & > view:last-child {
          font-size: @xd-font-size-base;
        }
      }
    }

    &__self {
      background: #ffffff;
      .uni-box-radius();
      padding: unit(20, rpx) unit(34, rpx);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #333;

      & > view:first-child {
        margin-right: unit(30, rpx);
      }

      & > view:last-child {
        & > view:first-child {
          font-size: @xd-font-size-lg;

          > text:last-child {
            font-size: @xd-font-size-base + 2;
            color: #999;
            margin-left: unit(10, rpx);
          }
        }

        & > view:last-child {
          font-size: @xd-font-size-base;
        }
      }
    }

    &__sendinfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: unit(20, rpx) unit(20,rpx) 0;
      .uni-box-radius();
      background: #fff;
      padding: unit(20, rpx);
      font-size: @xd-font-size-lg;
    }

    &__numberAndPassword {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;

      & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: unit(20, rpx);

        &:last-child {
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);
          font-size: @xd-font-size-lg - 2;

          &:hover {
            background: #ececec;
          }

          display: flex;
          justify-content: center;
          align-items: flex-start;

          & > view:first-child {
            flex-shrink: 0;
          }

          & > view:last-child {
            flex: 1;
            width: 0;
          }
        }

        & > view:last-child {
          width: unit(120, rpx);
        }
      }
    }

    &__code {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;

      & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: unit(20, rpx);

        &:last-child {
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);

          &:hover {
            background: #ececec;
          }
          display: flex;
          justify-content: center;
          align-items: flex-start;

          & > view:first-child {
            flex-shrink: 0;
          }

          & >view:last-child {
            flex: 1;
            width: 0;
          }
        }

        & > view:last-child {
          width: unit(120, rpx);
        }
      }

      & .twocode {
        width: unit(160, rpx);
        height: unit(160, rpx);
      }

      & .barcode {
        width: unit(320, rpx);
        height: unit(160, rpx);
      }
    }

    &__codeimg {
      .uni-box-radius();
      margin-top: unit(20, rpx);
      background: #fff;
      font-size: @xd-font-size-base;
      padding: unit(20, rpx);
      box-sizing: border-box;

      & > view {
        text-align: center;
        padding-bottom: unit(10,rpx);
        margin-bottom: unit(10,rpx);
        border-bottom: 1px solid #efefef;
        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }

        & > view:first-child {
          flex: 1;
          .uni-break-word();
          margin-right: unit(20, rpx);
          background: #f8f8f8;
          padding: unit(10, rpx);
          border-radius: unit(15, rpx);

          &:hover {
            background: #ececec;
          }
        }

        & > view:last-child {
          width: 100%;
          text-align: center;
          font-size: @xd-font-size-lg;
        }
      }

      .twocode {
        width: unit(300, rpx);
        height: unit(300, rpx);
      }

      .barcode {
        max-height: unit(160, rpx);
        max-width: 100%;
      }
    }

    &__order {
      .uni-box-radius();
      margin: unit(20, rpx);
      background: #fff;
      padding: unit(20, rpx);

      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: unit(10, rpx) 0;
        font-size: @xd-font-size-base;

        &:last-child {
          padding-bottom: 0;
        }

        &:first-child {
          padding-top: 0;
        }

        & > view:first-child {
          color: #666;
          min-width: unit(130, rpx);
          text-align: right;
        }

        & > view:last-child {
          flex: 1;
        }
      }

    }

    &__btn {
      position: fixed !important;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-top: 1px solid #ececec;
      height: unit(100, rpx);
      padding: 0 unit(34, rpx);
      .safe-area();


      &.center {
        display: flex;
        align-items: center;
        justify-content: center;
        & > view {
          margin-left: 0!important;
          width: 100%;
        }
      }

      &.right {
        justify-content: flex-end;
        display: flex;
        align-items: center;
      }


      & > view:first-child {

      }

      & > view:last-child {
        margin-left: unit(20, rpx);
      }

      &-block {
        height: unit(100, rpx);
      }
    }

    &__products {
      .uni-box-radius();
      margin: unit(20, rpx) unit(20, rpx) 0;
      background: #fff;
      padding: unit(20, rpx);

      &-line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        opacity: 0.2;
      }

      &-address {
        font-size: @xd-font-size-sm;
        color: #999;
      }

      &-title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding-bottom: unit(15, rpx);
        font-size: @xd-font-size-base + 2;


        &-left {
          width: unit(60,rpx);
          height: unit(60,rpx);
          flex-shrink: 0;
          margin-right: unit(20,rpx);
          border-radius: unit(10,rpx);
          overflow: hidden;

          &>image {
            width: 100%;
            height: 100%;
          }
        }

        &-right {
          flex: 1;
          width: 0;


          & > view:first-child {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            & > view:first-child {
              flex: 1;
            }
          }
        }
      }

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: unit(20, rpx) 0;
        border-bottom: 1px solid #ececec;

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
        }


        &-image {
          margin-right: unit(20, rpx);
        }

        &-body {
          flex: 1;
          position: relative;
          font-size: @xd-font-size-base + 2;

          & > view:first-child {
            .uni-max-cut(3, 120);
            line-height: unit(40,rpx);
          }

          & > view:nth-child(2) {
            color: #999;
            font-size: @xd-font-size-sm;
            margin-top: unit(10, rpx);
          }

          & > view:last-child {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & > view:last-child {
              font-size: @xd-font-size-base;
            }
          }

        }
      }
    }

    &__price {
      .uni-box-radius();
      margin: unit(20, rpx) unit(20, rpx) 0;
      padding: unit(20, rpx);
      background: #fff;

      &-line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        opacity: 0.2;
      }

      &-card {
        position: relative;
        padding-bottom: unit(20, rpx);
        margin-bottom: unit(20, rpx);
        box-sizing: border-box;


        &-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: @xd-font-size-lg;
        }

        &-item {
          font-size: @xd-font-size-sm;
          padding: unit(10, rpx) 0;
          border-bottom: 1px solid #eee;

          &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
          }

          & > view:first-child {
            color: #999;
          }

          & > view:last-child {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }

      &-label {
        & > view {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: @xd-font-size-base;
          color: #999;
          line-height: unit(50,rpx);

          &:nth-child(3),
          &:nth-child(4) {
            font-size: @xd-font-size-lg;
            color: #333;
          }

          &:nth-child(4) {
            padding-right: unit(8,rpx);
          }
        }
      }

      &-show {
        .uni-box-radius();
        padding: unit(20, rpx);
        background: #fff;
        margin: unit(20, rpx) unit(20, rpx) 0;

        &-line {
          background: #efefef;
          height: 1px;
          overflow: hidden;
          margin: unit(6,rpx) 0;
          width: 100%;
        }
        & > view {
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: unit(55, rpx);
        }
      }
    }

    &__custom {
      .uni-box-radius();
      margin: unit(20, rpx) unit(20, rpx) 0;
      padding: unit(20, rpx);
      background: #fff;

      &-title {
        font-size: @xd-font-size-lg;
        line-height: unit(40,rpx);
        padding-bottom: unit(15,rpx);
      }

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: @xd-font-size-base;
        border-bottom: 1px solid #efefef;
        line-height: unit(36,rpx);
        padding: unit(10,rpx) 0;

        &:last-child {
          border-bottom: 0;
        }

        & > view:first-child {
          width: unit(130,rpx);
          flex-shrink: 0;
          margin-right: unit(10,rpx);
          color: #666;
        }

        & > view:last-child {
          flex: 1;
          width: 0;
          color: #333;
        }
      }
    }
  }
</style>
