mall-web-ssr/pages/mobile/order/details.vue

<template>
  <div class="order-wrapper">
    <div class="order-details-wrap">
      <div class="order-details-top">
        <div class="orderNumber clearfix">
          <div class="pull-left">订单号：<span>{{orderList.orderid}}</span></div>
          <div class="pull-right">{{orderList.createtime || orderList.creattime | time}}</div>
        </div>
        <div class="orderStatus clearfix">
          <div class="clearfix">
            <span style="color: #666">订单状态：</span>
            <template v-if="vendorType === 'buyer'">
              <span v-if="orderList.status === 404">待收货</span>
              <span v-if="orderList.status === 404" style="color: #666">{{restTime()}}</span>
              <span v-else-if="orderList.status === 505 || orderList.status === 406 || orderList.status === 407 || orderList.status === 403 || orderList.status === 408">待卖家发货</span>
              <span v-else-if="orderList.status === 501 || orderList.status === 502 || orderList.status === 503 || orderList.status === 524">待付款</span>
              <span v-else-if="orderList.status === 602 || orderList.status === 603 || orderList.status === 315 || orderList.status === 604 || orderList.status === 605 || orderList.status === 606">已取消</span>
              <span v-else-if="orderList.status === 504">付款确认中</span>
              <span v-else-if="orderList.status === 520 || orderList.status === 405">交易已完成</span>
              <span v-else-if="orderList.status === 525">卖家请求取消</span>
            </template>
            <template v-else>
              <span v-if="orderList.status === 502 || orderList.status === 406">买家已付款</span>
              <span v-else-if="orderList.status === 602 || orderList.status === 603 || orderList.status === 315 || orderList.status === 604 || orderList.status === 605 || orderList.status === 606">订单已取消</span>
              <span v-else-if="orderList.status === 501 || orderList.status === 524 ">待买家付款</span>
              <span v-else-if="orderList.status === 404">请耐心等待买家确认收货</span>
              <span v-else-if="orderList.status === 405 || orderList.status === 514 || orderList.status === 503 || orderList.status === 506">待商城付款</span>
              <span v-else-if="orderList.status === 606">交易关闭</span>
              <span v-else-if="orderList.status === 520">交易完成</span>
              <span v-else-if="orderList.status === 525">卖家发起取消,待确认</span>
              <span v-else-if="orderList.status === 504">付款确认中</span>
            </template>
          </div>
        </div>
      </div>
      <ul class="order-list-wrap">
        <li class="clearfix">
          <div class="clearfix top-t-wrap">
            <div class="pull-left clearfix">
              <template v-if="vendorType !== 'buyer'">
                <div style="color: #666">买家：</div>
                <!--<span class="labelInfo_ForItem" v-if="item.storeid === '33069557578d44e69bd91ad12d28a8d4'">寄售</span>-->
                <div style="color: #333">{{orderList.buyentername || '(个人账户)'}}</div><div>&nbsp;|&nbsp;{{orderList.buyername}}</div>
              </template>
            </div>
            <div class="pull-right" v-if="vendorType !== 'buyer'">
              <div class="concat" @click="cancatAlert()">
                <i class="iconfont icon-kefu1"></i>联系买家
              </div>
            </div>
            <div class="pull-right" v-if="vendorType === 'buyer'">
              <div class="concat" @click="cancatAlert()">
                <i class="iconfont icon-kefu1"></i>联系卖家
              </div>
            </div>
          </div>
          <div class="list-wrap-content" @click="toproductdetails(details)" v-for="(details, index) in orderList.purchaseDetails" v-if="index < showItem">
            <div class="list-item clearfix">
              <div class="list-wrap-content-brand clearfix pull-left">
                <div class="name pull-left">品牌：</div>
                <div class="pull-left spec">{{details.brName || '-'}}</div>
              </div>
              <div class="pull-left list-wrap-content-brand clearfix">
                <div class="name pull-left">交期(天)：</div>
                <div class="pull-left spec noMargin" v-if="details.b2cMinDelivery !== details.b2cMaxDelivery">{{details.b2cMinDelivery}}-{{details.b2cMaxDelivery}}</div>
                <div class="pull-left spec noMargin" v-else>{{details.b2cMinDelivery}}</div>
              </div>
            </div>
            <div class="list-item clearfix">
              <div class="list-wrap-content-brand clearfix pull-left">
                <div class="name pull-left">物料名称(类目)：</div>
                <div class="pull-left spec" style="width: 1.79rem">{{details.kiName || '-'}}</div>
              </div>
              <div class="pull-left list-wrap-content-brand clearfix">
                <div class="name pull-left">单价：</div>
                <div class="pull-left spec noMargin">
                  <span v-if="orderList.currency === 'RMB'">¥</span><span v-else>$</span>{{details.taxUnitprice || details.taxUnitPrice}}
                </div>
              </div>
            </div>
            <div class="list-item clearfix">
              <div class="list-wrap-content-brand clearfix pull-left">
                <div class="name pull-left">型号：</div>
                <div class="pull-left spec">{{details.cmpCode || '-'}}</div>
              </div>
              <div class="pull-left list-wrap-content-brand clearfix">
                <div class="name pull-left">数量：</div>
                <div class="pull-left spec noMargin"><span></span>{{details.number}}</div>
              </div>
            </div>
            <div class="list-item clearfix">
              <div class="list-wrap-content-brand clearfix pull-left">
                <div class="name pull-left">规格：</div>
                <div class="pull-left spec">{{details.spec || '-'}}</div>
              </div>
              <div class="pull-left pri clearfix">
                <div class="name pull-left">小计：</div>
                <span v-if="orderList.currency === 'RMB'">¥</span><span v-else>$</span>{{details.ensurePrice}}
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="lookMorePro" @click="showItem = orderList.purchaseDetails.length" v-if="showItem === 3 && orderList.purchaseDetails && orderList.purchaseDetails.length > 3">查看剩余产品<img src="/images/mobile/user/icon-right.png"/></div>
      <!--<div class="clearfix top-w-wrap">-->
        <!--<div class="name pull-left">订单备注</div>-->
        <!--<div class="detailsinfo pull-left">{{orderList.purchaseRemark || '无'}}</div>-->
      <!--</div>-->
      <div class="order-details-priInfo">
        <div class="clearfix">
          <div class="justifyAlign">运费：</div>
          <span style="display: inline-block;min-width:2rem;text-align: left">
            <a v-if="orderList.currency === 'RMB'"  class="red" style="color:#f43938;">¥{{orderList.fare | priceFiter}}</a>
            <a class="red" style="color:#f43938;" v-else>${{orderList.fare | priceFiter}}</a>
          </span>
        </div>
        <div class="clearfix">
          <div class="justifyAlign">手续费：</div>
          <span style="display: inline-block;width:2rem;text-align: left">
            <a v-if="orderList.currency === 'RMB'"  class="red" style="color:#f43938;">¥0.00</a><a class="red" style="color:#f43938;" v-else>$0.00</a>
            <!--<a class="del" style="text-decoration: line-through;color: #999;font-size: 0.24rem;">(¥{{parseFloat(orderList.ensurePrice * 0.0045).toFixed(2)}})</a>-->
            <span class="jianmian">减免</span>
            <img src="/images/order/remem_icon.png" style="min-width:0.2rem;height:0.2rem" @click="showRemindStr = true" />
          </span>
        </div>
      </div>
      <div class="list-all-info clearfix">
        <!--共<span>{{orderList.batchQty}}</span>件商品&nbsp;&nbsp;合计：-->
        <div style="font-size: 0.27rem;" class="justifyAlign">合计：</div>
        <span class="pri" style="min-width: 2rem;text-align: left">
          <a v-if="orderList.currency === 'RMB'" class="red" style="color:#f43938;font-size: 0.32rem;">¥</a><a class="red" style="color:#f43938;font-size: 0.32rem;" v-else>$</a>{{orderList.ensurePrice}}
        </span>
        <!--<span class="lab">(含运费：<a class="red">¥</a><a class="red">{{orderList.fare | priceFiter}}</a>)</span>-->
        <!--<div>手续费：<a class="red">¥0.00</a><span class="del">(¥{{parseFloat(orderList.ensurePrice * 0.0045).toFixed(2)}})</span></div>-->
      </div>
      <div class="order-details-info">
        <!--<div class="clearfix">-->
          <!--<div class="name pull-left">配送方式</div>-->
          <!--<div class="pull-right" :style="!orderList.rule.ruleName ? {lineHeight: '0.88rem'} : ''">-->
            <!--<div :style="orderList.rule.ruleName ? {margin: '0.13rem 0 0.06rem 0'} : ''">{{orderList.sendType === 1301 ? '第三方配送' : (orderList.sendType === 1302 ? '卖家配送': '上门自提')}}</div>-->
            <!--<div class="smallfont">{{orderList.rule.ruleName ? orderList.rule.ruleName : ''}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="clearfix">
          <div class="name pull-left">收货地址</div>
          <div class="pull-right" style="text-align: left">
            <div class="name" style="margin: 0.22rem 0 0 0">{{orderList.area.area}} &nbsp;&nbsp;{{orderList.area.detailAddress}}</div>
          </div>
          <div style="clear:both"></div>
          <div style="padding-bottom: 0.1rem;" class="smallfont">
            <span class="tel" style="width: 50%;display: inline-block">收货人：<a style="color: #333">{{orderList.area.name}}</a></span>
            <span class="tel" style="width: 50%;display: inline-block">电话：<a style="color: #333">{{orderList.area.tel}}</a></span>
          </div>
        </div>
        <div class="clearfix">
          <div class="name pull-left">发票信息</div>
          <template v-if="orderList.invoicetype === 1205 || orderList.invoicetype === 1206">
            <div class="pull-right clearfix" @click="showinvoiceType = !showinvoiceType" style="line-height: 0.88rem;padding: 0;border-bottom: 0;max-width: 6rem;">
              <div class="overHiddenText" style="float:left">{{orderList.invoicetitle}}</div>
              <div class="smallfont" style="font-size: 0.24rem;float: left">
                  ({{orderList.invoicetype === 1205 ? '增值税(专用)发票': '增值税普通发票'}})
              </div>
              <img src="/images/mobile/user/icon-right.png" :class="showinvoiceType ? 'dropList' : '' " style="float: left"/>
            </div>
          </template>
          <template v-else>
            <div class="pull-right clearfix" style="line-height: 0.88rem;padding: 0;border-bottom: 0;">
              暂不开票
            </div>
          </template>

        </div>
        <div class="clearfix">
          <div class="name pull-left">支付方式</div>
          <div class="pull-right" style="line-height: 0.88rem">
            <!--{{orderList.paytype}}-->
            {{orderList.paytype === '1103' ? '线下付款' : '线下付款'}}
          </div>
        </div>
        <div class="clearfix">
          <template v-if="logisticsInfo.length === 0">
            <div class="name pull-left">物流信息</div>
            <div class="pull-right"  style="line-height: 0.88rem">暂无信息</div>
          </template>
          <template v-else>
            <div class="name" style="line-height: 0.88rem;">物流信息</div>
            <ul class="logistics_ul" v-if="logisticsInfo.length > 0" style="width: 100%">
              <li class="clearfix" v-for="(item, index) in logisticsInfo">
                <div class="pull-left" :class="index > 0 ? '' : 'marginL'">
                  <div class="logistics_icon" :class="index > 0 ? '' : 'active'">
                    <div class="red" v-if="index === 0"></div>
                  </div>
                </div>
                <div class="pull-right" :class="index > 0 ? '' : 'marginT'">
                  <div class="logistics_time">{{item.AcceptTime}}</div>
                  <div class="logistics_info">{{item.AcceptStation}}</div>
                </div>
              </li>
            </ul>
          </template>
        </div>
      </div>
      <div class="order-details-moreinfo clearfix">
        <div class="clearfix moreinfoList">
          <div class="pull-left">
            <div class="">创建时间：
              {{orderList.createtime || orderList.creattime | time2}}</div>
            <div class="" v-if="vendorType === 'buyer'">付款时间：
              <template v-if="getOverTiem(505) > 0">{{getOverTiem(505) | time2 }}</template>
              <template v-else>暂未付款</template>
            </div>
            <div class="" v-else>付款时间：
              <template v-if="getOverTiem(502) > 0 && vendorType !== 'buyer'">
                {{getOverTiem(502) | time2 }}
              </template>
              <template v-else-if="getOverTiem(505) > 0 && vendorType === 'buyer'">
                {{getOverTiem(505) | time2 }}
              </template>
              <template v-else>暂未付款</template>
            </div>
            <div class="">发货时间：
              <template v-if="getOverTiem(404) > 0">{{getOverTiem(404) | time2 }}</template>
              <template v-else>暂未发货</template>
            </div>
          </div>
          <!--<div class="pull-right copyBtn" @click="copyBtn()">复制</div>-->
        </div>
        <div class="list-btn clearfix" ref="listBtn" v-show="ShowFixedBtn">
          <template v-if="vendorType === 'buyer'">
            <div class="sendGoods" v-if="orderList.status === 404" @click="buyerGetGoods(orderList)">确认收货</div>
            <div class="sendGoods" v-if="!orderList.installmentId && (orderList.status === 503 || orderList.status === 501)" @click="gotoPay(orderList)">立即付款</div>
            <div class="sendGoods" @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" v-if="orderList.installmentId && (orderList.status === 503 || orderList.status === 504 || orderList.status === 524 ) && orderList.installment.status !== 505 && !orderList.againUpload">立即付款</div>
            <div class="" @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" v-if="orderList.installmentId && (orderList.status === 503 || orderList.status === 504 || orderList.status === 524 ) && orderList.installment.status !== 505 && orderList.againUpload">重新上传</div>
            <div class="" @click="cancelOrder(orderList)" v-if="orderList.status === 503 || orderList.status === 501 || orderList.status === 502">取消订单</div>
            <div @click="paidTime(orderList)" class="" v-if="_getHoursFromNow(orderList.paytime) > sellsendGoodsTime - 1 && orderList.status !== 404 && orderList.status !== 524 && orderList.status !== 520 && orderList.status !== 405 && orderList.status !== 521">提醒发货</div>
            <!--<div @click="lookLogisticsInfo(orderList)" class="" v-if="orderList.status === 404 || orderList.status === 520 || orderList.status === 405 || orderList.status === 521">查看物流</div>-->
          </template>
          <template v-else>
            <div class="sendGoods" v-if="(orderList.status === 502 || orderList.status === 406) && !orderList.uasPurcid" @click="sendGoods(orderList)">点击发货</div>
            <div @click="changelogistics(orderList)" class="sendGoods" v-if="orderList.status === 404 && !orderList.uasPurcid && status === ''">修改物流</div>
            <!--<div @click="lookLogisticsInfo(orderList)" class="" v-if="orderList.status === 404 || orderList.status === 520 || orderList.status === 405 || orderList.status === 503 || orderList.status === 514">查看物流</div>-->
            <div @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" class="" v-if="orderList.installmentId && ((orderList.installment.status === 503 && orderList.Overtime) || orderList.installment.status === 504) && orderList.status !== 606 && orderList.status !== 525">
              取消订单
            </div>
            <div @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" class="" v-if="installmentDetailPaid(orderList) && orderList.status !== 525 && orderList.status !== 606">
              确认收款
            </div>
          </template>
        </div>
      </div>
    </div>
    <remind-str :showRemind="showRemindStr"
                :text="'手续费：是指第三方支付机构在交易过程中，按照一定的百分比进行收取的费用。手续费金额=订单金额 * 0.45%'"
                @closeAction="showRemindStr = false"
    ></remind-str>
    <!-- 发票信息 -->
    <div class="mobile-modal" @touchmove="preventTouchMove($event)" v-if="orderList.invoicetype === 1205 || orderList.invoicetype === 1206" v-show="showinvoiceType">
      <div class="mobile-modal-box mobile-link-en mobile-link-en2">
        <div class="mobile-modal-header">发票信息<i @click="showinvoiceType = false" class="icon-guanbi iconfont"></i></div>
        <div class="order-details-invoiceinfo" >
          <div class="order-details-invoiceinfo-content">
            <!--<div class="invoiceList clearfix" >-->
              <!--<div class="pull-left">发票类型：</div>-->
              <!--<div class="pull-right">-->
                <!--{{orderList.invoicetype === 1205 ? '增值税(专用)发票': '增值税普通发票'}}-->
              <!--</div>-->
            <!--</div>-->
            <img src="/images/order/zhuanpiao.png" v-if="orderList.invoicetype === 1205"/>
            <img src="/images/order/pupiao.png" v-else/>
            <div class="invoiceList clearfix" style="font-size: 0.28rem;color: #333">
              {{orderList.invoicetitle}}
              <!--<div class="pull-left">发票抬头：</div>-->
              <!--<div class="pull-right">{{orderList.invoicetitle || '空'}}</div>-->
            </div>
            <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
              <div class="pull-left">单位地址：</div>
              <div class="pull-left">{{invoiceAddress.companyAddress || '空'}}</div>
            </div>
            <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
              <div class="pull-left">单位电话：</div>
              <div class="pull-left">{{invoiceAddress.companyPhone || '空'}}</div>
            </div>
            <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
              <div class="pull-left">税务登记号：</div>
              <div class="pull-left">{{invoiceAddress.companyTaxNumber || '空'}}</div>
            </div>
            <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
              <div class="pull-left">{{invoiceAddress.bankName}}：</div>
              <div class="pull-left">{{invoiceAddress.bankAccount}}</div>
            </div>
            <div class="invoiceList clearfix">
              <div class="pull-left">{{invoiceAddress.name}}：</div>
              <div class="pull-left">{{invoiceAddress.telephone || '空'}}</div>
            </div>
            <div class="invoiceList clearfix">
              {{invoiceAddress.area}}{{invoiceAddress.detailAddress}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /end -->
    <!-- 发货弹窗 -->
    <div class="mobile-modal" v-if="showSend" @touchmove="preventTouchMove($event)">
      <div class="sendGoods_Alert">
        <div class="sendGoods_title">发货信息<span><i class="iconfont icon-guanbi1" @click="showSend = false"></i></span></div>
        <div class="sendGoods_buyer">
          <div class="sendGoods_buyer_top">
            <span class="name">{{sendGoodsInfo.area.name}}</span>
            <span class="tel">{{sendGoodsInfo.area.tel}}</span>
          </div>
          <div class="sendGoods_buyer_bottom">
            <img src="/images/order/address_icon.png"/>
            <span>{{sendGoodsInfo.area.area}}{{sendGoodsInfo.area.detailAddress}}</span>
          </div>
        </div>
        <div class="sendGoods_list clearfix">
          <div class="ti pull-left">配送方式</div>
          <div class="pull-right">
            {{sendGoodsInfo.sendType === 1301 ? '第三方配送' : (sendGoodsInfo.sendType === 1302 ? '卖家配送': '上门自提')}}
          </div>
        </div>
        <div class="sendGoods_list clearfix" @click="choosePeisong()">
          <div class="ti pull-left">配送商</div>
          <div class="pull-right">{{peisongShowName ? peisongShowName : '请选择'}}<img src="/images/mobile/user/icon-right.png"/></div>
        </div>
        <div class="sendGoods_list clearfix">
          <div class="ti pull-left">运单号</div>
          <div class="pull-right"><input type="number" placeholder="请输入运单号" v-model="sendGoodsInfo.kuaidinumber"/></div>
        </div>
        <div class="sendGoods_Btn" @click="saveSendGoods()">
          确定
        </div>
      </div>
    </div>
    <!-- /end 发货弹窗 -->
    <!-- 选择配送商 -->
    <div class="mobile-modal" v-if="peisongShow">
      <div class="peisong_Alert">
        <div class="com-mobile-header" >
          <a @click="peisongShow = false"><i class="iconfont icon-fanhui"></i></a>
          <p>选择配送商
          </p>
        </div>
        <div class="search-content">
          <input type="text" v-model="seekKeyword" placeholder="请输入您要查找的配送商" @keyup.13="searchSeek" ref="searchSeekInput" @focus="inputGetFocus()" @blur="blur()">
          <span @click="searchSeek" >
          <i class="iconfont icon-sousuo"></i>
          </span>
        </div>
        <ul>
          <li class="clearfix" v-for="(item, index) in peisongList" @click="selectPeisong(index, item)">
            <div class="name pull-left">{{item.companyName}}</div>
            <div class="pull-right target" :class="peisongChooseIndex === index ? 'active' : ''"></div>
          </li>
        </ul>
        <div @click="savePeisongChoose()" class="sendGoods_Btn">保存</div>
      </div>
    </div>
    <!-- /end 选择配送商 -->
    <!-- 删除订单 -->
    <!-- 删除提示框 -->
    <div class="deleteKuang" v-if="showDeleteAlert" @touchmove="preventTouchMove($event)">
      <div class="kuangContent">
        <div class="title">删除信息</div>
        <div class="titleinfo">是否删除此订单</div>
        <!--<div class="info" v-show="isUploadpro">*存在已上架信息</div>-->
        <div class="K_btn">
          <div class="cancelBtn" @click="showDeleteAlert = false">取消</div>
          <div class="answerBtn" @click="deleteFn()">确定</div>
        </div>
      </div>
    </div>
    <!-- /end 删除订单 -->
    <!-- 取消订单原因弹窗 -->
    <div class="mobile-modal" v-if="showBuyerAlert" @touchmove="preventTouchMove($event)">
      <div class="cancelOrder">
        <div class="sendGoods_title">取消订单<span><i class="iconfont icon-guanbi1" @click="showBuyerAlert = false"></i></span></div>
        <div class="cancelOrder_title">请选择取消订单的原因(必选)：</div>
        <ul>
          <li v-for="(item, index) in cancelList" class="clearfix" @click="ChooseOrderCancel(item, index)">
            <div class="target pull-left" :class="index === OrderCancelIndex ? 'active' : ''"></div>
            <div class="name pull-left">{{item}}</div>
          </li>
        </ul>
        <div @click="cancenFn()" class="sendGoods_Btn">确定</div>
      </div>
    </div>
    <!-- /end 取消订单原因弹窗 -->

    <!-- 联系卖买家 -->
    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
      <div class="mobile-modal-box mobile-link-en">
        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
        <div class="mobile-modal-content">
          <div v-if="vendorType === 'buyer'">
            <div v-if="checkInfo(cancatInfo.enterprise.enTel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.enterprise.enTel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enTel}}</a></div>
            <div v-if="checkInfo(cancatInfo.enterprise.enPhone)" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + cancatInfo.enterprise.enPhone" target="_blank" class="content-line link-url pull-left">{{cancatInfo.enterprise.enPhone}}</a></div>
            <div v-if="checkInfo(cancatInfo.enterprise.enWeixin)" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enWeixin}}</span></div>
            <div v-if="checkInfo(cancatInfo.enterprise.enQQ)" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{cancatInfo.enterprise.enQQ}}</span></div>
            <div v-if="!empty">暂无联系方式</div>
          </div>
          <div v-else>
            <div class="clearfix"><span class="pull-left"></span>抱歉，暂时无法与买家在线沟通！</div>
            <div v-if="checkInfo(cancatInfo.entel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + cancatInfo.entel" target="_blank" class="content-line link-url pull-left">{{cancatInfo.entel}}</a></div>
          </div>
        </div>
      </div>
    </div>
    <!-- /联系买卖家 -->
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
    import axios from '~plugins/axios'
    import { RemindStr } from '~components/mobile/base'
    import { EncryptionFilter } from '~utils/tools.js'
    import { RemindBox } from '~components/mobile/common'
    export default {
      name: 'orderdetails',
      layout: 'mobile',
      middleware: 'authenticated',
      data() {
        return {
          showRemindStr: false, // 是否显示减免说明
          ShowFixedBtn: false, // 是否显示悬浮按钮
          showStoreInfo: false, // 联系信息弹窗
          showinvoiceType: false, // 是否展示发票信息
          cancatInfo: {
            enterprise: ''
          }, // 联系信息
          isSearchSearchingMore: false,
          collectResult: '',
          timeoutCount: 0,
          orderList: {}, // 订单列表
          showSend: false, // 是否显示发货弹窗
          sendGoodsInfo: { // 发货弹窗对象
            area: {}
          },
          status: '1', // 物流状态
          peisongShow: false, // 是否显示配送商选择弹窗
          seekKeyword: '',
          peisongChooseIndex: 0, // 配送商选择下标
          peisongList: [], // 配送商数组
          peisongShowName: '', // 选择完后的配送
          showDeleteAlert: false, // 是否显示删除订单
          sellsendGoodsTime: '', // 卖家发货时间
          showBuyerAlert: false, // 买家取消订单原因
          cancelList: ['我不想买了', '信息填写有误，重新购买', '先看看样品再下单', '付款遇到问题（如余额不足、超出限额等）', '买错了', '其他原因'], // 取消订单原因数组
          $CancenOrderId: '', // 取消订单id
          $Orderreason: '', // 取消订单原因
          OrderCancelIndex: '', // 取消订单原因下标
          showItem: 3, // 允许展示多个产品
          invoiceAddress: {}, // 发票信息
          logisticsInfo: [] // 物流信息
        }
      },
      async asyncData({route}) {
        if (route.query.type === 'buyer') {
          let sellsendGoodsTime
          let { data } = await axios.get(`/trade/order/${route.query.uuid}`)
          data[0].area = JSON.parse(data[0].jsonAddress)
          data[0].rule = JSON.parse(data[0].jsonRule)
          data[0].paytype = route.query.paytype
          data[0].historyS = JSON.parse(data[0].statushistory)
          data[0].purchaseDetails = data[0].orderDetails
          data[0].purchaseRemark = data[0].orderRemark ? JSON.parse(data[0].orderRemark)[data[0].storeid] : ''
          data[0].sendType = data[0].rule.method
          let invoiceAddress = data[0].invoiceAddress ? JSON.parse(data[0].invoiceAddress) : ''
          if (route.query.type === 'buyer') {
            sellsendGoodsTime = await axios.get(`/trade/tradebasicproperties/get/1054`)
          }
          return {
            orderList: data[0],
            sellsendGoodsTime: parseInt(sellsendGoodsTime.data.info),
            invoiceAddress: invoiceAddress
          }
        }
        let { data } = await axios.get(`/trade/purchase/purchaseId/${route.query.uuid}`)
        console.log(data)
        data.data.area = JSON.parse(data.data.jsonAddress)
        data.data.rule = data.data.jsonRule ? JSON.parse(data.data.jsonRule) : ''
        data.data.paytype = route.query.paytype
        data.data.historyS = JSON.parse(data.data.statushistory)
        let invoiceAddress = data.data.invoiceAddress ? JSON.parse(data.data.invoiceAddress) : ''
        return {
          orderList: data.data,
          invoiceAddress: invoiceAddress
        }
      },
      computed: {
        vendorType() {
          return this.$route.query.type
        },
        shopuuid() {
          return this.$store.state.option.storeStatus.data
        },
        empty () {
          return this.checkInfo(this.cancatInfo.enterprise.enTel) || this.checkInfo(this.cancatInfo.enterprise.enPhone) || this.checkInfo(this.cancatInfo.enterprise.enWeixin) || this.checkInfo(this.cancatInfo.enterprise.enQQ)
        }
      },
      filters: {
        priceFiter(val) {
          if (!val) return '0.00'
          return val.toFixed(2)
        },
        time: function (time) {
          if (typeof time === 'number') {
            if (!time) {
              return '无'
            } else {
              let d = new Date(time)
              let year = d.getFullYear()
              let month = d.getMonth() + 1
              let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
              return year + '-' + month + '-' + day
            }
          }
        },
        time2: function (time) {
          if (typeof time === 'number') {
            if (!time) {
              return '无'
            } else {
              let d = new Date(time)
              let year = d.getFullYear()
              let month = d.getMonth() + 1
              let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
              let hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
              let minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes()
              let seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds()
              let _arr = [year, month, day].map(item => {
                return item.toString().length < 2 ? '0' + item : item
              })
              return _arr.join('-') + ' ' + hour + ':' + minutes + ':' + seconds
            }
          }
        }
      },
      created() {
        if (this.orderList.lgtId) {
          this.$http.get(`/trade/logistics/${this.orderList.lgtId}`).then(data => {
            this.$http.get(`/kdn/logistics/query?companyName=${data.data.companyName}&logisticsCode=${data.data.number}`).then(res => {
              let str = res.data.traces
              this.logisticsInfo = JSON.parse(str).reverse()
              if (str.indexOf('揽件') !== -1 || str.indexOf('收件') !== -1 || str.indexOf('转运') !== -1 || str.indexOf('运输') !== -1 || str.indexOf('发往') !== -1 ||
                str.indexOf('发出') !== -1 || str.indexOf('收入') !== -1 || str.indexOf('扫描') !== -1 || str.indexOf('到达') !== -1) {
                this.status = 'transit'
              }
              if (str.indexOf('派送') !== -1 || str.indexOf('派件') !== -1) {
                this.status = 'send'
              }
              if (str.indexOf('签收') !== -1) {
                this.status = 'signin'
              }
            })
          })
        }
      },
      methods: {
        // 确认付款
        gotoPay(item) {
          let id = EncryptionFilter(item.orderid)
          this.$router.push(`/mobile/center/user/doPay/${id}`)
        },
        // 店铺详情页
        toShopdetails(item) {
          this.$router.push(`/mobile/shop/${item.storeid}`)
        },
        // 产品详情页
        toproductdetails(item) {
          this.$router.push(`/mobile/product/${item.batchCode}`)
        },
        // 返回剩余时间
        restTime() {
          for (let i = 0; i < this.orderList.historyS.length; i++) {
            if (this.orderList.historyS[i].status === 404) {
              let h = 360 - this._getHoursFromNow(this.orderList.historyS[i].time)
              let day = parseInt(h) / 24
              let hours = parseInt(h) % 24
              return '还剩 ' + parseInt(day) + '天' + parseInt(hours) + '小时自动确认'
            }
          }
          return ''
        },
        checkInfo: function (str) {
          return str && str.trim() !== ''
        },
        // 联系买卖家
        cancatAlert() {
          this.showStoreInfo = true
          if (this.vendorType === 'buyer') {
            this.$http.get(`/api/store-service/stores?uuid=${this.orderList.storeid}&condition=store_uuid`).then(res => {
              this.cancatInfo = res.data
            })
          } else {
            this.$http.get(`/basic/enterprise/${this.orderList.buyerenuu}/tels`).then(res => {
              this.cancatInfo = res.data.data
            })
          }
        },
        getOverTiem(status) {
          for (let j = 0; j < this.orderList.historyS.length; j++) {
            if (this.orderList.historyS[j].status === status) {
              return this.orderList.historyS[j].time
            }
          }
          return ''
        },
        // 是否为分期付款
        installmentDetailPaid(item) {
          if (!item.installment) return false
          let _flag = false
          item.installment.installmentDetails.forEach(list => {
            if (list.detno === item.installment.currentNo && list.status === 504) {
              _flag = true
            }
          })
          return _flag
        },
        // 发货
        sendGoods(item) {
          if (!(this.user.data.pwdEnable && this.user.data.haveUserQuestion && this.user.data.emailValidCode === 2)) {
            // 等级不够
            this.onMind('您的账户安全等级较低，请先在pc端进行信息完善')
            return
          }
          this.$http.get(`/trade/bankInfo/vender/enterprise?status=104&type=sup`).then(res => {
            if (res.data && res.data[0]) {
              this.$http.get(`/trade/address/enterprise?ship=false`).then(res => {
                // 选择发货地址
                if (res.data[0]) {
                  this.sendGoodstype = 'add'
                  if (item.inid) {
                    this._id = EncryptionFilter(item.inid)
                    this.$http.get(`/trade/inFpu/tobeshipped/${this._id}`).then(res => {
                      this.sendGoodsInfo = res.data[0]
                      this.sendGoodsInfo.area = JSON.parse(res.data[0].jsonSpAddress)
                      this.showSend = true
                    })
                  } else {
                    this.$http.get(`/trade/purchase/vendor/tobeshiped/${item.id}`).then(res => {
                      this._id = EncryptionFilter(res.data.inId)
                      this.$http.get(`/trade/inFpu/tobeshipped/${this._id}`).then(res => {
                        this.sendGoodsInfo = res.data[0]
                        this.sendGoodsInfo.area = JSON.parse(res.data[0].jsonSpAddress)
                        this.showSend = true
                      })
                    }, err => {
                      this.onMind('转出货单失败' + err.response.data)
                    })
                  }
                } else {
                  this.onMind('您还未填写设置发货地址 ，请进行完善')
                }
              })
            } else {
              this.onMind('您还未填写收款账户信息 ，请进行完善')
            }
          })
        },
        // 选择配送商
        choosePeisong() {
          this.seekKeyword = ''
          if (this.peisongList.length > 0) {
            this.peisongList = this.AllpeisongList.slice()
            this.peisongShow = true
            return
          }
          this.$http.get('/trade/distributor/selected').then(res => {
            this.AllpeisongList = res.data
            this.peisongList = res.data
            this.peisongList.splice(0, 0, {
              companyName: '请选择配送商'
            })
            this.peisongShow = true
          })
        },
        // 配送商列表选择
        selectPeisong(index, item) {
          this.peisongChooseIndex = index
          this.peisongChooseItem = item
        },
        // 确定选择当前配送商
        savePeisongChoose() {
          this.peisongShow = false
          this.peisongShowName = this.peisongChooseItem.companyName === '请选择配送商' ? '' : this.peisongChooseItem.companyName
        },
        // 发货最终步骤
        saveSendGoods() {
          // 发货
          if (this.sendGoodstype === 'add') {
            let patt = new RegExp('^[A-Za-z0-9]+$')
            if (this.peisongShowName === '') {
              this.onMind('请选择配送商')
            } else if (!this.sendGoodsInfo.kuaidinumber) {
              this.onMind('请填写物流单号')
            } else if (!patt.test(this.sendGoodsInfo.kuaidinumber)) {
              this.onMind('请输入正确的物流单号')
            } else {
              let sendInfo = this.getLogisticsInfo()
              this.$http.post(`/trade/inFpu/save?id=${this.sendGoodsInfo.id}`, sendInfo).then(res => {
                if (res.data.success) {
                  this.onMind('发货成功')
                  setTimeout(() => {
                    location.reload()
                    this.showSend = false
                    this.peisongChooseIndex = 0
                    this.peisongChooseItem = {companyName: '请选择配送商'}
                  }, 1500)
                }
              })
            }
          } else if (this.sendGoodstype === 'change') {
            // 修改物流
            let sendInfo = this.getLogisticsInfo('change')
            let patt = new RegExp('^[A-Za-z0-9]+$')
            if (!this.sendGoodsInfo.lgtId) {
              // 如果快递公司 以及 快递编号为空
              if (!this.peisongShowName && !this.sendGoodsInfo.kuaidinumber) {
                this.showSend = false
                return
              }
              // 如果快递公司为空
              if (!this.peisongShowName && this.sendGoodsInfo.kuaidinumber) {
                this.onMind('请选择配送商')
                return
              } else if (!this.sendGoodsInfo.kuaidinumber) {
                this.onMind('请填写物流单号')
                return
              } else if (!patt.test(this.sendGoodsInfo.kuaidinumber)) {
                this.onMind('请输入正确的物流单号')
                return
              }
              // 没有物流信息则添加物流信息
              this.$http.post(`/trade/logistics/add?inid=${this.sendGoodsInfo.inid}`, sendInfo).then(res => {
                if (res.data.success) {
                  this.onMind('物流信息保存成功')
                  setTimeout(() => {
                    location.reload()
                    this.peisongChooseIndex = 0
                    this.peisongChooseItem = {companyName: '请选择配送商'}
                    this.showSend = false
                  }, 1500)
                }
              })
            } else {
              if (this.ChangeInfoObj.number === this.sendGoodsInfo.kuaidinumber && this.peisongShowName === this.ChangeInfoObj.peisongShowName) {
                this.showSend = false
                return
              }
              if (this.peisongShowName !== '' || this.sendGoodsInfo.kuaidinumber !== '') {
                // 如果用户未做任何信息修改
                if (!this.peisongShowName) {
                  this.onMind('请选择配送商')
                  return
                } else if (!this.sendGoodsInfo.kuaidinumber) {
                  this.onMind('请填写物流单号')
                  return
                } else if (!patt.test(this.sendGoodsInfo.kuaidinumber)) {
                  this.onMind('请输入正确的物流单号')
                  return
                }
                this.$http.post(`/trade/logistics/${this.sendGoodsInfo.lgtId}?invoiceFuid=${this.sendGoodsInfo.inid}`, sendInfo).then(res => {
                  if (res.data.success) {
                    this.onMind('修改物流信息成功')
                    setTimeout(() => {
                      location.reload()
                      this.peisongChooseIndex = 0
                      this.peisongChooseItem = {companyName: '请选择配送商'}
                      this.showSend = false
                    }, 1500)
                  }
                })
              } else {
                if (this.sendGoodsInfo.sendType !== 1301) {
                  // 如果清空了物流信息
                  this.$http.put(`/trade/logistics/clear?inid=${this.sendGoodsInfo.inid}`).then(res => {
                    if (res.data.success) {
                      this.onMind('修改物流信息成功')
                      setTimeout(() => {
                        location.reload()
                        this.peisongChooseIndex = 0
                        this.peisongChooseItem = {companyName: '请选择配送商'}
                        this.showSend = false
                      }, 1500)
                    }
                  })
                }
              }
            }
          }
        },
        // 买家取消订单
        cancelOrder(item) {
          this.$CancenOrderId = item.orderid
          this.showBuyerAlert = true
        },
        // 买家取消订单原因选择
        ChooseOrderCancel(item, index) {
          this.OrderCancelIndex = index
          this.$Orderreason = item
        },
        // 买家提醒卖家发货
        paidTime(item) {
          item = this.baseUtils.deepCopy(item)
          if (this._getHoursFromNow(item.paytime) < this.sellsendGoodsTime) {
            this.onMind('距离付款的时间还不到' + this.sellsendGoodsTime + '小时，不能提醒发货')
            return
          }
          if (this._getHoursFromNow(item.lastNotifyDeliveryTime) < this.sellsendGoodsTime && this._getHoursFromNow(item.lastNotifyDeliveryTime) !== 0) {
            this.onMind('距离上次付款的时间还不到' + this.sellsendGoodsTime + '小时，不能提醒发货')
            return
          }
          this.$http.post(`/trade/message/order/${item.id}`).then(res => {
            let returnResult = res.data
            if (returnResult.status === 505 || returnResult.status === 406 || returnResult.status === 407 || returnResult.status === 403 || returnResult.status === 408) {
              this.onMind('提醒成功')
              location.reload()
            } else {
              this.onMind('提醒发货失败：' + returnResult.message)
            }
          })
        },
        // 取消订单确认事件
        cancenFn() {
          if (!this.$Orderreason || this.$Orderreason === '') {
            this.onMind('请选择取消订单的原因')
          } else {
            let reason = {
              reason: this.$Orderreason
            }
            this.$http.put(`/trade/order/simpleinfo/ones/${this.$CancenOrderId}/release`, reason).then(res => {
              this.onMind('取消订单成功，等待买家确认')
              this.$Orderreason = '我不想买了'
              this.OrderCancelIndex = 0
              location.reload()
              this.showBuyerAlert = false
            })
          }
        },
        // 修改物流
        changelogistics(item) {
          this.sendGoodstype = 'change'
          this.peisongShowName = ''
          this.sendGoodsInfo.kuaidinumber = ''
          let _obj = this.baseUtils.deepCopy(item)
          if (!item.lgtId) {
            // 如果没有订单编号
            this.sendGoodsInfo = _obj
            this.sendGoodsInfo.area = JSON.parse(_obj.jsonSdAddress)
            this.showSend = true
            this.ChangeInfoObj = {
              number: '',
              peisongShowName: ''
            }
          } else {
            this.$http.get(`/trade/logistics/${_obj.lgtId}`).then(res => {
              this.sendGoodsInfo = _obj
              this.sendGoodsInfo.area = JSON.parse(_obj.jsonSdAddress)
              this.sendGoodsInfo.kuaidinumber = res.data.number
              this.peisongShowName = res.data.companyName
              this.ChangeInfoObj = {
                number: res.data.number,
                peisongShowName: res.data.companyName
              }
              this.showSend = true
            })
          }
        },
        // 搜索
        searchSeek() {
          let _arr = this.AllpeisongList.slice()
          let addrPatt = /^[\u4e00-\u9fa5]+$/
          if (addrPatt.test(this.seekKeyword) && this.seekKeyword.length > 0) {
            this.peisongList = []
            this.peisongList = _arr.filter((data) => {
              if (data.companyName.indexOf(this.seekKeyword) >= 0) {
                return data
              }
            })
            this.peisongList.splice(0, 0, {
              companyName: '请选择配送商'
            })
          } else if (this.seekKeyword === '' || !this.seekKeyword) {
            this.peisongList = _arr
          }
          this.peisongChooseIndex = 0
          this.peisongChooseItem = {companyName: '请选择配送商'}
        },
        // 获取物流提交信息
        getLogisticsInfo(_type) {
          let sendInfo = {}
          sendInfo.sendType = this.sendGoodsInfo.sendType
          sendInfo.jsonSdAddress = this.sendGoodsInfo.jsonSpAddress
          sendInfo.logisticsInfo = {}
          if (this.peisongShowName) {
            sendInfo.logisticsInfo.companyName = this.peisongShowName
          }
          if (this.sendGoodsInfo.kuaidinumber) {
            sendInfo.logisticsInfo.number = this.sendGoodsInfo.kuaidinumber
          }
          return _type ? sendInfo.logisticsInfo : sendInfo
        },
        // 查看物流信息
        lookLogisticsInfo(item) {
          let id = item.purchaseid || item.orderid
          this.$router.push(`/mobile/order/logistics?uuid=${EncryptionFilter(id)}&type=${this.vendorType}`)
        },
        // 买家确认收货
        buyerGetGoods(item) {
          this.$http.put(`/trade/order/simpleinfo/ones/${item.id}?_status=ensureaccept`).then(res => {
            this.onMind('确认收货成功')
            location.reload()
          })
        },
        // 买卖家中心字段同步化
        _initSetParams(_obj) {
          _obj = this.baseUtils.deepCopy(_obj)
          for (let i = 0; i < _obj.length; i++) {
            if (!_obj[i].purchaseDetails) {
              _obj[i].purchaseDetails = _obj[i].orderDetails
            }
            if (_obj[i].status === 505 || _obj[i].status === 406 || _obj[i].status === 407 || _obj[i].status === 403 || _obj[i].status === 408) {
              _obj[i].paidTimeFromNow = this._getHoursFromNow(_obj[i].paytime)
              _obj[i].lastNotiDelivery = this._getHoursFromNow(_obj[i].lastNotifyDeliveryTime)
            }
          }
          return _obj
        },
        // 传入时间，计算距离现在的时间是多少小时了
        _getHoursFromNow(time) {
          if (!time) {
            return 0
          }
          let newTime = new Date()
          let msec = newTime.getTime() - time
          let hours = parseInt(parseInt(msec) / (1000 * 60 * 60))
          return hours
        },
        // 拷贝
        copyBtn() {
          let text = document.getElementById('orderNumber').innerText
          let input = document.getElementById('input')
          input.value = text // 修改文本框的内容
          input.select() // 选中文本
          if (document.execCommand('copy', false, null)) {
            this.onMind('复制成功')
          }
        },
        onMind(str) {
          this.collectResult = str
          this.timeoutCount++
        },
        blur: function() {
          setTimeout(() => {
            this.$store.dispatch('mobile/SetInputGetFocus', false)
          }, 300)
        },
        inputGetFocus: function() {
          setTimeout(() => {
            this.$store.dispatch('mobile/SetInputGetFocus', true)
          }, 300)
        }
      },
      components: {
        RemindBox,
        RemindStr
      },
      mounted() {
        this.$nextTick(res => {
          this.$refs.listBtn.children.length > 0 ? this.ShowFixedBtn = true : this.ShowFixedBtn = false
        })
      }
    }
</script>
<style scoped lang='scss'>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .order-wrapper {
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    overflow-y: scroll;
    position: absolute;
    .order-details-wrap {
      .order-details-top {
        .orderNumber {
          margin-bottom: 0.2rem;
          font-size: 0.27rem;
          color: #666;
          @include lineHeight(0.88rem);
          background: #fff;
          padding: 0 0.2rem;
          .pull-left {
            width: 5rem;
            @include overFlowHidden();
            span {
              color: #3f84f6
            }
          }
        }
        .orderStatus {
          background: #fff;
          padding: 0 0.2rem;
          height: 0.88rem;
          line-height: 0.88rem;
          margin-bottom: 0.2rem;
          .clearfix {
            font-size: 0.28rem;
            color: #333;
            span {
              float: left;
              color: #333;
            }
            img {
              width: 0.18rem;
              height: 0.32rem;
              vertical-align: top;
              margin-top: 0.18rem;
              margin-left: 0.1rem;
            }
          }
        }
        .sendGoods_buyer {
          background: #fff;
          padding: 0.3rem 0.2rem;
          border-top: 1px solid #d9d9d9;
          .sendGoods_buyer_top {
            color: #333;
            font-size: 0.3rem;
            font-weight: bold;
            .name {
              margin-right: 0.3rem;
              margin-left: 0.32rem;
            }
          }
          .sendGoods_buyer_bottom {
            color: #333;
            font-size: 0.26rem;
            margin-top: 0.2rem;
            img {
              width: 0.22rem;
              height: 0.29rem;
              margin-right: 0.1rem;
              margin-top: -0.1rem;
            }
          }
        }

      }
      .order-list-wrap {
        .top-t-wrap {
          background: #fff;
          padding: 0 0.2rem;
          height: 0.88rem;
          line-height: 0.88rem;
          .pull-left {
            font-size: 0.28rem;
            color: #333;
            width: 5rem;
            @include overFlowHidden();
            div {
              max-width: 3rem;
              @include overFlowHidden();
              float: left;
            }
            img {
              width: 0.18rem;
              height: 0.32rem;
              vertical-align: top;
              margin-top: 0.18rem;
              margin-left: 0.1rem;
            }
          }
          .pull-right {
            @include lineHeight(0.56rem);
            border: 1px solid #3f84f6;
            color: #3f84f6;
            font-size: 0.26rem;
            text-align: center;
            border-radius: 3px;
            margin-top: 0.14rem;
            padding: 0 0.1rem;
            overflow: hidden;
            i {
              font-size: 0.26rem;
              margin-left: 0.05rem;
            }
          }
        }
        li {
          margin-top: 0.2rem;
        }
        .list-wrap-title{
          padding: 0 0.2rem;
          background: #fff;
          @include lineHeight(0.67rem);
          font-size: 0.28rem;
          color: #333;
          border-bottom: 1px solid #e4e4e4;
          .pull-left {
            width: 5rem;
            @include overFlowHidden();
            span {
              max-width: 3rem;
              @include overFlowHidden();
              display: inline-block;
            }
            img {
              width: 0.18rem;
              height: 0.32rem;
              vertical-align: top;
              margin-top: 0.18rem;
              margin-left: 0.1rem;
            }
          }
          .pull-right {
            .red {
              color: #f21c1c;
            }
          }
        }
        .list-wrap-content {
          background: #f9f9f8;
          padding: 0.3rem 0.2rem;
          padding-right: 0.32rem;
          border-bottom: 1px solid #e4e4e4;
          .list-item {
            font-size: 0.28rem;
            color: #333;
            /*line-height: 0.5rem;*/
            margin-top: 0.22rem;
            &:nth-child(1) {
              margin-top: 0px;
            }
            .list-wrap-content-brand {
              @include overFlowHidden();
              .spec {
                width: 3.1rem;
                @include overFlowHidden();
                margin-right: 0.2rem;
                &.noMargin {
                  margin-right: 0;
                  width: 1.5rem;
                }
              }
            }
            .name {
              color: #666;
            }
            .lab {
              color: #999;
              font-size: 0.24rem;
              max-width: 2.1rem;
              @include overFlowHidden();
              span {
                font-size: 0.16rem;
              }
            }
            .pri {
              font-size: 0.28rem;
              color: #f43938;
            }
          }
        }
        .list-btn {
          background: #fff;
          @include lineHeight(0.8rem);
          padding: 0 0.2rem;
          div {
            display: inline-block;
            width: 1.5rem;
            @include lineHeight(0.56rem);
            border: 1px solid #333;
            font-size: 0.26rem;
            color: #333;
            text-align: center;
            margin-top: 0.11rem;
            margin-left: 0.2rem;
            border-radius: 3px;
            &.sendGoods {
              color: #f43938;
              border: 1px solid #f43938;
            }
          }
        }
      }
      .top-w-wrap {
        background: #fff;
        padding: 0 0.2rem;
        border-bottom: 1px solid #e4e4e4;
        @include lineHeight(0.88rem);
        .name {
          color: #333;
          font-size: 0.28rem;
          margin-right: 0.2rem;
        }
        .detailsinfo {
          font-size: 0.28rem;
          color: #999;
          width: 5.6rem;
          @include overFlowHidden()
        }
      }
      .lookMorePro {
        background: #fff;
        font-size: 0.28rem;
        color: #999;
        text-align: center;
        border-bottom: 1px solid #e4e4e4;
        @include lineHeight(0.67rem);
        img {
          transform: rotate(90deg);
          width: 0.16rem;
          height: 0.26rem;
          vertical-align: top;
          margin-top: 0.23rem;
          margin-left: 0.1rem;
        }
      }
      .order-details-priInfo {
        /*border-top: 1px solid #e4e4e4;*/
        border-bottom: 1px solid #e4e4e4;
        font-size: 0.28rem;
        color: #333;
        padding: 0.1rem;
        background: #fff;
        text-align: right;
        .clearfix {
          @include lineHeight(0.5rem);
        }
        span {
          @include overFlowHidden();
        }
        .small {
          font-size: 0.24rem;
          color: #999;
        }
        .jianmian {
          font-size: 0.22rem;
          color: #fff;
          width: 0.48rem;
          height:0.25rem;
          text-align: center;
          line-height: 0.25rem;
          background: #15b262;
          margin: 0 0.1rem;
        }
      }
      .list-all-info{
        text-align: right;
        background: #fff;
        padding: 0 0.1rem;
        @include lineHeight(0.72rem);
        font-size: 0.26rem;
        color: #333;
        border-bottom: 1px solid #e4e4e4;
        span {
          display: inline-block;
        }
        .pri {
          font-size: 0.32rem;
          color: #f43938;
        }
        .red {
          color: #f43938;
          font-size: 0.24rem;
        }
        .lab {
          color: #999;
          font-size: 0.24rem;
        }
        .del {
          text-decoration: line-through;
          color: #999;
          font-size: 0.24rem;
        }
      }
      .order-details-info {
        background: #fff;
        margin-top: 0.2rem;
        .clearfix{
          padding: 0 0.2rem;
          font-size: 0.28rem;
          color: #333;
          .pull-left {
            @include lineHeight(0.88rem);
          }
          img {
            width: 0.18rem;
            height: 0.32rem;
            vertical-align: top;
            margin-top: 0.3rem;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
          }
          border-bottom: 1px solid #e4e4e4;
          .pull-right {
            max-width: 5rem;
            text-align: right;
          }
          .smallfont{
            color: #666;
          }
        }
      }
      .order-details-moreinfo {
        background: #fff;
        font-size: 0.24rem;
        color: #999;
        padding: 0.2rem 0;
        margin-bottom: 0.8rem;
       .clearfix.moreinfoList {
         padding: 0 0.2rem;
         /*border-bottom: 1px solid #e4e4e4;*/
         .pull-left {
           div {
             @include lineHeight(0.5rem);
           }
         }
       }
        margin-top: 0.2rem;
        .copyBtn {
          width: 1.1rem;
          border-radius: 3px;
          border: 1px solid #dfdfdf;
          @include lineHeight(0.4rem);
          text-align: center;
          padding: 0 0.2rem;
        }
        .list-btn {
          position: fixed;
          bottom: 0.98rem;
          width: 100%;
          left: 0;
          background: #fff;
          height: 0.8rem;
          border-top: 1px solid #dcdcdc;
          div {
            float: right;
            width: 1.5rem;
            @include lineHeight(0.56rem);
            background: #3f84f6;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            font-size: 0.26rem;
            margin-top: 0.15rem;
            margin-right: 0.2rem;
          }
        }
      }
      .logistics_ul {
        background: #fff;
        li.clearfix {
          position: relative;
          border-left: 2px solid #e4e5ea;
          margin-left: 0.2rem;
          border-bottom: 0px;
          .pull-left {
            position: absolute;
            left: -7px;
            top: 0.36rem;
            .logistics_icon {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #b5b5b5;
              &.active {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0);
                position: relative;
                &~.logistics_line {
                  margin-left: 9px;
                }
                .red {
                  position: absolute;
                  width: 12px;
                  height: 12px;
                  background: #0ca43a;
                  margin-left: 4px;
                  margin-top: 4px;
                  border-radius: 50%;
                }
              }
            }
            &.marginL {
              left: -10px;
              top: -0.1rem
            }
          }
          .pull-right {
            padding-top: 0.2rem;
            font-size: 0.24rem;
            color: #333;
            border-bottom: 1px solid #f3f3f3;
            padding-bottom: 0.2rem;
            max-width: 6.4rem;
            width: 6.4rem;
            .logistics_time {
              @include lineHeight(20px);
            }
            .logistics_info {
              margin-top: 0.2rem;
              word-break:break-all;
              word-wrap: break-word;
              line-height: 0.45rem
            }
            &.marginT {
              padding-top: 0;
              margin-top: -0.1rem;
            }
          }
        }
      }
    }
    .sendGoods_Alert {
      background: #fff;
      position: fixed;
      bottom: 0.98rem;
      left: 0;
      width: 100%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      overflow: hidden;
      .sendGoods_title {
        color: #333;
        font-size: 0.42rem;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        position: relative;
        i {
          position: absolute;
          font-size: 16px;
          right: 0.2rem;
        }
      }
      .sendGoods_buyer {
        padding: 0.3rem 0.2rem;
        border-bottom: 1px solid #d9d9d9;
        border-top: 1px solid #d9d9d9;
        .sendGoods_buyer_top {
          color: #333;
          font-size: 0.3rem;
          font-weight: bold;
          .name {
            margin-right: 0.3rem;
            margin-left: 0.32rem;
          }
        }
        .sendGoods_buyer_bottom {
          color: #333;
          font-size: 0.26rem;
          margin-top: 0.2rem;
          img {
            width: 0.22rem;
            height: 0.29rem;
            margin-right: 0.1rem;
            margin-top: -0.1rem;
          }
        }
      }
      .sendGoods_list {
        padding: 0 0.2rem;
        @include lineHeight(0.8rem);
        border-bottom: 1px solid #d9d9d9;
        font-size: 0.32rem;
        color: #333;
        /*.ti {*/
          /*font-weight: bold;*/
        /*}*/
        .pull-right {
          font-size: 0.28rem;
          color: #999;
          img {
            width: 0.14rem;
            height: 0.24rem;
            vertical-align: middle;
            margin-top: -0.02rem;
            margin-left: 0.1rem;
          }
        }
        input {
          width: 4rem;
          text-align: right;
          color: #333;
        }
      }
      .sendGoods_Btn {
        @include lineHeight(1rem);
        text-align: center;
        color: #fff;
        font-size: 0.36rem;
        background: #3f84f6;
      }
    }
    .search-content {
      margin-top: 0.88rem;
      margin-bottom: 0.2rem;
      text-align: center;
      padding: .25rem 0 0 0;
      input {
        border: 1px solid #376ff3;
      }
      span {
        height: .46rem;
        line-height: .46rem;
      }
    }
    .peisong_Alert {
      background: #f1f3f6;
      position: fixed;
      bottom: 0.98rem;
      left: 0;
      right: 0;
      top: 0;
      z-index: 11111;
      ul {
        height: calc(100vh - 1.2rem - 1.7rem);
        overflow-y: scroll;
        li {
          line-height: 1rem;
          background: #fff;
          padding: 0 0.2rem;
          font-size: 0.28rem;
          color: #333;
          border-bottom: 1px solid #e0e1e2;
          div.name {
            @include overFlowHidden();
          }
          div.target {
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #a4a4a4;
            margin-top: 0.3rem;
            &.active {
              background-image: url('/images/order/getChoose_icon.png');
              background-size: 100% 100%;
              border: 0px;
            }
          }
        }
      }
      .sendGoods_Btn {
        @include lineHeight(1rem);
        text-align: center;
        color: #fff;
        font-size: 0.36rem;
        background: #3f84f6;
      }
    }
    .deleteKuang {
      position: fixed;
      background: rgba(0,0,0,0.5);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      .kuangContent {
        border-radius: 5px;
        background: #fff;
        width: 5rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        overflow: hidden;
        .titleinfo {
          font-size: .3rem;
          color: #666;
          text-align: center;
          margin-top: 0.5rem;
          margin-bottom: 0.1rem;
        }
        .title {
          background: #5078cb;
          height: .7rem;
          line-height: .7rem;
          font-size: .3rem;
          color: #fff;
          text-align: center;
        }
        .info {
          color: #f00;
          text-align: center;
        }
        .K_btn {
          margin-top: 0.4rem;
          line-height: 0.7rem;
          height: 0.7rem;
          &::after{
            clear: both;
            display: block;
            content: ' ';
            visibility: hidden;
            zoom: 1;
          }
          div {
            float: left;
            width: 50%;
            font-size: 0.3rem;
            text-align: center;
            &.cancelBtn {
              background: #b4b5b9;
              color: #333;
            }
            &.answerBtn {
              background: #5078cb;
              color: #fff;
            }
          }
        }
      }
      i {
        font-size: .6rem;
        position: absolute;
        right: -0.3rem;
        top: -0.35rem;
        color: #fff;
        &::after{
          position: absolute;
          top: -0.1rem;
          left: -0.1rem;
          right: -0.1rem;
          bottom: -0.1rem;
          content: ' '
        }
      }
      .title {
        background: #3f84f6;
        height: 0.7rem;
        line-height: 0.7rem;
        color: #fff;
        text-align: center;
        font-size: 0.3rem;
        position: relative;
      }
      .Kuang {
        max-height: 10rem;
        width: 6.7rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: #ececec;
        border-radius: 5px;
      }
      .content {
        overflow-y: scroll;
        max-height: 9.3rem;
        .infob {
          background: #e3edfd;
          padding: 0.2rem;
          .info {
            color: #333;
            font-size: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0.18rem;
            .name {
              color: #666;
            }
            div {
              display: inline-block;
            }
          }
        }
        .content_sq {
          width: 6.4rem;
          margin: 0.1rem auto;
          background: #fff;
          padding: 0.2rem 0rem;
          .list {
            margin-bottom: 0.18rem;
          }
          .fl {
            width: 3.2rem;
          }
          .table {
            width: 4.2rem;
            margin-top: -0.1rem;
          }
          .labelinfo {
            background-image: url('/images/mobile/@2x/labelTop.png');
            background-repeat: no-repeat;
            width: 6.29rem;
            height: 0.64rem;
            line-height: 0.64rem;
            background-size: 100%;
            margin-top: 0rem;
            margin-right: 0rem;
            background-color: rgba(0, 0, 0, 0);
            color: #666;
          }
        }
      }
    }
    .cancelOrder {
      background: #fff;
      position: absolute;
      bottom: 0.98rem;
      left: 0;
      width: 100%;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      overflow: hidden;
      .sendGoods_title {
        color: #333;
        font-size: 0.42rem;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        position: relative;
        i {
          position: absolute;
          font-size: 16px;
          right: 0.2rem;
        }
      }
      .cancelOrder_title {
        font-size: 0.36rem;
        color: #333;
        border-bottom: 1px solid #d9d9d9;
        font-weight: bold;
        padding: 0 0.2rem;
        line-height: 0.6rem;
      }
      ul {
        li {
          line-height: 1rem;
          background: #fff;
          padding: 0 0.2rem;
          font-size: 0.32rem;
          color: #333;
          border-bottom: 1px solid #d9d9d9;
          div.name {
            @include overFlowHidden();
          }
          div.target {
            margin-right: 0.2rem;
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #a4a4a4;
            margin-top: 0.3rem;
            &.active {
              background-image: url('/images/order/getChoose_icon.png');
              background-size: 100% 100%;
              border: 0px;
            }
          }
        }
      }
      .sendGoods_Btn {
        @include lineHeight(1rem);
        text-align: center;
        color: #fff;
        font-size: 0.36rem;
        background: #3f84f6;
      }
    }
    .labelInfo_ForItem {
      color: #fff;
      font-size: 0.24rem;
      padding: 0.05rem 0.1rem;
      background: #15b262;
      margin-right: 0.1rem;
      border-radius: 3px;
    }
    .mobile-link-en2 {
      width: 7.04rem;
      left: 2.5%;
    }
    .order-details-invoiceinfo {
      background: #f3f3f3;
      padding: 0.2rem;
      border-bottom-left-radius: 0.07rem;
      border-bottom-right-radius: 0.07rem;
      .order-details-invoiceinfo-content {
        background: #fff;
        padding: 0.3rem 0.2rem;
        border-radius: 0.07rem;
        position: relative;
        border: 1px solid #dcdcdc;
        img {
          position: absolute;
          right: 0px;
          top: 0px;
          width: 0.85rem;
          height: 0.85rem;
        }
      }
      .invoiceList {
        font-size: 0.24rem;
        color: #666;
        line-height: 0.5rem;
        .pull-left {
          &:first-child {
            width: 2.2rem;
            text-align: right;
            @include overFlowHidden();
          }
          &:last-child{
            width: 3.9rem;
            word-break:break-all;
            word-wrap:break-word;
          }
        }
      }
    }
    .overHiddenText {
      @include overFlowHidden();
      max-width: 3rem;
    }
    .justifyAlign {
      width: 1.2rem;
      display:inline-block;
      text-align: justify;
      vertical-align:top;
    }
    .justifyAlign::after{
      content:"";
      display: inline-block;
      width:100%;
      overflow:hidden;
      height:0;
    }
  }
</style>