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

<template>
  <div class="order-wrapper">
    <div class="order-nav">
      <div :class="activeType === '' ? 'active': ''" @click="ChangeList('')"><span>全部</span></div>
      <div :class="activeType === 'tobeconfirmed' ? 'active' : ''" @click="ChangeList('tobeconfirmed')"><span>待付款</span></div>
      <div :class="activeType === 'comfirmed' ? 'active' : ''" @click="ChangeList('comfirmed')"><span>待发货</span></div>
      <div :class="activeType === 'inbound' ? 'active' : ''" @click="ChangeList('inbound')"><span>待收货</span></div>
    </div>
    <div class="search-content search-content2" v-if="vendorType !== 'buyer'" >
      <input type="text" placeholder="订单号/产品信息/买家名字" v-model="keyword" @keyup.13="searchOrderlist">
      <span @click="searchOrderlist" >
          <i class="iconfont icon-sousuo"></i>
      </span>
    </div>
    <div class="search-content search-content2" v-else >
      <input type="text" placeholder="订单号/产品信息/卖家名称" v-model="keyword" @keyup.13="searchOrderlist">
      <span @click="searchOrderlist" >
          <i class="iconfont icon-sousuo"></i>
      </span>
    </div>
    <ul class="order-list-wrap"  id="order-wrapper" v-show="orderList.length > 0">
      <li class="clearfix" v-for="item in orderList">
        <div class="orderNumber clearfix">
          <div class="pull-left">订单号：<span>{{item.orderid}}</span></div>
          <div class="pull-right">{{item.createtime || item.creattime | time}}</div>
        </div>
        <div class="list-wrap-title clearfix">
          <div class="pull-left" v-if="vendorType !== 'buyer'" @click="toShopdetails(item)">
            <span>买家：</span>
            <!--<span class="labelInfo_ForItem" v-if="item.storeid === '33069557578d44e69bd91ad12d28a8d4'">寄售</span>-->
            <span>{{item.buyentername || '(个人账户)'}}</span><span>&nbsp;|&nbsp;{{item.buyername}}</span>
          </div>
          <div class="pull-left" v-else @click="toShopdetails(item)">卖家：
            <!--<span class="labelInfo_ForItem" v-if="item.storeid === '33069557578d44e69bd91ad12d28a8d4'">寄售</span>-->
            {{item.sellername}}<img src="/images/mobile/user/icon-right.png"/></div>
          <div class="pull-right">
            <template v-if="vendorType === 'buyer'">
              <span class="red" v-if="item.status === 505 || item.status === 406 || item.status === 407 || item.status === 403 || item.status === 408">待卖家发货</span>
              <span class="red" v-else-if="item.status === 501 || item.status === 502 || item.status === 503 || item.status === 524">待付款</span>
              <span class="red" v-else-if="item.status === 404">待收货</span>
              <span class="red" v-else-if="item.status === 602 || item.status === 603 || item.status === 315 || item.status === 604 || item.status === 605 || item.status === 606">已取消</span>
              <span class="red" v-else-if="item.status === 504">付款确认中</span>
              <span class="red" v-else-if="item.status === 520 || item.status === 405">交易已完成</span>
              <span class="red" v-else-if="item.status === 525">卖家请求取消</span>
            </template>
            <template v-else>
              <span class="red" v-if="item.status === 502 || item.status === 406">买家已付款</span>
              <!--<span class="red">待发货</span>-->
              <span class="red" v-else-if="item.status === 602 || item.status === 603 || item.status === 315 || item.status === 604 || item.status === 605 || item.status === 606">订单已取消</span>
              <span class="red" v-else-if="item.status === 501 || item.status === 524">待买家付款</span>
              <span class="red" v-else-if="item.status === 404">待买家收货</span>
              <span class="red" v-else-if="item.status === 405 || item.status === 514 || item.status === 503 || item.status === 506">待商城付款</span>
              <span class="red" v-else-if="item.status === 606">交易关闭</span>
              <span class="red" v-else-if="item.status === 520">交易完成</span>
              <span class="red" v-else-if="item.status === 525">卖家发起取消,待确认</span>
              <span class="red" v-else-if="item.status === 504">付款确认中</span>
            </template>
          </div>
        </div>
        <div class="list-wrap-content" @click="toproductdetails(details)" v-for="(details, index) in item.purchaseDetails" v-if="index < item.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-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 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">{{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>x</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>¥</span>{{details.ensurePrice}}
            </div>
          </div>
        </div>
        <div class="lookMorePro" @click="item.showItem = item.purchaseDetails.length" v-if="item.showItem === 3 && item.purchaseDetails && item.purchaseDetails.length > 3">查看更多<img src="/images/mobile/user/icon-right.png"/></div>
        <div class="list-all-info clearfix">
          <!--共<span>{{item.batchQty}}</span>件商品&nbsp;&nbsp;-->
          <div>合计：
            <span class="pri"><a class="red">¥</a>{{item.ensurePrice }}</span>
            <span class="lab">(含运费：<a class="red">¥</a><a class="red">{{item.fare | priceFiter}}</a>)</span></div>
        </div>
        <div class="list-btn clearfix">
          <template v-if="vendorType === 'buyer'">
            <div class="pull-right sendGoods" v-if="item.status === 404" @click="buyerGetGoods(item)">确认收货</div>
            <div class="pull-right sendGoods" v-if="!item.installmentId && (item.status === 503 || item.status === 501)" @click="gotoPay(item)">立即付款</div>
            <div class="pull-right" @click="lookOrderDetail(item)">订单详情</div>
            <div class="pull-right sendGoods" @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" v-if="item.installmentId && (item.status === 503 || item.status === 504 || item.status === 524 ) && item.installment.status !== 505 && !item.againUpload">立即付款</div>
            <div class="pull-right" @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" v-if="item.installmentId && (item.status === 503 || item.status === 504 || item.status === 524 ) && item.installment.status !== 505 && item.againUpload">重新上传</div>
            <div class="pull-right" @click="cancelOrder(item)" v-if="item.status === 503 || item.status === 501 || item.status === 502">取消订单</div>
            <div class="pull-right" @click="deleteOrder(item)" v-if="item.status === 602 || item.status === 603 || item.status === 315 || item.status === 604 || item.status === 605 || item.status === 606">
              删除订单</div>
            <div @click="paidTime(item)" class="pull-right" v-if="_getHoursFromNow(item.paytime) > sellsendGoodsTime - 1 && item.status !== 404 && item.status !== 524 && item.status !== 520 && item.status !== 405 && item.status !== 521">提醒发货</div>
            <div @click="lookLogisticsInfo(item)" class="pull-right" v-if="item.status === 404 || item.status === 520 || item.status === 405 || item.status === 521">查看物流</div>
            <div class="pull-right cancat" @click="cancatAlert(item)">
              <i class="iconfont icon-kefu1"></i>联系卖家
            </div>
          </template>
          <template v-else>
            <div class="pull-right sendGoods" v-if="(item.status === 502 || item.status === 406) && !item.uasPurcid" @click="sendGoods(item)">点击发货</div>
            <div @click="changelogistics(item)" class="pull-right sendGoods" v-if="item.status === 404 && !item.uasPurcid">修改物流</div>
            <div @click="lookOrderDetail(item)" class="pull-right">订单详情</div>
            <div @click="deleteOrder(item)" class="pull-right" v-if="item.status === 602 || item.status === 603 || item.status === 315 || item.status === 604 || item.status === 605 || item.status === 606">
              删除订单</div>
            <div @click="lookLogisticsInfo(item)" class="pull-right" v-if="item.status === 404 || item.status === 520 || item.status === 405 || item.status === 503 || item.status === 514">查看物流</div>
            <div @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" class="pull-right" v-if="item.installmentId && ((item.installment.status === 503 && item.Overtime) || item.installment.status === 504) && item.status !== 606 && item.status !== 525">
              取消订单
            </div>
            <div @click="onMind('此订单为分期付款，请前往【PC】端进行相关操作')" class="pull-right" v-if="installmentDetailPaid(item) && item.status !== 525 && item.status !== 606">
              确认收款
            </div>
            <div class="pull-right cancat"  @click="cancatAlert(item)">
              <i class="iconfont icon-kefu1"></i>联系买家
            </div>
          </template>
        </div>
      </li>
    </ul>
    <div v-if="orderList.length === 0" class="com-none-state">
      <img src="/images/mobile/@2x/search-empty.png">
      <p>抱歉，暂无订单消息</p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>
    <div v-if="getOrderList && false"></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>
    <pull-up :fixId="'order-wrapper'"
             :searchMore="isSearchSearchingMore"
             :allPage="allPage"
             :page="page"
             @pullUpAction="getMoreSearch"></pull-up>
  </div>
</template>

<script>
  import { EncryptionFilter } from '~utils/tools.js'
  import { RemindBox, PullUp } from '~components/mobile/common'
  import axios from '~plugins/axios'
  export default {
    name: 'order',
    layout: 'mobile',
    middleware: 'authenticated',
    fetch({store, route}) {
      return route.query.type === 'buyer' ? Promise.all([
        store.dispatch('order/getBuyerOrderList', {
          count: 5,
          page: 1,
          isRate: false,
          currentPage: 1,
          sorting: { creattime: 'DESC' },
          status: '503-504-524-525-505-406-407-403-408-404-405-520-523-522-602-603-315-604-605-606'}
        )
      ]) : Promise.all([
        store.dispatch('order/getSellOrderList', {
          count: 5,
          page: 1,
          sorting: { createtime: 'DESC' },
          status: '',
          storeType: 'other'}
        )
      ])
    },
    data() {
      return {
        showStoreInfo: false,
        isSearchSearchingMore: false,
        page: 1,
        cancatInfo: {
          enterprise: {}
        }, // 联系信息
        collectResult: '',
        timeoutCount: 0,
        activeType: '', // 选择类型
        orderList: [], // 订单列表
        $status: '', // 传参状态
        showSend: false, // 是否显示发货弹窗
        sendGoodsInfo: { // 发货弹窗对象
          area: {}
        },
        peisongShow: false, // 是否显示配送商选择弹窗
        seekKeyword: '',
        peisongChooseIndex: 0, // 配送商选择下标
        peisongList: [], // 配送商数组
        peisongShowName: '', // 选择完后的配送
        showDeleteAlert: false, // 是否显示删除订单
        sellsendGoodsTime: '', // 卖家发货时间
        showBuyerAlert: false, // 买家取消订单原因
        cancelList: ['我不想买了', '信息填写有误，重新购买', '先看看样品再下单', '付款遇到问题（如余额不足、超出限额等）', '买错了', '其他原因'], // 取消订单原因数组
        $CancenOrderId: '', // 取消订单id
        $Orderreason: '', // 取消订单原因
        OrderCancelIndex: '', // 取消订单原因下标
        keyword: ''
      }
    },
    computed: {
      allPage() {
        return this.$store.state.order.order.orderList.data.totalPages
      },
      vendorType() {
        return this.$route.query.type
      },
      getOrderList() {
        this.orderList = []
        this.orderList = this._initSetParams(this.$store.state.order.order.orderList.data.content)
        return this.$store.state.order.order.orderList
      },
      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)
      }
    },
    async asyncData({route}) {
      if (route.query.type === 'buyer') {
        let { data } = await axios.get(`/trade/tradebasicproperties/get/1054`)
        return {
          sellsendGoodsTime: parseInt(data.info)
        }
      }
    },
    methods: {
      // 搜索
      searchOrderlist() {
        this.page = 1
        if (this.$route.query.type !== 'buyer') {
          // 卖家中心
          this.sellOrderList(this.activeType)
        } else {
          // 买家中心
          this.buyerOrderList(this.activeType)
        }
      },
      // 确认付款
      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}`)
      },
      checkInfo: function (str) {
        return str && str.trim() !== ''
      },
      // 联系买卖家
      cancatAlert(item) {
        this.showStoreInfo = true
        if (this.vendorType === 'buyer') {
          this.$http.get(`/api/store-service/stores?uuid=${item.storeid}&condition=store_uuid`).then(res => {
            this.cancatInfo = res.data
          })
        } else {
          this.$http.get(`/basic/enterprise/${item.buyerenuu}/tels`).then(res => {
            this.cancatInfo = res.data.data
          })
        }
      },
      getMoreSearch() {
        this.page++
        this.isSearchSearchingMore = true
        let params = {
          count: 5,
          page: this.page,
          sorting: {createtime: 'DESC'},
          status: this.$status,
          storeType: 'other',
          isRate: false,
          currentPage: this.page,
          keyword: this.keyword
        }
        if (this.vendorType === 'buyer') {
          params.sorting = { creattime: 'DESC' }
        }
        let url = this.vendorType !== 'buyer' ? '/trade/purchase/status/createtime' : '/trade/order/individual'
        this.$http.get(url, {params}).then(res => {
          this.isSearchSearchingMore = false
          res.data.content = this._initSetParams(res.data.content)
          this.orderList = [...this.orderList, ...res.data.content]
        })
      },
      ChangeList(_tp) {
        this.keyword = ''
        this.activeType = _tp
        this.page = 1
        if (this.$route.query.type !== 'buyer') {
          // 卖家中心
          this.sellOrderList(_tp)
        } else {
          // 买家中心
          this.buyerOrderList(_tp)
        }
      },
      // 买家中心订单列表加载数据
      buyerOrderList(_tp) {
        let status = '503-504-524-525-505-406-407-403-408-404-405-520-523-522-602-603-315-604-605-606'
        if (_tp === 'tobeconfirmed') {
          status = '503-504-524-525'
        } else if (_tp === 'comfirmed') {
          status = '505-406-407-403-408'
        } else if (_tp === 'inbound') {
          status = '404'
        }
        this.$status = status
        this.orderList = []
        this.$store.dispatch('order/getBuyerOrderList', {
          count: 5,
          page: 1,
          isRate: false,
          currentPage: 1,
          sorting: { creattime: 'DESC' },
          status: status,
          keyword: this.keyword
        })
      },
      // 卖家中心订单列表加载数据
      sellOrderList(_tp) {
        let status = ''
        if (_tp === 'tobeconfirmed') {
          status = '501-504-524-525'
        } else if (_tp === 'comfirmed') {
          status = '502-406'
        } else if (_tp === 'inbound') {
          status = '404-511'
        }
        this.peisongShowName = ''
        this.sendGoodsInfo.kuaidinumber = ''
        this.$status = status
        this.orderList = []
        this.$store.dispatch('order/getSellOrderList', {
          count: 5,
          page: 1,
          sorting: {createtime: 'DESC'},
          status: status,
          storeType: 'other',
          keyword: this.keyword
        })
      },
      // 是否为分期付款
      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(() => {
                  this.ChangeList(this.activeType)
                  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(() => {
                  this.ChangeList(this.activeType)
                  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(() => {
                    this.ChangeList(this.activeType)
                    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(() => {
                      this.ChangeList(this.activeType)
                      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('提醒成功')
            this.ChangeList(this.activeType)
          } 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
            this.ChangeList(this.activeType)
            this.showBuyerAlert = false
          })
        }
      },
      // 删除订单弹窗
      deleteOrder(item) {
        this.sendGoodsInfo = this.baseUtils.deepCopy(item)
        this.showDeleteAlert = true
      },
      // 删除订单确定按钮
      deleteFn() {
        if (this.$route.query.type !== 'buyer') {
          this.$http.post(`/trade/purchase/used/${this.sendGoodsInfo.purchaseid}`).then(res => {
            this.ChangeList(this.activeType)
            this.showDeleteAlert = false
            this.onMind('删除成功')
          })
        } else {
          this.$http.post(`/trade/order/used/${this.sendGoodsInfo.orderid}`).then(res => {
            this.ChangeList(this.activeType)
            this.showDeleteAlert = false
            this.onMind('删除成功')
          })
        }
      },
      // 修改物流
      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}`)
      },
      // 查看订单详情
      lookOrderDetail(item) {
        let id = EncryptionFilter(item.purchaseid)
        if (this.vendorType === 'buyer') {
          id = EncryptionFilter(item.orderid)
        }
        console.log(`/mobile/order/details?uuid=${id}&type=${this.vendorType}&paytype=${item.paytype}`)
        this.$router.push(`/mobile/order/details?uuid=${id}&type=${this.vendorType}&paytype=${item.paytype}`)
      },
      // 买家确认收货
      buyerGetGoods(item) {
        this.$http.put(`/trade/order/simpleinfo/ones/${item.id}?_status=ensureaccept`).then(res => {
          this.onMind('确认收货成功')
          this.ChangeList(this.activeType)
        })
      },
      // 买卖家中心字段同步化
      _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)
          }
          _obj[i].showItem = _obj[i].purchaseDetails.length > 3 ? 3 : _obj[i].purchaseDetails.length
        }
        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))
        console.log(hours)
        return hours
      },
      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)
      }
    },
    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
          }
        }
      }
    },
    components: {
      RemindBox,
      PullUp
    }
  }
</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);
  /*padding-bottom: 0.96rem;*/
  .order-nav {
    background: #fff;
    div {
      height: 0.82rem;
      line-height: 0.82rem;
      display: inline-block;
      width: 25%;
      text-align: center;
      font-size: .28rem;
      color: #666;
      &.active span{
        color: #3f84f6;
        border-bottom: 0.04rem solid #3f84f6;
        padding-bottom: 0.2rem;
      }
    }
  }
  .search-content2 {
    text-align: center;
    padding: .25rem 0 0 0;
    margin-top: 0 !important;
    input {
      width: 7.1rem;
      border: 1px solid #376ff3;
    }
    span {
      height: .46rem;
      line-height: .46rem;
    }
  }
  .order-list-wrap {
    height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem);
    overflow-y: scroll;
    li {
      margin-bottom: 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.4rem;
            @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;
        }
      }
    }
    .orderNumber {
      font-size: 0.27rem;
      color: #666;
      border-bottom: 1px solid #e4e4e4;
      @include lineHeight(0.88rem);
      background: #fff;
      padding: 0 0.2rem;
      .pull-left {
        width: 5rem;
        @include overFlowHidden();
        span {
          color: #3f84f6
        }
      }
    }
    .list-all-info{
      text-align: right;
      background: #fff;
      padding: 0 0.2rem;
      @include overFlowHidden();
      line-height: 0.66rem;
      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;
      }
    }
    .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;
        }
        &.cancat {
          height: 0.56rem;
          line-height: 0.56rem;
          border: 1px solid #3f84f6;
          color: #3f84f6;
          font-size: 0.26rem;
          text-align: center;
          border-radius: 3px;
          padding: 0 0.1rem;
          overflow: hidden;
          width: auto;
          i {
            font-size: 0.26rem;
          }
        }
      }
    }
    .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;
      }
    }
  }
  .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 - 1rem);
      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;
  }
  .com-none-state{
    background: #f1f3f6
  }
}
</style>