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

<template>
  <div class="order-wrapper">
    <div class="com-mobile-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>订单详情
      </p>
    </div>
    <div class="order-details-wrap">
      <div class="order-details-top">
        <div class="clearfix top-t-wrap">
          <div class="pull-left">
            <template v-if="orderList.status === 404 && vendorType === 'buyer'">待收货</template>
            <template v-else-if="orderList.status === 404 || orderList.status === 520 || orderList.status === 405 || orderList.status === 503 || orderList.status === 514">
              请耐心等待买家确认收货
            </template>
            <span v-if="vendorType === 'buyer'">{{restTime()}}</span>
          </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="sendGoods_buyer">
          <div class="sendGoods_buyer_top">
            <span class="name">{{orderList.area.name || '收货人'}}</span>
            <span class="tel">{{orderList.area.tel || '收货人电话'}}</span>
          </div>
          <div class="sendGoods_buyer_bottom">
            <img src="/images/order/address_icon.png"/>
            <span>{{orderList.area.area}}{{orderList.area.detailAddress}}</span>
          </div>
        </div>
        <div class="clearfix top-w-wrap">
          <div class="name pull-left">订单备注</div>
          <div class="detailsinfo pull-left">{{orderList.purchaseRemark || '无'}}</div>
        </div>
      </div>
      <ul class="order-list-wrap">
        <li class="clearfix">
          <div class="list-wrap-title clearfix">
            <div class="pull-left" v-if="vendorType !== 'buyer'" @click="toShopdetails(orderList)">
              <template v-if="orderList.buyentername">
                <span class="labelInfo_ForItem" v-if="orderList.storeid === '33069557578d44e69bd91ad12d28a8d4'">寄售</span>
              </template>
              {{orderList.buyername}}&nbsp;|&nbsp;{{orderList.buyentername || '个人账户'}}
            </div>
            <div class="pull-left" v-else @click="toShopdetails(orderList)">
              <span class="labelInfo_ForItem" v-if="orderList.storeid === '33069557578d44e69bd91ad12d28a8d4'">寄售</span>
              {{orderList.sellername}}</div>
            <div class="pull-right">
              <template v-if="vendorType === 'buyer'">
                <span class="red" v-if="orderList.status === 505 || orderList.status === 406 || orderList.status === 407 || orderList.status === 403 || orderList.status === 408">待卖家发货</span>
                <span class="red" v-else-if="orderList.status === 501 || orderList.status === 502 || orderList.status === 503 || orderList.status === 524">待付款</span>
                <span class="red" v-else-if="orderList.status === 404">待收货</span>
                <span class="red" v-else-if="orderList.status === 602 || orderList.status === 603 || orderList.status === 315 || orderList.status === 604 || orderList.status === 605 || orderList.status === 606">已取消</span>
                <span class="red" v-else-if="orderList.status === 504">付款确认中</span>
                <span class="red" v-else-if="orderList.status === 520 || orderList.status === 405">交易已完成</span>
                <span class="red" v-else-if="orderList.status === 525">卖家请求取消</span>
              </template>
              <template v-else>
                <span class="red" v-if="orderList.status === 502 || orderList.status === 406">买家已付款</span>
                <!--<span class="red">待发货</span>-->
                <span class="red" v-else-if="orderList.status === 602 || orderList.status === 603 || orderList.status === 315 || orderList.status === 604 || orderList.status === 605 || orderList.status === 606">订单已取消</span>
                <span class="red" v-else-if="orderList.status === 501 || orderList.status === 524">待买家付款</span>
                <span class="red" v-else-if="orderList.status === 404 || orderList.status === 520 || orderList.status === 405 || orderList.status === 503 || orderList.status === 514">待买家收货</span>
                <span class="red" v-else-if="orderList.status === 405 || orderList.status === 514 || orderList.status === 503 || orderList.status === 506">待商城付款</span>
                <span class="red" v-else-if="orderList.status === 606">交易关闭</span>
                <span class="red" v-else-if="orderList.status === 520">交易完成</span>
                <span class="red" v-else-if="orderList.status === 525">卖家发起取消,待确认</span>
                <span class="red" v-else-if="orderList.status === 504">付款确认中</span>
              </template>
            </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">{{details.brName || '-'}}</div>
              </div>
              <!--<div class="pull-right lab">-->
                <!--{{details.goodsnumber || ''}}-->
              <!--</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">{{details.kiName || '-'}}</div>
              </div>
              <div class="pull-right pri">
                <span>¥</span>{{details.ensurePrice}}
              </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">{{details.cmpCode || '-'}}</div>
              </div>
              <div class="pull-right lab">
                <span>x</span>{{details.number}}
              </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">{{details.spec || '-'}}</div>
              </div>
            </div>
            <div class="list-item clearfix">
              <div class="list-wrap-content-brand clearfix pull-left blue">
                <div class="name pull-left blue">物料编码：</div>
                <div class="pull-left">{{details.goodsnumber || '-'}}</div>
              </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="order-details-priInfo">
        <div class="clearfix">
          <div class="pull-left">商品金额总计：</div>
          <div class="pull-right">¥{{orderList.ensurePrice - orderList.fare | priceFiter}}</div>
        </div>
        <div class="clearfix">
          <div class="pull-left">运费：</div>
          <div class="pull-right">¥{{orderList.fare | priceFiter}}</div>
        </div>
        <div class="clearfix">
          <div class="pull-left">手续费：</div>
          <div class="pull-right"><a class="red" style="color:#f43938;">¥0.00</a><span class="del" style="text-decoration: line-through;color: #999;font-size: 0.24rem;">(¥{{parseFloat(orderList.ensurePrice * 0.0045).toFixed(2)}})</span></div>
        </div>
        <!--<div class="clearfix">-->
          <!--<div class="pull-left">促销优惠：</div>-->
          <!--<div class="pull-right">-¥13212.32132</div>-->
        <!--</div>-->
        <!--<div class="clearfix small">-->
          <!--<div class="pull-left">积分冲抵：</div>-->
          <!--<div class="pull-right">-¥13212.32132</div>-->
        <!--</div>-->
      </div>
      <div class="list-all-info clearfix">
        <div>共<span>{{orderList.batchQty}}</span>件商品&nbsp;&nbsp;合计：
          <span class="pri"><a class="red">¥</a>{{orderList.ensurePrice}}</span>
          <span class="lab">(含运费：<a class="red">¥</a><a class="red">{{orderList.fare | priceFiter}}</a>)</span></div>
        <!--<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">
            {{orderList.sendType === 1301 ? '第三方配送' : (orderList.sendType === 1302 ? '卖家配送': '上门自提')}}
            <!--第三方配送-->
          </div>
        </div>
        <div class="clearfix">
          <div class="name pull-left">配送规则</div>
          <div class="pull-right">
            ({{orderList.rule.ruleName ? orderList.rule.ruleName : ''}})
          </div>
        </div>
        <div class="clearfix">
          <div class="name pull-left">付款方式</div>
          <div class="pull-right">
            <!--{{orderList.paytype}}-->
            {{orderList.paytype === '1103' ? '线下付款' : '网上支付'}}
          </div>
        </div>
        <div class="clearfix">
          <div class="name pull-left">发票信息</div>
          <div class="pull-right" @click="(orderList.invoicetype === 1205 || orderList.invoicetype === 1206) ? showinvoiceType = true : ''">
            {{(orderList.invoicetype === 1205 || orderList.invoicetype === 1206) ? '查看更多信息' : '暂不开票'}}
            <img src="/images/mobile/user/icon-right.png"  v-if="orderList.invoicetype === 1205 || orderList.invoicetype === 1206"/>
          </div>
        </div>
      </div>
      <!-- 发票信息 -->
      <div class="order-details-invoiceinfo" v-if="orderList.invoicetype === 1205 || orderList.invoicetype === 1206" v-show="showinvoiceType">
        <div class="invoiceList clearfix" >
          <div class="pull-left">发票类型：</div>
          <div class="pull-right">
            {{orderList.invoicetype === 1205 ? '增值税(专用)发票': '增值税普通发票'}}
          </div>
        </div>
        <div class="invoiceList clearfix">
          <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-right">{{invoiceAddress.companyAddress || '空'}}</div>
        </div>
        <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
          <div class="pull-left">单位电话：</div>
          <div class="pull-right">{{invoiceAddress.companyPhone || '空'}}</div>
        </div>
        <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
          <div class="pull-left">税务登记号：</div>
          <div class="pull-right">{{invoiceAddress.companyTaxNumber || '空'}}</div>
        </div>
        <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
          <div class="pull-left">开户银行：</div>
          <div class="pull-right">{{invoiceAddress.bankName || '空'}}</div>
        </div>
        <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
          <div class="pull-left">开户银行账户：</div>
          <div class="pull-right">{{invoiceAddress.bankAccount || '空'}}</div>
        </div>
        <div class="invoiceList clearfix" v-if="orderList.invoicetype === 1205">
          <div class="pull-left">收票人：</div>
          <div class="pull-right">{{invoiceAddress.name || '空'}}</div>
        </div>
        <div class="invoiceList clearfix">
          <div class="pull-left">联系电话：</div>
          <div class="pull-right">{{invoiceAddress.telephone || '空'}}</div>
        </div>
        <div class="invoiceList clearfix">
          <div class="pull-left">详细地址：</div>
          <div class="pull-right">{{invoiceAddress.area}}{{invoiceAddress.detailAddress}}</div>
        </div>
      </div>
      <div class="order-details-moreinfo clearfix">
        <div class="clearfix moreinfoList">
          <div class="pull-left">
            <div class="">订单编号：
              <span id="orderNumber">{{orderList.orderid}}</span>
              <textarea id="input" cols="1" rows="1" style="position: fixed;left: 0px;top: 0px;">这是幕后黑手</textarea>
            </div>
            <div class="">创建时间：
              {{orderList.createtime || orderList.creattime | time}}</div>
            <div class="" v-if="vendorType === 'buyer'">付款时间：
              <template v-if="getOverTiem(505) > 0">{{getOverTiem(505) | time }}</template>
              <template v-else>暂未付款</template>
            </div>
            <div class="" v-else>付款时间：
              <template v-if="getOverTiem(502) > 0">{{getOverTiem(502) | time }}</template>
              <template v-else>暂未付款</template>
            </div>
            <div class="">发货时间：
              <template v-if="getOverTiem(404) > 0">{{getOverTiem(404) | time }}</template>
              <template v-else>暂未发货</template>
            </div>
          </div>
          <div class="pull-right copyBtn" @click="copyBtn()">复制</div>
        </div>
        <div class="list-btn clearfix">
          <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 ">提醒发货</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>
    <!-- 发货弹窗 -->
    <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 { EncryptionFilter } from '~utils/tools.js'
    import { RemindBox } from '~components/mobile/common'
    export default {
      name: 'orderdetails',
      layout: 'mobile',
      middleware: 'authenticated',
      data() {
        return {
          showStoreInfo: false, // 联系信息弹窗
          showinvoiceType: false, // 是否展示发票信息
          cancatInfo: {
            enterprise: ''
          }, // 联系信息
          isSearchSearchingMore: false,
          collectResult: '',
          timeoutCount: 0,
          orderList: {}, // 订单列表
          showSend: false, // 是否显示发货弹窗
          sendGoodsInfo: { // 发货弹窗对象
            area: {}
          },
          status: '', // 物流状态
          peisongShow: false, // 是否显示配送商选择弹窗
          seekKeyword: '',
          peisongChooseIndex: 0, // 配送商选择下标
          peisongList: [], // 配送商数组
          peisongShowName: '', // 选择完后的配送
          showDeleteAlert: false, // 是否显示删除订单
          sellsendGoodsTime: '', // 卖家发货时间
          showBuyerAlert: false, // 买家取消订单原因
          cancelList: ['我不想买了', '信息填写有误，重新购买', '先看看样品再下单', '付款遇到问题（如余额不足、超出限额等）', '买错了', '其他原因'], // 取消订单原因数组
          $CancenOrderId: '', // 取消订单id
          $Orderreason: '', // 取消订单原因
          OrderCancelIndex: '', // 取消订单原因下标
          showItem: 3, // 允许展示多个产品
          invoiceAddress: {} // 发票信息
        }
      },
      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] : ''
          if (route.query.type === 'buyer') {
            sellsendGoodsTime = await axios.get(`/trade/tradebasicproperties/get/1054`)
          }
          return {
            orderList: data[0],
            sellsendGoodsTime: parseInt(sellsendGoodsTime.data.info)
          }
        }
        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)
        }
      },
      created() {
        if (this.orderList.lgtId && this.vendorType !== 'buyer') {
          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
              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) {
          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.data)
            })
          }
        },
        // 选择配送商
        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()
            }
          })
        },
        // 取消订单确认事件
        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 = ''
              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
      }
    }
</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: 0.88rem 0 0.98rem 0;
    height: calc(100vh - 0.88rem - 0.96rem);
    overflow-y: scroll;
    .order-details-wrap {
      .order-details-top {
        .top-t-wrap {
          background: #fff;
          padding: 0 0.2rem;
          height: 0.88rem;
          line-height: 0.88rem;
          .pull-left {
            font-size: 0.28rem;
            color: #333;
            span {
              color: #f21c1c
            }
          }
          .pull-right {
            @include lineHeight(0.56rem);
            border: 0.01rem 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;
            }
          }
        }
        .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;
            }
          }
        }
        .top-w-wrap {
          background: #fff;
          margin: 0.2rem 0;
          padding: 0 0.2rem;
          @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()
          }
        }
      }
      .order-list-wrap {
        li {
          margin-top: 0.2rem;
        }
        .list-wrap-title{
          padding: 0 0.2rem;
          background: #fff;
          @include lineHeight(0.88rem);
          font-size: 0.28rem;
          color: #333;
          .pull-left {
            width: 5rem;
            @include overFlowHidden()
          }
          .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;
            .list-wrap-content-brand {
              @include overFlowHidden();
              .spec {
                width: 4rem;
                @include overFlowHidden()
              }
            }
            .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.32rem;
              color: #f43938;
              max-width: 2.2rem;
              @include overFlowHidden();
              span {
                font-size: 0.24rem;
              }
            }
            .blue {
              color: #3f84f6
            }
          }
        }
        .list-btn {
          background: #fff;
          @include lineHeight(0.8rem);
          padding: 0 0.2rem;
          div {
            display: inline-block;
            width: 1.5rem;
            @include lineHeight(0.56rem);
            border: 0.01rem 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: 0.01rem solid #f43938;
            }
          }
        }
      }
      .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 {
        margin-top: 0.2rem;
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        font-size: 0.28rem;
        color: #333;
        padding: 0.2rem;
        background: #fff;
        .clearfix {
          @include lineHeight(0.5rem);
        }
        .small {
          font-size: 0.24rem;
          color: #999;
        }
      }
      .list-all-info{
        text-align: right;
        background: #fff;
        padding: 0 0.2rem;
        @include overFlowHidden();
        line-height: 0.5rem;
        font-size: 0.26rem;
        color: #333;
        border-bottom: 1px solid #e4e4e4;
        .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{
          img {
            transform: rotate(90deg);
            width: 0.16rem;
            height: 0.26rem;
            vertical-align: top;
            margin-top: 0.3rem;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
          }
          padding: 0 0.2rem;
          font-size: 0.28rem;
          color: #666;
          @include lineHeight(0.89rem);
          border-bottom: 1px solid #e4e4e4;
          .pull-right {
            @include overFlowHidden();
            max-width: 5rem;
          }
        }
      }
      .order-details-moreinfo {
        background: #fff;
        font-size: 0.24rem;
        color: #999;
        padding: 0.2rem 0;
        margin-bottom: 0.3rem;
       .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 {
          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.2rem;
            margin-right: 0.2rem;
          }
        }
      }
    }
    .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;
    }
    .order-details-invoiceinfo {
      padding: 0.1rem 0.4rem;
      background: #fff;
      .invoiceList {
        font-size: 0.24rem;
        color: #999;
        height: 0.5rem;
        line-height: 0.5rem;
      }
    }
  }
</style>