<template>
  <div class="orderDetails">
    <div class="head-title">
      <span @click="CommonJump('orderList')" class="blue point">订单列表</span> / 订单详情
    </div>
    <div class="content app-order-detail">
      <el-card class="app-order-status" shadow="never">
        <el-steps :active="activeStep" align-center>
          <el-step title="已下单" icon="el-icon-edit" :description="dataInfo.CreateDate">
            <i :class="activeStep>0?'step01Active':'step01'" slot="icon"></i>
          </el-step>
          <template>
            <el-step v-if="dataInfo.PaymentTime=='' && !exitState" title="未付款" icon="el-icon-edit"
              description="2020-05-13 16:36:11">
              <i :class="activeStep>1?'step02Active':'step02'" slot="icon"></i>
            </el-step>
            <el-step v-else title="已付款" icon="el-icon-edit" :description="dataInfo.PaymentTime">
              <i :class="activeStep>1?'step02Active':'step02'" slot="icon"></i>
            </el-step>
          </template>
          <template v-if="exitState">
            <el-step title="已取消" icon="el-icon-edit" :description="dataInfo.CancelTime">
              <i class="stepExit" slot="icon"></i>
            </el-step>
          </template>
          <template v-else>
            <template>
              <el-step v-if="activeStep>2" title="已发货" icon="el-icon-edit" :description="dataInfo.DeliveryTime">
                <i :class="activeStep>2?'step03Active':'step03'" slot="icon"></i>
              </el-step>
              <el-step v-else title="未发货" icon="el-icon-edit" description="">
                <i :class="activeStep>2?'step03Active':'step03'" slot="icon"></i>
              </el-step>
            </template>
            <template>
              <el-step v-if="activeStep==3" title="未收货" icon="el-icon-edit">
                <i :class="activeStep==4?'step04Active':'step04'" slot="icon"></i>
              </el-step>
              <el-step v-else-if="activeStep>3" title="已收货" icon="el-icon-edit" :description="dataInfo.ReceivingTime">
                <i :class="activeStep>3?'step04Active':'step04'" slot="icon"></i>
              </el-step>
            </template>
            <template>
              <el-step v-if="activeStep>4" title="已结束" icon="el-icon-edit" description="2020-05-13 16:36:11">
                <i :class="activeStep>4?'step05Active':'step05'" slot="icon"></i>
              </el-step>
              <el-step v-else title="未结束" icon="el-icon-edit" description="2020-05-13 16:36:11">
                <i :class="activeStep==5?'step05Active':'step05'" slot="icon"></i>
              </el-step>
            </template>
          </template>

        </el-steps>
      </el-card>
      <el-row :gutter="16">
        <el-col :span="8">
          <div class="card-box">
            <h3>订单信息</h3>
            <template v-if="dataInfo.OrderInfo">
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">订单号:</span>
                <div>{{dataInfo.OrderInfo.OrderNo}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">商户单号:</span>
                <div>{{dataInfo.OrderInfo.MerchantsNo}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">支付方式:</span>
                <span
                  class="el-tag el-tag--success el-tag--small el-tag--light is-hit">{{dataInfo.OrderInfo.PaymentWayName}}</span>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">配送方式:</span>
                <span
                  class="el-tag el-tag--primary el-tag--small el-tag--light is-hit">{{dataInfo.OrderInfo.DeliveryMethodName}}</span>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">用户:</span>
                <div>{{dataInfo.OrderInfo.UserName}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">收货人:</span>
                <div>{{dataInfo.OrderInfo.Consignee}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">电话:</span>
                <div>{{dataInfo.OrderInfo.Mobile}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">收货地址:</span>
                <div class="express-address">{{dataInfo.OrderInfo.DistrictAddress}}
                  {{dataInfo.OrderInfo.ShoppingAddress}}
                  <button v-if="activeStep==2 || activeStep==3" @click="ExitshAdress(dataInfo.OrderInfo)" type="button"
                    class="el-button el-button--text el-button--small is-circle">
                    <i class="el-icon-edit"></i>
                  </button>
                </div>
              </div>
              <div v-if="OrderInfo.OrderExpressList && OrderInfo.OrderExpressList.length==1" flex="dir:top"
                class="item-box">
                <div flex="dir:left cross:center">
                  <span class="label">物流信息:</span>
                  <template v-if="OrderInfo.OrderExpressList && OrderInfo.OrderExpressList.length==1">
                    <el-tag type="info" size="small">{{OrderInfo.OrderExpressList[0].ExpressName}}</el-tag>
                    <a :href="'https://www.baidu.com/s?wd='+OrderInfo.OrderExpressList[0].ExpressName+OrderInfo.OrderExpressList[0].ExpressNumber"
                      target="_blank" title="点击搜索运单号">
                      {{OrderInfo.OrderExpressList[0].ExpressNumber}}
                    </a>
                  </template>
                </div>
                <div flex="dir:left" style="margin-top:10px">
                  <span class="label">商家留言:</span>
                  <span>{{OrderInfo.OrderExpressList[0].Remark}}</span>
                </div>
              </div>
              <div v-if="OrderInfo.OrderExpressList.length>1" v-for="(item,index) in OrderInfo.OrderExpressList"
                :key="index" flex="dir:top" class="item-box">
                <el-row>
                  <el-col :span="4">
                    <div>
                      <div class="label"
                        style="background: rgb(255, 250, 239); color: rgb(230, 162, 60); padding: 3px 0px;">
                        收货信息:{{index+1}}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <div style="display:inline-flex;width:80%" flex="dir:top">
                      <div flex="cross:center">
                        <el-tag type="info" size="small">{{item.ExpressName}}</el-tag>
                        <a style="margin-left:5px"
                          :href="'https://www.baidu.com/s?wd='+item.ExpressName+item.ExpressNumber" target="_blank"
                          title="点击搜索运单号">
                          {{item.ExpressNumber}}
                        </a>
                        <button type="button" class="el-button el-button--text is-circle" style="padding: 2px 12px;">
                          <i class="el-icon-edit"></i>
                        </button>
                      </div>
                      <div flex="dir:left" style="margin-top: 10px;">
                        <span class="label">商家留言:</span>
                        <span></span>
                      </div>
                      <div v-for="(good,index2) in item.GoodsList" :key="index2" flex="dir:left"
                        style="margin-top: 10px;">
                        <span class="label">配送商品:</span>
                        <img :src="domainManager().ImageUrl+good.CoverImagePath" class="goods-pic">
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>

          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-box">
            <h3>表单信息</h3>
            <div flex="dir:left cross:center" class="item-box" style="flex-shrink: 0;">
              <span class="label">商家备注:</span>
              <div>
                {{dataInfo.Remark}}
                <i v-if="activeStep==2 || activeStep==3" @click="OrderExit" class="el-icon-edit"
                  style="color: rgb(64, 158, 255); cursor: pointer; margin-left: 10px;"></i>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div flex="dir:top" class="card-box">
            <h3>分销信息</h3>
            <div v-for="(item,index) in dataInfo.DistributionInfo" :key="index">
              <div class="share-title">
                <span v-if="item.Grade==0">自购返佣</span>
                <span v-if="item.Grade==1">一级分销商</span>
                <span v-if="item.Grade==2">二级分销商</span>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">姓名:</span>
                <div>{{item.UserName}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">手机号:</span>
                <div>{{item.Mobile}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box share-price">
                <span class="label orange-label">佣金:</span>
                <div>￥{{item.Commission}}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-card shadow="never">
        <el-table border :data="dataInfo.DetailList" style="width: 100%">
          <el-table-column prop="Id" label="商品标题">
            <template slot-scope="scope">
              <div flex="dir:left cross:center">
                <img :src="domainManager().ImageUrl+scope.row.CoverImagePath" alt=""
                  style="height: 60px; width: 60px; margin-right: 5px;">
                <div class="app-ellipsis">
                  <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                    {{scope.row.GoodsName}}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="规格" width="200">
            <template slot-scope="scope">
              <el-tag :key="index2" v-for="(list,index2) in scope.row.SpecificationList" style="top: 5px;position: relative;margin-right: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" size="mini">
                  {{list}}
              </el-tag>
            </template>

          </el-table-column>
          <el-table-column prop="Unit_Price" label="单价" width="120">
          </el-table-column>
          <el-table-column prop="Number" label="数量" width="80">
          </el-table-column>
          <el-table-column prop="Original_Price" label="原价" width="120">
          </el-table-column>
          <el-table-column prop="Final_Price" label="折扣后" width="120">
          </el-table-column>
        </el-table>
        <el-form label-width="200px" class="app-order-count-price">
          <el-form-item label="商品小计">
            ￥{{dataInfo.PreferPrice}}
          </el-form-item>
          <el-form-item label="运费">
            ￥{{dataInfo.FreightMoney}}
          </el-form-item>
          <el-form-item label="实付款">
            <span style="color: rgb(255, 69, 68);">￥<b>{{dataInfo.Income}}</b></span>
          </el-form-item>
        </el-form>
      </el-card>
      <div flex="dir:right" class="action-box">
        <el-button v-if="(activeStep==2 || activeStep==3) && !exitState" style="margin-left: 10px;" size="small"
          type="primary">打印发货单</el-button>
        <el-button style="margin-left: 10px;" size="small" type="primary">打印小票</el-button>
        <el-button @click="qrEnd(dataInfo)" v-if="activeStep==4 && !exitState" style="margin-left: 10px;" size="small"
          type="primary">确认完成</el-button>
        <el-button @click="ConfirmSh(dataInfo)" v-if="activeStep==3 && !exitState" style="margin-left: 10px;"
          size="small" type="primary">确认收货</el-button>
        <el-button @click="fhBtn(dataInfo)" v-if="activeStep==2 && !exitState" style="margin-left: 10px;" size="small"
          type="primary">发货</el-button>
      </div>
    </div>
    <!-- 修改收货地址 -->
    <el-dialog title="修改收货地址" :visible.sync="shDig" width="600px">
      <el-form :model="shMsg" :rules="shMsgrule" ref="shMsg" label-width="80px">
        <el-form-item label="收件人" prop="Consignee">
          <el-input size="small" v-model="shMsg.Consignee"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="Mobile">
          <el-input type="number" size="small" v-model="shMsg.Mobile"></el-input>
        </el-form-item>
        <el-form-item label="所在区域" prop="Province">
          <el-select size="small" @change="shMsg.City='',getCity(shMsg.Province)" v-model="shMsg.Province"
            style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select size="small" @change="shMsg.District='',getArea(shMsg.City)" v-model="shMsg.City"
            style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select size="small" v-model="shMsg.District" style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in areaList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="ShoppingAddress">
          <el-input size="small" v-model="shMsg.ShoppingAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="shDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="shsubmitForm('shMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 订单取消 -->
    <el-dialog title="修改" :visible.sync="exitDig" width="600px">
      <el-form :model="exitMsg" ref="exitMsg" label-width="0">
        <p style="padding:10px 0" v-if="exitMsg.Type==1">修改备注：</p>
        <el-form-item>
          <el-input type="textarea" row="2" size="small" v-model="exitMsg.Remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="exitDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('exitMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog custom-class="app-send" title="发货" :visible.sync="fhDig" width="35%">
      <div class="title-box">
        <span class="text">选择发货商品</span>
        <span>(默认全选)</span>
      </div>
      <el-table ref="fahuoTable" :data="fahuoList" @selection-change="TableSelectChange" style="width: 100%">
        <el-table-column :selectable="selectable" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="图片" width="60">
          <template slot-scope="scope">
            <img style="width:30px;height:30px" :src="domainManager().ImageUrl+scope.row.CoverImagePath" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="GoodsName" label="名称" width="314">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsBindExpress==1" style="margin-left:5px" size="small" type="success">已发货</el-tag>
            <span>{{scope.row.GoodsName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="数量" width="80">
        </el-table-column>
        <el-table-column prop="Specification" label="规格">
        </el-table-column>
      </el-table>
      <div class="title-box"><span class="text">物流信息</span></div>
      <el-form :model="fhMsg" ref="exitMsg" :rules="fhrules" label-width="130px">
        <el-form-item label="物流快递">
          <el-radio v-model="fhMsg.Type" :label="1">快递</el-radio>
          <el-radio v-model="fhMsg.Type" :label="2">其他方式</el-radio>
        </el-form-item>
        <template v-if="fhMsg.Type==1">
          <el-form-item label="快递公司" prop="ExpressId">
            <el-select class="w200" size="small" v-model="fhMsg.ExpressId" filterable placeholder="请选择">
              <el-option v-for="item in ExpressList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收件人邮编">
            <el-input type="number" min="1" size="small" v-model="fhMsg.PostCode"></el-input>
          </el-form-item>
          <el-form-item label="快递单号" prop="ExpressNumber">
            <el-input size="small" v-model="fhMsg.ExpressNumber">
              <!-- <el-button slot="append"> 获取面单</el-button> -->
            </el-input>
          </el-form-item>
          <el-form-item label="商家留言">
            <el-input type="textarea" row="2" size="small" v-model="fhMsg.Remark"></el-input>
          </el-form-item>
        </template>
        <template v-if="fhMsg.Type==2">
          <el-form-item label="物流内容">
            <el-input type="textarea" row="2" size="small" v-model="fhMsg.Remark"></el-input>
          </el-form-item>
        </template>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="fhDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="FhsubmitForm('fhMsg')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeStep: 0,
        tableData: [{
          Id: 1
        }],
        OrderId: 0,
        dataInfo: {},
        OrderInfo: {},
        shDig: false,
        shMsg: {
          OrderId: 0,
          Consignee: '',
          Mobile: '',
          Province: '',
          City: '',
          District: '',
          ShoppingAddress: '',
        },
        shMsgrule: {
          Province: [{
            required: true,
            message: '请选择省',
            trigger: 'change'
          }],
          ShoppingAddress: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          Mobile: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          Consignee: [{
            required: true,
            message: '请输入收件人',
            trigger: 'blur'
          }],
        },
        provinceList: [],
        cityList: [],
        areaList: [],
        exitMsg: {
          OrderId: 0,
          Type: 1,
          Remark: '',
        },
        exitDig: false,
        fhrules: {
          ExpressId: [{
            required: true,
            message: '请选择快递公司',
            trigger: 'change'
          }],
          ExpressNumber: [{
            required: true,
            message: '请输入快递单号',
            trigger: 'blur'
          }],
        },
        fhMsg: {
          Id: 0,
          OrderId: '',
          Type: 1,
          ExpressId: '',
          PostCode: '',
          ExpressNumber: '',
          Remark: '',
          OrderDetailIdList: [],
        },
        fahuoList: [],
        fhDig: false,
        checkfhList: [],
        ExpressList: [],
        exitState: false,
      };
    },
    created() {
      if (this.$route.query.OrderId) {
        this.OrderId = this.$route.query.OrderId;
        this.getData()
        this.getProvince();
        this.getExpressInfo();

      }
    },
    methods: {
      // 确认完成
      qrEnd(item, num) {
        let msg = {
          OrderId: item.OrderId,
          Type: num
        };
        let that = this;
        that.$confirm('是否完成该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/order/SetOrderOperation', msg,
            res => {
              if (res.data.resultCode === 1) {
                this.getList();
                this.Success(res.data.message)

              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      // 确认收货
      ConfirmSh(item) {
        let msg = {
          OrderId: item.OrderId,
          Type: 5
        };
        let that = this;
        that.$confirm('是否确认收货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/order/SetOrderOperation', msg,
            res => {
              if (res.data.resultCode === 1) {
                this.getData();
                this.Success(res.data.message)

              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      FhsubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fhMsg.OrderDetailIdList = [];
            if (this.checkfhList.length == 0) {
              this.Error("至少选择一项！");
              return;
            }
            this.checkfhList.forEach(item => {
              this.fhMsg.OrderDetailIdList.push(item.Id);
            })
            if (this.fhMsg.Type == 2) {
              this.fhMsg.ExpressId = "";
              this.fhMsg.PostCode = "";
              this.fhMsg.ExpressNumber = "";
            }
            this.apipost('/api/order/SetOrderSendGoods', this.fhMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.fhDig = false;
                  this.Success(res.data.message)

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      TableSelectChange(val) {
        this.checkfhList = val;

      },
      selectable(row, index) {
        return row.IsBindExpress === 2
      },
      // 发货
      fhBtn(item) {
        this.fhDig = true;
        this.fhMsg = {
          Id: 0,
          OrderId: item.OrderId,
          Type: 1,
          ExpressId: '',
          PostCode: '',
          ExpressNumber: '',
          Remark: '',
          OrderDetailIdList: [],
        }
        this.fahuoList = item.DetailList;
      },
      getData() {
        this.apipost("/api/order/GetGoodsOrderInfo", {
          OrderId: this.OrderId
        }, res => {
          this.dataInfo = res.data.data;
          let data = res.data.data;
          // 未付款
          if (data.PaymentTime == '' && data.DeliveryTime == '') {
            this.activeStep = 1;
          }
          // 已付款 未发货
          else if (data.PaymentTime != '' && data.DeliveryTime == '' && data.ReceivingTime == '') {
            this.activeStep = 2;
          }
          // 已发货  未收货
          else if (data.PaymentTime != '' && data.DeliveryTime != '' && data.ReceivingTime == '') {
            this.activeStep = 3;
          }
          // 已收货  未结束
          else if (data.PaymentTime != '' && data.DeliveryTime != '' && data.ReceivingTime != '' && data
            .FinishTime == '') {
            this.activeStep = 4;
          }
          // 已结束
          else if (data.FinishTime != '') {
            this.activeStep = 5;
          }
          if (data.OrderStatus == 7) {
            this.exitState = true;
            this.activeStep = 5;
          }
          if (data.OrderInfo) {
            this.OrderInfo = data.OrderInfo;
          }
        })
      },
      // 快递公司
      getExpressInfo() {
        this.apipost("/api/MallBase/GetExpressInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.ExpressList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      // 修改备注
      OrderExit() {
        this.exitMsg = {
          OrderId: this.dataInfo.OrderId,
          Type: 1,
          Remark: this.dataInfo.Remark,
        }
        this.exitDig = true;
      },
      // 订单操作
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('/api/order/SetOrderOperation', this.exitMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.Success(res.data.message)
                  this.exitDig = false;

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      // 修改收货地址
      ExitshAdress(item) {
        this.shDig = true;
        this.shMsg = {
          OrderId: this.dataInfo.OrderId,
          Consignee: item.Consignee,
          Mobile: item.Mobile,
          Province: item.Province,
          City: item.City,
          District: item.District,
          ShoppingAddress: item.ShoppingAddress,
        }
        this.getCity(item.Province);
        this.getArea(item.City);
      },
      shsubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('/api/order/SetOrderShopingAddress', this.shMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.Success(res.data.message)
                  this.shDig = false;

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      getArea(val) {
        this.apipost("/api/Destination/GetChildList", {
          Id: val
        }, res => {
          this.areaList = res.data.data;
        })
      },
      getCity(val) {
        this.apipost("/api/Destination/GetChildList", {
          Id: val
        }, res => {
          this.cityList = res.data.data;
          if (this.cityList.length > 0) {
            this.getArea(this.cityList[0].ID)
          }
        })
      },
      getProvince() {
        this.apipost("/api/Destination/GetChildList", {
          Id: 2
        }, res => {
          this.provinceList = res.data.data;
          if (this.provinceList.length > 0) {
            this.getCity(this.provinceList[0].ID)
          }
        })
      },

    },
    mounted() {

    }
  };

</script>
<style>
  .app-order-detail .goods-pic {
    width: 35px;
    height: 35px;
    margin: 0 4px;
  }

  .app-order-detail .express-address {
    width: 80%;
  }

  .app-order-detail .action-box {
    padding: 10px 20px;
  }

  .app-order-detail .app-order-count-price .el-form-item {
    margin-bottom: 5px;
  }

  .app-order-detail .app-order-count-price {
    float: right;
    margin-right: 55px;
    font-size: 12px;
    text-align: right;
    margin-top: 15px;
  }

  .app-order-detail h3 {
    padding: 15px 0;
  }

  .app-order-detail .share-price {
    color: #EF8933;
  }

  .app-order-detail .share-title {
    font-size: 15px;
    margin: 10px 0 5px;
  }

  .app-order-detail .card-box .label {
    color: #999999;
    margin-right: 10px;
  }

  .app-order-detail .item-box {
    margin-bottom: 10px;
  }

  .app-order-detail .card-box {
    border: 1px solid #EBEEF5;
    border-radius: 3px;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
  }

  .app-order-detail .stepExit {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_6_active.png");
  }

  .app-order-detail .step05 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_5.png");
  }

  .app-order-detail .step04 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_4.png");
  }

  .app-order-detail .step03 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_3.png");
  }

  .app-order-detail .step02 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_2.png");
  }

  .app-order-detail .step05Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_5_active.png");
  }

  .app-order-detail .step04Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_4_active.png");
  }

  .app-order-detail .step03Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_3_active.png");
  }

  .app-order-detail .step02Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_2_active.png");
  }

  .app-order-detail .step01Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_1_active.png");
  }

  .app-order-detail .app-order-status {
    padding: 50px 120px;
    margin-bottom: 30px;
  }

  .orderDetails .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>
